/* SummerAbroad — design system.
   Extends the round-2 language Merve approved (Playfair + Inter, cream/terracotta,
   editorial photography) onto the v2 surfaces: detail pages, onboarding, matches. */
:root{
  --ink:#1a1815; --sub:#6b645c; --faint:#9a938a;
  --cream:#faf7f2; --card:#ffffff; --wash:#f2ece2;
  --terra:#b5502f; --terra-dark:#93401f; --terra-wash:#fbeee7;
  --line:#e9e2d8; --gold:#c99a5b; --green:#3f6f52; --green-wash:#eef4ef;
  --shadow:0 12px 32px rgba(26,24,21,.08);
  --shadow-lg:0 24px 60px rgba(20,16,10,.18);
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The canvas — everything the browser paints OUTSIDE the document box — must
   match the footer, because the footer is what the document ends with. With no
   background here, the canvas inherited body's lighter --cream while the footer
   is the darker --wash, so on iOS every overscroll past the end showed a pale
   block under the footer that reads as dead space: Merve, twice on 2026-08-11,
   "Footer is messed up and there is a lot of slack" / "There is too much slack".
   Chrome has no rubber-band overscroll, which is why it never showed up here
   and Chris saw nothing until he scrolled to the very bottom on his own phone.
   body keeps --cream, so nothing inside the page changes. */
html{scroll-behavior:smooth;background:var(--wash)}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--cream);
  color:var(--ink);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.serif{font-family:'Playfair Display',Georgia,serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1120px;min-width:0;margin:0 auto;padding:0 20px}
.narrow{max-width:880px}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sub);font-weight:600}
h1{font-family:'Playfair Display',serif;font-size:clamp(32px,4.4vw,50px);font-weight:500;line-height:1.12}
h2{font-family:'Playfair Display',serif;font-size:clamp(23px,3vw,33px);font-weight:500;margin-top:8px}
h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;line-height:1.3}
section{padding:52px 0}
.sechead{margin-bottom:26px}
.muted{color:var(--sub)}
.tiny{font-size:12.5px}

/* ── nav ─────────────────────────────────────────────────────────────── */
nav{background:var(--cream);padding:16px 0;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;cursor:pointer;white-space:nowrap}
.logo:after{content:".";color:var(--terra)}
.navlinks{display:flex;gap:20px;font-size:13.5px;font-weight:500;align-items:center}
.navlinks a{color:var(--ink);text-decoration:none;cursor:pointer}
.navlinks a:hover{color:var(--terra)}
.navbtn{background:#1a1815;color:#fff!important;border-radius:8px;padding:9px 16px}
.navbtn:hover{background:var(--terra)!important}
.saved-link{text-decoration:none;font-size:14px;color:var(--sub);white-space:nowrap;min-width:44px;min-height:44px;
  display:inline-grid;place-items:center;border-radius:99px}
.saved-link:hover{color:var(--terra)}
.lang{border:1px solid var(--line);background:#fff;border-radius:99px;font-size:11.5px;font-weight:600;
  min-width:44px;min-height:44px;padding:5px 10px;cursor:pointer;color:var(--sub);letter-spacing:.06em;font-family:inherit}
.lang:hover{border-color:var(--terra);color:var(--terra)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--terra);color:#fff;display:grid;
  place-items:center;font-size:12.5px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.menubtn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:44px;height:44px;
  align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--ink);font-family:inherit}
.menubtn:hover{border-color:var(--terra);color:var(--terra)}
.mobile-account{display:none}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(181,80,47,.3);outline-offset:3px}
/* One copy of the five destinations: flat flex items on desktop, the
   disclosure panel under 820px (the sticky nav is the positioning anchor). */
.navmain{display:contents}
@media(max-width:820px){
  /* The bar must FIT with the disclosure button — at the old sizes it
     overflowed 375px by 32px and pushed the button off-screen. */
  nav .wrap{gap:8px}
  .logo{font-size:19px}
  .navlinks{gap:10px}
  .navbtn{padding:8px 10px}
  .navlinks .hide-sm{display:none}
  .menubtn{display:inline-flex}
  .navmain{display:none}
  .navlinks.open .navmain{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:6px 0}
  .navlinks.open .navmain .hide-sm{display:block;padding:12px 22px;font-size:15px}
}
@media(max-width:560px){
  nav{padding:10px 0}
  nav .wrap{padding:0 14px}
  .navlinks{gap:4px}
  .navlinks > .navbtn,.navlinks > .avatar{display:none}
  .navlinks.open .navmain{padding:8px 14px 14px;gap:2px}
  .navlinks.open .navmain .hide-sm{padding:11px 8px;border-bottom:1px solid var(--line)}
  .navlinks.open .navmain .mobile-account{display:flex;align-items:center;justify-content:center;
    width:100%;min-height:44px;margin-top:8px;border:0;border-radius:10px;background:var(--ink);
    color:#fff;font:600 14px/1.2 inherit;cursor:pointer}
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--terra);
  color:#fff;border:none;border-radius:10px;padding:13px 22px;font-size:14.5px;font-weight:600;
  min-height:44px;cursor:pointer;font-family:inherit;transition:.15s;text-decoration:none}
.btn:hover{background:var(--terra-dark)}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.quiet{background:transparent;color:var(--sub);border:1px solid var(--line)}
.btn.quiet:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.google{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:500}
.btn.google:hover{background:#f7f8f8;border-color:#c9ccce}
.gicon{width:18px;height:18px;flex:0 0 18px}

/* ── hero + search card ──────────────────────────────────────────────── */
.hero{position:relative;min-height:500px;display:flex;align-items:center;color:#fff;
  background:#3d3428 center/cover}
.hero:before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,10,.28),rgba(20,16,10,.6))}
.hero .wrap{position:relative;padding:60px 20px;display:grid;grid-template-columns:1.15fr 1fr;
  gap:40px;align-items:center;width:100%}
.hero .wrap > *{min-width:0}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{margin:14px 0 16px}
.hero p{font-size:17px;max-width:460px;color:rgba(255,255,255,.9)}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}.hero{min-height:auto}}
.searchcard{min-width:0;background:var(--card);border-radius:16px;padding:22px;color:var(--ink);box-shadow:var(--shadow-lg)}
.field{border-bottom:1px solid var(--line);padding:10px 2px}
.field label{display:block;font-size:10px;letter-spacing:.18em;font-weight:600;color:var(--sub);
  text-transform:uppercase;margin-bottom:2px}
.field input,.field select,.field textarea{width:100%;border:none;outline:none;background:transparent;font-size:15px;
  font-family:inherit;color:var(--ink)}
.hero-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
@media(max-width:560px){
  section{padding:40px 0}
  .hero .wrap{padding:42px 16px;gap:26px}
  .hero .eyebrow{display:block;line-height:1.6;overflow-wrap:anywhere}
  .hero h1{font-size:clamp(32px,9.5vw,40px);overflow-wrap:anywhere}
  .hero p{font-size:15.5px;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px}
  .hero-actions .btn{width:100%;padding-inline:14px}
  .searchcard{padding:18px;border-radius:14px}
}

/* ── chips / pills / badges ──────────────────────────────────────────── */
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:8px 16px;
  font-size:13.5px;cursor:pointer;transition:.15s;font-weight:500;font-family:inherit;color:var(--ink)}
.pill:hover,.pill.on{border-color:var(--terra);color:var(--terra)}
.pill.on{background:var(--terra-wash)}
.destfacet{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.destoption{display:flex;justify-content:space-between;align-items:center;gap:14px;min-width:0;
  border:1px solid var(--line);background:var(--card);border-radius:12px;padding:13px 15px;
  color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:.15s}
.destoption > span{min-width:0;overflow-wrap:anywhere;font-weight:600}
.destoption small{flex:0 0 auto;color:var(--sub);font-size:11px}
.destoption:hover,.destoption.on{border-color:var(--terra);box-shadow:var(--shadow)}
.destoption.on{background:var(--terra-wash);color:var(--terra)}
.destoption.on small{color:var(--terra)}
.badge{background:rgba(255,255,255,.94);color:var(--ink);font-size:9.5px;letter-spacing:.14em;
  font-weight:600;border-radius:4px;padding:3px 8px;text-transform:uppercase}
.tagline{display:inline-block;background:var(--wash);border-radius:6px;padding:3px 9px;
  font-size:11.5px;color:var(--sub);margin:0 5px 5px 0}
.acc-badge{display:inline-flex;align-items:center;gap:5px;background:var(--green-wash);color:var(--green);
  border:1px solid #cfe0d5;border-radius:99px;padding:4px 11px;font-size:11.5px;font-weight:600;
  text-decoration:none;font-family:inherit}
.evidence-chip{align-self:flex-start;max-width:100%;cursor:pointer;overflow-wrap:anywhere;text-align:left}

/* ── program cards ───────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:880px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:row;transition:.15s;min-width:0;min-height:224px;text-decoration:none;color:inherit;cursor:pointer}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#ded5c8}
.pphoto{width:270px;flex-shrink:0;background-size:cover;background-position:center;position:relative;
  background-color:var(--wash)}
.pphoto .badges{display:flex;gap:6px;position:absolute;top:10px;left:14px;flex-wrap:wrap;max-width:calc(100% - 28px)}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.pcard h3{font-size:17.5px}
.pcard .agency{font-size:12.5px;color:var(--sub)}
.hosted{display:block;font-size:11.5px;font-weight:600;color:var(--terra);overflow-wrap:anywhere}
.pcard .desc{font-size:13.5px;color:var(--sub);flex:1}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--line);padding-top:11px}
.spec div b{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--sub);font-weight:600;text-transform:uppercase}
.spec div span{font-size:13px;font-weight:500}
.price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.pfrom b{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase}
.pfrom span{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--terra)}
.pfrom small{font-size:11px;color:var(--sub);font-weight:400;display:block}
.save{border:1px solid var(--line);background:#fff;border-radius:8px;width:38px;height:38px;
  font-size:15px;cursor:pointer;flex:0 0 38px}
.save.on{background:var(--terra);border-color:var(--terra);color:#fff}
@media(max-width:700px){.pcard{flex-direction:column}.pphoto{width:100%;height:180px}
  .spec{grid-template-columns:repeat(2,1fr)}}

/* ── category tiles ──────────────────────────────────────────────────── */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px}
.catcard{cursor:pointer;text-decoration:none;color:inherit}
.catcard .cimg{height:280px;border-radius:8px;background-size:cover;background-position:center;transition:.2s}
.catcard:hover .cimg{opacity:.92}
.catcard b{display:block;font-family:'Playfair Display',serif;font-size:20px;font-weight:500;margin:12px 0 2px}
.catcard span{font-size:13.5px;color:var(--sub)}

/* ── match cards (the recommendations) ───────────────────────────────── */
.matchwrap{display:grid;gap:16px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:220px minmax(0,1fr);min-width:0;text-decoration:none;color:inherit;transition:.15s}
/* .pphoto carries a fixed 270px width for the browse cards, which is WIDER
   than this grid's 220px first column — so the photo overflowed into the text
   column and clipped every title and reason on the results screen (Merve's
   screenshot, 2026-08-10). The photo must fill its column, not dictate it. */
.mcard .pphoto{width:100%;min-width:0}
.mcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mrank{position:absolute;top:10px;left:14px;background:var(--ink);color:#fff;border-radius:99px;
  width:26px;height:26px;display:grid;place-items:center;font-size:12px;font-weight:600}
.mbody{padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mcard h3{font-size:17.5px}
.mbody .agency{overflow-wrap:anywhere}
.reasons{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.reason{font-size:13px;color:var(--green);display:flex;gap:7px;align-items:flex-start}
.reason svg{flex:0 0 14px;margin-top:3px}
@media(max-width:700px){.mcard{grid-template-columns:1fr}}

/* ── detail page ─────────────────────────────────────────────────────── */
.dhero{position:relative;height:min(46vw,400px);background:var(--wash) center/cover;border-radius:0}
/* The headline sits in the bottom third, and on a phone that third is often the
   brightest part of the photograph — a campfire, a lake at noon. The old scrim
   topped out at .45 and left white type fighting the image. Weight it toward
   the bottom, where the words actually are, and leave the top of the picture
   almost untouched. */
.dhero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,10,.12) 0%,rgba(20,16,10,.5) 58%,rgba(20,16,10,.74) 100%)}
.dhero .dh-in{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:26px 0}
.dhero .dh-in .wrap{color:#fff}
.dhero h1{font-size:clamp(26px,3.6vw,42px);color:#fff;margin:8px 0 6px}
.crumbs{font-size:12.5px;color:var(--sub);margin:16px 0 4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--sub);text-decoration:none;cursor:pointer}
.crumbs a:hover{color:var(--terra)}
/* Who runs the programme, directly under the title that names the campus. It
   sits outside .dblock on purpose: the body-prose scale belongs to what a
   parent reads about the programme, and this is a label on the programme.
   overflow-wrap because venue names are long proper nouns on a 390px phone. */
.runby{font-size:14px;color:var(--sub);margin:10px 0 0;overflow-wrap:anywhere}
.hostlink{display:inline-block;margin-left:7px;color:var(--terra);font-weight:600}
/* minmax(0,1fr), NOT 1fr. A `1fr` track floors at the item's min-content, and
   the dates table's five white-space:nowrap headers make that 537px — so on a
   390px phone the track grew to 537 and pushed the whole page 167px off the
   right edge, which is the text running past the screen in Merve's 2026-08-11
   screenshots. The table itself was never the problem: it already sits in
   .tablescroll and scrolls on its own. Only the track needed permission to be
   narrower than its contents. */
.dlayout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start;padding:34px 0 60px}
@media(max-width:900px){.dlayout{grid-template-columns:minmax(0,1fr)}}
.dblock{margin-bottom:34px}
.dblock > h2{font-size:22px;margin-bottom:14px}
/* ONE body scale for everything a parent reads as prose on a programme page.
   The blocks were assembled at different times and drifted to four sizes —
   the About paragraph at 15.5px, day-schedule bullets at 15px, the included
   list at 13.5px, and highlight bullets at 13px because .reason is styled for
   the compact match cards. Merve, 2026-08-10: "The text should be consistent
   not some large and some small in bullets." Tables keep their own denser
   scale; they are data, not prose. */
.dblock p,
.dblock li,
.dblock .reason,
.dblock .reason span,
.dblock .inclist{font-size:15px}
/* The two bulleted lists a parent reads on a programme page — the highlights
   under About, and A typical day. Both carry .dbullets so the phone block at
   the foot of this section can make one list of them. These declarations were
   inline attributes until that block needed to override them; above phone
   width each list keeps exactly the shape it shipped with. */
.hlist{list-style:none;display:grid;gap:7px;margin-top:14px}
.daylist{list-style:none;display:grid;gap:8px}
.daylist li{display:flex;gap:12px}
.daylist .bullet{min-width:8px}
.factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0 30px}
.factstrip div{background:var(--card);padding:13px 15px}
/* An odd number of facts leaves the last grid slot empty, and because the strip
   paints its gaps by showing --line through them, that empty slot renders as a
   hollow beige box beside the last fact — it reads as a broken card, not as
   whitespace. A programme without MAX CLASS has five. Let the odd one out span
   the row. Two-column phone layout only; the desktop strip is auto-fit and a
   full-width span there would be wrong. */
@media(max-width:560px){.factstrip div:last-child:nth-child(odd){grid-column:1/-1}}
.factstrip b{display:block;font-size:9.5px;letter-spacing:.13em;color:var(--sub);text-transform:uppercase;font-weight:600}
.factstrip span{font-size:14.5px;font-weight:500}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.data th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);
  font-weight:600;padding:11px 14px;background:var(--wash);white-space:nowrap}
table.data td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.data tr:hover td{background:#fdfbf8}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Once the page stopped being dragged wide by this table, `width:100%` crushed
   it into the 350px phone column instead: "29 Haz 2026" broke across three
   lines and the dates block became unreadable. width:auto lets the table take
   the width its own content needs and scroll inside .tablescroll — the wide
   thing scrolls, the page does not — while min-width:100% keeps it filling the
   column on the programmes whose tables are narrow enough to fit. */
@media(max-width:700px){.tablescroll table.data{width:auto;min-width:100%}}
.money{font-weight:600;white-space:nowrap}
.st-open{color:var(--green);font-weight:600}
.st-closed{color:var(--faint)}
.inclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 18px;font-size:13.5px}
.inclist span{display:flex;gap:8px;align-items:flex-start}
.yes{color:var(--green);font-weight:700}
.no{color:var(--faint);font-weight:700}
.aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.abox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.abox .from{font-family:'Playfair Display',serif;font-size:30px;font-weight:600;color:var(--terra);line-height:1.1}
.evidence{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;font-size:13px}
.evidence a{color:var(--terra);word-break:break-all}
.evidence li{margin:6px 0;list-style:none;padding-left:15px;position:relative}
.evidence li:before{content:"·";position:absolute;left:4px;color:var(--faint)}
.checkgrid{display:grid;gap:7px;font-size:13px;margin-top:10px}
.checkgrid div{display:flex;gap:8px;align-items:center}

/* The programme page on a phone — Merve photographed three of them on
   2026-08-11 ("Format is messed up": Azurlingua Nice, AMADEUS Vienna). The
   desktop page is out of that report's scope, so every fix below is scoped to
   phone widths and >=1024px renders exactly as it did. */
@media(max-width:700px){
  /* The headline is white type over whatever photograph the programme brought,
     and the hero-wide gradient is only .12 opaque at the top of a two-line
     title — over a bright Riviera photo that is about 1.4:1, which is why the
     words disappeared into her screenshot. Give the text block its OWN plate
     so legibility stops depending on the picture: .66 over the whitest photo a
     programme could carry is 6.1:1 for the title and 5.0:1 for the two quieter
     lines, both past WCAG AA. The plate hides the picture behind it, so the
     hero keeps a band of photograph above the words (that is the padding-top,
     and it is why the height is a minimum) — and the block sits in flow,
     because a long title used to overflow the top of a 179px hero and land on
     the cream page background, outside the scrim entirely. */
  .dhero{height:auto;min-height:min(68vw,350px);padding-top:88px;display:flex;align-items:flex-end}
  .dhero .dh-in{position:relative;width:100%;padding:20px 0 22px;background:rgba(20,16,10,.66)}
  .dhero .dh-in:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:38px;
    background:linear-gradient(180deg,rgba(20,16,10,0),rgba(20,16,10,.66))}
  /* A programme name or a paragraph can carry a token with nowhere to break —
     a compound venue name, a bare URL. Nothing on a 390px phone may push the
     page sideways or hide characters past the right edge. */
  .dhero .dh-in .wrap,.crumbs span,.dblock p,.dblock li{overflow-wrap:anywhere}
  /* One bullet. The highlights marked their lines with a green tick 7px from
     the text, A typical day with a 12.5px grey middot 12px away — two bullet
     styles a thumb-scroll apart on the same page. Draw the marker in CSS so
     both lists get the same one, and stand the two markup markers down. The
     ticks and crosses in What's included and in the verification checks are
     NOT bullets — each states whether the thing is there — so they stay. */
  .dblock .dbullets,.dblock .dbullets li{gap:10px}
  .dblock .dbullets li{display:flex;align-items:flex-start;color:var(--ink)}
  .dblock .dbullets li:before{content:"·";flex:0 0 9px;color:var(--faint)}
  .dblock .dbullets li > svg,.dblock .dbullets li > .bullet{display:none}
}

/* ── onboarding ──────────────────────────────────────────────────────── */
.quizwrap{max-width:620px;margin:0 auto;padding:44px 20px 70px}
.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:30px}
.progress i{display:block;height:100%;background:var(--terra);transition:width .3s ease}
/* One type scale for every step. The global h2 is a clamp() that grows with
   the viewport, so a short question and a long one rendered at visibly
   different sizes as the text wrapped — Merve: "the text is sometimes large,
   sometimes small" (2026-08-10). Fixed size, fixed sub, no drift. */
.qstep h2{margin-bottom:8px;font-size:26px;line-height:1.25}
.qsub{color:var(--sub);font-size:14.5px;margin-bottom:24px;min-height:21px}
.opt,.opt small{font-size:14.5px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:15px 17px;
  cursor:pointer;text-align:left;font-family:inherit;font-size:14.5px;transition:.13s;display:flex;
  align-items:center;gap:12px;color:var(--ink)}
.opt:hover{border-color:var(--terra);background:var(--terra-wash)}
.opt.on{border-color:var(--terra);background:var(--terra-wash);box-shadow:0 0 0 3px rgba(181,80,47,.09)}
.opt .oi{font-size:20px;line-height:1}
.opt small{display:block;color:var(--sub);font-size:12.5px;font-weight:400;margin-top:1px}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;align-items:center}
@media(max-width:520px){.opts.two{grid-template-columns:1fr}}

/* ── comparison ─────────────────────────────────────────────────────── */
.compare-intro{max-width:760px;margin-bottom:22px}
.compare-picker{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:18px;
  margin-bottom:24px}
.compare-picker-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}
.compare-picker-head span{font-size:12.5px;color:var(--sub)}
.compare-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:9px}
.compare-pick{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;
  color:var(--ink);font:inherit;text-align:left;display:flex;justify-content:space-between;gap:12px;
  align-items:center;cursor:pointer;min-width:0}
.compare-pick:hover:not(:disabled){border-color:var(--terra)}
.compare-pick.on{border-color:var(--terra);background:var(--terra-wash)}
.compare-pick:disabled{cursor:not-allowed;opacity:.55}
.compare-pick > span:first-child{min-width:0}
.compare-pick b,.compare-pick small{display:block;overflow-wrap:anywhere}
.compare-pick b{font-size:13px}.compare-pick small{font-size:11.5px;color:var(--sub);margin-top:2px}
.compare-action{font-size:11px;font-weight:600;color:var(--terra);text-align:right;flex:0 0 82px}
.compare-full{margin-top:10px}
.compare-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:14px;background:var(--card)}
.compare-table{border-collapse:collapse;min-width:max(100%,720px);table-layout:fixed}
.compare-table th,.compare-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:13px 14px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.compare-table tr > *:last-child{border-right:0}.compare-table tbody tr:last-child > *{border-bottom:0}
.compare-table thead th:first-child,.compare-table tbody th{width:165px;background:var(--wash);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.compare-program{width:240px;background:#fff}
.compare-program a{display:block;color:var(--ink);text-decoration:none;font-family:'Playfair Display',serif;
  font-size:16px;line-height:1.25;margin-top:9px}
.compare-program > small{display:block;color:var(--sub);font-size:11.5px;margin-top:4px}
.compare-program button{border:0;background:none;color:var(--terra);font:inherit;font-size:11.5px;
  padding:8px 0 0;cursor:pointer}
.compare-photo{height:105px;border-radius:8px;background-size:cover!important;background-position:center!important}
.compare-table td{width:240px;font-size:13px;line-height:1.45}
.compare-table td > small{display:block;color:var(--sub);font-size:11px;margin-top:3px}
.compare-price{font-family:'Playfair Display',serif;color:var(--terra);font-size:18px}
.compare-list{margin:0;padding-left:17px}.compare-list li{margin:0 0 5px}.compare-list li:last-child{margin-bottom:0}
.compare-source{color:var(--terra)}
@media(max-width:700px){
  .compare-picker{padding:14px}.compare-picker-head{align-items:flex-start;flex-direction:column;gap:3px}
  .compare-table{min-width:830px}
}

/* ── modal ───────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(26,24,21,.5);z-index:100;display:grid;place-items:center;padding:20px}
.modal .sheet{background:var(--card);border-radius:18px;padding:30px;max-width:420px;width:100%;
  box-shadow:var(--shadow-lg);position:relative}
.modal h3{font-size:22px;margin-bottom:8px}
.x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;color:var(--sub);cursor:pointer}

/* ── misc ────────────────────────────────────────────────────────────── */
.honesty{background:#fdf6e3;border:1px solid #ead9a0;border-radius:12px;padding:14px 18px;
  font-size:13.5px;color:#6b5a1e}
.results-meta{display:flex;justify-content:space-between;align-items:center;margin:18px 0;flex-wrap:wrap;gap:10px}
.results-meta select{border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;
  background:#fff;font-family:inherit}
.ranking-note{max-width:700px;margin:8px 0 18px;font-size:13px;line-height:1.55;color:var(--sub)}
.empty{text-align:center;padding:50px 0;color:var(--sub)}
.why,.band{background:var(--wash)}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.whygrid b{display:block;margin-bottom:6px;font-size:15px}
.whygrid p{font-size:13.5px;color:var(--sub)}
/* The entry-point tile IS its filter, so the whole card is the link. */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
a.gcard{display:block;text-decoration:none;transition:.15s}
a.gcard:hover{border-color:var(--terra);box-shadow:var(--shadow)}
.destline{font-size:clamp(19px,2.4vw,25px);line-height:1.5}
.destline a{color:var(--terra);text-decoration:none}
.destline a:hover{text-decoration:underline}
.gcard .tag{font-size:10px;letter-spacing:.16em;color:var(--terra);font-weight:600;text-transform:uppercase}
.gcard b{display:block;font-family:'Playfair Display',serif;font-size:17px;margin:8px 0 6px;font-weight:600}
.gcard p{font-size:13px;color:var(--sub)}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:10px}
.faq summary{font-weight:600;font-size:14.5px;cursor:pointer}
.faq p{margin-top:10px;font-size:13.5px;color:var(--sub)}
/* Reading pages (about, terms, privacy): one measure, one body scale. Merve,
   2026-08-10: "the text should be consistent not some large and some small." */
.prose p{font-size:15px;color:var(--sub);margin-bottom:14px;max-width:680px}
.prose h3{margin:34px 0 12px}
.prule{border:none;border-top:1px solid var(--line);margin:34px 0}
.apoint{margin-bottom:16px;max-width:680px}
.apoint b{display:block;color:var(--ink);margin-bottom:2px}
.apoint p{margin-bottom:0}
.prose .aclose{color:var(--ink);font-weight:600;margin-top:22px}
/* Registry pages (About/Guides/Inspiration from content/<locale>.json): the
   API renders founder markdown escape-first — headings, lists, quotes, rules,
   tables. Same measure and body scale as the baked reading pages; a wide table
   scrolls inside the page rather than widening a phone. */
.page-body h1,.page-body h2{font-size:clamp(20px,2.4vw,26px);margin:34px 0 12px}
.page-body h1:first-child,.page-body h2:first-child,.page-body h3:first-child{margin-top:0}
.page-body h4,.page-body h5,.page-body h6{margin:24px 0 8px}
.page-body ul,.page-body ol{margin:0 0 14px 22px;max-width:680px;font-size:15px;color:var(--sub)}
.page-body li{margin-bottom:6px}
.page-body blockquote{border-left:3px solid var(--line);margin:0 0 14px;padding:2px 0 2px 16px;max-width:680px}
.page-body hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.page-body img{max-width:100%;height:auto;border-radius:12px}
.page-body a{color:var(--ink);text-decoration:underline}
.page-body p,.page-body li,.page-body h1,.page-body h2,.page-body h3{overflow-wrap:anywhere}
.page-body .brief-table{overflow-x:auto;max-width:100%;margin:0 0 14px}
.page-body table{border-collapse:collapse;font-size:14px}
.page-body th,.page-body td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:54px;align-items:start}
.contact-intro p{font-size:15px;color:var(--sub);margin-bottom:18px;max-width:430px}
.contact-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;
  display:grid;gap:18px;box-shadow:var(--shadow)}
.contact-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;background:#fff;color:var(--ink);font:inherit;font-size:15px;resize:vertical}
.contact-form input[readonly]{background:var(--wash);color:var(--sub)}
.contact-form .btn{justify-self:start}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-status{min-height:24px;font-size:13.5px;color:var(--sub)}
.contact-status.ok{color:var(--green);font-weight:600}
.contact-status.error{color:#8a2e23;font-weight:600}
@media(max-width:700px){
  .contact-layout{grid-template-columns:1fr;gap:22px}
  .contact-form{padding:18px}
  .contact-form .btn{width:100%}
}
.legal h3{font-size:17px;margin:28px 0 8px}
.legal h3:first-child{margin-top:0}
.legal p{font-size:14.5px;color:var(--sub);margin-bottom:10px;max-width:680px}
.legal ol{margin:0 0 6px 22px;max-width:680px}
.legal ol li{font-size:14.5px;color:var(--sub);margin-bottom:10px}
footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:12.5px;color:var(--sub);
  background:var(--wash)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:28px}
.footbrand .logo{font-size:19px;cursor:default}
.foothead{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:10px;font-weight:600}
footer ul{list-style:none}
footer li{margin:6px 0}
footer a{color:var(--sub);text-decoration:none}
footer a:hover{color:var(--terra)}
.footbase{border-top:1px solid var(--line);padding-top:16px;line-height:1.7;overflow-wrap:anywhere}
.footdisclaim{margin-bottom:8px;max-width:780px}
/* Phone: the footer was 551px of an 812px viewport (Merve, 2026-08-11) —
   tighten padding and gaps; the content is unchanged. */
@media(max-width:700px){
  footer{padding:26px 0 30px}
  .footgrid{grid-template-columns:1fr;gap:16px;margin-bottom:18px}
  .footbase{line-height:1.55;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.skeleton{background:linear-gradient(90deg,#f0ebe3,#f7f3ed,#f0ebe3);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
[hidden]{display:none!important}