/* DRAFT D — THE BOARDING PASS, BRIGHT.
   Ticket stock, warm neutrals, one accent (ticket vermillion) plus amber for
   the flaps. The signature object is a real split-flap departure board: a dark
   surface that the hero pass sits ON TOP OF, so the glass has actual content
   to refract instead of a manufactured wash. */

:root{
  /* warm every neutral — no #FFF ground, no #000 ink, no grey hairline */
  --paper:#F6F1E4;
  --paper2:#FDFBF6;
  --ink:#1D1815; --ink2:#544A41; --ink3:#8A7F70;
  --rule:#DCD2BD;

  /* one accent hue; the darker step carries large type on a bright ground */
  --acc:#B3341B; --acc-d:#8C2712; --acc-cast:rgba(179,52,27,.55);
  --wash:rgba(29,24,21,.07);

  /* glass, tuned for a bright ground */
  --glass-line:#D6CBB4;
  --glass-under:rgba(120,100,72,.24);
  --glass-pool:rgba(120,100,72,.30);
  --glass-cast1:rgba(70,55,35,.08);
  --glass-cast2:rgba(70,55,35,.48);

  /* the board is the one dark object on the page */
  --board:#14181D; --board2:#1C222A; --board-ink:#E9E4D6; --board-dim:#78808E;
  --flap:#E8B33F;

  /* seasoning colour, exactly one appearance on the page (the gate bar dot) */
  --teal:#1D5E7A;
}

body{padding-bottom:58px}
.wrap{width:min(1080px,92vw);margin-inline:auto;position:relative;z-index:1}

/* ── masthead ─────────────────────────────────────────────────────────────*/
.mast{padding:clamp(26px,3.4vw,44px) 0 clamp(20px,2.4vw,32px)}
.mast-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center}
.mark{display:flex;align-items:center;gap:.75rem;font:900 1rem/1 var(--display);letter-spacing:-.04em}
.mark i{width:26px;height:26px;border-radius:7px;background:var(--acc);display:grid;place-items:center;
  color:#fff;font:900 .72rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}
.mast .lbl{margin-left:auto;text-align:right}

/* ── DEPARTURE BOARD — the signature object ───────────────────────────────
   A surface, so it gets a hard edge and no radius. Everything on it is real:
   the five certificate paths, their FAA knowledge-test codes, a UTC clock. */
/* the bottom band is reserved so the hero pass lands on empty board, never on
   a row — the whole point is that all five paths stay readable behind it */
.board{background:var(--board);border-radius:0;overflow:hidden;
  padding-bottom:clamp(56px,6vw,104px);
  box-shadow:0 26px 60px -34px rgba(35,26,14,.62)}
.board-top{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,36px);
  border-bottom:1px solid rgba(233,228,214,.13)}
.board-top .flap{--fsize:clamp(1rem,1.6vw,1.35rem)}
.board-top .bt-r{margin-left:auto;display:flex;align-items:center;gap:clamp(1.1rem,2vw,2rem)}
.bt-k{font:500 .62rem/var(--lh-h) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--board-dim)}
.bt-v{display:block;margin-top:.55rem;font:500 .74rem/var(--lh-h) var(--mono);
  letter-spacing:.13em;color:var(--board-ink)}
#utc{color:var(--flap)}

.board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board-grid{min-width:640px}
.brow{display:grid;grid-template-columns:4.5rem 6.5rem minmax(0,1fr) 9.5rem;
  gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,36px);
  border-bottom:1px solid rgba(233,228,214,.09);
  transition:background-color var(--t-mid) var(--e)}
.brow:last-child{border-bottom:0}
.bhd{padding-block:clamp(14px,1.5vw,18px);
  font:500 .6rem/var(--lh-h) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--board-dim);
  background:var(--board2)}
.bname{font:500 .8rem/var(--lh-h) var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--board-ink);min-width:0;transition:color var(--t-mid) var(--e)}
.brow.on{background:var(--board2)}
.brow.on .bname{color:var(--flap)}

/* the flaps themselves */
.flap{display:inline-flex;gap:2px;perspective:260px}
.flap b{position:relative;display:grid;place-items:center;min-width:1.05em;
  padding:.34em .16em .38em;border-radius:2px;background:#0E1216;
  font:500 var(--fsize,.8rem)/1 var(--mono);letter-spacing:.02em;color:var(--flap);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.6);
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .07s linear}
.flap b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.55)}
.flap b.sp{background:transparent;box-shadow:none;min-width:.4em}
.flap b.sp::after{display:none}
.flap-st b{color:#8FD3A0}
.brow.on .flap-st b{color:var(--flap)}

/* ── HERO PASS — glass laid over the board, so the blur has real content ──*/
.hero{margin-top:clamp(-96px,-7vw,-52px);margin-inline:clamp(0px,3vw,54px);
  position:relative;z-index:3}
.pane{padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,46px)}
.shd{display:grid;grid-template-columns:minmax(var(--labelw),max-content) minmax(0,1fr) auto;
  gap:var(--gut);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(26px,3vw,46px);
  border-bottom:1px solid var(--rule)}
.shd .seq{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc)}
.shd .ttl{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shd .rt{font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}

.hero .d1{margin-bottom:clamp(24px,2.4vw,34px)}
.hero .body{max-width:54ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3vw,44px)}

/* tear line + punched notches — a real ticket edge, no pattern involved */
.tear{position:relative;border-top:1px dashed var(--rule)}
.tear::before,.tear::after{content:"";position:absolute;top:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--paper);
  box-shadow:inset 0 2px 3px rgba(70,55,35,.22)}
.tear::before{left:-13px}
.tear::after{right:-13px}

/* counterfoil under the tear */
.foil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);
  padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,46px)}
.foil div{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.foil dt{font:500 .62rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.foil dd{font:900 clamp(1.3rem,2vw,1.85rem)/var(--lh-d) var(--display);letter-spacing:-.04em;color:var(--acc-d)}
.foil dd small{display:block;margin-top:.55rem;font:400 .68rem/var(--lh-h) var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}

/* ── RUNWAY CENTRELINE — draws across on load ─────────────────────────────*/
.rwy{position:relative;height:1px;background:var(--rule);
  margin:clamp(40px,5vw,72px) 0 clamp(34px,4vw,58px)}
/* transform only — the line scales, it does not re-lay-out */
.rwy-fill{position:absolute;inset:0;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--e2)}
/* the node rides a full-width carriage, so translateX(100%) = one track width */
.rwy-node{position:absolute;inset:0;transform:translateX(0);transition:transform 1.6s var(--e2)}
.rwy-node::after{content:"";position:absolute;left:0;top:-3.5px;width:8px;height:8px;
  background:var(--acc);transform:translateX(-50%) rotate(45deg)}
.rwy.go .rwy-fill{transform:scaleX(1)}
.rwy.go .rwy-node{transform:translateX(100%)}

/* ── MANIFEST — rows that roll to a second real fact on hover ─────────────*/
.slabel{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(24px,3vw,40px)}
.slabel .n{color:var(--acc);font-weight:500}
.slabel .l{flex:0 0 clamp(28px,5vw,80px);height:1px;background:var(--rule)}
.manifest{display:grid;border-top:1px solid var(--rule)}
.mrow{display:grid;grid-template-columns:minmax(var(--labelw),14rem) minmax(0,1fr) auto;
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--rule);
  transition:background-color var(--t-mid) var(--e)}
.mrow:hover{background-color:var(--wash)}
.mrow dt{font:500 .68rem/var(--lh-h) var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.mrow dd{font:400 .9rem/var(--lh-b) var(--display);color:var(--ink2)}
.mrow .ref{font:400 .62rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap;opacity:0;transition:opacity var(--t-mid) var(--e)}
.mrow:hover .ref{opacity:1}

/* ── COURSE PASSES ────────────────────────────────────────────────────────*/
.passes{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,3vw,42px)}
.pass{display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--paper2);
  border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 1px var(--glass-cast1),0 16px 34px -26px var(--glass-cast2);
  transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.pass:hover{opacity:.92;background-color:#FFFDF8}
.pass-main{padding:clamp(26px,2.8vw,38px) clamp(26px,3vw,44px);
  display:flex;flex-direction:column;gap:clamp(11px,1.2vw,15px);min-width:0}
.pass-main .nm{font:700 clamp(1.15rem,1.75vw,1.5rem)/var(--lh-h) var(--display);letter-spacing:-.018em}
.pass-main p{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2);max-width:52ch}
.pass-main .go{margin-top:.35rem;font:500 .64rem/1 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--acc)}
.pass-stub{position:relative;width:clamp(104px,11vw,148px);
  border-left:1px dashed var(--rule);display:grid;justify-items:center;align-content:center;
  gap:clamp(12px,1.4vw,18px);padding:clamp(24px,2.6vw,34px) clamp(16px,1.8vw,24px)}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;left:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--paper);box-shadow:inset 0 2px 3px rgba(70,55,35,.2)}
.pass-stub::before{top:-13px}
.pass-stub::after{bottom:-13px}
.pass-stub .code{font:900 clamp(1.5rem,2.1vw,2.05rem)/1 var(--display);letter-spacing:-.02em;color:var(--acc-d)}
.pass-stub .sq{font:400 .58rem/1 var(--mono);letter-spacing:.2em;color:var(--ink3)}
/* the stub's coded strip: one bar per character of the test code, widths
   derived from the code itself. A ticket device, not a data claim. */
.bars{display:flex;gap:2px;align-items:flex-end;height:26px}
.bars i{display:block;width:2px;background:var(--ink);opacity:.72}

/* ── FINAL CALL ───────────────────────────────────────────────────────────*/
.final{margin-top:clamp(34px,4vw,58px)}
.final .pane{padding-block:clamp(38px,4.2vw,62px)}
.final .body{max-width:52ch}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(28px,3vw,42px)}
.step{padding:var(--padb) var(--padi);background:var(--paper2);border:1px solid var(--rule);border-radius:12px}
.step .n{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.2em;color:var(--acc);margin-bottom:.9rem}
.step h3{font:700 .98rem/var(--lh-h) var(--display);letter-spacing:-.012em;margin-bottom:.7rem}
.step p{font:400 .82rem/var(--lh-b) var(--display);color:var(--ink2)}

/* ── GATE BAR — fixed, glass, refracting whatever content is under it ─────*/
.gate{position:fixed;left:0;right:0;bottom:0;z-index:120;height:58px;
  background:rgba(253,251,246,.82);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--rule);
  box-shadow:0 -10px 26px -22px rgba(70,55,35,.5)}
/* scroll progress: scaleX on every scroll event, never width */
.gate-fill{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%}
.gate-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font:400 .6rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);
  white-space:nowrap;overflow:hidden}
.gate-in .l,.gate-in .r{display:flex;align-items:center;gap:.6rem}
.gate-in .sep{opacity:.4}
.gate-in b{font-weight:500;color:var(--ink)}
#gpct{color:var(--acc);font-weight:500}
.livedot{width:6px;height:6px;border-radius:9999px;background:var(--teal);flex:none;
  animation:tick 2.4s var(--e) infinite}
@keyframes tick{0%,100%{opacity:1}55%{opacity:.28}}
.gate-mid{display:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media(min-width:860px){.gate-mid{display:block}}

/* ── footer ───────────────────────────────────────────────────────────────*/
.foot{margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(34px,4vw,58px)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding-top:var(--padb);border-top:1px solid var(--rule);
  font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.foot-in a{color:var(--ink2);transition:color var(--t-mid) var(--e)}
.foot-in a:hover{color:var(--acc)}
.foot-in .sp{margin-left:auto}

.sec{padding-top:clamp(20px,2.4vw,34px)}

@media (max-width:760px){
  .hero{margin-inline:0;margin-top:clamp(-56px,-5vw,-32px)}
  .foil{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,28px)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .mrow{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .mrow .ref{display:none}
  .shd{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1.1rem}
  .shd .rt{display:none}
  .pass{grid-template-columns:minmax(0,1fr)}
  .pass-stub{width:auto;border-left:0;border-top:1px dashed var(--rule);
    grid-auto-flow:column;justify-content:start;align-items:center;
    padding:clamp(18px,4vw,24px) clamp(26px,3vw,44px)}
  .pass-stub::before{top:-13px;left:-13px}
  .pass-stub::after{bottom:auto;top:-13px;left:auto;right:-13px}
}