/* Yuksalify Language Center — colour chapters */
:root{
  /* fields */
  --night:#0e0530;
  --indigo:#2a1a6e;
  --violet:#4b2a8a;
  --iris:#6a4fb0;
  --lilac:#d9d2f0;
  --bone:#ecebe7;
  --bone-2:#e0ded8;
  --gold:#c9a24b;
  --gold-2:#d8b968;
  /* inks */
  --ink:#0e0530;
  --ink-soft:#3d3462;
  --paper:#f5f5f8;
  --paper-soft:#cfc8e6;
  /* type */
  --face:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step-small:clamp(0.875rem,0.85rem + 0.1vw,0.9375rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.375rem,1.15rem + 0.8vw,1.875rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-xl:clamp(2.5rem,1rem + 6vw,7rem);
  --step-display:clamp(4rem,1rem + 12vw,12.5rem);
  /* frame */
  --margin:clamp(20px,3.2vw,48px);
  --gap-section:clamp(96px,11vw,176px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;font-family:var(--face);font-size:var(--step-body);line-height:1.5;color:var(--ink);background:var(--night);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:0.18em;text-decoration-thickness:0.08em}
h1,h2,h3{margin:0;font-weight:700;line-height:1;letter-spacing:-0.02em}
p,ul,ol{margin:0}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.on-light :focus-visible{outline-color:var(--violet)}
html{scrollbar-color:var(--iris) var(--night)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.caps{text-transform:uppercase;letter-spacing:-0.03em;line-height:0.9}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* field colours with their inks */
.f-night{background:var(--night);color:var(--paper)}
.f-indigo{background:var(--indigo);color:var(--paper)}
.f-violet{background:var(--violet);color:var(--paper)}
.f-iris{background:var(--iris);color:var(--paper)}
.f-lilac{background:var(--lilac);color:var(--ink)}
.f-bone{background:var(--bone);color:var(--ink)}
.f-gold{background:var(--gold);color:var(--ink)}

/* Buttons: square, one fill */
.btn{display:inline-flex;align-items:center;gap:12px;font:500 var(--step-body)/1.1 var(--face);text-decoration:none;padding:18px 26px;border:0;cursor:pointer;background:var(--gold);color:var(--night);transition:transform 160ms var(--ease-out),background-color 200ms ease}
.btn:active{transform:scale(0.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--gold-2)}}
.btn--ink{background:var(--night);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.btn--ink:hover{background:var(--indigo)}}
.btn svg{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover svg{transform:translateX(4px)}}

/* Header: a plain bar on the first chapter's colour */
.bar{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);padding:22px var(--margin);background:var(--night);color:var(--paper);position:relative;z-index:20}
.bar .brand img{height:clamp(30px,2.6vw,38px);width:auto}
.bar nav{display:flex;gap:clamp(14px,2vw,32px);margin-left:auto}
.bar nav a{text-decoration:none;font-size:var(--step-body);color:var(--paper-soft);transition:color 160ms ease}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--paper)}
.bar nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold)}
.lang{display:flex;gap:10px;font-size:var(--step-small);font-weight:500}
.lang a{text-decoration:none;color:var(--paper-soft)}
.lang a:hover{color:var(--paper)}
.lang span{color:var(--gold)}
.bar .btn{padding:13px 20px}
.menu-btn{display:none;background:var(--indigo);color:var(--paper);border:0;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;transition:transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(0.95)}
.drawer{display:none}
@media (max-width:1020px){
  .bar nav,.bar>.btn{display:none}
  .lang{margin-left:auto}
  .menu-btn{display:inline-flex}
  .drawer{display:block;background:var(--night);color:var(--paper);overflow:hidden;max-height:0;visibility:hidden;transition:max-height 320ms var(--ease-out),visibility 0ms linear 320ms;position:relative;z-index:19}
  .drawer.open{max-height:620px;visibility:visible;transition:max-height 320ms var(--ease-out),visibility 0ms linear 0ms}
  .drawer .inner{display:flex;flex-direction:column;padding:4px var(--margin) 28px}
  .drawer a.m{font-size:var(--step-lead);font-weight:500;text-decoration:none;padding:12px 0}
  .drawer a.m[aria-current="page"]{color:var(--gold)}
  .drawer .btn{margin-top:16px;justify-content:center}
}

/* ---------------- Hero: tabbed folder stack ---------------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:max(calc(100svh - 92px),600px);overflow:hidden;background:var(--night);color:var(--paper);margin-top:-1px}
.hero-top{text-align:center;padding:clamp(28px,6vh,96px) var(--margin) 0}
.hero h1{font-size:var(--step-display);text-transform:uppercase;letter-spacing:-0.035em;line-height:0.88}
.hero .sub{font-size:var(--step-lead);line-height:1.35;max-width:46ch;margin:clamp(16px,3vh,32px) auto 0;color:var(--paper)}
.folders{position:relative;flex:none;margin-top:auto;padding-top:48px;height:calc(4 * 56px + 132px + 48px)}
.folder{position:absolute;left:7vw;right:7vw;bottom:-2px;top:calc(48px + var(--i) * 56px)}
.folder .tab{position:absolute;bottom:100%;left:var(--x);height:42px;padding:0 30px;display:flex;align-items:center;font-size:var(--step-body);font-weight:500;text-decoration:none;background:inherit;color:inherit;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 100%,0 100%);margin-bottom:-1px}
.folder .tab:hover{text-decoration:underline}
.folder-front{padding:clamp(24px,2.6vw,36px);display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px 32px}
.folder-front .btn{flex:none}
.folder-front p{font-size:var(--step-body);max-width:44ch;color:var(--ink-soft);align-self:center}
@media (max-width:760px){
  .hero{min-height:max(calc(100svh - 92px),640px)}
  .hero-top{padding-top:64px}
  .hero h1{font-size:var(--step-display)}
  .hero .sub{margin-top:22px}
  .folders{height:calc(4 * 52px + 196px + 40px);padding-top:40px}
  .folder{left:var(--margin);right:var(--margin);top:calc(40px + var(--i) * 52px)}
  .folder .tab{height:34px;padding:0 18px;font-size:var(--step-small);left:var(--xm)}
  .folder-front .btn{width:100%;justify-content:center}
}

/* ---------------- Inner page head ---------------- */
.head{padding:clamp(56px,7vw,112px) var(--margin) clamp(64px,8vw,128px)}
.head h1{font-size:var(--step-display);text-transform:uppercase;letter-spacing:-0.035em;line-height:0.88}
.head .sub{font-size:var(--step-lead);line-height:1.35;max-width:36ch;margin-top:28px}
.head .big-link{display:block;font-size:var(--step-head);font-weight:700;letter-spacing:-0.025em;line-height:1.05;text-decoration:none}
.head .big-link+.big-link{margin-top:12px;color:var(--gold)}
.head .big-link:hover{text-decoration:underline}
.head .grid{align-items:end}
.head .grid>div:first-child{grid-column:1/9}
.head .grid>div:last-child{grid-column:9/13;justify-self:end}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.jump a{font-size:var(--step-small);font-weight:500;text-decoration:none;padding:10px 14px;background:var(--indigo);color:var(--paper);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.jump a:hover{background:var(--violet)}
.jump a:active{transform:scale(0.97)}
@media (max-width:860px){.head .grid>div:first-child,.head .grid>div:last-child{grid-column:1/-1;justify-self:start}.head .grid>div:last-child{margin-top:32px}}

/* ---------------- Section frame ---------------- */
.chapter{padding:var(--gap-section) var(--margin)}
.chapter h2{font-size:var(--step-head);letter-spacing:-0.025em;line-height:0.98}
.lead{font-size:var(--step-lead);line-height:1.35}
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.intro h2{grid-column:1/6}
.intro p{grid-column:7/12}
@media (max-width:860px){.intro h2,.intro p{grid-column:1/-1}.intro p{margin-top:18px}}

/* ---------------- Proof: large marks on tiles ---------------- */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{background:var(--bone-2);aspect-ratio:3/2;padding:clamp(18px,1.8vw,28px);display:flex;flex-direction:column;justify-content:flex-start;gap:14px;min-width:0}
.tile .mark{font-size:var(--step-head);font-weight:700;letter-spacing:-0.03em;line-height:0.9}
.tile .who{font-size:var(--step-body);font-weight:500;line-height:1.25}
.tile .what{font-size:var(--step-small);color:var(--ink-soft);margin-top:4px}
.tile--head{grid-column:span 2;background:var(--gold);aspect-ratio:auto;justify-content:space-between}
.tile--head h2{font-size:var(--step-head)}
.tile--head p{font-size:var(--step-body);max-width:36ch}
.tile--ink{background:var(--indigo);color:var(--paper)}
.tile--ink .what{color:var(--paper-soft)}
@media (max-width:860px){
  .board{grid-template-columns:1fr 1fr;gap:6px}
  .tile--head{grid-column:1/-1;min-height:180px}
  .tile{aspect-ratio:auto;min-height:220px}
}

/* ---------------- Features: colour sheets, one per capability ---------------- */
.stack-head{padding:var(--gap-section) var(--margin) clamp(64px,7vw,112px)}
.stack-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-items:end}
.stack-head h2{grid-column:1/8;font-size:var(--step-xl);text-transform:uppercase;letter-spacing:-0.035em;line-height:0.9;max-width:12ch}
.stack-head p{grid-column:8/13;font-size:var(--step-lead);line-height:1.35;max-width:30ch}
@media (max-width:860px){.stack-head h2,.stack-head p{grid-column:1/-1}.stack-head p{margin-top:24px}}
.sheet{min-height:72svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);align-content:center;padding:clamp(80px,9vw,140px) var(--margin)}
.sheet .txt{grid-column:1/7;align-self:center}
.sheet h3{font-size:var(--step-head);letter-spacing:-0.025em;line-height:0.98;max-width:14ch}
.sheet .say{font-size:var(--step-lead);line-height:1.35;max-width:30ch;margin-top:28px}
.sheet .big{grid-column:7/13;align-self:center}
.big .num{font-size:var(--step-display);font-weight:700;letter-spacing:-0.05em;line-height:0.8}
.big .lines{list-style:none;padding:0}
.big .lines{display:grid;gap:0.12em}
.big .lines li{font-size:var(--step-xl);font-weight:700;text-transform:uppercase;letter-spacing:-0.035em;line-height:1.02}
.big .books{list-style:none;padding:0;display:grid;gap:22px}
.big .books b{display:block;font-size:var(--step-lead);font-weight:700;letter-spacing:-0.01em;line-height:1.1}
.big .books span{display:block;font-size:var(--step-body);color:var(--ink-soft)}
.sheet:is(.f-indigo,.f-violet,.f-iris) .books span{color:var(--paper-soft)}
@media (max-width:860px){
  .sheet{min-height:0;padding:72px var(--margin)}
  .sheet .txt{grid-column:1/-1}
  .sheet .big{grid-column:1/-1;margin-top:32px}
  .sheet .say{margin-top:20px}
}

/* ---------------- Courses: poster lines with preview ---------------- */
.courses{position:relative}
.courses .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(36px,4vw,64px)}
.courses .top p{font-size:var(--step-lead);line-height:1.35;max-width:30ch}
.index{list-style:none;padding:0}
.index a{display:block;text-decoration:none;padding:6px 0;transition:opacity 220ms ease}
.index .name{display:block;font-size:var(--step-xl);font-weight:700;text-transform:uppercase;letter-spacing:-0.035em;line-height:0.95}
.index .note{display:block;font-size:var(--step-body);color:var(--paper);margin:8px 0 14px;max-width:60ch}
.frame{display:none}
@media (hover:hover) and (pointer:fine){
  .index{max-width:62%}
  .index .note{display:none}
  .index a{padding:4px 0}
  .index:has(a:hover,a:focus-visible) a:not(:hover,:focus-visible){opacity:0.38}
  .frame{display:block;position:absolute;right:var(--margin);width:31%;background:var(--bone);color:var(--ink);padding:clamp(24px,2.4vw,36px);pointer-events:none;clip-path:inset(100% 0 0 0);transform:translateY(12px);transition:clip-path 320ms var(--ease-out),transform 360ms var(--ease-out),top 360ms var(--ease-out)}
  .frame.open{clip-path:inset(0);transform:none}
  .frame .tag{font-size:var(--step-small);font-weight:500;color:var(--violet)}
  .frame h3{font-size:var(--step-lead);font-weight:700;margin-top:10px}
  .frame .for{margin-top:12px}
  .frame ul{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px}
  .frame li{padding-left:22px;position:relative}
  .frame li::before{content:"";position:absolute;left:0;top:0.55em;width:10px;height:10px;background:var(--gold)}
  .frame .t{margin-top:18px;font-weight:500}
}
@media (prefers-reduced-motion:reduce){.frame{transition:none}}

/* ---------------- Team on colour tiles ---------------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.person{min-height:clamp(420px,46vw,620px);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;justify-content:space-between}
.person .ini{font-size:var(--step-display);font-weight:700;letter-spacing:-0.05em;line-height:0.8}
.person h3{font-size:var(--step-lead);font-weight:700;letter-spacing:-0.01em;line-height:1.1}
.person .role{margin-top:6px}
.person .creds{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:20px;list-style:none;padding:0}
.person .creds li{font-weight:500;padding:6px 12px;background:rgba(14,5,48,.1)}
.person .bio{margin-top:16px;max-width:46ch}
@media (max-width:760px){.team{grid-template-columns:1fr;gap:8px}.person{min-height:400px;padding-bottom:72px}}
.team-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);margin-bottom:40px;align-items:end}
.team-intro h2{grid-column:1/5}
.team-intro p{grid-column:5/12;font-size:var(--step-lead);line-height:1.3}
@media (max-width:860px){.team-intro h2,.team-intro p{grid-column:1/-1}.team-intro p{margin-top:16px}}

/* ---------------- How it works: accordion of tinted panels ---------------- */
.acc{display:flex;height:520px}
.stage{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow 450ms var(--ease-in-out)}
.stage.open{flex-grow:5;cursor:default}
.stage>button{all:unset;position:absolute;inset:0;cursor:pointer;z-index:1}
.stage>button[hidden]{display:none}
.stage>button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.stage .rot{position:absolute;left:clamp(16px,1.6vw,24px);bottom:clamp(16px,1.6vw,24px);transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);white-space:nowrap;font-size:var(--step-lead);font-weight:700;transition:opacity 200ms ease}
.stage .body{position:absolute;inset:0;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity 260ms ease 0ms,visibility 0ms linear 260ms;pointer-events:none;min-width:420px}
.stage.open .body{opacity:1;visibility:visible;transition:opacity 260ms ease 200ms,visibility 0ms linear 0ms;pointer-events:auto}
.stage.open .rot{opacity:0}
.stage .body h3{font-size:var(--step-head);letter-spacing:-0.025em;line-height:0.98;max-width:12ch}
.stage .body p{max-width:36ch}
.stage .body .btn{margin-top:20px;align-self:flex-start}
@media (max-width:860px){
  .acc{flex-direction:column;height:auto}
  .stage{flex:none;min-height:64px}
  .stage .rot{transform:none;bottom:auto;top:16px;font-size:var(--step-body)}
  .stage .body{position:relative;display:none;min-width:0;padding:20px}
  .stage.open .body{display:flex;opacity:1}
  .stage.open .rot{display:none}
  
}

/* ---------------- Contact: address in display rows ---------------- */
.rows{list-style:none;padding:0}
.rows li{display:flex;align-items:flex-end;min-height:clamp(84px,10vw,150px);padding:0 var(--margin) clamp(14px,1.4vw,22px)}
.rows li:nth-child(even){background:var(--gold-2)}
.rows .row,.rows h2{font-size:var(--step-xl);font-weight:400;letter-spacing:-0.03em;line-height:1}
.rows a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.rows a.row:hover{text-decoration:underline;text-decoration-thickness:0.05em}}
.rows .hi{background:var(--night)!important;color:var(--paper)}
.go{display:inline-flex;align-items:center;justify-content:center;width:0.9em;height:0.9em;border-radius:50%;background:var(--gold);color:var(--night);margin-left:24px;transition:transform 200ms var(--ease-out)}
.go svg{width:42%;height:42%}
@media (hover:hover) and (pointer:fine){.rows a:hover .go{transform:translateX(6px)}}
@media (max-width:760px){.rows li{min-height:84px}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding:var(--gap-section) var(--margin)}
.faq-grid h2{grid-column:1/5;font-size:var(--step-head);letter-spacing:-0.025em;line-height:0.98;align-self:start;position:sticky;top:32px}
.faq-grid .list{grid-column:5/13}
@media (max-width:860px){.faq-grid h2,.faq-grid .list{grid-column:1/-1}.faq-grid h2{position:static;margin-bottom:32px}}
.faq details{background:var(--bone-2)}
.faq details:nth-child(even){background:var(--bone)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 28px;font-size:var(--step-lead);font-weight:500;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(currentColor,currentColor) center/100% 2.4px no-repeat,linear-gradient(currentColor,currentColor) center/2.4px 100% no-repeat;transition:transform 240ms var(--ease-out)} /* taste-skill-ignore: a drawn plus sign, not a gradient fill */
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 28px 30px;max-width:calc(60ch + 56px)}

/* Course detail chapters */
.course{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);row-gap:28px;scroll-margin-top:16px}
.course .l{grid-column:1/6}
.course .r{grid-column:7/13}
.course h2{font-size:var(--step-xl);text-transform:uppercase;letter-spacing:-0.035em;line-height:0.92}
.course .tag{display:inline-block;margin-top:24px;font-weight:500;padding:6px 12px;background:rgba(14,5,48,.1)}
.f-indigo .course .tag,.f-violet .course .tag{background:rgba(247,246,243,.14)}
.course .for{font-size:var(--step-lead);line-height:1.3;margin-top:20px;max-width:24ch}
.course .r p{max-width:52ch}
.ticks{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:0.45em;width:12px;height:12px;background:currentColor}
.course .teach{font-weight:500;margin-bottom:28px}
@media (max-width:860px){.course .l,.course .r{grid-column:1/-1}}

/* Apply */
.apply{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);row-gap:48px}
.apply .l{grid-column:1/6}
.apply .r{grid-column:7/13}
.apply h2{font-size:var(--step-head)}
.steps{list-style:none;padding:0;margin-top:32px}
.steps li{padding:22px 24px}
.steps li:nth-child(1){background:var(--indigo);color:var(--paper)}
.steps li:nth-child(2){background:var(--iris);color:var(--paper)}
.steps li:nth-child(3){background:var(--lilac);color:var(--ink)}
.steps b{display:block;font-size:var(--step-lead);line-height:1.15}
.steps span{display:block;margin-top:6px;max-width:46ch}
@media (max-width:860px){.apply{row-gap:120px}.apply .l,.apply .r{grid-column:1/-1}.apply .r{order:-1}}

.form h2{font-size:var(--step-head)}
.form .sub{margin:14px 0 28px;max-width:40ch}
.field{margin-bottom:20px}
.field label,.glabel{display:block;font-weight:500;margin-bottom:8px}
.ghint{display:block;color:var(--ink-soft);margin:-4px 0 12px}
.row2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.form input[type=text],.form input[type=tel],.form input[type=number]{width:100%;font:400 var(--step-body)/1.3 var(--face);color:var(--ink);background:var(--paper);border:2px solid var(--bone-2);padding:15px 16px;border-radius:0;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;caret-color:var(--violet);transition:border-color 160ms ease}
.form input::placeholder{color:#5f587d}
.form input:focus{outline:none;border-color:var(--violet)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;background:var(--paper);font-weight:500;user-select:none;-webkit-user-select:none;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.chip:active span{transform:scale(0.97)}
.chip span::before{content:"";width:16px;height:16px;flex:none;border:2px solid var(--ink-soft)}
.chip input:checked+span{background:var(--night);color:var(--paper)}
.chip input:checked+span::before{border-color:var(--gold);background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.8 2.6L9 1.2' stroke='%230e0530' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px 8px no-repeat}
.chip input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.err{display:none;font-size:var(--step-small);font-weight:500;color:#9b1c3a;margin-top:8px}
.has-error .err{display:block}
.has-error input[type=text],.has-error input[type=tel],.has-error input[type=number]{border-color:#9b1c3a}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form .btn[disabled]{opacity:0.7;cursor:progress}
.status{min-height:22px;font-size:var(--step-small);font-weight:500;color:#9b1c3a;margin-top:12px}
.privacy{color:var(--ink-soft);margin-top:4px;max-width:46ch}
.done-msg{display:none}
.form.done form{display:none}
.form.done .done-msg{display:block}
.done-msg h2{font-size:var(--step-head)}
.done-msg p{margin-top:16px;font-size:var(--step-lead)}
.done-msg button{margin-top:28px;background:none;border:0;padding:0;font:500 var(--step-body) var(--face);color:var(--violet);text-decoration:underline;text-underline-offset:0.2em;cursor:pointer}

/* ---------------- Footer: a board of tiles ---------------- */
.foot{background:var(--night);color:var(--paper);padding:8px}
.foot-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.ft{background:var(--indigo);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.ft-a{grid-column:1/5}
.ft-b{grid-column:5/8}
.ft-c{grid-column:8/10}
.ft-d{grid-column:10/13}
.ft-a .st{font-size:var(--step-lead);line-height:1.25;max-width:22ch}
.ft small{font-size:var(--step-body);color:var(--paper-soft)}
.ft ul{list-style:none;padding:0;display:grid;gap:6px}
.ft ul a{text-decoration:none}
.ft ul a:hover{text-decoration:underline}
.ft .clock{font-size:var(--step-head);font-weight:700;letter-spacing:-0.03em;line-height:1}
.ft-d a{font-size:var(--step-lead);text-decoration:none}
.ft-d a:hover{text-decoration:underline}
.ft-w{grid-column:1/9;background:var(--violet);min-height:320px;align-items:center;justify-content:center}
.ft-w img{width:min(72%,880px);height:auto}
.ft-go{grid-column:9/13;background:var(--gold);color:var(--night);min-height:320px;text-decoration:none;transition:background-color 200ms ease}
.ft-go:hover{background:var(--gold-2)}
.ft-go:active{transform:scale(0.99)}
.ft-go b{font-size:var(--step-head);font-weight:700;letter-spacing:-0.025em;line-height:1;max-width:9ch}
.ft-go svg{align-self:flex-end;transition:transform 240ms var(--ease-out)}
.ft-go:hover svg{transform:translateX(8px)}
@media (max-width:860px){
  .foot-board{grid-template-columns:1fr 1fr;gap:6px}
  .ft{padding:20px;min-height:150px}
  .ft-w{grid-column:1/-1;order:-2;min-height:160px}
  .ft-go{grid-column:1/-1;order:-1;min-height:200px}
  .ft-b,.ft-d{grid-column:span 1}
  .ft-c{grid-column:span 1}
  .ft-a,.ft-d{grid-column:1/-1}
  .ft-d a{font-size:var(--step-body)}
}

/* ---------------- Motion ---------------- */
.js .rise{opacity:0;transform:translateY(28px)}
.js .rise.in{opacity:1;transform:none;transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
.js .folder{transform:translateY(90px)}
.js .loaded .folder{transform:none;transition:transform 900ms var(--ease-out);transition-delay:calc(200ms + var(--i) * 80ms)}
.js .hero h1,.js .hero .sub{opacity:0;transform:translateY(24px)}
.js .loaded h1,.js .loaded .sub{opacity:1;transform:none;transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
.js .loaded .sub{transition-delay:120ms}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .folder,.js .hero h1,.js .hero .sub{opacity:1!important;transform:none!important;transition:opacity 200ms ease!important}
  .stage,.sheet{transition:none}
}

/* 404 */
.nf{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
.nf h1{font-size:var(--step-display);text-transform:uppercase;letter-spacing:-0.035em;line-height:0.88}
.nf p{font-size:var(--step-lead);margin:28px 0 36px}

/* Short screens: keep the action on the first screen */
@media (min-width:761px) and (max-height:800px){
  .hero h1{font-size:clamp(4rem,0.5rem + 10vw,9.5rem)}
  .folders{height:calc(4 * 42px + 124px + 42px);padding-top:42px}
  .folder{top:calc(42px + var(--i) * 42px)}
  .folder .tab{height:36px;font-size:var(--step-small)}
}
@media (max-width:760px) and (max-height:720px){
  .hero-top{padding-top:28px}
  .folders{height:calc(4 * 40px + 190px + 34px);padding-top:34px}
  .folder{top:calc(34px + var(--i) * 40px)}
  .folder .tab{height:30px}
}