/* ============================================================
     Inter, self hosted, variable. The page referenced Inter before
     and never loaded it, which is most of why it read as a template:
     everything was falling back to the system UI face.
     ============================================================ */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* ============================================================
     Tokens. Traily's own palette, both themes, as the app carries it.
     Green means one thing only — that you kept your rules — so it is
     never used as decoration here either.
     ============================================================ */
  :root {
    --brand: #5B5BD6;
    --brand-2: #8B5CF6;
    --brand-soft: rgba(91,91,214,.09);
    --brand-line: rgba(91,91,214,.24);
    --kept: #16A34A;
    --slip: #D97706;
    --broke: #DC2626;

    --canvas: #FBFBFD;
    --canvas-2: #F3F4F8;
    --surface: #FFFFFF;
    --surface-2: #F4F5F8;
    --line: #E6E8EE;
    --line-strong: #D3D7E0;
    --text: #0B0E13;
    --text-dim: #4E5767;
    --text-faint: #79839A;

    --shadow-sm: 0 1px 2px rgba(16,20,32,.04), 0 1px 3px rgba(16,20,32,.05);
    --shadow: 0 1px 2px rgba(16,20,32,.04), 0 8px 24px -8px rgba(16,20,32,.10);
    --shadow-lg: 0 2px 4px rgba(16,20,32,.04), 0 24px 60px -16px rgba(16,20,32,.20);
    --ring: 0 0 0 1px rgba(16,20,32,.06);
    --chrome: #EDEFF4;
    --hairline: rgba(16,20,32,.07);

    --maxw: 1200px;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  [data-theme="dark"] {
    --brand: #7A7AF5;
    --brand-2: #A78BFA;
    --brand-soft: rgba(122,122,245,.13);
    --brand-line: rgba(122,122,245,.30);
    --kept: #4ADE80;
    --slip: #F5B849;
    --broke: #EF4444;

    --canvas: #0B0E13;
    --canvas-2: #0E1218;
    --surface: #13171E;
    --surface-2: #1A1F28;
    --line: #222833;
    --line-strong: #343C4A;
    --text: #ECE9E1;
    --text-dim: #A5ADBB;
    --text-faint: #757F90;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.55), 0 36px 80px -24px rgba(0,0,0,.8);
    --ring: 0 0 0 1px rgba(255,255,255,.05);
    --chrome: #1A1F28;
    --hairline: rgba(255,255,255,.07);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }
  body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  .narrow { max-width: 840px; }
  section { padding: 104px 0; position: relative; }
  section[id] { scroll-margin-top: 86px; }
  .alt { background: var(--canvas-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  @media (max-width: 700px) { section { padding: 72px 0; } }

  /* ---------- type ---------- */
  h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.03em; font-weight: 640; text-wrap: balance; }
  h1 { font-size: clamp(38px, 5.6vw, 66px); letter-spacing: -0.042em; font-weight: 660; }
  h2 { font-size: clamp(29px, 3.9vw, 46px); letter-spacing: -0.036em; }
  h3 { font-size: clamp(22px, 2.4vw, 29px); letter-spacing: -0.028em; }
  h4 { font-size: 18px; letter-spacing: -0.018em; font-weight: 620; }
  p { margin: 0; text-wrap: pretty; }
  .lede { font-size: clamp(17px, 1.4vw, 19.5px); color: var(--text-dim); max-width: 62ch; line-height: 1.62; }
  .eyebrow {
    font-size: 11.5px; font-weight: 660; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  }
  .eyebrow::before {
    content: ""; width: 18px; height: 1.5px; border-radius: 2px; flex: none;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
  }
  .dim { color: var(--text-dim); }
  .faint { color: var(--text-faint); font-size: 14px; }
  .stack-20 > * + * { margin-top: 20px; }

  /* ---------- header ---------- */
  header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--canvas) 78%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
  }
  header.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--canvas) 88%, transparent); }
  .bar { display: flex; align-items: center; gap: 18px; height: 76px; }
  .brand { display: flex; align-items: center; flex: none; }
  .brand img { height: 40px; width: auto; }
  nav.main { display: none; gap: 2px; margin-left: 10px; }
  nav.main a {
    position: relative; text-decoration: none; color: var(--text-dim);
    font-size: 15px; font-weight: 520; padding: 8px 13px; border-radius: 9px; white-space: nowrap;
    transition: color .18s var(--ease);
  }
  nav.main a:hover { color: var(--text); }
  nav.main a[aria-current="true"] { color: var(--text); }
  nav.main a[aria-current="true"]::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  }
  .bar-right { display: flex; align-items: center; gap: 9px; margin-left: auto; }
  @media (min-width: 1020px) { nav.main { display: flex; } .menu-btn { display: none; } }
  /* Below the nav breakpoint the bar carries logo, theme, one action and the
     menu. "Log in" is the same destination as the button, so it is the one
     that goes — leaving it in pushed the bar 27px past a 390px screen. */
  @media (max-width: 1019px) { .bar .link { display: none; } }
  @media (max-width: 400px) {
    .bar { gap: 10px; }
    .bar-right { gap: 7px; }
    .brand img { height: 34px; }
    .btn.sm { padding: 9px 13px; }
  }

  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; flex: none;
    background: var(--surface); border: 1px solid var(--line); cursor: pointer;
    color: var(--text-dim); box-shadow: var(--shadow-sm);
    transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  }
  .icon-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
  .icon-btn svg { width: 18px; height: 18px; }
  /* `.icon-btn { display: inline-flex }` is declared after the breakpoint that
     hides the menu button, and both are one class deep, so the later rule won
     and the burger stayed on desktop. Say it with the two classes together. */
  .icon-btn[hidden], .icon-btn svg[hidden] { display: none; }
  @media (min-width: 1020px) { .icon-btn.menu-btn { display: none; } }
  [data-theme="light"] .i-dark, [data-theme="dark"] .i-light { display: none; }

  /* mobile menu */
  .menu {
    display: none; position: fixed; inset: 76px 0 0; z-index: 55;
    background: var(--canvas); padding: 22px 24px 40px; overflow-y: auto;
  }
  .menu.open { display: block; }
  .menu a {
    display: block; text-decoration: none; color: var(--text);
    font-size: 21px; font-weight: 560; letter-spacing: -0.02em;
    padding: 15px 0; border-bottom: 1px solid var(--line);
  }
  .menu .btn { margin-top: 26px; width: 100%; }
  body.locked { overflow: hidden; }

  /* ---------- buttons ---------- */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff), var(--brand));
    color: #fff; text-decoration: none; font-weight: 580; font-size: 15.5px;
    padding: 12px 21px; border: 1px solid color-mix(in srgb, var(--brand) 80%, #000);
    border-radius: 11px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
  }
  .btn:hover { transform: translateY(-1.5px); filter: brightness(1.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -10px color-mix(in srgb, var(--brand) 75%, transparent); }
  .btn:active { transform: translateY(0); }
  .btn.ghost {
    background: var(--surface); color: var(--text);
    border-color: var(--line-strong); box-shadow: var(--shadow-sm);
  }
  .btn.ghost:hover { border-color: var(--text-faint); box-shadow: var(--shadow); }
  .btn.sm { padding: 9px 16px; font-size: 14.5px; border-radius: 10px; }
  .btn.lg { padding: 15px 27px; font-size: 16.5px; border-radius: 13px; }
  .link {
    text-decoration: none; color: var(--text-dim); font-weight: 520; font-size: 15px;
    padding: 9px 12px; border-radius: 9px; white-space: nowrap;
    transition: color .18s var(--ease);
  }
  .link:hover { color: var(--text); }

  /* ---------- hero ---------- */
  .hero { padding: 84px 0 0; text-align: center; overflow: hidden; }
  .hero::before,
  .hero::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
  /* Two soft lights rather than one flat wash — the flat one is what makes a
     gradient look generated. */
  .hero::before {
    inset: -180px 0 auto 0; height: 760px;
    background:
      radial-gradient(46% 46% at 24% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
      radial-gradient(42% 46% at 78% 6%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 72%);
    filter: blur(18px);
    opacity: .85;
  }
  .hero::after {
    inset: 0; opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, var(--hairline) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(70% 50% at 50% 0%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 50% at 50% 0%, #000, transparent 75%);
  }
  .hero .wrap { position: relative; z-index: 1; }
  .hero h1 { margin: 0 auto; max-width: 16ch; }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero .lede { margin: 24px auto 0; max-width: 58ch; }
  .badge {
    display: inline-block; margin-bottom: 26px; text-align: center; text-decoration: none;
    padding: 7px 16px; border-radius: 99px; font-size: 13.5px; font-weight: 540;
    background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
    transition: transform .16s var(--ease);
  }
  .badge:hover { transform: translateY(-1px); }
  .badge b { font-weight: 660; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; justify-content: center; }
  .cta-note { margin-top: 16px; }

  /* ---------- browser frame ---------- */
  .frame {
    position: relative; border-radius: 13px; overflow: hidden; background: var(--chrome);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg), var(--ring);
  }
  .frame .chrome { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
  .frame .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--line-strong); flex: none; }
  .frame .url {
    margin-left: 8px; flex: 1; min-width: 0; height: 23px; border-radius: 6px;
    background: var(--canvas); border: 1px solid var(--line);
    font-size: 11.5px; color: var(--text-faint); display: flex; align-items: center;
    padding: 0 10px; overflow: hidden; white-space: nowrap;
  }
  /* The shots are a whole 1440x900 screen. Cropping with object-fit would cut
     the sides too, which lops the first column out of a table — so the frame
     clips and the image keeps its full width. */
  .frame img { width: 100%; height: auto; display: block; }
  .frame.crop { max-height: 560px; }
  .hero-frame { margin: 60px auto 0; max-width: 1140px; position: relative; z-index: 1; }
  .hero-frame .frame { max-height: 660px; }

  /* ---------- chips ---------- */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .chip {
    padding: 8px 15px; border-radius: 99px; font-size: 14px; font-weight: 520;
    background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
    box-shadow: var(--shadow-sm);
  }

  /* ---------- stat strip ---------- */
  .stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    background: var(--surface); box-shadow: var(--shadow);
  }
  @media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { padding: 32px 24px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  @media (min-width: 820px) { .stat { border-bottom: 0; } .stat:last-child { border-right: 0; } }
  @media (max-width: 819px) { .stat:nth-child(2n) { border-right: 0; } .stat:nth-last-child(-n+2) { border-bottom: 0; } }
  .stat b {
    display: block; font-size: clamp(32px, 4vw, 44px); font-weight: 620; letter-spacing: -0.045em; line-height: 1;
    background: linear-gradient(160deg, var(--text), color-mix(in srgb, var(--text) 62%, var(--brand)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--text-dim); line-height: 1.45; }

  /* ---------- tabs ---------- */
  .tabbar {
    display: flex; gap: 6px; overflow-x: auto; padding: 5px; margin-bottom: 40px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar button {
    flex: none; padding: 9px 16px; border-radius: 10px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--text-dim);
    font-size: 14.5px; font-weight: 540; white-space: nowrap;
    transition: background .18s var(--ease), color .18s var(--ease);
  }
  .tabbar button:hover { color: var(--text); }
  .tabbar button[aria-selected="true"] {
    background: var(--surface); border-color: var(--line); color: var(--text);
    box-shadow: var(--shadow-sm);
  }
  .panel { display: grid; gap: 40px; align-items: center; }
  @media (min-width: 960px) { .panel { grid-template-columns: 0.76fr 1.24fr; gap: 54px; } }
  .panel[hidden] { display: none; }
  .ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
  .ticks li { display: flex; gap: 12px; color: var(--text-dim); font-size: 15.5px; line-height: 1.5; }
  .ticks li::before {
    content: ""; flex: none; width: 20px; height: 20px; border-radius: 99px; margin-top: 2px;
    background: var(--brand-soft) center / 11px no-repeat;
    border: 1px solid var(--brand-line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5BD6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
  [data-theme="dark"] .ticks li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7AF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }

  /* ---------- two column ---------- */
  .two { display: grid; gap: 44px; align-items: center; }
  @media (min-width: 960px) { .two { grid-template-columns: 1fr 1fr; gap: 62px; } }
  .two.wide-right { grid-template-columns: 1fr; }
  @media (min-width: 960px) { .two.wide-right { grid-template-columns: 0.78fr 1.22fr; } }
  @media (min-width: 960px) { .two.flip > :first-child { order: 2; } }

  /* ---------- cards ---------- */
  .cards { display: grid; gap: 20px; }
  @media (min-width: 740px) { .cards.c2 { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 920px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } }
  .card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
  .card .n {
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 18px;
    background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
    display: grid; place-items: center; font-size: 14px; font-weight: 660;
  }
  .card p { color: var(--text-dim); margin-top: 10px; font-size: 15.5px; }

  /* ---------- day strip ---------- */
  .strip { display: flex; gap: 6px; margin: 28px 0 0; }
  .strip i { flex: 1; height: 36px; border-radius: 7px; display: block; box-shadow: var(--shadow-sm); }
  .g { background: var(--kept); } .a { background: var(--slip); } .r { background: var(--broke); }
  .n0 { background: var(--line-strong); }
  .legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; font-size: 14.5px; color: var(--text-dim); }
  .legend span { display: flex; align-items: center; gap: 9px; }
  .legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }

  /* ---------- promise ---------- */
  .promise ul { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
  .promise li { display: flex; gap: 13px; color: var(--text-dim); font-size: 16px; line-height: 1.5; }
  .promise li::before { content: "✗"; flex: none; color: var(--text-faint); font-weight: 700; width: 18px; }
  .promise li.yes::before { content: "✓"; color: var(--kept); }

  /* ---------- pricing ---------- */
  .price {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: 22px; padding: 44px 36px; box-shadow: var(--shadow-lg);
    max-width: 560px; margin: 0 auto; text-align: center; overflow: hidden;
  }
  .price::before {
    content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
  }
  .price .amount {
    font-size: 66px; font-weight: 640; letter-spacing: -0.05em; line-height: 1; margin: 18px 0 6px;
  }
  .price ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; }
  .price li { display: flex; gap: 11px; color: var(--text-dim); font-size: 15.5px; }
  .price li::before { content: "✓"; color: var(--kept); font-weight: 700; flex: none; }

  /* ---------- faq ---------- */
  .faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; list-style: none; padding: 22px 46px 22px 0; position: relative;
    font-size: 17.5px; font-weight: 580; letter-spacing: -0.018em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 13px; height: 13px;
    margin-top: -7px; transition: transform .2s var(--ease);
    background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379839A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  }
  .faq details[open] summary::after { transform: rotate(135deg); }
  .faq p { color: var(--text-dim); padding: 0 46px 26px 0; margin-top: -4px; font-size: 16px; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 64px 0 80px; color: var(--text-faint); font-size: 14.5px; background: var(--canvas-2); }
  .foot-grid { display: grid; gap: 34px; }
  @media (min-width: 860px) { .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
  footer a { color: var(--text-dim); text-decoration: none; transition: color .18s var(--ease); }
  footer a:hover { color: var(--text); }
  footer h5 { margin: 0 0 13px; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); font-weight: 660; }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .imprint { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); line-height: 1.75; }

  /* ---------- scroll to top ---------- */
  .to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 40;
    width: 46px; height: 46px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-dim);
    display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none;
    transition: opacity .24s var(--ease), transform .24s var(--ease), color .18s var(--ease);
  }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { color: var(--text); transform: translateY(-2px); }
  .to-top svg { width: 19px; height: 19px; }

  /* ---------- scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

  /* ============================================================
     Site chrome added when the one pager became a site.
     ============================================================ */

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
    text-decoration: none; font-weight: 580;
  }
  .skip:focus { left: 0; }

  /* ---------- mega menu ---------- */
  .nav-group { position: relative; }
  .nav-top {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; cursor: pointer;
    text-decoration: none; color: var(--text-dim);
    font-size: 15px; font-weight: 520; padding: 8px 12px; border-radius: 9px; white-space: nowrap;
    transition: color .18s var(--ease);
  }
  .nav-top:hover, .nav-group:hover .nav-top { color: var(--text); }
  .nav-top[aria-current="page"] { color: var(--text); }
  .nav-top svg { width: 14px; height: 14px; opacity: .7; transition: transform .2s var(--ease); }
  .nav-top[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: -8px; z-index: 70;
    min-width: 320px; padding: 8px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .17s var(--ease), transform .17s var(--ease), visibility .17s;
  }
  .nav-top[aria-expanded="true"] + .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-menu a {
    display: block; padding: 11px 13px; border-radius: 11px; text-decoration: none;
    transition: background .15s var(--ease);
  }
  .nav-menu a:hover { background: var(--surface-2); }
  .nav-menu a[aria-current="page"] { background: var(--brand-soft); }
  .nav-menu b { display: block; font-size: 14.5px; font-weight: 570; color: var(--text); letter-spacing: -0.01em; }
  .nav-menu span { display: block; font-size: 13px; color: var(--text-faint); margin-top: 3px; line-height: 1.4; }

  .menu .menu-group { padding: 6px 0 2px; }
  .menu .menu-group h4 {
    font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 660; margin: 18px 0 2px;
  }
  .menu a[aria-current="page"] { color: var(--brand); }

  /* ---------- page header (a section that is not the home hero) ---------- */
  .pagehead { padding: 76px 0 64px; position: relative; overflow: hidden; }
  .pagehead::before {
    content: ""; position: absolute; inset: -160px 0 auto 0; height: 540px; z-index: 0;
    background: radial-gradient(44% 50% at 26% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
                radial-gradient(40% 46% at 80% 8%, color-mix(in srgb, var(--brand-2) 15%, transparent), transparent 72%);
    filter: blur(18px);
  }
  .pagehead .wrap { position: relative; z-index: 1; }
  .pagehead h1 { max-width: 18ch; }
  .pagehead .lede { margin-top: 22px; }
  .pagehead .cta-row { justify-content: flex-start; }

  /* ---------- comparison table ---------- */
  .cmp { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
  .cmp table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .cmp thead th { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 660; background: var(--surface-2); }
  .cmp thead th:nth-child(2) { color: var(--brand); }
  .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
  .cmp tbody th { font-weight: 560; color: var(--text); width: 30%; }
  .cmp td { color: var(--text-dim); }
  .cmp td.us { color: var(--text); background: color-mix(in srgb, var(--brand) 4%, transparent); }
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  @media (max-width: 760px) { .cmp table { min-width: 640px; } }

  /* ---------- calculators ---------- */
  .calc { display: grid; gap: 28px; align-items: start; }
  @media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; gap: 40px; } }
  .fields { display: grid; gap: 16px; }
  .field label { display: block; font-size: 13.5px; font-weight: 560; color: var(--text-dim); margin-bottom: 7px; }
  .field input {
    width: 100%; padding: 13px 15px; font-size: 16px; font-family: inherit;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 11px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .field .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
  .result {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    padding: 32px 28px; box-shadow: var(--shadow); position: sticky; top: 100px;
  }
  .result .big { font-size: clamp(44px, 6vw, 64px); font-weight: 640; letter-spacing: -0.05em; line-height: 1; margin: 10px 0 14px; }
  .result .lbl { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 660; }
  .result p { color: var(--text-dim); font-size: 15px; }

  /* ---------- article and post list ---------- */
  .postlist { display: grid; gap: 18px; }
  .post-card {
    display: block; text-decoration: none; padding: 26px 26px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  }
  .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
  .post-card time { font-size: 13px; color: var(--text-faint); }
  .post-card h3 { margin: 8px 0 10px; font-size: 22px; }
  .post-card p { color: var(--text-dim); font-size: 15.5px; }

  .prose { max-width: 72ch; }
  .prose > * + * { margin-top: 22px; }
  .prose h2 { font-size: clamp(24px, 2.8vw, 32px); margin-top: 48px; }
  .prose h3 { font-size: clamp(19px, 2vw, 23px); margin-top: 36px; }
  .prose p, .prose li { color: var(--text-dim); font-size: 17px; line-height: 1.68; }
  .prose ul, .prose ol { padding-left: 22px; display: grid; gap: 10px; }
  .prose strong { color: var(--text); font-weight: 600; }
  .prose blockquote {
    margin: 0; padding: 18px 24px; border-left: 3px solid var(--brand);
    background: var(--surface); border-radius: 0 12px 12px 0;
  }
  .prose blockquote p { color: var(--text); font-size: 18px; }
  .prose a { color: var(--brand); text-underline-offset: 3px; }

  /* ---------- misc ---------- */
  .note-band {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 24px 26px; box-shadow: var(--shadow-sm);
  }
  .note-band p { color: var(--text-dim); font-size: 15.5px; }
  .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .pill {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    padding: 9px 15px; border-radius: 99px; font-size: 14.5px; font-weight: 530;
    background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
    box-shadow: var(--shadow-sm); transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
  }
  .pill:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }