:root{
    --ground:    #FBFBF9;
    --panel:     #F2F2EE;
    --ink:       #0E0E11;
    --ink-soft:  #5A5A63;
    --rule:      #DEDED7;
    --mark:      #F5C400;      /* the zinger: a surface, never a text color */
    --on-mark:   #0E0E11;
    --live:      #2E7D52;
    --soon:      #8A7A2E;

    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
    --meta:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* each product's name in its own voice */
    --f-agentgo:  "Nunito", "Avenir Next Rounded", "SF Pro Rounded", sans-serif;
    --f-catchfax: "Newsreader", Georgia, "Times New Roman", serif;

    --wrap: 1140px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:   #0C0C0E;
      --panel:    #151518;
      --ink:      #F2F2EF;
      --ink-soft: #9B9BA5;
      --rule:     #27272C;
      --mark:     #FFD426;
      --on-mark:  #0C0C0E;
      --live:     #5DD39E;
      --soon:     #D6BC5A;
    }
  }
  :root[data-theme="dark"]{
    --ground:   #0C0C0E;
    --panel:    #151518;
    --ink:      #F2F2EF;
    --ink-soft: #9B9BA5;
    --rule:     #27272C;
    --mark:     #FFD426;
    --on-mark:  #0C0C0E;
    --live:     #5DD39E;
    --soon:     #D6BC5A;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body);
    font-size:18px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:32px; }
  @media (max-width:640px){ .wrap{ padding-inline:20px; } }

  h1,h2,h3{ margin:0; font-family:var(--display); text-wrap:balance; }

  .meta{
    font-family:var(--meta);
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* highlighter: always dark text on the mark, so it holds in both themes */
  mark{
    background:var(--mark);
    color:var(--on-mark);
    padding:.04em .16em;
    margin-inline:-.04em;
    border-radius:1px;
  }

  a{ color:inherit; text-decoration:none; }
  :focus-visible{ outline:2px solid var(--mark); outline-offset:4px; }

  /* app icon tiles: real App Store artwork, framed identically */
  .appicon{
    display:block; flex:none;
    border-radius:22%;
    box-shadow:0 1px 2px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05) inset;
  }

  /* ── top bar ── */
  .bar{ border-bottom:1px solid var(--rule); }
  .bar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; padding-block:20px;
  }
  .mark-x{
    font-family:var(--display);
    font-weight:900; font-stretch:118%;
    font-size:22px; letter-spacing:-.02em;
  }
  .mark-x i{ font-style:normal; background:var(--mark); color:var(--on-mark); padding:0 .1em; }

  /* ── hero ── */
  .hero .wrap{ padding-block:92px 76px; }
  @media (max-width:760px){ .hero .wrap{ padding-block:58px 48px; } }

  .hero h1{
    font-weight:800; font-stretch:112%;
    font-size:clamp(2.35rem, 7.2vw, 5.4rem);
    line-height:.98; letter-spacing:-.036em;
    max-width:14ch; margin-top:22px;
  }
  .hero .thesis{
    margin-top:30px; max-width:60ch;
    font-size:21px; color:var(--ink-soft);
  }
  .hero .thesis strong{ color:var(--ink); font-weight:600; }

  /* ── index strip ── */
  .index{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--panel); }
  .index .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
  @media (max-width:1100px) and (min-width:861px){
    .index .wrap{ grid-template-columns:repeat(2,1fr); }
    .index a:nth-child(3){ border-left:none; padding-left:0; }
    .index a:nth-child(n+3){ border-top:1px solid var(--rule); }
  }
  .index a{
    padding:24px 26px;
    border-left:1px solid var(--rule);
    display:flex; align-items:center; gap:15px;
    transition:background .14s ease;
  }
  .index a:first-child{ border-left:none; padding-left:0; }
  .index a:hover{ background:var(--ground); }
  .index .appicon{ width:46px; height:46px; }
  .index .txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .index .nm{
    font-family:var(--display); font-weight:800; font-stretch:108%;
    font-size:21px; letter-spacing:-.02em;
  }
  .index .ln{ font-size:15px; color:var(--ink-soft); line-height:1.35; }
  @media (max-width:860px){
    .index .wrap{ grid-template-columns:1fr; }
    .index a{ border-left:none; border-top:1px solid var(--rule); padding:18px 0; }
    .index a:first-child{ border-top:none; }
  }

  /* ── product specimens ── */
  .spec{ border-bottom:1px solid var(--rule); }
  .spec .wrap{ padding-block:76px; }
  @media (max-width:760px){ .spec .wrap{ padding-block:52px; } }

  .spec .appicon{ width:62px; height:62px; margin-bottom:22px; }

  .spec .status{ display:inline-flex; align-items:center; gap:8px; }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--live); }
  .dot.soon{ background:var(--soon); }

  .spec h2{
    font-weight:900; font-stretch:120%;
    font-size:clamp(2.4rem, 8vw, 5rem);
    line-height:.94; letter-spacing:-.04em;
    margin-top:16px;
  }
  /* AgentGo's interface is set in SF Rounded, so its name is too */
  .spec h2.n-agentgo{
    font-family:var(--f-agentgo); font-stretch:normal;
    font-weight:900; letter-spacing:-.032em;
  }
  /* CatchFax carries the serif from its own product page */
  .spec h2.n-bathroomcodes{ font-size:clamp(2rem, 6.6vw, 4.2rem); }
  .spec h2.n-catchfax{
    font-family:var(--f-catchfax); font-stretch:normal;
    font-weight:600; letter-spacing:-.022em;
  }
  /* B.Closer ships a real wordmark. Background stripped and recoloured per theme
     so it sits at the same optical weight as the type in the other two sections. */
  .spec .wordmark{
    margin-top:18px;
    height:clamp(32px, 6.2vw, 64px); width:auto; max-width:100%;
  }
  .spec .wordmark.wm-light{ display:block; }
  .spec .wordmark.wm-dark{ display:none; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .spec .wordmark.wm-light{ display:none; }
    :root:not([data-theme="light"]) .spec .wordmark.wm-dark{ display:block; }
  }
  :root[data-theme="dark"] .spec .wordmark.wm-light{ display:none; }
  :root[data-theme="dark"] .spec .wordmark.wm-dark{ display:block; }

  .spec .pitch{
    margin-top:24px; max-width:30ch;
    font-family:var(--display); font-weight:500; font-stretch:100%;
    font-size:clamp(1.25rem, 2.6vw, 1.75rem);
    line-height:1.24; letter-spacing:-.015em;
  }
  .spec .go{
    display:inline-block; margin-top:22px; padding:9px 16px; border-radius:999px;
    background:var(--mark); color:var(--on-mark); text-decoration:none;
    font-family:var(--meta); font-size:14px; font-weight:500;
  }
  .spec .go:hover{ filter:brightness(.95); }
  .spec .cols{
    margin-top:40px;
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:52px;
  }
  @media (max-width:860px){ .spec .cols{ grid-template-columns:1fr; gap:34px; } }

  .spec .cols p{ margin:0 0 16px; max-width:58ch; }
  .spec .cols p:last-child{ margin-bottom:0; }

  .sheet{ display:grid; gap:0; align-content:start; }
  .sheet div{
    display:flex; justify-content:space-between; gap:18px;
    padding:11px 0; border-top:1px solid var(--rule);
    font-family:var(--meta); font-size:12.5px; line-height:1.5;
  }
  .sheet div:last-child{ border-bottom:1px solid var(--rule); }
  .sheet .k{ color:var(--ink-soft); white-space:nowrap; }
  .sheet .v{ text-align:right; }

  /* ── practice ── */
  .practice{ background:var(--panel); border-bottom:1px solid var(--rule); }
  .practice .wrap{ padding-block:76px; }
  .practice h2{
    font-weight:800; font-stretch:110%;
    font-size:clamp(1.8rem,4.2vw,2.9rem); letter-spacing:-.03em; line-height:1.04;
    margin-top:18px; max-width:18ch;
  }
  .tenets{ margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
  @media (max-width:1060px){ .tenets{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .tenets{ grid-template-columns:1fr; gap:28px; } }
  .tenet h3{
    font-weight:700; font-stretch:104%; font-size:17.5px; letter-spacing:-.01em;
    padding-top:16px; border-top:2px solid var(--mark);
  }
  .tenet p{ margin:10px 0 0; color:var(--ink-soft); font-size:16.5px; }

  /* ── next app vote ── */
  .next{ border-bottom:1px solid var(--rule); }
  .next .wrap{ padding-block:76px; }
  .next h2{
    font-weight:800; font-stretch:110%;
    font-size:clamp(1.8rem,4.2vw,2.9rem); letter-spacing:-.03em; line-height:1.04;
    margin-top:18px; max-width:18ch;
  }
  .next .lede{ margin-top:18px; max-width:56ch; color:var(--ink-soft); }
  .votes{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:860px){ .votes{ grid-template-columns:1fr; } }
  .vote{
    display:flex; flex-direction:column; padding:24px; border:1px solid var(--rule);
    border-radius:14px; background:var(--panel); color:inherit; text-decoration:none;
  }
  .vote:hover{ border-color:var(--ink-soft); }
  .vote h3{ font-weight:700; font-stretch:104%; font-size:17.5px; letter-spacing:-.01em; margin:0; }
  .vote p{ margin:10px 0 18px; color:var(--ink-soft); font-size:16.5px; flex:1; }
  .vote .cta{
    align-self:flex-start; font-family:var(--meta); font-size:13px; padding:6px 12px;
    border-radius:999px; background:var(--mark); color:var(--on-mark);
  }

  /* ── contact ── */
  .end .wrap{ padding-block:84px; }
  .end h2{
    font-weight:900; font-stretch:118%;
    font-size:clamp(2rem,5.6vw,3.6rem); letter-spacing:-.035em; line-height:1;
    max-width:20ch;
  }
  .end p{ margin-top:22px; max-width:52ch; color:var(--ink-soft); font-size:19px; }
  .end .mailto{
    display:inline-block; margin-top:28px;
    font-family:var(--display); font-weight:700; font-stretch:106%;
    font-size:clamp(1.3rem,3.4vw,2rem); letter-spacing:-.025em;
    border-bottom:4px solid var(--mark); padding-bottom:3px;
  }

  footer{ border-top:1px solid var(--rule); }
  footer .wrap{
    padding-block:30px;
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  }

  /* ── phones ──
     Everything above assumes room to breathe. At 430px and under the display
     sizes are clamped tighter, and the spec sheets stack key over value rather
     than squeezing a nowrap label and a long value onto one line. */
  @media (max-width:430px){
    .hero .wrap{ padding-block:44px 38px; }
    .hero h1{ font-size:clamp(2.05rem, 9.6vw, 2.7rem); letter-spacing:-.03em; }
    .hero .thesis{ font-size:18.5px; margin-top:24px; }

    .spec .wrap, .practice .wrap{ padding-block:46px; }
    .spec h2{ font-size:clamp(2.1rem, 9.8vw, 2.8rem); letter-spacing:-.034em; }
    .spec .appicon{ width:54px; height:54px; margin-bottom:18px; }
    .spec .pitch{ font-size:1.2rem; margin-top:18px; }
    .spec .cols{ margin-top:30px; }
    .spec .wordmark{ height:30px; margin-top:14px; }

    .sheet div{ flex-direction:column; align-items:flex-start; gap:1px; padding:10px 0; }
    .sheet .v{ text-align:left; }

    .end .wrap{ padding-block:54px; }
    .tenets{ margin-top:34px; }
  }

  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

  /* ── shared nav ── */
  .bar .right{ display:flex; align-items:center; gap:8px 22px; flex-wrap:wrap; }
  .bar .nav{ font-family:var(--meta); font-size:13px; letter-spacing:.06em; }
  .bar .nav:hover, footer a:hover{ text-decoration:underline; text-underline-offset:3px; }

  /* ── about ── */
  .about .wrap{ padding-block:92px 84px; }
  @media (max-width:760px){ .about .wrap{ padding-block:58px 52px; } }
  .about h1{
    font-weight:800; font-stretch:112%;
    font-size:clamp(2.2rem, 6.4vw, 4.6rem);
    line-height:1; letter-spacing:-.034em;
    max-width:16ch; margin-top:22px;
  }
  .about .lede{ margin-top:28px; max-width:60ch; font-size:21px; color:var(--ink-soft); }
  .about .lede strong{ color:var(--ink); font-weight:600; }
  .person{
    margin-top:56px; max-width:640px; padding:30px 32px;
    background:var(--panel); border:1px solid var(--rule); border-radius:16px;
    border-top:4px solid var(--mark);
  }
  .person h2{ font-weight:800; font-stretch:108%; font-size:clamp(1.6rem,3.6vw,2.2rem); letter-spacing:-.025em; line-height:1.05; }
  .person .role{ margin-top:8px; }
  .person p{ margin:18px 0 0; color:var(--ink-soft); }
  .person .li{
    display:inline-flex; align-items:center; gap:9px; margin-top:22px;
    padding:9px 16px; border-radius:999px; background:var(--mark); color:var(--on-mark);
    font-family:var(--meta); font-size:14px; font-weight:500;
  }
  .person .li svg{ width:16px; height:16px; }
  @media (max-width:430px){ .person{ padding:24px 22px; } .about .lede{ font-size:18.5px; } }