/* Story page — redesign v2 (27. 9. 2026), variant F (B + synthesis pass).
   White page, dark navy blocks, cool grey panels, charcoal text. The look is
   the one Martin picked in the Design Lab (lab/, 27. 9. 2026, late night):
   before it the blocks were a lighter blue, the buttons red and the face
   Inter Tight. The tokens keep their names on purpose — --navy is the blocks,
   --red is the action colour, now a blue like Smarthlete's — so every var()
   still works. The action colour only on CTAs, the active language marker and
   the one accent word in the H1. Gold only as thin detail: hairlines, small
   numerals, icons. One family: Plus Jakarta Sans. Light for everyone; dark
   mode is deliberately off (decided 23. 8. 2026). */

/* Self-hosted (30. 9. 2026): the page used to load Plus Jakarta Sans from Google's
   servers, which a German court (LG München, 2022) ruled needs consent under GDPR.
   Variable font, normal style only (the page has no italics). latin covers
   English and Italian, latin-ext adds Czech and Turkish (čěřšžůňťď…). Files from
   Google Fonts v12, OFL licence. */
@font-face{font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-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:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin.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}

:root{
  --white:#FFFFFF;
  --card:#FFFFFF;          /* cards on the page: form, price cards, bios, myth backs, the points box */
  --panel:#F3F5F7;         /* cool light grey panels */
  --photo:#E6E7E7;         /* empty photo slot on white */
  --photo-grey:#E0E2E4;    /* empty photo slot on the grey band */
  --photo-navy:#D2D6D9;    /* empty photo slot on the navy */
  --line:#E2E2E3;
  --line-2:#CECECF;         /* decorative rules only */
  --field-line:#8B8B8D;    /* input borders: 3.4:1 on white, 3.1:1 on the panel (WCAG 1.4.11) */
  --ph-input:#747474;      /* input placeholders: 4.7:1 on white */

  --navy:#061D2D;          /* the blocks: myth fronts, outline buttons, focus ring. White on it 17:1 */
  --navy-2:#051926;        /* a step darker */
  --navy-line:#445662;     /* rules on the navy */
  --navy-mute:#9BA5AB;     /* secondary text on the navy, 6.9:1 */
  --on-navy:#FFFFFF;       /* body text on the navy */
  --ink:#202124;           /* headings and dark text: charcoal */
  --body:#1A1A1A;
  --mute:#6D6D6D;          /* 5.2:1 on white, 4.7:1 on the panel */

  --red:#337AB7;           /* the single action colour — a blue now, the name stays. 4.6:1 with white */
  --red-hover:#2D6BA1;
  --on-red:#FFFFFF;        /* text on the action colour */
  --err:#B42A1D;           /* validation messages only — an error state, not the action colour */
  --gold:#A58855;          /* thin details only — never body text on white */
  --gold-light:#A58855;    /* gold on the navy: the plain gold is 5.1:1 there, no lighter shade needed */
  --gold-line:rgba(165,136,85,.6);   /* gold hairlines on the navy */

  --ph-bg:#FFF3B0;
  --ph-line:#8A6D00;
  --ph-text:#7A6000;       /* #8A6D00 is 4.4:1 on #FFF3B0 — nudged darker to pass AA */

  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:var(--font);  /* headlines and big numbers — the Design Lab (lab/) can give them their own face */
  --r-sm:8px; --r:10px; --r-photo:11px; --r-lg:14px;
  --gutter:16px;
  --nav-h:65px;            /* sticky nav incl. its 1px border */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 12px)}  /* every anchor lands clear of the sticky nav */
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--font); font-size:17px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (min-width:960px){ body{font-size:18px} :root{--gutter:32px; --nav-h:73px} }

h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; margin:0; color:var(--ink);
  letter-spacing:-0.03em; text-wrap:balance}
/* the other big display type wears the headline face too */
.face-title,.founder-name,.tier-price,.pull-strong,.coach-strong,.brand,.myth-q{font-family:var(--font-display)}
h1{font-size:clamp(2.6rem,6vw,4.5rem); line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.1}   /* 1.06 was Inter Tight's: Jakarta's Ř Š Č reach 1.01 em, and the caron touched the line above */
h3{font-size:1.35rem; line-height:1.2; font-weight:800}
h4{font-size:1.15rem; line-height:1.25}
p{margin:0 0 1em; max-width:64ch}
a{color:inherit}
img{max-width:100%; display:block}

.wrap{max-width:1200px; margin:0 auto; padding:0 var(--gutter)}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.label{font-size:.9375rem; font-weight:600; color:var(--mute); margin:0 0 14px; letter-spacing:0}
.lede{font-size:1.2rem; line-height:1.5; color:var(--body); margin-top:18px}
.fine{font-size:.9rem; line-height:1.55; color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
/* the SAT number in s3P3 carries an inline gold colour — gold is not a text colour now */
.num[style]{color:inherit !important; font-weight:800}

:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
/* white ring on navy surfaces; navy again on the white cards that sit inside them */
.sec--navy :focus-visible,.footer :focus-visible{outline-color:var(--on-navy)}
.sec--navy .form-card :focus-visible,.bio :focus-visible{outline-color:var(--navy)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:-0.005em;
  padding:15px 24px; min-height:50px; border:2px solid var(--red); background:var(--red); color:var(--on-red);
  text-decoration:none; cursor:pointer; border-radius:var(--r-sm); text-align:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--red-hover); border-color:var(--red-hover)}
.btn--outline{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn--outline:hover{background:var(--navy); color:var(--on-navy); border-color:var(--navy)}
.btn--light{background:transparent; color:var(--on-navy); border-color:var(--on-navy)}   /* secondary on navy */
.btn--light:hover{background:var(--on-navy); color:var(--navy); border-color:var(--on-navy)}
.btn--sm{padding:10px 16px; min-height:44px; font-size:.9375rem}
.btn:disabled{opacity:.7; cursor:default}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
/* phones: the main buttons run the full width */
@media (max-width:479px){
  .hero .btnrow .btn,.step-btns .btn,.parents .btn,.strip .btn{width:100%}
}

/* ---------- placeholders — must never read as design ---------- */
.ph{display:inline; font:inherit; font-size:.92em; font-weight:600; color:var(--ph-text);
  background:var(--ph-bg); border:1.5px dashed var(--ph-line); border-radius:4px;
  padding:0 5px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.ph-block{display:block; background:var(--ph-bg); color:var(--ph-text);
  border:1.5px dashed var(--ph-line); border-radius:var(--r-sm);
  padding:12px 14px; margin:18px 0 0; font-size:.875rem; font-weight:500; line-height:1.5;
  max-width:66ch; text-align:left; letter-spacing:0}
.ph-block .ph{border:0; padding:0; background:none; font-weight:700}

/* read by screen readers, not shown (e.g. "Ukázat odpověď" on a myth tile) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- photo slots ----------
   Every slot: grey box, fixed aspect ratio, 16px corners, and a yellow label
   "FOTO n — what, who, orientation" that matches FOTKY.md. A photo listed in
   window.__PHOTOS (template.html) loads into the slot's <img> and covers it;
   the label then goes away. No photo = the label stays, nothing is fetched. */
.photo{position:relative; margin:0; background:var(--photo); border-radius:var(--r-photo); overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:14px}
.photo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease}
.photo.has-photo .photo-img{opacity:1}
.photo.has-photo .photo-ph{display:none}
.photo-ph{position:relative; display:block; background:var(--ph-bg); color:var(--ph-text);
  border:1.5px dashed var(--ph-line); border-radius:var(--r-sm); padding:9px 12px 10px;
  font-size:.8125rem; font-weight:500; line-height:1.4; max-width:36ch}
.photo-ph .ph{border:0; background:none; padding:0; font-weight:800; font-size:1em; letter-spacing:.01em}
.photo-spec{display:block; margin-top:5px; padding-top:5px; border-top:1px dashed rgba(138,109,0,.45); font-weight:700}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:var(--white); border-bottom:1px solid var(--line)}
.nav-row{display:flex; align-items:center; gap:10px; min-height:64px}
.brand{font-weight:800; font-size:1.25rem; line-height:1.1; letter-spacing:-0.03em; color:var(--ink);
  text-decoration:none; flex:1 1 auto; min-width:0; display:flex; align-items:center; min-height:44px}
/* UNIstates logo + name (Martin, 30 Sep, logo round 13): the mark is the EU flag and the US flag bent into one arch over
   a university, Europe's end cut into a point that pushes into America, the joint exactly on the centre line.
   One drawing (#logo-mark in the sprite) for the nav and the footer: its colours are the --mk-* properties below.
   The flag now lives in the mark, so "states" is plain red; the flag-striped "states" is retired (two flags side by side).
   Source and the brand files: 00_Brand_Strategy/Logo_oblouk_v13.html and 00_Brand_Strategy/logo/. */
.brand-mark{height:1.5em; width:2.78em; flex:none; margin-right:.42em}
.brand-word{white-space:nowrap}
.brand .brand-uni{color:var(--mk-ink)}
.brand .brand-states{color:var(--brand-red)}
.brand{--mk-eu:#003399; --mk-eustar:#FFCC00; --mk-red:#B31942; --mk-sw:#FFFFFF; --mk-cant:#0A3161; --mk-cstar:#FFFFFF;
  --mk-ink:#0A3161; --mk-cut:#FFFFFF; --brand-red:#B31942}
.brand--foot{--mk-eu:#2253D6; --mk-red:#D9304A; --mk-cant:#3D5FA8; --mk-ink:#FFFFFF; --mk-cut:var(--navy); --brand-red:#E8475C}
.nav-menu{display:none}
.navlinks{display:flex; gap:26px}
.navlinks a{font-size:.9375rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}
.navlinks a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px}
.lang{display:flex; gap:2px}
.lang a{font-size:.8125rem; font-weight:700; color:var(--mute); text-decoration:none; padding:6px 8px;
  border-radius:6px; border:1px solid transparent; line-height:1}
.lang a:hover{color:var(--ink)}
/* the active language is one of the few red things on the page: a red underline */
.lang a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--red);
  text-decoration-thickness:2px; text-underline-offset:5px}
.nav-cta{flex:0 0 auto}
.menu-btn{flex:0 0 auto; width:44px; height:44px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--white); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0}
.menu-bars,.menu-bars::before,.menu-bars::after{display:block; width:18px; height:2px; background:var(--navy);
  border-radius:1px; position:relative; transition:transform .2s ease, background-color .2s ease}
.menu-bars::before,.menu-bars::after{content:""; position:absolute; left:0}
.menu-bars::before{top:-6px} .menu-bars::after{top:6px}
.nav.is-open .menu-bars{background:transparent}
.nav.is-open .menu-bars::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .menu-bars::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:959px){
  .nav.is-open .nav-menu{display:flex; flex-direction:column; gap:18px; position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:1px solid var(--line); padding:18px var(--gutter) 26px}
  .nav.is-open .navlinks{flex-direction:column; gap:4px}
  .nav.is-open .navlinks a{font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; padding:8px 0}
  .nav.is-open .lang{gap:6px}
  .nav.is-open .lang a{font-size:.9375rem; padding:0 16px; min-height:44px; min-width:48px;
    display:inline-flex; align-items:center; justify-content:center; border-color:var(--line)}
}
/* Phones: logo + name + the CTA + the menu button have to share one row. At 360px the English button ("Send the numbers")
   leaves ~114px for the brand, so under 420px the logo and name step down to 1rem, and under 380px a little more.
   Under 360px there is no room for the logo at all: only the name, as before the logo existed. */
@media (max-width:419px){ .brand{font-size:1rem} .nav .brand-mark{height:1.3em; width:2.41em; margin-right:.36em} }
/* 360px with "Send the numbers" was still 9px short: a touch smaller, 2px less gap, a narrower button (same text). */
@media (max-width:379px){ .brand{font-size:.94rem} .nav-row{gap:8px} .nav .nav-cta{padding-left:12px; padding-right:12px} }
@media (max-width:359px){ .brand{font-size:1.1rem} .nav .brand-mark{display:none} }
@media (max-width:339px){ .brand{font-size:1rem} }
@media (min-width:960px){
  .brand{flex:0 1 auto; font-size:1.35rem}
  .nav-row{gap:28px; min-height:72px}
  .nav-menu{display:flex; align-items:center; gap:24px; margin-left:auto}
  .menu-btn{display:none}
}

/* ---------- hero ---------- */
.hero{padding:28px 0 56px}
.hero-grid{display:grid; gap:32px}
.hero h1 .accent{color:var(--red)}
/* readability, 1 Oct 2026: one sentence per line (build.mjs wraps them), a little less
   tracking and a slightly smaller size, so the second sentence breaks in two even lines */
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem); letter-spacing:-0.02em; word-spacing:.05em; line-height:1.08}
.h1-line{display:block}
/* 2 Oct 2026 (Martin): the sub-line is now a 5–6 line summary in this one font,
   so wider than the old one-sentence 40ch and "pretty" instead of "balance" */
.hero-sub{font-size:1.2rem; line-height:1.5; margin:20px 0 0; max-width:48ch; color:var(--ink); font-weight:500; text-wrap:pretty}
.hero .btnrow{margin-top:26px}
.photo--hero{aspect-ratio:4/5}
/* tablet: text and photo side by side already, so the portrait slot is not a 900px wall */
@media (min-width:720px) and (max-width:959px){
  .hero-grid{grid-template-columns:1.15fr .85fr; gap:32px; align-items:center}
}
@media (min-width:960px){
  .hero{padding:64px 0 96px}
  .hero-grid{grid-template-columns:1.08fr .92fr; gap:64px; align-items:center}
  .hero-sub{font-size:1.35rem; margin-top:28px}
  .hero .btnrow{margin-top:36px}
}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec--navy{background:var(--navy); color:var(--on-navy)}
.sec--navy h2,.sec--navy h3{color:var(--on-navy)}
.sec--navy .label{color:var(--navy-mute)}
.sec--navy .fine{color:var(--navy-mute)}
.panel{background:var(--panel); border-radius:var(--r-lg)}
@media (min-width:960px){ .sec{padding:112px 0} }

/* ---------- form fields (used by the form) ---------- */
.fields{display:grid; gap:14px 16px}
label{display:block; font-size:.9375rem; font-weight:600; color:var(--ink); margin-bottom:7px}
input[type="text"],input[type="email"]{
  width:100%; padding:13px 14px; font-family:var(--font); font-size:1.05rem; font-weight:500;
  font-variant-numeric:tabular-nums; background:var(--card); color:var(--ink);
  border:1.5px solid var(--field-line); border-radius:var(--r-sm); min-height:50px;
  transition:border-color .15s ease}
input::placeholder{color:var(--ph-input); font-weight:400; opacity:1}
input[type="text"]:focus,input[type="email"]:focus{border-color:var(--navy)}
#fPerfNow,#fPerfYear,#fSatScore{font-weight:700; font-variant-numeric:tabular-nums lining-nums}
.err{font-size:.9375rem; font-weight:600; color:var(--err); margin:10px 0 0; min-height:1.3em}
.pull{border-left:3px solid var(--gold); padding:2px 0 2px 20px; margin:28px 0 0; max-width:56ch}
.pull p{margin:0}

/* ---------- Co tě tam čeká + mýty: one section, two bands ----------
   Group one sits on a grey band straight under the white hero, group two on
   white, then the navy "Kdo jsme": white / grey / white / navy, no two
   same-coloured blocks in a row. */
.band{padding:64px 0 72px}
.band--reasons{background:var(--panel)}
.band--myths{padding-bottom:80px}
@media (min-width:960px){ .band{padding:80px 0 88px} .band--myths{padding-bottom:120px} }
.group-head{max-width:780px}
.group-head .lede{margin-bottom:0}
/* both group heads smaller than a section H2 (Martin, 27. 9. 2026: "zmenšit") */
.group-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1.1}
.group-head .lede{margin-top:12px}

/* "Co tě tam čeká": the points in one white box with navy check marks, the
   photo on the right from 640px, as tall as the box (Martin, 27. 9. 2026). */
.reasons-body{display:grid; gap:16px; margin-top:28px}
.reasons-card{background:var(--card); border-radius:var(--r-lg); padding:4px 20px}
.reasons{list-style:none; margin:0; padding:0}
.reasons li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; padding:18px 0; border-top:1px solid var(--line)}
.reasons li:first-child{border-top:0}
.reasons-ico{width:30px; height:30px; border-radius:8px; background:var(--navy); color:var(--on-navy)}
.reasons h3{font-size:1.1rem; line-height:1.3; margin:3px 0 4px}
.reasons p{margin:0; font-size:.98rem; line-height:1.55; max-width:52ch}
.reasons .ph-block{margin-top:6px}
.photo--boathouse{aspect-ratio:4/3; background:var(--photo-grey)}
@media (min-width:640px){
  .reasons-body{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:stretch}
  .reasons-body .photo--boathouse{aspect-ratio:auto; min-height:320px}
}
@media (min-width:960px){
  .reasons-body{gap:24px; margin-top:40px}
  .reasons-card{padding:8px 32px}
  .reasons li{gap:18px; padding:22px 0}
  .reasons h3{font-size:1.2rem}
}

/* ---------- flip cards ----------
   Front and back are the same size (Martin, 27. 9. 2026: a flipped card must
   not come out bigger). app.js makes every card as tall as the taller of its
   two faces, and every card of a grid row as tall as the row's tallest, so a
   turn never changes the card's box and nothing on the page moves. The back
   is absolutely positioned over the front, at least 100 % of it, so the answer
   is never truncated even before app.js has measured.
   - Mouse hover (.is-peek): the card turns while the pointer is on it.
   - Pinned (click, tap, Enter, Space): the card stays turned.
   aria-expanded = the answer is visible. */
.cards{display:grid; gap:12px; margin-top:28px; align-items:start}
@media (min-width:640px){ .cards{grid-template-columns:1fr 1fr; gap:16px} }

/* myths: small, almost square tiles, 2 rows × 4 (Martin, 27. 9. 2026, second
   pass: "malé obdélníky skoro jako čtverce 2x4"; the back no longer repeats the
   quote and the answer is one or two sentences). Four across from 720px, two on
   a phone (2 x 4 either way), one only below 360px. minmax(0,1fr): a tile made taller by its
   answer must not widen its column through the ratio (it did: 543px tiles on a
   390px phone). */
.cards--myths{grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:360px){ .cards--myths{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:720px){ .cards--myths{grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px} }
@media (min-width:1000px){ .cards--myths{gap:16px; margin-top:36px} }

.flip{position:relative; display:block; width:100%; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; border-radius:var(--r);
  perspective:3000px;   /* deep: mid-turn the card barely swells toward the viewer */
  -webkit-tap-highlight-color:transparent;
  outline:2px solid transparent; outline-offset:5px; transition:outline-color .9s ease}
.flip:focus-visible{outline:2px solid var(--navy); outline-offset:5px; transition:none}
/* opened from a #mytus-N link: a gold ring that fades out (app.js removes the class after ~2 s) */
/* a card focused by the fragment jump shows no browser ring; the first key press brings the ring back */
.flip.is-hashfocus:focus-visible{outline-color:transparent; transition:outline-color .9s ease}
.flip.is-arrived,.flip.is-arrived:focus-visible{outline:2px solid var(--gold); outline-offset:5px; transition:none}

.flip-inner{position:relative; display:block; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.face{position:relative; display:flex; flex-direction:column; gap:12px; border-radius:var(--r);
  padding:20px 20px 18px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:rotateY(0)}
.face--back{position:absolute; top:0; left:0; right:0; min-height:100%; transform:rotateY(180deg);
  pointer-events:none}   /* a hidden back never catches the mouse */
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip.is-flipped .face--back{pointer-events:auto}
/* while it turns, a card sits above its neighbours, so no edge of the turn slips under them */
.flip.is-turning{z-index:3}
/* a peek is not pinned: the "Back" hint only shows once a click has pinned the answer */
.flip.is-peek .hint--back{visibility:hidden}


.face-title{display:block; font-weight:800; letter-spacing:-0.03em; color:var(--ink); line-height:1.12}
.face .p{display:block; font-size:1rem; line-height:1.55}
.face .ph-block{margin-top:4px}
.hint{margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:10px;
  font-size:.9375rem; font-weight:700; line-height:1.25; color:var(--ink)}
.hint-ico{width:18px; height:18px; flex:0 0 auto; color:var(--gold)}
.hint--back{color:var(--mute)}

/* myths: navy fronts with the quote, white backs with the short answer. The front
   is at least 6 : 5 (almost square); app.js lifts a row to its longest answer. */
.flip--myth .face{padding:14px 14px 12px; gap:10px}
.flip--myth .face--front{background:var(--navy); color:var(--on-navy); aspect-ratio:6 / 5;
  min-width:0; max-width:100%}   /* a min-height taller than the ratio must not widen it */
.flip--myth .face-title{color:var(--on-navy); font-size:clamp(1.02rem,4.4vw,1.35rem); line-height:1.12; letter-spacing:-0.03em; text-wrap:balance}
.flip--myth .hint{padding-top:9px; gap:8px; font-size:.8125rem}
.flip--myth .hint-ico{width:16px; height:16px}
/* the front: the quote and a big question mark under it, no "Ukázat odpověď"
   label (Martin, 27. 9. 2026, evening). The mark sits in the middle of the space
   under the quote ("uprostřed"): centred across, margin:auto down. app.js gives
   all eight quotes the height of the longest, so the space — and the mark — is
   in the same place on every tile. line-height .74 = the box is exactly the glyph. */
.flip--myth .face--front{padding-bottom:14px}
.flip--myth .myth-q{display:block; margin:auto 0; align-self:center; font-size:5.75rem; font-weight:800;
  line-height:.74; color:var(--gold-light)}
.flip--myth .face--back{background:var(--card); color:var(--body); border:2px solid var(--navy)}
.flip--myth .face .p{font-size:.84rem; line-height:1.45}
.flip--myth .face .p strong{color:var(--ink)}
@media (min-width:720px){
  .flip--myth .face-title{font-size:clamp(1rem,1.9vw,1.2rem)}
  .flip--myth .face .p{font-size:.8125rem}
  .flip--myth .myth-q{font-size:6rem}
}
@media (min-width:1000px){
  .flip--myth .face{padding:18px 18px 14px; gap:12px}
  .flip--myth .face--front{padding-bottom:18px}
  .flip--myth .face-title{font-size:clamp(1.2rem,1.55vw,1.45rem)}
  .flip--myth .face .p{font-size:.875rem; line-height:1.5}
  .flip--myth .hint{font-size:.875rem}
  .flip--myth .myth-q{font-size:7rem}
}
.myths-note{margin-top:20px}

.strip{margin-top:40px; background:var(--panel); border-radius:var(--r); padding:22px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap}
.strip p{margin:0; font-size:1.2rem; line-height:1.35; font-weight:700; color:var(--ink); max-width:46ch; letter-spacing:-0.01em; text-wrap:pretty}
@media (min-width:960px){ .strip{padding:30px 36px; margin-top:48px} }
/* "Nesportuješ?" — the second door under Sport / Škola: a heading + one plain line */
.strip--nosport{margin-top:56px}
.strip--nosport h3{margin:0 0 6px}
.strip--nosport .strip-sub{font-size:1.05rem; font-weight:400; line-height:1.5; color:var(--body); max-width:60ch; letter-spacing:0}
@media (min-width:960px){ .strip--nosport{margin-top:80px} }

/* ---------- Kdo jsme (navy) ---------- */
/* headline left, who we are in two sentences right, one gold rule under both */
.who-head{display:grid; gap:20px; padding-bottom:32px; border-bottom:1px solid var(--gold-line)}
.who-h2{font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.02; max-width:16ch}
.who-lede{margin:0; font-size:1.15rem; line-height:1.55; color:var(--on-navy); max-width:46ch}
@media (min-width:960px){
  .who-head{grid-template-columns:1.3fr .7fr; gap:64px; align-items:end}
  .who-lede{font-size:1.2rem}
}
.founders{display:grid; gap:14px; margin-top:32px}
.founder{display:grid; grid-template-columns:132px 1fr; gap:18px; align-items:center; width:100%;
  padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
  border-radius:var(--r)}
.photo--founder{background:var(--photo-navy); aspect-ratio:4/5; border-radius:var(--r); padding:8px}
.photo--founder .photo-ph{font-size:.72rem; padding:5px 7px; line-height:1.3}
.founder-meta{display:flex; flex-direction:column; gap:4px; min-width:0}
.founder-name{font-size:1.5rem; font-weight:800; letter-spacing:-0.03em; color:var(--on-navy); line-height:1.15}
.founder-role{font-size:.9375rem; color:var(--navy-mute); line-height:1.4}
.founder-more{margin-top:8px; font-size:.9375rem; font-weight:700; color:var(--on-navy);
  text-decoration:underline; text-decoration-color:var(--gold-light); text-decoration-thickness:2px; text-underline-offset:5px}
.founder:hover .founder-more{text-decoration-color:var(--on-navy)}
.founder:hover .photo--founder{background:color-mix(in srgb, var(--photo-navy), #FFFFFF 45%)}
.founder:focus-visible{outline-color:var(--on-navy); outline-offset:6px}
@media (min-width:720px){
  .founders{grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
  .founder{grid-template-columns:1fr; gap:16px; align-items:start}
  .photo--founder{padding:12px}
  .photo--founder .photo-ph{font-size:.8125rem; padding:7px 10px}
}
.sec--who .ph-block{margin-top:28px}
/* the pull quote and the one photo of all three founders together */
.who-bottom{display:grid; gap:36px; margin-top:64px}
.pull--navy{margin:0; max-width:62ch; padding-left:24px; border-left-color:var(--gold-light)}
.pull--navy p{font-size:1.15rem; line-height:1.55; color:var(--on-navy)}
.pull--navy .pull-strong{margin-top:18px; font-size:clamp(1.55rem,3.2vw,2.3rem); line-height:1.15;
  font-weight:800; letter-spacing:-0.03em; color:var(--on-navy)}
.photo--group{aspect-ratio:3/2; background:var(--photo-navy)}
@media (min-width:960px){
  .who-bottom{grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:96px}
}

/* bio dialog */
.bio{border:0; padding:0; margin:auto; width:calc(100% - 32px); max-width:640px; max-height:calc(100vh - 64px);
  border-radius:var(--r-lg); background:var(--card); color:var(--body); overflow:auto; overscroll-behavior:contain}
.bio::backdrop{background:rgba(9,28,41,.62)}
.bio-head{position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  background:var(--card); padding:26px 28px 18px; border-bottom:1px solid var(--line)}
.bio-head h3{font-size:1.9rem; color:var(--ink); line-height:1.1}
.bio-role{margin:6px 0 0; font-size:.9375rem; color:var(--mute)}
.bio-close{flex:0 0 auto; font:inherit; font-size:.9375rem; font-weight:700; color:var(--navy); background:var(--card);
  border:2px solid var(--navy); border-radius:var(--r-sm); padding:8px 14px; cursor:pointer; min-height:44px}
.bio-close:hover{background:var(--navy); color:var(--on-navy)}
.bio-body{padding:22px 28px 30px}
.bio-body p{font-size:1.02rem}
.bio-body h4{font-size:1.3rem; margin:30px 0 10px}
.bio-body .ph-block{margin:4px 0 0}
/* the vysvědčení: a real photo slot between the SAT paragraph and "Co jsme udělali jinak" */
.photo--doc{aspect-ratio:3/4; width:100%; max-width:360px; margin:10px 0 8px}
.photo--doc .photo-ph{max-width:none}
.bio[open]{animation:bio-in .22s ease-out}
@keyframes bio-in{from{opacity:0; transform:translateY(12px)}}
@media (max-width:719px){
  .bio{margin:auto 0 0; width:100%; max-width:100%; max-height:88vh; border-radius:var(--r-lg) var(--r-lg) 0 0}
  .bio-head{padding:20px var(--gutter) 14px}
  .bio-head h3{font-size:1.6rem}
  .bio-body{padding:18px var(--gutter) 34px}
  .bio[open]{animation:sheet-in .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes sheet-in{from{transform:translateY(40%); opacity:.4}}
}
body:has(dialog[open]){overflow:hidden}

/* ---------- Co pro tebe uděláme ---------- */
.offer-intro{display:grid; gap:20px}
.offer-intro-text p{font-size:1.1rem}
.offer-intro-text p:last-child{margin-bottom:0}
@media (min-width:960px){
  .offer-intro{grid-template-columns:1.05fr .95fr; gap:72px; align-items:end}
  .offer-intro-text p{font-size:1.15rem}
}
.timeline-panel{margin-top:48px; padding:28px 20px 24px}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
.tl-step{position:relative; padding:0 0 28px 30px; border-left:2px solid var(--gold); margin-left:6px}
.tl-step:last-child{padding-bottom:4px}
.tl-num{position:absolute; left:-7px; top:-4px; width:12px; background:var(--panel); text-align:center;
  font-size:.875rem; font-weight:800; color:var(--gold); line-height:1.3; padding:2px 0 6px; font-variant-numeric:tabular-nums}
.tl-step h3{font-size:1.2rem; line-height:1.25; margin-bottom:8px}   /* h3, not h4: the steps sit straight under an h2 */
.tl-step p{margin:0; font-size:1rem}
@media (min-width:900px){
  .timeline-panel{padding:48px 48px 40px; margin-top:72px}
  .timeline{grid-template-columns:repeat(4,1fr); gap:32px}
  .tl-step{border-left:0; border-top:2px solid var(--gold); margin:0; padding:22px 0 0}
  .tl-num{position:static; display:block; width:auto; background:none; text-align:left; padding:0; margin-bottom:10px}
}

/* Sport / Škola = the two halves of the one page from step 2 */
.service-head{margin-top:72px; max-width:760px}
.service-head h3{font-size:clamp(1.6rem,3vw,2.25rem); line-height:1.1; letter-spacing:-0.03em}
.service-head p{margin:12px 0 0; font-size:1.1rem; color:var(--mute)}
@media (min-width:960px){ .service-head{margin-top:112px} }
.service{display:grid; gap:24px; margin-top:64px; align-items:center}
.service-head + .service{margin-top:40px}
.service-text h3{font-size:clamp(2.2rem,4.6vw,3.5rem); line-height:1; letter-spacing:-0.03em}
.service-text p{font-size:1.15rem; line-height:1.55; margin:18px 0 0; max-width:44ch}
.photo--service{aspect-ratio:4/3}
/* the aid letter is a portrait document: taller slot, narrower column */
.photo--letter{aspect-ratio:4/5; width:100%; max-width:440px}
/* side by side from 640 px, like "Co tě tam čeká" — stacked at ~800 px the
   4:3 photo ran full width and the portrait letter left half the row empty */
@media (min-width:640px){
  .service{grid-template-columns:1fr 1fr; gap:32px}
  .service--flip .photo--service{order:-1}
}
@media (min-width:860px){
  .service{gap:64px; margin-top:96px}
}

.coach{display:grid; gap:32px; margin-top:80px}
.coach-quote{margin:0; border-left:3px solid var(--gold); padding:4px 0 4px 22px}
.coach-quote p{margin:0; font-size:1.1rem; max-width:52ch}
.coach-quote .coach-strong{font-size:clamp(1.8rem,3.6vw,2.75rem); font-weight:800; line-height:1.1;
  letter-spacing:-0.03em; color:var(--ink); margin-bottom:16px}
.refnote{border:1.5px solid var(--line); border-radius:var(--r); padding:22px 22px 8px}
.refnote h3{font-size:1.15rem; margin-bottom:8px}
.refnote p{font-size:1rem}
@media (min-width:960px){
  .coach{grid-template-columns:1.5fr 1fr; gap:64px; margin-top:120px; align-items:center}
}

/* ---------- Ceník: a grey band between the white offer section and the navy form ----------
   Three packages side by side on desktop, stacked on a phone. The free read
   has the one red button (everybody starts there); the year is the navy card. */
.sec--pricing{background:var(--panel)}
.pricing-head{max-width:760px}
.pricing-head .lede{margin-bottom:0}
.tiers{display:grid; gap:14px; margin-top:36px}
.tier{display:flex; flex-direction:column; background:var(--card); color:var(--body);
  border:1.5px solid var(--line); border-radius:var(--r-lg); padding:24px 22px 22px}
.tier-tag{margin:0 0 6px; font-size:.875rem; font-weight:700; color:var(--mute)}
.tier-name{font-size:1.45rem; line-height:1.15}
.tier-price{margin:18px 0 0; font-size:clamp(2.5rem,4.2vw,3.25rem); font-weight:800; line-height:1;
  letter-spacing:-0.03em; color:var(--ink); white-space:nowrap}
.tier-unit{margin:8px 0 0; font-size:.9375rem; line-height:1.4; color:var(--mute)}
.tier-list{list-style:none; margin:20px 0 24px; padding:18px 0 0; border-top:1px solid var(--line);
  display:grid; gap:10px; align-content:start}
.tier-list li{position:relative; padding-left:24px; font-size:1rem; line-height:1.45}
.tier-list li::before{content:""; position:absolute; left:0; top:.66em; width:12px; height:2px; background:var(--gold)}
.tier .btn{margin-top:auto; width:100%}
.tier--start{border:2px solid var(--navy)}
.tier--year{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.tier--year .tier-name,.tier--year .tier-price{color:var(--on-navy)}
.tier--year .tier-tag,.tier--year .tier-unit{color:var(--navy-mute)}
.tier--year .tier-list{border-top-color:var(--navy-line)}
.tier--year .tier-list li::before{background:var(--gold-light)}
.tier--year :focus-visible{outline-color:var(--on-navy)}
@media (min-width:960px){
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:56px}
  .tier{padding:32px 30px 28px}
}

/* what the price does not include: the honest part, set apart in a white box */
.notincl{margin-top:16px; background:var(--card); border-radius:var(--r-lg); padding:24px 22px}
.notincl h3{font-size:1.2rem; margin-bottom:16px}
.notincl ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.notincl li{position:relative; padding-left:26px; font-size:1rem; line-height:1.5; max-width:48ch}
.notincl li strong{color:var(--ink)}
/* a thin navy cross, drawn: not an emoji, not an icon font */
.notincl li::before,.notincl li::after{content:""; position:absolute; left:1px; top:.72em; width:13px; height:2px;
  background:var(--navy); border-radius:1px}
.notincl li::before{transform:rotate(45deg)}
.notincl li::after{transform:rotate(-45deg)}
@media (min-width:960px){
  .notincl{display:grid; grid-template-columns:.7fr 2.3fr; gap:40px; align-items:start; padding:32px 36px; margin-top:20px}
  .notincl h3{margin:0}
  .notincl ul{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
}
.tier-price .ph{font-size:.42em; font-weight:800; vertical-align:middle}
/* 3. 10. 2026: the free read as a strip on top, then a heading per group
   (students, rowers), the rowers' one card laid out wide */
.tier--banner{margin-top:36px}
.tier-banner-p{margin:10px 0 20px; font-size:1rem; line-height:1.5; max-width:62ch}
.tier-group{margin-top:48px}
.tier-group h3{font-size:1.6rem; line-height:1.15}
.tier-group p{margin:8px 0 0; font-size:1rem; line-height:1.5; color:var(--mute); max-width:62ch}
.tier-group + .tiers{margin-top:20px}
.tier-group + .tier--wide{margin-top:20px}
.tier--wide{display:grid; grid-template-areas:"head" "list" "btn"}
.tier-wide-head{grid-area:head}
.tier--wide .tier-list{grid-area:list}
.tier--wide .btn{grid-area:btn; margin-top:0}
@media (min-width:760px){
  .tier--banner{flex-direction:row; align-items:center; justify-content:space-between; gap:40px}
  .tier--banner .btn{width:auto; flex:none; margin-top:0; padding-inline:36px}
  .tier-banner-p{margin-bottom:0}
  .tier--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); grid-template-areas:"head list" "btn list";
    column-gap:40px; align-items:start}
  .tier--wide .tier-list{margin:0; padding:0 0 0 40px; border-top:0; border-left:1px solid var(--line)}
  .tier--wide .btn{align-self:end; margin-top:28px}
}
@media (min-width:960px){
  .tier-group{margin-top:72px}
  .tier-group + .tiers,.tier-group + .tier--wide{margin-top:28px}
  .tier--banner{margin-top:56px}
  .tier--wide .tier-list{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:12px}
}
.tier-minor{margin:24px 0 0; font-size:1rem; line-height:1.5; max-width:none}
.tier-minor + .tier-parent{margin-top:12px}
.tier-parent{margin:24px 0 0; font-size:1.05rem; font-weight:700; max-width:none}
.tier-parent a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:5px;
  display:inline-block; padding:11px 0; margin:-11px 0}   /* 44 px tall to tap, layout unchanged */
.tier-parent a:hover{text-decoration-color:var(--navy)}
.sec--pricing .ph-block{margin-top:24px}

/* ---------- form (navy) ----------
   2 Oct 2026 (Martin): heading on top, one centred card, four steps. No sticky
   heading on the left and no slide-in; a step change is instant. */
[hidden]{display:none !important}
.form-wrap{max-width:780px}
.form-head{text-align:center}
.form-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:16ch; margin-inline:auto; text-wrap:balance}
.form-lede{margin:16px auto 0; max-width:46ch; color:var(--navy-mute); font-size:1.1rem; line-height:1.55; text-wrap:pretty}
.form-card{background:var(--card); color:var(--body); border-radius:var(--r-lg); padding:22px 18px; margin-top:32px}
.form-card .fine{color:var(--mute)}

/* progress: four bars with the step names; the current and the finished ones are blue */
.stepper{list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.stepper li{border-top:4px solid var(--line); padding-top:8px; font-size:.8125rem; font-weight:600; line-height:1.3; color:var(--mute)}
.stepper li.is-done{border-top-color:var(--red)}
.stepper li.is-on{border-top-color:var(--red); color:var(--ink)}
.stepper-n{font-variant-numeric:tabular-nums}

.step{border:0; padding:0; margin:0; min-width:0}
.step + .step{margin-top:32px}                 /* without JS: all four stacked */
.js-steps .step{display:none}
.js-steps .step.is-on{display:block; margin-top:0}
.step legend{padding:0; margin:0 0 16px; font-size:1.35rem; font-weight:800; line-height:1.2; color:var(--ink); letter-spacing:-0.01em}
.step legend:focus{outline:none}

/* two columns; align-items:end keeps the inputs level when one label wraps */
.fields--step{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end}
.fields--step .span2{grid-column:1 / -1}
.q-label{font-size:.9375rem; font-weight:600; color:var(--ink); margin:22px 0 9px}
.step legend + .q-label{margin-top:0}
.sport-more,.sat-more{margin-top:16px}

/* chips: radio buttons dressed as square-cornered buttons (no pills) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; margin:0; font-size:1rem; font-weight:600}
.chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.chip span{display:flex; align-items:center; min-height:46px; padding:10px 16px; border:1.5px solid var(--field-line);
  border-radius:var(--r-sm); background:var(--card); color:var(--ink); transition:background .15s ease, border-color .15s ease}
.chip:hover span{border-color:var(--navy)}
.chip input:checked + span{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.chip input:focus-visible + span{outline:2px solid var(--navy); outline-offset:2px}

textarea{display:block; width:100%; padding:13px 14px; font-family:var(--font); font-size:1.05rem; font-weight:500; line-height:1.45;
  background:var(--card); color:var(--ink); border:1.5px solid var(--field-line); border-radius:var(--r-sm);
  min-height:96px; resize:vertical; transition:border-color .15s ease}
textarea::placeholder{color:var(--ph-input); font-weight:400; opacity:1}
textarea:focus{border-color:var(--navy)}

.miss{border-color:var(--err) !important; background:#FFF6F5 !important}
.consent{display:flex; gap:12px; align-items:flex-start; margin-top:22px; cursor:pointer;
  font-size:.9375rem; font-weight:400; line-height:1.5; color:var(--body)}
.consent input{width:20px; height:20px; flex-shrink:0; margin:1px 0 0; accent-color:var(--navy)}
.consent.miss{outline:2px solid var(--err); outline-offset:6px; border-radius:4px; background:none !important}
.consent-parent{margin:12px 0 0}

/* Back left, Next / Send right; on phones both share the row */
.step-btns{display:flex; gap:12px; margin-top:14px}
.step-btns #stepNext,.step-btns #submit{margin-left:auto}
/* phones: Zpět stays compact, Dál / the send button takes the rest of the row */
@media (max-width:559px){ .step-btns #stepNext,.step-btns #submit{flex:1 1 0; margin-left:0}
  .step-btns #stepBack{flex:0 0 auto; width:auto; padding-inline:18px} }
@media (min-width:1000px){ .form-card{padding:36px 40px 32px} }

/* ---------- parents: a grey panel on white, between the navy form band and the navy footer ---------- */
.sec--parents{background:var(--white); padding:48px 0}
.parents{display:grid; gap:16px; background:var(--panel); border-radius:var(--r-lg); padding:28px 20px 26px}
.parents::before{content:""; grid-column:1 / -1; height:3px; background:var(--gold); border-radius:2px; margin-bottom:10px}
.parents h2{font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.04; max-width:14ch}
.parents p{font-size:1.1rem}
.parents .btnrow{margin-top:8px}
@media (min-width:900px){
  .sec--parents{padding:96px 0}
  .parents{grid-template-columns:.95fr 1.05fr; gap:20px 64px; align-items:start; padding:56px 56px 52px}
  .parents::before{margin-bottom:22px}
  .parents p{font-size:1.15rem}
}

/* ---------- FAQ: grey band, heading left, the questions right ---------- */
.sec--faq{background:var(--panel)}
.faq-grid{display:grid; gap:28px}
.faq-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1.1}
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item summary{list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0;
  font-size:1.1rem; font-weight:700; line-height:1.35; color:var(--ink); letter-spacing:-0.01em}
.faq-item summary::-webkit-details-marker{display:none}
/* a drawn plus that turns into a minus */
.faq-item summary::before,.faq-item summary::after{content:""; position:absolute; right:6px; top:50%; margin-top:-1px;
  width:16px; height:2px; background:var(--navy); border-radius:1px; transition:transform .2s ease}
.faq-item summary::after{transform:rotate(90deg)}
.faq-item[open] summary::after{transform:rotate(0)}
.faq-item summary:hover{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:5px}
.faq-item p{margin:0 0 22px; font-size:1.02rem; max-width:60ch}
@media (min-width:960px){
  .faq-grid{grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start}
  .faq-head{position:sticky; top:calc(var(--nav-h) + 40px)}
  .faq-item summary{font-size:1.2rem; padding:24px 48px 24px 0}
}

/* ---------- Kontakt: white, text left, the channels right ---------- */
.contact-grid{display:grid; gap:32px}
.contact-grid h2{font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1.1}
.contact-grid .lede{max-width:40ch}
.contact-list{margin:0; border-top:1px solid var(--line-2)}
.contact-list > div{display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line-2)}
.contact-list dt{font-size:.9375rem; font-weight:600; color:var(--mute)}
.contact-list dd{margin:0; font-size:1.1rem; font-weight:700; color:var(--ink)}
.contact-list dd a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:5px;
  display:inline-block; padding:11px 0; margin:-11px 0}   /* 44 px tall to tap, layout unchanged */
.contact-list dd a:hover{text-decoration-color:var(--navy)}
@media (min-width:960px){
  .contact-grid{grid-template-columns:1fr 1fr; gap:64px; align-items:start}
  .contact-list > div{grid-template-columns:150px 1fr; align-items:baseline; padding:22px 0}
}

/* ---------- footer: navy band — brand + languages, links, legal, notes, © ---------- */
.footer{background:var(--navy); color:var(--on-navy); padding:48px 0 56px}
.footer-grid{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px 20px;
  grid-template-areas:"brand lang" "links links" "legal legal" "notes notes" "copy copy"}
.brand--foot{grid-area:brand; color:var(--on-navy); font-size:clamp(1.5rem,3.2vw,2.25rem); line-height:1.05; flex:none}
.foot-links{grid-area:links; list-style:none; margin:0; padding:20px 0 0; border-top:1px solid var(--gold-line);
  display:flex; flex-wrap:wrap; gap:0 24px}
.foot-links a{display:inline-flex; align-items:center; min-height:44px; color:var(--on-navy); font-size:.9375rem; font-weight:600; text-decoration:none}
.foot-links a:hover{text-decoration:underline; text-decoration-color:var(--gold-light); text-decoration-thickness:2px; text-underline-offset:5px}
.foot-legal{grid-area:legal; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 24px;
  font-size:.875rem; color:var(--navy-mute)}
.foot-notes{grid-area:notes; display:grid; gap:10px}
.foot-notes .ph-block{margin:0}
.foot-copy{grid-area:copy; margin:0; font-size:.875rem; color:var(--navy-mute)}
.lang--foot{grid-area:lang}
.lang--foot a{color:var(--navy-mute); min-height:44px; min-width:44px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; font-size:.9375rem}
.lang--foot a:hover{color:var(--on-navy)}
.lang--foot a[aria-current="page"]{color:var(--on-navy)}
@media (min-width:960px){ .footer{padding:72px 0 80px} }

/* ---------- mobile sticky bar ---------- */
/* label + parent link stacked on the left, the button on the right: the EN and IT
   labels keep their two lines at 375px instead of being squeezed to three or four */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:var(--white); border-top:1px solid var(--line); padding:8px 12px calc(8px + env(safe-area-inset-bottom)) 16px;
  grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"lbl btn" "plink btn"; align-items:center; gap:0 12px;
  transition:transform .25s ease}
.sticky .lbl{grid-area:lbl; align-self:end; font-size:.8125rem; font-weight:700; line-height:1.25; color:var(--ink)}
.sticky .btn--sm{grid-area:btn; padding:9px 14px; min-height:44px; font-size:.875rem; white-space:nowrap}
.sticky .plink{grid-area:plink; justify-self:start; align-self:start; font-size:.8125rem; font-weight:600; line-height:1.2;
  color:var(--mute); padding:4px 0; min-height:24px; text-underline-offset:3px; position:relative}
/* a 44px-tall hit area without changing how the link looks */
.sticky .plink::after{content:""; position:absolute; left:-8px; right:-8px; top:50%; height:44px; transform:translateY(-50%)}
.sticky.is-hidden{transform:translateY(110%)}
@media (max-width:767px){
  .sticky{display:grid}
  .footer{padding-bottom:calc(56px + 76px)}   /* room for the sticky bar; the navy runs to the bottom */
}

/* ---------- scroll reveal ----------
   Blocks come in the first time they come into view (Martin, 27. 9. 2026:
   "not just static", "something from the bottom as well, like usfutures.cz",
   "only where it makes sense, not everything moving the same"). Motion has a
   meaning, set per block in template.html:
   - up: things that stack up — the hero headline, the three founders, the
     three prices, the closing panels (strip, parents);
   - fade: in place, no movement — the "Co tě tam čeká" box and the myth tiles;
   - left / right: pairs — each half from its own side;
   - the timeline steps come from the left, 1 -> 2 -> 3;
   - headings and intro text do not move.
   The rise is usfutures.cz's: 0.9 s ease-out-cubic, 3em (48 px), the fade
   starting 0.1 s after the move. Side slides use the same curve.
   app.js adds .is-in; blocks that arrive together follow each other through
   --d. Only under html.has-reveal, which the head script sets when the
   browser can animate: without it the page is simply there. Hidden = opacity
   only, the offset is the animation's first frame, so a block's layout box
   never moves and #mytus-N lands exactly. */
:root{--reveal-x:40px; --reveal-y:48px; --reveal-ease:cubic-bezier(.215,.61,.355,1)}
@media (min-width:960px){ :root{--reveal-x:88px} }
main{overflow-x:clip}   /* a block starting off to the side never makes the page scroll sideways */
.has-reveal [data-reveal]:not(.is-in){opacity:0}
.has-reveal [data-reveal].is-in{
  animation:reveal-left .9s var(--reveal-ease) backwards, reveal-fade .9s var(--reveal-ease) backwards;
  animation-delay:calc(var(--d, 0) * 120ms), calc(var(--d, 0) * 120ms + 100ms)}
.has-reveal [data-reveal="right"].is-in{animation-name:reveal-right, reveal-fade}
.has-reveal [data-reveal="up"].is-in{animation-name:reveal-up, reveal-fade}
/* fade: no movement — the myth tiles and the "Co tě tam čeká" box (Martin, 27. 9.
   2026: rising blocks looked like they ran into the heading) */
.has-reveal [data-reveal="fade"].is-in{animation-name:none, reveal-fade}
@keyframes reveal-left{from{transform:translateX(calc(-1 * var(--reveal-x)))}}
@keyframes reveal-right{from{transform:translateX(var(--reveal-x))}}
@keyframes reveal-up{from{transform:translateY(var(--reveal-y))}}
@keyframes reveal-fade{from{opacity:0}}
@media print{ .has-reveal [data-reveal]{opacity:1 !important; animation:none !important} }

/* ---------- reduced motion: crossfade, no 3D ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .flip-inner{transform:none !important; transform-style:flat}
  .face{transform:none !important; -webkit-backface-visibility:visible; backface-visibility:visible;
    transition:opacity .22s ease, visibility .22s ease !important}
  .face--back{opacity:0; visibility:hidden}
  .flip.is-flipped .face--front{opacity:0; visibility:hidden}
  .flip.is-flipped .face--back{opacity:1; visibility:visible}
}

/* ---------- 404 page (src/404.html → dist/404.html) ---------- */
.nf{padding:72px 0 120px}
.nf .wrap > *{max-width:720px}   /* left edge lines up with the logo */
.nf h1{font-size:clamp(2.2rem,5vw,3.5rem); line-height:1.05; margin-bottom:16px}
.nf-lede{font-size:1.1rem; margin-bottom:28px}
.nf-alt{margin-top:56px; padding-top:20px; border-top:1px solid var(--line-2)}
.nf-alt p{margin:0; max-width:none}
.nf-alt a{display:inline-block; padding:10px 0; color:var(--ink); font-weight:700; text-decoration:underline;
  text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:5px}
.nf-alt a:hover{text-decoration-color:var(--navy)}