/* ==========================================================================
   NOVE Funding · clean layer (loaded last on the public site, sign-in, checkout
   and the client area). Design only: quiet surfaces, flat buttons, one accent,
   short movement. Yellow belongs to the headline highlight and the main button.
   The CRM pages and the terminal do not load this file (the CRM's sign-in page does).
   ========================================================================== */
:root {
  --maxw: 1200px;
  --surface-2: #f6f6f4;
  --surface-soft: #f6f6f4;
  --border: #e6e8eb;
  --muted: #5c6068;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(17, 18, 22, .05);
  --shadow-lg: 0 1px 2px rgba(17, 18, 22, .05), 0 16px 40px rgba(17, 18, 22, .09);
  --clean-ease: cubic-bezier(.2, .8, .2, 1);
}
body { background: #fff; }

/* ---------- headlines: calm size, one highlight on the hero only ---------- */
h1, h2, h3 { letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 700; line-height: 1.14; }
h3 { letter-spacing: -.01em; }
h2 mark, h3 mark, .section-head mark { background: none !important; padding: 0; margin: 0; color: inherit; animation: none; }
.lede { color: var(--muted); }
.eyebrow { color: var(--brand-deep); }

/* ---------- header ---------- */
.site-header { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--border); box-shadow: none; transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 8px 26px rgba(17, 18, 22, .07); }
/* The links in this strip live in the footer. It returns only when the
   system has a fault to report, so a problem is never hidden. */
.topbar-util { display: none; }
.topbar-util:has(.dot.down), .topbar-util:has(.dot.warn) { display: block; max-height: none; opacity: 1; }
.topbar-util:has(.dot.down) a:has(.dot), .topbar-util:has(.dot.warn) a:has(.dot) { display: inline !important; }
.nav-links a { color: #33363d; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a::after { background: var(--ink); }
/* The short menu with Sign in and Buy, from the width each language's labels
   need (measured in a browser). Below it, the menu button opens the full list.
   Scoped to the public header: the client area has its own menu button. */
@media (min-width: 1000px) {
  :root:lang(en) .site-header .nav-extra, :root:lang(vi) .site-header .nav-extra { display: none !important; }
  :root:lang(en) .site-header .nav-links, :root:lang(vi) .site-header .nav-links { display: flex; }
  :root:lang(en) .site-header .nav-toggle, :root:lang(vi) .site-header .nav-toggle { display: none; }
  :root:lang(en) .site-header .nav-actions .btn-quiet, :root:lang(vi) .site-header .nav-actions .btn-quiet, :root:lang(en) .site-header .nav-actions .btn-primary, :root:lang(vi) .site-header .nav-actions .btn-primary { display: inline-flex; }
}
@media (min-width: 1100px) {
  :root:lang(es) .site-header .nav-extra, :root:lang(pt) .site-header .nav-extra { display: none !important; }
  :root:lang(es) .site-header .nav-links, :root:lang(pt) .site-header .nav-links { display: flex; }
  :root:lang(es) .site-header .nav-toggle, :root:lang(pt) .site-header .nav-toggle { display: none; }
  :root:lang(es) .site-header .nav-actions .btn-quiet, :root:lang(pt) .site-header .nav-actions .btn-quiet, :root:lang(es) .site-header .nav-actions .btn-primary, :root:lang(pt) .site-header .nav-actions .btn-primary { display: inline-flex; }
}
@media (min-width: 1170px) {
  :root:lang(fr) .site-header .nav-extra, :root:lang(sw) .site-header .nav-extra { display: none !important; }
  :root:lang(fr) .site-header .nav-links, :root:lang(sw) .site-header .nav-links { display: flex; }
  :root:lang(fr) .site-header .nav-toggle, :root:lang(sw) .site-header .nav-toggle { display: none; }
  :root:lang(fr) .site-header .nav-actions .btn-quiet, :root:lang(sw) .site-header .nav-actions .btn-quiet, :root:lang(fr) .site-header .nav-actions .btn-primary, :root:lang(sw) .site-header .nav-actions .btn-primary { display: inline-flex; }
}
@media (max-width: 1169px) {
  :root:lang(sw) .site-header .nav-links { display: none; }
  :root:lang(sw) .site-header .nav-toggle { display: inline-grid; place-items: center; }
  :root:lang(sw) .site-header .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: .8rem 24px 1.2rem; gap: .1rem; box-shadow: var(--shadow-lg); }
  :root:lang(sw) .site-header .nav-links.open a { padding: .7rem 0; font-size: 1rem; border-bottom: 1px solid var(--border); }
  :root:lang(sw) .site-header .nav-links.open a::after { display: none; }
  :root:lang(sw) .site-header .nav-actions .btn-quiet, :root:lang(sw) .site-header .nav-actions .btn-primary { display: none; }
  :root:lang(sw) .site-header .nav-links.open .mobile-only { display: flex; align-items: center; justify-content: center; margin-top: .9rem; border: 0; padding: .8rem 1.2rem; }
  :root:lang(sw) .site-header .nav-links.open .mobile-secondary { margin-top: .6rem; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); }
  :root:lang(sw) .site-header .nav-links.open .mobile-secondary:hover { background: var(--ink); color: #fff; }
}

/* ---------- buttons: flat, one colour, small honest movement ---------- */
.btn { font-family: var(--font-head); font-weight: 600; box-shadow: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.98); }
.btn svg { transition: transform .22s var(--clean-ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { box-shadow: none; }
.btn-primary:hover { background: #dff000; border-color: #dff000; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- surfaces: hairline, no heavy shadow ---------- */
.card, .panel, .cond, .help-cat, .tier-card, .step-card, .stat, .programme, .program-card {
  box-shadow: none;
  border-color: var(--border);
}
.card-hover:hover, .stagger.in > .card-hover:hover, .stagger.in > .step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.section { padding: clamp(3.6rem, 7vw, 6rem) 0; }
.section-soft, .section-alt { background: var(--surface-2); }
.section-head { margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem); }

/* Inner-page heroes lose the coloured washes and floating decoration. */
.hero { background: #fff; padding: clamp(2.6rem, 5vw, 4.2rem) 0; }
.hero::before, .hero::after { display: none; }
.hero h1 { font-weight: 800; letter-spacing: -.045em; }

/* ---------- selectors and forms ---------- */
.chip { border-radius: 12px; border-color: transparent; background: var(--surface-2); transition: background .15s ease, color .15s ease; }
.chip:hover { border-color: transparent; background: #ebebe7; }
.chip.active, .chip.chip-yellow.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.input, select.input, textarea.input { border-radius: 12px; border-color: var(--border-bright); box-shadow: none; transition: border-color .15s ease; }
.input:focus, select.input:focus, textarea.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 18, 22, .08); outline: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); border-top: 0; color: #aeb4bf; }
.site-footer .muted, .footer-col a, .footer-reach, .risk-disclosure, .footer-bottom { color: #aeb4bf; }
.footer-col a:hover { color: #fff; }
.footer-col a.brand, .footer-col h4, .footer-tag, .footer-reach strong { color: #fff; }
.footer-reach a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.risk-disclosure { border-top-color: #2b2d34; }
.site-footer .social-links a { background: transparent; color: #fff; border-color: #4a4e59; }
.site-footer .social-links a:hover { border-color: #fff; color: #fff; }
.site-footer .newsletter { background: transparent; border-color: #2b2d34; }
.site-footer .newsletter strong, .site-footer .newsletter h4 { color: #fff; }

/* ---------- movement: quick, once, never in the way ---------- */
[data-reveal] { transform: translateY(14px); transition: opacity .45s ease, transform .45s var(--clean-ease); }
[data-reveal="left"], [data-reveal="right"] { transform: translateY(14px); }
[data-reveal].in { transform: none; }
.stagger > * { transform: translateY(12px); transition: opacity .45s ease, transform .45s var(--clean-ease), box-shadow .2s ease; }
.stagger.in > * { transform: none; }
.stagger.in > :nth-child(4) { transition-delay: .2s; }
.stagger.in > :nth-child(5) { transition-delay: .24s; }
.stagger.in > :nth-child(6) { transition-delay: .28s; }

/* ==========================================================================
   Home page
   ========================================================================== */
.hc-hero { padding: clamp(1.4rem, 3vw, 2.6rem) 0 0; background: #fff; }
.hc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 440px); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hc-hero h1 { font-size: clamp(2.5rem, 6.4vw, 5.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; margin: 0 0 1.3rem; animation: hc-rise .6s var(--clean-ease) both; }
.hc-hero h1 .line2 { display: block; }
.hc-hero h1 mark { background: linear-gradient(to bottom, transparent 17%, var(--yellow) 17%, var(--yellow) 90%, transparent 90%) no-repeat; background-size: 0% 100%; padding: 0 .1em; margin: 0 0 0 -.1em; border-radius: 0; line-height: inherit; animation: hc-draw .6s .4s var(--clean-ease) forwards; }
.hc-hero .lede { max-width: 30em; animation: hc-rise .6s .14s var(--clean-ease) both; }
.hc-after { animation: hc-rise .6s .22s var(--clean-ease) both; }
.hc-free { display: inline-flex; align-items: center; gap: .5rem; margin: 1.1rem 0 .9rem; padding: .6rem 0; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.hc-free svg { width: 18px; height: 18px; transition: transform .22s var(--clean-ease); }
.hc-free:hover svg { transform: translateX(4px); }
.hc-after .tiny { max-width: 34em; }

.hc-stage { position: relative; height: 620px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hc-man { position: absolute; top: 0; left: 50%; height: 610px; width: auto; max-width: none; transform: translateX(-50%); clip-path: inset(0 0 44% 0); animation: hc-man-in .8s var(--clean-ease) both, hc-breathe 7s ease-in-out .8s infinite; }
.hc-buy { position: relative; z-index: 2; background: #fff; border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 1.4rem 1.4rem 1.6rem; animation: hc-rise .7s .12s var(--clean-ease) both; }
.hc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-bottom: 1rem; }
.hc-price strong { font: 700 3.25rem/1.05 var(--font-head); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hc-price span { color: var(--muted); font-size: .92rem; }
.hc-seg { position: relative; display: flex; gap: 6px; margin-bottom: 8px; }
.hc-thumb { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 12px; background: var(--ink); transition: transform .28s var(--clean-ease), width .28s var(--clean-ease); }
.hc-chip { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px 2px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font: 500 .875rem/1.1 var(--font-head); cursor: pointer; transition: background .15s ease, color .15s ease; }
.hc-chip:hover { background: #ebebe7; }
.hc-chip.on, .hc-chip.on:hover { background: transparent; color: #fff; }
.hc-chip.off { color: var(--muted); text-decoration: line-through; }
.hc-chip.on.off { color: #fff; }
.hc-chip:focus-visible, .hc-range:focus-visible, .hc-free:focus-visible { outline: 3px solid #2979ff; outline-offset: 3px; }
.hc-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: .9rem 2px .6rem; }
.hc-info { margin: 0 2px .9rem; }
.hc-mini b { display: block; font: 600 1.06rem/1.25 var(--font-head); }
.hc-split { margin: 0 0 .75rem; }
.hc-mini span { display: block; font-size: .75rem; line-height: 1.25; color: var(--muted); }
.hc-buy .btn { position: relative; overflow: hidden; min-height: 54px; }
.hc-buy .btn.disabled { background: var(--surface-2); border-color: var(--surface-2); color: var(--muted); pointer-events: none; }
.hc-buy .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg); animation: hc-shine 1s 1.3s ease-out both; pointer-events: none; }

.hc-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.9rem 0 2.1rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.hc-stats a { color: inherit; }
.hc-stats strong { display: block; font: 700 clamp(1.5rem, 2.5vw, 2.1rem)/1.1 var(--font-head); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }

.hc-sim-card { background: #fff; border-radius: 24px; padding: clamp(1.4rem, 3.4vw, 2.75rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4rem); }
.hc-sim-num { font: 700 clamp(3.25rem, 6vw, 5rem)/1.05 var(--font-head); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hc-range { display: block; width: 100%; height: 44px; margin: 1.4rem 0 .1rem; accent-color: var(--ink); cursor: pointer; }
.hc-scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.hc-mtr { margin-bottom: 1rem; }
.hc-mh { display: flex; justify-content: space-between; gap: .6rem; font-size: .875rem; color: var(--muted); margin-bottom: .45rem; }
.hc-mh b { color: var(--ink); font-weight: 500; white-space: nowrap; }
.hc-track { height: 8px; background: #eceef0; border-radius: 9px; overflow: hidden; }
.hc-fill { height: 100%; border-radius: 9px; transition: width .2s ease, background .15s ease; }
.hc-fill.ok { background: #02a57f; }
.hc-fill.warn { background: #d99a00; }
.hc-fill.bad { background: var(--brand); }
.hc-fill.goal { background: var(--ink); }
.hc-verdict { border-radius: 14px; padding: .95rem 1.1rem; margin-top: 1.25rem; font-size: .9rem; transition: background .15s ease; }
.hc-verdict strong { display: block; font: 600 1.12rem/1.25 var(--font-head); margin-bottom: .2rem; }
.hc-verdict.ok { background: #e9fbf5; color: #03503f; }
.hc-verdict.warn { background: #fff6d6; color: #5a4200; }
.hc-verdict.bad { background: #ffebec; color: #9d060c; }
.hc-verdict.goal { background: var(--yellow); color: var(--ink); }
.hc-note { margin-top: .9rem; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.hc-note a { color: inherit; text-decoration: underline; }

.hc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.25rem); counter-reset: hc; }
.hc-col { position: relative; padding-top: 1.1rem; }
.hc-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--clean-ease); }
.stagger.in > .hc-col::before { transform: scaleX(1); }
.hc-col h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.hc-cols.numbered .hc-col h3::before { counter-increment: hc; content: counter(hc) ". "; }
.hc-col p { color: var(--muted); font-size: .97rem; }
.hc-line { border-top: 1px solid var(--border); }

.hc-end { background: var(--ink); color: #fff; text-align: center; padding: clamp(4.2rem, 8.5vw, 7.2rem) 0; }
.hc-end h2 { font-size: clamp(2.5rem, 7vw, 5.75rem); font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; color: #fff; margin-bottom: 1.9rem; }
.hc-end h2 .line2 { display: block; }
.hc-end h2 mark { background: linear-gradient(to bottom, transparent 17%, var(--yellow) 17%, var(--yellow) 90%, transparent 90%) no-repeat !important; background-size: 100% 100% !important; color: var(--ink); padding: 0 .1em; transition: background-size .6s .25s var(--clean-ease), color .25s .35s ease; }
.hc-end h2[data-reveal]:not(.in) mark { background-size: 0% 100% !important; color: #fff; }

@keyframes hc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hc-draw { to { background-size: 100% 100%; } }
@keyframes hc-man-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hc-breathe { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
@keyframes hc-shine { from { left: -40%; } to { left: 120%; } }

@media (max-width: 1100px) {
  .hc-hero h1 { font-size: clamp(2.5rem, 5.9vw, 4.1rem); }
}
@media (max-width: 900px) {
  .hc-grid, .hc-sim-card, .hc-cols { grid-template-columns: minmax(0, 1fr); }
  .hc-grid { gap: 1rem; }
  .hc-left { display: contents; }
  .hc-top { order: 1; }
  .hc-stage { order: 2; height: auto; padding-top: 118px; }
  .hc-after { order: 3; }
  .hc-man { height: 350px; }
  .hc-buy { border-radius: 22px; border-bottom: 1px solid var(--border); padding: 1.1rem; }
  .hc-hero h1 { font-size: clamp(2.3rem, 13vw, 5.75rem); margin-bottom: .75rem; }
  .hc-free { margin-top: .4rem; }
  .hc-stats { margin-top: 1.6rem; }
  .hc-stats > div { flex: 1 1 28%; }
}
@media (max-width: 560px) {
  .hc-stats { row-gap: 1.25rem; padding: 1.5rem 0 1.75rem; }
  .hc-stats > div { flex: 1 1 40%; }
  .hc-chip { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="left"], [data-reveal="right"], .stagger > * { opacity: 1; transform: none; transition: none; }
  .hc-hero *, .hc-hero h1, .hc-buy .btn::after, .hc-end h2 mark, .hc-col::before { animation: none !important; transition: none !important; }
  .hc-hero h1 mark { background-size: 100% 100%; }
  .hc-man { transform: translateX(-50%); }
  .hc-col::before { transform: none; }
  .hc-buy .btn::after { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ==========================================================================
   Leftovers from earlier looks, brought into line
   ========================================================================== */
/* Dark theme in the client area keeps its own ground. */
html[data-theme="dark"] body { background: var(--background, #111216); }

/* One highlight that never cuts into the line above it. */
h1 { line-height: 1.1; }
h1 mark, .help-hero h1 mark { background: linear-gradient(to bottom, transparent 17%, var(--yellow) 17%, var(--yellow) 90%, transparent 90%) no-repeat; padding: 0 .12em; margin: 0 -.04em; border-radius: 0; line-height: inherit; }
.hero mark { background-image: linear-gradient(to bottom, transparent 17%, var(--yellow) 17%, var(--yellow) 90%, transparent 90%); }

/* Longer words in these languages: the headline stays on two lines. */
:root:lang(es) .hc-hero h1, :root:lang(fr) .hc-hero h1, :root:lang(pt) .hc-hero h1, :root:lang(sw) .hc-hero h1 { font-size: clamp(1.9rem, 4.4vw, 4rem); }
:root:lang(es) .hc-end h2, :root:lang(fr) .hc-end h2, :root:lang(pt) .hc-end h2, :root:lang(sw) .hc-end h2 { font-size: clamp(1.9rem, 5.4vw, 4.4rem); }
@media (max-width: 900px) {
  :root:lang(es) .hc-hero h1, :root:lang(fr) .hc-hero h1, :root:lang(pt) .hc-hero h1, :root:lang(sw) .hc-hero h1 { font-size: clamp(1.6rem, 8.3vw, 4rem); }
  :root:lang(es) .hc-end h2, :root:lang(fr) .hc-end h2, :root:lang(pt) .hc-end h2, :root:lang(sw) .hc-end h2 { font-size: clamp(1.6rem, 8.3vw, 4rem); }
}

/* Quiet small print stays readable. */
:root { --muted-dim: #70757d; }

/* Blog covers and client-area cards: no colour washes. */
.post-card .cover { background: var(--surface-2); color: var(--ink); }
.bias-hero { background: var(--surface); }
.bias-hero::after, .greet-card::after { display: none; }
.bias-item { border-left-width: 1px; }
.bias-item.good, .bias-item.warn { border-left-color: var(--border); }
.bias-item.good .k::before, .bias-item.warn .k::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; vertical-align: .08em; }
.bias-item.good .k::before { background: var(--teal-deep); }
.bias-item.warn .k::before { background: var(--orange); }

/* Client-area menu: the current page is marked in ink, not a pink band. */
html:not([data-theme="dark"]) .side-nav a.active { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.side-nav a.active::before { background: var(--ink); }
html[data-theme="dark"] .side-nav a.active::before { background: currentColor; }
.side-buy:hover { background: #dff000; color: var(--ink); }

/* Payment pages: same white ground, hairlines and flat button as everywhere. */
html .pay {
  --p-paper: #ffffff; --p-paper-2: #f6f6f4; --p-line: #e6e8eb; --p-line-2: #d5d7da; --p-grey: #5c6068; --p-grey-2: #70757d; --p-cream: #f6f6f4;
  --p-shadow: 0 1px 2px rgba(17, 18, 22, .05); --p-shadow-sm: 0 1px 2px rgba(17, 18, 22, .05);
  background: #fff;
  font-family: var(--font);
}
html .pay h1, html .pay h2, html .pay h3, html .pay .btn { font-family: var(--font-head); }
html .pay::after { display: none; }
html .pay .pay-scene { background: var(--surface-2); }
html .pay .pay-tag--lime { box-shadow: none; }
html .pay .btn-primary { box-shadow: none; }
html .pay .btn-primary::after { animation: none; display: none; }
html .pay .btn-primary:hover { background: #dff000; border-color: #dff000; color: var(--ink); transform: none; }
html .pay .input:focus { box-shadow: 0 0 0 3px rgba(17, 18, 22, .08); }