/* ============================================================
   Flyeasy — website
   Tokens mirror brand/brand.js and theme/palettes.ts so the site
   and the app are visibly the same product.

   Single-theme on purpose: the warm-paper ground IS the brand.
   The app ships light-only, so a dark website would misrepresent it.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --cream:#f5f1e8;
  --paper2:#efeadd;
  --paper3:#e6dfce;
  --ink:#1f2420;
  --slate:#4a5560;
  --mute:#8a8d83;
  --line:#e0d9c8;
  --green:#5a8a4d;
  --green-dark:#47723c;
  --green-soft:#c8dcb8;
  --green-ink:#1d3318;

  --ui:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:24px;
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}

a{color:var(--green-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ── Type ─────────────────────────────────────────────── */
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,66px);line-height:1.03;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.1}
h3{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
p{margin:0}
.lede{font-size:clamp(17px,2.1vw,21px);line-height:1.55;color:var(--slate);max-width:34ch}
.prose{color:var(--slate);max-width:62ch}
.prose p+p{margin-top:16px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin:0 0 18px;
}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute)}

/* ── Header ───────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.88);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;
  font-size:19px;letter-spacing:-.03em}
.brand svg{width:26px;height:28px;flex:none}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:14.5px;color:var(--slate);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:560px){ .nav a.hide-sm{display:none} }

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:12px;font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--paper2);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ── Sections ─────────────────────────────────────────── */
section{padding:clamp(56px,9vw,104px) 0}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ── Hero ─────────────────────────────────────────────── */
.hero{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){ .hero-grid{grid-template-columns:1fr;gap:36px} }
.hero h1{margin-bottom:20px}
.hero .lede{margin-bottom:30px}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--mute)}

/* Phone-shaped media well — mirrors the app's own screen radius */
.device{
  width:min(300px,78vw);margin-inline:auto;border-radius:34px;overflow:hidden;
  background:var(--cream);border:1.5px solid var(--ink);
  box-shadow:0 24px 60px -28px rgba(31,36,32,.5), 0 2px 0 rgba(31,36,32,.05);
}
.device video,.device img{width:100%;display:block}

/* Landscape media well — the promo reel. Same frame language as .device,
   squarer radius because it isn't pretending to be a phone. */
.reel{
  width:min(880px,100%);margin-inline:auto;border-radius:18px;overflow:hidden;
  background:var(--paper2);border:1.5px solid var(--ink);
  box-shadow:0 24px 60px -28px rgba(31,36,32,.5), 0 2px 0 rgba(31,36,32,.05);
}
.reel video{width:100%;display:block;aspect-ratio:16/9;background:var(--cream)}
.reel-note{margin-top:16px;text-align:center;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.05em;color:var(--mute)}

/* ── Feature rows ─────────────────────────────────────── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,72px);align-items:center;
  padding:clamp(40px,6vw,72px) 0}
.feature+.feature{border-top:1px solid var(--line)}
.feature .shot{justify-self:center}
.feature:nth-child(even) .copy{order:2}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:30px}
  .feature:nth-child(even) .copy{order:0}
}
.shot{width:min(244px,68vw);border-radius:28px;overflow:hidden;border:1.5px solid var(--ink);
  box-shadow:0 18px 44px -24px rgba(31,36,32,.45)}
.feature h3{margin-bottom:10px}

/* ── Gallery ──────────────────────────────────────────── */
.gallery{display:flex;gap:18px;overflow-x:auto;padding:6px 0 20px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery figure{margin:0;flex:none;width:236px;scroll-snap-align:start}
.gallery img{border-radius:24px;border:1.5px solid var(--ink);box-shadow:0 14px 34px -20px rgba(31,36,32,.45)}
.gallery figcaption{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute)}

/* ── Callout / CTA ────────────────────────────────────── */
.callout{background:var(--paper2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,5vw,52px);text-align:center}
.callout h2{margin-bottom:12px}
.callout p{color:var(--slate);max-width:48ch;margin:0 auto 26px}
.callout .btn-row{justify-content:center}

/* ── Legal / long-form ────────────────────────────────── */
.doc{max-width:70ch;margin:0 auto}
.doc h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:10px}
.doc .updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute);
  margin-bottom:34px;display:block}
.doc section{padding:0;margin-top:34px}
.doc h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.doc p{color:var(--slate);font-size:16px;line-height:1.68}
.doc p+p{margin-top:14px}
.doc .intro{font-size:17px}

/* ── Footer ───────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:44px 0 60px;background:var(--paper2)}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot-grid nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot a{color:var(--slate);text-decoration:none;font-size:14.5px}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.foot-note{margin-top:26px;font-size:13px;color:var(--mute);max-width:60ch}