@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

/* ═══════════════════════════════════════════════════════════════
   IHERO Foundation — tokens
   Same family system as IHERO Media v3, IHERO Desk and IHERO Growth (this file
   started as Growth's): cool paper, navy ink (the logo's colour), white cards.
   The accent is not fixed: build/foundation.css points --acc* at the colour set of the programme
   the visitor picked (html[data-pick]), Future Heroes blue by default. These values are the fallback.
     --acc / --acc-large  the programme colour (>= 4.5:1 on paper)
     --acc-ink            small text in that colour
     --acc-bright         text and marks on the night bands
   build/make.py prepends the @font-face block; edit this file, not public/css/site.css.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --paper:#F3F5F7;
  --paper-2:#E7EBEF;
  --card:#FFFFFF;
  --ink:#111828;
  --ink-2:#3A4356;
  --muted:#5A6376;
  --line:#D6DBE3;
  --acc:#1F5FCC;
  --acc-large:#1F5FCC;
  --acc-ink:#1A4FAB;
  --acc-bright:#8DB2FF;
  --acc-tint:#E3ECFB;
  --fh:#1F5FCC; --fh-t:#E3ECFB;
  --sp:#0B7A53; --sp-t:#DDF1E8;
  --an:#AD4F17; --an-t:#F8E6DA;
  --ua:#0057B7; --ua-y:#FFD500; --ua-t:#FFF6CC;
  --night:#0B0F1A;
  --night-2:#151C2C;
  --night-line:#252E42;
  --on-night:#EEF0F5;
  --on-night-2:#A3ACBF;

  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1.02rem,.97rem + .25vw,1.16rem);
  --step-1:clamp(1.2rem,1.08rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.25rem + 1.1vw,2.2rem);
  --step-3:clamp(2rem,1.5rem + 2.3vw,3.4rem);

  --r-s:10px; --r-m:16px; --r-l:24px;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:720;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.015em;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:500 .74rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.sec{padding-block:clamp(3.75rem,7vw,6rem)}   /* owner flags gaps over ~200px on a ~1890x818 screen */
.sec-head{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p:not(.eyebrow){color:var(--ink-2);font-size:var(--step-1);line-height:1.45;max-width:54ch}
/* Wide screens: heading left, lede right, so no narrow column sits alone */
@media (min-width:980px){
  .sec-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,72px);align-items:end}
  .sec-head--split .eyebrow{grid-column:1/-1}
  .sec-head--split h2{align-self:start}
}
/* Keyword underline on every section heading: the family's move (IHERO Media v3, IHERO Desk), in green */
h1 em,h2 em{font-style:normal;background:var(--u4) 0 94%/100% .12em no-repeat;padding-bottom:.02em;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.reveal-on [data-reveal] h2 em,.reveal-on h2[data-reveal] em{transition:background-size 1s var(--ease) calc(var(--d,0s) + .35s)}
.reveal-on [data-reveal]:not(.in) h2 em,.reveal-on h2[data-reveal]:not(.in) em{background-size:0% .12em}
/* controls that only work with the script are not shown without it */
html:not(.js) .needs-js{display:none!important}
/* and the plain version they replace is not shown with it */
html.js .no-js{display:none!important}
/* hidden means hidden, whatever display a class gives the element */
[hidden]{display:none!important}
.tag{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 9px;white-space:nowrap}

/* Reveal: only when JS is on and motion is allowed (html.reveal-on) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal-on [data-reveal].in{opacity:1;transform:none}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{--bg:var(--ink);--fg:var(--paper);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--bg);color:var(--fg);font:600 1.02rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc-ink);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(17,24,40,.55)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:var(--acc-bright);animation:ping 2.4s var(--ease) infinite;flex:none}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--light{--bg:var(--paper);--fg:var(--ink)}
.btn--light::after{background:var(--acc-bright)}
.btn--light .dot{background:var(--acc)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{color:var(--paper)}
.btn--ghost::after{background:var(--ink)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1.5px}
.link .arr{transition:transform .35s var(--ease)}
.link:hover .arr{transform:translateX(3px)}
.friction{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 .8rem/1.4 var(--mono);color:var(--muted)}
.friction span{display:inline-flex;align-items:center;gap:6px}
.friction span::before{content:"";width:12px;height:1.5px;background:currentColor;opacity:.5}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc-bright) 55%,transparent)}70%,100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc-bright) 0%,transparent)}}

/* "Your turn": the shared way an example becomes interactive (same pattern as IHERO Desk) */
.try{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.try-l{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-right:4px}
.try-l i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:ping 2.4s var(--ease) infinite}
.try-b{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 .9rem/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.try-b svg{width:16px;height:16px;flex:none}
.try-b:hover{border-color:var(--ink);transform:translateY(-1px)}
.try-b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.night .try-l{color:var(--on-night-2)}
.night .try-b{background:transparent;border-color:var(--night-line);color:var(--on-night)}
.night .try-b:hover{border-color:var(--on-night-2)}
.night .try-b[aria-pressed="true"]{background:var(--on-night);border-color:var(--on-night);color:var(--night)}

/* ── Header ──────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background .35s,box-shadow .35s,transform .45s var(--ease)}
.hdr.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* The lockup is the same everywhere: white shield, green eyes, white name, on dark.
   On a light ground it brings its own dark plate (.brand--plate); on night it sits bare. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;color:#fff}
.brand svg{width:20px;flex:none;transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-6deg) scale(1.06)}
.brand b{font:700 1.06rem/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.brand--plate{padding:0 16px 0 13px;border-radius:12px;background:var(--ink);box-shadow:0 10px 22px -16px rgba(17,24,40,.7);transition:background .25s}
.brand--plate:hover{background:var(--night)}
.nav{display:flex;align-items:center;gap:6px}
.nav a:not(.btn){font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 12px;border-radius:999px;color:var(--ink-2);transition:color .2s,background .2s}
.nav a:not(.btn):hover{color:var(--ink);background:var(--paper-2)}
.nav .btn{min-height:44px;padding:0 18px 0 14px;font-size:.95rem;margin-left:8px}
@media (max-width:900px){.nav a:not(.btn){display:none}}
@media (max-width:460px){.nav .btn .lbl-long{display:none}}
@media (min-width:461px){.nav .btn .lbl-short{display:none}}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(16px,2vw,24px) clamp(44px,5vw,68px);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 62% at 72% 46%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 62% at 72% 46%,#000 20%,transparent 75%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero-copy{display:grid;gap:20px;justify-items:start;container-type:inline-size}
/* Sized to its column so the two lines always stay two (widest line measured at 7.4em) */
.hero h1{font-size:clamp(2.3rem,12.4cqi,4.9rem);line-height:.98;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero-lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);max-width:44ch;text-wrap:balance}
.reveal-on .hero h1 span{opacity:0;transform:translateY(.35em);animation:rise .9s var(--ease) forwards}
.reveal-on .hero h1 span:nth-child(2){animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}

/* Three promises as tabs. The chosen one is spelled out underneath: radios and :has(), no script.
   All three sentences share one grid cell, so switching never moves the button below. */
.ticks{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px;justify-self:stretch}
.ticks-row{display:flex;flex-wrap:wrap;gap:8px}
.ticks label{position:relative;cursor:pointer}
.ticks input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.ticks label span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.93rem;line-height:1.2;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.ticks label svg{width:16px;height:16px;color:var(--acc-large);flex:none;transition:color .25s}
.ticks label:hover span{border-color:var(--ink);transform:translateY(-1px)}
.ticks input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ticks input:checked+span svg{color:var(--acc-bright)}
.ticks input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.tick-says{display:none}
@supports selector(:has(*)){
  .tick-says{display:grid;max-width:48ch}
  .tick-says p{grid-area:1/1;font-size:.97rem;line-height:1.45;color:var(--ink-2);padding-left:13px;border-left:2px solid var(--acc);visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .ticks:has(label:nth-child(1) input:checked) .tick-says p:nth-child(1),
  .ticks:has(label:nth-child(2) input:checked) .tick-says p:nth-child(2),
  .ticks:has(label:nth-child(3) input:checked) .tick-says p:nth-child(3){visibility:visible;opacity:1;transform:none}
}

/* "Works with": plain chips without the script; with it they are buttons that light up the board */
.works{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.works b{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.works span,.works button{display:inline-flex;align-items:center;gap:7px;font:600 .88rem/1 var(--body);color:var(--ink-2);min-height:32px;padding:0 11px 0 9px;border-radius:999px;background:var(--paper-2);border:1.5px solid transparent}
.works svg{width:15px;height:15px;flex:none}
.works button{cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.works button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.works button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* The stage: business picker, the board, "your turn". A soft green light sits behind the board. */
.hero-stage{position:relative;display:grid;gap:10px;min-width:0}
.hero-stage::before{content:"";position:absolute;inset:14% -5% 8%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 22%,transparent),transparent);filter:blur(34px);pointer-events:none}
.hbiz{display:grid;gap:9px}
/* five chips stay on one row beside the copy, even when the fifth is a long name picked further down */
.hbiz-row{display:flex;flex-wrap:wrap;gap:5px}
.hbiz .try-b{min-height:36px;padding:0 11px 0 9px;font-size:.86rem;gap:6px;white-space:nowrap}

/* The board: one week of enquiries moving from first message to booked. Resting state = the
   finished week (no script, reduced motion, screenshots); js/site.js replays it from Monday. */
.board{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 30px 60px -38px rgba(17,24,40,.45),0 2px 0 rgba(255,255,255,.6) inset;overflow:hidden}
.bd-top{display:flex;align-items:center;gap:12px;padding:9px 14px 9px 16px;border-bottom:1px solid var(--line)}
.bd-dots{display:flex;gap:5px}
.bd-dots i{width:9px;height:9px;border-radius:50%;background:var(--paper-2)}
.bd-top b{font:600 .95rem/1 var(--display);letter-spacing:-.01em}
.bd-day{font:500 .72rem/1 var(--mono);color:var(--muted);letter-spacing:.06em;margin-right:auto}
.bd-play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink);transition:background .2s,border-color .2s}
.bd-play:hover{border-color:var(--ink);background:var(--paper)}
.bd-play svg{width:11px;height:11px;fill:currentColor}
.bd-play[data-on="1"] .i-play,.bd-play[data-on="0"] .i-pause{display:none}
/* The seven days: a bar per day that fills as the week plays; each is a button that jumps there */
.bd-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:9px 14px 0}
.bd-days button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;padding-bottom:7px;text-align:center;font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-radius:6px;transition:color .2s}
.bd-days button::before{content:"";height:4px;border-radius:99px;background:var(--paper-2);transition:background .35s}
.bd-days button:hover{color:var(--ink)}
.bd-days button:hover::before{background:var(--line)}
.bd-days button.done::before{background:var(--ink)}
.bd-days button[aria-current]{color:var(--ink)}
.bd-days button[aria-current]::before{background:var(--acc)}
.bd-days button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-top:2px}
.bd-top+.bd-kpis{border-top:0;margin-top:0}
.bd-kpis div{padding:9px 14px 9px;border-left:1px solid var(--line);min-width:0}
.bd-kpis div:first-child{border-left:0}
.bd-kpis small{display:block;font:500 .64rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bd-kpis b{display:block;margin-top:6px;font:720 clamp(1.2rem,.9rem + .7vw,1.45rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bd-kpis .won p{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.bd-kpis .won b{color:var(--acc-large);margin:0}
.bd-kpis .won em{font:500 .7rem/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.bd-kpis b.tick{animation:tick .6s var(--ease)}
@keyframes tick{0%{transform:translateY(5px);opacity:.3}100%{transform:none;opacity:1}}
/* Three lanes, drawn like a pipeline board: cards sit straight on the ground under their heading with no
   box around a lane, so a lane that is still filling is only space. Booked alone is tinted: it is where they
   end up. A card has one height (--ld-h) and a lane has room for three, so the board never changes height. */
.board{container:board/inline-size}
.bd-cols{--ld-h:90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px 6px;background:var(--paper)}
.bd-col{min-width:0;padding:6px 6px 7px;border-radius:14px}
.bd-col--won{background:color-mix(in srgb,var(--acc-tint) 62%,transparent)}
.bd-h span{margin-right:auto}
/* what the bookings are worth, like a column total */
.bd-sum{font:600 .7rem/1 var(--mono);font-style:normal;letter-spacing:0;color:var(--acc-ink)}
.bd-sum.tick{animation:tick .6s var(--ease)}
.bd-h{display:flex;align-items:center;gap:8px;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 3px 8px}
.bd-col+.bd-col .bd-h span::before{content:"→";margin-right:7px;color:#9AA4B5;letter-spacing:0}
.bd-h i{font-style:normal;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:.68rem;letter-spacing:0}
.bd-col--won .bd-h i{background:var(--acc-tint);border-color:transparent;color:var(--acc-ink)}
.bd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start;min-height:calc(var(--ld-h)*3 + 12px);border-radius:10px}
/* an empty lane says so in a seat the size of a card; the first card then takes it */
.bd-col ul:empty::after{content:attr(data-empty);box-sizing:border-box;height:var(--ld-h);display:grid;place-items:center;border:1.5px dashed var(--line);border-radius:10px;font:400 .66rem/1.4 var(--mono);color:var(--muted);text-align:center;padding:0 8px}
.bd-col--won ul:empty::after{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--acc-ink)}
.ld{box-sizing:border-box;height:var(--ld-h);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 9px;display:grid;gap:1px;align-content:start;min-width:0;overflow:hidden;box-shadow:0 1px 0 rgba(17,24,40,.04);transition:opacity .3s,border-color .3s,box-shadow .3s}
.ld b,.ld small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld .src{font:500 .6rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:2px;min-width:0}
.ld .src svg{width:11px;height:11px;flex:none;color:var(--ink-2)}
.ld b{font:600 .95rem/1.15 var(--body)}
.ld small{font-size:.8rem;line-height:1.25;color:var(--muted)}
.ld em{font:500 .62rem/1.25 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--ink-2);margin-top:4px;padding:3px 6px;border-radius:7px;background:var(--paper-2);justify-self:start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-col--won .ld{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.bd-col--won .ld em{background:var(--acc-tint);color:var(--acc-ink)}
.bd-col--won .ld .src svg{color:var(--acc-large)}
.ld.pop{animation:pop .55s var(--ease)}
@keyframes pop{0%{opacity:0;transform:translateY(-10px) scale(.96)}100%{opacity:1;transform:none}}
/* a "works with" chip is pressed: its people stand out, the rest step back */
.board.hl .ld:not(.hi){opacity:.36}
.board.hl .ld.hi{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
/* the visitor's own test enquiry */
.ld--you{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ld--you .src,.ld--you small{color:var(--on-night-2)}
.ld--you .src svg{color:var(--acc-bright)}
.ld--you em,.bd-col--won .ld--you em{background:color-mix(in srgb,var(--acc-bright) 18%,transparent);color:var(--acc-bright)}
.bd-col--won .ld--you{border-color:var(--ink)}
.bd-log{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font:400 .8rem/1.35 var(--mono);color:var(--ink-2);min-height:42px}
.bd-log i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none;animation:ping 2.4s var(--ease) infinite}
/* Your turn: the visitor's name goes through the board */
.bd-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:7px 8px 7px 14px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line)}
.bd-try input{flex:1 1 130px;min-width:0;height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);transition:border-color .2s}
.bd-try input::placeholder{color:var(--muted)}
.bd-try input:hover{border-color:var(--ink-2)}
.bd-try input:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-color:var(--ink)}
.bd-try .try-b{border-color:var(--ink)}
.bd-try .try-b:hover{background:var(--ink);color:var(--paper)}
.bd-note{font:400 .76rem/1.4 var(--mono);color:var(--muted);text-align:center}
/* a narrow board beside the copy (small laptops): a chip may take two lines, so a card is 90 or 102px
   tall and the lane keeps room for three of the taller kind */
@container board (max-width:524px){
  .bd-cols{--ld-h:102px}
  .bd-h{letter-spacing:.06em;gap:5px}
  .bd-col+.bd-col .bd-h span::before{display:none}
  .ld{height:auto}
  .ld em{white-space:normal}
}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,12cqi,4.4rem)}
}
@media (max-width:560px){
  .bd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-kpis div:nth-child(3){border-left:0}
  .bd-kpis div:nth-child(n+3){border-top:1px solid var(--line)}
  /* phone: no second line on a card, and a chip may take two lines, so a card is as tall as it needs
     (70 or 82px) and the lane keeps room for three of the taller kind */
  .bd-cols{--ld-h:82px}
  .bd-log{min-height:55px}
  .bd-cols{gap:2px;padding:6px 4px}
  .bd-col{padding:4px 3px 5px;border-radius:11px}
  .bd-h{font-size:.56rem;letter-spacing:.04em;padding-inline:2px;gap:4px}
  .bd-col+.bd-col .bd-h span::before{display:none}
  .bd-sum{font-size:.58rem}
  .bd-col ul{gap:5px;min-height:calc(var(--ld-h)*3 + 10px)}
  .ld small{display:none}
  .ld{height:auto;padding:7px 7px 8px;border-radius:8px}
  .ld em{white-space:normal}
  .ld b{font-size:.86rem}.ld small{font-size:.74rem}
  .ld .src{font-size:.52rem;letter-spacing:.02em;gap:4px}
  .ld em{font-size:.56rem;padding:4px 5px}
  .bd-days button{font-size:.56rem;letter-spacing:.02em}
  .bd-try{padding:10px}
  .bd-try .try-l{flex-basis:100%}
  .bd-try .try-b{flex:1 1 auto;justify-content:center}
}

/* cards can be pressed for their story; a booking flashes its lane */
.ld[data-li]{cursor:pointer}
.ld[data-li]:hover{border-color:var(--ink)}
.ld:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bd-col ul.flash{animation:laneflash .8s var(--ease)}
@keyframes laneflash{0%{box-shadow:0 0 0 4px var(--acc)}100%{box-shadow:0 0 0 4px transparent}}

/* ── Calculator (night band) ─────────────────────────────── */
.night{background:var(--night);color:var(--on-night)}
.night .eyebrow{color:var(--on-night-2)}.night .eyebrow::before{background:var(--acc-bright)}
.night .sec-head p:not(.eyebrow){color:var(--on-night-2)}
.night h2 em{background-image:linear-gradient(90deg,var(--acc-bright),#FFE08A)}
.night :focus-visible{outline-color:var(--acc-bright)}
.calc{display:grid;gap:18px}
@media (min-width:980px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.calc-in,.calc-out{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,30px)}
.calc-in{display:grid;gap:20px;align-content:start}
.fld{display:grid;gap:9px}
.fld-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fld label,.fld legend{font-weight:600;font-size:1rem;padding:0}
.fld output{font:500 1.05rem/1 var(--mono);color:var(--acc-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.fld small{font-size:.84rem;line-height:1.35;color:var(--on-night-2)}
.fld fieldset{border:0;margin:0;padding:0;display:grid;gap:9px;min-width:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--acc-bright) var(--p,50%),var(--night-line) var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--night-line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--acc-bright)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--on-night);border:0;margin-top:-9px;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--on-night);border:0;box-shadow:0 2px 10px rgba(0,0,0,.5)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--acc-bright)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--acc-bright)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pills span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--night-line);font:600 .9rem/1 var(--body);color:var(--on-night);transition:background .2s,border-color .2s,color .2s}
.pills label:hover span{border-color:var(--on-night-2)}
.pills input:checked+span{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
.pills input:focus-visible+span{outline:2px solid var(--acc-bright);outline-offset:3px}
.calc-out{display:grid;gap:18px;align-content:start;background:radial-gradient(34rem 20rem at 100% 0%,color-mix(in srgb,var(--acc-bright) 13%,transparent),transparent 70%),var(--night-2)}
.calc-k{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.calc-big{font:720 clamp(2.8rem,2rem + 3.6vw,4.8rem)/.95 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--acc-bright)}
.calc-big.neg{color:var(--on-night)}
.calc-line{color:var(--on-night-2);max-width:46ch}
.calc-line b{color:var(--on-night)}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.flow div{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:14px;padding:12px 12px 13px;min-width:0}
.flow small{display:block;font:500 .62rem/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.flow b{display:block;margin-top:7px;font:720 clamp(1.2rem,1rem + 1vw,1.7rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vs{display:grid;gap:9px}
.vs li{display:grid;grid-template-columns:minmax(0,7.4em) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.9rem;color:var(--on-night-2)}
.vs i{display:block;height:12px;border-radius:999px;background:var(--night-line);overflow:hidden;position:relative}
.vs i::after{content:"";position:absolute;inset:0;width:calc(var(--v,0)*1%);border-radius:inherit;background:var(--on-night-2);transition:width .5s var(--ease)}
.vs li.sales i::after{background:var(--acc-bright)}
.vs b{font:500 .86rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums;min-width:4.6em;text-align:right}
.calc-fine{font-size:.84rem;line-height:1.45;color:var(--on-night-2);border-top:1px solid var(--night-line);padding-top:14px}
html:not(.js) .calc-wrap{display:none}
html:not(.js) .calc-nojs{display:block}
.calc-nojs{display:none;color:var(--on-night-2);max-width:60ch}

/* ── The family ──────────────────────────────────────────── */
/* Three cards, each with a picture of the real site, joined by two round arrows. A card lights
   (.on) when the story below is at its step; .start marks where the visitor should begin. */
.fam{display:grid;gap:0;position:relative}
@media (min-width:900px){.fam{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:stretch}}
.fam-c{--b:var(--ink);position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 16px 20px;display:flex;flex-direction:column;gap:11px;min-width:0;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fam-c--media{--b:linear-gradient(90deg,#D400F5,#6D28D9 55%,#2E9BFF)}
.fam-c--desk{--b:#FF5A1F}
.fam-c.me{--b:var(--acc-bright);background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fam-c::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--b)}
a.fam-c:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(17,24,40,.45)}
.fam-c.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 24px 44px -30px rgba(17,24,40,.5);transform:translateY(-4px)}
.fam-c.me.on{box-shadow:0 0 0 2px var(--acc-bright),0 24px 44px -30px rgba(17,24,40,.6)}
.fam-c.start{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.fam-k{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fam-c.me .fam-k{color:var(--on-night-2)}
.fam-tag{font-style:normal;letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:var(--acc-bright);color:var(--night)}
.fam-tag:empty{display:none}
/* the site itself, in a small browser frame */
.fam-shot{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
/* where the customer of the story is right now: a small tag on the card of whoever is looking after them */
.fam-who{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:5px 12px 5px 5px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 8px 20px -8px rgba(17,24,40,.55),0 0 0 1px rgba(17,24,40,.08);font:600 .84rem/1.2 var(--body);animation:pop .5s var(--ease)}
.fam-who i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--night);font:700 .78rem/1 var(--display);font-style:normal}
.fam-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-c.me .fam-shot{border-color:var(--night-line)}
.fam-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--paper-2)}
.fam-c.me .fam-bar{background:var(--night-2)}
.fam-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.fam-c.me .fam-bar i{background:var(--night-line)}
.fam-bar b{margin-left:6px;font:400 .68rem/1 var(--mono);color:var(--muted)}
.fam-c.me .fam-bar b{color:var(--on-night-2)}
.fam-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
a.fam-c:hover .fam-shot img,.fam-c.on .fam-shot img{transform:scale(1.04)}
.fam-c .fam-v{font:720 var(--step-2)/1 var(--display);letter-spacing:-.025em;margin-top:4px}
.fam-c.me .fam-v{color:var(--acc-bright)}
.fam-c h3{font-size:1.12rem;display:flex;align-items:center;gap:9px}
.fam-c h3 svg,.fam-c h3 img{width:17px;height:auto;flex:none}
.fam-c p:not([class]){font-size:.96rem;line-height:1.45;color:var(--ink-2)}
.fam-c.me p:not([class]){color:var(--on-night-2)}
.fam-c ul{display:flex;flex-wrap:wrap;gap:6px}
.fam-c ul li{font-size:.8rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--paper)}
.fam-c.me ul li{background:rgba(255,255,255,.08);color:var(--on-night)}
.fam-go{margin-top:auto;padding-top:4px;font:500 .78rem/1 var(--mono);color:var(--ink);display:inline-flex;align-items:center;gap:7px;min-height:24px;align-self:flex-start;text-decoration:none}
.fam-c.me .fam-go{color:var(--on-night)}
a.fam-go:hover{text-decoration:underline;text-underline-offset:3px}
/* the hand-over between two cards. The second one turns round when the work goes back. */
.fam-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink);font:500 1rem/1 var(--body);z-index:2;justify-self:center;margin-block:-9px;rotate:90deg;transition:background .3s,color .3s,rotate .45s var(--ease),scale .3s var(--ease)}
@media (min-width:900px){.fam-arrow{align-self:center;margin:0 -6px;rotate:0deg}.fam-arrow.back{rotate:180deg}}
.fam-arrow.hot{background:var(--ink);color:var(--paper);scale:1.15}
/* the story: one customer, six steps, each belonging to one of the three */
.fam-story{margin-top:16px;display:grid;gap:10px;padding:14px 18px 16px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
.fs-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fs-k{margin-left:auto;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-ink)}
.fs-nav{display:flex;gap:6px}
.fs-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:.95rem;color:var(--ink);transition:border-color .2s,background .2s,opacity .2s}
.fs-nav button:hover{border-color:var(--ink);background:var(--paper)}
.fs-nav button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fs-nav button[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--line);background:var(--card)}
/* the journey: six numbered stops on one line. The line and the stops fill in as the story moves;
   the stop it is on takes the colour of the service doing the work. */
.fs-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:6px 0 4px}
.fs-track li{position:relative;min-width:0}
.fs-track li+li::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--line);transition:background .35s}
.fs-track li.done::before,.fs-track li.cur::before{background:var(--ink)}
.fs-track button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;width:100%;display:grid;justify-items:center;gap:4px;padding:0 6px 4px;text-align:center;border-radius:12px}
.fs-track button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fs-track [data-who="media"]{--c:#7C3AED;--t:#fff}
.fs-track [data-who="growth"]{--c:var(--acc);--t:var(--night)}
.fs-track [data-who="desk"]{--c:#FF5A1F;--t:var(--night)}
.fs-track i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);font:600 .8rem/1 var(--mono);font-style:normal;color:var(--muted);margin-bottom:4px;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.fs-track b{font:600 .88rem/1.25 var(--body);color:var(--ink-2);transition:color .3s}
.fs-track small{display:inline-flex;align-items:center;gap:6px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fs-track small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.fs-track button:hover i{border-color:var(--ink);color:var(--ink)}
.fs-track li.done i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fs-track li.cur i{background:var(--c);border-color:var(--c);color:var(--t);transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.fs-track li.cur b{color:var(--ink)}
@media (max-width:760px){
  /* a phone has room for the six numbers; the name of the stop it is on is said above the sentence */
  .fs-track b,.fs-track small{display:none}
  .fs-track button{padding-bottom:0}
  .fs-top .try-l{flex-basis:100%;order:-1;margin:0}
  .fs-k{margin-left:0;flex:1 1 0;min-width:0;line-height:1.4}
}
.fs-say{font-size:var(--step-1);line-height:1.35;color:var(--ink-2);min-height:1.35em}
@media (max-width:1100px){.fs-say{min-height:4.05em}}
.fs-say b{color:var(--ink);font-weight:700}
/* "where are you today?": which of the three to start with. It sits above the cards, so the card it
   marks is in view when the answer comes. */
.fam-pick{margin-bottom:16px;display:grid;gap:10px;padding:14px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);transition:border-color .35s,box-shadow .35s}
.fam-pick.answered{border-color:var(--acc);box-shadow:0 0 0 1.5px var(--acc)}
.fp-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.fp-q .try{gap:6px}
.fp-q .try-b{min-height:38px;padding:0 13px;font-size:.9rem}
.fp-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:44px}
.fp-a p{flex:1 1 320px;font-size:1rem;line-height:1.45;color:var(--ink-2)}
.fp-a p b{color:var(--ink)}
.fp-a .btn{min-height:44px;padding:0 18px 0 14px;font-size:.95rem;flex:none}
.fam-foot{margin-top:22px;display:grid;gap:10px 28px;color:var(--ink-2);font-size:.98rem;line-height:1.45}
@media (min-width:900px){.fam-foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fam-foot p{display:grid;grid-template-columns:20px 1fr;gap:10px}
.fam-foot svg{width:18px;height:18px;margin-top:3px;color:var(--acc-large)}
.fam-foot b{color:var(--ink)}

/* ── Rules ───────────────────────────────────────────────── */
/* Six cards: the rule, a small example of it at work (.rdemo), and "try to bend it". A refused try
   shakes the card (.nope), turns its chip to "Held · N×" (.tested) and adds to the tally underneath. */
/* the bar above the cards: a pip per rule (lit once tried, and a jump to its card), how many are tried,
   and a button that tries the first bend of each for the visitor */
.rules-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px;padding:12px 14px 12px 18px;border-radius:var(--r-l);background:var(--night-2);border:1px solid var(--night-line);transition:border-color .35s}
.rules-bar.all{border-color:var(--acc-bright)}
.rules-pips{display:flex;gap:6px}
.rules-pips button{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--night-line);font:600 .78rem/1 var(--mono);color:var(--on-night-2);transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.rules-pips button:hover{border-color:var(--on-night);color:var(--on-night)}
.rules-pips button:focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px}
.rules-pips button.on{background:var(--acc-bright);border-color:var(--acc-bright);color:var(--night)}
.rules-pips button.pop{animation:ftick .5s var(--ease)}
.rules-go{flex:1 1 220px;font-size:1rem;line-height:1.4;color:var(--on-night-2)}
.rules-go b{color:var(--on-night);font-weight:600}
.rules-auto{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border-radius:999px;border:1.5px solid var(--on-night);font:600 .9rem/1 var(--body);color:var(--on-night);white-space:nowrap;transition:background .2s,color .2s,opacity .2s}
.rules-auto:hover{background:var(--on-night);color:var(--night)}
.rules-auto:focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px}
.rules-auto[aria-disabled="true"]{opacity:.5;cursor:default;background:none;color:var(--on-night)}
.rules-g{display:grid;gap:14px}
@media (min-width:700px){
  .rules-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* cards in a row share their six rows, so titles, examples and "try to bend it" line up */
  @supports (grid-template-rows:subgrid){
    .rules-g .rule{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:11px}
    .rules-g .rdemo{margin-top:0;align-content:center}
  }
}
@media (min-width:1100px){.rules-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rule{position:relative;background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;min-width:0;transition:border-color .35s}
.rule.tested{border-color:color-mix(in srgb,var(--acc-bright) 55%,var(--night-line))}
.rule.peek{border-color:var(--on-night);box-shadow:0 0 0 2px var(--on-night)}   /* pointed at from its pip */
.rule.nope{animation:nope .4s var(--ease)}
@keyframes nope{0%,100%{translate:0}20%{translate:-7px}45%{translate:6px}70%{translate:-3px}}
.rule-top{display:flex;align-items:center;gap:10px}
.rule-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--acc-bright) 12%,transparent);color:var(--acc-bright);flex:none}
.rule-ic svg{width:22px;height:22px}
.rule-chip{font:500 .64rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--night-line);color:var(--on-night-2);transition:background .3s,color .3s,border-color .3s}
.rule.tested .rule-chip{background:var(--acc-bright);border-color:var(--acc-bright);color:var(--night)}
.rule-n{margin-left:auto;font:720 2.5rem/.8 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px #4A5674;transition:-webkit-text-stroke-color .35s}
.rule.said .rule-n{-webkit-text-stroke-color:var(--acc-bright)}
.rule h3{font-size:1.24rem}
.rule p:not([class]){font-size:.95rem;line-height:1.45;color:var(--on-night-2)}
.rdemo{margin-top:auto;display:grid;gap:9px;padding:12px;border-radius:14px;background:var(--night);border:1px solid var(--night-line);font-size:.9rem;line-height:1.3}
.rule .try{gap:6px 7px;align-content:flex-start}
.rule .try-l{flex-basis:100%;margin:0}
.rule .try-b{min-height:36px;padding:0 12px;font-size:.84rem}
/* the answer comes from the person who holds the rule: his picture is grey until he has something to say */
.rule-say{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:.92rem;line-height:1.4;color:var(--on-night-2);min-height:2.9em}
.rule-say span{padding-top:4px}
.rule-av{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 10%;opacity:.4;filter:grayscale(1);transition:opacity .3s,filter .3s}
.rule.said .rule-av{opacity:1;filter:none}
.rule.said .rule-say{color:var(--on-night)}
/* pieces the examples are built from */
.r-list{display:grid;gap:7px}
.r-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.r-list b{display:block;font-weight:600;color:var(--on-night)}
.r-list small{display:block;font-size:.8rem;color:var(--on-night-2)}
.r-list s{color:var(--on-night-2)}
.r-ok,.r-no{font:500 .62rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
.r-ok{background:color-mix(in srgb,var(--acc-bright) 16%,transparent);color:var(--acc-bright)}
.r-no{box-shadow:inset 0 0 0 1px var(--on-night-2);color:var(--on-night)}
.r-foot{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px dashed var(--night-line);font-size:.84rem;color:var(--on-night-2)}
.r-foot svg{width:15px;height:15px;flex:none}
.rule.left .r-foot,.rule.counted .r-foot,.rule.stopped .r-foot{color:var(--acc-bright)}
.r-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--on-night-2)}
.r-row b{font:500 .95rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.r-bar{display:block;height:10px;border-radius:999px;background:var(--night-line);position:relative;overflow:hidden;margin-top:-3px}
.r-bar::after{content:"";position:absolute;inset:0;width:calc(var(--v)*1%);border-radius:inherit;background:var(--on-night-2);transition:width .5s var(--ease)}
.r-bar--fee::after{background:var(--acc-bright)}
.rule .stepper output{min-width:3.6em;font-size:1.05rem}
.r-banner{display:grid;gap:9px;padding:11px 12px;border-radius:11px;background:var(--night-2);border:1px solid var(--night-line)}
.r-banner>p:first-child{color:var(--on-night);font-weight:600}
.r-btns{display:flex;flex-wrap:wrap;gap:6px}
.r-ad{display:grid;gap:7px;justify-items:start}
.r-ad small{font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.r-ad>b{font:720 1.08rem/1.2 var(--display);letter-spacing:-.015em;color:var(--on-night)}
.r-ad .r-list{width:100%}
.r-prom{display:grid;gap:6px;color:var(--on-night)}
.r-prom li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center}
.r-prom svg{width:16px;height:16px;color:var(--acc-bright)}
/* the tally under the six */
.rules-sum{margin-top:14px;display:grid;gap:12px 26px;align-items:center;padding:16px clamp(16px,2vw,24px);border-radius:var(--r-l);background:var(--night-2);border:1px solid var(--night-line)}
@media (min-width:900px){.rules-sum{grid-template-columns:auto minmax(0,1fr) auto}}
.rules-sum .sum-n b{color:var(--acc-bright)}
.rules-sum .sum-n span{color:var(--on-night-2)}
.rules-line{font-size:var(--step-1);line-height:1.35;color:var(--on-night)}

/* ── About ───────────────────────────────────────────────── */
.about .wrap{display:grid;gap:clamp(24px,4vw,60px);align-items:center}
@media (min-width:900px){.about .wrap{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
figure{margin:0}
/* The frame: the photo with "Ask me" underneath. On the first question the photo folds away and the
   frame becomes a conversation (.chatting); "Back to the photo" undoes it. Without the script it
   is simply the photo. On wide screens the frame keeps one height either way. */
.pt{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-l);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(17,24,40,.5)}
@media (min-width:900px){.pt{height:640px}}
.pt-photo{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--ink)}
.pt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
@media (max-width:899px){.pt-photo{flex:none;aspect-ratio:5/4}}
.pt.chatting .pt-photo{display:none}
.pt-photo figcaption,.pt-now{position:absolute;left:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(11,15,26,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--on-night);font:500 .74rem/1 var(--mono);letter-spacing:.05em}
.pt-photo figcaption{bottom:12px}
.pt-photo figcaption svg{width:13px}
.pt-now{top:12px}
.pt-now i{width:8px;height:8px;border-radius:50%;background:var(--acc-bright);animation:ping 2.4s var(--ease) infinite}
.pt-now b{font-weight:500;font-variant-numeric:tabular-nums}
.pt-head{display:none;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pt.chatting .pt-head{display:flex}
.pt-av{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 10%;flex:none}
.pt-head b{display:block;font:700 1rem/1.15 var(--display)}
.pt-head small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--muted)}
.pt-head .try-b{margin-left:auto;min-height:34px;padding:0 12px;font-size:.82rem}
.pt-thread{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;flex-direction:column;gap:8px;padding:14px;background:var(--paper)}
.pt.chatting .pt-thread{display:flex}
@media (max-width:899px){.pt.chatting .pt-thread{min-height:200px;max-height:320px}}
.ab{max-width:88%;padding:9px 12px;font-size:.94rem;line-height:1.4;animation:swap .4s var(--ease)}
.ab--q{align-self:flex-end;background:var(--ink);color:var(--paper);border-radius:14px 14px 4px 14px}
.ab--a{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.ab--typing{letter-spacing:.25em;color:var(--muted)}
.ab a{display:inline-block;margin-top:4px;font-weight:600;color:var(--ink);text-underline-offset:3px}
.pt-ask{display:grid;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--card)}
/* what he says before anyone has asked anything: a speech bubble over the questions */
.pt-hi{justify-self:start;margin:0;padding:9px 13px;border-radius:4px 14px 14px 14px;background:var(--paper);border:1px solid var(--line);font-size:.96rem;line-height:1.35;color:var(--ink)}
.pt.chatting .pt-hi{display:none}
.pt-pills{display:flex;flex-wrap:wrap;gap:6px}
.pt-pills .try-b{min-height:36px;padding:0 12px;font-size:.86rem}
.pt-pills .try-b.asked{background:var(--acc-tint);border-color:transparent;color:var(--acc-ink)}
#ask-form{display:flex;gap:8px}
#ask-form input{flex:1;min-width:0;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);transition:border-color .2s}
#ask-form input::placeholder{color:var(--muted)}
#ask-form input:hover{border-color:var(--ink-2)}
#ask-form input:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-color:var(--ink)}
#ask-form .try-b{border-color:var(--ink)}
#ask-form .try-b:hover{background:var(--ink);color:var(--paper)}
.about-copy{display:grid;gap:18px;justify-items:start}
.about-copy p:not([class]){color:var(--ink-2);max-width:56ch}
.about-copy p.big{font-size:var(--step-1);line-height:1.4;color:var(--ink);max-width:50ch}
/* "go and look": the three things the page offers in place of client logos */
.about-find{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:-6px}
.about-find a{text-decoration:none;color:var(--ink);min-height:38px;padding:0 13px;font-size:.9rem}
.about-find a:hover{border-color:var(--ink)}
/* three facts as a ruled list: icon, what it is, what it means for you. One line each where there is room. */
.facts{display:grid;width:100%;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:34px minmax(0,150px) minmax(0,1fr);gap:4px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.97rem;line-height:1.35;color:var(--ink-2)}
.facts li>span{display:contents}
.facts svg{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--acc-tint);color:var(--acc-ink)}
.facts b{font:600 1.04rem/1.2 var(--display);color:var(--ink)}
@media (max-width:620px){.facts li{grid-template-columns:34px minmax(0,1fr)}.facts li>span{display:block}.facts b{display:block;margin-bottom:2px}}
.about-go{display:flex;flex-wrap:wrap;gap:10px}
.about-go .btn--ghost svg{width:17px;height:17px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{background:var(--card);border-top:1px solid var(--line)}
.faq .wrap{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:980px){.faq .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
/* the side stays beside the list while it is read, on screens tall enough to hold it
   (about 770px with the "all read" line showing, under an 88px header offset) */
@media (min-width:980px) and (min-height:880px){.faq-side{position:sticky;top:calc(var(--header-h) + 20px)}}
.faq-side{display:grid;gap:16px;justify-items:start}
.faq-side>p:not([class]){color:var(--ink-2);max-width:40ch}
/* "Find yours": a word or a topic brings the matching questions to the top and fades the rest.
   Nothing is removed from the list, so the page never jumps. */
.faq-find{width:100%;display:grid;gap:10px;padding:14px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
#faq-form{display:flex;gap:8px}
#faq-form input{flex:1;min-width:0;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s}
#faq-form input::placeholder{color:var(--muted)}
#faq-form input::-webkit-search-cancel-button{-webkit-appearance:none}
#faq-form input:hover{border-color:var(--ink-2)}
#faq-form input:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-color:var(--ink)}
#faq-form .try-b{border-color:var(--ink)}
#faq-form .try-b:hover{background:var(--ink);color:var(--paper)}
.faq-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 .76rem/1 var(--mono);color:var(--muted)}
.faq-w{all:unset;box-sizing:border-box;cursor:pointer;min-height:28px;padding:0 10px;border-radius:999px;border:1px dashed var(--line);display:inline-flex;align-items:center;font:500 .76rem/1 var(--mono);color:var(--ink-2);transition:border-color .2s,color .2s}
.faq-w:hover{border-color:var(--ink);color:var(--ink)}
.faq-w:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.faq-topics{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px dashed var(--line)}
.faq-topics .try-b{min-height:36px;padding:0 9px 0 12px;font-size:.86rem;gap:7px}
.faq-topics .try-b i{font:500 .68rem/1 var(--mono);font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);display:grid;place-items:center}
.faq-topics .try-b[aria-pressed="true"] i{background:rgba(255,255,255,.16);color:var(--paper)}
.faq-say{font-size:.9rem;line-height:1.4;color:var(--ink-2);min-height:2.8em}
.faq-say a{color:var(--ink);font-weight:600;text-underline-offset:3px}
/* the map: one tile per question. Tap one to open it; read ones are ticked, the open one is dark. */
.faq-map{width:100%;display:grid;gap:10px}
.faq-map-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.faq-map-h p{font:400 .8rem/1 var(--mono);color:var(--muted);white-space:nowrap}
.faq-map-h p b{font:720 1.3rem/1 var(--display);color:var(--ink);letter-spacing:-.02em;margin-right:2px}
.faq-map-h .try-b{min-height:36px;padding:0 12px;font-size:.84rem}
.faq-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:460px){.faq-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.faq-t{all:unset;box-sizing:border-box;cursor:pointer;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;font:500 .72rem/1 var(--mono);color:var(--ink-2);transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease),opacity .3s}
.faq-t b{font-weight:500}
.faq-t svg{display:none;width:15px;height:15px}
.faq-t:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.faq-t:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.faq-t.read{background:var(--acc-tint);border-color:transparent;color:var(--acc-ink)}
.faq-t.read b{display:none}
.faq-t.read svg{display:block}
.faq-t.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.faq-t.on b{display:block}
.faq-t.on svg{display:none}
.faq-t.dim{opacity:.4}
.faq-t.tick{animation:ftick .5s var(--ease)}
@keyframes ftick{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:none}}
.faq-done{font-size:.92rem;line-height:1.45;color:var(--ink);padding:11px 13px;border-radius:12px;background:var(--acc-tint)}
.faq-done a{color:var(--acc-ink);font-weight:600;white-space:nowrap;text-underline-offset:3px}
/* a face to ask when the list does not have it */
.faq-ask{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);text-decoration:none;transition:border-color .25s,background .25s}
.faq-ask:hover{border-color:var(--ink);background:var(--card)}
.faq-ask img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 10%}
.faq-ask b{display:block;font:600 1rem/1.2 var(--display);letter-spacing:-.01em}
.faq-ask small{display:block;margin-top:2px;font-size:.86rem;line-height:1.3;color:var(--ink-2)}
.faq-ask .arr{transition:transform .35s var(--ease)}
.faq-ask:hover .arr{transform:translateX(3px)}
/* the list: number (a tick once read), question with its short answer, topic, chevron */
.qa{display:grid;gap:10px}
.qa details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);transition:background .25s,border-color .25s,opacity .3s}
.qa details:not([open]):hover{background:var(--card);border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.qa details[open]{background:var(--card);border-color:var(--ink)}
/* pointed at from its tile in the map */
.qa details.peek{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-tint)}
.qa details.dim{opacity:.38}
.qa details.dim[open],.qa details.dim:hover,.qa details.dim:focus-within{opacity:1}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-m)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--line);font:500 .72rem/1 var(--mono);color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.qa-n svg{display:none;width:16px;height:16px}
.qa details.read .qa-n{background:var(--acc-tint);border-color:transparent;color:var(--acc-ink)}
.qa details.read .qa-n b{display:none}
.qa details.read .qa-n svg{display:block}
.qa details[open] .qa-n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qa-q>b{display:block;font:600 1.06rem/1.25 var(--display);letter-spacing:-.01em}
.qa-q small b{color:var(--ink);font-weight:600}
.qa-q small{display:block;margin-top:3px;font-size:.9rem;line-height:1.35;color:var(--ink-2)}
.qa details[open] .qa-q small{display:none}
.qa-tag{font:500 .62rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:5px 9px 5px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.qa-tag svg{width:12px;height:12px;flex:none}
.faq-topics .try-b svg{width:14px;height:14px;flex:none}
@media (max-width:620px){.qa-tag{display:none}.qa summary{grid-template-columns:auto minmax(0,1fr) auto;gap:11px;padding:13px 12px}}
.qa-a{padding:0 16px 16px 64px;display:grid;gap:10px;color:var(--ink-2);font-size:.99rem;line-height:1.5}
.qa-a>p:not([class]){max-width:64ch}
@media (max-width:620px){.qa-a{padding-left:12px}}
.qa-a b{color:var(--ink)}
.qa-a a:not(.link){color:var(--ink);font-weight:600;text-underline-offset:3px}
.qa-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-top:4px}
.qa-go .link{color:var(--ink);font-size:.95rem}
.qa-go .try-b{min-height:36px;padding:0 12px;font-size:.84rem;margin-left:auto}
.qa-go a.qa-ask{display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.qa-go a.qa-ask svg{width:15px;height:15px;color:var(--acc-ink)}
.qa-go a.qa-ask:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* answers ease open where the browser can animate to auto height */
@supports (interpolate-size:allow-keywords){@media (prefers-reduced-motion:no-preference){
  .qa{interpolate-size:allow-keywords}
  .qa details::details-content{block-size:0;overflow:clip;transition:block-size .36s var(--ease),content-visibility .36s allow-discrete}
  .qa details[open]::details-content{block-size:auto}
}}

/* ── Final CTA ───────────────────────────────────────────── */
.final{background:radial-gradient(46rem 26rem at 84% 6%,color-mix(in srgb,var(--acc-bright) 12%,transparent),transparent 70%),var(--night);color:var(--on-night);padding-block:clamp(3.75rem,7vw,6rem)}
.final .wrap{display:grid;gap:clamp(22px,3vw,36px)}
.final-top{display:grid;gap:clamp(18px,4vw,56px);align-items:center}
@media (min-width:900px){.final-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.final-copy{display:grid;gap:18px;justify-items:start}
.final-sub{color:var(--on-night-2);font-size:var(--step-1);line-height:1.45;max-width:46ch}
.final-ticks{display:grid;gap:8px;color:var(--on-night)}
.final-ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.4}
.final-ticks svg{width:18px;height:18px;margin-top:3px;color:var(--acc-bright)}
/* Closing shield: the family's signature move (IHERO Media v3, IHERO Desk). The outline draws
   itself, then the white logo fills in. On IHERO Growth the two eyes are green: their outlines
   draw in green and they fill from the bottom up. Pointing at it draws it again. */
.final-mark{position:relative;display:grid;place-items:center}
.final-mark::before{content:"";position:absolute;inset:4% 8%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc-bright) 30%,transparent),transparent);filter:blur(36px);pointer-events:none}
.shield{position:relative;width:min(100%,250px);overflow:visible}
@media (max-width:899px){.final-mark{order:-1;justify-items:start}.final-mark::before{display:none}.shield{width:92px}}
.shield.reset .fill,.shield.reset .eye-fill{transition:none}
.shield > path:not(.fill){fill:none;stroke:var(--on-night);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.shield > path.eye-line{stroke:var(--acc-bright)}
.shield .fill{fill:#fff;transition:opacity .9s ease 1.7s}
.shield .eye-fill{fill:var(--acc-bright);transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.1s var(--ease) 2.2s}
.reveal-on .shield:not(.drawn) > path:not(.fill){stroke-dashoffset:1}
.reveal-on .shield:not(.drawn) .fill{opacity:0}
.reveal-on .shield:not(.drawn) .eye-fill{transform:scaleY(0)}
.shield.drawn > path:not(.fill){animation:outline 2.2s var(--ease-io) both}
.shield.drawn > path.eye-line{animation-delay:.4s}
@keyframes outline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Message builder: the questions on the left, the message as it will be sent on the right */
.fbuild{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:clamp(18px,2.2vw,28px);display:grid;gap:22px clamp(22px,3vw,44px)}
@media (min-width:980px){.fbuild{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}}
.fb-q{display:grid;gap:16px;align-content:start;min-width:0}
.fb-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.fb-h h3{font-size:var(--step-1)}
.fb-meter{display:inline-flex;align-items:center;gap:5px;font:400 .74rem/1 var(--mono);color:var(--on-night-2)}
.fb-meter i{width:18px;height:5px;border-radius:99px;background:var(--night-line);transition:background .3s}
.fb-meter i.on{background:var(--acc-bright)}
.fb-meter span{margin-left:6px}
.fb-set{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.fb-set legend,.fb-name>span{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2);padding:0;margin-bottom:10px}
.fb-set .pills{gap:6px}
.fb-set .pills span{min-height:38px;padding:0 13px 0 11px;font-size:.88rem}
.fb-set .pills svg{width:15px;height:15px;margin-right:7px;flex:none}
.fb-name{display:grid;justify-items:start}
.fb-name input{width:min(100%,340px);height:42px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);padding:0 16px;font:400 1rem/1 var(--body);color:var(--on-night);transition:border-color .2s}
.fb-name input::placeholder{color:#7C879D}
.fb-name input:hover{border-color:var(--on-night-2)}
.fb-name input:focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px;border-color:var(--on-night)}
.fb-out{display:grid;gap:14px;align-content:start;padding:16px;border-radius:18px;background:var(--night);border:1px solid var(--night-line);min-width:0}
@media (min-width:980px){.fb-out{position:sticky;top:calc(var(--header-h) + 20px)}}
.fb-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.fb-l span{margin-right:auto}
.fb-mini{all:unset;box-sizing:border-box;cursor:pointer;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--night-line);display:inline-flex;align-items:center;font:500 .7rem/1 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--on-night);transition:border-color .2s,background .2s}
.fb-mini:hover{border-color:var(--on-night-2);background:rgba(255,255,255,.05)}
.fb-mini:focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px}
.fb-chat{display:grid;gap:6px;justify-items:end}
.fb-msg{background:#123C2B;border-radius:16px 16px 4px 16px;padding:13px 15px;font-size:1rem;line-height:1.5;color:var(--on-night);min-height:6em;width:100%;overflow-wrap:anywhere}
.fb-msg mark{background:color-mix(in srgb,var(--acc-bright) 20%,transparent);color:inherit;border-radius:4px;padding:0 3px;transition:background 1.4s}
.fb-msg mark.new{background:color-mix(in srgb,var(--acc-bright) 70%,transparent);transition:none}
.fb-sent{font:400 .7rem/1 var(--mono);color:var(--on-night-2)}
.fb-extras{display:grid;gap:8px}
.fb-extras p{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
#fb-chips{display:flex;flex-wrap:wrap;gap:6px}
.fb-chip{all:unset;box-sizing:border-box;cursor:pointer;min-height:32px;padding:0 11px;border-radius:999px;background:color-mix(in srgb,var(--acc-bright) 14%,transparent);color:var(--acc-bright);display:inline-flex;align-items:center;font:600 .82rem/1 var(--body);transition:background .2s}
.fb-chip:hover{background:color-mix(in srgb,var(--acc-bright) 26%,transparent)}
.fb-chip:focus-visible{outline:2px solid var(--acc-bright);outline-offset:2px}
.fb-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.fb-go small{font:400 .78rem/1.4 var(--mono);color:var(--on-night-2);display:inline-flex;align-items:center;gap:.6ch}
.fb-go small a{display:inline-flex;align-items:center;min-height:44px}
/* what happens after the message is sent */
.final-next{display:grid;gap:12px}
@media (min-width:860px){.final-next{grid-template-columns:repeat(3,minmax(0,1fr))}}
.final-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;padding:16px;border-radius:var(--r-m);border:1px solid var(--night-line);font-size:.93rem;line-height:1.4;color:var(--on-night-2)}
.final-next b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--acc-bright);color:var(--acc-bright);font:500 .8rem/1 var(--mono)}
.final-next strong{display:block;font:700 1.04rem/1.25 var(--display);color:var(--on-night);margin-bottom:3px}

/* ── Footer ──────────────────────────────────────────────── */
/* Laid out like IHERO Media's footer (the owner's standard): the brand with the time in Malta,
   contact rows with an icon tile, the page index (two columns, a tick once a section has been
   seen), the sister brands with their own marks; then a band with a scan-to-WhatsApp code and
   "save our contact"; then the legal row. A faint shield sits behind it all. */
.ftr{position:relative;overflow:hidden;background:#080B13;color:var(--on-night-2);padding-block:3.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));font-size:.93rem}
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--u4);opacity:.85}
.ftr-wm{position:absolute;right:3%;bottom:-110px;width:min(380px,60%);color:#fff;opacity:.028;pointer-events:none}
.ftr .wrap{position:relative}
.ftr-grid{display:grid;gap:2.2rem}
@media (min-width:620px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-nav{grid-column:1/-1}}
@media (min-width:1100px){.ftr-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,1.9fr) minmax(0,.95fr);column-gap:clamp(1.4rem,2.6vw,2.4rem)}.ftr-nav{grid-column:auto}}
.ftr a{text-decoration:none;color:var(--on-night)}
.ftr a.brand{color:#fff}
.ftr-line{margin-top:1rem;max-width:36ch;line-height:1.5}
.ftr-now{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--night-line);font-size:.88rem;line-height:1.35}
.ftr-now i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--acc-bright);animation:ping 2.4s var(--ease) infinite}
.ftr-now b{color:var(--on-night);font:500 .9rem/1 var(--mono);font-variant-numeric:tabular-nums}
.ftr-h{margin:0 0 1rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
#ftr-seen{color:var(--acc-bright)}
.ftr ul{display:grid;gap:.3rem}
.ftr-row{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;padding:.2rem .6rem .2rem .2rem;border-radius:14px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;transition:background-color .2s,translate .3s var(--ease)}
.ftr-row:hover{background:rgba(255,255,255,.05);translate:2px 0}
.fi{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--acc-bright);transition:background .25s}
.ftr-row:hover .fi{background:color-mix(in srgb,var(--acc-bright) 16%,transparent)}
.fi svg{width:18px;height:18px}
.fi--plain{color:var(--on-night)}
.fi--plain svg,.fi--plain img{width:15px;height:auto}
.ftr-row b{display:block;font:600 .97rem/1.25 var(--body);color:var(--on-night)}
.ftr-row small{display:block;font-size:.8rem;line-height:1.3;color:var(--on-night-2)}
/* the page index */
.ftr-idx{display:grid;gap:2px 14px}
@media (min-width:480px){.ftr-idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr-idx a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:44px;padding:4px 8px 4px 4px;border-radius:12px;transition:background-color .2s}
.ftr-idx a:hover{background:rgba(255,255,255,.05)}
.ftr-idx i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:1.5px solid var(--night-line);color:transparent;transition:background .3s,border-color .3s,color .3s}
.ftr-idx i svg{width:13px;height:13px}
.ftr-idx a.seen i{background:color-mix(in srgb,var(--acc-bright) 16%,transparent);border-color:transparent;color:var(--acc-bright)}
.ftr-idx b{display:block;font:600 .95rem/1.2 var(--body);color:var(--on-night)}
.ftr-idx small{display:block;font-size:.78rem;line-height:1.3;color:var(--on-night-2)}
.ftr-skip{margin-top:.7rem;font:400 .78rem/1.4 var(--mono)}
.ftr-skip a{color:var(--acc-bright);display:inline-flex;align-items:center;min-height:32px}
.ftr-skip a:hover{text-decoration:underline;text-underline-offset:3px}
/* the band: scan the code on a computer, save the contact on a phone */
.ftr-band{margin-top:2.2rem;display:grid;gap:14px 26px;align-items:center;padding:16px 18px;border-radius:var(--r-l);background:rgba(255,255,255,.035);border:1px solid var(--night-line)}
@media (min-width:860px){.ftr-band{grid-template-columns:auto minmax(0,1fr) auto}}
.ftr-qr{width:124px;height:124px;border-radius:12px;background:#fff}
.ftr-band-h{font:700 1.15rem/1.2 var(--display);color:var(--on-night);margin-bottom:5px}
.ftr-band-t p:not([class]){max-width:40ch;line-height:1.45}
@media (max-width:859px){.ftr-qr,.ftr-band-t{display:none}}   /* a phone cannot scan its own screen */
.ftr-legal{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;font:400 .78rem/1.5 var(--mono)}
.ftr-legal a{color:var(--on-night-2);min-height:44px;display:inline-flex;align-items:center}
.ftr-legal a:hover{color:var(--on-night)}

/* ── 404 ─────────────────────────────────────────────────── */
.nf{min-height:100svh;display:grid;place-items:center;padding:var(--gutter);text-align:center}
.nf div{display:grid;gap:18px;justify-items:center;max-width:44ch}
.nf p{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* ═══════════════════════════════════════════════════════════════
   IHERO Foundation — "Pick Who You Back" (concept picked 2026-10-22, see CONCEPT.md).
   Appended after site.src.css (the family frame) by build/make.py.
   The four programmes are the brand: each has its own colour set, and <html data-pick> carries the
   one the visitor picked, so the accent (--acc*) of the whole page is that programme's colour.
   The same sets apply to anything marked data-pick / data-k / data-pg with a programme key.
   ═══════════════════════════════════════════════════════════════ */
@property --c{syntax:'<color>';inherits:true;initial-value:#1F5FCC}
@property --c-ink{syntax:'<color>';inherits:true;initial-value:#1A4FAB}
@property --c-bright{syntax:'<color>';inherits:true;initial-value:#8DB2FF}
@property --t{syntax:'<color>';inherits:true;initial-value:#E3ECFB}
@property --glow{syntax:'<color>';inherits:true;initial-value:rgba(31,95,204,.3)}
:root{
  /* chart colours: bars, segments and the four-colour underline (Ukraine shows yellow beside Future Heroes blue) */
  --fh-c:#1F5FCC; --ua-c:#FFD500; --an-c:#AD4F17; --sp-c:#0B7A53;
  --ua-flag:linear-gradient(180deg,#0057B7 0 50%,#FFD500 50% 100%);
}
/* contrast on paper #F3F5F7: --c >= 4.5:1 for all four, --c-ink >= 6:1; --c-bright is for night bands */
[data-pick="fh"],[data-k="fh"],[data-pg="fh"]{--c:#1F5FCC;--c-ink:#1A4FAB;--c-bright:#8DB2FF;--t:#E3ECFB;--glow:rgba(31,95,204,.3);--band:linear-gradient(135deg,#2B6BDB,#16408F);--fl-l:#1F5FCC;--fl-r:#1F5FCC}
[data-pick="ua"],[data-k="ua"],[data-pg="ua"]{--c:#0057B7;--c-ink:#00458F;--c-bright:#FFD500;--t:#FFF6CC;--glow:rgba(255,213,0,.34);--band:linear-gradient(160deg,#0B63C9,#00428C);--fl-l:#0057B7;--fl-r:#FFD500}
[data-pick="an"],[data-k="an"],[data-pg="an"]{--c:#AD4F17;--c-ink:#8F4012;--c-bright:#FFA36B;--t:#F8E6DA;--glow:rgba(173,79,23,.28);--band:linear-gradient(135deg,#C2611F,#87380C);--fl-l:#AD4F17;--fl-r:#AD4F17}
[data-pick="sp"],[data-k="sp"],[data-pg="sp"]{--c:#0B7A53;--c-ink:#096444;--c-bright:#4BE0A3;--t:#DDF1E8;--glow:rgba(11,122,83,.28);--band:linear-gradient(135deg,#119066,#075C3D);--fl-l:#0B7A53;--fl-r:#0B7A53}
/* :root, not html: site.src.css sets the fallback --acc on :root, and this has to win */
:root{--acc:var(--c);--acc-large:var(--c);--acc-ink:var(--c-ink);--acc-bright:var(--c-bright);--acc-tint:var(--t);
  transition:--c .5s,--c-ink .5s,--c-bright .5s,--t .5s,--glow .5s}
@media (prefers-reduced-motion:reduce){:root{transition:none}}
.fl-l{fill:var(--fl-l)}.fl-r{fill:var(--fl-r)}

/* ── In set-up strip: above the header, always honest about the state ── */
.setup-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:0;padding:8px var(--gutter);background:var(--ink);color:var(--on-night-2);font:400 .86rem/1.35 var(--body);text-align:center;position:relative}
.setup-strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--u4)}
.setup-strip b{color:var(--on-night);font-weight:600}
.setup-strip a{color:var(--acc-bright);font:500 .76rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.setup-strip a:hover{text-decoration:underline;text-underline-offset:3px}
.ss-chip{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--acc-bright);color:var(--night)}
.brand svg{width:21px}

/* ── Hero: "Back Malta's next heroes. Pick who first." ── */
.hero-stage::before{display:none}
.hero .wrap{align-items:start}
@media (min-width:1100px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,572px);gap:clamp(32px,3.4vw,48px);padding-top:clamp(8px,1.4vw,18px)}}
.hero-lede{font-size:clamp(1.05rem,.98rem + .35vw,1.2rem);max-width:none}
.hero h1{font-size:clamp(2.3rem,11cqi,4.3rem)}
.hero .friction span:nth-child(3){display:none}
.hero .ticks-row{flex-wrap:nowrap;gap:6px}
.hero .ticks label span{min-height:38px;padding:0 12px 0 9px;font-size:.92rem;white-space:nowrap}
@media (max-width:560px){.hero .ticks-row{flex-wrap:wrap}}
.hero h1 .u4{display:inline-block;background:var(--u4) 0 96%/100% .1em no-repeat;padding-bottom:.04em}
.hero-copy{gap:18px}
.p100s{display:grid;gap:9px;justify-self:stretch;padding-top:16px;border-top:1px solid var(--line)}
.p100-l{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.p100-row{display:flex;flex-wrap:wrap;gap:5px}
.p100{box-sizing:border-box;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;row-gap:2px;align-items:center;padding:6px 10px 6px 7px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .3s,transform .25s var(--ease)}
.p100 i{grid-row:1/3;width:9px;height:30px;border-radius:5px;background:var(--c)}
.p100[data-pick="ua"] i{background:var(--ua-flag)}
.p100 b{font:720 1.1rem/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.p100 small{font-size:.72rem;line-height:1.1;color:var(--muted);white-space:nowrap}
.p100:hover{border-color:var(--ink);transform:translateY(-1px)}
.p100--fund{cursor:default}.p100--fund:hover{border-color:var(--line);transform:none}
.p100--fund i{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 5px)}
html[data-pick="fh"] .p100[data-pick="fh"],html[data-pick="ua"] .p100[data-pick="ua"],html[data-pick="an"] .p100[data-pick="an"],html[data-pick="sp"] .p100[data-pick="sp"]{border-color:var(--c);box-shadow:0 0 0 1.5px var(--c),0 12px 22px -16px var(--c)}

/* the stage: a programme card, the picker beside it */
.pk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 182px;gap:18px;align-items:start;padding:4px 0 0 16px}
.pk-glow{position:absolute;left:0;top:4%;width:72%;height:86%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent 72%);filter:blur(6px);z-index:-1;pointer-events:none}
.pk-cards{display:grid;min-width:0}
.pkc{grid-area:1/1;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 34px 60px -36px rgba(17,24,40,.55);visibility:hidden;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .45s}
html[data-pick="fh"] .pkc[data-k="fh"],html[data-pick="ua"] .pkc[data-k="ua"],html[data-pick="an"] .pkc[data-k="an"],html[data-pick="sp"] .pkc[data-k="sp"]{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.pkc-h{background:var(--band);color:#fff;padding:18px 18px 17px;display:flex;gap:12px;align-items:flex-start}
.pkc[data-k="ua"] .pkc-h{box-shadow:inset 0 -6px 0 #FFD500}
.pkc-shield{flex:none;width:50px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.pkc-shield svg{width:100%;height:auto}
.pkc-tag{display:inline-block;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.17);border-radius:99px;padding:5px 10px}
.pkc-h h3{font-size:clamp(1.45rem,1.1rem + .7vw,1.68rem);white-space:nowrap;color:#fff;margin:8px 0 5px;letter-spacing:-.03em}
.pkc-who{font-size:.93rem;line-height:1.35;color:rgba(255,255,255,.88)}
.pkc-b{padding:13px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.pkc-go{margin-top:auto}
.pkc-k{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pkc-pays{display:grid;gap:8px}
.pkc-pays li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:center}
.pkc-ic{width:36px;height:36px;border-radius:11px;background:var(--t);color:var(--c);display:grid;place-items:center}
.pkc-ic svg{width:19px;height:19px}
.pkc-pays b{display:block;font:650 .97rem/1.2 var(--body)}
.pkc-pays small{display:block;font-size:.82rem;line-height:1.3;color:var(--muted)}
.pkc-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.pkc-route::before{content:"";position:absolute;left:12px;right:18%;top:11px;height:2px;background:var(--t)}
.pkc-route li{position:relative;font-size:.8rem;line-height:1.25;color:var(--ink-2)}
.pkc-route i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--c);color:#fff;font:700 .74rem/1 var(--body);font-style:normal;margin-bottom:6px;box-shadow:0 0 0 3px var(--card)}
.pkc-share{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:14px;padding:10px 13px}
.pkc-share b{font:760 1.9rem/1 var(--display);letter-spacing:-.03em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.pkc-share small{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;white-space:nowrap}
.pkc-seg{flex:1;display:flex;gap:3px;height:10px;min-width:0}
.pkc-seg i,.pkc-seg em{border-radius:4px;background:var(--line);min-width:3px}
.pkc-seg i.on{background:var(--c)}
.pkc[data-k="ua"] .pkc-seg i.on{background:var(--ua-flag)}
.pkc-seg em{background:repeating-linear-gradient(135deg,#B8C0CD 0 2px,transparent 2px 5px)}
.pkc-go{display:flex;justify-content:center;align-items:center;gap:10px;min-height:48px;border-radius:999px;background:var(--c);color:#fff;font:700 1rem/1 var(--body);text-decoration:none;box-shadow:0 14px 24px -16px var(--c);transition:filter .2s,transform .25s var(--ease)}
.pkc-go:hover{filter:brightness(1.1);transform:translateY(-1px)}
.pkc-go .arr{transition:transform .3s var(--ease)}.pkc-go:hover .arr{transform:translateX(3px)}

.pk-side{display:grid;gap:10px;align-content:start;padding-top:4px;min-width:0}
.pk-l{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.pk-l i{width:8px;height:8px;border-radius:50%;background:conic-gradient(var(--fh-c) 0 50%,var(--ua-c) 0 80%,var(--an-c) 0 90%,var(--sp-c) 0)}
.pk-list{display:grid;gap:5px}
.pk-b{box-sizing:border-box;width:100%;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px 11px 8px;border-radius:14px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .25s,box-shadow .3s,transform .25s var(--ease)}
.pk-b:hover{background:var(--card);transform:translateX(-2px)}
.pk-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 8px 14px -10px var(--c)}
.pk-b[data-pick="ua"] .pk-ic{color:#FFD500}
.pk-ic svg{width:20px;height:20px}
.pk-t b{display:block;font:700 .97rem/1.15 var(--body)}
.pk-t small{display:block;font-size:.78rem;line-height:1.25;color:var(--muted);margin-top:2px}
.pk-run{position:absolute;left:56px;right:12px;bottom:4px;height:2px;border-radius:2px;overflow:hidden}
.pk-run i{display:block;height:100%;width:0;background:var(--c);border-radius:inherit}
html[data-pick="fh"] .pk-b[data-pick="fh"],html[data-pick="ua"] .pk-b[data-pick="ua"],html[data-pick="an"] .pk-b[data-pick="an"],html[data-pick="sp"] .pk-b[data-pick="sp"]{background:var(--card);box-shadow:0 0 0 2px var(--c),0 18px 30px -20px var(--c);transform:none}
.pk.touring .pk-b[aria-pressed="true"] .pk-run i{animation:pkrun var(--tour,5200ms) linear forwards}
@keyframes pkrun{to{width:100%}}
.pk-all{font-weight:600;font-size:.92rem;color:var(--ink-2);text-decoration:none;padding:2px 8px}
.pk-all:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pk-chip{display:flex;gap:10px;align-items:center;padding:10px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 16px 28px -22px rgba(17,24,40,.5);font-size:.86rem;line-height:1.2}
.pk-chip>svg{width:20px;height:20px;flex:none;color:var(--acc)}
.pk-chip b{display:block;font-weight:700}
.pk-chip small{display:block;font:400 .7rem/1.3 var(--mono);color:var(--muted);margin-top:2px}
.pk-chip--a{transform:rotate(-1.2deg)}.pk-chip--b{transform:rotate(1deg)}
.pk-v{display:none}
html[data-pick="fh"] .pk-v[data-k="fh"],html[data-pick="ua"] .pk-v[data-k="ua"],html[data-pick="an"] .pk-v[data-k="an"],html[data-pick="sp"] .pk-v[data-k="sp"]{display:block;animation:fadeup .45s var(--ease)}
.pk-tour{display:flex;align-items:center;gap:9px;font:400 .72rem/1.3 var(--mono);color:var(--muted);padding:2px 4px}
.pk-bub{position:absolute;z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--acc);box-shadow:0 16px 28px -16px rgba(17,24,40,.55);animation:bob 6s ease-in-out infinite;pointer-events:none}
.pk-bub svg{width:24px;height:24px}
.pk-bub .pk-v svg{display:block}
.pk-bub--a{left:-6px;top:118px}
.pk-bub--b{left:calc(100% - 182px - 44px);top:236px;background:var(--acc);color:#fff;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-7px)}}
.pk-note{grid-column:1/-1;font:400 .74rem/1.45 var(--mono);color:var(--muted);text-align:center;padding:0 10px}
@media (max-width:1099px){
  .pk{grid-template-columns:minmax(0,1fr);padding-left:0;max-width:640px;width:100%;justify-self:center}
  .pk-side{order:-1}
  .pk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-b{background:var(--card);border:1px solid var(--line)}
  .pk-all,.pk-tour{display:none}
  .pk-chip--a,.pk-chip--b{display:none}
  .pk-bub{display:none}
}
@media (max-width:420px){.pk-t small{display:none}.pk-b{padding:7px 8px 10px 7px;grid-template-columns:32px minmax(0,1fr);gap:8px}.pk-ic{width:32px;height:32px}.pkc-route li{font-size:.74rem}}

/* ── Programmes: four flip cards ── */
.pline{margin-bottom:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
@media (max-width:640px){.pl-seg b{display:none}.pl-seg{justify-content:center;padding:0 6px}}
.pl-l{display:flex;justify-content:space-between;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pl-bar{display:flex;gap:4px}
.pl-seg{--c:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:40px;padding:0 12px;border-radius:10px;background:var(--c);color:#fff;font:600 .82rem/1 var(--body);cursor:default;transition:transform .3s var(--ease),filter .3s,opacity .3s}
.pl-seg:first-child{border-radius:999px 10px 10px 999px}.pl-seg:last-child{border-radius:10px 999px 999px 10px}
.pl-seg b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-seg em{font:500 .78rem/1 var(--mono);font-style:normal;opacity:.9}
.pl-seg[data-pl="ua"]{background:linear-gradient(180deg,#0057B7 0 70%,#FFD500 70% 100%)}
.pline.hl .pl-seg{opacity:.4}.pline.hl .pl-seg.on{opacity:1;transform:translateY(-2px)}
button.pl-seg{border:0;cursor:pointer;font:600 .82rem/1 var(--body);text-align:left}
button.pl-seg:hover{transform:translateY(-2px);filter:brightness(1.08)}
.pg.flash .pg-f,.pg.flash .pg-bk{animation:pgflash 1.2s var(--ease)}
@keyframes pgflash{0%,100%{box-shadow:0 0 0 0 var(--c)}30%{box-shadow:0 0 0 4px var(--c)}}
.pgs{display:grid;gap:16px}
@media (min-width:860px){.pgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg{position:relative;min-width:0;perspective:1800px}
.pg-in{display:grid;height:100%}
.pg-f,.pg-bk{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .35s,border-color .3s}
.pg-f:hover,.pg-bk:hover{box-shadow:0 26px 46px -32px rgba(17,24,40,.5)}
html.js .pg-in{transform-style:preserve-3d;transition:transform .8s var(--ease)}
html.js .pg-f,html.js .pg-bk{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.js .pg-bk{transform:rotateY(180deg)}
html.js .pg.flipped .pg-in{transform:rotateY(180deg)}
html:not(.js) .pg-bk{margin-top:10px}
.pg-band{background:var(--band);color:#fff;padding:17px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:center;position:relative}
.pg[data-pg="ua"] .pg-band{box-shadow:inset 0 -5px 0 #FFD500}
.pg-badge{position:relative;width:48px;flex:none}
.pg-shield{display:block;width:48px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.pg-shield svg{width:100%;height:auto}
.pg-bi{position:absolute;right:-7px;bottom:-5px;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,0,0,.22)}
.pg-bi svg{width:15px;height:15px}
.pg-k{display:flex;align-items:center;gap:8px;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.pg-flag{font-style:normal;background:#fff;color:var(--c-ink);border-radius:99px;padding:3px 8px;letter-spacing:.08em}
.pg-band h3{color:#fff;font-size:clamp(1.35rem,1.1rem + .7vw,1.75rem);margin-top:6px}
.pg-kick{font:400 .84rem/1.3 var(--body);color:rgba(255,255,255,.84);margin-top:3px}
.pg-share{display:grid;justify-items:end;gap:3px;text-align:right}
.pg-share b{font:760 clamp(2.4rem,1.9rem + 1.4vw,3.1rem)/.85 var(--display);letter-spacing:-.04em;color:#fff}
.pg-share span{font-size:.78rem;line-height:1.25;color:rgba(255,255,255,.85)}
.pg-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:13px;flex:1}
.pg-who{font-size:1rem;line-height:1.45;color:var(--ink-2)}
.pg-l{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pg-pays{display:grid;gap:8px}
.pg-pays li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;font-size:.95rem;line-height:1.35}
.pg-pi{width:32px;height:32px;border-radius:10px;background:var(--t);color:var(--c);display:grid;place-items:center}
.pg-pi svg{width:17px;height:17px}
.pg-try{display:grid;gap:8px;padding:12px 13px;border-radius:14px;border:1px dashed var(--line)}
.pg-try .try{gap:6px}
.pg-try .try-b{min-height:34px;font-size:.84rem;padding:0 12px}
.pg-try .try-b[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.pg-say{font-size:.92rem;line-height:1.45;color:var(--ink-2);min-height:2.9em}
.pg-say.swap{animation:fadeup .4s var(--ease)}
.pg-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.pg-flip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 .92rem/1 var(--body);cursor:pointer;transition:border-color .25s,transform .25s var(--ease)}
.pg-flip svg{width:17px;height:17px;color:var(--c);transition:transform .5s var(--ease)}
.pg-flip:hover{border-color:var(--ink);transform:translateY(-1px)}
.pg-flip:hover svg{transform:rotate(180deg)}
.pg-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font:600 .95rem/1 var(--body);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.pg-back i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;transition:background .25s}
.pg-back:hover{transform:translateY(-1px)}
.pg-back[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.pg-back[aria-pressed="true"] i{background:#fff;box-shadow:inset 0 0 0 3px var(--c)}
.pg.backed .pg-f{border-color:var(--c);box-shadow:0 0 0 2px var(--c),0 24px 44px -30px rgba(17,24,40,.45)}
.pg-band--slim{grid-template-columns:auto minmax(0,1fr)}
.pg-route{display:grid;gap:14px;position:relative}
.pg-route::before{content:"";position:absolute;left:14px;top:16px;bottom:16px;width:2px;background:var(--t)}
.pg-route li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;position:relative}
.pg-route i{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:700 .84rem/1 var(--body);font-style:normal;box-shadow:0 0 0 4px var(--card)}
.pg-route span{font-size:.93rem;line-height:1.45;color:var(--ink-2)}
.pg-route b{display:block;font:700 1.02rem/1.25 var(--body);color:var(--ink);margin-bottom:2px}
.pg-how{font-size:.92rem;line-height:1.45;color:var(--ink-2);padding:11px 13px;border-radius:12px;background:var(--paper)}
.pg-how b{display:block;font:500 .66rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pg-sum{margin-top:16px;display:grid;gap:12px 26px;align-items:center;padding:16px clamp(16px,2vw,24px);border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
@media (min-width:900px){.pg-sum{grid-template-columns:auto minmax(0,1fr) auto auto}}
.pg-sum-h{font:720 1.15rem/1.2 var(--display);letter-spacing:-.01em}
.pg-sum p:not(.sum-n):not(.pg-sum-h){color:var(--ink-2);font-size:.97rem;margin-top:3px}
@keyframes fadeup{from{opacity:0;transform:translateY(5px)}}

/* ── How a gift works: the split bar ── */
.gsplit{display:flex;gap:3px;height:46px}
.gsplit i{min-width:4px;border-radius:9px;background:var(--c);display:grid;place-items:center;overflow:hidden;transition:flex .6s var(--ease),opacity .3s}
.gsplit [data-gs="ua"]{background:var(--ua-flag)}
.gsplit i b{font:700 .82rem/1 var(--body);color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:opacity .25s}
.gsplit i.tiny b{opacity:0}
.gsplit .gs-fund{background:repeating-linear-gradient(135deg,#2A3349 0 6px,#1C2436 6px 12px);box-shadow:inset 0 0 0 1px var(--night-line)}
.gsplit-k{display:flex;justify-content:space-between;gap:10px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);margin-top:-4px}

/* ── How a gift works (night calculator) ── */
.gift-model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:4px}
.gift-model p{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--night);border:1px solid var(--night-line)}
.gm-k{font:500 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.gift-model b{font:720 1.35rem/1 var(--display);color:var(--acc-bright)}
.gift-model small{grid-column:1/-1;font-size:.82rem;color:var(--on-night-2)}
.gift-years{display:grid;gap:9px;padding:13px 14px 12px;border-radius:14px;background:var(--night);border:1px solid var(--night-line)}
.gy-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:500 .64rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.gy-h b{font:720 1.05rem/1 var(--display);letter-spacing:-.01em;text-transform:none;color:var(--acc-bright);white-space:nowrap}
.gy-bars{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;align-items:end;height:92px}
.gy-bars i{display:flex;flex-direction:column-reverse;height:100%;border-radius:4px 4px 2px 2px;overflow:hidden;opacity:.32;transition:opacity .3s}
.gy-bars i::before{content:"";height:var(--a);background:var(--on-night-2)}
.gy-bars i::after{content:"";height:var(--b);background:var(--acc-bright);border-radius:3px 3px 0 0}
.gy-bars i.on{opacity:1}
.gy-bars i{cursor:pointer}
.gy-bars i.peek{opacity:1;outline:2px solid var(--acc-bright);outline-offset:2px}
.gy-axis{display:flex;justify-content:space-between;align-items:center;gap:10px;font:400 .66rem/1 var(--mono);color:var(--on-night-2)}
.gy-axis span:nth-child(2){display:inline-flex;align-items:center;gap:6px}
.gy-k{width:9px;height:9px;border-radius:2px;display:inline-block}.gy-k--a{background:var(--on-night-2)}.gy-k--b{background:var(--acc-bright);margin-left:6px}
.gift-vs li i{background:var(--night-line)}
.gift-vs li i::after{background:var(--c)!important}
.gift-vs li[style*='--ua-c'] i::after{background:var(--ua-flag)!important}
.gift-vs li span{white-space:nowrap}

/* ── The family, with the foundation as the fourth card ── */
@media (min-width:900px){.fam.fam--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.fam--four{gap:14px}
.fam-c--growth{--b:#12A66A}
.fam-c--growth h3 svg{color:var(--ink)}
.fam-shot--me{display:grid}
.fam-me-art{aspect-ratio:16/9;display:grid;place-items:center;align-content:center;gap:6px;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc-bright) 24%,transparent),transparent),var(--night);color:#fff;text-align:center}
.fam-me-art svg{width:44px;height:auto}
.fam-me-art b{font:720 1.05rem/1 var(--display)}
.fam-me-art small{font:400 .66rem/1 var(--mono);color:var(--on-night-2);letter-spacing:.06em}
.fam-c.me h3 svg{color:#fff}
.fam-wall{margin-top:14px;display:grid;gap:12px 22px;align-items:center;padding:16px clamp(16px,2vw,24px);border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
@media (min-width:900px){.fam-wall{grid-template-columns:auto minmax(0,1fr) auto}}
.fw-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc-tint);color:var(--acc-ink)}
.fw-ic svg{width:24px;height:24px}
.fam-wall h3{font-size:1.15rem}
.fam-wall p{color:var(--ink-2);font-size:.97rem;margin-top:3px;max-width:70ch}

/* ── Where we are: the road to day one ── */
.rd{padding:16px clamp(14px,2vw,22px) 20px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);display:grid;gap:14px}
.rd-top{display:flex;align-items:center;gap:12px}
.rd-top .fs-k{margin-left:auto;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink)}
.rd-track{display:grid;gap:12px;position:relative}
@media (min-width:900px){
  .rd-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .rd-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:22px;height:2px;background:var(--line)}
  .rd-track::after{content:"";position:absolute;left:12.5%;top:22px;height:2px;width:calc((var(--at) - 1) * 25%);background:var(--ink)}
}
.rd-s{position:relative;z-index:1;display:grid;gap:10px;align-content:start}
.rd-b{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:9px;text-align:center;padding:0 4px}
.rd-b i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);font:720 1.05rem/1 var(--display);font-style:normal;color:var(--ink-2);transition:transform .35s var(--ease),border-color .3s,background .3s,color .3s}
.rd-b i svg{width:16px}
.rd-b span{display:grid;gap:5px}
.rd-b b{font:720 1.02rem/1.2 var(--display);letter-spacing:-.01em}
.rd-b em{font:500 .66rem/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rd-b:hover i{transform:scale(1.08);border-color:var(--ink)}
.rd-b:focus-visible i{outline:2px solid var(--acc);outline-offset:3px}
.rd-s--done .rd-b i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rd-s--now .rd-b i{background:var(--acc-bright);border-color:var(--acc-bright);color:var(--night);animation:ping 2.4s var(--ease) infinite}
.rd-s--now .rd-b em{color:var(--acc-ink)}
.rd-b[aria-pressed="true"] i{transform:scale(1.12);box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--ink)}
.rd-p{display:grid;gap:9px;padding:12px 13px;border-radius:14px;background:var(--paper);align-content:start}
.rd-note{font-size:.93rem;line-height:1.45;color:var(--ink-2)}
.rd-k{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rd-tasks{display:grid;gap:6px}
.rd-tasks li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:.9rem;line-height:1.35}
.rd-tasks svg{width:16px;height:16px;margin-top:2px;padding:1px;border-radius:50%;border:1.5px solid var(--line);color:transparent}
.rd-s--done .rd-tasks svg{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rd-tasks li.done svg{background:var(--acc);border-color:var(--acc);color:var(--night)}
.rd-you{display:grid;gap:8px;padding-top:9px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.rd-you .try-b{justify-self:start;min-height:34px;font-size:.84rem;text-decoration:none}
@media (min-width:900px){
  html.js .rd-p{opacity:.55;transition:opacity .35s}
  html.js .rd-s.sel .rd-p{opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
}

/* ── Get involved ── */
.iv-pick{margin-bottom:16px;display:grid;gap:10px;padding:14px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
.ivs{display:grid;gap:14px}
@media (min-width:700px){.ivs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ivs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.iv{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:12px;min-width:0;transition:box-shadow .35s,border-color .35s,transform .35s var(--ease)}
.iv-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--paper);color:var(--ink)}
.iv-ic svg{width:24px;height:24px}
.iv h3{font-size:1.3rem}
.iv-for{color:var(--ink-2);font-size:.97rem;line-height:1.45}
.iv-list{display:grid;gap:7px}
.iv-list li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:.95rem;line-height:1.4}
.iv-list svg{width:18px;height:18px;margin-top:2px;color:var(--acc-large)}
.iv-note{font-size:.88rem;line-height:1.4;color:var(--muted);padding:9px 11px;border-radius:10px;background:var(--paper)}
.iv .btn{margin-top:auto;align-self:stretch;justify-content:space-between;min-height:46px;font-size:.93rem;white-space:nowrap;padding:0 16px 0 14px}
.iv--main{background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.iv--main .iv-ic{background:var(--night-2);color:var(--acc-bright)}
.iv--main .iv-for,.iv--main .iv-list li{color:var(--on-night-2)}
.iv--main .iv-list svg{color:var(--acc-bright)}
.iv.fit{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),0 24px 44px -30px rgba(17,24,40,.45);transform:translateY(-4px)}
.ivs.picked .iv:not(.fit){opacity:.55}

/* ── Promises: four cards in two rows ── */
@media (min-width:1100px){.rules-g.rules-g--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.p2-tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.p2-tot p{display:grid;gap:5px;padding:9px 10px;border-radius:10px;background:var(--night);border:1px solid var(--night-line)}
.p2-tot small{font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.p2-tot b{font:720 1.3rem/1 var(--display);color:var(--on-night);font-variant-numeric:tabular-nums}
.p2-tot.ex b{color:var(--acc-bright)}

/* shared bits whose home section was Growth's "leaks" (removed): the count beside a summary bar */
.sum-n{display:flex;align-items:center;gap:10px}
.sum-n b{font:720 3.2rem/.9 var(--display);letter-spacing:-.04em;color:var(--acc-large);font-variant-numeric:tabular-nums;min-width:.62em}
.sum-n span{font:500 .68rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sum-n b.tick{animation:tick .6s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(4px)}}

/* ═══ Round 1 (2026-10-22): visual ═══ */
.hdr.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--u4);opacity:.9}
/* a big soft shield behind the hero card, in the picked programme's colour */
.pk::before{content:"";position:absolute;z-index:-1;left:-10px;top:-14px;width:min(78%,430px);aspect-ratio:617/789;background:var(--acc);opacity:.07;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 617 789'%3E%3Cpath d='M0 0H617V488C608.8 519.2 609.5 568.6 558.4 639C482.3 738.6 412 736.9 308.5 789C205 736.9 134.7 738.6 58.6 639C7.5 568.6 8.2 519.2 0 488Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 617 789'%3E%3Cpath d='M0 0H617V488C608.8 519.2 609.5 568.6 558.4 639C482.3 738.6 412 736.9 308.5 789C205 736.9 134.7 738.6 58.6 639C7.5 568.6 8.2 519.2 0 488Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-6deg);transition:background .5s}
/* programme cards: a shield watermark in the band, tinted try box */
.pg-band{overflow:hidden}
.pg-band::after{content:"";position:absolute;right:-18px;bottom:-30px;width:118px;aspect-ratio:617/789;background:#fff;opacity:.1;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 617 789'%3E%3Cpath fill-rule='evenodd' d='M0 0H617V488C608.8 519.2 609.5 568.6 558.4 639C482.3 738.6 412 736.9 308.5 789C205 736.9 134.7 738.6 58.6 639C7.5 568.6 8.2 519.2 0 488ZM446 147C452.3 162.3 490.6 280.7 496.3 296.7C518.5 367.5 534.9 397.6 525.3 461.3C509.9 537.1 489.4 545 333 669C334 663.3 442 161.1 446 147ZM171 147C164.7 162.3 126.4 280.7 120.7 296.7C98.5 367.5 82.1 397.6 91.7 461.3C107.1 537.1 127.6 545 284 669C283 663.3 175 161.1 171 147Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 617 789'%3E%3Cpath fill-rule='evenodd' d='M0 0H617V488C608.8 519.2 609.5 568.6 558.4 639C482.3 738.6 412 736.9 308.5 789C205 736.9 134.7 738.6 58.6 639C7.5 568.6 8.2 519.2 0 488ZM446 147C452.3 162.3 490.6 280.7 496.3 296.7C518.5 367.5 534.9 397.6 525.3 461.3C509.9 537.1 489.4 545 333 669C334 663.3 442 161.1 446 147ZM171 147C164.7 162.3 126.4 280.7 120.7 296.7C98.5 367.5 82.1 397.6 91.7 461.3C107.1 537.1 127.6 545 284 669C283 663.3 175 161.1 171 147Z'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-band>*{position:relative;z-index:1}
.pg-try{background:color-mix(in srgb,var(--t) 42%,var(--card));border:1px dashed color-mix(in srgb,var(--c) 35%,var(--line))}
.pg-try .try-b{background:var(--card)}
.pl-seg[data-pl="an"] b,.pl-seg[data-pl="sp"] b{overflow:visible}
/* night headings: the same four-colour underline */
.night h2 em{background-image:var(--u4)}
/* calculator: programme dots, a taller year chart, the Ukraine label on its flag */
.pills span[data-k] i{width:9px;height:9px;border-radius:50%;background:var(--c-bright);margin-right:8px;flex:none}
.pills span[data-k="ua"] i{background:var(--ua-flag)}
.pills input:checked+span[data-k] i{background:var(--c)}
.pills input:checked+span[data-k="ua"] i{background:var(--ua-flag)}
.gy-bars{height:128px}
.gsplit [data-gs="ua"] b{color:#0B0F1A;text-shadow:none;background:#FFD500;padding:3px 6px;border-radius:6px}
/* family: the foundation's own programmes, in colour; its card's top line is the four-colour bar */
.fam-c.me::before{background:var(--u4)!important}
.fam-progs li{display:inline-flex;align-items:center;gap:7px}
.fam-progs li i{width:8px;height:8px;border-radius:50%;background:var(--c-bright)}
.fam-progs li[data-k="ua"] i{background:var(--ua-flag)}
.fam-me-art::after{content:"";width:120px;height:4px;border-radius:4px;background:var(--u4);margin-top:4px}
/* road: the step we're on gets a tint */
@media (min-width:900px){html.js .rd-s--now .rd-p{background:color-mix(in srgb,var(--acc-tint) 70%,var(--paper))}}
/* get involved: tinted icons; rows that belong to a programme tick in its colour */
.iv-ic{background:var(--acc-tint);color:var(--acc-ink)}
.iv-list li[data-k] svg{color:var(--c)}
.iv--main .iv-list li[data-k] svg{color:var(--c-bright)}
.iv-list li[data-k="ua"] svg{color:#0057B7}.iv--main .iv-list li[data-k="ua"] svg{color:#FFD500}
/* about: the photo sits on the four-colour bar */
.pt-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--u4);z-index:2}
/* closing: shield flames in the picked programme's colours; builder dots */
/* the closing shield is the logo: blue and yellow flames always, whatever is picked (user, 2026-10-23) */
.sfl-l{stop-color:#0057B7}.sfl-r{stop-color:#FFD500}
.shield > path.eye-line{stroke:#FFD500}
.final-mark::before{background:radial-gradient(closest-side,rgba(61,123,240,.26),rgba(255,213,0,.08) 60%,transparent)}
.fb-set .pills span[data-k] i{width:8px;height:8px}
/* footer: the four programmes under the logo */
.ftr-progs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ftr-progs a{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--on-night);text-decoration:none;font:600 .8rem/1 var(--body);transition:background .2s}
.ftr-progs a:hover{background:rgba(255,255,255,.12)}
.ftr-progs i{width:8px;height:8px;border-radius:50%;background:var(--c-bright)}
.ftr-progs a[data-k="ua"] i{background:var(--ua-flag)}
.ftr-progs em{font:500 .7rem/1 var(--mono);font-style:normal;color:var(--on-night-2)}
.shield .eye-fill{fill:url(#shield-fl)}

/* ═══ Round 2 (2026-10-22): friendly and interactive ═══ */
/* header: the programme you're backing, once you've picked one */
.hdr-pick{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 11px;border-radius:999px;background:var(--acc-tint);color:var(--acc-ink);font:600 .86rem/1 var(--body);text-decoration:none;margin-left:4px;transition:background .3s,color .3s}
.hdr-pick i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
html[data-chosen="ua"] .hdr-pick i{background:var(--ua-flag)}
.hdr-pick b{font-weight:700}
.hdr-pick.pop{animation:pop .5s var(--ease)}
@media (max-width:1180px){.hdr-pick{display:none}}
.hero .pk-cards{touch-action:pan-y}
/* programmes: "your pick" on the card you chose anywhere on the page */
.pg-yours{display:none;font-style:normal;background:#FFD500;color:#0B0F1A;border-radius:99px;padding:3px 8px;letter-spacing:.08em}
html[data-chosen="fh"] .pg[data-pg="fh"] .pg-yours,html[data-chosen="ua"] .pg[data-pg="ua"] .pg-yours,html[data-chosen="an"] .pg[data-pg="an"] .pg-yours,html[data-chosen="sp"] .pg[data-pg="sp"] .pg-yours{display:inline-block;animation:pop .5s var(--ease)}
html[data-chosen="fh"] .pg[data-pg="fh"] .pg-f,html[data-chosen="ua"] .pg[data-pg="ua"] .pg-f,html[data-chosen="an"] .pg[data-pg="an"] .pg-f,html[data-chosen="sp"] .pg[data-pg="sp"] .pg-f{box-shadow:0 0 0 2px var(--c),0 26px 46px -30px var(--c)}
/* calculator: type your own amount */
.c-own{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.c-own label{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.c-eur{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 14px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);color:var(--on-night-2);font-weight:600}
.c-eur:focus-within{border-color:var(--acc-bright)}
.c-eur input{width:96px;height:34px;border:0;background:transparent;color:var(--on-night);font:600 1rem/1 var(--body);outline:0;font-variant-numeric:tabular-nums}
.c-own-say{font-size:.84rem;color:var(--acc-bright)}
.gsplit i:hover{filter:brightness(1.12)}
/* road: counter, and ask to be told when a step is done */
.rd-count{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:5px 9px;border-radius:999px;background:var(--paper)}
.rd-ping{display:inline-flex;align-items:center;gap:7px;justify-self:start;font:600 .84rem/1 var(--body);color:var(--acc-ink);text-decoration:none;padding:6px 0}
.rd-ping svg{width:16px;height:16px}
.rd-ping:hover{text-decoration:underline;text-underline-offset:3px}
/* get involved: which programme */
.iv-progs{display:grid;gap:8px}
.iv-progs>div{display:flex;flex-wrap:wrap;gap:5px}
.iv-p{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 .78rem/1 var(--body);cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.iv-p i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.iv-p[data-k="ua"] i{background:var(--ua-flag)}
.iv-p:hover{border-color:var(--c);transform:translateY(-1px)}
.iv-p[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.iv-p[aria-pressed="true"] i{background:#fff}
/* family: the programme chips are buttons now */
.fam-pb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.fam-pb:focus-visible{outline:2px solid var(--acc-bright);outline-offset:4px;border-radius:99px}
.fam-progs li:has(.fam-pb):hover{background:rgba(255,255,255,.16)}
/* about: the question that follows the pick */
.pt-pills .try-b--prog{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-tint)}
.final-mark{display:grid;justify-items:center}
.ftr .ftr-progs{display:flex}
#p1-prog{font-weight:600}

/* ═══ Round 3 (2026-10-22): even more ═══ */
/* "all four": the fifth choice, in the logo's own colours */
[data-pick="all"],[data-k="all"]{--c:#26314B;--c-ink:#1B2438;--c-bright:#FFD500;--t:#E7EBEF;--glow:rgba(61,123,240,.22);--band:linear-gradient(135deg,#222C44,#0B0F1A);--fl-l:#3D7BF0;--fl-r:#FFD500}
html[data-pick="all"] .pkc[data-k="all"]{visibility:visible;opacity:1;transform:none;transition-delay:0s}
html[data-pick="all"] .pk-v[data-k="fh"]{display:block}
.pkc--all .pkc-h{box-shadow:inset 0 -5px 0 0 transparent;position:relative}
.pkc--all .pkc-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--u4)}
.pka{display:grid;gap:7px}
.pka li{display:grid;grid-template-columns:30px minmax(0,1fr) 64px 50px;gap:9px;align-items:center;font-size:.9rem}
.pka-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--t);color:var(--c)}
.pka li[data-k="ua"] .pka-ic{background:#FFF6CC;color:#0057B7}
.pka-ic svg{width:16px;height:16px}
.pka b{font-weight:650;line-height:1.2}
.pka-bar{height:7px;border-radius:7px;background:var(--paper-2);overflow:hidden}
.pka-bar i{display:block;height:100%;border-radius:inherit;background:var(--c)}
.pka li[data-k="ua"] .pka-bar i{background:var(--ua-flag)}
.pka-fund .pka-ic{background:var(--paper-2);color:var(--ink-2)}
.pka-fund .pka-bar i{background:repeating-linear-gradient(135deg,#9AA3B5 0 2px,transparent 2px 5px)}
.pka em{font:700 .95rem/1 var(--display);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.pka-note{font-size:.8rem;line-height:1.35;color:var(--muted)}
.pkc--all .pkc-go{background:var(--ink)}
/* side column: tour control by the label, "all four" as a real choice, Karol */
.pk-l{justify-content:flex-start}
.pk-l .bd-play{width:24px;height:24px;margin-left:auto}
.pk-l .bd-play svg{width:9px;height:9px}
.pk-all{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:7px 10px 7px 8px;border-radius:14px;border:1.5px dashed var(--line);background:transparent;font:600 .9rem/1.2 var(--body);color:var(--ink-2);text-align:left;cursor:pointer;text-decoration:none;transition:border-color .25s,background .25s,box-shadow .3s}
.pk-all:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.pk-all-ic{width:24px;height:24px;border-radius:8px;flex:none;background:conic-gradient(var(--fh-c) 0 50%,var(--ua-c) 0 80%,var(--an-c) 0 90%,var(--sp-c) 0)}
html[data-pick="all"] .pk-all{border-style:solid;border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 16px 28px -20px rgba(17,24,40,.6)}
.pk-tour{font:400 .7rem/1.3 var(--mono);color:var(--muted);padding:0 6px}
.pk-karol{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;box-shadow:0 14px 26px -22px rgba(17,24,40,.5);transition:border-color .2s,transform .25s var(--ease)}
.pk-karol img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc)}
.pk-karol b{display:block;font:700 .84rem/1.2 var(--body)}
.pk-karol small{display:block;font-size:.76rem;color:var(--muted)}
.pk-karol:hover{border-color:var(--ink);transform:translateY(-1px)}
@media (max-width:1099px){.pk-karol{display:none}.pk-l .bd-play{display:none}.pk-all{display:flex;grid-column:1/-1;justify-content:center}}
/* programmes: every euro granted, as a ring around the logo shield (redesigned 2026-10-23) */
.pg-head{display:grid;gap:18px;margin-bottom:clamp(24px,3vw,36px)}
.pg-head .sec-head{margin-bottom:0}
@media (min-width:980px){.pg-head{grid-template-columns:minmax(0,1fr) 270px;align-items:center;gap:clamp(28px,4vw,56px)}}
.ss{margin:0;display:grid;justify-items:center;gap:8px}
.ss svg{width:min(262px,72vw);height:auto;overflow:visible}
.ss-track{fill:none;stroke:var(--paper-2);stroke-width:34}
.ss-halo{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.ss-arc{fill:none;stroke-linecap:butt;transition:transform .35s var(--ease),opacity .3s,filter .25s}
.ss-part{cursor:pointer;outline:none}
.ss-part .ss-arc{filter:drop-shadow(0 6px 8px rgba(17,24,40,.18))}
.ss-part:hover .ss-arc,.ss-part:focus-visible .ss-arc,.ss-part.on .ss-arc{transform:translate(var(--dx),var(--dy));filter:drop-shadow(0 10px 12px rgba(17,24,40,.28)) brightness(1.06)}
.ss-part:focus-visible .ss-arc{stroke-dasharray:none;outline:none}
.ss-labels text{font:800 11.5px/1 var(--display);fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(11,15,26,.35);stroke-width:2px}
.ss-labels text.big{font-size:15px}
.ss-name{font:700 13px/1 var(--body);fill:#fff;text-anchor:middle}
.ss-sub{font:500 10px/1 var(--mono);fill:#A3ACBF;text-anchor:middle;letter-spacing:.04em}
.ss figcaption{display:grid;gap:2px;text-align:center}
.ss figcaption b{font:700 .9rem/1.2 var(--body)}
.ss figcaption span{font:400 .72rem/1.3 var(--mono);color:var(--muted)}
html[data-chosen="fh"] .ss-part:not([data-pick="fh"]) .ss-arc,html[data-chosen="ua"] .ss-part:not([data-pick="ua"]) .ss-arc,html[data-chosen="an"] .ss-part:not([data-pick="an"]) .ss-arc,html[data-chosen="sp"] .ss-part:not([data-pick="sp"]) .ss-arc{opacity:.42}
@media (prefers-reduced-motion:reduce){.ss-arc{transition:none}}
/* calculator: copy my numbers beside the WhatsApp button */
.gift-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gift-go .try-b{background:transparent;border-color:var(--night-line);color:var(--on-night)}
.gift-go .try-b:hover{border-color:var(--on-night-2)}
/* road: updated date */
.rd-upd{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink);padding:5px 9px;border-radius:999px;background:var(--acc-tint)}
.rd-top{flex-wrap:wrap}
/* FAQ: the four, as picks */
.qa-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.qa-pick a{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:600 .84rem/1 var(--body);text-decoration:none;color:var(--ink)}
.qa-pick a:hover{border-color:var(--c)}
.qa-pick i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.qa-pick a[data-pick="ua"] i{background:var(--ua-flag)}
/* footer: Karol's face on the WhatsApp row */
.fi--face{padding:0;overflow:hidden}
.fi--face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:inherit}

/* side column fits beside the card: one-line items, compact chips */
.pk-side{gap:8px}
.pk-b{padding:6px 9px 9px 7px}
.pk-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-chip{padding:8px 11px;font-size:.82rem}
.pk-chip small{font-size:.66rem}
.pk-karol{padding:5px 10px 5px 5px}
.pk-karol img{width:32px;height:32px}
.pk-l{letter-spacing:.1em;font-size:.64rem;white-space:nowrap}

/* a night section and the light one after it: no double padding at the colour change */
.sec.night{padding-bottom:clamp(3rem,5.6vw,4.9rem)}
.sec.night+.sec:not(.night){padding-top:clamp(3.2rem,6vw,5.1rem)}
.sec.night{padding-top:clamp(3.2rem,6vw,5.1rem)}
.iv-chosen{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--night-2);color:var(--on-night);font-size:.88rem;line-height:1.35}
.iv-chosen[hidden]{display:none}
.iv-chosen i{width:10px;height:10px;border-radius:50%;background:var(--acc-bright);margin-top:4px;flex:none}
html[data-chosen="ua"] .iv-chosen i{background:var(--ua-flag)}

/* header logo on the page, not on a black plate (user, 2026-10-23) */
.brand--hdr{color:var(--ink);gap:11px}
.brand--hdr svg{width:26px}
.brand--hdr span{display:grid;gap:3px}
.brand--hdr b{font:700 1.08rem/1 var(--display);letter-spacing:-.01em}
.brand--hdr small{font:400 .72rem/1 var(--mono);color:var(--muted)}
@media (max-width:460px){.brand--hdr small{display:none}}

/* ═══ One logo everywhere (user, 2026-10-23): navy shield, blue + yellow flames; on dark or coloured
   backgrounds it sits on a white tile ═══ */
.logo-tile{display:grid;place-items:center;background:#fff;border-radius:12px;padding:7px 8px;box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
.pkc-shield.logo-tile{width:50px;padding:8px 9px;filter:none}
.pg-shield.logo-tile{width:48px;padding:7px 8px;filter:none}
.ss-name{fill:var(--ink)}.ss-sub{fill:var(--muted)}
.ss svg circle[fill="url(#ss-disc)"]{stroke:var(--line);stroke-width:1}
.ftr .brand svg,.fam-me-art svg,.fam-c.me h3 svg,.pt-photo figcaption svg{background:#fff;color:var(--ink);border-radius:7px;padding:4px 5px;box-sizing:content-box}
.fam-c.me h3 svg{color:var(--ink)}
/* the closing shield: navy on a white card, flames blue and yellow */
.shield{background:#fff;border-radius:30px;padding:30px 34px;box-sizing:border-box;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.shield > path:not(.fill){stroke:var(--ink)}
.shield .fill{fill:var(--ink)}
.sfl-l{stop-color:#3D7BF0}

/* ═══ User pass 2026-10-23 b: no white tile behind the logo. The navy logo keeps a thin white edge
   (outline drawn from its own silhouette) so it reads on blue, coloured and dark grounds ═══ */
.logo-tile{background:none;box-shadow:none;padding:0;border-radius:0}
.pkc-shield.logo-tile,.pg-shield.logo-tile{padding:0;width:44px}
.logo-tile svg,.ftr .brand svg,.fam-me-art svg,.fam-c.me h3 svg,.pt-photo figcaption svg{background:none;padding:0;
  filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 6px 10px rgba(0,0,0,.3))}
/* green is the page colour until a visitor picks a programme (then the page takes that programme's colour) */
html:not([data-chosen]){--c:#0B7A53;--c-ink:#096444;--c-bright:#4BE0A3;--t:#DDF1E8;--glow:rgba(11,122,83,.28)}
/* closing shield: no white card, centred in its column, a little bigger; white edge so the navy reads on the dark */
.shield{background:none;box-shadow:none;padding:0;border-radius:0;width:min(100%,300px);margin-inline:auto;justify-self:center;align-self:center;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.shield > path:not(.fill){stroke:#fff}
.final-mark{place-items:center;justify-content:center}
.final-mark::before{inset:0;margin:auto;width:110%;aspect-ratio:1}
@media (max-width:899px){.final-mark{justify-items:center}.shield{width:140px}}

/* generated from PROG: the four-colour bar, each colour as wide as its share */
:root{--u4:linear-gradient(90deg,var(--fh-c) 0% 50%,var(--ua-c) 50% 80%,var(--an-c) 80% 90%,var(--sp-c) 90% 100%)}