/* HexAlpha — HEXENKRAFT s.r.o.
   Dark, technical, built on the supplied palette. Peach carries every action,
   crimson is reserved for risk and appears nowhere else, so colour itself
   carries meaning. Sections: 1 fonts, 2 tokens, 3 base, 4 header, 5 hero,
   6 blocks, 7 risk, 8 programme, 9 form, 10 footer, 11 dialogs, 12 motion,
   13 print, 14 narrow. */

/* ---------------------------------------------------------------- 1 fonts
   Served from this origin, never a font CDN, so no request leaves the
   visitor's browser to a third party before the cookie choice is made. One
   variable file per family per Unicode range covers every weight; the Latin
   Extended file carries the Czech diacritics and is fetched only where it is
   needed. Both families are under the SIL Open Font License. */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/grotesk-ext.woff2') format('woff2');
  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:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/grotesk.woff2') format('woff2');
  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:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/sans-ext.woff2') format('woff2');
  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:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/sans.woff2') format('woff2');
  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; }

/* --------------------------------------------------------------- 2 tokens */
:root{
  --void:#181A2F;
  --deep:#242E49;
  --slate:#37415C;
  --peach:#FDA481;
  --crimson:#B4182D;
  --maroon:#54162B;

  --ink:#EFF2F9;
  --ink-2:#C2CADD;
  --mute:#8D98B5;
  --line:rgba(253,164,129,.14);
  --line-2:rgba(255,255,255,.09);

  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,sans-serif;

  --shell:74rem;
  --measure:38rem;
  --gut:clamp(18px,5vw,56px);
  --hh:64px;
  --r:3px;
  --r-lg:14px;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.32,.08,.16,1);
}

/* ----------------------------------------------------------------- 3 base */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--void); color:var(--ink);
  font-family:var(--text); font-size:16.5px; line-height:1.68;
  font-synthesis-weight:none; overflow-x:clip;
  background-image:
    radial-gradient(60rem 40rem at 78% -8%, rgba(180,24,45,.16), transparent 62%),
    radial-gradient(48rem 34rem at 4% 4%, rgba(55,65,92,.42), transparent 60%);
  background-attachment:fixed; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--peach); text-underline-offset:.22em; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; line-height:1.08;
  letter-spacing:-.024em; margin:0 0 .5em; }
h1{ font-size:clamp(2.2rem,5.6vw,4.1rem); line-height:1.0; letter-spacing:-.036em; }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3{ font-size:clamp(1.15rem,1.9vw,1.42rem); }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:2.5px solid var(--peach); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--peach);
  color:var(--void); padding:12px 20px; font-weight:600; }
.skip:focus{ left:0; }

.shell{ width:min(100% - var(--gut)*2, var(--shell)); margin-inline:auto; }
.measure{ max-width:var(--measure); }
.mute{ color:var(--ink-2); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

.kick{ display:flex; align-items:center; gap:.72em; font-family:var(--disp);
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach); margin:0 0 1.15em; }
.kick::before{ content:''; width:22px; height:1.5px; background:var(--peach); flex:none; }
.lede{ font-size:clamp(1.02rem,1.7vw,1.22rem); line-height:1.6; color:var(--ink-2); }

/* background is set here because a button element otherwise picks up the
   browser's own light default, which an anchor with the same class does not */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:transparent; padding:.82em 1.5em; border:1.5px solid transparent;
  border-radius:var(--r);
  font-family:var(--disp); font-weight:600; font-size:.94rem; letter-spacing:.005em;
  text-decoration:none; transition:background .2s var(--e), color .2s var(--e),
  border-color .2s var(--e), transform .2s var(--e); }
.btn:active{ transform:translateY(1px); }
.b-fill{ background:var(--peach); color:var(--void); }
.b-fill:hover{ background:#FFBB9E; color:var(--void); }
.b-line{ border-color:var(--slate); color:var(--ink); }
.b-line:hover{ border-color:var(--peach); color:var(--peach); }
.b-sm{ padding:.58em 1.05em; font-size:.85rem; }
.row{ display:flex; flex-wrap:wrap; gap:12px; }

/* --------------------------------------------------------------- 4 header */
.hdr{ position:sticky; top:0; z-index:80; background:rgba(24,26,47,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); }
.hdr-in{ height:var(--hh); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:none; }
.brand svg{ width:25px; height:25px; flex:none; }
.brand b{ font-family:var(--disp); font-weight:600; font-size:1.1rem; letter-spacing:-.02em; }
.brand s{ text-decoration:none; font-size:.6rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mute); }
.nav{ display:flex; align-items:center; gap:22px; }
.nav a{ text-decoration:none; color:var(--ink-2); font-size:.89rem; font-weight:500;
  position:relative; padding-block:5px; }
.nav a::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1.5px;
  background:var(--peach); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--e); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.hdr-act{ display:flex; align-items:center; gap:10px; flex:none; }
.lang{ font-family:var(--disp); font-size:.78rem; font-weight:600; letter-spacing:.07em;
  text-decoration:none; color:var(--ink-2); border:1.4px solid var(--slate);
  border-radius:var(--r); padding:.4em .7em; }
.lang:hover{ border-color:var(--peach); color:var(--peach); }
.burger{ display:none; width:40px; height:40px; border:1.4px solid var(--slate);
  background:none; border-radius:var(--r); position:relative; }
.burger i{ position:absolute; left:10px; right:10px; height:1.6px; background:var(--ink);
  transition:transform .3s var(--e); }
.burger i:nth-child(1){ top:16px; } .burger i:nth-child(2){ top:22px; }
.burger[aria-expanded=true] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded=true] i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.sheet{ position:fixed; inset:var(--hh) 0 auto; z-index:79; background:var(--deep);
  border-bottom:1px solid var(--line); padding:8px var(--gut) 24px;
  transform:translateY(-102%); transition:transform .4s var(--e); }
.sheet.open{ transform:none; }
.sheet a{ display:block; font-family:var(--disp); font-size:1.35rem; font-weight:500;
  text-decoration:none; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line-2); }
.sheet .btn{ margin-top:18px; width:100%; }

/* ----------------------------------------------------------------- 5 hero */
.hero{ padding-block:clamp(44px,7vw,92px) clamp(30px,4vw,54px); position:relative; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,4.5vw,60px); align-items:center; }
.hero-grid > *{ min-width:0; }
.hero h1{ margin-bottom:.38em; }
.hero .lede{ max-width:33rem; }
.hero-act{ margin-top:28px; }
.hero-fig{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3.3; border:1px solid var(--line); }
.hero-fig img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.hero-fig::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(210deg,rgba(24,26,47,.1),rgba(24,26,47,.72)); }
.tick{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line-2); font-size:.84rem; color:var(--mute); }
.tick span{ display:inline-flex; align-items:center; gap:.5em; }
.tick span::before{ content:''; width:5px; height:5px; background:var(--peach);
  transform:rotate(45deg); flex:none; }

.crumb{ font-size:.79rem; color:var(--mute); margin-bottom:16px; }
.crumb a{ color:var(--mute); text-decoration:none; }
.crumb a:hover{ color:var(--peach); }
.head{ padding-block:clamp(34px,5vw,64px) clamp(20px,2.5vw,32px); }
.head h1{ font-size:clamp(1.9rem,4.4vw,3rem); }

/* --------------------------------------------------------------- 6 blocks */
.sec{ padding-block:clamp(46px,6.5vw,92px); scroll-margin-top:calc(var(--hh) + 10px); }
.sec-sm{ padding-block:clamp(30px,4vw,52px); scroll-margin-top:calc(var(--hh) + 10px); }
.band{ background:var(--deep); border-block:1px solid var(--line-2); }

.s-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3.5vw,52px); align-items:end; margin-bottom:clamp(28px,3.6vw,48px); }
.s-head > p{ margin:0; }

.g2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.g3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.g2 > *,.g3 > *{ min-width:0; }

/* The idea cards. The hairline above each one draws itself in, which is the
   page's signature move and costs nothing. */
.idea{ padding-top:20px; border-top:1px solid var(--line-2); position:relative; }
.idea::before{ content:''; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--peach); transform:scaleX(0); transform-origin:left;
  transition:transform .95s var(--e-soft); }
.idea.in::before{ transform:scaleX(1); }
.idea i{ font-style:normal; font-family:var(--disp); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; color:var(--peach); display:block; margin-bottom:12px; }
.idea h3{ margin-bottom:.5em; }
.idea p{ margin:0; color:var(--ink-2); font-size:.95rem; }

.card{ background:var(--deep); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px); }
.card h3{ font-size:1.08rem; margin-bottom:.5em; }
.card p{ margin:0; color:var(--ink-2); font-size:.93rem; }

/* ----------------------------------------------------------------- 7 risk
   Crimson is used here and nowhere else on the site, so the colour itself
   says what the block is. */
.risk{ background:linear-gradient(120deg,var(--maroon),var(--crimson) 140%);
  border:1px solid rgba(253,164,129,.28); border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,40px); position:relative; overflow:hidden; }
.risk::after{ content:''; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.6) 9px 10px); }
.risk .kick{ color:#FFD9C6; }
.risk .kick::before{ background:#FFD9C6; }
.risk h2{ color:#fff; max-width:22rem; }
.risk p{ color:rgba(255,255,255,.92); max-width:40rem; margin:0; position:relative; }
.risk-note{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.22);
  font-size:.85rem; color:rgba(255,255,255,.78); }

/* ------------------------------------------------------------ 8 programme */
.mod{ display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:clamp(12px,2vw,26px);
  padding-block:clamp(16px,2.2vw,24px); border-top:1px solid var(--line-2); align-items:start; }
.mod:last-child{ border-bottom:1px solid var(--line-2); }
.mod-n{ font-family:var(--disp); font-size:.8rem; font-weight:700; letter-spacing:.12em;
  color:var(--peach); padding-top:.35em; }
.mod h3{ margin-bottom:.35em; }
.mod p{ margin:0; color:var(--ink-2); font-size:.94rem; max-width:44rem; }
.mod-h{ font-family:var(--disp); font-weight:600; font-size:.88rem; color:var(--mute);
  white-space:nowrap; padding-top:.35em; }
.tot{ display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:22px; font-size:.86rem;
  color:var(--mute); }
.tot b{ font-family:var(--disp); color:var(--peach); font-weight:700; }

.scope{ counter-reset:sc; margin:0; padding:0; }
.scope li{ counter-increment:sc; list-style:none; display:grid;
  grid-template-columns:2.4rem minmax(0,1fr); gap:1em; padding-block:1em;
  border-bottom:1px solid var(--line-2); align-items:start; }
.scope li:last-child{ border-bottom:none; }
.scope li::before{ content:counter(sc,decimal-leading-zero); font-family:var(--disp);
  font-weight:700; font-size:.85rem; color:var(--peach); padding-top:.3em; }
.scope li span{ color:var(--ink-2); line-height:1.6; }

.qa{ border-top:1px solid var(--line-2); max-width:52rem; }
.qa-i{ border-bottom:1px solid var(--line-2); }
.qa-q{ width:100%; background:none; border:0; text-align:left; padding:1.1em 2.4em 1.1em 0;
  font-family:var(--disp); font-size:1.03rem; font-weight:600; line-height:1.35;
  position:relative; color:var(--ink); }
.qa-x{ position:absolute; right:2px; top:1.4em; width:12px; height:12px; }
.qa-x::before,.qa-x::after{ content:''; position:absolute; background:var(--peach);
  left:0; top:5.2px; width:12px; height:1.6px; transition:transform .3s var(--e); }
.qa-x::after{ transform:rotate(90deg); }
.qa-i.open .qa-x::after{ transform:rotate(0); }
.qa-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--e); }
.qa-i.open .qa-a{ grid-template-rows:1fr; }
.qa-a > div{ overflow:hidden; }
.qa-a p{ margin:0 0 1.25em; color:var(--ink-2); max-width:var(--measure); font-size:.95rem; }

.kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5em 1.6em;
  font-size:.93rem; align-items:baseline; }
.kv dt{ color:var(--mute); }
/* an email address is a single unbreakable token, so it has to be allowed to
   break or it sets the minimum width of the whole column */
.kv dd{ margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }

.cta{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--deep);
  padding:clamp(26px,4.5vw,52px); text-align:center; }
.cta h2{ margin-bottom:.4em; }
.cta p{ color:var(--ink-2); max-width:34rem; margin-inline:auto; }
.cta .row{ justify-content:center; margin-top:24px; }

/* ----------------------------------------------------------------- 9 form */
.form{ background:var(--deep); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(20px,3.2vw,36px); }
.fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld.wide{ grid-column:1 / -1; }
.fld label{ font-size:.81rem; font-weight:600; color:var(--ink-2); }
.fld label i{ font-style:normal; color:var(--mute); font-weight:400; }
.fld input,.fld select,.fld textarea{ font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--void); border:1.5px solid var(--slate); border-radius:var(--r);
  padding:.7em .85em; width:100%; transition:border-color .2s; }
.fld textarea{ min-height:6em; resize:vertical; }
.fld select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--peach) 50%),linear-gradient(135deg,var(--peach) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.4em; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--peach); }
.fld.bad input,.fld.bad select,.fld.bad textarea{ border-color:#FF6B6B; }
.err{ font-size:.8rem; color:#FF8A8A; min-height:1.1em; }
.consent{ grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.7em; align-items:start; font-size:.88rem; color:var(--ink-2); line-height:1.55; }
.consent input{ width:18px; height:18px; margin-top:.2em; accent-color:var(--peach); }
.form-foot{ margin-top:18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; }
.form-note{ font-size:.82rem; color:var(--mute); max-width:25rem; line-height:1.5; margin:0; }
.fallback{ margin-top:18px; padding:15px; background:var(--void); border:1px solid var(--line-2);
  border-radius:var(--r); font-size:.88rem; }
.fallback textarea{ width:100%; min-height:8.5em; margin-top:9px; font-family:inherit;
  font-size:.86rem; background:var(--deep); color:var(--ink); border:1px solid var(--slate);
  border-radius:var(--r); padding:.65em; }

.note{ background:var(--deep); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(16px,2.2vw,24px); }
.note h4{ font-family:var(--disp); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--peach); margin:0 0 .7em; }
.note p{ margin:0; font-size:.92rem; color:var(--ink-2); }
.note + .note{ margin-top:14px; }

/* -------------------------------------------------------------- 10 footer */
.disc{ background:var(--deep); border-block:1px solid var(--line-2); }
.disc p{ margin:0; padding-block:15px; font-size:.84rem; color:var(--ink-2); line-height:1.55; }
.disc b{ color:var(--peach); }
.ftr{ padding-block:clamp(38px,5vw,64px) 26px; font-size:.89rem; color:var(--ink-2);
  border-top:1px solid var(--line-2); }
.ftr a{ color:var(--ink-2); text-decoration:none; }
.ftr a:hover{ color:var(--peach); }
.ftr h4{ font-family:var(--disp); font-size:.68rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mute); margin:0 0 1em; }
.ftr-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(20px,3vw,40px);
  padding-bottom:30px; border-bottom:1px solid var(--line-2); }
.ftr-top > *{ min-width:0; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.ftr .brand b{ color:var(--ink); }
.blurb{ margin-top:14px; font-size:.86rem; line-height:1.6; max-width:23rem; color:var(--mute); }
.lnk{ background:none; border:0; padding:0; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:.2em; font-size:inherit; }
.lnk:hover{ color:var(--peach); }
.imprint{ padding-block:22px; border-bottom:1px solid var(--line-2); font-size:.81rem;
  line-height:1.75; color:var(--mute); }
.imprint b{ color:var(--ink-2); font-weight:600; }
.ftr-btm{ padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.79rem; color:var(--mute); }

/* ------------------------------------------------------------- 11 dialogs
   The question is centred and has to be answered, as specified. Both answers
   are real and either one closes it in a single click, so nobody is trapped:
   there is no third state where the reader is stuck. */
.ask-back{ position:fixed; inset:0; z-index:99; background:rgba(12,13,26,.82);
  backdrop-filter:blur(6px); display:grid; place-items:center; padding:var(--gut);
  opacity:0; pointer-events:none; transition:opacity .34s var(--e); }
.ask-back.show{ opacity:1; pointer-events:auto; }
.ask{ width:min(430px,100%); background:var(--deep); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,3.4vw,34px); text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.94) translateY(10px); transition:transform .38s var(--e); }
.ask-back.show .ask{ transform:none; }
.ask .kick{ justify-content:center; }
.ask h2{ font-size:clamp(1.3rem,2.6vw,1.72rem); margin-bottom:.45em; }
.ask p{ font-size:.93rem; color:var(--ink-2); margin-bottom:1.5em; }
.ask .row{ flex-direction:column; gap:10px; }
.ask .btn{ width:100%; }

.ck{ position:fixed; z-index:96; bottom:0; left:0; right:0; background:var(--deep);
  border-top:1px solid var(--line); transform:translateY(102%);
  transition:transform .42s var(--e); }
.ck.show{ transform:none; }
.ck-in{ padding-block:18px 20px; display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:18px 26px; align-items:center; }
.ck h4{ font-family:var(--disp); font-size:1.05rem; font-weight:600; margin:0 0 .35em; color:var(--ink); }
.ck p{ margin:0; font-size:.86rem; color:var(--ink-2); max-width:44rem; line-height:1.55; }
.ck .row{ flex:none; }
.ck-opts{ grid-column:1 / -1; display:none; gap:18px; flex-wrap:wrap; padding-top:14px;
  border-top:1px solid var(--line-2); }
.ck.x .ck-opts{ display:flex; }
.ck-opts label{ display:inline-flex; align-items:center; gap:.5em; font-size:.86rem; color:var(--ink-2); }
.ck-opts input{ width:16px; height:16px; accent-color:var(--peach); }
.ck-opts .fix{ color:var(--mute); }

/* --------------------------------------------------------------- 12 motion
   A horizontal wipe rather than a fade: the block is revealed left to right,
   which reads as something being set rather than something appearing. */
/* The resting state must never clip the box to zero width: a clipped element
   reports an intersection ratio of 0, so the observer that is supposed to
   reveal it never sees it arrive. The wipe therefore runs as an animation
   once the class is on, not as the state it starts from. */
.up{ opacity:0; transform:translateY(10px); will-change:opacity, transform;
  transition:opacity .45s linear, transform .7s var(--e-soft); }
.up.in{ opacity:1; transform:none; animation:wipe .85s var(--e-soft) both; }
@keyframes wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.stg > *{ opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--e-soft), transform .6s var(--e-soft); }
.stg.in > *{ opacity:1; transform:none; }
.stg.in > *:nth-child(2){ transition-delay:.07s; }
.stg.in > *:nth-child(3){ transition-delay:.14s; }
.stg.in > *:nth-child(4){ transition-delay:.21s; }
.stg.in > *:nth-child(5){ transition-delay:.28s; }
.stg.in > *:nth-child(6){ transition-delay:.35s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .up,.stg > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .idea::before{ transform:scaleX(1) !important; }
}

/* ---------------------------------------------------------------- 13 print */
@media print{
  .hdr,.sheet,.ask-back,.ck,.burger,.hero-act,.cta,.hero-fig{ display:none !important; }
  body{ background:#fff !important; color:#000; font-size:11pt; line-height:1.5; }
  .band,.card,.form,.note,.ftr,.disc{ background:none !important; border-color:#bbb !important; }
  .risk{ background:none !important; border:1.5pt solid #000 !important; }
  .risk h2,.risk p,.risk-note{ color:#000 !important; }
  .risk::after{ display:none; }
  .ftr,.ftr a,.imprint,.mute,.mod p,.card p{ color:#000 !important; }
  .sec,.hero{ padding-block:0 14pt; }
  .mod,.qa-i,.note,.risk{ page-break-inside:avoid; }
  .qa-a{ grid-template-rows:1fr !important; }
  .up,.stg > *{ opacity:1 !important; animation:none !important; transform:none !important; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:8pt; word-break:break-all; }
}

/* --------------------------------------------------------------- 14 narrow */
@media (max-width:1040px){ .brand s{ display:none; } }
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr-act > .btn{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-fig{ aspect-ratio:16/9; }
  .s-head{ grid-template-columns:1fr; align-items:start; }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .g2,.g3{ grid-template-columns:1fr; }
  .fields{ grid-template-columns:1fr; }
  .mod{ grid-template-columns:2.6rem minmax(0,1fr); }
  .mod-h{ grid-column:2; padding-top:0; margin-top:.4em; }
  .ck-in{ grid-template-columns:1fr; }
  .ck .row .btn{ flex:1 1 auto; }
}
@media (max-width:430px){
  /* 320px leaves 284px of content, which is narrower than a label column plus
     a value, so the pairs stack instead of shrinking the type */
  .kv{ grid-template-columns:1fr; gap:.1em; }
  .kv dt{ margin-top:.75em; }
  .kv dt:first-child{ margin-top:0; }
  .hdr-in{ gap:8px; }
  .brand{ gap:7px; }
  .brand svg{ width:22px; height:22px; }
  .brand b{ font-size:.98rem; }
  .hdr-act{ gap:7px; }
  .lang{ font-size:.72rem; padding:.36em .58em; }
  .burger{ width:36px; height:36px; }
  .burger i{ left:9px; right:9px; }
  .burger i:nth-child(1){ top:14px; } .burger i:nth-child(2){ top:20px; }
  .btn{ white-space:normal; text-align:center; line-height:1.3; }
  .hero-act .btn,.cta .row .btn{ flex:1 1 100%; }
  .ftr-top{ grid-template-columns:1fr; }
  .scope li{ grid-template-columns:1.8rem minmax(0,1fr); gap:.7em; }
}