body{margin:0;background:#FFFFFF}
a{color:#0A1217}a:hover{color:#0A1217}
html{scroll-behavior:smooth}
:root{interpolate-size:allow-keywords}
h1,h2,.disp{font-family:'Inter',-apple-system,system-ui,sans-serif}
h1,h2{font-weight:400 !important;text-wrap:balance}
p{text-wrap:pretty}
.glass{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 30px 80px rgba(10,18,23,.14)}
.glass-d{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.sky{background:linear-gradient(180deg,#B9C6D2 0%,#D7DFE6 45%,#EEF1F4 100%)}
.dark{background:radial-gradient(120% 90% at 20% 10%,#4C5862 0%,#1C252C 45%,#0A1217 100%) !important}
@keyframes m-sky{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.ico{width:44px;height:44px;border-radius:12px;background:rgba(10,18,23,.06);display:inline-flex;align-items:center;justify-content:center;flex:none}
.t-mob{display:none}

/* Section rhythm and side gutter (design system: section-y 112px, 56px on phones; content padding
   24px, 16px on phones). Neighbouring sections sit one rhythm apart: a plain section carries half of
   it above its content and half below. A full-bleed band (.bleed) carries the full rhythm inside and
   half of it as white outside, so the content before and after it also sits one rhythm from its
   edge. Bands that touch each other or the footer keep no white between them.
   Exceptions, pinned in tests/e2e/spacing.spec.js: the hero top, the "Paid in weeks" strip (48px
   inside), the rounded offer box (its own padding) and the footer. The dark "Who qualifies" box
   (.fit-box) is a rounded box inside the column like the offer: its edges, not its text, are the
   section's edges, so it keeps the plain rhythm and needs no exception. */
:root{--section-y:112px;--gutter:24px}
@media (max-width:640px){:root{--section-y:56px;--gutter:16px}}
.sec,#offer{padding:calc(var(--section-y) / 2) var(--gutter)}
.bleed{margin-block:calc(var(--section-y) / 2)}
.bleed>.sec{padding-block:var(--section-y)}
.bleed+.bleed{margin-top:0}
.bleed:has(+.bleed),main>.bleed:last-child{margin-bottom:0}
/* The hero opens the first viewport 96px under the header (Patrick's value), 56px on phones */
.hero{padding:96px var(--gutter) calc(var(--section-y) / 2)}
@media (max-width:640px){.hero{padding-top:56px}}

.hero{position:relative}
.hero>*:not(.glow){position:relative;z-index:1}
.glow{position:absolute;left:50%;top:-80px;bottom:0;width:100vw;translate:-50% 0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 30% 30%,rgba(255,255,255,.7),transparent 70%),linear-gradient(180deg,#B9C6D2 0%,#D7DFE6 50%,#FFFFFF 100%);background-size:160% 160%,100% 100%}
@media (prefers-reduced-motion: no-preference){.glow{animation:m-sky 18s ease-in-out infinite}}

.row{transition:background-color .25s}.row:hover{background:#F2F3F4}
.btn-b{transition:background-color .2s,transform .2s}.btn-b:hover{background:#2A333A !important;color:#FFFFFF !important}
.btn-w{transition:background-color .2s}.btn-w:hover{background:#E6E8EA !important}
.lnk{transition:opacity .2s}.lnk:hover{opacity:.65}
.opt{transition:border-color .2s}.opt:hover{border-color:#0A1217 !important}

.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;width:max-content}
.marq-track span{display:inline-flex;gap:56px;padding-right:56px;white-space:nowrap;font-size:22px;font-weight:600;letter-spacing:-.4px;color:#6B7378}

#faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
@media (max-width:860px){#faq{grid-template-columns:minmax(0,1fr);gap:24px}#faq>.rv:first-child{position:static !important}}
.faq summary{list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{transition:transform .3s}
.faq details[open] .faq-plus{transform:rotate(45deg)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}

@keyframes m-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes m-marq{to{translate:-50% 0}}
@keyframes m-barx{from{scale:0 1}to{scale:1 1}}
@media (prefers-reduced-motion: no-preference){
.ld{animation:m-in 1s cubic-bezier(.2,.8,.2,1) both}
.ld1{animation-delay:.15s}.ld2{animation-delay:.35s}.ld3{animation-delay:.5s}.ld4{animation-delay:.7s}
.float{animation:m-float 7s ease-in-out 1.5s infinite}
.marq-track{animation:m-marq 50s linear infinite}
.bar-x{transform-origin:left;animation:m-barx 1.6s cubic-bezier(.2,.8,.2,1) 1.5s both}
@supports (animation-timeline: view()){
.rv{animation:m-in linear both;animation-duration:1ms;animation-timeline:view();animation-range:entry 0% entry 45%}
.d1{animation-range:entry 8% entry 55%}.d2{animation-range:entry 16% entry 65%}.d3{animation-range:entry 24% entry 75%}
}
}
@media (max-width:640px){
.head-in{padding:10px 16px !important}
.hero h1{font-size:44px !important;letter-spacing:-1.6px !important}
.band{padding:48px 20px !important;border-radius:24px !important}
.mock{zoom:.8}
.t-desk{display:none}.t-mob{display:inline}
.chev{display:none !important}
[data-ex-prev],[data-ex-next]{display:none !important}
.flow-arr{display:none !important}
}
.cmp,.fitrow{scroll-margin-top:120px}
@media (max-width:640px){
.hero-sub{font-size:17px !important;margin-bottom:28px !important}
.sec>.rv:first-child{margin-bottom:28px !important}
.sec h2,.band h2{font-size:34px !important;letter-spacing:-1.2px !important}
.card{padding:22px !important}
.card>div:first-child{margin-bottom:14px !important}
.pgrid{gap:10px !important}
.pgrid>.glass-d{padding:20px !important}
.cmp{grid-template-columns:1fr 1fr !important;gap:4px 16px !important;padding:14px 4px !important;font-size:15px}
.cmp>span:first-child{grid-column:1/-1;margin-bottom:2px}
.cmp-h>span:first-child{display:none}
.cmp-h{padding-top:0 !important}
.cmp-wrap{min-width:0 !important}
.fitrow{grid-template-columns:28px minmax(0,1fr) !important;gap:2px 12px !important;padding:16px 4px !important;align-items:start !important}
.fitrow>:first-child{grid-row:span 2;margin-top:2px}
.fitrow>:nth-child(3){grid-column:2;font-size:15px}
.fit-box{padding:48px 20px !important}
.fit-box>.rv:first-child{margin-bottom:28px !important}
input,select,textarea{font-size:16px !important}
form.rv{padding:24px !important}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto}}

/* production additions */
[hidden]{display:none !important}
.sep{display:inline-block;width:1px;height:12px;background:currentColor;opacity:.3;margin:0 10px;vertical-align:middle}
/* Design system rule: text-subtle sits on white only. On surface-tile and the footer grey it
   falls under 4.5:1, so it switches to text-muted there (design-system/README.md, Colour). */
[style*="background: #F2F3F4" i][style*="color: #6B7378" i],
[style*="background: #F2F3F4" i] [style*="color: #6B7378" i],
footer [style*="color: #6B7378" i]{color:#4F575C !important}
/* A real mark replaces the dashed placeholder box (design-system ToolChip) */
.logo-slot.has-logo{background:transparent !important;border-color:transparent !important}
.logo-slot img{width:16px;height:16px;display:block;object-fit:contain}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field-error{margin:0;font-size:13px;font-weight:400;color:#B3261E}
/* Clears the sticky header for anchor jumps and for keyboard focus (WCAG 2.4.11). The header is one
   row (logo, language, button) at every width; --head-h is its measured height, 61px (12px padding,
   36px button, 1px border) and 57px on phones (10px padding), checked at 1440, 1024, 768 and 390 in
   tests/e2e/review-round.spec.js. */
:root{--head-h:61px}
@media (max-width:640px){:root{--head-h:57px}}
html{scroll-padding-top:calc(var(--head-h) + 20px)}

/* toggle buttons: pressed state drives the look (canvas on/off variants) */
.ex-tab,.calc-opt{font:inherit;font-size:15px;border-radius:999px}
.ex-tab[aria-pressed="true"]{font-weight:600;background:#0A1217;color:#F2F3F4;border:1px solid #0A1217}
.ex-tab[aria-pressed="false"]{background:transparent;color:#0A1217;border:1px solid #B8BFC4}
.calc-opt[aria-pressed="true"]{font-weight:500;background:#0A1217;color:#F2F3F4;border:1px solid #0A1217}
.calc-opt[aria-pressed="false"]{background:#F2F3F4;color:#0A1217;border:1px solid #E6E8EA}
/* NWA logo in the header: 32px tall, 28px on phones */
.brand img{height:32px;width:auto;display:block}
@media (max-width:640px){.brand img{height:28px}}

/* Language switcher: one pill button with the current code and a chevron, opening a small menu */
.lang{position:relative}
.lang-btn:focus-visible,.lang-menu a:focus-visible{outline:2px solid #0A1217;outline-offset:2px}
.lang-btn{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 10px 0 13px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:500;line-height:1;color:#0A1217;background:rgba(10,18,23,.06);cursor:pointer;transition:background-color .2s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:rgba(10,18,23,.1)}
.lang-btn svg{display:block;transition:transform .2s}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:88px;padding:6px;display:flex;flex-direction:column;gap:2px;background:#FFFFFF;border:1px solid #E6E8EA;border-radius:16px;box-shadow:0 20px 50px rgba(10,18,23,.14)}
.lang-menu a{display:flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;line-height:1;color:#4F575C;text-decoration:none;transition:background-color .2s}
.lang-menu a:hover{color:#0A1217;background:rgba(10,18,23,.06)}
.lang-menu a[aria-current="page"],.lang-menu a[aria-current="page"]:hover{background:#0A1217;color:#FFFFFF}
@media (max-width:640px){.head-r{gap:8px !important}}
@media (max-width:400px){.head-in{gap:8px !important}.head-r{gap:6px !important}.head-r .btn-b{padding:0 12px !important}}
/* Brands with only a wordmark: the wordmark is the chip, at the height of a symbol chip */
.chip-wordmark{padding:5px 12px !important;min-height:32px;box-sizing:border-box}
.chip-wordmark img{height:14px;width:auto;display:block}
/* Dark bonus bar: every mark sits on a white tile so the full colour files read on the dark chip */
.bonus-bar .logo-slot.has-logo{background:#FFFFFF !important;border:0 !important;border-radius:6px}
.bonus-bar .logo-slot img{width:14px;height:14px}

/* Calculator: group toggles share the pill style; the error sits under them */
.calc-error{margin:10px 0 0;font-size:14px;font-weight:400;line-height:1.4;color:#B42318}
.est-choose{display:block;font-size:24px;line-height:1.2;letter-spacing:-.4px}

/* Footer: a row of section links above the company and legal lines */
.foot-nav{max-width:1120px;margin:0 auto;padding:24px var(--gutter) 0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.foot-nav a{color:#4F575C;text-decoration:none;transition:color .2s}
.foot-nav a:hover{color:#0A1217}

/* Data protection examples: two halves (original, anonymised) per document, each under its label.
   Desktop: side by side, each capped so the whole block fits one screen below the sticky header
   (header 61px plus about 190px of panel chrome and a 10px buffer, measured in tests/e2e/protect.spec.js).
   Phones: the halves stack, original above anonymised, each at full panel width; tapping a half opens it in the dialog. */
.doc-hint{display:none}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.doc-cap{font-size:14px;font-weight:500;color:#4F575C;margin:0 0 8px;line-height:20px}
.doc-box{position:relative;display:block;margin:0;padding:0;font:inherit;width:fit-content;max-width:100%;background:#FFFFFF;border:1px solid #E6E8EA;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(10,18,23,.10);cursor:default}
.doc-img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 261px);max-height:calc(100svh - var(--doc-chrome,261px))}
.doc-dialog{border:0;padding:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;background:#0A1217;color:#FFFFFF}
.doc-dialog[open]{display:block}
.doc-dialog::backdrop{background:rgba(10,18,23,.92)}
.doc-scroll{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:64px 16px 24px;box-sizing:border-box}
.doc-scroll img{display:block;width:auto;height:auto;max-width:none;margin:0 auto;background:#FFFFFF;border-radius:6px}
.doc-close{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#FFFFFF;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){
  /* The panel's background reaches 12px into the gutter so each half is at least 340px wide;
     its 12px padding brings the content back to the 16px gutter. */
  #protect .sky{margin-left:-12px !important;margin-right:-12px !important;padding:14px 12px !important}
  .docs{grid-template-columns:1fr;gap:24px}
  .doc-cap{text-align:center}
  .doc{align-items:stretch}
  .doc-box{width:100%;cursor:zoom-in}
  .doc-img{width:100%;max-width:100%;max-height:none}
  .doc-hint{display:block;margin:10px 0 0;font-size:13px;color:#4F575C;text-align:center}
}

/* Hero: one email field and the Get an offer button. Side by side on desktop, stacked on phones. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hero-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;max-width:560px;margin:0 auto}
.hero-form input{flex:1 1 260px;min-width:0;box-sizing:border-box;min-height:50px;padding:0 22px;font:inherit;font-size:17px;color:#0A1217;background:#FFFFFF;border:1px solid #E6E8EA;border-radius:999px}
.hero-form input::placeholder{color:#6B7378}
.hero-form input:focus-visible,.hero-form button:focus-visible{outline:2px solid #0A1217;outline-offset:2px}
.hero-form input[aria-invalid="true"]{border-color:#B42318}
.hero-form button{flex:none;font:inherit;font-size:17px;font-weight:500;min-height:50px;padding:0 28px;border:0;border-radius:999px;background:#0A1217;color:#F2F3F4;cursor:pointer}
.hero-form .field-error{flex:1 0 100%;text-align:center}
@media (max-width:640px){.hero-form{flex-direction:column;align-items:stretch}.hero-form input,.hero-form button{width:100%;flex:none}}

/* What we buy: the section label is the h2, in its small label look */
.sec h2.lbl{font-size:15px !important;font-weight:500 !important;letter-spacing:normal !important;line-height:1.5}

/* Who qualifies: the dark gradient box (the .dark class), white text, light lines. Links stay white. */
.fit-box a,.fit-box a:hover{color:#FFFFFF}
.fit-box .row:hover{background:rgba(255,255,255,.07)}

/* How it works on phones: the step cards stack, each next card sliding over the one before (sticky
   with a small step per card; the opaque backgrounds do the covering, later cards paint on top). */
@media (max-width:640px){
.steps>div{position:sticky;box-shadow:0 -10px 24px -12px rgba(10,18,23,.28)}
.steps>div:nth-child(1){top:calc(var(--head-h) + 12px)}
.steps>div:nth-child(2){top:calc(var(--head-h) + 24px)}
.steps>div:nth-child(3){top:calc(var(--head-h) + 36px)}
.steps>div:nth-child(4){top:calc(var(--head-h) + 48px)}
.steps>div:nth-child(5){top:calc(var(--head-h) + 60px)}
.steps>div:nth-child(6){top:calc(var(--head-h) + 72px)}
}

/* Offer: two glass tiles side by side, spots left and days left (with a ticking clock under the days) */
/* Grey words around the white number of places. */
#offer h2{color:#8C9397}
#offer h2 [data-slots-left-head]{color:#FFFFFF}