/* Flight Board — the marketing site.
   ⛔ THE HANDOFF'S TOKENS, EXACTLY. Nothing here is approximated: every hex is
      from the design's token table, and no other hue appears anywhere. */
:root{
  --yellow:#f5c518; --yellow-pressed:#e0b30f; --yellow-on-light:#8a6a00;
  --ink:#12130f; --board-bg:#0b0c09; --panel:#101109;
  --paper:#f7f5f1; --canvas:#edebe7; --white:#fff;
  --ink-70:#4a4a44; --ink-50:#6b6a64; --ink-40:#8b8a83; --ink-25:#b8b6ae;
  --line-light:#e2dfd9; --line-mid:#c9c6bf; --line-dark:#2a2b27; --line-row:#1d1e1a;
  --shadow-l:0 12px 32px rgba(18,19,15,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--board-bg); color:var(--paper);
  font-family:Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
.mono{font-family:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{--wrap-pad:24px;max-width:1120px;margin:0 auto;padding:0 var(--wrap-pad)}
a{color:inherit;text-decoration:none}

/* ── header ─────────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50; background:rgba(11,12,9,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark);
}
.bar{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em}
/* ⛔ THE MARK IS AN ASSET, NOT A PATH. The double-C's flicked tips and
   interlock do not survive being rebuilt from two arcs; at 26px the rebuild
   read as a ring, which is what the founder circled twice. This is the real
   book-logo, recoloured into Flight Board's two colours and nothing else. */
.brand .mark{width:26px;height:26px;flex:none;display:block}
.brand small{display:block;font-size:10px;font-weight:500;color:var(--ink-40);letter-spacing:.06em}
nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--ink-25)}
nav a:hover{color:var(--paper)}
.btn{
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-weight:600;font-size:14px;padding:10px 16px;border-radius:10px;border:0;cursor:pointer;
}
.btn:hover{background:var(--yellow-pressed)}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line-dark)}
.btn-ghost:hover{background:#15160f}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:76px 0 64px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40)}
h1{font-size:clamp(42px,6vw,68px);font-weight:700;letter-spacing:-.055em;line-height:.98;margin:14px 0 18px}
h1 em{font-style:normal;color:var(--yellow)}
.lede{font-size:17px;line-height:1.55;color:var(--ink-25);max-width:46ch}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 14px}
.price-line{font-size:13px;color:var(--ink-40)}
.price-line b{color:var(--paper);font-weight:600}

/* ── the board. Zero radius, 1px rules, no shadow. Deliberate. ──────────── */
.board{background:var(--panel);border:1px solid var(--line-dark);border-radius:0}
.board-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line-dark);
}
.board-head .where{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;color:var(--yellow)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:pulse 1.35s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.15}}
.cols,.row{
  display:grid;grid-template-columns:84px 1fr 62px 68px;
  gap:12px;padding:9px 16px;align-items:center;
}
.cols{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);border-bottom:1px solid var(--line-dark)}
.row{border-bottom:1px solid var(--line-row);font-size:13px}
.row:last-child{border-bottom:0}
.row .fl{font-weight:700}
.row .dest{font-weight:600;letter-spacing:-.02em}
.row .gate{color:var(--yellow);font-weight:700}
.row .st{font-size:10px;font-weight:700;letter-spacing:.12em;text-align:right}
.st.board-ing{color:var(--yellow)} .st.ontime{color:#86d9a6}
.st.delay{color:#f0a93a} .st.div{color:#f07a6a}
.row.mine{background:#12130f;box-shadow:inset 0 -2px 0 var(--yellow)}
.row.mine .fl{color:var(--yellow)}

/* ── sections ───────────────────────────────────────────────────────────── */
section{padding:72px 0;border-top:1px solid var(--line-dark)}
h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1;max-width:20ch}
.sub{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink-25);max-width:56ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:30px}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);margin-top:34px;border:1px solid var(--line-dark)}
.cell{background:var(--board-bg);padding:24px}
.cell h3{font-size:16px;font-weight:600;margin-bottom:7px}
.cell p{font-size:14px;line-height:1.5;color:var(--ink-25)}
.tag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);margin-bottom:9px}

/* ── pricing ────────────────────────────────────────────────────────────── */
.price{
  border:1px solid var(--line-dark);padding:32px;background:var(--panel);
  display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:32px;
}
.amount{font-size:56px;font-weight:700;letter-spacing:-.05em;line-height:1}
.amount span{font-size:16px;font-weight:500;color:var(--ink-40);letter-spacing:0}
.price ul{list-style:none;margin:20px 0 0;display:grid;gap:9px}
.price li{font-size:14px;color:var(--ink-25);padding-left:20px;position:relative}
.price li:before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--yellow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line-dark)}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);font-weight:600}
td.y{color:var(--yellow);font-weight:600}

/* ── faq, capture, footer ───────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line-dark);padding:18px 0}
summary{font-size:16px;font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";float:right;color:var(--ink-40)}
details[open] summary:after{content:"–"}
details p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--ink-25);max-width:70ch}
.capture{display:flex;gap:10px;margin-top:20px;max-width:460px}
.capture input{
  flex:1;background:var(--panel);border:1px solid var(--line-dark);color:var(--paper);
  padding:12px 14px;border-radius:10px;font:inherit;font-size:14px;
}
.capture input:focus{outline:2px solid var(--yellow);outline-offset:-1px}
footer{border-top:1px solid var(--line-dark);padding:44px 0 60px;font-size:14px;color:var(--ink-40)}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px}
.fcols h4{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);margin-bottom:12px}
.fcols a{display:block;color:var(--ink-25);padding:4px 0;font-size:14px}
.fcols a:hover{color:var(--paper)}

/* ── the language switcher ───────────────────────────────────────────────────
   ⛔ THE NATIVE SELECT STAYS, ITS LOOK DOES NOT. Founder, 8 Sep 2026: "the
      language stop down ugly design". A raw <select> renders as a white iOS pill
      that has nothing to do with a departure board, so the real control is laid
      transparent on top of a chip drawn in the board's own vocabulary. The
      picker that opens is still the platform's, which on a phone is the best
      thing that can open. */
.lang{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 10px; flex:none;
  border:1px solid var(--line-dark); border-radius:9px; background:var(--panel);
  color:var(--ink-25); cursor:pointer; transition:border-color .15s, color .15s;
}
.lang:hover, .lang:focus-within{border-color:var(--ink-40); color:var(--paper)}
.lang-globe{width:15px;height:15px;flex:none;opacity:.85}
.lang-name{font-size:13px;font-weight:500;white-space:nowrap}
.lang-code{
  display:none; font-family:"Martian Mono",ui-monospace,monospace;
  font-size:11px; font-weight:700; letter-spacing:.06em;
}
.lang-caret{width:9px;height:6px;flex:none;opacity:.7}
/* The select covers the chip exactly, so the whole chip is the hit target and a
   keyboard still lands on a real form control. */
.lang select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; appearance:none; -webkit-appearance:none;
  border:0; background:transparent; font-size:16px;   /* 16px: iOS zooms below it */
}

/* ── the identity button ─────────────────────────────────────────────────────
   ⛔ THE CARREH MARK IS THE SIGN-IN IDENTITY. Founder, 7 Sep 2026: "every
      continue with carreh on web or app, anywhere, should always have the logo
      the way apple and google always have theirs, it's our sign in identity."
      One class, used everywhere the phrase appears, and the mark rides at the
      same optical size Apple and Google use. The label never ships without it.
      The SVG also states its own width and height as attributes, because this
      stylesheet is cached for an hour and the mark must be right regardless. */
.btn-identity{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn-mark{width:20px;height:20px;flex:0 0 auto;display:block}

/* ── the header, on a phone ──────────────────────────────────────────────────
   ⛔ 393px IS THE DESIGN WIDTH AND THE HEADER HAD NO RULE FOR IT. The brand
      wrapped onto three lines, the mark was squeezed to a sliver, and the
      language control sat in the middle of it all. The bar keeps its three
      things at every width: mark and name, language, and the one action. */
@media(max-width:900px){
  .hero,.grid2,.price{grid-template-columns:1fr}
  .grid3,.grid6{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  nav{display:none}
  .bar{gap:10px}
  .brand{margin-right:auto;min-width:0}
  /* One line, always. The name is the identity; the strapline is not worth a
     second and third line of a 64px bar. */
  .brand span{font-size:15px;line-height:1.1;white-space:nowrap}
  .brand small{display:none}
  .btn{font-size:13px;padding:9px 13px;white-space:nowrap}
}
@media(max-width:520px){
  /* "Bahasa Indonesia" cannot share a 393px row with a brand and a button, so
     below this width the chip says EN, FR, ID. The picker still says the name. */
  .lang-name{display:none}
  .lang-code{display:inline}
  .lang{gap:5px;padding:0 8px}
}
@media(max-width:380px){
  .brand .mark{width:22px;height:22px}
  .brand span{font-size:14px}
  .btn{font-size:12.5px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ⛔ A SITE MUST NEVER SCROLL SIDEWAYS. Verified at 393px, the handoff's iPhone
   width, where nothing overflows. This is the guard for the narrower end: the
   hero headline is the only thing wide enough to push the page out. */
@media(max-width:400px){
  h1{font-size:38px}
  .wrap{--wrap-pad:16px}
  .cols,.row{grid-template-columns:70px 1fr 46px 58px;gap:8px;padding:9px 12px}
  .row,.cols{font-size:12px}
}

/* About — the two abouts, Flight Board's own and Carreh's. Deliberately plain:
   it is the one place on the page that is prose rather than a board, so it gets
   a reading measure and nothing else. */
#about h3 { margin-top: 46px; }
#about .sub { max-width: 68ch; }
.linkline { color: var(--yellow-on-light); font-weight: 600; text-decoration: none;
            border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.linkline:hover { color: var(--ink); }


/* ── the phones ──────────────────────────────────────────────────────────────
   ⛔ SHOW THE APP. Founder, 8 Sep 2026: "no phone screen mockups in the flight
      board website please add to make users see what the app looks like,
      especially the home page where upcoming flights show."

      Drawn, not screenshotted. A screenshot is stale the day after a release,
      and there are three of them to keep in step. Everything inside a phone uses
      the app's own vocabulary, so what a visitor sees here is what they get. */
#screens{padding:120px 0 40px}
.phones{
  display:grid; gap:44px; margin-top:64px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.phone-fig{margin:0}
.phone-fig figcaption{
  margin-top:24px; color:var(--ink-25); font-size:14px; line-height:1.5; max-width:34ch;
}
.phone{
  position:relative; width:100%; max-width:290px; margin:0 auto; aspect-ratio:9/19.3;
  padding:10px; border-radius:42px;
  background:linear-gradient(160deg,#2c2d28,#0d0e0b);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.8), inset 0 0 0 1px rgba(247,245,241,.07);
}
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:82px; height:22px; border-radius:100px; background:#000; z-index:2;
}
.phone-screen{
  height:100%; border-radius:33px; overflow:hidden; background:var(--board-bg);
  padding:40px 13px 9px; display:flex; flex-direction:column; gap:8px;
}
.ph-status{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-40);letter-spacing:.04em}
.ph-eyebrow{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);margin:6px 2px 1px}

/* Home: the one that matters now, then the rest. */
.ph-hero{background:var(--panel);border:1px solid var(--line-dark);padding:11px 12px}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-num{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--paper)}
.ph-pill{font-size:7.5px;font-weight:700;letter-spacing:.1em;padding:3px 6px;border:1px solid currentColor}
.ph-pill-go{color:var(--yellow)}
.ph-route{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:20px;font-weight:700;color:var(--paper)}
.ph-route i{flex:1;height:1px;background:var(--line-dark)}
.ph-times{display:flex;justify-content:space-between;margin-top:3px;font-size:10px;color:var(--ink-40)}
.ph-times sup{font-size:7px}
.ph-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line-row)}
.ph-facts b{display:block;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);font-weight:600}
.ph-facts span{display:block;font-size:13px;font-weight:700;color:var(--yellow);margin-top:2px}
.ph-count{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;
  padding-top:9px;border-top:1px solid var(--line-row);font-size:9px;color:var(--ink-40)}
.ph-count b{font-size:13px;color:var(--paper)}

.ph-item{border-bottom:1px solid var(--line-row);padding:9px 2px}
.ph-ok{color:#86d9a6}
.ph-warn{color:#f0a93a}
.ph-item-quiet{opacity:.55}
.ph-when{font-size:9px;color:var(--ink-40);letter-spacing:.08em}
.ph-sub{font-size:9.5px;color:var(--ink-40);margin-top:2px}

/* Board: the app's own rules, monospaced and square, yours in yellow. */
.ph-seg{display:flex;gap:4px;margin:2px 0 3px}
.ph-seg span{flex:1;text-align:center;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 0;color:var(--ink-40);border:1px solid var(--line-dark)}
.ph-seg .on{color:var(--ink);background:var(--yellow);border-color:var(--yellow)}
.ph-board{border-top:1px solid var(--line-dark)}
.ph-brow{display:grid;grid-template-columns:1fr 1.3fr .48fr;gap:5px;padding:7px 3px;font-size:9.5px;
  font-weight:700;color:var(--paper);border-bottom:1px solid var(--line-row)}
.ph-bhead{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);font-weight:600}
.ph-brow span:last-child{text-align:end;color:var(--yellow)}
.ph-bhead span:last-child{color:var(--ink-50)}
.ph-mine{background:rgba(245,197,24,.13);box-shadow:inset 3px 0 0 var(--yellow)}
.ph-late{color:#f0a93a!important}

/* The flight, opened. */
.ph-map{background:var(--panel);border:1px solid var(--line-dark);padding:8px}
.ph-map svg{width:100%;height:auto;display:block}
.ph-track{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px;
  padding-top:7px;border-top:1px solid var(--line-row);text-align:center}
.ph-track b{display:block;font-size:12px;font-weight:700;color:var(--paper)}
.ph-track span{display:block;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.ph-line{display:flex;justify-content:space-between;gap:8px;padding:7px 2px;font-size:9.5px;
  color:var(--ink-40);border-bottom:1px solid var(--line-row)}
.ph-line b{color:var(--paper);font-weight:700}
.ph-alert{margin-top:8px;padding:8px 9px;font-size:9px;letter-spacing:.02em;
  color:var(--yellow);border:1px solid rgba(245,197,24,.34);background:rgba(245,197,24,.08)}

/* The tab bar sits at the foot of every screen, as it does in the app. */
.ph-tabs{margin-top:auto;display:flex;gap:4px;padding-top:9px;border-top:1px solid var(--line-dark)}
.ph-tabs span{flex:1;text-align:center;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-50);padding:6px 0}
.ph-tabs .on{color:var(--ink);background:var(--yellow)}

/* ⛔ THREE PHONES DO NOT FIT ON A PHONE. Below the breakpoint they become one
   swipeable row, which is how somebody holding a phone expects to see three
   phones, and each one keeps its full size rather than shrinking to a thumbnail. */
@media(max-width:900px){
  #screens{padding:88px 0 24px}
  .phones{
    display:flex; gap:28px;
    margin-inline:calc(var(--wrap-pad,24px) * -1);
    padding:4px var(--wrap-pad,24px) 8px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .phones::-webkit-scrollbar{display:none}
  .phone-fig{flex:0 0 76vw; max-width:290px; scroll-snap-align:center}
  .phone-fig figcaption{font-size:13px;max-width:none}
}

/* ⛔ THE LIST TAKES WHAT IS LEFT, THE TAB BAR NEVER MOVES. Five upcoming flights
   are more than a 285px phone can show at once, which is true of the app too, so
   the list is given the remaining height and clipped. A last row running off the
   bottom is what an upcoming list looks like; a tab bar running off the bottom is
   a broken mockup. */
.ph-list{flex:1 1 0;min-height:0;overflow:hidden}