@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/work-sans-400.eec96beb.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.77bc0267.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500.f7016cd4.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.196e3cbc.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.79936b18.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.b1c8a895.woff2) format("woff2")}

:root{
 /* Apta Advisory design system, revision 4 (02_Brand/v2-design-system/tokens.json). Light only. */
 --bg-page:#FFFFFF; --bg-surface:#FAFAF9;
 --border-subtle:#E7E8EA; --border-default:#D3D5D8; --border-control:#8B9198;
 --text-primary:#10161D; --text-secondary:#58626D; --text-tertiary:#5B6571;
 --accent:#C2512C; --accent-hover:#A8431F; --accent-decorative:#D97757; --accent-wash:#FBE9E2;
 --link:#24485E; --link-hover:#173142;
 --success:#1D6304; --warning:#845610; --error:#93301F; --info:#014DD7;
 --success-wash:#E7F3E4; --warning-wash:#FBEFD8; --error-wash:#F7E4E0; --info-wash:#DFE9FA;
 --chart-1:#1461A8; --chart-2:#6A0CB9; --chart-3:#990B3D; --chart-4:#12ADB4;
 --chart-5:#9C2D8B; --chart-6:#CCB50C; --chart-7:#FC23A0; --chart-8:#A87EEB;
 --chart-9:#5E95FC; --chart-10:#417A1A; --chart-11:#2C6049; --chart-12:#A15A00;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
 --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
 --radius-sm:3px; --radius-md:4px; --radius-lg:8px; --radius-full:999px;
 --shadow-1:0 1px 2px rgba(16,22,29,0.10); --shadow-2:0 2px 6px rgba(16,22,29,0.14);
 --font-display:"Work Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* Ana 2026-09-25: headlines in Work Sans, Instrument Serif retired */
 --font-body:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
 --font-mono:"IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
 /* v5/v6 site variable names, kept as aliases so existing markup resolves to brand tokens */
 --page:var(--bg-surface); --paper:var(--bg-page); --surface:var(--bg-page);
 --ink:var(--text-primary); --deep:var(--link); --footer:var(--text-primary);
 --plumb:var(--link); --steel-deep:var(--text-tertiary); --steel:var(--border-default);
 --mist:var(--bg-page); --mist-blue:var(--border-subtle);
 --line:var(--border-default); --line-soft:var(--border-subtle); --rule:var(--border-default);
 --muted:var(--text-secondary); --slate:var(--text-secondary); --rust:var(--accent);
 --light:var(--border-default); --pale:var(--border-subtle);
 --c1:var(--chart-1); --c2:var(--chart-12); --c3:var(--chart-3); --c4:var(--chart-5);
 --apta-page:var(--bg-surface);
 --sp-2xs:var(--space-1); --sp-xs:var(--space-2); --sp-sm:var(--space-4); --sp-md:var(--space-5);
 --sp-lg:var(--space-5); --sp-xl:var(--space-6); --sp-2xl:var(--space-7); --sp-3xl:var(--space-8);
 --r-field:var(--radius-md); --r-card:var(--radius-md); --r-band:var(--radius-lg); --r-header:var(--radius-lg);
 --sh-header:none; --sh-header-sc:none; --sh-hover:none;
 --fd:var(--font-display); --fb:var(--font-body); --fm:var(--font-mono);
}

/* shared controls: Button (primary, secondary, tertiary) and FormField, per the component pages */
.btn,.cta{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
 min-height:44px; box-sizing:border-box; padding:0 22px; border:1px solid transparent;
 border-radius:var(--radius-md); font-family:var(--font-body); font-size:15px; font-weight:600;
 line-height:1; letter-spacing:0.01em; text-transform:none; text-decoration:none; white-space:nowrap;
 cursor:pointer; transition:background 150ms ease, box-shadow 150ms ease, border-color 150ms ease}
.btn:active,.cta:active{transform:translateY(1px)}
.btn-primary,.cta{background:var(--accent); color:var(--bg-page); box-shadow:var(--shadow-1)}
.btn-primary:hover,.cta:hover{background:var(--accent-hover); color:var(--bg-page); box-shadow:var(--shadow-2)}
.btn-secondary{background:var(--bg-page); color:var(--text-primary); border-color:var(--border-control)}
.btn-secondary:hover{background:var(--bg-surface); color:var(--text-primary); border-color:var(--text-tertiary)}
.tlink{display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-body);
 font-size:15px; font-weight:600; letter-spacing:0.01em; text-transform:none; color:var(--accent);
 text-underline-offset:3px}
.tlink:hover{text-decoration:underline; color:var(--accent)}
.field-label{font-family:var(--font-body); font-size:14px; font-weight:600; line-height:21px;
 letter-spacing:0; text-transform:none; color:var(--text-primary)}
.field-input{box-sizing:border-box; width:100%; min-height:44px; padding:var(--space-3) var(--space-4);
 border:1px solid var(--border-control); border-radius:var(--radius-md); background:var(--bg-page);
 font-family:var(--font-mono); font-size:15px; color:var(--text-primary)}
.field-input::placeholder{color:var(--text-tertiary)}
.field-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent)}
.ico{display:block; width:28px; height:28px; flex:none; color:var(--text-primary)}
.fig{font-family:var(--font-mono) !important; font-weight:500 !important; letter-spacing:0 !important}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.btn:focus-visible,.cta:focus-visible{
 outline:2px solid var(--accent); outline-offset:2px}
.fn{font-family:var(--font-mono); font-size:0.94em; font-weight:inherit; letter-spacing:0; white-space:nowrap}
strong .fn,b .fn{font-weight:500}

/* Video banners (round 4): full-strength film under an ink shade; the shade opens around the mouse pointer */
@property --r{syntax:"<length>"; inherits:true; initial-value:0px}
[data-spot]{--mx:50%; --my:50%; --r:0px; transition:--r 320ms ease}
[data-spot].lit{--r:110px}
[data-spot] video.bv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; z-index:0}
[data-spot] .shade{position:absolute; inset:0; pointer-events:none; background:rgba(16,22,29,0.58);
 -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r), #000 calc(var(--r) + 240px));
 mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r), #000 calc(var(--r) + 240px))}
[data-spot] .glow{display:block; position:absolute; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px;
 pointer-events:none; opacity:0; transition:opacity 420ms ease;
 background:radial-gradient(circle, rgba(231,232,234,0.16) 0%, rgba(231,232,234,0) 66%)}
[data-spot].lit .glow{opacity:1}
@media (prefers-reduced-motion: reduce){[data-spot]{transition:none}[data-spot] .glow{transition:none}}
@media (max-width:600px){[data-spot] .bv{display:none}}

/* ---------- round 5 (2026-09-25) ---------- */
/* Primary button hover: lifts 2px and an arrow slides in on the right. Padding trades sides so the width never changes. */
.btn-primary,.cta{position:relative; transition:background 150ms ease, box-shadow 150ms ease, transform 150ms ease, padding 180ms ease}
.btn,.cta{padding:0 var(--bp,22px)}
.btn-primary::after,.cta::after{content:"\2192"; content:"\2192" / ""; position:absolute; right:calc(var(--bp,22px) - 8px); top:50%;
 opacity:0; transform:translate(-6px,-50%); transition:opacity 150ms ease, transform 180ms ease}
.btn-primary:hover,.cta:hover{transform:translateY(-2px); padding-left:calc(var(--bp,22px) - 10px); padding-right:calc(var(--bp,22px) + 10px)}
.btn-primary:hover::after,.cta:hover::after{opacity:1; transform:translate(0,-50%)}
.btn-primary:active,.cta:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.btn-primary,.cta,.btn-primary::after,.cta::after{transition:none}.btn-primary:hover,.cta:hover{transform:none}}
/* Banner light: a darker cover at rest, a wider and softer opening under the pointer.
   The feather (--f) grows with the radius, so nothing opens until the pointer is over the banner. */
@property --f{syntax:"<length>"; inherits:true; initial-value:0px}
[data-spot]{--f:0px; transition:--r 320ms ease, --f 320ms ease}
[data-spot].lit{--r:130px; --f:220px}
[data-spot] .shade{background:rgba(16,22,29,0.72);
 -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r), #000 calc(var(--r) + var(--f)));
 mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r), #000 calc(var(--r) + var(--f)))}
[data-spot] .veil{-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,.3) 0, rgba(0,0,0,.3) var(--r), #000 calc(var(--r) + var(--f)));
 mask-image:radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,.3) 0, rgba(0,0,0,.3) var(--r), #000 calc(var(--r) + var(--f)))}
[data-spot] .glow{background:radial-gradient(circle, rgba(231,232,234,0.22) 0%, rgba(231,232,234,0) 66%)}

/* ---------- shared top bar (round 5: one header on every page) ---------- */
/* header: keyline bar, no decorative shadow */
header.top{position:fixed; top:var(--space-4); left:50%; transform:translateX(-50%);
 width:calc(100% - 32px); max-width:1248px; z-index:80; background:var(--paper);
 border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden}
.hwrap{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
 padding:var(--space-3) var(--space-6); transition:padding 150ms ease}
.lock{display:inline-flex; flex-direction:column; color:var(--ink)}
.lock svg{display:block; width:128px; height:auto}
nav.main{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4)}
nav.main a{font-family:var(--fb); font-weight:500; font-size:16px; color:var(--ink)}
nav.main a:hover,nav.main a.on{color:var(--link)}
.langs{display:flex; gap:var(--space-2); align-items:center}
.langs a{font-family:var(--fm); font-weight:500; font-size:12px; line-height:17px;
 letter-spacing:0.06em; color:var(--text-tertiary); padding:var(--space-1) 6px;
 border:1px solid transparent; border-radius:var(--radius-sm)}
.langs a.on{color:var(--link); border-color:var(--border-default)}
.langs a:hover{color:var(--link)}
header.top .cta{--bp:18px; font-size:14px}
header.top.condensed .hwrap{padding-top:var(--space-2); padding-bottom:var(--space-2)}
.track{height:2px; background:var(--border-subtle)}
.fill{height:2px; width:0; background:var(--accent)}
@media(max-width:900px){
 .hwrap{padding:var(--space-3) var(--space-4); gap:var(--space-2)}
 .lock{margin-right:var(--space-3)}
 .lock svg{width:120px}
 nav.main{gap:var(--space-2)}
 nav.main a{font-size:14px}
}
/* menu: below 1200px the section links fold behind a Menu button (round 5: 1100px, round 6: 1200px for the bigger bar) */
.menu-btn{display:none}
@media(max-width:1199px){
 .hwrap{flex-wrap:wrap}
 .menu-btn{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--space-4);
  background:var(--bg-page); color:var(--text-primary); border:1px solid var(--border-control);
  border-radius:var(--radius-md); font-family:var(--fb); font-size:15px; font-weight:600; cursor:pointer}
 .menu-btn:hover{background:var(--bg-surface)}
 nav.main{display:none; order:10; width:100%; flex-direction:column; align-items:stretch; gap:0}
 header.top.open nav.main{display:flex}
 nav.main a{display:flex; align-items:center; min-height:44px; font-size:16px;
  border-top:1px solid var(--border-subtle)}
}
@media(max-width:600px){
 header.top{transform:none}
 .hwrap{flex-wrap:wrap; row-gap:var(--space-3); padding:var(--space-3) var(--space-4) !important}
 .lock{margin:var(--space-1) var(--space-3) var(--space-1) 0}
}
/* round 5: the menu takes the hero face (Instrument Serif), the language switch and button stay in Sans.
   Two families in the bar. */
nav.main{gap:20px}
nav.main a{font-family:var(--fd); font-weight:400; font-size:18px; line-height:24px; letter-spacing:0.005em; white-space:nowrap}
.langs a{font-family:var(--fb); font-weight:600; letter-spacing:0.04em}
@media(max-width:1280px){nav.main{gap:var(--space-4)}}
@media(max-width:1200px){.hwrap{padding-left:var(--space-5); padding-right:var(--space-5); gap:var(--space-4)} nav.main{gap:var(--space-3)} nav.main a{font-size:16px}
 .lock svg{width:112px} .langs{gap:2px} header.top .cta{--bp:14px}}
@media(max-width:1100px){nav.main{gap:10px} nav.main a{font-size:15px}}
@media(max-width:900px){nav.main a{font-size:15px}}
@media(max-width:1199px){nav.main a{font-size:19px; white-space:normal}}
/* round 5b: full-width layout, the bar spans the window (16px gutters) */
header.top{max-width:none}
/* round 5b logo: option A wordmark is narrower (viewBox 497.5 wide); widths keep the old height, so APTA is shorter and bolder */
.lock svg{width:118px}
@media(max-width:1200px){.lock svg{width:94px}}
@media(max-width:900px){.lock svg{width:100px}}

/* ---------- round 6 (2026-09-25): a much bigger top bar ----------
   --hb is the room the fixed bar needs above each page (bar height + its 16px offset + a small gap). */
:root{--hb:112px}
@media (min-width:1100px) and (min-height:900px){:root{--hb:132px}}
@media (max-width:600px){:root{--hb:0px}}
.hwrap{padding:var(--space-5) var(--space-6); gap:20px}
header.top.condensed .hwrap{padding-top:var(--space-3); padding-bottom:var(--space-3)}
.lock svg{width:180px}
nav.main{gap:var(--space-4)}
nav.main a{font-size:19px; line-height:24px}
.langs a{font-size:13px; line-height:18px; padding:5px 8px}
header.top .cta{--bp:24px; min-height:52px; font-size:16px}
@media (max-width:1439px){nav.main{gap:var(--space-3)} nav.main a{font-size:17px}}
@media (max-width:1365px){.hwrap{padding:20px var(--space-5); gap:var(--space-4)} .lock svg{width:160px}
 .langs{gap:2px} .langs a{padding:4px 6px} header.top .cta{--bp:18px; min-height:48px; font-size:15px}}
@media (max-width:1280px){.lock svg{width:150px} nav.main{gap:10px} nav.main a{font-size:16px}}
@media (min-width:1100px) and (max-height:899px){.hwrap{padding-top:var(--space-4); padding-bottom:var(--space-4)} header.top .cta{min-height:48px}}
@media (max-width:1199px){.hwrap{padding:var(--space-4) var(--space-5)} .lock svg{width:150px} header.top .cta{min-height:48px} nav.main a{font-size:19px}}
@media (max-width:600px){.lock svg{width:140px}}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--page); color:var(--ink); font-family:var(--fb);
 font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:inherit; text-decoration:none}
.shell{max-width:1280px; margin:0 auto; background:var(--paper);
 border-left:1px solid var(--line); border-right:1px solid var(--line)}

.win .tlink,.deep .tlink{color:var(--bg-page); text-decoration:underline; text-decoration-color:transparent}
.win .tlink:hover,.deep .tlink:hover{text-decoration-color:currentColor}
.win a:focus-visible,.win button:focus-visible,.deep a:focus-visible,.deep [tabindex]:focus-visible{outline-color:var(--bg-page)}

/* screens */
section.screen{min-height:100svh; scroll-snap-align:start; display:flex;
 align-items:center; padding:112px var(--space-7) var(--space-8); background:var(--paper)}
section.screen.mist{background:var(--bg-surface); border-top:1px solid var(--border-default);
 border-bottom:1px solid var(--border-default)}
.inner{width:100%; max-width:1180px; margin:0 auto}
.snapon{scroll-snap-type:y proximity}

/* banner screens: video as the photo layer under an ink field */
section.screen.win{background:var(--paper); padding:96px var(--space-4) var(--space-4)}
.banner{position:relative; overflow:hidden; background:var(--ink);
 border-radius:var(--radius-lg); width:100%; min-height:calc(100svh - 112px);
 display:flex; align-items:flex-end; padding:var(--space-8) var(--space-7) var(--space-7); color:var(--paper)}
.banner .bv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.42}
.banner .stripe{position:absolute; inset:0; pointer-events:none; opacity:0.45;
 background:repeating-linear-gradient(103deg, rgba(16,22,29,0.92) 0 2px, rgba(16,22,29,0) 2px 10px)}
.banner .tintl{position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(135deg, rgba(36,72,94,0.5) 0%, rgba(36,72,94,0) 58%, rgba(36,72,94,0.3) 100%)}
.banner .leg{position:absolute; inset:0; pointer-events:none;
 background:linear-gradient(180deg, rgba(16,22,29,0) 0%, rgba(16,22,29,0.5) 55%, rgba(16,22,29,0.96) 100%)}
.bin{position:relative; z-index:2; width:100%; max-width:1084px; margin:0 auto}

/* deep band screens */
section.screen.deep{background:var(--paper); padding:96px var(--space-4) var(--space-4)}
.band{background:var(--deep); border-radius:var(--radius-lg); width:100%;
 min-height:calc(100svh - 112px); display:flex; align-items:center;
 padding:var(--space-8) var(--space-7); color:var(--paper)}

/* type: display-1 (H1), display-2 (H2), h4 (card titles), body, small, label, data */
.kick{font-family:var(--fm); font-weight:500; font-size:12px; line-height:17px;
 letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--space-3)}
.win .kick,.deep .kick{color:var(--border-subtle)}
h1{font-family:var(--fd); font-weight:400; font-size:clamp(40px,4.6vw,56px);
 line-height:1.107; letter-spacing:-0.01em; max-width:760px}
h1 em{font-style:italic; color:var(--mist)}
h2.t{font-family:var(--fd); font-weight:400; font-size:clamp(30px,3.2vw,40px);
 line-height:1.15; letter-spacing:0; max-width:32ch; margin-bottom:var(--space-5)}
.lead{font-size:16px; line-height:26px; color:var(--muted); max-width:62ch; margin-bottom:var(--space-5)}
.win .lead,.deep .lead{color:var(--mist)}
.win .lead strong{color:var(--paper)}
.mono{font-family:var(--fm)}

/* cards */
.grid{display:grid; gap:var(--space-5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper); border:1px solid var(--border-default);
 border-radius:var(--radius-md); padding:var(--space-5); transition:border-color 150ms ease}
.card:hover{border-color:var(--border-control)}
.card h3{font-family:var(--fb); font-weight:600; font-size:22px; line-height:29px;
 letter-spacing:0; margin:var(--space-2) 0}
.card p{font-size:14px; line-height:21px; color:var(--muted)}
.num{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--fm); font-weight:500;
 font-size:12px; line-height:17px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary)}
.key{display:inline-block; width:10px; height:10px; border-radius:var(--radius-sm); margin-right:var(--space-2)}

/* flip cards: front and back share one grid cell, so the card grows to the longer face
   (no clipping in any language or width). CSS hover per the design system, JS adds tap and focus */
.flip{position:relative; perspective:1200px; border-radius:var(--radius-md)}
.fin{position:relative; display:grid; height:100%; transform-style:preserve-3d;
 transition:transform 520ms cubic-bezier(.3,.8,.3,1)}
.slowflip .fin{transition-duration:1050ms}
.flip:hover .fin,.flip:focus-within .fin,.flip.tapped .fin{transform:rotateY(180deg)}
.ff,.fb{grid-area:1 / 1; position:relative; min-height:208px; backface-visibility:hidden;
 -webkit-backface-visibility:hidden; border-radius:var(--radius-md);
 display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5)}
.ff{background:var(--surface); border:1px solid var(--border-default)}
.fb{background:var(--deep); transform:rotateY(180deg)}
.ff h3{font-family:var(--fb); font-weight:600; font-size:22px; line-height:29px;
 letter-spacing:0; color:var(--ink)}
.ff p{font-size:14px; line-height:21px; color:var(--muted)}
.fb p{font-size:14px; line-height:21px; color:var(--mist)}
.fb .num{color:var(--border-default)}
.h-tap{display:none}
@media(hover:none){.h-hover{display:none}.h-tap{display:inline}}
.hint{margin-top:auto; font-family:var(--fm); font-size:12px; line-height:17px;
 letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary)}

/* stats (StatBlock values: mono, data weight) */
.stats{display:flex; flex-wrap:wrap; gap:var(--space-6)}
.stat .v{font-family:var(--fm); font-weight:500; font-size:clamp(38px,4.4vw,56px); line-height:1}
.stat .u{font-family:var(--fm); font-weight:500; font-size:12px; line-height:17px;
 letter-spacing:0.06em; text-transform:uppercase; color:var(--border-subtle); margin-bottom:6px}
.stat p{font-size:14px; line-height:21px; color:var(--mist); max-width:250px; margin-top:6px}
.srcnote{font-size:14px; line-height:21px; color:var(--border-default); max-width:900px; margin-top:var(--space-5)}

/* steps */
.steps{display:flex; flex-direction:column; gap:var(--space-3)}
.step{display:flex; gap:var(--space-3); align-items:flex-start}
.step b{font-family:var(--fm); font-weight:500; font-size:12px; color:var(--paper);
 background:var(--link); border-radius:var(--radius-sm); width:24px; height:24px; flex:none;
 display:inline-flex; align-items:center; justify-content:center}
.step .st{font-weight:600; font-size:14px; line-height:21px}
.step .sd{font-size:14px; line-height:21px; color:var(--muted)}

/* FAQ */
.acc{background:var(--surface); border:1px solid var(--border-default); border-radius:var(--radius-md)}
.acc+.acc{margin-top:var(--space-2)}
.accb{all:unset; display:flex; justify-content:space-between; align-items:center;
 gap:var(--space-4); width:100%; min-height:44px; box-sizing:border-box;
 padding:var(--space-3) var(--space-5); cursor:pointer; border-radius:var(--radius-md)}
.accb:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.accb span{font-family:var(--fb); font-size:16px; line-height:26px; font-weight:600; color:var(--ink)}
.accb .ic{font-family:var(--fm); color:var(--text-tertiary); font-size:16px}
.accd{max-height:0; overflow:hidden; transition:max-height 400ms ease}
.accd p{padding:0 var(--space-5) var(--space-4); font-size:16px; line-height:26px; color:var(--muted); max-width:75ch}

/* verdict card */
.vcard{background:var(--deep); color:var(--mist); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6)}
.vcard .tag{font-family:var(--fm); font-weight:500; font-size:12px; line-height:17px;
 letter-spacing:0.06em; text-transform:uppercase; background:var(--bg-page);
 color:var(--ink); border-radius:var(--radius-sm); padding:3px 9px}
.vcard h3{font-family:var(--fb); font-weight:600; color:var(--paper); font-size:22px; line-height:29px;
 margin:var(--space-3) 0 var(--space-2)}
.vcard ol{padding-left:18px; display:flex; flex-direction:column; gap:var(--space-1);
 font-size:14px; line-height:21px; max-width:72ch}
.vmeta{display:flex; flex-wrap:wrap; gap:var(--space-5);
 border-top:1px solid rgba(211,213,216,.35); margin-top:var(--space-4); padding-top:var(--space-3)}
.vmeta .l{font-family:var(--fm); font-size:12px; line-height:17px; letter-spacing:0.06em;
 text-transform:uppercase; color:var(--border-default)}
.vmeta .v{font-family:var(--fm); font-weight:500; font-size:18px; line-height:26px; color:var(--paper)}

/* section dots (radius-full: dots only) */
.dots{position:fixed; right:var(--space-4); top:50%; transform:translateY(-50%); z-index:70;
 display:flex; flex-direction:column; gap:var(--space-3)}
.dots a{width:8px; height:8px; border-radius:var(--radius-full); border:1px solid var(--text-tertiary);
 background:transparent; display:block}
.dots a.on{background:var(--accent); border-color:var(--accent)}
footer.legal{font-family:var(--fm); font-size:12px; letter-spacing:0.06em; line-height:1.9; color:var(--border-default)}
footer.legal a{color:var(--border-subtle); text-decoration:underline; text-underline-offset:3px}

@media(max-width:900px){
 .g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .snapon{scroll-snap-type:none}
 section.screen{min-height:0; padding:96px var(--space-5) var(--space-6)}
 section.screen.win,section.screen.deep{padding:88px var(--space-4) var(--space-4)}
 .banner,.band{min-height:0; padding:var(--space-7) var(--space-5) var(--space-6)}
 .dots{display:none}
}
@media(max-width:600px){
 #top{margin-top:calc(var(--hb) - 16px); padding-top:var(--space-4)}
 .g4,.g3,.g2{grid-template-columns:1fr}
 h1{font-size:clamp(34px,10.5vw,42px)}
 .banner .bv{display:none}
 .stats{gap:var(--space-5)}
}
@media(prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 .fin{transition:none}
 .card,.cta,.btn{transition:none}
}
@media print{
 *,*::before,*::after{background:transparent !important;color:var(--text-primary) !important;box-shadow:none !important;text-shadow:none !important}
 html,body{background:var(--bg-page) !important}
 header.top,header[data-header],.dots,video{display:none !important}
 [data-reveal]{opacity:1 !important;transform:none !important}
 svg g[style*="--bg-page"]{fill:var(--text-primary) !important}
}

/* v6: send-document fallback (TECH-003) */
.cta-fallback{margin:calc(-1 * var(--space-5)) 0 var(--space-6); max-width:62ch; font-size:14px; line-height:21px; color:var(--mist)}
.cta-fallback a,.cta-fallback button{color:var(--paper); text-decoration:underline; text-underline-offset:3px}
.cta-fallback button{background:none; border:0; padding:0; font:inherit; font-family:var(--fm); font-size:14px; letter-spacing:0.02em; cursor:pointer}
.cta-fallback button:focus-visible,.cta-fallback a:focus-visible{outline:2px solid var(--paper); outline-offset:3px}
.cta-fallback a,.cta-fallback button{color:var(--paper)}
.win .cta:focus-visible{outline-color:var(--bg-page)}
.formula{margin-top:var(--space-3); background:var(--bg-surface); border:1px solid var(--border-subtle);
 border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:14px; line-height:21px; color:var(--ink)}

/* ---------- round 3 (2026-09-24, Ana's review) ---------- */
/* Type order: Instrument Serif only for the H1 and the banner titles; section titles in IBM Plex Sans (h3 28/34 600).
   At most two families per block: banners use Serif + Sans, everything else Sans + Mono (mono for labels and data). */
h2.t{font-family:var(--fb); font-weight:600; font-size:28px; line-height:34px; letter-spacing:0; max-width:36ch;
 margin-bottom:var(--space-4); text-wrap:balance}
.win h2.t{font-family:var(--fd); font-weight:400; font-size:clamp(30px,3.2vw,40px); line-height:1.15; max-width:24ch}
.win .kick,.win .stat .u,.win .mono,.win footer.legal,.win .cta-fallback button{font-family:var(--fb)}
.win .kick,.win .stat .u{font-weight:600; letter-spacing:0.06em}
.win .stat .v{font-family:var(--fb); font-weight:600}
.win footer.legal{letter-spacing:0; font-size:13px; line-height:1.8}

/* One screen per page: every section is one full screen and the scroll moves a whole screen at a time.
   Applies where a screen can hold a section (at least 1100 x 760 px); phones, tablets and short windows scroll normally. */
@media (min-width:1100px) and (min-height:760px){
 html{scroll-snap-type:y mandatory}
 section.screen{height:100vh; height:100svh; min-height:0; scroll-snap-align:start; scroll-snap-stop:always;
  padding-top:104px; padding-bottom:var(--space-6)}
 section.screen.win,section.screen.deep{padding:96px var(--space-4) var(--space-4)}
 .banner,.band{min-height:0; height:100%}
}
@media (min-width:1100px) and (min-height:760px) and (prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
}
.snapon{scroll-snap-type:none}
.rv-more>div{display:contents}
.rv-more .card{margin-bottom:0 !important}
@media (min-width:1100px) and (min-height:760px){
 .grid{gap:var(--space-4)}
 .card,.ff,.fb{padding:20px}
 .ff,.fb{min-height:0}
}
@media (min-width:901px){
 #faq .inner>div[data-reveal]{max-width:none !important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4); align-items:start}
 #faq .acc+.acc{margin-top:0}
}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){
 section.screen{padding-top:96px; padding-bottom:var(--space-5)}
 h2.t{margin-bottom:var(--space-3)}
 .card h3,.ff h3{font-size:20px; line-height:26px}
 .card,.ff,.fb{padding:var(--space-4)}
}

/* ---------- round 5 (2026-09-25, Ana's review) ---------- */
/* One title per page: the menu category in Sans 600; the old headline opens the lead, in ink */
h2.t{font-size:36px; line-height:42px; letter-spacing:-0.005em; max-width:none}
.lead strong{color:var(--ink); font-weight:600}
.deep .lead strong{color:var(--paper)}
.head{margin-bottom:var(--space-5)}
.head h2.t{margin-bottom:var(--space-3)}
.head .lead{margin-bottom:0; max-width:68ch}
.head.solo{display:block}
.head.solo h2.t{margin-bottom:var(--space-2)}
@media (min-width:901px){
 .head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-7); align-items:end}
 .head h2.t{margin:0}
 [data-rv] .inner{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-7); align-items:center}
 [data-rv] .head{display:block; margin:0}
 [data-rv] .head h2.t{margin-bottom:var(--space-4)}
 [data-rv] .inner>.grid{grid-template-columns:1fr}
 .rv-more{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* the report (2): check lists instead of run-on lines */
.ticks{list-style:none; padding:0; margin:var(--space-4) 0 0; display:grid; gap:var(--space-3) var(--space-5)}
.ticks.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ticks li{position:relative; padding-left:26px; font-size:15px; line-height:22px; color:var(--ink)}
.ticks li::before{content:""; position:absolute; left:2px; top:5px; width:11px; height:6px;
 border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
@media(max-width:600px){.ticks.two{grid-template-columns:1fr}}
/* method (2): three rules as statement cards */
.rules{counter-reset:rule}
.rules .card{counter-increment:rule; display:flex; flex-direction:column; gap:var(--space-2)}
.rules .card::before{content:counter(rule, decimal-leading-zero); font-family:var(--fm); font-weight:500;
 font-size:40px; line-height:1; color:var(--link)}
.rules .card h3{font-size:26px; line-height:32px; margin:0}
.rules .card p{font-size:16px; line-height:26px}
@media (min-width:901px){
 .rules{grid-template-columns:1fr !important}
 .rules .card{display:grid; grid-template-columns:120px minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-7); align-items:center;
  padding:var(--space-6) var(--space-7)}
}
/* industries: sectors 2 x 2 beside the three figures, sharing top and bottom edges */
.ind{display:grid; gap:var(--space-5)}
.ind-flips{grid-template-columns:repeat(2,minmax(0,1fr))}
.ind-figs{grid-template-columns:1fr}
@media (min-width:901px){.ind{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.ind-figs .card h3{font-size:20px !important; line-height:26px !important}
.ind-figs .card p{font-size:14px !important; line-height:21px !important}
@media (max-width:600px){.ind-flips{grid-template-columns:1fr}}
/* method: the eight steps spread over the card height */
[data-page="how"] .card{display:flex; flex-direction:column}
[data-page="how"] .steps{flex:1; justify-content:space-around}

/* Fuller pages: in one-screen mode the content fills the screen instead of floating in the middle */
@media (min-width:1100px) and (min-height:760px){
 .ind{gap:var(--space-4)}
 section.screen:not(.win):not(.deep) .inner{height:100%; max-height:900px; display:flex; flex-direction:column}
 section.screen:not(.win):not(.deep) .inner>.grid,section.screen:not(.win):not(.deep) .inner>.ind{flex:1 1 0; min-height:0; grid-auto-rows:auto; align-content:stretch}
 .ind>.grid{grid-auto-rows:auto; align-content:stretch}
 [data-rv] .inner{display:grid !important; align-items:center}
 [data-rv] .inner>.grid{height:100%; align-content:center}
 [data-page="services"] .inner>.grid{max-height:460px}
 .rv-more .card{display:flex; flex-direction:column}
 .rv-more .ticks{flex:1; align-content:space-evenly}
 .band .bin{display:flex; flex-direction:column; gap:var(--space-5)}
 .band .head{margin:0}
 .band .stats{justify-content:space-between; padding:var(--space-7) 0; border-top:1px solid rgba(211,213,216,.35); border-bottom:1px solid rgba(211,213,216,.35)}
 .band .stat p{max-width:300px}
}
/* taller screens: larger type so the cards read as full pages */
@media (min-width:1100px) and (min-height:900px){
 section.screen:not(.win):not(.deep){padding-top:120px}
 .card,.ff,.fb{padding:var(--space-6)}
 .card h3,.ff h3{font-size:24px; line-height:31px}
 .card p,.ff p,.fb p{font-size:16px; line-height:25px}
 .lead{font-size:18px; line-height:28px}
 .ticks li{font-size:16px; line-height:25px}
 .step .st,.step .sd{font-size:16px; line-height:24px}
 .step b{width:28px; height:28px; font-size:13px}
 .vcard{padding:var(--space-7)}
 .vcard ol{font-size:16px; line-height:25px}
 .accb{min-height:60px; padding:var(--space-4) var(--space-5)}
 .accb span{font-size:18px; line-height:27px}
 .rules .card h3{font-size:30px; line-height:36px}
 .rules .card p{font-size:18px; line-height:28px}
 .rules .card::before{font-size:56px}
 #faq .inner>div[data-reveal]{gap:var(--space-3) var(--space-5)}
 #faq .accb{min-height:72px}
 .stat p{font-size:16px; line-height:25px}
 .srcnote{font-size:15px; line-height:23px}
}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){
 h2.t{font-size:30px; line-height:36px}
 #fees .card p[style]{line-height:21px !important}
}
@media (min-width:1100px) and (max-width:1279px){[data-rv] .inner{grid-template-columns:minmax(0,4fr) minmax(0,8fr) !important}}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){.band .stats{padding:var(--space-5) 0}}
.rules .card h3{hyphens:auto; overflow-wrap:break-word}
@media(max-width:600px){.rules .card h3{font-size:22px; line-height:29px} .rules .card::before{font-size:32px}}
@media(max-width:600px){h2.t{font-size:30px; line-height:36px}}

/* ---------- round 5b (2026-09-25): full-width, no centred frame ---------- */
/* The 1280px sheet with side borders is gone: pages use the whole window. Content keeps a readable
   maximum (1680px) on very wide screens, with fluid side margins; banners run edge to edge (16px gutters). */
.shell{max-width:none; border-left:0; border-right:0}
.inner{max-width:1680px}
section.screen{padding-left:clamp(24px,4vw,80px); padding-right:clamp(24px,4vw,80px)}
section.screen.win,section.screen.deep{padding-left:var(--space-4); padding-right:var(--space-4)}
.bin{max-width:none}
.banner,.band{padding-left:clamp(24px,4vw,80px); padding-right:clamp(24px,4vw,80px)}
@media(max-width:900px){section.screen{padding-left:var(--space-5); padding-right:var(--space-5)}
 section.screen.win,section.screen.deep{padding-left:var(--space-4); padding-right:var(--space-4)}
 .banner,.band{padding-left:var(--space-5); padding-right:var(--space-5)}}

/* ---------- round 6 (2026-09-25, Ana's review) ---------- */
/* room for the bigger top bar */
@media (min-width:601px){section.screen{padding-top:calc(var(--hb) + 8px)} section.screen.win,section.screen.deep{padding-top:var(--hb)}}
@media (min-width:1100px) and (min-height:760px){
 section.screen:not(.win):not(.deep){padding-top:calc(var(--hb) + 8px)}
 section.screen.win,section.screen.deep{padding-top:var(--hb)}
}
/* page titles in capitals, with a short accent rule above */
section.screen:not(.win) h2.t{text-transform:uppercase; letter-spacing:0.03em}
section.screen:not(.win) h2.t::before{content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--accent); margin-bottom:var(--space-4)}
/* colour through the pages: accent for markers, dark blue edges on cards */
.ff .num,.card .num,.hint,.accb .ic{color:var(--accent)}
.ico{color:var(--accent)}
.rules .card::before{color:var(--accent)}
.card,.ff{border-top:3px solid var(--link)}
.card:hover{border-top-color:var(--accent)}
.ind-figs .fig{color:var(--link)}
.acc:has(.accb[aria-expanded="true"]){border-color:var(--accent)}
/* Who pays us: a dark blue page, like the results page */
#independence{background:var(--link); border:0; color:var(--paper)}
#independence h2.t,#independence .lead strong,#independence .inner>p strong{color:var(--paper)}
#independence .lead{color:var(--mist)}
#independence .inner>p[style]{color:var(--mist) !important}
#independence .fb{background:var(--ink)}
@media (min-width:1100px) and (min-height:760px){
 #independence{background:var(--paper); padding:calc(var(--hb) - 8px) var(--space-4) var(--space-4)}
 #independence .inner{background:var(--link); border-radius:var(--radius-lg); max-width:none; padding:var(--space-6) calc(clamp(24px,4vw,80px) - 16px)}
}
#independence a:focus-visible,#independence [tabindex]:focus-visible{outline-color:var(--bg-page)}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){
 section.screen:not(.win):not(.deep){padding-top:calc(var(--hb) - 4px)}
 section.screen:not(.win) h2.t::before{margin-bottom:10px}
}

/* ---------- round 5c (2026-09-25): fluid sizing on large screens ----------
   From 1440 x 900 up, the top bar, type and spacing grow with the window instead of staying at laptop size.
   One unit drives everything: --u = min(1vw, 1.6vh). At 1440 x 900 it is 14.4px, so every value below equals
   the laptop design there (value = px / 14.4 x --u) and scales from it; tying it to the height as well keeps
   each page on one screen. Below 1440 x 900 nothing here applies. */
@media (min-width:1440px) and (min-height:900px){
 :root{--u:min(1vw, 1.6vh); --hb:calc(var(--u) * 9.167)}

 /* top bar */
 header.top{top:calc(var(--u) * 1.111); width:calc(100% - var(--u) * 2.222)}
 .hwrap{gap:calc(var(--u) * 1.389); padding:calc(var(--u) * 1.667) calc(var(--u) * 2.222)}
 header.top.condensed .hwrap{padding-top:calc(var(--u) * 0.8334); padding-bottom:calc(var(--u) * 0.8334)}
 .lock svg{width:calc(var(--u) * 12.5)}
 nav.main{gap:calc(var(--u) * 1.111)}
 nav.main a{font-size:calc(var(--u) * 1.319); line-height:1.26}
 .langs{gap:calc(var(--u) * 0.556)}
 .langs a{font-size:calc(var(--u) * 0.903); line-height:1.4; padding:calc(var(--u) * 0.347) calc(var(--u) * 0.556)}
 .track,.fill{height:calc(var(--u) * 0.139)}

 /* buttons and form fields */
 .btn,.cta{--bp:calc(var(--u) * 1.528); min-height:calc(var(--u) * 3.056); font-size:calc(var(--u) * 1.042)}
 header.top .cta{--bp:calc(var(--u) * 1.667); font-size:calc(var(--u) * 1.111); min-height:calc(var(--u) * 3.611)}
 .tlink{min-height:calc(var(--u) * 3.056); font-size:calc(var(--u) * 1.042)}
 .field-label{font-size:calc(var(--u) * 1.042) !important; line-height:1.45 !important}
 .field-input{min-height:calc(var(--u) * 3.611) !important; font-size:calc(var(--u) * 1.181) !important;
  padding:calc(var(--u) * 0.8334) calc(var(--u) * 1.111)}
 .ico{width:calc(var(--u) * 1.944); height:calc(var(--u) * 1.944)}

 /* home: screens */
 section.screen:not(.win):not(.deep){padding-top:calc(var(--hb) + var(--u) * 0.556); padding-bottom:calc(var(--u) * 2.222)}
 section.screen.win,section.screen.deep{padding:var(--hb) calc(var(--u) * 1.111) calc(var(--u) * 1.111)}
 section.screen{padding-left:calc(var(--u) * 5.556); padding-right:calc(var(--u) * 5.556)}
 .inner{max-width:calc(var(--u) * 117)}
 section.screen:not(.win):not(.deep) .inner{max-height:none}
 .banner,.band{padding:calc(var(--u) * 4.444) calc(var(--u) * 5.556) calc(var(--u) * 3.333)}
 .band{padding-top:calc(var(--u) * 4.444); padding-bottom:calc(var(--u) * 4.444)}

 /* home: type */
 h1{font-size:calc(var(--u) * 3.889); max-width:calc(var(--u) * 52.8)}
 .kick{font-size:calc(var(--u) * 0.8334); line-height:1.42; margin-bottom:calc(var(--u) * 0.8334)}
 h2.t{font-size:calc(var(--u) * 2.5); line-height:1.17}
 .win h2.t{font-size:calc(var(--u) * 2.778); max-width:24ch}
 .lead{font-size:calc(var(--u) * 1.25); line-height:1.56; margin-bottom:calc(var(--u) * 1.667)}
 .win .lead{font-size:calc(var(--u) * 1.111)}
 .head{margin-bottom:calc(var(--u) * 1.667); column-gap:calc(var(--u) * 3.333)}
 [data-rv] .inner{column-gap:calc(var(--u) * 3.333)}
 .mono,.num,.hint{font-size:calc(var(--u) * 0.8334); line-height:1.42}

 /* home: cards */
 .grid,.ind{gap:calc(var(--u) * 1.111)}
 .card,.ff,.fb{padding:calc(var(--u) * 2.222)}
 .card h3,.ff h3{font-size:calc(var(--u) * 1.667); line-height:1.3; margin:calc(var(--u) * 0.556) 0}
 .card p,.ff p,.fb p{font-size:calc(var(--u) * 1.111); line-height:1.56}
 .ff,.fb{gap:calc(var(--u) * 0.556)}
 .ind-figs .card h3{font-size:calc(var(--u) * 1.389) !important; line-height:1.3 !important}
 .ind-figs .card p{font-size:calc(var(--u) * 0.972) !important; line-height:1.5 !important}
 [data-page="services"] .inner>.grid{max-height:calc(var(--u) * 32)}
 .ticks{gap:calc(var(--u) * 0.8334) calc(var(--u) * 1.667); margin-top:calc(var(--u) * 1.111)}
 .ticks li{font-size:calc(var(--u) * 1.111); line-height:1.56; padding-left:calc(var(--u) * 1.806)}
 .ticks li::before{top:calc(var(--u) * 0.4); width:calc(var(--u) * 0.764); height:calc(var(--u) * 0.417)}
 .steps{gap:calc(var(--u) * 0.8334)}
 .step{gap:calc(var(--u) * 0.8334)}
 .step b{width:calc(var(--u) * 1.944); height:calc(var(--u) * 1.944); font-size:calc(var(--u) * 0.903)}
 .step .st,.step .sd{font-size:calc(var(--u) * 1.111); line-height:1.5}
 .formula{font-size:calc(var(--u) * 0.972); line-height:1.5; padding:calc(var(--u) * 0.8334) calc(var(--u) * 1.111)}
 .rules .card{grid-template-columns:calc(var(--u) * 8.333) minmax(0,5fr) minmax(0,7fr); column-gap:calc(var(--u) * 3.333);
  padding:calc(var(--u) * 2.222) calc(var(--u) * 3.333)}
 .rules .card::before{font-size:calc(var(--u) * 3.889)}
 .rules .card h3{font-size:calc(var(--u) * 2.083); line-height:1.2}
 .rules .card p{font-size:calc(var(--u) * 1.25); line-height:1.56}
 .vcard{padding:calc(var(--u) * 3.333)}
 .vcard h3{font-size:calc(var(--u) * 1.528); line-height:1.32; margin:calc(var(--u) * 0.8334) 0 calc(var(--u) * 0.556)}
 .vcard ol{font-size:calc(var(--u) * 1.111); line-height:1.56; padding-left:calc(var(--u) * 1.25)}
 .vcard .tag,.vmeta .l{font-size:calc(var(--u) * 0.8334); line-height:1.42}
 .vmeta{gap:calc(var(--u) * 1.667); margin-top:calc(var(--u) * 1.111); padding-top:calc(var(--u) * 0.8334)}
 .vmeta .v{font-size:calc(var(--u) * 1.25); line-height:1.44}
 .vcard [style*="font-size:14px"]{font-size:calc(var(--u) * 0.972) !important}
 .vcard [style*="font-size:12px"]{font-size:calc(var(--u) * 0.8334) !important}
 #fees .card p[style]{font-size:calc(var(--u) * 0.972) !important; line-height:1.5 !important}
 section.screen [style*="font-size:14px"]{font-size:calc(var(--u) * 0.972) !important}
 section.screen [style*="font-size:12px"]{font-size:calc(var(--u) * 0.8334) !important}
 section.screen [style*="font-size:26px"]{font-size:calc(var(--u) * 1.806) !important}

 /* home: results, FAQ, hero figures, footer line */
 .stats{gap:calc(var(--u) * 2.222)}
 .stat .v{font-size:calc(var(--u) * 3.889)}
 .stat .u{font-size:calc(var(--u) * 0.8334); line-height:1.42}
 .stat p{font-size:calc(var(--u) * 1.111); line-height:1.56; max-width:calc(var(--u) * 20.8)}
 .band .stats{padding:calc(var(--u) * 3.333) 0}
 .srcnote{font-size:calc(var(--u) * 1.042); line-height:1.53; max-width:calc(var(--u) * 62.5)}
 #faq .inner>div[data-reveal]{gap:calc(var(--u) * 0.8334) calc(var(--u) * 1.667)}
 .accb{min-height:calc(var(--u) * 5); padding:calc(var(--u) * 1.111) calc(var(--u) * 1.667); gap:calc(var(--u) * 1.111)}
 #faq .accb{min-height:calc(var(--u) * 5)}
 .accb span,.accb .ic{font-size:calc(var(--u) * 1.25); line-height:1.5}
 .accd p{font-size:calc(var(--u) * 1.111); line-height:1.56; padding:0 calc(var(--u) * 1.667) calc(var(--u) * 1.111)}
 .win footer.legal{font-size:calc(var(--u) * 0.903)}
 .cta-fallback{font-size:calc(var(--u) * 0.972); line-height:1.5}
 .dots{right:calc(var(--u) * 1.111); gap:calc(var(--u) * 0.8334)}
 .dots a{width:calc(var(--u) * 0.556); height:calc(var(--u) * 0.556)}

 /* tools and privacy pages */
 html:has(main.under-top){scroll-padding-top:var(--hb)}
 main.under-top{padding-top:var(--hb)}
 main.under-top>section:not([data-hero]):not(:last-child){min-height:calc(100svh - var(--hb) - 16px)}
 main.under-top>section[data-hero]{min-height:calc(100svh - var(--hb) - 32px) !important; margin:0 calc(var(--u) * 1.111) !important;
  padding-bottom:calc(var(--u) * 3.333) !important}
 main.under-top>section:last-child{min-height:calc(100svh - var(--hb) - var(--foot-h, 160px))}
 main.under-top>section:not([data-hero]):not(.endcta){padding-top:calc(var(--u) * 4.444) !important; padding-bottom:calc(var(--u) * 4.444) !important;
  padding-left:calc(var(--u) * 5.556) !important; padding-right:calc(var(--u) * 5.556) !important}
 section[data-hero]{padding-left:calc(var(--u) * 3.333) !important; padding-right:calc(var(--u) * 3.333) !important}
 section[data-hero] h1{font-size:calc(var(--u) * 3.889) !important; max-width:calc(var(--u) * 61) !important}
 section[data-hero] p{font-size:calc(var(--u) * 1.111) !important; line-height:1.63 !important; max-width:calc(var(--u) * 36) !important}
 section[data-hero] [data-reveal="left"]{font-size:calc(var(--u) * 0.8334) !important}
 section[data-hero]>div[style*="z-index:2"]{gap:calc(var(--u) * 1.111) !important}
 .tool-card{gap:calc(var(--u) * 4.444)}
 .tool-intro,.tool-body{gap:calc(var(--u) * 1.111)}
 .tool-intro h2{font-size:calc(var(--u) * 2.5) !important; line-height:1.17 !important}
 section.screen:not(.win) h2.t::before,h2.pt::before,.tool-intro h2::before{width:calc(var(--u) * 2.778); height:calc(var(--u) * 0.278); margin-bottom:calc(var(--u) * 1.111)}
 #independence{padding:calc(var(--hb) - var(--u) * 0.556) calc(var(--u) * 1.111) calc(var(--u) * 1.111)}
 #independence .inner{max-width:none; padding:calc(var(--u) * 2.222) calc(var(--u) * 4.444)}
 .tool-intro p{font-size:calc(var(--u) * 1.25) !important; line-height:1.56 !important}
 .tool-body{padding:calc(var(--u) * 3.333) !important}
 main.under-top>section[id^="tools"] .tool-body{min-height:min(calc(var(--u) * 34.7), 58svh)}
 .tool-body label{font-size:calc(var(--u) * 0.972) !important; gap:calc(var(--u) * 0.556) !important}
 .tool-body input[type=checkbox]{width:calc(var(--u) * 1.111) !important; height:calc(var(--u) * 1.111) !important}
 .tool-body>div[style*="display:flex"]{gap:calc(var(--u) * 0.8334) !important}
 .tool-body label[style*="min-width:150px"]{min-width:calc(var(--u) * 10.4) !important}
 .tool-out{font-size:calc(var(--u) * 0.972); line-height:1.5; padding:calc(var(--u) * 1.111) calc(var(--u) * 1.667)}
 main.under-top [style*="font-family:var(--fm); font-size:12px"]{font-size:calc(var(--u) * 0.8334) !important}
 main.under-top p[style*="font-size:12px"]{font-size:calc(var(--u) * 0.8334) !important}
 h2.pt{font-size:calc(var(--u) * 2.5); line-height:1.17; margin-bottom:calc(var(--u) * 1.111)}
 [data-rows]{column-gap:calc(var(--u) * 2.222) !important}
 [data-rows] h3,.terms h3{font-size:calc(var(--u) * 1.667) !important; line-height:1.3 !important}
 .terms{font-size:calc(var(--u) * 1.181) !important; line-height:1.65 !important; gap:calc(var(--u) * 2.222) calc(var(--u) * 4.444) !important}
 .terms>div{padding-top:calc(var(--u) * 1.667)}
 .terms h3{margin-bottom:calc(var(--u) * 0.8334) !important}
 [data-rows] p{font-size:calc(var(--u) * 1.181); line-height:1.65}
 [data-rows] [style*="font-size:16px"]{font-size:calc(var(--u) * 1.181) !important; line-height:1.65 !important; gap:calc(var(--u) * 0.8334) !important}
 [data-rows]>div[data-reveal]{padding:calc(var(--u) * 2.222) 0 !important; row-gap:calc(var(--u) * 0.8334) !important}
 .endcta{padding:calc(var(--u) * 1.111) !important}
 .endcta>div{padding:calc(var(--u) * 4.444) calc(var(--u) * 5.556) !important; gap:calc(var(--u) * 1.667) !important}
 .endcta h2{font-size:calc(var(--u) * 2.5) !important; line-height:1.17 !important}
 .endcta .apply{gap:calc(var(--u) * 2.222); max-width:calc(var(--u) * 76.4); padding-top:calc(var(--u) * 1.667)}
 .endcta .apply h3{font-size:calc(var(--u) * 1.389); line-height:1.4; margin-bottom:calc(var(--u) * 0.556)}
 .endcta .apply p{font-size:calc(var(--u) * 1.111); line-height:1.63}
 [data-card-root] footer{margin:0 calc(var(--u) * 1.111) calc(var(--u) * 1.111) !important; padding:calc(var(--u) * 2.222) calc(var(--u) * 5.556) !important}
 [data-card-root] footer [style*="font-size:12px"]{font-size:calc(var(--u) * 0.8334) !important}
 [data-card-root] footer svg{width:calc(var(--u) * 7.43) !important}
 [data-card-root] footer>div{gap:calc(var(--u) * 1.667) !important}
}

/* ================= round 7 (2026-09-25, Ana's review) ================= */

/* ---------- logo C in the top bar and footers ---------- */
.lock svg.logo-c{width:202px; height:auto}
@media (max-width:1439px){.lock svg.logo-c{width:190px}}
@media (max-width:1199px){.lock svg.logo-c{width:176px}}
@media (max-width:600px){.lock svg.logo-c{width:160px}}

/* ---------- top bar: one font (IBM Plex Sans) for menu, languages and button; the menu gets its own row ---------- */
:root{--hb:112px}
@media (min-width:1200px){
 :root{--hb:132px}
 .hwrap{display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:"logo . langs cta" "nav nav nav nav";
  column-gap:var(--space-5); row-gap:0; align-items:center; padding:12px var(--space-6) 0}
 .lock{grid-area:logo} .langs{grid-area:langs} header.top .cta{grid-area:cta} .menu-btn{display:none !important}
 nav.main{grid-area:nav; display:flex; flex-wrap:nowrap; justify-content:center; gap:36px; margin-top:10px;
  padding:8px 0 10px; border-top:1px solid var(--border-subtle)}
 nav.main a{font-family:var(--fb); font-weight:600; font-size:16px; line-height:22px; letter-spacing:0.01em; color:var(--ink);
  position:relative; white-space:nowrap}
 nav.main a::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--accent); transition:right 150ms ease}
 nav.main a:hover::after,nav.main a.on::after{right:0}
 nav.main a:hover,nav.main a.on{color:var(--link)}
 header.top .cta{min-height:44px}
 header.top.condensed .hwrap{padding-top:8px}
 header.top.condensed nav.main{margin-top:8px; padding:6px 0 8px}
}
@media (min-width:1200px) and (min-height:900px){
 :root{--hb:150px}
 .hwrap{padding-top:var(--space-4)}
 header.top .cta{min-height:48px}
 nav.main{margin-top:12px; padding:10px 0 12px}
}
@media (max-width:1199px){nav.main a{font-family:var(--fb); font-weight:600; font-size:18px}}
@media (max-width:600px){:root{--hb:0px}}
@media (prefers-reduced-motion: reduce){nav.main a::after{transition:none}}

/* ---------- white and blue pages alternate (home) ---------- */
section.screen.blue{background:var(--link); border:0; color:var(--paper)}
section.screen.blue h2.t,section.screen.blue .lead strong,section.screen.blue .inner>p strong{color:var(--paper)}
section.screen.blue .lead{color:var(--mist)}
section.screen.blue .inner>p[style]{color:var(--mist) !important}
section.screen.blue .fb{background:var(--ink)}
section.screen.blue .card,section.screen.blue .ff{color:var(--ink)}
section.screen.blue .card[style*="--deep"]{color:var(--mist)}
section.screen.blue .card,section.screen.blue .ff{border-top-color:var(--accent)}
section.screen.blue .vcard{background:var(--ink)}
section.screen.blue .card[style*="--deep"]{background:var(--ink) !important; border-color:var(--ink) !important}
section.screen.blue a:focus-visible,section.screen.blue [tabindex]:focus-visible{outline-color:var(--bg-page)}
@media (min-width:1100px) and (min-height:760px){
 section.screen.blue:not(.win):not(.deep){background:var(--paper); padding:calc(var(--hb) - 8px) var(--space-4) var(--space-4)}
 section.screen.blue .inner{background:var(--link); border-radius:var(--radius-lg); max-width:none; max-height:none;
  padding:var(--space-6) calc(clamp(24px,4vw,80px) - 16px)}
}

/* ---------- The numbers: three equal columns, one footnote block ---------- */
.band .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; justify-content:stretch}
.band .stat{padding:0 var(--space-6); border-left:1px solid rgba(211,213,216,.35)}
.band .stat:first-child{padding-left:0; border-left:0}
.band .stat .v{font-size:clamp(48px,5vw,72px)}
.band .stat p{max-width:none; font-size:16px; line-height:25px}
.band .srcnote{max-width:none; column-count:3; column-gap:64px; column-rule:1px solid rgba(211,213,216,.35); font-size:14px; line-height:22px; margin-top:0}
@media (max-width:900px){.band .stats{grid-template-columns:1fr; row-gap:var(--space-5)} .band .stat{padding:0; border-left:0} .band .srcnote{column-count:1}}

/* ---------- card content fills the card: centred block, justified text (every flip card and card) ---------- */
.fb{justify-content:center}
.fb .num{position:absolute; top:var(--space-5); left:var(--space-5)}
.fb p{font-size:16px; line-height:1.6; text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.ff h3{margin-top:auto}
.ff .hint{margin-top:auto}
.grid:not(.rules)>.card{display:flex; flex-direction:column; justify-content:center}
.card p,.ff p{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.card p.formula{text-align:left; hyphens:manual}
@media (min-width:1100px) and (min-height:900px){.fb p{font-size:18px}}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){.fb p{font-size:15px; line-height:1.5}}

/* ---------- The verdict: one wide report card, summary left, conditions right ---------- */
@media (min-width:1100px) and (min-height:760px){
 [data-rv] .inner{display:flex !important; flex-direction:column; justify-content:center}
 [data-rv] .head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-7); align-items:end; margin-bottom:var(--space-5)}
 [data-rv] .head h2.t{margin:0}
 [data-rv] .inner>.grid{height:auto; flex:0 0 auto !important; grid-template-columns:1fr}
 [data-rv] .vcard{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-7); row-gap:var(--space-3);
  grid-template-areas:"hdr hdr" "h3 ol" "p ol" "meta ol" "note note"; align-items:start; padding:var(--space-6) var(--space-7)}
 [data-rv] .vcard>div:first-child{grid-area:hdr}
 [data-rv] .vcard>h3{grid-area:h3; margin:var(--space-2) 0 0}
 [data-rv] .vcard>p:not(.mono){grid-area:p}
 [data-rv] .vcard>ol{grid-area:ol; list-style:none; counter-reset:c; padding:0; margin:0; gap:0}
 [data-rv] .vcard>ol li{counter-increment:c; display:grid; grid-template-columns:32px 1fr; align-items:baseline; padding:10px 0;
  border-top:1px solid rgba(211,213,216,.25)}
 [data-rv] .vcard>ol li:first-child{border-top:0; padding-top:0}
 [data-rv] .vcard>ol li::before{content:counter(c,decimal-leading-zero); font-family:var(--fm); font-weight:500; font-size:12px; color:var(--accent-decorative)}
 [data-rv] .vcard>.vmeta{grid-area:meta; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2)}
 [data-rv] .vcard>p.mono{grid-area:note; margin-top:var(--space-2) !important}
}

/* ---------- How we check: each phase is one row of steps on a line ---------- */
@media (min-width:1100px) and (min-height:760px){
 [data-page="how"] .inner{justify-content:center}
 [data-page="how"] .inner>.grid{flex:0 0 auto !important; grid-template-columns:1fr !important; gap:var(--space-4)}
 [data-page="how"] .card{display:grid !important; grid-template-columns:170px repeat(5,minmax(0,1fr)); column-gap:var(--space-5);
  align-items:start; position:relative; padding:var(--space-5) var(--space-6)}
 [data-page="how"] .card>.num{grid-column:1; align-self:start; white-space:normal; line-height:1.5}
 [data-page="how"] .card>div[style*="height:10px"]{display:none}
 [data-page="how"] .steps{display:contents}
 [data-page="how"] .step{flex-direction:column; gap:var(--space-2); position:relative}
 [data-page="how"] .step>div{display:flex; flex-direction:column; gap:2px}
 [data-page="how"] .step::after{content:""; position:absolute; top:13px; left:36px; right:calc(-1 * var(--space-5) + 4px); height:2px; background:var(--border-subtle)}
 [data-page="how"] .step:last-child::after{display:none}
 [data-page="how"] .card>.formula{grid-column:span 2; margin:0; align-self:stretch}
}

/* ---------- contact page at the same size as the first page ---------- */
#contact h2.t{font-size:clamp(40px,4.6vw,56px); line-height:1.107; letter-spacing:-0.01em; max-width:760px}
#contact .lead{max-width:62ch}

/* ---------- cursor light: a smaller circle ---------- */
[data-spot].lit{--r:80px; --f:140px}
[data-spot] .glow{width:360px; height:360px; margin:-180px 0 0 -180px}

/* ---------- tools, privacy and careers: exact one-screen pages, white and blue alternating ---------- */
@media (min-width:1100px) and (min-height:760px){
 main.under-top::before{content:""; position:fixed; top:0; left:0; right:0; height:var(--hb); background:var(--bg-page); z-index:75; pointer-events:none}
 main.under-top>section:not([data-hero]):not(:last-child):not(.blue){min-height:calc(100svh - var(--hb)) !important}
 main.under-top>section.blue:not(:last-child){min-height:calc(100svh - var(--hb) - 16px) !important; margin:0 16px 16px}
 main.under-top>section[data-hero]{min-height:calc(100svh - var(--hb) - 16px) !important; margin:0 16px 16px !important}
 main.under-top>section:last-child{min-height:calc(100svh - var(--hb) - var(--foot-h, 160px) + 16px)}
}
main.under-top>section.blue{background:var(--link) !important; border-radius:var(--radius-lg); color:var(--bg-page)}
main.under-top section.blue h2.pt,main.under-top section.blue .terms h3{color:var(--bg-page) !important}
main.under-top section.blue .terms,main.under-top section.blue .terms p,main.under-top section.blue .terms span[style],main.under-top section.blue>p[style]{color:var(--border-subtle) !important}
@media (min-width:901px){
 main.under-top section.blue .tool-intro h2{color:var(--bg-page) !important}
 main.under-top section.blue .tool-intro p,main.under-top section.blue .tool-intro>span{color:var(--border-subtle) !important}
}
@media (min-width:1100px) and (min-height:760px) and (max-height:860px){
 section.screen.blue .inner{padding:var(--space-4) calc(clamp(24px,4vw,80px) - 16px)}
 [data-rv] .vcard{padding:var(--space-5) var(--space-6)}
 [data-rv] .head{margin-bottom:var(--space-3)}
}
main.under-top section.blue .terms{border-top-color:rgba(211,213,216,.35)}
main.under-top section.blue a{color:var(--bg-page); text-decoration:underline; text-underline-offset:3px}
main.under-top section.blue a:focus-visible,main.under-top section.blue button:focus-visible,main.under-top section.blue input:focus-visible{outline-color:var(--bg-page)}
.endcta.light>div{background:var(--bg-page) !important; border-top:1px solid var(--border-default) !important; border-radius:0}
.endcta.light h2{color:var(--text-primary) !important}

/* ---------- large screens: the same, scaled (see fluid.css) ---------- */
@media (min-width:1440px) and (min-height:900px){
 :root{--hb:calc(var(--u) * 10.417)}
 .lock svg.logo-c{width:calc(var(--u) * 14.03)}
 .hwrap{column-gap:calc(var(--u) * 1.667); row-gap:0; padding:calc(var(--u) * 1.111) calc(var(--u) * 2.222) 0}
 header.top .cta{min-height:calc(var(--u) * 3.333)}
 nav.main{gap:calc(var(--u) * 2.5); margin-top:calc(var(--u) * 0.833); padding:calc(var(--u) * 0.694) 0 calc(var(--u) * 0.833)}
 nav.main a{font-size:calc(var(--u) * 1.111); line-height:1.4}
 header.top.condensed .hwrap{padding-top:calc(var(--u) * 0.556)}
 header.top.condensed nav.main{margin-top:calc(var(--u) * 0.556); padding:calc(var(--u) * 0.417) 0 calc(var(--u) * 0.556)}
 section.screen.blue:not(.win):not(.deep){padding:calc(var(--hb) - var(--u) * 0.556) calc(var(--u) * 1.111) calc(var(--u) * 1.111)}
 section.screen.blue .inner{padding:calc(var(--u) * 2.222) calc(var(--u) * 4.444)}
 .band .stat{padding:0 calc(var(--u) * 2.222)}
 .band .stat .v{font-size:calc(var(--u) * 5)}
 .band .stat p{font-size:calc(var(--u) * 1.111); line-height:1.56}
 .band .srcnote{font-size:calc(var(--u) * 0.972); line-height:1.57; column-gap:calc(var(--u) * 4.444)}
 .fb .num{top:calc(var(--u) * 2.222); left:calc(var(--u) * 2.222)}
 .fb p{font-size:calc(var(--u) * 1.25)}
 [data-rv] .vcard{padding:calc(var(--u) * 2.222) calc(var(--u) * 3.333); column-gap:calc(var(--u) * 3.333)}
 [data-rv] .vcard>ol li{grid-template-columns:calc(var(--u) * 2.222) 1fr; padding:calc(var(--u) * 0.694) 0}
 [data-rv] .vcard>ol li::before{font-size:calc(var(--u) * 0.8334)}
 [data-page="how"] .card{grid-template-columns:calc(var(--u) * 11.8) repeat(5,minmax(0,1fr)); padding:calc(var(--u) * 1.667) calc(var(--u) * 2.222); column-gap:calc(var(--u) * 1.667)}
 [data-page="how"] .step::after{top:calc(var(--u) * 0.97); left:calc(var(--u) * 2.5)}
 #contact h2.t{font-size:calc(var(--u) * 3.889); max-width:calc(var(--u) * 52.8)}
 main.under-top>section.blue:not(:last-child){min-height:calc(100svh - var(--hb) - var(--u) * 1.111) !important; margin:0 calc(var(--u) * 1.111) calc(var(--u) * 1.111)}
 main.under-top>section[data-hero]{min-height:calc(100svh - var(--hb) - var(--u) * 1.111) !important; margin:0 calc(var(--u) * 1.111) calc(var(--u) * 1.111) !important}
 main.under-top>section:not([data-hero]):not(:last-child):not(.blue){min-height:calc(100svh - var(--hb)) !important}
 main.under-top>section[data-rows]:not([data-hero]):not(.endcta){padding-top:calc(var(--u) * 2.778) !important; padding-bottom:calc(var(--u) * 2.222) !important}
 main.under-top [data-rows]>div[data-reveal]{padding:calc(var(--u) * 1.528) 0 !important}
}

/* ================= round 8 (2026-09-25): banner film LOCKED on every page and every width ================= */
@media (max-width:600px){.banner .bv,[data-spot] .bv,[data-spot] video.bv{display:block !important}}
/* a little lighter at rest so the film reads as moving; the pointer light stays */
[data-spot] .shade{background:rgba(16,22,29,0.62)}
/* menu in the accent colour (Ana: option C); the current page underlined in dark blue */
nav.main a{color:var(--accent)}
nav.main a:hover,nav.main a.on{color:var(--accent-hover)}
nav.main a::after{background:var(--link)}
/* menu in spaced capitals, the same face as ADVISORY in the logo (Ana: option C) */
nav.main a{font-family:var(--fb); font-weight:600; text-transform:uppercase; letter-spacing:0.1em}
@media (min-width:1200px){nav.main a{font-size:13px; line-height:20px}}
@media (max-width:1199px){nav.main a{font-size:15px}}
@media (min-width:1440px) and (min-height:900px){nav.main a{font-size:calc(var(--u) * 0.903)}}
/* menu: light until chosen; bold on hover and on the current page. The bold width is reserved so nothing moves (Ana) */
nav.main a{font-weight:400; display:inline-flex; flex-direction:column; align-items:center}
nav.main a::before{content:attr(data-t); font-weight:600; height:0; overflow:hidden; visibility:hidden; pointer-events:none}
nav.main a:hover,nav.main a.on,nav.main a:focus-visible{font-weight:600}

/* ================= round 9 (2026-09-25): first and last home pages, same build, whole width ================= */
.hero2 .mailv{color:inherit; text-decoration:none; overflow-wrap:anywhere}
.hero2 .mailv:hover,.hero2 .mailv:focus-visible{text-decoration:underline; text-underline-offset:4px}
.hero2 .cta-fallback{flex-basis:100%}
#contact .hero2 h2.t{margin-bottom:0; padding-bottom:0; border-bottom:0}
#contact .hero2 .lead{max-width:62ch}
.hero2 .acts{margin-bottom:0 !important}

@media (min-width:901px){
 /* version C (Ana, 2026-09-25): text left, actions right, the three facts on a dark strip with an orange top line */
 .banner:has(.hero2){align-items:flex-end; padding-bottom:40px}
 .hero2{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  grid-template-areas:"h h" "l a" "s s" "f f"; column-gap:clamp(40px,5vw,96px); row-gap:var(--space-5); align-items:end}
 .hero2 .hl{display:contents}
 .hero2 .hh{grid-area:h}
 .hero2 .lead{grid-area:l; margin:0 !important}
 .hero2 .acts{grid-area:a; justify-content:flex-end; align-self:end}
 .hero2 .cta-fallback{text-align:right}
 .hero2 h1,#contact .hero2 h2.t{max-width:none}
 .hero2 .stats{grid-area:s; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--space-4);
  background:rgba(16,22,29,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:6px; border-top:3px solid var(--accent)}
 .hero2 .stat{padding:24px 32px; border-left:1px solid rgba(211,213,216,.25)}
 .hero2 .stat:first-child{border-left:0}
 .hero2 .stat .v{padding-top:8px !important; font-size:24px !important; line-height:1.2}
 .hero2 .stat p{max-width:none; margin-top:6px}
 .hero2 footer.legal{grid-area:f; padding-top:var(--space-2)}
}
@media (min-width:901px) and (max-width:1279px){
 .hero2 .stat{padding:20px 22px}
 .hero2 .stat .v{font-size:20px !important}
}
/* short screens: keep both pages inside one screen */
@media (min-width:901px) and (max-height:860px){
 .banner:has(.hero2){padding-bottom:28px}
 .hero2{row-gap:var(--space-4)}
 .hero2 .stats{margin-top:var(--space-2)}
 .hero2 .stat{padding-top:16px; padding-bottom:16px}
 .hero2 .stat p{font-size:14px; line-height:20px}
 .hero2 footer.legal{line-height:1.6}
}
@media (min-width:1440px) and (min-height:900px){
 .banner:has(.hero2){padding-bottom:calc(var(--u) * 2.778)}
 .hero2{column-gap:calc(var(--u) * 6.667); row-gap:calc(var(--u) * 1.667)}
 .hero2 .stats{margin-top:calc(var(--u) * 1.111); border-top-width:calc(var(--u) * 0.208)}
 .hero2 .stat{padding:calc(var(--u) * 1.667) calc(var(--u) * 2.222)}
 .hero2 .stat .v{padding-top:calc(var(--u) * 0.556) !important; font-size:calc(var(--u) * 1.667) !important}
 .hero2 .stat p{margin-top:calc(var(--u) * 0.417)}
 .hero2 footer.legal{padding-top:calc(var(--u) * 0.556)}
}
@media (max-width:900px){
 .hero2 .hh{margin-bottom:var(--space-4)}
 .hero2 .acts{margin-bottom:var(--space-6) !important}
 .hero2 footer.legal{margin-top:var(--space-6)}
}

/* ---------- headlines in Work Sans 400 (Ana, 2026-09-25): the five banner headlines ---------- */
/* Work Sans is wider than the old condensed serif, so sizes drop by about a fifth; "we check." is orange, not italic */
h1,section[data-hero] h1,#contact h2.t{font-family:var(--fd) !important; font-weight:400 !important; letter-spacing:-0.02em !important; line-height:1.12 !important;
 font-size:clamp(34px,3.2vw,46px) !important}
h1 em{font-style:normal !important; color:var(--accent-decorative) !important}
@media (max-width:600px){h1,section[data-hero] h1,#contact h2.t{font-size:clamp(28px,8.6vw,34px) !important}}
@media (min-width:1440px) and (min-height:900px){h1,section[data-hero] h1,#contact h2.t{font-size:calc(var(--u) * 3.194) !important}}

/* ================= round 10 (2026-09-25, Ana) ================= */
@font-face{font-family:"Work Sans";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/work-sans-400-italic.cd6e1233.woff2) format("woff2")}
:root{--k:1px}
@media (min-width:1440px) and (min-height:900px){:root{--k:calc(var(--u) / 14.4)}}

/* "we check." in italic, still orange */
h1 em{font-style:italic !important}

/* buttons: Work Sans in spaced capitals (option B) */
.cta,header.top .cta{font-family:var(--fd) !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:0.08em !important}
@media (min-width:1100px){.cta,header.top .cta{font-size:calc(14 * var(--k)) !important}}

/* ---------- section titles: same place on every page, title and text centred (option B) ---------- */
@media (min-width:901px){
 main section.screen:not(.win) .head{display:block !important; text-align:center; width:100%; margin:0 0 calc(28 * var(--k)) !important}
 main section.screen:not(.win) .head h2.t{margin:0 auto !important; max-width:none !important}
 main section.screen:not(.win) .head h2.t::before{margin-left:auto !important; margin-right:auto !important}
 main section.screen:not(.win) .head .lead{max-width:80ch !important; margin:calc(16 * var(--k)) auto 0 !important; padding:0 !important;
  text-align:justify; text-align-last:center; hyphens:auto; -webkit-hyphens:auto}
}
@media (min-width:1100px) and (min-height:760px){
 main section.screen:not(.win):not(.blue):not(.deep){padding-top:var(--hb) !important}
 main section.screen:not(.win):not(.blue):not(.deep) .inner{justify-content:flex-start !important; padding-top:calc(24 * var(--k)) !important}
 main section.screen.blue .inner{justify-content:flex-start !important; align-items:stretch !important; align-content:start !important; padding-top:calc(32 * var(--k)) !important}
 main section.screen.deep .band{align-items:stretch !important; padding-top:calc(24 * var(--k)) !important;
  padding-left:calc(clamp(24px,4vw,80px) - 16px) !important; padding-right:calc(clamp(24px,4vw,80px) - 16px) !important}
 main section.screen.deep .band .bin{justify-content:space-between; padding-bottom:calc(8 * var(--k))}
}
@media (min-width:1440px) and (min-height:900px){
 main section.screen.deep .band{padding-left:calc(var(--u) * 4.444) !important; padding-right:calc(var(--u) * 4.444) !important}
}

/* ---------- The verdict, page 1: report card in three rows ---------- */
@media (min-width:1100px) and (min-height:760px){
 #receive .head .lead{text-align:center !important;text-align-last:center !important;margin-left:auto !important;margin-right:auto !important}
#receive .inner>.grid{display:flex !important; flex:1 1 auto; align-items:center}
 #receive .vcard{width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:calc(56 * var(--k)) !important; row-gap:0 !important;
  grid-template-areas:"hdr hdr" "h3 meta" "p meta" "ol ol" "note note" !important; padding:calc(28 * var(--k)) calc(40 * var(--k)) calc(24 * var(--k)) !important}
 #receive .vcard>div:first-child{padding-bottom:calc(14 * var(--k)); border-bottom:1px solid rgba(211,213,216,.22); margin-bottom:calc(18 * var(--k))}
 #receive .vcard>h3{margin:0 0 calc(10 * var(--k)) !important; font-size:calc(24 * var(--k)) !important; line-height:1.25 !important}
 #receive .vcard>p:not(.mono){margin:0 !important; font-size:calc(15 * var(--k)) !important; line-height:1.6 !important}
 #receive .vcard>.vmeta{display:grid !important; grid-template-columns:1.35fr 1fr 1.25fr; gap:0 !important; margin:0 !important; align-self:start;
  border:1px solid rgba(211,213,216,.22); border-radius:6px}
 #receive .vcard>.vmeta>div{padding:calc(14 * var(--k)) calc(16 * var(--k)); border-left:1px solid rgba(211,213,216,.22)}
 #receive .vcard>.vmeta>div:first-child{border-left:0}
 #receive .vcard>.vmeta .l{font-size:calc(12 * var(--k)) !important}
 #receive .vcard>.vmeta .v{font-size:calc(15 * var(--k)) !important; margin-top:calc(6 * var(--k))}
 #receive .vcard>ol{width:100%; max-width:none !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(56 * var(--k));
  margin-top:calc(22 * var(--k)) !important; padding-top:calc(6 * var(--k)) !important; border-top:1px solid rgba(211,213,216,.22)}
 #receive .vcard>ol li{border-top:0 !important; border-bottom:1px solid rgba(211,213,216,.12); padding:calc(12 * var(--k)) 0 !important; font-size:calc(15 * var(--k)) !important; line-height:1.5 !important}
 #receive .vcard>ol li:first-child{padding-top:calc(12 * var(--k)) !important}
 #receive .vcard>p.mono{margin-top:calc(14 * var(--k)) !important; font-size:calc(12 * var(--k)) !important}
}

/* ---------- The verdict, page 2: twelve numbered tiles, the assets on a dark strip (V2) ---------- */
#receive-more .rv2b{display:flex; flex-direction:column; gap:calc(14 * var(--k)); flex:1 1 auto}
#receive-more .rv2b .k{font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
#receive-more .rv2b ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(12 * var(--k))}
#receive-more .rv2b ol li{background:var(--bg-surface); border-radius:6px; padding:calc(16 * var(--k)) calc(18 * var(--k)); min-height:calc(92 * var(--k));
 display:flex; flex-direction:column; gap:calc(8 * var(--k)); border-left:3px solid var(--link)}
#receive-more .rv2b ol li .n{font-family:var(--fm); font-size:calc(22 * var(--k)); color:var(--link); line-height:1}
#receive-more .rv2b ol li .t{font-size:calc(15 * var(--k)); line-height:1.35; color:var(--ink); font-weight:500}
#receive-more .strip{margin-top:calc(10 * var(--k)); background:var(--ink); border-radius:6px; padding:calc(18 * var(--k)) calc(24 * var(--k))}
#receive-more .strip .k{color:var(--accent-decorative); margin-bottom:calc(12 * var(--k))}
#receive-more .strip ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:calc(8 * var(--k))}
#receive-more .strip li{border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:calc(7 * var(--k)) calc(14 * var(--k)); font-size:calc(14 * var(--k)); line-height:1.35; color:var(--paper)}
@media (min-width:901px) and (max-width:1099px){#receive-more .rv2b ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){#receive-more .rv2b ol{grid-template-columns:repeat(2,minmax(0,1fr))} #receive-more .rv2b ol li{min-height:0}}
@media (max-width:600px){#receive-more .rv2b ol{grid-template-columns:1fr}}
@media (min-width:1100px) and (max-height:860px){#receive-more .rv2b ol li{min-height:0; padding-top:12px; padding-bottom:12px}}

/* ---------- How we check, page 1: a timeline, no white boxes on the blue (V1) ---------- */
#how .tl{display:flex; flex-direction:column; gap:calc(22 * var(--k)); margin-top:calc(8 * var(--k))}
#how .tl .ph{display:grid; grid-template-columns:5fr 3fr; gap:calc(24 * var(--k))}
#how .tl .ph>div{font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; padding-bottom:calc(10 * var(--k));
 border-bottom:2px solid rgba(255,255,255,.35); color:var(--mist)}
#how .tl .ph .pb{border-bottom-color:var(--accent-decorative); color:var(--paper)}
#how .tl ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0 calc(20 * var(--k)); position:relative}
#how .tl ol::before{content:""; position:absolute; left:0; right:0; top:calc(21 * var(--k)); height:2px;
 background:linear-gradient(90deg, rgba(255,255,255,.45) 0 61%, var(--accent-decorative) 61% 100%)}
#how .tl li{position:relative}
#how .tl li b{display:grid; place-items:center; width:calc(44 * var(--k)); height:calc(44 * var(--k)); border-radius:50%; background:var(--link); border:2px solid var(--paper);
 color:var(--paper); font-family:var(--fm); font-size:calc(15 * var(--k)); position:relative}
#how .tl li.b b{border-color:var(--accent-decorative); background:var(--accent)}
#how .tl .st{margin-top:calc(16 * var(--k)); font-family:var(--fd); font-size:calc(22 * var(--k)); line-height:1.2; color:var(--paper)}
#how .tl .sd{margin-top:calc(6 * var(--k)); font-size:calc(14 * var(--k)); line-height:1.43; color:var(--mist)}
#how .tl .fx{margin:calc(8 * var(--k)) 0 0; padding:calc(16 * var(--k)) calc(20 * var(--k)); border-left:3px solid var(--accent-decorative); background:rgba(16,22,29,.28);
 border-radius:0 6px 6px 0; font-size:calc(15 * var(--k)); line-height:1.53; color:var(--mist); text-align:justify; hyphens:auto}
#how .tl .fx span{display:block; font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin-bottom:calc(6 * var(--k))}
@media (min-width:1100px) and (min-height:760px){#how .tl{flex:1 1 auto; justify-content:space-evenly; padding-bottom:calc(12 * var(--k))}}
@media (min-width:1100px) and (max-height:860px){#how .tl{gap:14px} #how .tl .st{margin-top:10px; font-size:19px} #how .tl .sd{font-size:13px}}
/* narrower screens: the same steps, top to bottom */
@media (max-width:1099px){
 #how .tl .ph{display:none}
 #how .tl ol{grid-template-columns:1fr; gap:calc(14 * var(--k))}
 #how .tl ol::before{left:21px; right:auto; top:0; bottom:0; width:2px; height:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.45) 0 62%, var(--accent-decorative) 62% 100%)}
 #how .tl li{display:grid; grid-template-columns:44px 1fr; column-gap:16px; align-items:start}
 #how .tl li b{grid-row:span 2; width:44px; height:44px}
 #how .tl .st{margin-top:10px}
}

/* ---------- How we check, page 2: three rows with a blue number block (V1) ---------- */
#how-more{background:var(--bg-surface) !important}
#how-more .rules2{display:flex; flex-direction:column; gap:calc(16 * var(--k)); flex:1 1 auto; justify-content:center}
#how-more .rr{display:grid; grid-template-columns:calc(220 * var(--k)) minmax(0,1fr); background:#fff; border-radius:6px; overflow:hidden;
 box-shadow:0 14px 30px -24px rgba(16,22,29,.4); min-height:calc(128 * var(--k))}
#how-more .rn{background:var(--link); display:flex; align-items:center; justify-content:space-between; padding:0 calc(28 * var(--k)); color:var(--paper)}
#how-more .rn .no{font-family:var(--fm); font-size:calc(44 * var(--k)); color:var(--accent-decorative)}
#how-more .rn svg{width:calc(40 * var(--k)); height:calc(40 * var(--k)); color:var(--paper)}
#how-more .rb{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:calc(40 * var(--k)); align-items:center; padding:calc(22 * var(--k)) calc(36 * var(--k)); border-left:4px solid var(--accent)}
#how-more .rb h3{font-family:var(--fd); font-weight:400; font-size:calc(26 * var(--k)); line-height:1.23; color:var(--ink); margin:0}
#how-more .rb p{margin:0; font-size:calc(16 * var(--k)); line-height:1.56; color:var(--text-secondary)}
@media (min-width:1100px) and (max-height:860px){#how-more .rr{min-height:108px} #how-more .rb{padding-top:16px; padding-bottom:16px}}
@media (max-width:1099px){#how-more .rb{grid-template-columns:1fr; gap:8px} #how-more .rr{grid-template-columns:150px minmax(0,1fr)}}
@media (max-width:600px){
 #how-more .rr{grid-template-columns:1fr}
 #how-more .rn{padding:14px 20px}
 #how-more .rn .no{font-size:32px}
 #how-more .rb{padding:18px 20px; border-left:0; border-top:4px solid var(--accent)}
 #how-more .rb h3{font-size:22px}
}

/* ---------- fit: keep every page inside one screen with the centred titles ---------- */
@media (min-width:901px){
 main section.screen:not(.win) .head{margin-bottom:calc(20 * var(--k)) !important}
 main section.screen:not(.win) .head .lead{max-width:100ch !important; margin-top:calc(10 * var(--k)) !important}
}
@media (min-width:1100px) and (max-height:860px){
 main section.screen:not(.win) .head{margin-bottom:14px !important}
 main section.screen:not(.win) .head .lead{font-size:15px !important; line-height:22px !important; margin-top:8px !important}
 main section.screen:not(.win) h2.t::before{margin-bottom:12px !important}
 #receive .vcard{padding:16px 28px 14px !important}
 #receive .vcard>div:first-child{padding-bottom:8px; margin-bottom:10px}
 #receive .vcard>h3{font-size:19px !important; margin-bottom:6px !important}
 #receive .vcard>p:not(.mono){font-size:13.5px !important; line-height:1.5 !important}
 #receive .vcard>.vmeta>div{padding:8px 12px}
 #receive .vcard>.vmeta .v{font-size:13px !important; margin-top:3px}
 #receive .vcard>ol{margin-top:12px !important; padding-top:2px !important}
 #receive .vcard>ol li{padding:7px 0 !important; font-size:13.5px !important; line-height:1.4 !important}
 #receive .vcard>ol li:first-child{padding-top:7px !important}
 #receive .vcard>p.mono{margin-top:8px !important}
 #receive-more .rv2b{gap:10px}
 #receive-more .rv2b ol{gap:8px}
 #receive-more .rv2b ol li{padding:10px 14px; gap:5px}
 #receive-more .rv2b ol li .n{font-size:17px}
 #receive-more .rv2b ol li .t{font-size:13.5px}
 #receive-more .strip{margin-top:4px; padding:12px 18px}
 #receive-more .strip .k{margin-bottom:8px}
 #receive-more .strip li{padding:4px 10px; font-size:12.5px}
}
@media (min-width:1100px) and (max-width:1279px) and (min-height:760px){
 #receive .vcard>.vmeta{grid-template-columns:1fr !important}
 #receive .vcard>.vmeta>div{border-left:0; border-top:1px solid rgba(211,213,216,.22); display:flex; justify-content:space-between; gap:12px; align-items:baseline}
 #receive .vcard>.vmeta>div:first-child{border-top:0}
 #receive .vcard>.vmeta .v{margin-top:0}
}
@media (max-width:600px){
 #how .tl .fx{text-align:left}
 #receive-more .rv2b ol{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px}
 #receive-more .rv2b ol li{padding:12px; gap:6px}
 #receive-more .rv2b ol li .n{font-size:18px}
 #receive-more .rv2b ol li .t{font-size:13.5px}
}

/* ================= round 11 (2026-09-25, Ana) ================= */
/* 1. corners: every button, card and panel takes the top bar's rounding (8px) */
:root{--radius-sm:6px; --radius-md:8px; --r-card:8px; --r-field:8px}
.cta,.btn,header.top .cta,.card,.ff,.fb,.flip,.fin,.vcard,.accb,.acc,.tool-card,.tool-body,.tool-out,.field-input,
#receive-more .rv2b ol li,#receive-more .strip,#how .tl .fx,#how-more .rr,.hero2 .stats{border-radius:8px}
.cta,.btn{border-radius:8px !important}
.btn-primary{font-family:var(--fd) !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:0.08em !important}

/* 2. tools: title and text centred on top, the inputs on the left, the result always shown on the right */
.tool-out::before{content:"Result"; display:block; font-family:var(--fb); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--border-subtle); margin-bottom:10px} /* 2026-09-25: was accent-decorative, 3.1:1 on blue; border-subtle 7.9:1 */
:lang(pt) .tool-out::before{content:"Resultado"} :lang(es) .tool-out::before{content:"Resultado"} :lang(de) .tool-out::before{content:"Ergebnis"}
.tool-out{line-height:1.6}
.tin{display:flex; flex-direction:column; gap:calc(16 * var(--k)); min-width:0}
@media (max-width:1099px){.tool-body>.tool-out{margin-top:16px}}
@media (min-width:1100px){
 main.under-top>section[id^="tools"] .tool-card{flex-direction:column !important; align-items:stretch !important; gap:calc(28 * var(--k)) !important}
 main.under-top>section[id^="tools"] .tool-intro{flex:none !important; align-items:center; text-align:center; max-width:80ch; margin:0 auto}
 main.under-top>section[id^="tools"] .tool-intro h2::before{margin-left:auto; margin-right:auto}
 main.under-top>section[id^="tools"] .tool-intro p{text-align:justify; text-align-last:center}
 main.under-top>section[id^="tools"] .tool-body{display:grid !important; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:calc(40 * var(--k));
  align-items:stretch; min-height:0 !important; width:100%}
 main.under-top>section[id^="tools"] .tool-body>.tool-out{align-self:stretch; margin:0; padding:calc(22 * var(--k)) calc(26 * var(--k)); font-size:calc(15 * var(--k))}
}
@media (min-width:1100px) and (max-height:860px){
 main.under-top>section[id^="tools"] .tool-card{gap:16px !important}
 main.under-top>section[id^="tools"] .tool-body{padding:20px 24px !important; row-gap:10px}
 main.under-top>section[id^="tools"] .tool-body>.tool-out{padding:14px 18px; font-size:13.5px}
 main.under-top>section[id^="tools"] .tool-intro p{font-size:15px !important; line-height:23px !important}
}

/* 4. the footer bar at the bottom of the last home page */
#contact .barfoot{border-radius:var(--radius-lg); overflow:hidden; background:var(--text-primary); padding:18px 48px !important; margin-top:12px !important}
#contact .barfoot>div{gap:14px 24px !important}
@media (min-width:1100px) and (min-height:760px){
 #contact{display:flex !important; flex-direction:column}
 #contact .banner{flex:1 1 auto; min-height:0 !important}
}
@media (max-width:900px){#contact .barfoot{padding:24px 20px !important}}

/* 6. About: the team page */
.about-team .team{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:calc(24 * var(--k)); margin-top:calc(20 * var(--k))}
.about-team .person{display:grid; grid-template-columns:calc(150 * var(--k)) minmax(0,1fr); gap:calc(28 * var(--k)); align-items:center;
 background:var(--bg-page); color:var(--text-primary); border-radius:8px; padding:calc(28 * var(--k)); border-top:3px solid var(--accent)}
.about-team .person .ph{width:calc(150 * var(--k)); height:calc(150 * var(--k)); border-radius:50%; background:var(--bg-surface); color:var(--border-default); display:grid; place-items:center; overflow:hidden}
.about-team .person .ph svg{width:62%; height:62%}
.about-team .role{display:block; font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:calc(10 * var(--k))}
.about-team .person h3{margin:0 0 calc(10 * var(--k)); font-family:var(--fd); font-weight:400; font-size:calc(26 * var(--k)); line-height:1.25; color:var(--text-primary) !important}
.about-team .person p{margin:0; font-size:calc(16 * var(--k)); line-height:1.6; color:var(--text-secondary)}
.about-team .network{background:rgba(16,22,29,.28); border-left:3px solid var(--accent-decorative); border-radius:0 8px 8px 0; padding:calc(28 * var(--k)) calc(30 * var(--k)); color:var(--mist)}
.about-team .network .role{color:var(--paper)}
.about-team .network h3{margin:0 0 calc(12 * var(--k)); font-family:var(--fd); font-weight:400; font-size:calc(30 * var(--k)); line-height:1.2; color:var(--paper) !important}
.about-team .network p{margin:0 0 calc(10 * var(--k)); font-size:calc(16 * var(--k)); line-height:1.6; color:var(--border-subtle)}
.endcta .endp{margin:0; max-width:60ch; font-size:calc(17 * var(--k)); line-height:1.6; color:var(--text-secondary)}
.endcta:not(.light) .endp{color:var(--border-subtle)}
.endcta .endbtns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
@media (max-width:900px){.about-team .team{grid-template-columns:1fr} .about-team .person{grid-template-columns:96px minmax(0,1fr)} .about-team .person .ph{width:96px; height:96px}}
@media (max-width:600px){.about-team .person{grid-template-columns:1fr}}
@media (max-width:600px){.endcta .endbtns{flex-direction:column; align-items:stretch; width:100%} .endcta .endbtns .btn{white-space:normal; text-align:center; max-width:100%; height:auto; min-height:48px; line-height:1.3; padding-top:10px; padding-bottom:10px}}

/* ================= round 12 (2026-09-25, Ana) ================= */
/* 1. one footer bar on every page: full width, same height everywhere */
footer.sitefoot{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"logo links" "logo meta"; align-items:center;
 column-gap:calc(48 * var(--k)); row-gap:calc(14 * var(--k)); box-sizing:border-box; min-height:calc(140 * var(--k));
 margin:0 16px 16px; padding:calc(32 * var(--k)) calc(48 * var(--k)); border-radius:8px; background:var(--text-primary); color:var(--bg-page)}
.sitefoot .f-logo{grid-area:logo} .sitefoot .f-logo svg,.sitefoot .f-logo svg.logo-c{display:block; width:calc(180 * var(--k)) !important; max-width:none; height:auto !important}
.sitefoot .f-links{grid-area:links; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:calc(12 * var(--k)) calc(32 * var(--k));
 font-family:var(--fm); font-size:calc(12 * var(--k)); letter-spacing:.06em; text-transform:uppercase}
.sitefoot .f-links a{color:var(--border-subtle)}
.sitefoot .f-meta{grid-area:meta; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:calc(10 * var(--k)) calc(32 * var(--k));
 font-family:var(--fm); font-size:calc(12 * var(--k)); letter-spacing:.06em; color:var(--border-default)}
.sitefoot .f-langs{display:flex; gap:calc(16 * var(--k))}
.sitefoot .f-langs a{color:var(--border-default)} .sitefoot .f-langs a[aria-current]{color:var(--bg-page)}
.sitefoot .f-info a{color:var(--bg-page); text-decoration:underline; text-underline-offset:3px}
#contact{display:flex !important; flex-direction:column; align-items:stretch !important}
#contact>footer.sitefoot{margin:12px 0 0; align-self:stretch; width:auto}
@media (max-width:900px){
 footer.sitefoot{grid-template-columns:1fr; grid-template-areas:"logo" "links" "meta"; padding:28px 24px; row-gap:18px}
 .sitefoot .f-links,.sitefoot .f-meta{justify-content:flex-start}
}
@media (max-width:1099px){#contact .banner{width:auto}}

/* 3. tools (and the other inner pages): content shows at once, never waits for a scroll animation */
main.under-top [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}

/* 2. About: the founder */
.about-team .founder{display:grid; grid-template-columns:calc(170 * var(--k)) minmax(0,1.2fr) minmax(0,1fr); gap:calc(36 * var(--k)); align-items:center;
 background:var(--bg-page); color:var(--text-primary); border-radius:8px; padding:calc(36 * var(--k)); border-top:3px solid var(--accent); margin-top:calc(20 * var(--k))}
.about-team .founder .ph{width:calc(170 * var(--k)); height:calc(170 * var(--k)); border-radius:50%; background:var(--bg-surface); color:var(--border-default); display:grid; place-items:center; overflow:hidden}
.about-team .founder .ph svg{width:62%; height:62%}
.about-team .founder h3{margin:0 0 calc(12 * var(--k)); font-family:var(--fd); font-weight:400; font-size:calc(30 * var(--k)); line-height:1.2; color:var(--text-primary) !important}
.about-team .founder .fbio p{margin:0 0 calc(10 * var(--k)); font-size:calc(16 * var(--k)); line-height:1.6; color:var(--text-secondary)}
.about-team .fquote{margin:0; padding:calc(4 * var(--k)) 0 calc(4 * var(--k)) calc(24 * var(--k)); border-left:3px solid var(--accent)}
.about-team .fquote p{margin:0 0 calc(12 * var(--k)); font-family:var(--fd); font-style:italic; font-size:calc(22 * var(--k)); line-height:1.35; color:var(--link)}
.about-team .fquote cite{font-style:normal; font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
@media (max-width:1099px){.about-team .founder{grid-template-columns:120px minmax(0,1fr)} .about-team .founder .ph{width:120px; height:120px} .about-team .fquote{grid-column:1 / -1}}
@media (max-width:600px){.about-team .founder{grid-template-columns:1fr; padding:24px}}
.endcta:not(.light) .endbtns .btn-secondary{background:transparent; color:var(--bg-page); border-color:rgba(255,255,255,.7)}

/* 4. Privacy and terms: the full notice and terms, one line per clause, open to read */
.legal-full .lgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(24 * var(--k)); margin-top:calc(16 * var(--k))}
.legal-full .lcol{background:var(--bg-page); border-radius:8px; padding:calc(20 * var(--k)) calc(24 * var(--k)); border-top:3px solid var(--accent); color:var(--text-primary)}
.legal-full .lcol h3{margin:0 0 calc(8 * var(--k)); font-family:var(--fb); font-weight:600; font-size:calc(12 * var(--k)); letter-spacing:.08em; text-transform:uppercase; color:var(--accent) !important}
.legal-full details{border-top:1px solid var(--border-default)}
.legal-full summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:calc(34 * var(--k)) minmax(0,1fr) auto; align-items:center;
 padding:calc(9 * var(--k)) 0; font-size:calc(15 * var(--k)); font-weight:600; color:var(--link)}
.legal-full summary::-webkit-details-marker{display:none}
.legal-full summary::after{content:"+"; font-family:var(--fm); color:var(--accent); font-weight:600}
.legal-full details[open] summary::after{content:"-"}
.legal-full summary .n{font-family:var(--fm); font-size:calc(12 * var(--k)); color:var(--accent); font-weight:500}
.legal-full details p{margin:0 0 calc(12 * var(--k)) calc(34 * var(--k)); font-size:calc(14.5 * var(--k)); line-height:1.6; color:var(--text-secondary)}
@media (min-width:1100px) and (min-height:760px){.legal-full .lcol{max-height:calc(100svh - var(--hb) - calc(170 * var(--k))); overflow:auto}}
@media (min-width:1100px) and (max-height:860px){.legal-full summary{padding:6px 0; font-size:14px}}
@media (max-width:900px){.legal-full .lgrid{grid-template-columns:1fr}}
/* ---------- round 14 (2026-09-29, Ana) ---------- */
/* 1. Inner-page top banners (Tools, About, Careers, Privacy and terms, Contact): no film. Ink ground (text-primary, the ink value) with the
      brand pattern (blue blocks in link, the blue value) (blue blocks, the accent bar of the logo, a measured dot grid) and a call to action.
      The film stays on the first and last home pages only (Ana, 2026-09-29). */
section[data-hero].plainhero { background:var(--text-primary) !important }
section[data-hero].plainhero>.hpat { position:absolute; top:0; right:0; width:min(46%, 860px); height:52%; pointer-events:none; z-index:0 }
.hpat .pd { fill:var(--link) }
.hpat .pa { fill:var(--accent) }
.hpat .pt2 { fill:var(--accent-decorative) }
section[data-hero].plainhero>div[style*="z-index:2"] { width:100% }
.herocta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px }

/* 3. Tools banner: one button per tool, so every tool is one click away */
.toolnav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; width:100%; max-width:1180px; margin-top:4px }
.toolnav a { display:flex; align-items:center; gap:12px; min-height:56px; box-sizing:border-box; padding:10px 16px;
 border:1px solid var(--border-default); border-radius:var(--radius-md); background:transparent; color:var(--bg-page);
 font-family:var(--fb); font-weight:600; font-size:15px; line-height:1.3; text-decoration:none; transition:background 150ms ease, border-color 150ms ease }
.toolnav a:hover { background:var(--link); border-color:var(--border-subtle) }
.toolnav .n { font-family:var(--fm); font-weight:500; font-size:12px; letter-spacing:0.06em; color:var(--accent-decorative); flex:none }
@media (max-width:1099px){.toolnav { grid-template-columns:repeat(2,minmax(0,1fr)) }}
@media (max-width:520px){.toolnav { grid-template-columns:minmax(0,1fr) } .toolnav a { min-height:48px }}
@media (max-width:900px){section[data-hero].plainhero>.hpat { width:100%; height:34% }}
@media (max-width:600px){section[data-hero].plainhero { padding-top:156px !important }
 section[data-hero].plainhero>.hpat { height:132px }}
@media (min-width:1440px) and (min-height:900px){
 .toolnav { gap:calc(12 * var(--k)); max-width:calc(1180 * var(--k)) }
 .toolnav a { min-height:calc(56 * var(--k)); font-size:calc(15 * var(--k)); padding:calc(10 * var(--k)) calc(16 * var(--k)); gap:calc(12 * var(--k)) }
 .toolnav .n { font-size:calc(12 * var(--k)) }
 .herocta { gap:calc(12 * var(--k)) }
}

/* 1b. Tools: every tool fits one screen, so one scroll moves exactly one tool (tools 3 and 4 ran past the screen) */
@media (min-width:1100px) and (min-height:760px){
 main.under-top>section[id^="tools"]:not([data-hero]) { padding-top:calc(20 * var(--k)) !important; padding-bottom:calc(20 * var(--k)) !important }
 main.under-top>section[id^="tools"] .tool-card { gap:calc(18 * var(--k)) !important }
 main.under-top>section[id^="tools"] .tool-intro { gap:calc(10 * var(--k)) !important }
 main.under-top>section[id^="tools"] .tool-body { padding:calc(24 * var(--k)) calc(36 * var(--k)) !important }
 main.under-top>section[id^="tools"] .tin { gap:calc(10 * var(--k)) !important }
 main.under-top>section[id^="tools"] .tin label { gap:calc(6 * var(--k)) !important }
 main.under-top>section[id^="tools"] .field-input { min-height:44px !important; height:auto }
 main.under-top>section#tools-4 .tin>div:first-child { gap:calc(7 * var(--k)) !important }
 main.under-top>section#tools-4>p[data-reveal] { margin-top:calc(14 * var(--k)) !important }
}

/* 4. A call to action on every section: one call button that follows the reader and changes its words
      with the section; it steps aside where the section already shows a call button, and over the footer */
.callfab { position:fixed; right:calc(16px + 24px); bottom:20px; z-index:80; display:inline-flex; align-items:center; gap:10px;
 min-height:48px; max-width:calc(100vw - 80px); box-sizing:border-box; padding:0 20px; border-radius:var(--radius-md);
 background:var(--accent); color:var(--bg-page); font-family:var(--fd); font-weight:400; font-size:14px; line-height:1.2;
 letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; box-shadow:var(--shadow-2);
 transition:opacity 150ms ease, visibility 150ms, background 150ms ease }
.callfab:hover { background:var(--accent-hover); color:var(--bg-page) }
.callfab:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.callfab .cf-i { flex:none; width:18px; height:18px }
.callfab.off { opacity:0; visibility:hidden; pointer-events:none }
@media (max-width:600px){.callfab { left:12px; right:12px; bottom:12px; max-width:none; justify-content:center; text-align:center }}
@media (min-width:1440px) and (min-height:900px){
 .callfab { right:calc(40 * var(--k)); bottom:calc(20 * var(--k)); min-height:calc(48 * var(--k)); font-size:calc(14 * var(--k)); padding:0 calc(20 * var(--k)); gap:calc(10 * var(--k)) }
 .callfab .cf-i { width:calc(18 * var(--k)); height:calc(18 * var(--k)) }
}
@media (prefers-reduced-motion: reduce){.callfab { transition:none }}
/* Contact page: e-mail as the first row title */
[data-rows] h3 a { color:inherit; text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere }
.endcta .endfb { font-size:15px }
.endcta .endfb a { color:var(--bg-page); text-decoration:underline; text-underline-offset:3px }
@media (min-width:1100px) and (min-height:760px) and (max-height:820px){
 main.under-top>section#tools-4 .tool-body { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) !important }
 main.under-top>section#tools-4 .tin label { font-size:13px !important; line-height:1.4 !important }
 main.under-top>section[id^="tools"] .tool-intro p { font-size:14px !important; line-height:21px !important }
}
@media (min-width:1100px) and (max-width:1279px) and (min-height:760px) and (max-height:820px){
 main.under-top>section[id^="tools"] .tool-card { gap:12px !important }
 main.under-top>section[id^="tools"] .tool-body { padding:18px 24px !important }
 main.under-top>section#tools-4 .tin label { font-size:12.5px !important; line-height:1.35 !important }
 main.under-top>section#tools-4 .tin>div:first-child { gap:5px !important }
 main.under-top>section#tools-4>p[data-reveal] { margin-top:10px !important; line-height:1.5 !important }
}
/* desktop: the call button sits under the top bar on the right, beside the centred section titles, where no screen has content */
@media (min-width:1100px) and (min-height:760px){
 .callfab { top:calc(var(--hb) + 20px); bottom:auto }
}
@media (min-width:1440px) and (min-height:900px){
 .callfab { top:calc(var(--hb) + 20 * var(--k)); bottom:auto }
}
@media (min-width:1100px) and (max-width:1279px){
 .callfab { max-width:270px; right:32px; padding:8px 16px; font-size:12px; line-height:1.35; letter-spacing:0.06em }
}
section[data-hero].plainhero>div[style*="z-index:2"] { min-width:0; max-width:100% }
@media (max-width:600px){
 .herocta { width:100% }
 .herocta .btn { white-space:normal; text-align:center; max-width:100%; height:auto; min-height:48px; line-height:1.3; padding-top:10px; padding-bottom:10px }
 section[data-hero].plainhero h1 { overflow-wrap:break-word }
}