/* hero2.css — the two-column hero (owner design "Hazy Hero", 2026-09-19).
   Left: pill · headline · the three-number ask bar, which swaps for the
   "answer is ready" card. Right: the futures ring with its floating cards.
   Everything is scoped under .nh / .nh-haze; the header and the scrolling
   desktop frame below are untouched. Every figure drawn here comes from
   js/hero.js, which gets it from the engine worker — none is set in CSS/HTML. */
.hero-section { position: relative; }
.hero-section .hero-section-holder { padding-top: 84px; }
.nh, .nh-haze {
  --ink: #fff; --ink-rgb: 255,255,255; --accent-word: #c9d6ff; --green-ink: #7be8b3; --blue-ink: #7c9cff; --chip-ink: #c3d4ff;
  --amber-ink: #f3c77a; --red-ink: #ff9d94;
  --surface: rgba(10,10,15,.74); --surface-2: rgba(14,14,20,.7);
  --shadow-lg: 0 40px 100px rgba(0,0,0,.5); --shadow-md: 0 30px 60px rgba(0,0,0,.45);
  --f-d: Sora, Outfit, system-ui, sans-serif; --f-t: 'Public Sans', system-ui, sans-serif;
}

/* ── haze: three drifting blooms, a pointer spotlight, vignette, grain ── */
.nh-haze { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.nh-haze .hz { position: absolute; will-change: transform; }
.nh-haze .hz i { display: block; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; }
.nh-haze .h1 { left: calc(50% - 560px); top: -280px; width: 1120px; height: 740px; }
.nh-haze .h1 i { background: url('/assets/Hero-Blur.webp') center/150% no-repeat, radial-gradient(ellipse, rgba(60,110,246,.45), rgba(60,110,246,0) 65%); opacity: .42; filter: blur(40px) saturate(.55); animation: nhDrift 28s ease-in-out infinite; }
.nh-haze .h2 { left: -320px; top: 46%; width: 780px; height: 780px; }
.nh-haze .h2 i { background: url('/assets/Blue-Blur.webp') center/165% no-repeat, radial-gradient(circle, rgba(60,110,246,.5), rgba(60,110,246,0) 65%); opacity: .22; filter: blur(50px) saturate(.5); animation: nhDrift 34s ease-in-out infinite reverse; }
.nh-haze .h3 { right: -300px; top: 34%; width: 740px; height: 740px; }
.nh-haze .h3 i { background: url('/assets/Orange-Blur-p-800.jpg') center/165% no-repeat, radial-gradient(circle, rgba(255,138,61,.4), rgba(255,138,61,0) 65%); opacity: .14; filter: blur(60px) saturate(.35); animation: nhDrift 40s ease-in-out infinite; }
.nh-haze .spot { position: absolute; inset: 0; background: radial-gradient(640px circle at var(--mx,50%) var(--my,28%), rgba(200,214,255,.09), transparent 70%); mix-blend-mode: screen; }
.nh-haze .vig { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,4,13,.25), rgba(3,4,13,.5) 55%, #000 96%); }
.nh-haze .noise { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── layout ── */
.nh { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: clamp(20px, 3vw, 48px); min-height: calc(100vh - 150px); padding: clamp(12px, 2.5vh, 40px) 0; font-family: var(--f-t); color: var(--ink); text-align: left; }
.nh-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.nh-right { position: relative; display: flex; justify-content: center; min-width: 0; animation: nhRise 1.1s .55s cubic-bezier(.2,.7,.2,1) both; }

.nh-pill { display: inline-flex; align-items: center; gap: 10px; height: clamp(28px, 5.5vh, 34px); padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb),.14); background: rgba(var(--ink-rgb),.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 13px/1 var(--f-t); color: rgba(var(--ink-rgb),.86); text-decoration: none; transition: border-color .2s, color .2s; animation: nhRise .9s .05s cubic-bezier(.2,.7,.2,1) both; }
.nh-pill:hover { border-color: rgba(var(--ink-rgb),.32); color: var(--ink); }
.nh-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #3f7bff; box-shadow: 0 0 12px #3f7bff; }
.nh-pill b { font-weight: 600; color: var(--ink); } .nh-pill i { font-style: normal; color: rgba(var(--ink-rgb),.4); }

.nh-h1 { margin: clamp(12px, 2.5vh, 22px) 0 0; max-width: 14ch; font: 600 clamp(36px, min(6.4vw, 8vh), 96px)/.98 var(--f-d); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.nh-h1 span { display: inline-block; animation: nhRise .9s cubic-bezier(.2,.7,.2,1) both; }
.nh-h1 span:nth-child(1) { animation-delay: .15s; } .nh-h1 span:nth-child(2) { animation-delay: .22s; } .nh-h1 span:nth-child(3) { animation-delay: .29s; }
.nh-h1 span:nth-child(4) { animation-delay: .36s; } .nh-h1 span:nth-child(5) { animation-delay: .43s; }
.nh-h1 .acc { color: var(--accent-word); }
.nh-sub { margin: clamp(10px, 2vh, 16px) 0 0; max-width: 540px; font: 400 clamp(13.5px, 2.6vh, 17px)/1.5 var(--f-t); color: rgba(var(--ink-rgb),.7); text-wrap: pretty; animation: nhRise .9s .5s cubic-bezier(.2,.7,.2,1) both; }

/* ── the ask bar ── */
.nh-ask { width: 100%; max-width: 880px; margin-top: clamp(14px, 3vh, 26px); animation: nhRise 1s .62s cubic-bezier(.2,.7,.2,1) both; }
.nh-ask [hidden] { display: none !important; }
.nh-bar { display: flex; flex-wrap: wrap; gap: 1px; padding: 1px; margin: 0; border-radius: 20px; overflow: hidden; background: rgba(var(--ink-rgb),.14); box-shadow: var(--shadow-lg), 0 0 90px rgba(63,123,255,.07); transition: background .2s; }
.nh-bar.err { background: rgba(255,120,110,.55); }
.nh-f { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 12px); margin: 0; padding: clamp(12px, 2.2vh, 20px) 22px clamp(10px, 2vh, 18px); background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); cursor: text; }
.nh-f.w { flex: 1.3 1 170px; }
.nh-f .lb { font: 600 10.5px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb),.52); }
.nh-f .in { display: flex; align-items: baseline; gap: 8px; }
.nh-f .in b { font: 500 18px/1 var(--f-d); color: rgba(var(--ink-rgb),.45); }
.nh-f .in i { font: 500 13px/1 var(--f-t); font-style: normal; color: rgba(var(--ink-rgb),.45); }
.nh-f input { flex: 1; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 clamp(18px, 3.4vh, 24px)/1 var(--f-d); letter-spacing: -.03em; height: auto; }
.nh-f input::placeholder { color: rgba(var(--ink-rgb),.26); }
.nh-go { position: relative; flex: 1 1 190px; min-height: clamp(56px, 11vh, 92px); border: 0; cursor: pointer; overflow: hidden; background: linear-gradient(180deg, #3f7bff, #2a62f2); color: #fff; font: 600 17px/1 var(--f-t); display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); transition: transform .18s ease, filter .2s ease; }
.nh-go::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.nh-go:hover { filter: brightness(1.08); } .nh-go:hover::before { opacity: 1; }
.nh-go:active, .nh-go.press { transform: scale(.97); }
.nh-go:disabled { cursor: progress; }
.nh-go .sp { display: none; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: nhSpin .8s linear infinite; }
.nh-go.running .sp { display: block; }
.nh-note { margin: clamp(8px, 1.6vh, 12px) 0 0; font: 400 13px/1.5 var(--f-t); color: rgba(var(--ink-rgb),.52); }
.nh-note b { color: rgba(var(--ink-rgb),.88); font-weight: 600; }
.nh-note a, .nh-note button { color: rgba(var(--ink-rgb),.72); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nh-note a:hover, .nh-note button:hover { color: var(--ink); }

/* ── "your answer is ready" ── */
.nh-cta { position: relative; overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid rgba(var(--ink-rgb),.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-lg), 0 0 90px rgba(63,123,255,.14); animation: nhRise .7s cubic-bezier(.2,.7,.2,1) both; }
.nh-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 200px at 100% 0%, rgba(63,123,255,.22), rgba(63,123,255,0) 70%), radial-gradient(360px 160px at 0% 100%, rgba(63,220,143,.1), rgba(63,220,143,0) 70%); }
.nh-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(var(--ink-rgb),0), rgba(var(--ink-rgb),.5), rgba(var(--ink-rgb),0)); background-size: 200% 100%; animation: nhShimmer 3.5s linear infinite; }
.nh-cta .row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vh, 20px) 24px; padding: clamp(12px, 2.2vh, 22px) clamp(16px, 2.2vw, 26px); }
.nh-cta .txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); }
.nh-cta .eye { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font: 600 10.5px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.nh-cta .eye .d { width: 6px; height: 6px; border-radius: 50%; background: #3fdc8f; box-shadow: 0 0 10px #3fdc8f; animation: nhPulse 1.6s ease-in-out infinite; }
.nh-cta .hl { font: 600 clamp(17px, 2.6vh, 23px)/1.2 var(--f-d); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.nh-cta .hl em { font-style: normal; color: var(--green-ink); }
.nh-cta.close .hl em { color: var(--amber-ink); } .nh-cta.fail .hl em { color: var(--red-ink); }
.nh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-chips > span { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 8px; background: rgba(var(--ink-rgb),.06); border: 1px solid rgba(var(--ink-rgb),.12); font: 500 12.5px/1 var(--f-t); color: rgba(var(--ink-rgb),.9); animation: nhRise .6s cubic-bezier(.2,.7,.2,1) both; }
.nh-chips > span:nth-child(2) { animation-delay: .1s; } .nh-chips > span:nth-child(3) { animation-delay: .2s; } .nh-chips > span:nth-child(4) { animation-delay: .3s; } .nh-chips > span:nth-child(5) { animation-delay: .4s; }
.nh-chips small { font: 600 9.5px/1 var(--f-t); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink-rgb),.45); }
.nh-chips .ok { background: rgba(63,220,143,.1); border-color: rgba(63,220,143,.3); color: var(--green-ink); } .nh-chips .ok small { color: var(--green-ink); }
.nh-chips .mid { background: rgba(243,199,122,.1); border-color: rgba(243,199,122,.32); color: var(--amber-ink); } .nh-chips .mid small { color: var(--amber-ink); }
.nh-chips .bad { background: rgba(255,157,148,.1); border-color: rgba(255,157,148,.32); color: var(--red-ink); } .nh-chips .bad small { color: var(--red-ink); }
.nh-ticks { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px/1.5 var(--f-t); color: rgba(var(--ink-rgb),.62); }
.nh-ticks span { display: inline-flex; align-items: center; gap: 7px; } .nh-ticks span::before { content: "✓"; color: var(--green-ink); font-size: 12px; }
@media (max-height: 699px) { .nh-ticks { display: none; } }
.nh-save { position: relative; flex: 0 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(56px, 9vh, 72px); padding: 0 20px 0 22px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #3f7bff, #2a62f2); color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 44px rgba(63,123,255,.4); transition: transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.nh-save:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 24px 56px rgba(63,123,255,.55); }
.nh-save::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 70%); background-size: 200% 100%; animation: nhShimmer 2.8s linear 1s infinite; pointer-events: none; }
.nh-save .l { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nh-save .l b { font: 600 17px/1 var(--f-d); letter-spacing: -.01em; white-space: nowrap; }
.nh-save .l small { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-t); color: rgba(255,255,255,.8); white-space: nowrap; }
.nh-save .l small svg { width: 12px; height: 12px; background: #fff; border-radius: 50%; padding: 1.5px; box-sizing: content-box; }
.nh-save .ar { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; flex: none; }

/* William's one honest change + the assumptions, under the card */
.nh-answer .ans-will { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(var(--ink-rgb),.1); border-radius: 16px; background: rgba(var(--ink-rgb),.035); }
.nh-answer .ans-assume { margin-top: 10px; }

/* ── the futures ring ── */
.nh-ring { position: relative; width: min(100%, max(300px, 58vh), 540px); aspect-ratio: 1; container-type: inline-size; }
.nh-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: nhSpin 160s linear infinite; pointer-events: none; }
.nh-ring svg line { transition: opacity .25s, stroke .25s; }
.nh-glow { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle, rgba(63,220,143,.2), rgba(63,220,143,0) 70%); }
.nh-ring.running .nh-glow { opacity: 1; animation: nhPulse 1.2s ease-in-out infinite; }
.nh-ring.done .nh-glow { opacity: .8; }
.nh-ring.done.close .nh-glow { background: radial-gradient(circle, rgba(243,199,122,.16), rgba(243,199,122,0) 70%); }
.nh-ring.done.fail .nh-glow { background: radial-gradient(circle, rgba(255,157,148,.14), rgba(255,157,148,0) 70%); }
.nh-center { position: absolute; inset: 17%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(8px, 2.2cqw, 14px); }
.nh-center .eye { font: 600 clamp(10px, 2.1cqw, 12px)/1 var(--f-t); letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ink-rgb),.5); }
.nh-center .idle { font: 600 clamp(20px, 6cqw, 34px)/1.1 var(--f-d); letter-spacing: -.03em; color: rgba(var(--ink-rgb),.34); text-wrap: balance; }
.nh-center .big { font: 600 clamp(40px, 13cqw, 74px)/1 var(--f-d); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nh-center .of { font: 500 clamp(12px, 2.6cqw, 14px)/1.3 var(--f-t); color: rgba(var(--ink-rgb),.55); min-height: 1.3em; }
.nh-center .tag { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 12px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(63,220,143,.3); background: rgba(63,220,143,.1); font: 500 clamp(11px, 2.3cqw, 13px)/1 var(--f-t); color: var(--green-ink); }
.nh-center .tag .d { width: 6px; height: 6px; border-radius: 50%; background: #3fdc8f; box-shadow: 0 0 10px #3fdc8f; }
.nh-center .tag.close { border-color: rgba(243,199,122,.32); background: rgba(243,199,122,.1); color: var(--amber-ink); } .nh-center .tag.close .d { background: #f3c77a; box-shadow: 0 0 10px #f3c77a; }
.nh-center .tag.fail { border-color: rgba(255,157,148,.32); background: rgba(255,157,148,.1); color: var(--red-ink); } .nh-center .tag.fail .d { background: #ff9d94; box-shadow: 0 0 10px #ff9d94; }
.nh-center h2 { margin: 0; font: 600 clamp(20px, 6.4cqw, 36px)/1.12 var(--f-d); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; min-height: 2.2em; }
.nh-center .caret { display: inline-block; width: .08em; height: .85em; margin-left: .08em; vertical-align: -.08em; background: #3fdc8f; animation: nhBlink 1s steps(2) infinite; }
.nh-center .ex { margin: 0; max-width: 36ch; font: 400 clamp(12px, 2.8cqw, 14px)/1.55 var(--f-t); color: rgba(var(--ink-rgb),.62); text-wrap: pretty; animation: nhRise .7s cubic-bezier(.2,.7,.2,1) both; }
@container (max-width: 459px) { .nh-center .ex { display: none; } }

/* floating cards */
.nh-card { position: absolute; will-change: transform; z-index: 2; }
.nh-card .fl { animation: nhFloat 7s ease-in-out infinite; }
.nh-card .bx { padding: 16px 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid rgba(var(--ink-rgb),.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; animation: nhRise .9s .85s cubic-bezier(.2,.7,.2,1) both; }
.nh-card.c1 { left: -9%; top: -3%; width: 240px; }
.nh-card.c2 { right: -12%; top: 10%; width: 190px; } .nh-card.c2 .fl { animation-duration: 8.5s; animation-delay: .8s; } .nh-card.c2 .bx { gap: 8px; animation-delay: .95s; }
.nh-card.c3 { right: -8%; bottom: -4%; width: 260px; } .nh-card.c3 .fl { animation-duration: 7.5s; animation-delay: 1.6s; } .nh-card.c3 .bx { gap: 12px; animation-delay: 1.05s; }
.nh-card .who { display: flex; align-items: center; gap: 10px; }
.nh-card .who .cs-wmk { width: 36px; height: 36px; flex: none; }
.nh-card .nm { display: flex; flex-direction: column; gap: 4px; }
.nh-card .nm b { font: 600 13.5px/1 var(--f-t); color: var(--ink); letter-spacing: -.01em; }
.nh-card .nm em { font: 500 12px/1 var(--f-t); font-style: normal; color: var(--blue-ink); }
.nh-card p { margin: 0; font: 400 13px/1.5 var(--f-t); color: rgba(var(--ink-rgb),.8); }
.nh-card .k { font: 600 10px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb),.5); }
.nh-card .v { display: flex; align-items: center; gap: 10px; font: 600 30px/1 var(--f-d); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nh-card .v .d { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb),.25); transition: background .3s, box-shadow .3s; }
.nh-card .v .d.ok { background: #3fdc8f; box-shadow: 0 0 12px #3fdc8f; } .nh-card .v .d.mid { background: #f3c77a; box-shadow: 0 0 12px #f3c77a; } .nh-card .v .d.bad { background: #ff9d94; box-shadow: 0 0 12px #ff9d94; }
.nh-card .s { font: 400 12px/1.4 var(--f-t); color: rgba(var(--ink-rgb),.6); }
.nh-card .t { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f-t); color: rgba(var(--ink-rgb),.8); } .nh-card .t .d { width: 6px; height: 6px; border-radius: 50%; background: #3f7bff; }
.nh-card .ch { display: flex; flex-wrap: wrap; gap: 6px; }
.nh-card .ch span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 7px; background: rgba(63,123,255,.18); border: 1px solid rgba(63,123,255,.35); font: 500 11.5px/1 var(--f-t); color: var(--chip-ink); }
@container (max-width: 399px) { .nh-card { display: none; } }

@keyframes nhSpin { to { transform: rotate(360deg); } }
@keyframes nhDrift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%,-4%,0) scale(1.08); } }
@keyframes nhRise { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nhShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes nhFloat { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-12px) rotate(.4deg); } }
@keyframes nhBlink { 50% { opacity: 0; } }
@keyframes nhPulse { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: .75; transform: scale(1.04); } }

@media (max-width: 860px) {
  .hero-section .hero-section-holder { padding-top: 70px; }
  .nh { min-height: 0; padding-bottom: 8px; }
  .nh-h1 { max-width: none; }
  .nh-ring { width: min(100%, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .nh *, .nh-haze * { animation: none !important; }
  .nh-right, .nh-pill, .nh-h1 span, .nh-sub, .nh-ask, .nh-card .bx { opacity: 1; transform: none; filter: none; }
}

/* ═══ "Save my plan": account → payment → onboarding (owner design v2, 2026-09-19)
   The payment step holds STRIPE'S embedded checkout — the design drew raw card
   fields, which this site must never own. ═══ */
.nf-veil { position: fixed; inset: 0; z-index: 60; background: rgba(8,8,11,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: clamp(12px,3vh,32px) clamp(12px,3vw,32px); animation: nfFade .25s ease both;
  --ink: #fff; --ink-rgb: 255,255,255; --green-ink: #7be8b3; --amber-ink: #f3c77a; --red-ink: #ff9d94; --f-d: Sora, Outfit, system-ui, sans-serif; --f-t: 'Public Sans', system-ui, sans-serif; font-family: var(--f-t); color: var(--ink); text-align: left; }
.nf-box { position: relative; width: min(960px,100%); max-height: 100%; overflow: auto; border-radius: 24px; background: #0e0e14; border: 1px solid rgba(var(--ink-rgb),.12); box-shadow: 0 40px 100px rgba(0,0,0,.5); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); animation: nhRise .45s cubic-bezier(.2,.7,.2,1) both; }
.nf-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb),.14); background: rgba(var(--ink-rgb),.05); color: rgba(var(--ink-rgb),.7); font: 400 20px/1 var(--f-t); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.nf-x:hover { background: rgba(var(--ink-rgb),.1); color: var(--ink); }
.nf-main { padding: clamp(22px,3.5vh,36px) clamp(20px,3vw,40px); display: flex; flex-direction: column; gap: clamp(16px,2.6vh,22px); min-width: 0; }
.nf-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 44px; }
.nf-steps .st { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-t); color: rgba(var(--ink-rgb),.45); }
.nf-steps .st.on, .nf-steps .st.was { color: var(--ink); }
.nf-steps .n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--f-t); border: 1px solid rgba(var(--ink-rgb),.2); }
.nf-steps .on .n { background: #3f7bff; color: #fff; border-color: #3f7bff; box-shadow: 0 0 0 4px rgba(63,123,255,.18); }
.nf-steps .was .n { background: rgba(63,220,143,.15); color: var(--green-ink); border-color: rgba(63,220,143,.4); }
.nf-steps .ln { flex: 1 1 12px; max-width: 36px; height: 1px; background: rgba(var(--ink-rgb),.16); }
.nf-main h3 { margin: 0; font: 600 clamp(22px,3vh,28px)/1.15 var(--f-d); letter-spacing: -.03em; color: var(--ink); }
.nf-main .lead { margin: 6px 0 0; font: 400 14px/1.5 var(--f-t); color: rgba(var(--ink-rgb),.62); }
.nf-g { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; border: 0; border-radius: 12px; background: #fff; color: #101014; font: 600 15px/1 var(--f-t); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.nf-g:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255,255,255,.15); }
.nf-g svg { width: 20px; height: 20px; flex: none; }
.nf-g .sp, .nf-btn .sp { display: none; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(16,16,20,.2); border-top-color: #101014; animation: nhSpin .8s linear infinite; }
.nf-btn .sp { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.busy > .sp { display: block; } .nf-g.busy svg { display: none; }
.nf-or { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-t); color: rgba(var(--ink-rgb),.45); }
.nf-or::before, .nf-or::after { content: ""; flex: 1; height: 1px; background: rgba(var(--ink-rgb),.12); }
.nf-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.nf-form label { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.nf-form .lb { display: flex; justify-content: space-between; font: 600 11px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ink-rgb),.55); }
.nf-form .lb em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(var(--ink-rgb),.4); }
.nf-form input { width: 100%; height: 46px; margin: 0; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(var(--ink-rgb),.14); background: rgba(var(--ink-rgb),.04); color: var(--ink); font: 500 15px/1 var(--f-t); outline: 0; transition: border-color .15s, box-shadow .15s; }
.nf-form input:focus { border-color: #3f7bff; box-shadow: 0 0 0 3px rgba(63,123,255,.22); }
.nf-form input::placeholder { color: rgba(var(--ink-rgb),.3); }
.nf-err { margin: 0; font: 500 13px/1.4 var(--f-t); color: #ff8a6a; } .nf-ok { margin: 0; font: 500 13px/1.45 var(--f-t); color: var(--green-ink); }
.nf-btn { height: 50px; border: 0; border-radius: 12px; background: linear-gradient(180deg,#3f7bff,#2a62f2); color: #fff; font: 600 15px/1 var(--f-t); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 30px rgba(63,123,255,.3); transition: transform .15s ease, filter .2s ease; }
.nf-btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.nf-btn:disabled { opacity: .7; cursor: progress; }
.nf-fine { margin: 0; font: 400 12px/1.5 var(--f-t); color: rgba(var(--ink-rgb),.45); }
.nf-acct { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(var(--ink-rgb),.04); border: 1px solid rgba(var(--ink-rgb),.1); font: 500 13px/1.3 var(--f-t); color: rgba(var(--ink-rgb),.75); }
.nf-acct span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nf-acct span::before { content: "✓"; color: var(--green-ink); }
.nf-pay { min-height: 320px; border-radius: 14px; overflow: hidden; background: #fff; }
.nf-pay.wait { background: rgba(var(--ink-rgb),.04); border: 1px dashed rgba(var(--ink-rgb),.14); display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--f-t); color: rgba(var(--ink-rgb),.5); }
.nf-done { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.nf-done .ck { width: 52px; height: 52px; border-radius: 50%; background: rgba(63,220,143,.14); border: 1px solid rgba(63,220,143,.4); color: var(--green-ink); display: flex; align-items: center; justify-content: center; font-size: 24px; animation: nfPop .5s cubic-bezier(.2,.7,.2,1) both; }
.nf-done .nf-btn { align-self: stretch; }
.nf-side { padding: clamp(22px,3.5vh,36px) clamp(20px,3vw,36px); background: linear-gradient(200deg, rgba(63,123,255,.13), rgba(63,123,255,0) 55%), rgba(var(--ink-rgb),.03); border-left: 1px solid rgba(var(--ink-rgb),.08); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nf-side .k { font: 600 10.5px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb),.5); }
.nf-side .hl { display: block; margin: 12px 0 14px; font: 600 clamp(19px,2.6vh,24px)/1.2 var(--f-d); letter-spacing: -.03em; text-wrap: balance; }
.nf-side .hl em { font-style: normal; color: var(--green-ink); } .nf-side.close .hl em { color: var(--amber-ink); } .nf-side.fail .hl em { color: var(--red-ink); }
.nf-bill { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid rgba(var(--ink-rgb),.1); background: rgba(var(--ink-rgb),.035); font: 500 13.5px/1 var(--f-t); color: rgba(var(--ink-rgb),.75); }
.nf-bill div { display: flex; justify-content: space-between; gap: 12px; } .nf-bill .hr { height: 1px; background: rgba(var(--ink-rgb),.1); } .nf-bill .due { color: var(--ink); font-weight: 600; font-size: 15px; }
.nf-list { display: flex; flex-direction: column; gap: 10px; font: 400 13.5px/1.4 var(--f-t); color: rgba(var(--ink-rgb),.72); }
.nf-list span { display: flex; gap: 9px; } .nf-list span::before { content: "✓"; color: var(--green-ink); }
@keyframes nfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nfPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (max-width: 720px) { .nf-side { border-left: 0; border-top: 1px solid rgba(var(--ink-rgb),.08); order: 2; } .nf-veil { align-items: flex-start; } }
button.nh-save { border: 0; cursor: pointer; text-align: left; font-family: inherit; }

/* the desktop frame under the hero was removed (owner 2026-09-19): the section no longer needs the template's 120vh floor */
.hero-section { min-height: 0 !important; }
.hero-section .hero-blur-bg-holder { display: none; }
.hero-section { background-color: #000 !important; }
/* William's Social-Security block under the card was removed (owner 2026-09-19); the assumptions stay, quietly */
.nh-answer .ans-assume { margin-top: 6px; font-size: 13px; }