:root{
    /* Brand constants — do not change between themes */
    --brand-dark:#132135;
    --placeholder-grey:#6b7d95;
    --sky-400:#5cb6f9;
    --sky-300:#8ccbfb;
    --sky-200:#c4e3fd;
    --red:#ef6a5f;
    --orange:#f4a341;
    --yellow:#e7c948;
    --green:#4fd39a;

    /* The same four states as readable TEXT. The vivid set above is tuned for
       the dark navy ground and stays there for fills, dots and borders; on the
       white ground of light mode it lands at 1.6-3.0:1, which is why the
       Affordability Index number itself was unreadable. Same split, and same
       reason, as --accent-text, and as the nw-t and nw-b pair on the
       need-or-want panel. */
    --red-text:#ef6a5f;
    --orange-text:#f4a341;
    --yellow-text:#e7c948;
    --green-text:#4fd39a;
    --font-body:'League Spartan', sans-serif;

    /* Themed scale — dark mode (default) */
    --navy-900:#132135;
    --navy-800:#182943;
    --navy-700:#203352;
    --navy-600:#2b4266;
    --ink-050:#eef4fb;
    --ink-300:#9fb2c9;
    --accent-text:#8ccbfb;
    --chart-line:#ef6a5f;
  }

  html[data-theme="light"]{
    --navy-900:#f6f9fc;
    --navy-800:#ffffff;
    --navy-700:#eef4fa;
    --navy-600:#dbe7f3;
    --ink-050:#132135;
    --ink-300:#5b6b83;
    --accent-text:#132135;
    --chart-line:#ef6a5f;

  }

  .sr-only{
    position:absolute;
    max-width:1px;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  /* An auto-layout table sizes to its content and ignores the 1px width
     above, so a visually-hidden table still widens the page on mobile. The
     nowrap inherited from .sr-only also makes the <caption> force the table
     wide — hidden content can wrap freely, screen readers read it either way. */
  table.sr-only{
    table-layout:fixed;
  }
  table.sr-only, table.sr-only *{
    white-space:normal;
    word-break:break-all;
  }

  html.auth-pending #authGate,
  html.auth-pending #gatedContent{
    display:none !important;
  }

  .auth-loader{
    display:none;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - 70px);
  }
  html.auth-pending .auth-loader{display:flex;}

  .auth-loader .spinner{
    width:30px;
    height:30px;
    border-radius:50%;
    border:3px solid var(--navy-600);
    border-top-color:var(--sky-400);
    animation:auth-spin 0.7s linear infinite;
  }
  @keyframes auth-spin{ to{transform:rotate(360deg);} }

  #authGate, #gatedContent{
    animation:auth-fade-in 0.25s ease;
  }
  @keyframes auth-fade-in{ from{opacity:0;} to{opacity:1;} }

  *{box-sizing:border-box; margin:0; padding:0;}

  *, *::before, *::after{
    transition:background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }

  a, a:visited{color:inherit; text-decoration:none;}

  html{
    font-size:20px;
  }

  body{
    background:var(--navy-900);
    color:var(--ink-050);
    font-family:var(--font-body);
    font-size:1rem;
    min-height:100vh;
    background-image:
      radial-gradient(circle at 85% -10%, rgba(92,182,249,0.08), transparent 45%),
      radial-gradient(circle at -10% 60%, rgba(92,182,249,0.05), transparent 40%);
    transition:background 0.2s, color 0.2s;
    overflow-x:hidden;
  }

  /* ---------- Layout ---------- */
  .shell{
    min-height:100vh;
  }

  /* ---------- Top nav (shared across all pages) ---------- */
  .topnav{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    background:var(--navy-800);
    border-bottom:1px solid var(--navy-600);
    padding:16px 32px;
    transition:background 0.2s, border-color 0.2s;
  }

  .topnav-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
  }

  .topnav-links{
    list-style:none;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .topnav-link{
    display:inline-flex;
    align-items:center;
    padding:9px 16px;
    border-radius:20px;
    font-family:var(--font-body);
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-300);
    text-decoration:none;
    cursor:pointer;
    transition:background-color 0.15s, color 0.15s;
  }
  .topnav-link:hover{color:var(--accent-text);}
  .topnav-link.active{
    background:var(--sky-400);
    color:var(--brand-dark);
  }

  .mark{
    display:flex;
    align-items:flex-end;
    height:36px;
    flex-shrink:0;
    gap:1px;
  }
  .mark span{
    font-family:'League Spartan', sans-serif;
    font-weight:700;
    line-height:1;
  }
  .mark .big{
    font-size:2.125rem;
    color:#0d4f9e;
    text-shadow:3px 3px 0 var(--sky-300);
    padding-right:2px;
  }
  .mark .small{
    font-size:1.6875rem;
    color:var(--sky-400);
    padding-bottom:1px;
  }

  .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
    min-width:0;
  }
  .brand-text .name{
    font-family:var(--font-body);
    font-weight:700;
    font-size:1.0625rem;
    letter-spacing:0;
    white-space:nowrap;
  }

  .theme-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-300);
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:20px;
    padding:9px 14px;
    cursor:pointer;
    width:fit-content;
    transition:border-color 0.15s, color 0.15s, background-color 0.3s ease;
  }
  .theme-toggle:hover{border-color:var(--sky-400); color:var(--accent-text);}

  /* ---------- Auth (shared across pages) ---------- */
  .auth-controls{
    display:flex;
    align-items:center;
  }
  .auth-signin{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-300);
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:20px;
    padding:9px 14px;
    cursor:pointer;
    transition:border-color 0.15s, color 0.15s, background-color 0.3s ease;
  }
  .auth-signin:hover{border-color:var(--sky-400); color:var(--accent-text);}

  /* Account chip is a toggle, not a direct sign-out — the dropdown it opens
     is one deliberate extra step before the sign-out confirm dialog. */
  .auth-menu{
    display:none;
    position:relative;
  }
  .auth-user-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:20px;
    padding:6px 12px 6px 10px;
    cursor:pointer;
    font-family:var(--font-body);
    transition:border-color 0.15s;
  }
  .auth-user-toggle:hover,
  .auth-menu.open .auth-user-toggle{
    border-color:var(--sky-400);
  }
  .auth-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
    background:var(--navy-600);
    flex-shrink:0;
  }
  .auth-avatar-fallback{
    display:none;
    align-items:center;
    justify-content:center;
    background:var(--sky-400);
    color:var(--brand-dark);
    font-family:var(--font-body);
    font-weight:700;
    font-size:0.8125rem;
  }
  .auth-avatar-fallback.show{display:flex;}
  .auth-user-toggle span{
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-050);
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .auth-caret{
    font-size:0.625rem;
    color:var(--ink-300);
    transition:transform 0.2s ease;
  }
  .auth-menu.open .auth-caret{
    transform:rotate(180deg);
  }

  .auth-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:150px;
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:12px;
    padding:6px;
    box-shadow:0 14px 30px rgba(0,0,0,0.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index:50;
  }
  .auth-menu.open .auth-dropdown{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .auth-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    background:none;
    border:none;
    border-radius:8px;
    font-family:var(--font-body);
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-050);
    cursor:pointer;
    text-align:left;
    transition:background-color 0.15s, color 0.15s;
  }
  .auth-dropdown-item:hover{
    background:var(--navy-700);
  }
  .auth-dropdown-item-danger:hover{
    color:var(--red-text);
  }
  .auth-dropdown-divider{
    height:1px;
    margin:6px 4px;
    background:var(--navy-600);
  }

  #gatedContent{display:none;}
  .auth-gate{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    max-width:1500px;
    min-height:calc(100vh - 70px);
    margin:0 auto;
    padding:60px 64px;
  }
  .auth-gate .card{
    max-width:420px;
    width:100%;
    margin-bottom:0;
  }

  .auth-gate-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 1 420px;
    width:100%;
    max-width:420px;
  }
  .auth-gate-inner .card{
    padding-top:24px;
  }
  @media (max-width: 1000px){
    .auth-gate{
      flex-direction:column;
      justify-content:center;
      padding:40px 24px;
    }
    .auth-gate-inner{
      margin:0 auto;
    }
  }

  .auth-form-error{
    display:none;
    margin-top:14px;
    font-size:0.8438rem;
    color:var(--red-text);
    font-weight:500;
  }
  .auth-form-error:not(:empty){display:block;}

  .auth-form-notice{
    display:none;
    margin-top:14px;
    font-size:0.8438rem;
    color:var(--green-text);
    font-weight:500;
  }
  .auth-form-notice:not(:empty){display:block;}

  .auth-forgot-line{
    margin-top:12px;
    text-align:right;
    font-size:0.8438rem;
  }
  .auth-forgot-line a{
    color:var(--ink-300);
    cursor:pointer;
  }
  .auth-forgot-line a:hover{color:var(--accent-text); text-decoration:underline;}

  .auth-toggle-line{
    margin-top:20px;
    font-size:0.875rem;
    color:var(--ink-300);
  }
  .auth-toggle-line a{
    color:var(--accent-text);
    font-weight:600;
    cursor:pointer;
  }
  .auth-toggle-line a:hover{text-decoration:underline;}

  .auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0;
    color:var(--ink-300);
    font-family:var(--font-body);
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .auth-divider::before,
  .auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--navy-600);
  }

  @media (min-width: 861px){
    .calculator-main{
      margin:0 auto;
      padding-left:32px;
      padding-right:32px;
    }
  }

  @media (max-width: 860px){
    .topnav{padding:14px 18px; gap:8px;}
    #themeLabel{display:none;}
    /* Nav links don't fit alongside brand + the account chip, so they drop
       to their own full-width row while brand and account stay pinned
       together on row one, account chip at the top-right corner. */
    .topnav-links{order:3; flex-basis:100%;}
    .auth-user-toggle span{display:none;}
  }

  /* Destructive account actions, kept visually separate from the save form
     above so the two are never confused at a glance. */
  .danger-zone{
    border-color:rgba(239,106,95,0.4);
    margin-top:28px;
  }
  .danger-zone h2{color:var(--red-text);}
  .danger-btn{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9375rem;
    color:var(--red-text);
    background:transparent;
    border:1px solid var(--red);
    border-radius:9px;
    padding:13px 24px;
    cursor:pointer;
    transition:background-color 0.15s, color 0.15s;
  }
  .danger-btn:hover{
    background:var(--red);
    color:var(--navy-900);
  }
  .danger-btn:disabled{opacity:0.55; cursor:default;}
  .danger-note{margin-top:16px; font-size:0.8125rem;}
  .danger-note a{color:var(--accent-text); font-weight:600;}

  /* ---------- Legal pages (privacy / terms / disclaimer) ---------- */
  /* Long-form prose, so these override main's centred, narrow defaults. */
  .legal{
    max-width:44rem;
    text-align:left;
  }
  .legal h1{margin-bottom:12px;}
  .legal .legal-lede{
    font-size:1.0625rem;
    color:var(--ink-300);
    margin-bottom:10px;
  }
  .legal .legal-meta{
    font-size:0.8125rem;
    color:var(--ink-300);
    opacity:0.8;
    margin-bottom:36px;
    padding-bottom:22px;
    border-bottom:1px solid var(--navy-600);
  }
  .legal h2{
    font-family:var(--font-body);
    font-size:1.1875rem;
    font-weight:700;
    margin:34px 0 10px;
  }
  .legal h3{
    font-family:var(--font-body);
    font-size:0.9375rem;
    font-weight:600;
    color:var(--accent-text);
    margin:22px 0 8px;
  }
  .legal p{
    font-size:0.9375rem;
    line-height:1.65;
    color:var(--ink-300);
    margin-bottom:14px;
  }
  .legal ul{
    margin:0 0 16px;
    padding-left:22px;
  }
  .legal li{
    font-size:0.9375rem;
    line-height:1.6;
    color:var(--ink-300);
    margin-bottom:9px;
  }
  .legal strong{color:var(--ink-050); font-weight:600;}
  .legal a{
    color:var(--accent-text);
    font-weight:600;
    border-bottom:1px solid transparent;
  }
  .legal a:hover{border-bottom-color:currentColor;}

  /* The one thing on the disclaimer a reader must not skim past. */
  .legal-callout{
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-left:3px solid var(--orange);
    border-radius:10px;
    padding:18px 22px;
    margin-bottom:8px;
  }
  .legal-callout p{margin-bottom:0;}

  /* ---------- Main ---------- */
  main{
    padding:56px 40px 80px;
    max-width:760px;
    margin:0 auto;
    text-align:center;
  }

  .calculator-main{
    max-width:1450px;
  }

  .card-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:28px;
  }
  .card-grid > .card{
    flex:1 1 380px;
    /* Without this a flex item refuses to shrink below its content's
       min-content width, which pushed the card past the viewport on phones. */
    min-width:0;
    max-width:700px;
    margin-bottom:0;
  }
  .card-grid > .card.result{
    flex-basis:100%;
    max-width:100%;
  }
  /* The formula card carries the widest content on the page, so it asks for
     more of the row than the others — otherwise three cards share one row and
     the formulas end up scrolling on a full-size desktop. */
  .card-grid > .card.signature{
    flex-basis:520px;
  }

  @media (max-width: 640px){
    main{padding:36px 20px 104px;}
    /* 32px of padding on each side is a big share of a phone screen. */
    .card{padding:24px 16px;}
    .card-grid{gap:20px;}
  }

  .eyebrow{
    font-family:var(--font-body);
    font-size:0.8125rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent-text);
    margin-bottom:10px;
  }

  h1{
    font-family:var(--font-body);
    font-weight:700;
    font-size:2.75rem;
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }

  .hero-quote{
    margin:0 auto 40px;
    max-width:800px;
  }
  .hero-quote p{
    font-family:var(--font-body);
    font-weight:700;
    font-size:2.375rem;
    line-height:1.25;
    letter-spacing:-0.01em;
    margin-bottom:16px;
  }
  .quote-word-red{color:var(--red-text);}
  .quote-word-green{color:var(--green-text);}
  .hero-quote cite{
    display:block;
    font-style:normal;
    font-size:0.9375rem;
    font-weight:500;
    color:var(--ink-300);
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .hero-quote cite.show{opacity:1;}

  .typing-cursor{
    display:inline-block;
    width:3px;
    height:0.85em;
    margin-left:3px;
    background:var(--sky-400);
    vertical-align:text-bottom;
    animation:typing-blink 0.8s steps(1) infinite;
  }
  .typing-cursor.done{animation:none; opacity:0;}

  @keyframes typing-blink{
    0%, 49%{opacity:1;}
    50%, 100%{opacity:0;}
  }

  @media (max-width: 640px){
    .hero-quote p{font-size:1.75rem;}
  }

  .lede{
    color:var(--ink-300);
    font-size:1.0938rem;
    max-width:560px;
    line-height:1.6;
    margin:0 auto 40px;
  }

  /* Formula card */
  .card{
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:14px;
    padding:32px;
    margin-bottom:28px;
    position:relative;
    text-align:center;
    transition:background 0.2s, border-color 0.2s;
  }

  .card.signature{
    background:var(--sky-400);
    border-color:var(--sky-400);
  }
  .card.signature h2{color:var(--brand-dark); opacity:0.75;}

  /* ---------- Hero product preview ---------- */
  .ai-preview-section{
    display:flex;
    align-items:center;
    gap:56px;
    text-align:left;
  }
  .ai-preview-text{
    flex:1 1 360px;
  }
  .ai-preview-text .section-lede{margin-left:0;}

  .hero-preview{
    display:block;
    flex:1 1 380px;
    max-width:460px;
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:14px;
    overflow:hidden;
    text-align:left;
    text-decoration:none;
    color:inherit;
    transition:background 0.2s, border-color 0.2s, transform 0.15s;
  }
  .hero-preview:hover{transform:translateY(-2px);}

  @media (max-width: 860px){
    .ai-preview-section{flex-direction:column;}
    .hero-preview{max-width:460px; width:100%;}
  }

  .hero-preview-chrome{
    display:flex;
    align-items:center;
    gap:7px;
    padding:12px 16px;
    background:var(--navy-700);
    border-bottom:1px solid var(--navy-600);
  }
  .chrome-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex-shrink:0;
  }
  .chrome-dot.red{background:var(--red);}
  .chrome-dot.yellow{background:var(--yellow);}
  .chrome-dot.green{background:var(--green);}
  .hero-preview-url{
    margin-left:8px;
    font-family:var(--font-body);
    font-size:0.7812rem;
    color:var(--ink-300);
    background:var(--navy-900);
    border:1px solid var(--navy-600);
    border-radius:6px;
    padding:4px 10px;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero-preview-body{
    padding:24px;
  }

  .hero-preview-score-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    padding:20px 16px;
    margin-bottom:20px;
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:10px;
  }
  .hero-preview-score-label{
    font-family:var(--font-body);
    font-size:0.8125rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--accent-text);
  }
  .hero-preview-score-value{
    font-family:var(--font-body);
    font-weight:700;
    font-size:2.75rem;
    line-height:1;
    color:var(--green-text);
  }

  .hero-preview-checklist{
    padding-top:2px;
  }

  .hero-preview-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 24px;
    background:var(--sky-400);
    color:var(--brand-dark);
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9062rem;
  }

  /* Subtle reveal animation, played once when the preview scrolls into view */
  .hero-preview-score-card .badge,
  .hero-preview-checklist .rec-check-row{
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.4s ease, transform 0.4s ease;
  }
  .hero-preview.in-view .hero-preview-score-card .badge{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.5s;
  }
  .hero-preview.in-view .hero-preview-checklist .rec-check-row{
    opacity:1;
    transform:translateY(0);
  }
  .hero-preview.in-view .hero-preview-checklist .rec-check-row:nth-child(1){transition-delay:0.6s;}
  .hero-preview.in-view .hero-preview-checklist .rec-check-row:nth-child(2){transition-delay:0.7s;}
  .hero-preview.in-view .hero-preview-checklist .rec-check-row:nth-child(3){transition-delay:0.8s;}
  .hero-preview.in-view .hero-preview-checklist .rec-check-row:nth-child(4){transition-delay:0.9s;}

  .card.signature .formula{color:var(--brand-dark);}
  .card.signature .frac .num{border-bottom-color:var(--brand-dark);}
  .card.signature .var-row{color:var(--brand-dark); opacity:0.85;}
  .card.signature .var-row .sym{color:var(--brand-dark);}
  .card.signature .formula-divider{background:rgba(19,33,53,0.25);}
  .card.signature .formula-sub-label{color:var(--brand-dark); opacity:0.75;}
  .card.signature .threshold-note{color:var(--brand-dark); opacity:0.85;}
  .card.signature .threshold-note strong{color:var(--brand-dark); opacity:1;}

  .card h2,
  .card .card-title,
  .auth-gate .card h1{
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--accent-text);
    text-transform:uppercase;
    margin-bottom:20px;
  }

  .formula{
    display:flex;
    align-items:center;
    /* Centred via auto margins rather than justify-content: a centred flex
       container clips its own overflow on the left, putting the start of the
       formula out of reach once it's wide enough to scroll. */
    justify-content:flex-start;
    gap:16px;
    font-family:var(--font-body);
    font-size:1.0625rem;
    font-weight:600;
    flex-wrap:nowrap;
    padding:20px 0;
    max-width:100%;
    overflow-x:auto;
  }
  /* A formula can't reflow, so it scrolls as a unit. Without this the parts
     shrink and overlap each other instead of overflowing into that scroll. */
  .formula > *{
    flex-shrink:0;
  }
  .formula > *:first-child{margin-left:auto;}
  .formula > *:last-child{margin-right:auto;}

  @media (max-width: 480px){
    .formula{font-size:0.9375rem;}
  }

  .frac{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    vertical-align:middle;
    min-width:0;
    max-width:100%;
  }
  .frac .num, .frac .den{
    padding:2px 10px;
    white-space:nowrap;
  }
  .frac .num{
    border-bottom:2px solid var(--sky-400);
    padding-bottom:6px;
  }
  .frac .den{
    padding-top:6px;
  }

  .var-grid{
    display:grid;
    /* min() lets the track fall below its 220px floor once the container is
       narrower than that, so the grid collapses to one column instead of
       forcing the card wider than the screen. */
    grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap:12px 24px;
    margin-top:8px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
  .var-row{
    display:flex;
    justify-content:flex-start;
    gap:10px;
    font-size:0.9375rem;
    color:var(--ink-300);
    align-items:baseline;
    text-align:left;
  }
  .var-row .sym{
    font-family:var(--font-body);
    color:var(--accent-text);
    font-weight:700;
    min-width:18px;
  }

  .formula-divider{
    height:1px;
    background:var(--navy-600);
    margin:28px auto 0;
    max-width:560px;
  }
  .formula-sub-label{
    font-family:var(--font-body);
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-300);
    text-align:center;
    margin-top:20px;
  }

  /* Calculator */
  .field-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap:20px;
    margin-bottom:8px;
  }

  .field{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
  }

  .field label{
    font-size:0.9062rem;
    font-weight:500;
    color:var(--ink-050);
    text-align:center;
  }

  .field input{
    width:100%;
    background:var(--navy-900);
    border:1px solid var(--navy-600);
    border-radius:8px;
    padding:12px 13px;
    color:var(--ink-050);
    font-family:var(--font-body);
    font-size:1rem;
    text-align:center;
    outline:none;
    transition:border-color 0.15s, box-shadow 0.15s, background-color 0.3s ease, color 0.3s ease;
  }
  .field input:focus{
    border-color:var(--sky-400);
    box-shadow:0 0 0 3px rgba(92,182,249,0.18);
  }
  .field input::placeholder{color:var(--placeholder-grey);}
  .field input:focus::placeholder{color:transparent;}

  .field.error input{
    border-color:var(--red);
  }
  .field.error input:focus{
    box-shadow:0 0 0 3px rgba(239,106,95,0.18);
  }

  .error-msg{
    display:none;
    font-size:0.7812rem;
    color:var(--red-text);
    font-weight:500;
  }
  .field.error .error-msg{
    display:block;
  }

  /* Shown under a result only when nobody is signed in — the one thing an
     account buys you, offered where the result is worth keeping. */
  .save-prompt{
    display:none;
    margin-top:16px;
    font-size:0.8125rem;
    color:var(--ink-300);
  }
  .save-prompt.show{display:block;}
  .save-prompt a{
    color:var(--accent-text);
    font-weight:600;
  }
  .save-prompt a:hover{text-decoration:underline;}

  /* Sits at the end of the calculator page and shares the tool, not a result,
     so it is always visible — nothing to toggle. */
  .share-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:28px;
  }
  .share-label{
    font-size:0.8125rem;
    color:var(--ink-300);
  }
  .share-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    color:var(--ink-300);
    font-size:0.9375rem;
    transition:border-color 0.15s, color 0.15s;
  }
  .share-btn:hover{border-color:var(--sky-400); color:var(--accent-text);}

  /* The nav's YouTube link, in brand red — deliberately the one colorful icon
     up there, everything else in the nav stays flat/monochrome. */
  .yt-btn{color:#ff0000;}
  .yt-btn:hover{border-color:#ff0000; color:#ff0000;}

  /* ---------- Need-or-want reflection ----------
     This panel is the one part of the page that is *generated* rather than
     calculated, and it is dressed to say so: a slowly rotating gradient edge
     that quickens while the model is writing. Everything else on the site is
     deliberately flat, so this treatment is reserved for AI output and should
     not spread to the rest of the UI. */

  /* Registering the angle as a real custom property is what lets it animate;
     without @property the conic gradient renders but sits still, which is a
     perfectly acceptable fallback. */
  @property --nw-angle{
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  /* Two palettes, because the border and the label want opposite things.
     --nw-t* is TEXT: must clear 4.5:1 on the panel, so in light mode it has to
     be dark. --nw-b* is the BORDER and aura: purely decorative, so it wants to
     be vivid. Using the text colours on the border made it read as plain dark
     navy in light mode — a gradient you couldn't see. */
  :root{
    --nw-t1:#7cc2fa;  --nw-t2:#a99bff;
    --nw-b1:#5cb6f9;  --nw-b2:#a78bfa;  --nw-b3:#4fd39a;
  }
  html[data-theme="light"]{
    /* Measured on white / #f6f9fc / the 16% tint: 5.70, 5.40, 4.81 (red);
       5.67, 5.36, 5.05 (orange); 6.12, 5.80, 5.65 (yellow); 6.55, 6.19, 5.90
       (green). All clear WCAG AA for text. */
    --red-text:#bf3125;
    --orange-text:#9a5600;
    --yellow-text:#756000;
    --green-text:#0b6b47;
    --nw-t1:#0d5aa7;  --nw-t2:#5b3fd0;
    --nw-b1:#2f9bf5;  --nw-b2:#8b5cf6;  --nw-b3:#12b981;
  }

  .need-want{
    display:none;
    position:relative;
    margin-top:24px;
    padding:20px 22px 18px;
    /* 1px of conic gradient is too thin to read as colour at all. */
    border:2px solid transparent;
    border-radius:12px;
    text-align:left;
    /* Two backgrounds: the panel fill clipped to the padding box, and the
       rotating gradient clipped to the border box — that's what paints a
       gradient *edge* without a wrapper element. */
    background:
      linear-gradient(var(--navy-700), var(--navy-700)) padding-box,
      conic-gradient(from var(--nw-angle),
        var(--nw-b1), var(--nw-b2), var(--nw-b3), var(--nw-b1)) border-box;
    animation:nw-spin 9s linear infinite;
  }
  @keyframes nw-spin{ to{ --nw-angle:360deg; } }

  /* A soft aura, sitting behind the panel rather than on it. */
  .need-want::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:conic-gradient(from var(--nw-angle),
      var(--nw-b1), var(--nw-b2), var(--nw-b3), var(--nw-b1));
    filter:blur(14px);
    opacity:0.14;
    z-index:-1;
    pointer-events:none;
  }
  /* While the model is writing, the edge moves faster and the aura lifts —
     the panel is visibly "thinking", then settles when it finishes. */
  /* Matches the order in .show: spin, then entrance. */
  .need-want.streaming{ animation-duration:2.6s, 0.34s; }
  .need-want.streaming::before{ opacity:0.3; }

  .nw-spark{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    width:15px;
    height:15px;
    margin-right:7px;
    color:var(--nw-b2);
  }
  .nw-spark svg{ width:100%; height:100%; display:block; }
  .nw-spark .nw-spark-sm{
    position:absolute;
    right:-5px;
    bottom:-3px;
    width:7px;
    height:7px;
    color:var(--nw-b1);
  }
  .need-want.streaming .nw-spark svg{ animation:nw-twinkle 1.6s ease-in-out infinite; }
  .need-want.streaming .nw-spark .nw-spark-sm{ animation-delay:0.5s; }
  @keyframes nw-twinkle{
    0%,100%{ transform:scale(1) rotate(0deg); opacity:0.85; }
    50%    { transform:scale(1.18) rotate(45deg); opacity:1; }
  }
  .need-want.show{
    display:block;
    /* Both animations must be declared together — a second `animation`
       shorthand on the same element replaces the first, silently stopping the
       border from turning. Order matters for the duration override below. */
    animation:
      nw-spin 9s linear infinite,
      nw-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes nw-in{
    from{ opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:none; }
  }
  .need-want.loading{display:block;}
  /* display:none, not visibility:hidden — the latter keeps the full height of
     the hidden beats and leaves a big empty box while the request is out. */
  .need-want.loading .nw-body,
  .need-want.loading .nw-foot,
  .need-want.loading .nw-verdict{display:none;}
  .need-want.loading .nw-head{margin-bottom:0;}
  .need-want.loading::after{
    content:'Thinking it through…';
    display:block;
    margin-top:10px;
    font-size:0.8125rem;
    color:var(--ink-300);
  }

  .nw-head{
    display:flex;
    align-items:center;
    gap:0;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  /* Pushes the verdict chip to the far edge while the spark and label stay
     together on the left. */
  .nw-head .nw-verdict{ margin-left:auto; }
  .nw-label{
    font-family:var(--font-body);
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    /* Both gradient stops clear 4.5:1 on the panel in both themes — checked,
       because gradient text is an easy way to quietly fail contrast. */
    background:linear-gradient(92deg, var(--nw-t1), var(--nw-t2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .nw-verdict{
    font-size:0.75rem;
    font-weight:600;
    padding:3px 10px;
    border-radius:20px;
    white-space:nowrap;
    background:var(--navy-600);
    color:var(--ink-300);
  }
  /* Semantic colours are re-cut per theme elsewhere in this file; these use the
     same tokens so they stay readable on a white card. */
  .nw-verdict.want{background:rgba(244,163,65,0.16); color:var(--orange-text);}
  .nw-verdict.need{background:rgba(79,211,154,0.16); color:var(--green-text);}

  .nw-body{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* Blinking cursor on the last beat that has text, while tokens are arriving —
     the same cue every chat UI uses to say "still writing". */
  .need-want.streaming .nw-beat p:not(:empty)::after{
    content:'';
    display:inline-block;
    width:2px;
    height:1em;
    margin-left:2px;
    vertical-align:text-bottom;
    background:var(--accent-text);
    animation:nw-caret 1s steps(2, start) infinite;
  }
  /* Only the beat currently being written should carry it. */
  .need-want.streaming .nw-beat:has(~ .nw-beat p:not(:empty)) p::after{
    display:none;
  }
  @keyframes nw-caret{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
  @media (prefers-reduced-motion: reduce){
    .need-want.streaming .nw-beat p::after{animation:none;}
    .need-want, .need-want.streaming{animation:none;}
    .need-want.streaming .nw-spark svg{animation:none;}
    .nw-beat, .need-want.streaming .nw-beat:has(p:empty){transition:none; opacity:1;}
  }
  .nw-beat-label{
    display:block;
    font-family:var(--font-body);
    font-size:0.6875rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-300);
    margin-bottom:4px;
  }
  .nw-beat p{
    font-size:0.875rem;
    line-height:1.55;
    color:var(--ink-050);
    margin:0;
  }
  /* A beat that hasn't started writing yet stays out of the way, so the panel
     grows into place instead of showing three empty headings up front. */
  .need-want.streaming .nw-beat:has(p:empty){
    opacity:0.35;
    transition:opacity 0.3s ease;
  }
  .nw-beat{transition:opacity 0.3s ease;}
  .nw-foot{
    margin:16px 0 0;
    padding-top:12px;
    border-top:1px solid var(--navy-600);
    font-size:0.6875rem;
    line-height:1.5;
    color:var(--ink-300);
  }

  @media (max-width: 640px){
    .need-want{padding:16px 14px 14px;}
  }

  /* ---------- Saved user details ---------- */
  .field-hint{
    font-size:0.7188rem;
    color:var(--ink-300);
    line-height:1.35;
  }

  .profile-intro{
    margin-bottom:22px;
  }

  /* Reads the updatedAt the save has always written. Present whenever there is
     a stored figure, so the page shows it is actually holding something. */
  .profile-saved{
    display:none;
    margin-top:14px;
    font-size:0.75rem;
    color:var(--ink-300);
    text-align:center;
  }
  .profile-saved.show{display:block;}

  .profile-status{
    display:none;
    margin-top:16px;
    font-size:0.8125rem;
    font-weight:500;
    text-align:center;
    color:var(--green-text);
  }
  .profile-status.show{display:block;}
  .profile-status.error{color:var(--red-text);}

  /* Sits above the calculator's fields when values arrived from the saved
     profile, so a prefilled number is never mistaken for one the user typed. */
  .prefill-notice{
    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:18px;
    padding:9px 14px;
    border-radius:10px;
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    font-size:0.75rem;
    color:var(--ink-300);
    text-align:left;
  }
  .prefill-notice.show{display:flex;}
  .prefill-notice i{
    color:var(--accent-text);
    flex-shrink:0;
  }
  .prefill-notice a{
    color:var(--accent-text);
    font-weight:600;
    white-space:nowrap;
  }
  .prefill-notice a:hover{text-decoration:underline;}

  .actions{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:24px;
    flex-wrap:wrap;
  }

  .calc{
    display:inline-block;
    font-family:var(--font-body);
    font-weight:600;
    font-size:1rem;
    color:var(--brand-dark);
    background:var(--sky-400);
    border:none;
    border-radius:9px;
    padding:13px 28px;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    transition:background 0.15s;
  }
  .calc:hover{
    background:var(--sky-300);
  }
  .calc:active{
    background:var(--sky-200);
  }

  .calc.danger{
    background:var(--red);
    color:#fff;
  }
  .calc.danger:hover{background:#e0574c;}
  .calc.danger:active{background:#c94a40;}

  /* ---------- Confirm modal ---------- */
  .confirm-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:200;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.2s ease, visibility 0.2s;
  }
  .confirm-overlay.show{
    opacity:1;
    visibility:visible;
  }
  .confirm-modal{
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:14px;
    padding:28px;
    max-width:340px;
    width:100%;
    text-align:center;
    transform:translateY(8px);
    transition:transform 0.2s ease, background-color 0.2s, border-color 0.2s;
  }
  .confirm-overlay.show .confirm-modal{
    transform:translateY(0);
  }
  .confirm-modal h3{
    font-family:var(--font-body);
    font-size:1.0625rem;
    font-weight:600;
    margin-bottom:10px;
  }
  .confirm-modal p{
    color:var(--ink-300);
    font-size:0.9062rem;
    line-height:1.5;
    margin-bottom:24px;
  }
  .confirm-actions{
    display:flex;
    gap:10px;
    justify-content:center;
  }
  .confirm-actions button{
    flex:1;
    padding:11px 20px;
    font-size:0.9375rem;
  }

  /* ---------- Landing page sections ---------- */
  .landing-main{
    max-width:980px;
  }
  @media (min-width: 1300px){
    .landing-main{max-width:1180px;}
  }
  @media (min-width: 1700px){
    .landing-main{max-width:1360px;}
  }

  .landing-section{
    margin-top:88px;
  }

  .section-title{
    font-family:var(--font-body);
    font-weight:700;
    font-size:1.75rem;
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }

  .section-lede{
    color:var(--ink-300);
    font-size:1rem;
    max-width:560px;
    line-height:1.6;
    margin:0 auto 8px;
  }

  .mission-lede{
    max-width:720px;
  }
  .mission-lede strong{
    color:var(--ink-050);
    font-weight:700;
  }

  /* ---------- Life journey — a dot travels the rail, lighting each stop ---------- */
  .life-journey{
    --stop-size:48px;
    --stop-width:96px;
    margin-top:44px;
  }

  .journey-track{
    position:relative;
    padding:14px 0 6px;
  }

  .journey-rail,
  .journey-rail-fill{
    position:absolute;
    left:0;
    width:0;
    height:2px;
    border-radius:2px;
  }
  .journey-rail{
    background:var(--navy-600);
  }
  .journey-rail-fill{
    background:var(--sky-400);
    z-index:1;
  }

  .journey-traveler{
    position:absolute;
    left:0;
    z-index:4;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--sky-400);
    transform:translate(-50%, -50%);
    box-shadow:0 0 0 5px rgba(92,182,249,0.15), 0 0 16px 3px rgba(92,182,249,0.55);
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .journey-traveler.parked{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.35);
  }

  /* Hover/focus jump: let the dot glide instead of snapping */
  .life-journey.snapping .journey-traveler{
    transition:left 0.32s ease, opacity 0.25s ease, transform 0.25s ease;
  }
  .life-journey.snapping .journey-rail-fill{
    transition:width 0.32s ease;
  }

  .journey-stops{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }

  .journey-stop{
    flex:0 0 auto;
    width:var(--stop-width);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:11px;
    padding:0;
    background:none;
    border:0;
    cursor:pointer;
    font-family:var(--font-body);
    color:inherit;
  }
  .journey-stop:focus{outline:none;}

  .journey-stop-dot{
    position:relative;
    width:var(--stop-size);
    height:var(--stop-size);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    color:var(--ink-300);
    font-size:0.8125rem;
    transition:background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }
  .journey-stop:hover .journey-stop-dot{
    border-color:var(--sky-400);
    transform:scale(1.07);
  }
  .journey-stop:focus-visible .journey-stop-dot{
    border-color:var(--sky-400);
    box-shadow:0 0 0 3px rgba(92,182,249,0.35);
  }

  .journey-stop.visited .journey-stop-dot,
  .journey-stop.active .journey-stop-dot{
    background:var(--sky-400);
    border-color:var(--sky-400);
    color:var(--brand-dark);
  }
  .journey-stop.active .journey-stop-dot{
    transform:scale(1.15);
  }
  .journey-stop.active .journey-stop-dot::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid var(--sky-400);
    animation:journey-ring 1.8s ease-out infinite;
  }
  @keyframes journey-ring{
    0%{transform:scale(1); opacity:0.5;}
    70%{transform:scale(1.45); opacity:0;}
    100%{transform:scale(1.45); opacity:0;}
  }

  .journey-stop-label{
    font-size:0.8125rem;
    font-weight:600;
    color:var(--ink-300);
    white-space:nowrap;
    transition:color 0.3s ease;
  }
  .journey-stop.visited .journey-stop-label{
    color:var(--ink-050);
  }
  .journey-stop.active .journey-stop-label{
    color:var(--accent-text);
    font-weight:700;
  }

  .journey-panel{
    max-width:470px;
    min-height:118px;
    margin:32px auto 0;
    padding:22px 26px;
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .journey-panel-inner{
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  .journey-panel.show .journey-panel-inner{
    opacity:1;
    transform:none;
  }
  .journey-panel-title{
    font-family:var(--font-body);
    font-size:1.0625rem;
    font-weight:700;
    color:var(--accent-text);
    margin-bottom:8px;
  }
  .journey-panel-desc{
    color:var(--ink-300);
    font-size:0.9062rem;
    line-height:1.55;
  }

  @media (max-width: 860px){
    .life-journey{--stop-size:42px; --stop-width:68px;}
    .journey-stop-label{font-size:0.6875rem;}
  }
  @media (max-width: 640px){
    .life-journey{--stop-size:36px; --stop-width:36px;}
    .journey-stop-label{display:none;}
    .journey-panel{min-height:104px; padding:20px; margin-top:26px;}
  }

  /* ---------- Why invest — trend charts ---------- */
  .invest-chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:24px;
    margin-top:36px;
    text-align:left;
  }

  .invest-chart-card{
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:16px;
    padding:28px;
    transition:background 0.2s, border-color 0.2s;
  }
  .invest-chart-card h3{
    font-family:var(--font-body);
    font-size:1.0625rem;
    font-weight:600;
    margin-bottom:6px;
  }
  .invest-chart-sub{
    color:var(--ink-300);
    font-size:0.8438rem;
    line-height:1.5;
    margin-bottom:18px;
  }

  .chart-canvas{
    position:relative;
    /* Empty until renderTrendChart() fills it. Reserving the SVG's own ratio
       up front means a slow script can't collapse the box and shift the page
       below it — measured CLS is fine locally, but script.js is deferred and
       this removes the timing dependency on slower connections. */
    aspect-ratio:440 / 240;
  }
  .trend-chart-svg{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:440 / 240;
    overflow:visible;
    outline:none;
  }
  .trend-chart-svg:focus-visible .chart-crosshair,
  .trend-chart-svg:focus-visible .chart-hover-dot{
    opacity:1 !important;
  }

  .chart-grid-line{
    stroke:var(--navy-600);
    stroke-width:1;
  }
  .chart-axis-label{
    font-family:var(--font-body);
    font-size:0.5938rem;
    fill:var(--ink-300);
  }
  .chart-direct-label{
    font-family:var(--font-body);
    font-size:0.75rem;
    font-weight:700;
    fill:var(--ink-050);
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .chart-end-dot{
    fill:var(--chart-line);
    stroke:var(--navy-800);
    stroke-width:2;
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .chart-area-path{
    opacity:0;
    transition:opacity 0.5s ease;
  }
  .chart-canvas.in-view .chart-area-path{
    opacity:1;
    transition-delay:0.7s;
  }
  .chart-canvas.in-view .chart-end-dot,
  .chart-canvas.in-view .chart-direct-label{
    opacity:1;
    transition-delay:1.05s;
  }
  .chart-crosshair{
    stroke:var(--ink-300);
    stroke-width:1;
    stroke-dasharray:2 3;
    transition:opacity 0.15s ease;
  }
  .chart-hover-dot{
    fill:var(--chart-line);
    stroke:var(--navy-800);
    stroke-width:2;
    transition:opacity 0.15s ease;
  }

  .chart-tooltip{
    position:absolute;
    transform:translate(-50%, -115%);
    background:var(--navy-900);
    border:1px solid var(--navy-600);
    border-radius:8px;
    padding:6px 10px;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s ease;
    white-space:nowrap;
    z-index:2;
  }
  .chart-tooltip-value{
    font-family:var(--font-body);
    font-weight:700;
    font-size:0.875rem;
    color:var(--ink-050);
  }
  .chart-tooltip-label{
    font-size:0.6875rem;
    color:var(--ink-300);
  }

  .inflation-stage{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
  }

  .inflation-note{
    width:100%;
    max-width:360px;
    transform-origin:center center;
    will-change:transform, opacity, filter;
  }

  .inflation-note-svg{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 14px 30px rgba(0,0,0,0.28));
  }

  .inflation-readout{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 16px;
  }

  .inflation-readout-year{
    font-family:var(--font-body);
    font-weight:700;
    font-size:1.0625rem;
    color:var(--accent-text);
  }

  .inflation-readout-worth{
    font-family:var(--font-body);
    font-weight:700;
    font-size:1.375rem;
  }

  .inflation-note-caption{
    color:var(--ink-300);
    font-size:0.8125rem;
    line-height:1.5;
    max-width:440px;
    margin:16px auto 0;
  }

  .faq{
    max-width:700px;
    margin:36px auto 0;
    text-align:left;
  }

  .faq-item{
    border-bottom:1px solid var(--navy-600);
    padding:18px 4px;
  }
  .faq-item:first-child{
    border-top:1px solid var(--navy-600);
  }

  .faq-item summary{
    cursor:pointer;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9688rem;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';
    font-size:1.25rem;
    font-weight:400;
    color:var(--accent-text);
    flex-shrink:0;
  }
  .faq-item[open] summary::after{content:'\2212';}

  .faq-item p{
    color:var(--ink-300);
    font-size:0.9062rem;
    line-height:1.6;
    margin-top:12px;
  }

  .site-footer{
    border-top:1px solid var(--navy-600);
    margin-top:96px;
    padding:32px 40px;
    text-align:center;
    color:var(--ink-300);
    font-size:0.8438rem;
  }

  .footer-links{
    display:flex;
    gap:24px;
    justify-content:center;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  .footer-links a{
    color:var(--ink-300);
    text-decoration:none;
    font-size:0.8438rem;
    transition:color 0.15s;
  }
  .footer-links a:hover{color:var(--accent-text);}

  @media (max-width: 640px){
    .landing-section{margin-top:64px;}
    .site-footer{margin-top:72px; padding:28px 20px;}
    .section-title{font-size:1.4375rem;}
  }

  button.reset{
    font-family:var(--font-body);
    font-weight:500;
    font-size:1rem;
    color:var(--ink-300);
    background:transparent;
    border:1px solid var(--navy-600);
    border-radius:9px;
    padding:13px 24px;
    cursor:pointer;
  }
  button.reset:hover{border-color:var(--sky-400); color:var(--accent-text);}

  /* Result */
  .result{
    display:none;
  }
  .result.show{display:block;}

  .result-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
  }

  .ai-value{
    font-family:var(--font-body);
    font-weight:700;
    font-size:3.5rem;
    line-height:1;
    text-align:center;
  }
  #aiNumber{transition:color 0.3s ease;}
  #aiNumber.red{color:var(--red-text);}
  #aiNumber.orange{color:var(--orange-text);}
  #aiNumber.yellow{color:var(--yellow-text);}
  #aiNumber.green{color:var(--green-text);}
  .ai-value .label{
    display:block;
    font-family:var(--font-body);
    font-weight:400;
    font-size:0.8125rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-300);
    margin-bottom:8px;
  }

  .badge{
    font-family:var(--font-body);
    font-size:0.875rem;
    font-weight:600;
    padding:8px 16px;
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .dot{width:8px; height:8px; border-radius:50%;}

  .badge.red{background:rgba(239,106,95,0.14); color:var(--red-text);}
  .badge.red .dot{background:var(--red-text);}
  .badge.orange{background:rgba(244,163,65,0.14); color:var(--orange-text);}
  .badge.orange .dot{background:var(--orange-text);}
  .badge.yellow{background:rgba(231,201,72,0.14); color:var(--yellow-text);}
  .badge.yellow .dot{background:var(--yellow-text);}
  .badge.green{background:rgba(79,211,154,0.14); color:var(--green-text);}
  .badge.green .dot{background:var(--green-text);}

  /* ---------- Calculation history ---------- */
  .history-panel{
    margin-top:28px;
    text-align:left;
  }
  .history-panel summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--accent-text);
    text-transform:uppercase;
    list-style:none;
  }
  .history-panel summary::-webkit-details-marker{display:none;}
  .history-panel summary::after{
    content:'\25be';
    font-size:0.8125rem;
    color:var(--ink-300);
    transition:transform 0.2s ease;
  }
  .history-panel[open] summary::after{transform:rotate(180deg);}

  .history-list{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .history-empty{
    color:var(--ink-300);
    font-size:0.9062rem;
    text-align:center;
    padding:8px 0;
  }

  .history-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:18px;
  }
  .history-page-label{
    font-size:0.8125rem;
    color:var(--ink-300);
    min-width:56px;
    text-align:center;
  }
  .history-page-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 13px;
    font-family:var(--font-body);
    font-size:0.8125rem;
    font-weight:500;
    color:var(--ink-300);
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:20px;
    cursor:pointer;
    transition:border-color 0.15s, color 0.15s;
  }
  .history-page-btn:hover:not(:disabled){border-color:var(--sky-400); color:var(--accent-text);}
  .history-page-btn:disabled{opacity:0.4; cursor:default;}

  .history-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    background:var(--navy-700);
    border:1px solid var(--navy-600);
    border-radius:10px;
    flex-wrap:wrap;
  }

  .history-item-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .history-item-name{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9375rem;
    color:var(--ink-050);
    overflow-wrap:anywhere;
  }
  .history-item-meta{
    font-size:0.7812rem;
    color:var(--ink-300);
  }

  .history-item-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex:1 1 auto;
    min-width:0;
  }
  .history-item-right .badge{
    white-space:normal;
    text-align:left;
  }

  .history-delete-btn{
    flex-shrink:0;
    margin-left:auto;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:none;
    border:none;
    color:var(--ink-300);
    cursor:pointer;
    font-size:0.875rem;
    transition:background-color 0.15s, color 0.15s;
  }
  .history-delete-btn:hover{background:rgba(239,106,95,0.14); color:var(--red-text);}

  .history-edit-btn{
    flex-shrink:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:none;
    border:none;
    color:var(--ink-300);
    cursor:pointer;
    font-size:0.875rem;
    transition:background-color 0.15s, color 0.15s;
  }
  .history-edit-btn:hover{background:rgba(92,182,249,0.14); color:var(--accent-text);}

  /* ---------- Edit-history banner ---------- */
  .edit-banner{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    background:rgba(92,182,249,0.1);
    border:1px solid var(--sky-400);
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:20px;
    font-size:0.875rem;
    color:var(--accent-text);
  }
  .edit-banner.show{display:flex;}
  .edit-banner-cancel{
    background:none;
    border:none;
    color:var(--accent-text);
    font-family:var(--font-body);
    font-size:0.8438rem;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
    padding:0;
    white-space:nowrap;
  }

  .threshold-note{
    margin-top:18px;
    font-size:0.9062rem;
    color:var(--ink-300);
    line-height:1.6;
    text-align:center;
  }
  .threshold-note strong{color:var(--accent-text); font-family:var(--font-body);}

  /* Recommendation panel */
  .recommendation{
    display:none;
    margin-top:24px;
    padding:20px;
    border-radius:12px;
    border:1px solid rgba(244,163,65,0.35);
    background:rgba(244,163,65,0.08);
    text-align:left;
    --status-color:var(--orange-text);
    --status-rgb:244,163,65;
  }
  .recommendation.show{display:block;}

  .recommendation.status-green{
    border-color:rgba(79,211,154,0.35);
    background:rgba(79,211,154,0.08);
    --status-color:var(--green-text);
    --status-rgb:79,211,154;
  }
  .recommendation.status-orange{
    border-color:rgba(244,163,65,0.35);
    background:rgba(244,163,65,0.08);
    --status-color:var(--orange-text);
    --status-rgb:244,163,65;
  }
  .recommendation.status-red{
    border-color:rgba(239,106,95,0.35);
    background:rgba(239,106,95,0.08);
    --status-color:var(--red-text);
    --status-rgb:239,106,95;
  }

  .rec-label{
    font-family:var(--font-body);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--status-color);
    margin-bottom:10px;
    text-align:center;
  }

  .rec-text{
    font-size:0.9688rem;
    color:var(--ink-050);
    line-height:1.55;
    margin-bottom:18px;
    text-align:center;
  }

  .rec-checklist-label{
    font-family:var(--font-body);
    font-size:0.6875rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-300);
    text-align:center;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(var(--status-rgb), 0.25);
    margin-bottom:14px;
  }

  .rec-checklist{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .rec-check-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .rec-check-left{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .rec-check-icon{
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.6875rem;
    font-weight:700;
    flex-shrink:0;
  }
  .rec-check-icon.pass{background:rgba(79,211,154,0.16); color:var(--green-text);}
  .rec-check-icon.fail{background:rgba(239,106,95,0.16); color:var(--red-text);}

  .rec-check-name{
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-050);
  }

  .rec-check-value{
    font-family:var(--font-body);
    font-size:0.8125rem;
    color:var(--ink-300);
    white-space:nowrap;
  }

  /* On a phone the check name wraps and the nowrap value gets pushed past the
     row's edge, so the pair stacks instead — value indented to sit under the
     name rather than under its pass/fail icon. */
  @media (max-width: 640px){
    .rec-check-row{
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
    }
    .rec-check-value{
      padding-left:30px;
    }
  }

  /* Classification table */
  table{
    width:100%;
    border-collapse:collapse;
    margin-top:6px;
  }
  th, td{
    text-align:center;
    padding:12px 10px;
    font-size:0.9375rem;
    border-bottom:1px solid var(--navy-700);
  }
  th{
    font-family:var(--font-body);
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-300);
    font-weight:500;
  }
  td.range{font-family:var(--font-body); color:var(--accent-text); font-weight:600;}
  tr.hl td{background:rgba(92,182,249,0.06);}

  /* ---------- Feedback widget (reusable across tools) ---------- */
  .feedback-widget{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:70;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    pointer-events:none;
  }
  .feedback-widget .feedback-icon{
    pointer-events:auto;
  }
  .feedback-panel{
    position:relative;
    width:280px;
    max-width:calc(100vw - 48px);
    padding:18px;
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s, border-color 0.2s;
    pointer-events:none;
  }
  .feedback-panel.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  .feedback-panel-title{
    font-size:0.875rem;
    font-weight:500;
    color:var(--ink-050);
    line-height:1.4;
  }
  .feedback-rating{
    display:flex;
    justify-content:center;
    gap:4px;
  }
  .star-btn{
    background:none;
    border:none;
    padding:2px;
    cursor:pointer;
    font-size:1.1875rem;
    line-height:1;
    color:var(--navy-600);
    transition:color 0.15s, transform 0.1s;
  }
  .star-btn:hover{transform:scale(1.1);}
  .star-btn.active{color:var(--sky-400);}
  .feedback-panel textarea{
    width:100%;
    resize:vertical;
    min-height:64px;
    background:var(--navy-900);
    border:1px solid var(--navy-600);
    border-radius:8px;
    padding:10px 12px;
    color:var(--ink-050);
    font-family:var(--font-body);
    font-size:0.875rem;
    outline:none;
    transition:border-color 0.15s, box-shadow 0.15s, background-color 0.3s ease, color 0.3s ease;
  }
  .feedback-panel textarea:focus{
    border-color:var(--sky-400);
    box-shadow:0 0 0 3px rgba(92,182,249,0.18);
  }
  .feedback-panel textarea::placeholder{color:var(--placeholder-grey);}
  .feedback-submit{
    padding:10px 16px;
    font-size:0.9062rem;
    width:100%;
  }
  .feedback-submit:disabled{opacity:0.6; cursor:default;}
  .feedback-status{
    font-size:0.7812rem;
    min-height:15px;
    text-align:center;
  }
  .feedback-status.success{color:var(--green-text);}
  .feedback-status.error{color:var(--red-text);}
  .feedback-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--sky-400);
    color:var(--brand-dark);
    border:none;
    font-family:inherit;
    font-size:1.25rem;
    line-height:1;
    padding:0;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    transition:background-color 0.15s, transform 0.15s;
  }
  .feedback-icon:hover{background:var(--sky-300); transform:scale(1.06);}

  /* Tighter side inset on a phone. The bottom offset stays at the desktop
     24px — the 96px that used to sit here was clearance for the .bottom-nav,
     and that was deleted, so it just left the icon floating high. */
  @media (max-width: 860px){
    .feedback-widget{right:16px;}
  }

  /* 404 page. Cloudflare Pages serves this with a real 404 status for any
     unmatched path; without the file it answers 200 with the landing page,
     which reads to a search engine as a duplicate rather than a dead end. */
  .notfound{
    max-width:640px;
    margin:80px auto;
    text-align:center;
  }
  .notfound h1{margin-bottom:16px;}
  .notfound p{
    color:var(--ink-300);
    max-width:46ch;
    margin:0 auto 28px;
  }
  .notfound-actions{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
  .notfound-actions .calc{display:inline-block;text-decoration:none;}
  .notfound-secondary{
    color:var(--accent-text);
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid transparent;
  }
  .notfound-secondary:hover{border-bottom-color:currentColor;}