/* =========================================================================
   AvPlot — marketing/audience page styles (For Airports, For Consultants).
   Pairs with styles/tokens.css (color/type/motion + glass/elevation/reveal
   tokens and the [data-reveal] scroll-reveal utility) and site_chrome.js
   (marketing nav + global product footer + the [data-reveal] observer).
   Token-based only — no hardcoded colors.
   ========================================================================= */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--ft);
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

.eyebrow{ font-family:var(--fm); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); }
.eyebrow-pill{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); border:1px solid var(--acc);
  border-radius:999px; padding:6px 13px; }
.eyebrow-pill::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--acc); }

/* Buttons */
.btn-primary{ display:inline-flex; align-items:center; gap:12px; padding:14px 20px;
  background:var(--acc); color:var(--acc-ink); border-radius:6px;
  font-family:var(--fm); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; border:none; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.btn-primary:hover{ transform:translateY(-1px); background:var(--acc-deep); }
.btn-secondary{ display:inline-flex; align-items:center; gap:12px; padding:14px 20px;
  color:var(--ink); border:1px solid var(--rule-2); border-radius:6px;
  background:transparent; font-family:var(--fm); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease); }
.btn-secondary:hover{ border-color:var(--ink); }

/* Hero (renders immediately — not data-reveal, so it never starts hidden) */
.mk-hero{ padding:80px 32px 64px; border-bottom:1px solid var(--rule);
  position:relative; overflow:hidden; }
.mk-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 70% at 82% 0%,
    color-mix(in oklab, var(--acc) 9%, transparent), transparent 60%); }
.mk-hero > *{ position:relative; }
.mk-hero h1{ font-family:var(--fd); font-weight:600; font-size:clamp(40px,6vw,76px);
  letter-spacing:-.04em; line-height:.98; margin:18px 0 20px; max-width:19ch;
  text-wrap:balance; }
.mk-hero h1 em{ font-style:italic; font-weight:500; color:var(--acc); }
.mk-hero .lead{ font-size:17px; line-height:1.6; color:var(--ink-2); max-width:62ch;
  margin:0 0 30px; text-wrap:pretty; }
.mk-hero .lead b{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Section shell */
.mk-section{ padding:80px 32px; border-bottom:1px solid var(--rule); }
.mk-head{ max-width:760px; margin:0 0 40px; }
.mk-head .eyebrow{ display:block; margin-bottom:14px; }
.mk-head h2{ font-family:var(--fd); font-weight:500; font-style:italic;
  font-size:clamp(30px,3.6vw,48px); letter-spacing:-.03em; line-height:1;
  margin:0 0 14px; text-wrap:balance; }
.mk-head h2 em{ font-style:normal; color:var(--acc); font-weight:700; }
.mk-head p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:64ch; margin:0; }

/* Capability × use-case grid */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.cap{ background:var(--glass-bg); padding:24px 22px; display:flex;
  flex-direction:column; gap:10px; min-height:190px;
  transition:background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cap:hover{ background:var(--glass-bg-2); transform:translateY(var(--lift));
  box-shadow:var(--glow-acc),var(--elev-2); z-index:1; }
.cap .cap-code{ font-family:var(--fm); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--acc); }
.cap h3{ font-family:var(--fd); font-weight:500; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); margin:0; }
.cap p{ font-family:var(--fm); font-size:12px; line-height:1.5; color:var(--ink-2); margin:0; }
.cap .cap-use{ font-size:12px; line-height:1.5; color:var(--ink-3); margin-top:auto;
  padding-top:10px; }
.cap .cap-use b{ color:var(--ink-2); font-weight:500; }

/* Scenario cards (2-col) with tag pills */
.scn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.scn{ background:var(--glass-bg); border:1px solid var(--glass-stroke);
  border-radius:8px; padding:26px 24px; box-shadow:var(--elev-1);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.scn:hover{ transform:translateY(var(--lift)); box-shadow:var(--glow-acc),var(--elev-2); }
.scn h3{ font-family:var(--fd); font-weight:500; font-style:italic; font-size:22px;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 14px; }
.scn p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 16px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{ font-family:var(--fm); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule-2);
  border-radius:999px; padding:5px 11px;
  background:color-mix(in oklab, var(--acc) 5%, transparent); }

/* Final CTA + beta-code form (reuses /api/verify-beta-code flow) */
.fcta{ padding:96px 32px; text-align:center; position:relative; overflow:hidden;
  border-bottom:1px solid var(--rule); }
.fcta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 60%,
    color-mix(in oklab, var(--acc) 12%, transparent), transparent 60%); }
.fcta > *{ position:relative; }
.fcta h2{ font-family:var(--fd); font-size:clamp(34px,4.6vw,60px); font-weight:400;
  font-style:italic; letter-spacing:-.035em; line-height:1; margin:0 0 16px;
  color:var(--ink); text-wrap:balance; }
.fcta h2 b{ color:var(--acc); font-weight:700; font-style:normal; }
.fcta .fcta-lead{ font-size:15.5px; line-height:1.6; color:var(--ink-2);
  max-width:54ch; margin:0 auto 30px; }
.cta-form{ display:grid; grid-template-columns:minmax(200px,1fr) minmax(150px,1fr) auto;
  gap:10px; max-width:680px; margin:0 auto 14px; }
.cta-form .form-input{ padding:14px 16px; background:var(--surf);
  border:1px solid var(--rule-2); border-radius:6px; color:var(--ink);
  font-family:var(--fm); font-size:12.5px; outline:none; transition:border-color var(--dur-fast); }
.cta-form .form-input::placeholder{ color:var(--ink-3); }
.cta-form .form-input:focus{ border-color:var(--acc); }
.cta-form .form-submit{ white-space:nowrap; padding:14px 22px; }
.cta-form .form-error{ grid-column:1/-1; color:var(--er); font-family:var(--fm);
  font-size:11.5px; text-align:left; display:none; }
.cta-help{ font-family:var(--fm); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:0 auto; max-width:640px; }
.cta-help a{ color:var(--acc); text-decoration:underline; }

/* Comparison table (canonical home: Platform) */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:8px; }
.cmp{ width:100%; border-collapse:collapse; min-width:640px; font-family:var(--fm); }
.cmp th,.cmp td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--rule); vertical-align:top; }
.cmp thead th{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); background:var(--bg-2); }
.cmp thead th.cmp-av{ color:var(--acc); }
.cmp td.cmp-dim{ font-size:12.5px; color:var(--ink); letter-spacing:.02em; white-space:nowrap; }
.cmp td.cmp-trad{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.cmp td.cmp-av{ font-size:12.5px; color:var(--ink-2); line-height:1.5;
  background:color-mix(in oklab, var(--acc) 6%, transparent); }
.cmp tr:last-child td{ border-bottom:none; }

/* Five-question decision output panel (Platform) */
.decision{ border:1px solid var(--glass-stroke); border-radius:10px;
  background:var(--glass-bg); box-shadow:var(--elev-1); overflow:hidden; max-width:780px; }
.decision .dec-row{ display:grid; grid-template-columns:150px 1fr; gap:18px;
  padding:18px 22px; border-bottom:1px solid var(--rule); align-items:baseline; }
.decision .dec-row:last-child{ border-bottom:none; }
.decision .dec-k{ font-family:var(--fm); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); }
.decision .dec-v{ font-size:14px; line-height:1.55; color:var(--ink-2); }
.decision .dec-v b{ color:var(--ink); font-weight:600; }

/* Flow steps (Platform) */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.flow-step{ background:var(--glass-bg); padding:24px 22px; display:flex;
  flex-direction:column; gap:10px; }
.flow-step .fs-n{ font-family:var(--fd); font-style:italic; font-size:30px;
  color:var(--acc); line-height:1; }
.flow-step h3{ font-family:var(--fd); font-weight:500; font-size:17px;
  color:var(--ink); margin:0; letter-spacing:-.01em; }
.flow-step p{ font-family:var(--fm); font-size:12px; line-height:1.5; color:var(--ink-2); margin:0; }

/* Disclaimer / methodology note */
.mk-note{ font-family:var(--fm); font-size:11.5px; line-height:1.7; color:var(--mt);
  max-width:860px; padding:16px 18px; border:1px solid var(--rule);
  border-left:2px solid var(--acc); border-radius:0 6px 6px 0; background:var(--surf); }
.mk-note b{ color:var(--ink-2); font-weight:600; }
.mk-note a{ color:var(--ink-3); text-decoration:underline; }
.mk-note a:hover{ color:var(--acc); }

/* Responsive */
@media (max-width:1080px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .mk-hero{ padding:56px 18px 48px; }
  .mk-section{ padding:56px 18px; }
  .cap-grid{ grid-template-columns:1fr; }
  .scn-grid{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr 1fr; }
  .decision .dec-row{ grid-template-columns:1fr; gap:6px; }
  .fcta{ padding:72px 18px; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:480px){
  .mk-section{ padding:46px 14px; }
  .mk-hero{ padding:48px 14px 40px; }
  .flow{ grid-template-columns:1fr; }
  .cta-form{ grid-template-columns:1fr; }
}