/* Pier — shared site stylesheet. Lifted verbatim from design/landing/index.html
   (the approved design); tokens mirror design/brand/tokens.css. Any token change
   must be mirrored there. */
/* ======================================================================
     Pier — landing page. Tokens from design/brand/tokens.css.
     NOTE: values below duplicate tokens.css under shortened names —
     any token change must be mirrored in design/brand/tokens.css.
     Three theme states: bare :root (light), OS-dark unless data-theme=light,
     explicit data-theme=dark.
     ====================================================================== */
  :root {
    --bg: #FFFFFF; --bg-raised: #F6F5F3; --bg-inset: #EFEDEA;
    --ink: #1C1B1A; --ink-2: #6C6866; --ink-3: #98928E;
    --line: rgba(28,27,26,.10); --line-strong: rgba(28,27,26,.18);
    --accent: #C7431F; --accent-hover: #A83617;
    --accent-tint: #FBE9E2; --on-accent: #FFFFFF;
    --ok: #1F8A4C; --warn: #96660A; --danger: #B3273E;
    --card: #FFFFFF;
    --e2: 0 0 0 .5px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.14);
    --e4: 0 0 0 .5px rgba(0,0,0,.18), 0 30px 80px rgba(0,0,0,.28);
    --wall: linear-gradient(160deg, #DCE3EC 0%, #E9E2D8 45%, #E5C9B6 78%, #D9A98F 100%);
    --vib: rgba(246,245,243,.78);
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Helvetica Neue", "Roboto Flex", Roboto, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #151413; --bg-raised: #201E1D; --bg-inset: #2A2726;
      --ink: #F4F2F0; --ink-2: #A5A09C; --ink-3: #8A847F;
      --line: rgba(244,242,240,.12); --line-strong: rgba(244,242,240,.22);
      --accent: #FF7A59; --accent-hover: #FF8F73;
      --accent-tint: rgba(255,122,89,.14); --on-accent: #201008;
      --ok: #4CC38A; --warn: #E5A54B; --danger: #F2688C;
      --card: #262423;
      --e2: 0 0 0 .5px rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.45);
      --e4: 0 0 0 .5px rgba(255,255,255,.13), 0 30px 80px rgba(0,0,0,.60);
      --wall: linear-gradient(160deg, #2A2B33 0%, #232028 45%, #352320 78%, #4A2A20 100%);
      --vib: rgba(32,30,29,.75);
    }
  }
  :root[data-theme="dark"] {
    --bg: #151413; --bg-raised: #201E1D; --bg-inset: #2A2726;
    --ink: #F4F2F0; --ink-2: #A5A09C; --ink-3: #8A847F;
    --line: rgba(244,242,240,.12); --line-strong: rgba(244,242,240,.22);
    --accent: #FF7A59; --accent-hover: #FF8F73;
    --accent-tint: rgba(255,122,89,.14); --on-accent: #201008;
    --ok: #4CC38A; --warn: #E5A54B; --danger: #F2688C;
    --card: #262423;
    --e2: 0 0 0 .5px rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.45);
    --e4: 0 0 0 .5px rgba(255,255,255,.13), 0 30px 80px rgba(0,0,0,.60);
    --wall: linear-gradient(160deg, #2A2B33 0%, #232028 45%, #352320 78%, #4A2A20 100%);
    --vib: rgba(32,30,29,.75);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--bg); color: var(--ink);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { color: var(--accent-hover); }
  :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

  .eyebrow {
    font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent);
  }
  h1, h2, h3 { text-wrap: balance; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; border-radius: 10px;
    font: 600 15px/1.2 var(--sans); padding: 12px 22px;
    transition: background .15s ease, color .15s ease;
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
  .btn-quiet { background: var(--bg-inset); color: var(--ink); }
  .btn-quiet:hover { background: var(--line); color: var(--ink); }

  /* ---- Nav -------------------------------------------------------------- */
  nav {
    position: sticky; top: 0; z-index: 10;
    background: var(--vib);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--line);
  }
  .nav-in { display: flex; align-items: center; gap: 28px; height: 60px; }
  .logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 17px/1 var(--sans); }
  .logo svg { border-radius: 7px; }
  .nav-links { display: flex; gap: 24px; margin-left: auto; }
  .nav-links a { color: var(--ink-2); font: 500 14px/1.2 var(--sans); }
  .nav-links a:hover { color: var(--ink); }
  nav .btn { padding: 8px 16px; font-size: 13.5px; }
  @media (max-width: 720px) { .nav-links { display: none; } nav .btn { margin-left: auto; } }

  /* ---- Hero ------------------------------------------------------------- */
  .hero { padding: 88px 0 96px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero h1 {
    font: 700 clamp(40px, 5.4vw, 62px)/1.05 var(--sans);
    letter-spacing: -0.02em; margin: 18px 0 20px;
  }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero .sub { color: var(--ink-2); max-width: 34em; font-size: 19px; }
  .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
  .hero-ctas .demo { color: var(--ink-2); font: 500 15px/1.2 var(--sans); }
  .hero-ctas .demo:hover { color: var(--ink); }
  .hero-note { margin-top: 14px; color: var(--ink-3); font: 400 13px/1.5 var(--sans); }

  /* Hero visual: desktop with incoming-call toast */
  .desk {
    background: var(--wall); border-radius: 20px; overflow: hidden;
    box-shadow: var(--e4); position: relative; min-height: 380px;
  }
  .desk-bar {
    height: 25px; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 0 12px; background: var(--vib); color: var(--ink);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums;
  }
  .toast {
    width: 320px; margin: 14px 14px 0 auto;
    background: var(--vib);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 14px; box-shadow: var(--e2);
    padding: 12px; color: var(--ink);
  }
  @media (prefers-reduced-motion: no-preference) {
    .toast { animation: drop .5s cubic-bezier(.2,.9,.3,1.15) .3s both; }
    @keyframes drop { from { opacity: 0; transform: translateY(-16px); } }
    .toast .ring-avatar { animation: ring 1.6s ease-in-out 1s 2; transform-origin: 50% 40%; }
    @keyframes ring { 0%,100% { transform: rotate(0) } 10% { transform: rotate(-9deg) } 20% { transform: rotate(8deg) } 30% { transform: rotate(-6deg) } 40% { transform: rotate(4deg) } 50% { transform: rotate(0) } }
  }
  .toast-top { display: flex; align-items: center; gap: 10px; }
  .ring-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: #B4654A; color: #FFF; display: grid; place-items: center;
    font: 600 14px/1 var(--sans);
  }
  .toast-name { font: 600 14px/1.25 var(--sans); }
  .toast-sub { color: var(--ink-2); font: 400 12px/1.35 var(--sans); }
  .toast-btns { display: flex; gap: 8px; margin-top: 12px; }
  .toast-btns .btn { flex: 1; padding: 8px 0; font-size: 13px; border-radius: 9px; }
  .btn-decline { background: var(--bg-inset); color: var(--danger); }
  .btn-decline:hover { background: var(--line); color: var(--danger); }
  .desk-caption {
    position: absolute; left: 16px; bottom: 14px;
    background: var(--vib); border-radius: 8px; padding: 6px 10px;
    color: var(--ink-2); font: 500 12px/1.4 var(--sans); box-shadow: 0 0 0 .5px var(--line);
  }

  /* ---- The gap ----------------------------------------------------------- */
  .band { padding: 96px 0; }
  .band-raised { background: var(--bg-raised); border-block: 1px solid var(--line); }
  .gap h2 { font: 700 clamp(26px, 3.4vw, 36px)/1.15 var(--sans); letter-spacing: -.015em; margin-top: 14px; max-width: 22em; }
  .receipts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
  @media (max-width: 820px) { .receipts { grid-template-columns: 1fr; } }
  .receipt {
    background: var(--card); border-radius: 14px; padding: 22px;
    box-shadow: 0 0 0 .5px var(--line);
    font: 500 15px/1.5 var(--mono);
  }
  .receipt time { display: block; color: var(--ink-3); font: 500 11.5px/1.2 var(--mono); margin-bottom: 10px; }
  .graveyard { margin-top: 44px; }
  .graveyard .eyebrow { color: var(--ink-3); }
  .graveyard p { margin-top: 16px; color: var(--ink-2); max-width: 56ch; font-size: 15px; }

  /* ---- Feature blocks ---------------------------------------------------- */
  /* padding-BLOCK, never the `padding` shorthand: the markup puts both classes on
     one element (<section class="wrap feature">), .wrap sets `padding: 0 24px`,
     and at equal specificity a later shorthand here zeroed the sides -- the three
     feature sections ran flush to both screen edges at 400px and sat 24px left of
     every other section's rail at 1440 (GTM-60). Same for the <=900px rule below. */
  .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 96px; }
  .feature.flip .f-copy { order: 2; } .feature.flip .f-art { order: 1; }
  @media (max-width: 900px) {
    .feature { grid-template-columns: 1fr; gap: 40px; padding-block: 72px; }
    .feature.flip .f-copy { order: 1; } .feature.flip .f-art { order: 2; }
  }
  .feature h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 12px 0 16px; }
  .feature p { color: var(--ink-2); max-width: 54ch; }
  .feature .fine { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; }

  .art-card { background: var(--card); border-radius: 20px; box-shadow: var(--e2); overflow: hidden; }

  /* Messages mini-mock */
  .mini-msgs { padding: 18px; display: grid; gap: 8px; font: 400 13.5px/1.4 var(--sans); }
  .mm-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .mm-head .t { font: 600 13.5px/1.2 var(--sans); }
  .mm-badge { background: var(--accent-tint); color: var(--accent); border-radius: 999px; padding: 2px 8px; font: 600 10.5px/1.4 var(--sans); }
  .mm-day { text-align: center; font: 500 10.5px/1.2 var(--sans); color: var(--ink-3); margin-top: 4px; }
  .bub { max-width: 75%; width: fit-content; padding: 7px 11px; border-radius: 14px; }
  .bub.in { background: var(--bg-inset); border-bottom-left-radius: 4px; }
  .bub.out { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; justify-self: end; }
  .bub-status { justify-self: end; font: 500 10px/1.2 var(--sans); color: var(--ink-3); }
  .mm-field {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    background: var(--bg-inset); border-radius: 999px; padding: 7px 12px;
    color: var(--ink-3); font-size: 13px; box-shadow: inset 0 0 0 .5px var(--line);
  }
  .mm-field b { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 600; }

  /* Calls mini-mock */
  .mini-call { padding: 22px; display: grid; gap: 12px; }
  .call-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-inset); border-radius: 12px; padding: 12px 14px;
    font: 500 13px/1.35 var(--sans);
  }
  .call-bar .len { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .pill-ic {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--accent); color: var(--on-accent);
  }
  .call-actions { display: flex; gap: 8px; }
  .call-actions .btn { flex: 1; padding: 9px 0; font-size: 13px; }

  /* Finder mini-mock */
  .mini-finder { display: grid; grid-template-columns: 150px 1fr; min-height: 240px; font: 400 12.5px/1.5 var(--sans); }
  .fd-side { background: var(--bg-raised); border-right: 1px solid var(--line); padding: 12px 10px; }
  .fd-side .traffic { display: flex; gap: 6px; margin: 2px 0 14px 2px; }
  .fd-side .traffic i { width: 10px; height: 10px; border-radius: 50%; }
  .fd-label { font: 600 10px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 4px 6px; }
  .fd-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; color: var(--ink-2); }
  .fd-item.sel { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
  .fd-main { padding: 14px; }
  .fd-path { color: var(--ink-3); font: 500 11px/1.2 var(--sans); margin-bottom: 12px; }
  .fd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fd-folder { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 8px; color: var(--ink-2); font-size: 11.5px; text-align: center; }
  .fd-folder svg { color: var(--accent); opacity: .85; }
  .fd-note { margin-top: 12px; color: var(--ink-3); font-size: 11px; }

  /* ---- Privacy ------------------------------------------------------------ */
  .privacy { text-align: left; }
  .privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; gap: 40px; } }
  .privacy h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 12px 0 16px; }
  .privacy p { color: var(--ink-2); max-width: 54ch; }
  .diagram { background: var(--card); border-radius: 20px; box-shadow: var(--e2); padding: 28px; }
  .diagram svg { width: 100%; height: auto; display: block; }
  .diagram figcaption { text-align: center; margin-top: 10px; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); }

  /* ---- Comparison --------------------------------------------------------- */
  .compare h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 12px 0 8px; }
  .compare .lede { color: var(--ink-2); max-width: 60ch; }
  /* The five unscoped element selectors that used to live here -- table, th/td,
     thead th, tbody th, tbody tr:last-child -- went with the comparison table they
     were written for. `table { min-width: 760px }` outlived it and kept forcing a
     760px table onto /privacy and /updates, whose only tables are .prose ones:
     scrollWidth 784 against a 400px viewport on both (GTM-61). .prose table styles
     those two completely; the last-child rule is re-declared there, scoped. */
  .compare .compare-note { margin-top: 28px; color: var(--ink-2); max-width: 60ch; font-size: 15px; }
  .compare .foot { margin-top: 14px; color: var(--ink-3); font-size: 12.5px; }

  /* ---- Pricing ------------------------------------------------------------ */
  .pricing h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--sans); letter-spacing: -.015em; margin: 12px 0 8px; }
  .pricing .lede { color: var(--ink-2); max-width: 58ch; }
  .plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; margin-top: 44px; align-items: stretch; }
  @media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
  .plan { background: var(--card); border-radius: 20px; padding: 32px; box-shadow: 0 0 0 .5px var(--line); display: flex; flex-direction: column; }
  .plan.pro { box-shadow: 0 0 0 1.5px var(--accent), var(--e2); position: relative; }
  .plan-flag {
    position: absolute; top: -13px; left: 32px;
    background: var(--accent); color: var(--on-accent);
    font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
    border-radius: 999px; padding: 5px 12px;
  }
  .plan h3 { font: 600 15px/1.3 var(--sans); color: var(--ink-2); }
  .plan .name { font: 700 24px/1.2 var(--sans); letter-spacing: -.01em; margin-top: 2px; }
  .price-row { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px; }
  .price { font: 700 44px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .price-was { color: var(--ink-3); font: 500 18px/1 var(--sans); text-decoration: line-through; }
  .price-note { color: var(--ink-2); font-size: 13.5px; }
  .plan ul { list-style: none; margin: 22px 0; display: grid; gap: 10px; }
  .plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink); }
  .plan li svg { flex: none; margin-top: 4px; color: var(--ok); }
  .plan li.future svg { color: var(--accent); }
  .plan li small { color: var(--ink-3); display: block; font-size: 12.5px; }
  .plan .btn { margin-top: auto; }
  .stamp {
    align-self: flex-start; margin: 4px 0 18px;
    border: 1.5px solid var(--accent); color: var(--accent); border-radius: 10px;
    padding: 10px 14px; font: 700 13px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em;
    transform: rotate(-1.4deg);
  }
  .anchor-lines { margin-top: 28px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 4px; }
  .anchor-lines em { color: var(--ink-3); font-style: normal; }

  /* ---- FAQ ---------------------------------------------------------------- */
  .faq h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 12px 0 28px; }
  .faq-list { display: grid; gap: 12px; max-width: 760px; }
  details {
    background: var(--card); border-radius: 14px; box-shadow: 0 0 0 .5px var(--line);
    padding: 18px 22px;
  }
  summary { cursor: pointer; font: 600 16px/1.4 var(--sans); list-style: none; display: flex; align-items: center; gap: 12px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font: 400 20px/1 var(--sans); }
  details[open] summary::after { content: "–"; }
  details p { margin-top: 12px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }

  /* ---- Waitlist ------------------------------------------------------------ */
  .waitlist { text-align: center; }
  .waitlist h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--sans); letter-spacing: -.015em; margin: 12px auto 10px; max-width: 20em; }
  .waitlist .lede { color: var(--ink-2); max-width: 46em; margin: 0 auto; }
  .wl-form { max-width: 560px; margin: 36px auto 0; display: grid; gap: 12px; text-align: left; }
  .wl-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
  @media (max-width: 600px) { .wl-row { grid-template-columns: 1fr; } }
  .wl-form :is(input, select) {
    width: 100%; border: none; outline: none;
    background: var(--card); color: var(--ink);
    border-radius: 10px; padding: 13px 16px;
    font: 400 15px/1.4 var(--sans);
    box-shadow: 0 0 0 .5px var(--line-strong);
  }
  .wl-form input::placeholder { color: var(--ink-3); }
  .hurts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .hurts span { color: var(--ink-3); font: 500 12.5px/1.2 var(--sans); margin-right: 4px; }
  .hurts label {
    cursor: pointer; border-radius: 999px; padding: 7px 14px;
    background: var(--card); box-shadow: 0 0 0 .5px var(--line-strong);
    font: 500 13px/1.2 var(--sans); color: var(--ink-2);
  }
  /* Visually hidden, still focusable and still in the tab order. NOT
     `position:absolute; opacity:0` on its own: with no offsets the containing
     block is the initial containing block, so `.wl-form :is(input,select){width:100%}`
     above resolved against the VIEWPORT and each checkbox became a viewport-wide
     invisible box -- the homepage's horizontal scrollbar at every width
     (scrollWidth 2241/1440, 1617/1024, 721/400; GTM-59). width/height:1px with
     clip + clip-path rather than the shorter width/height:0, because a zero-sized
     control is dropped from the accessibility tree by some AT and this one carries
     the label the `:has(input:focus-visible)` ring is drawn for. */
  .hurts input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .hurts label:has(input:checked) { background: var(--accent); color: var(--on-accent); box-shadow: none; }
  .hurts label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .wl-form .btn { padding: 14px 22px; font-size: 16px; }
  .wl-fine { color: var(--ink-3); font-size: 12.5px; text-align: center; }
  .wl-done {
    display: none; max-width: 560px; margin: 36px auto 0;
    background: var(--card); border-radius: 14px; box-shadow: 0 0 0 .5px var(--line);
    padding: 28px; color: var(--ink);
  }
  .wl-done b { color: var(--ok); }

  /* ---- Footer -------------------------------------------------------------- */
  footer { border-top: 1px solid var(--line); padding: 48px 0 56px; }
  .foot-grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
  .foot-brand { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--sans); color: var(--ink); }
  .foot-links { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
  .foot-links a { color: var(--ink-2); font: 500 13.5px/1.4 var(--sans); }
  .foot-links a:hover { color: var(--ink); }
  .legal { margin-top: 32px; color: var(--ink-3); font-size: 12.5px; max-width: 70ch; }

/* ---- Sub-pages (/pro, /download, /privacy, /updates) ---------------------- */
.page { padding: 64px 0 96px; }
.page > .wrap > .eyebrow { margin-bottom: 10px; }
.page h1 { font: 700 clamp(32px, 4.2vw, 48px)/1.08 var(--sans); letter-spacing: -0.02em; margin-bottom: 16px; }
.page .lede { color: var(--ink-2); font-size: 19px; max-width: 40em; margin-bottom: 36px; }
.prose { max-width: 74ch; }
.prose h2 { font: 700 23px/1.3 var(--sans); margin: 44px 0 12px; }
.prose h3 { font: 600 17px/1.35 var(--sans); margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-2); margin-bottom: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose strong, .prose b { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prose th { color: var(--ink); font: 600 14px/1.3 var(--sans); }
.prose tbody tr:last-child :is(th, td) { border-bottom: none; }
/* A table cannot shrink below its intrinsic minimum -- /updates' four columns
   floor at 462px -- so dropping min-width was necessary but not sufficient at
   400px. The scroll lives on a wrapper, not on `table { display: block }`,
   because display:block strips the table semantics a screen reader needs on a
   privacy policy's data table. tabindex makes the region keyboard-scrollable. */
.table-scroll { overflow-x: auto; }
.prose .updated { color: var(--ink-3); font-size: 14px; }
.notice { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 24px 0; }
.notice p:last-child { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--e2); }
.card h2 { font: 700 20px/1.25 var(--sans); margin-bottom: 6px; }
.card p { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }
.card .btn { width: 100%; }
.card .meta { color: var(--ink-3); font-size: 13px; margin: 12px 0 0; }
code, .mono { font: 400 13.5px/1.6 var(--mono); }
pre { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 16px 0; }
pre code { color: var(--ink); }