: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-display:'League Spartan', sans-serif;
    --font-body:'League Spartan', sans-serif;
    --font-mono:'League Spartan', sans-serif;
    /* Height of the sticky .topnav — the calculator rail parks directly
       beneath it, so both offsets come from one place. */
    --topnav-h:71px;

    /* 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;

    /* App chrome — the calculator rail. Deliberately a different surface from
       both the page background and the cards, so it reads as navigation
       furniture rather than page content. */
    --rail-bg:#0e1a2c;
    --rail-border:#24384f;
    --rail-hover:#1b2c46;
  }

  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;

    --rail-bg:#e8eef6;
    --rail-border:#d2dfee;
    --rail-hover:#dae5f2;
  }

  .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-display);
    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-display);
    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;
  }
  /* ---- Sign-in split screen: illustration half + form half ---- */
  .auth-gate.auth-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    max-width:none;
    padding:0;
    align-items:stretch;
  }
  .auth-split .auth-illustration{
    position:relative;
    overflow:hidden;
    padding:0;
    min-height:calc(100vh - 70px);
  }
  .auth-split .auth-gate-inner{
    flex:none;
    max-width:none;
    width:100%;
    justify-content:center;
    padding:48px 24px;
  }
  .auth-split .auth-gate-inner .card{max-width:420px;}

  /* Transparent, matching the My details page. Giving this panel its own colour
     puts a hard seam down the middle and the page reads as two unrelated halves
     rather than one screen; the canvas is transparent too, so the body's own
     background runs straight across. If WebGL never initialises the column just
     reads as empty page. */
  .auth-split .auth-illustration{
    background:transparent;
  }
  .auth-illustration canvas{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    cursor:grab;
    touch-action:none;
  }
  .auth-illustration canvas:active{cursor:grabbing;}


  @media (max-width: 1000px){
    .auth-gate{
      flex-direction:column;
      justify-content:center;
      padding:40px 24px;
    }
    .auth-gate-inner{
      margin:0 auto;
    }
    .auth-gate.auth-split{grid-template-columns:1fr;}
    .auth-gate.auth-split .auth-illustration{display:none;}
    .auth-split .auth-gate-inner{padding:40px 24px;}
  }

  .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-mono);
    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);
  }

  /* ---------- Formula switcher — left sidebar on desktop, bottom dock on
     mobile (a sidebar doesn't work at narrow widths) ---------- */
  .calculator-shell{
    display:block;
  }

  .side-nav{
    display:none;
  }

  .side-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 10px;
    margin-bottom:10px;
  }

  .side-nav-title{
    font-family:var(--font-mono);
    font-size:0.6875rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-300);
    opacity:0.8;
    white-space:nowrap;
    overflow:hidden;
  }

  .side-nav-toggle{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:8px;
    background:transparent;
    border:none;
    color:var(--ink-300);
    font-size:0.6875rem;
    cursor:pointer;
    transition:background-color 0.15s, color 0.15s;
  }
  .side-nav-toggle:hover{
    background:var(--rail-hover);
    color:var(--ink-050);
  }
  .side-nav-toggle i{
    display:block;
    transition:transform 0.25s ease;
  }

  .nav-icon{
    width:26px;
    height:26px;
    border-radius:8px;
    background:var(--rail-hover);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:0.8125rem;
    font-weight:700;
    line-height:1;
    color:var(--accent-text);
    flex-shrink:0;
    transition:background-color 0.3s ease, color 0.3s ease;
  }

  .nav-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .nav-item{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    font-size:0.9375rem;
    font-weight:500;
    color:var(--ink-300);
    cursor:default;
    border:1px solid transparent;
    transition:border-color 0.15s, color 0.15s, background-color 0.3s ease;
  }
  /* Label and its "coming soon" badge stack in a column, so a long calculator
     name keeps one line instead of wrapping around an inline badge. */
  .nav-item .nav-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .nav-item .nav-text{
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .nav-item.active{
    background:var(--sky-400);
    color:var(--brand-dark);
    border-color:var(--sky-400);
  }
  .nav-item.active .nav-icon{
    background:var(--brand-dark);
    color:var(--sky-400);
  }

  .nav-item .soon{
    font-family:var(--font-mono);
    font-size:0.625rem;
    font-weight:600;
    letter-spacing:0.03em;
    background:var(--rail-hover);
    color:var(--ink-300);
    padding:2px 7px;
    border-radius:20px;
    white-space:nowrap;
    flex-shrink:0;
  }

  @media (min-width: 861px){
    .calculator-shell{
      display:flex;
      align-items:stretch;
    }
    .side-nav{
      display:block;
      flex:0 0 276px;
      position:sticky;
      top:var(--topnav-h);
      align-self:flex-start;
      /* Full remaining viewport height with its own scroll, so the rail reads
         as fixed app chrome rather than a column of page content. */
      height:calc(100vh - var(--topnav-h));
      overflow-y:auto;
      background:var(--rail-bg);
      border-right:1px solid var(--rail-border);
      padding:22px 14px 28px;
      transition:flex-basis 0.25s ease, background-color 0.2s, border-color 0.2s;
    }
    .side-nav.collapsed{
      flex:0 0 72px;
      padding-left:12px;
      padding-right:12px;
    }
    .side-nav.collapsed .side-nav-title,
    .side-nav.collapsed .nav-body{
      display:none;
    }
    .side-nav.collapsed .side-nav-head{
      justify-content:center;
    }
    .side-nav.collapsed .nav-list{
      align-items:center;
    }
    .side-nav.collapsed .nav-item{
      width:44px;
      height:44px;
      justify-content:center;
      padding:0;
      border-radius:12px;
    }
    .side-nav.collapsed .side-nav-toggle i{
      transform:rotate(180deg);
    }
    .calculator-main{
      flex:1;
      min-width:0;
      /* Keep the auto side-margins so the content column centers itself
         within the space left of it, once its own max-width caps it. */
      margin:0 auto;
      padding-left:32px;
      padding-right:32px;
    }
  }

  /* ---------- Bottom nav (mobile) ---------- */
  .bottom-nav{
    display:none;
    position:fixed;
    bottom:0; left:0; right:0;
    background:var(--navy-800);
    border-top:1px solid var(--navy-600);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content:space-around;
    align-items:center;
    z-index:50;
    transition:background-color 0.3s ease, border-color 0.3s ease;
  }
  .bn-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    color:var(--ink-300);
    font-family:var(--font-body);
    font-size:0.6875rem;
    font-weight:500;
    cursor:pointer;
    padding:6px 14px;
    border-radius:10px;
  }
  .bn-item.active{color:var(--accent-text);}
  .bn-item:disabled{opacity:0.5; cursor:default;}
  .bn-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--navy-700);
    font-family:var(--font-mono);
    font-weight:700;
    font-size:0.75rem;
    color:inherit;
    transition:background-color 0.3s ease, color 0.3s ease;
  }
  .bn-item.active .bn-icon{background:var(--sky-400); color:var(--brand-dark);}

  @media (max-width: 860px){
    .bottom-nav{display:flex;}
    main{padding-bottom:104px;}
    /* The bottom nav is fixed, so the footer needs to clear it too. */
    .site-footer{margin-bottom:104px;}
  }

  @media (max-width: 640px){
    .topnav{padding:14px 18px;}
    #themeLabel{display:none;}
  }

  /* Landing hero heading — deliberately a touch smaller than the global
     h1 so the typed quote below still reads as the visual anchor. */
  .landing-title{
    font-size:2.5rem;
    line-height:1.05;
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }
  .landing-sub{
    max-width:30rem;
    margin:0 auto 34px;
    font-size:0.9375rem;
    line-height:1.5;
    color:var(--ink-300);
  }
  @media (max-width: 640px){
    .landing-title{font-size:2rem;}
  }

  /* 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;}

  /* Brief pulse when the 3D cupboard sends you to the savings field, so the
     jump has a visible destination rather than just moving the caret. */
  @keyframes field-flash{
    0%   { box-shadow:0 0 0 0 rgba(92,182,249,0.55); }
    70%  { box-shadow:0 0 0 10px rgba(92,182,249,0); }
    100% { box-shadow:0 0 0 0 rgba(92,182,249,0); }
  }
  .field.field-flash input{
    border-color:var(--sky-400);
    animation:field-flash 1.2s ease-out;
  }
  @media (prefers-reduced-motion: reduce){
    .field.field-flash input{animation:none; border-color:var(--sky-400);}
  }

  /* ---------- My details: split layout ----------
     Same structure as the sign-in page — scene on one side, content on the
     other. A full-bleed scene behind the form was tried and rejected: it
     competed with the inputs on a page that is, in the end, a settings form. */
  .details-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  /* Sticky, and exactly one viewport tall. Without this the panel stretches to
     match the form column, the diorama centres itself in that much taller box,
     and half of it ends up below the fold. */
  .details-illustration{
    position:sticky;
    top:var(--topnav-h);
    align-self:start;
    height:calc(100vh - var(--topnav-h));
    overflow:hidden;
    /* Transparent, not a panel colour. The canvas itself is transparent, so the
       body's own background — radial accents included — runs unbroken across
       both columns and there is no seam down the middle of the page. */
    background:transparent;
  }
  /* Sits inside the aria-hidden panel on purpose: it describes two mouse-only
     shortcuts that both have DOM equivalents elsewhere, so there is nothing here
     a screen-reader user is missing. */
  .scene-hint{
    position:absolute;
    left:0;
    right:0;
    bottom:26px;
    margin:0;
    padding:0 24px;
    text-align:center;
    font-size:0.75rem;
    color:var(--ink-300);
    opacity:0.72;
    pointer-events:none;
  }

  .details-illustration canvas{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }
  /* The content column scrolls independently of the sticky scene. */
  .details-split main{
    max-width:none;
    width:100%;
    padding:48px 32px 80px;
  }
  .details-split main .card{max-width:520px; margin-left:auto; margin-right:auto;}

  @media (max-width: 860px){
    .details-split{grid-template-columns:1fr;}
    .details-illustration{display:none;}
    .details-split main{padding:36px 20px 104px;}
  }

  /* ---------- 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-display);
    font-size:1.1875rem;
    font-weight:700;
    margin:34px 0 10px;
  }
  .legal h3{
    font-family:var(--font-display);
    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-mono);
    font-size:0.8125rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent-text);
    margin-bottom:10px;
  }

  h1{
    font-family:var(--font-display);
    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-display);
    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;}

  .card-link{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.2s, border-color 0.2s, transform 0.15s;
  }
  .card-link:hover{transform:translateY(-2px);}
  .card-link .lede{color:inherit; opacity:0.85; margin-bottom:0;}

  /* ---------- 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-mono);
    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-display);
    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-display);
    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-display);
    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-display);
    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-mono);
    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-mono);
    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-mono);
    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-mono);
    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;}

  /* ---------- 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-t3:#67dcaa;
    --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. Green matches --nw-t3 so the two
       readable greens on the page are one colour. */
    --red-text:#bf3125;
    --orange-text:#9a5600;
    --yellow-text:#756000;
    --green-text:#0b6b47;
  }
  html[data-theme="light"]{
    --nw-t1:#0d5aa7;  --nw-t2:#5b3fd0;  --nw-t3:#0b6b47;
    --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-display);
    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-display);
    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-display);
    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-display);
    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-display);
    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-display);
    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-display);
    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;}
  }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-top:36px;
    text-align:left;
  }

  .feature-card{
    background:var(--navy-800);
    border:1px solid var(--navy-600);
    border-radius:14px;
    padding:26px;
    transition:background 0.2s, border-color 0.2s;
  }

  .feature-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    background:var(--sky-400);
    color:var(--brand-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.0625rem;
    margin-bottom:16px;
    flex-shrink:0;
  }

  .feature-card h3{
    font-family:var(--font-display);
    font-size:1.0312rem;
    font-weight:600;
    margin-bottom:8px;
  }

  .feature-card p{
    color:var(--ink-300);
    font-size:0.9062rem;
    line-height:1.6;
  }

  /* ---------- 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-display);
    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-display);
    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-display);
    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-display);
    font-weight:700;
    font-size:1.0625rem;
    color:var(--accent-text);
  }

  .inflation-readout-worth{
    font-family:var(--font-display);
    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;
  }

  .cta-banner{
    background:var(--sky-400);
    border-radius:16px;
    padding:52px 32px;
    text-align:center;
    margin-top:88px;
  }

  .cta-banner h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.625rem;
    color:var(--brand-dark);
    margin-bottom:10px;
  }

  .cta-banner p{
    color:var(--brand-dark);
    opacity:0.75;
    font-size:0.9688rem;
    max-width:480px;
    margin:0 auto 26px;
    line-height:1.6;
  }

  .cta-banner .calc{
    background:var(--brand-dark);
    color:var(--sky-200);
  }
  .cta-banner .calc:hover{
    background:var(--navy-700);
    color:var(--sky-200);
  }

  .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-display);
    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;}
    .cta-banner{margin-top:64px; padding:40px 24px;}
    .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-display);
    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-mono);
    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-mono);
    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-display);
    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-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-display);
    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-mono);}

  /* 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-mono);
    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-mono);
    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-mono);
    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-mono);
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-300);
    font-weight:500;
  }
  td.range{font-family:var(--font-mono); 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);}

  @media (max-width: 860px){
    .feedback-widget{right:16px; bottom:96px;}
  }

  /* 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;
  }
  /* The source comp is 1920x1080; hold that ratio so the box never collapses
     or jumps while the player is still loading. */
  .notfound-art{
    width:100%;
    max-width:420px;
    aspect-ratio:16 / 9;
    margin:0 auto 8px;
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .notfound-art.is-ready{opacity:1;}
  .notfound-art svg{display:block;width:100%;height:100%;}

  .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;}