/* ============================================================
   NIBBLE — public marketing site
   Design system aligned with the Nibble brand & UI style guide.
   Typography: Apercu Pro (UI) · Alexandria (wordmark + numerals)
   · Baloo 2 (display headlines). Palette: paper / orange / cocoa / matcha.
   ============================================================ */

/* -------- WEB FONTS: Alexandria (brand) + Baloo 2 (display) + Hanken Grotesk (fallback) -------- */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@500;600;700;800&family=Baloo+2:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* -------- FONT FACES -------- */
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Apercu Pro'; src:url('fonts/ApercuPro-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Apercu Mono'; src:url('fonts/ApercuPro-Mono.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* Nibble — pure paper, one appetising orange, warm cocoa neutrals */
  /* paper (neutrals) */
  --paper:       #FFFFFF;   /* page background */
  --cream:       #FFF6F4;   /* warm raised surface */
  --peach-50:    #FFEFF1;   /* subtle fill / stripes */
  --line:        #F3E4E6;   /* hairlines / borders */
  /* aliases kept for sweep compatibility */
  --sand:        #FFFFFF;   /* page background -> paper */
  --sand-hi:     #FFF6F4;   /* raised surface -> cream */
  --sand-lo:     #FFEFF1;   /* subtle fill -> peach-50 */
  --white:       #FFFFFF;
  --mist:        #FFEFF1;
  --mist-hi:     #FFEFF1;   /* tinted fill -> peach-50 */

  /* nibble orange (the brand) */
  --orange:      #F0734A;   /* signature: wordmark, CTAs, links */
  --orange-600:  #DD5C32;   /* hover */
  --peach:       #FFBDCF;   /* light tint */
  --blush:       #FFD9E0;   /* softest tint */
  --coral:       #F0734A;   /* accent alias -> orange */
  --coral-dark:  #DD5C32;
  --amber:       #F0734A;   /* signature accent slot -> orange */
  --amber-600:   #DD5C32;   /* hover */
  --gold:        #FFBDCF;   /* gold accents -> peach */
  --gold-soft:   #FFD9E0;   /* blush */

  /* cocoa (warm neutral, from the tagline) */
  --bean:        #2E2329;   /* deepest brown — headlines, dark surfaces, footer */
  --cocoa:       #6B5E64;   /* secondary text */
  --latte:       #A99CA2;   /* captions */
  --ink:         #3D343A;   /* body text */
  --teal:        #6B5E64;   /* primary text -> cocoa */
  --teal-dark:   #2E2329;   /* headlines / dark surface -> bean */
  --teal-deeper: #2E2329;   /* deepest / footer / code -> bean */
  --teal-soft:   #A99CA2;   /* faint -> latte */

  /* matcha — the functional status green (live / success / on-track),
     matching the product tokens. Never pink: pink stays brand-only. */
  --matcha:      #6FA579;
  --matcha-700:  #4C7D58;
  --matcha-100:  #E3EFE4;
  --sage:        #FFBDCF;   /* soft brand tint — decorative text on gradient bands */

  --bg:          var(--paper);
  --fg-1:        var(--bean);
  --fg-2:        var(--cocoa);
  --fg-3:        #837079;
  --fg-muted:    var(--latte);

  --border-subtle:  rgba(46,35,41, 0.08);
  --border-default: rgba(46,35,41, 0.16);

  --font-sans: 'Apercu Pro', 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Apercu Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-brand: 'Alexandria', 'Apercu Pro', ui-sans-serif, sans-serif;     /* wordmark + big numerals */
  --font-display: 'Baloo 2', 'Apercu Pro', ui-rounded, sans-serif;         /* hero + section headlines */

  --shadow-sm: 0 1px 2px rgba(46,35,41, 0.05), 0 2px 6px rgba(46,35,41, 0.05);
  --shadow-md: 0 4px 14px rgba(46,35,41, 0.07), 0 12px 28px rgba(46,35,41, 0.06);
  --shadow-lg: 0 18px 50px rgba(46,35,41, 0.13), 0 32px 70px rgba(46,35,41, 0.10);

  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Skip gradient — rich rose→orange→coral for footer + dark bands */
  --skip-gradient: linear-gradient(135deg, #C54F66 0%, #F0734A 52%, #FF8599 100%);

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;
}

/* -------- Base -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--blush); color: var(--bean); }

/* The hidden attribute must always win — display:flex/grid on a class
   otherwise overrides it (e.g. hiding the pilot form fields on success). */
[hidden] { display: none !important; }

/* -------- Layout -------- */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; }
.section { padding: 116px 0; position: relative; }
.section-tight { padding: 80px 0; }
.section-white { background: var(--white); }
.section-teal  { background: var(--skip-gradient); color: var(--sand); }
.section-deep  { background: var(--skip-gradient); color: var(--sand); }

/* -------- Type -------- */
.eyebrow {
  font: 500 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral);
  margin: 0 0 18px;
}
.eyebrow.gold { color: var(--gold); }
.eyebrow.grey { color: var(--fg-3); }
.eyebrow.sage { color: var(--sage); }

.h-display { font: 700 72px/1.04 var(--font-display); letter-spacing: -0.018em; color: var(--fg-1); margin: 0; text-wrap: balance; }
.h-display em { font-style: normal; font-weight: 700; color: var(--orange); }
.h-lg { font: 700 52px/1.08 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1); margin: 0; text-wrap: balance; }
.h-lg em { font-style: normal; font-weight: 700; color: var(--orange); }
.h-md { font: 700 33px/1.14 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.h-sm { font: 500 23px/1.25 var(--font-sans); letter-spacing: -0.005em; color: var(--fg-1); margin: 0; }
.lead { font: 300 22px/1.55 var(--font-sans); color: var(--fg-2); margin: 0; }
.on-dark .h-display, .on-dark .h-lg, .on-dark .h-md, .on-dark .h-sm,
.section-teal .h-lg, .section-teal .h-md, .section-teal .h-sm,
.section-deep .h-lg, .section-deep .h-md, .section-deep .h-sm { color: var(--sand); }
.section-teal .lead, .section-deep .lead { color: var(--sage); }
.muted { color: var(--fg-3); }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font: 500 16px/1 var(--font-sans);
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--skip-gradient); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--skip-gradient); color: #fff; }
.btn-accent:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--fg-1); box-shadow: inset 0 0 0 1.5px var(--border-default); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--teal-soft); }
.on-dark .btn-ghost, .section-teal .btn-ghost, .section-deep .btn-ghost { color: var(--sand); box-shadow: inset 0 0 0 1.5px rgba(255,248,243,.35); }
.on-dark .btn-ghost:hover, .section-teal .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,248,243,.7); }
/* CTAs sitting ON a Skip-gradient band (the dark gradient sections + footer) invert to a solid white button with ink text — a gradient button would vanish into the gradient bg */
.on-dark .btn-primary, .section-teal .btn-primary, .section-deep .btn-primary, .footer .btn-primary,
.on-dark .btn-accent,  .section-teal .btn-accent,  .section-deep .btn-accent,  .footer .btn-accent {
  background: #fff; color: var(--fg-1); border-color: transparent;
}
.on-dark .btn-primary:hover, .section-teal .btn-primary:hover, .section-deep .btn-primary:hover, .footer .btn-primary:hover,
.on-dark .btn-accent:hover,  .section-teal .btn-accent:hover,  .section-deep .btn-accent:hover,  .footer .btn-accent:hover {
  background: rgba(255,255,255,.9); filter: none; box-shadow: var(--shadow-md);
}
.btn-lg { padding: 17px 34px; font-size: 17px; }

/* -------- Nav -------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo .nav-wordmark { height: 26px; width: 87px; display: block; }
.nav-logo .nm { font-family: var(--font-brand); font-weight: 700; color: var(--orange); font-size: 24px; line-height: 1; letter-spacing: -0.01em; }
.nav-logo .tg { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; color: var(--cocoa); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font: 400 15px/1 var(--font-sans); color: var(--fg-2); transition: color .15s; }
.nav-links a:hover { color: var(--fg-1); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* -------- Hero -------- */
.hero { padding: 84px 0 64px; position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 88% -6%, rgba(253,213,203,.45), transparent 60%),
    radial-gradient(820px 520px at 100% 42%, rgba(251,238,231,.9), transparent 62%),
    radial-gradient(680px 480px at -4% 18%, rgba(255,217,224,.5), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-sm);
  font: 500 13px/1 var(--font-sans); color: var(--fg-2); margin-bottom: 26px;
}
.hero-tag .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--coral); }
.hero p.lead { margin: 26px 0 34px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--fg-3); font-size: 14px; }
.hero-trust .sep { width: 1px; height: 18px; background: var(--border-default); }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .h-display { font-size: 56px; } }

/* -------- Image placeholders -------- */
.imgspot {
  position: relative; border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,133,153,.06), rgba(240,115,74,.05)),
    repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(46,35,41,.035) 13px, rgba(46,35,41,.035) 14px),
    var(--white);
  border: 1.5px dashed var(--border-default);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px; min-height: 220px; gap: 8px;
  color: var(--fg-3);
}
.imgspot.shadow { box-shadow: var(--shadow-lg); border-style: solid; border-color: var(--border-subtle); }
.imgspot .imgspot-ico { width: 34px; height: 34px; opacity: .5; margin-bottom: 4px; }
.imgspot .imgspot-label { font: 500 14px/1.3 var(--font-sans); color: var(--fg-2); }
.imgspot .imgspot-dim { font: 400 12px/1.3 var(--font-mono); color: var(--fg-muted); letter-spacing: .02em; }
.imgspot.tall { min-height: 460px; }
.imgspot.hero-shot { min-height: 420px; }
.imgspot.wide { min-height: 320px; }
.section-teal .imgspot, .section-deep .imgspot {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255,248,243,.04) 13px, rgba(255,248,243,.04) 14px),
    rgba(255,255,255,.03);
  border-color: rgba(255,248,243,.22); color: var(--sage);
}
.section-teal .imgspot .imgspot-label, .section-deep .imgspot .imgspot-label { color: var(--sand); }
.section-teal .imgspot .imgspot-dim, .section-deep .imgspot .imgspot-dim { color: var(--teal-soft); }

/* -------- Section header -------- */
.sec-head { max-width: 720px; margin: 0 0 60px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { margin: 20px 0 0; font-size: 19px; line-height: 1.6; }

/* -------- Cards / grids -------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border-radius: 18px; padding: 30px;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .card-ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--teal-dark);
}
.card .card-ico.coral { background: rgba(240,115,74,.14); color: var(--orange-600); }
.card .card-ico.sage  { background: var(--matcha-100); color: var(--matcha-700); }
.card h3 { font: 500 20px/1.25 var(--font-sans); color: var(--fg-1); margin: 0 0 10px; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-3); }
.section-teal .card, .section-deep .card { background: rgba(255,255,255,.04); border-color: rgba(255,248,243,.12); box-shadow: none; }
.section-teal .card h3, .section-deep .card h3 { color: var(--sand); }
.section-teal .card p, .section-deep .card p { color: var(--sage); }

/* -------- Steps -------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 22px; }
.step .step-num {
  width: 38px; height: 38px; border-radius: 999px; background: var(--teal-dark); color: var(--sand);
  display: flex; align-items: center; justify-content: center; font: 500 16px/1 var(--font-sans); margin-bottom: 16px;
}
.step h3 { font: 500 19px/1.25 var(--font-sans); color: var(--fg-1); margin: 0 0 8px; }
.step p { margin: 0; font-size: 15px; color: var(--fg-3); }

/* -------- Stat row -------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .stat-num { font: 700 48px/1 var(--font-brand); letter-spacing: -0.01em; color: var(--bean); }
.section-teal .stat .stat-num, .section-deep .stat .stat-num { color: var(--peach); }
.stat .stat-label { margin-top: 10px; font-size: 15px; color: var(--fg-3); }
.section-teal .stat .stat-label, .section-deep .stat .stat-label { color: var(--sage); }

/* -------- Compare table (before/after) -------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare .col { border-radius: 18px; padding: 30px; }
.compare .col.before { background: var(--white); border: 1px solid var(--border-subtle); color: var(--fg-2); }
.compare .col.after  { background: var(--teal-dark); color: var(--sand); }
.compare .col h4 { margin: 0 0 18px; font: 500 14px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; }
.compare .col.before h4 { color: var(--fg-3); }
.compare .col.after h4 { color: var(--gold); }
.compare .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border-subtle); font-size: 15.5px; }
.compare .col.after .row { border-top-color: rgba(255,248,243,.14); }
.compare .row span:first-child { color: inherit; opacity: .8; }
.compare .row span:last-child { font-weight: 500; text-align: right; }

/* -------- Flow diagram -------- */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow .node {
  flex: 1; min-width: 150px; background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.flow .node .role { font: 500 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--coral); margin-bottom: 9px; }
.flow .node b { display: block; font: 500 17px/1.2 var(--font-sans); color: var(--fg-1); margin-bottom: 6px; }
.flow .node span { font-size: 13.5px; color: var(--fg-3); }
.flow .arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; min-width: 92px; }
.flow .arrow .lbl { font: 500 11.5px/1.2 var(--font-mono); color: var(--fg-3); text-align: center; margin-bottom: 6px; letter-spacing: .02em; }
.flow .arrow svg { color: var(--teal-soft); }
/* On the Skip gradient bands (settlement / developers) keep arrow labels, arrows and muted text white for legibility */
.section-teal .flow .arrow .lbl, .section-deep .flow .arrow .lbl { color: var(--sand); }
.section-teal .flow .arrow svg, .section-deep .flow .arrow svg { color: rgba(255,255,255,.72); }
.section-teal .muted, .section-deep .muted, .on-dark .muted { color: rgba(255,255,255,.82); }
@media (max-width: 760px) {
  .flow { flex-direction: column; }
  .flow .arrow { flex-direction: row; padding: 10px 0; min-width: 0; }
  .flow .arrow svg { transform: rotate(90deg); }
}

/* -------- Code block -------- */
.code {
  background: var(--bean); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,248,243,.08);
  max-width: 100%;
}
.code-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(255,248,243,.09); }
.code-head .dot { width: 11px; height: 11px; border-radius: 999px; }
.code-head .dot.r { background: #F0734A; } .code-head .dot.y { background: #FFBDCF; } .code-head .dot.g { background: #FF8599; }
.code-head .code-title { margin-left: 10px; font: 400 13px/1 var(--font-mono); color: var(--latte); }
.code pre { margin: 0; padding: 22px 22px; overflow-x: hidden; }
.code code { font: 400 13.5px/1.65 var(--font-mono); color: #F3E4E6; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .c-key { color: #FFBDCF; }
.code .c-str { color: #FFBDCF; }
.code .c-num { color: #F4A06D; }
.code .c-com { color: #A99CA2; }
.code .c-mut { color: #C9BFC4; }
.code .c-meth { color: var(--orange); font-weight: 500; }

/* -------- API endpoint pill -------- */
.endpoint { display: inline-flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-sm); font-family: var(--font-mono); font-size: 14.5px; flex-wrap: wrap; max-width: 100%; }
.method { font-weight: 500; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; letter-spacing: .04em; }
.method.post { background: var(--matcha-100); color: var(--matcha-700); }
.method.get  { background: var(--peach-50); color: var(--cocoa); }
.endpoint .path { color: var(--fg-1); min-width: 0; overflow-wrap: anywhere; }

/* -------- Tables -------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.tbl th { font: 500 12.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); background: var(--mist-hi); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl code, .mono-inline { font-family: var(--font-mono); font-size: 13px; background: var(--mist-hi); padding: 2px 6px; border-radius: 5px; color: var(--teal-dark); }
.tbl .req { color: var(--coral-dark); font-weight: 500; }
.status-pill { font-family: var(--font-mono); font-size: 12.5px; padding: 2px 8px; border-radius: 6px; font-weight: 500; }
.status-pill.s2 { background: var(--matcha-100); color: var(--matcha-700); }
.status-pill.s4 { background: rgba(229,162,58,.16); color: #9C6C14; }
.status-pill.s5 { background: rgba(211,75,51,.12); color: #A33A26; }

/* -------- Quote -------- */
.quote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote blockquote { font: 600 32px/1.32 var(--font-display); letter-spacing: -0.01em; color: var(--sand); margin: 0 0 26px; }
.quote .cite { font-size: 15px; color: var(--sage); }
.quote .cite b { color: var(--sand); font-weight: 500; }

/* -------- Pricing -------- */
.price-card { background: var(--white); border-radius: 22px; padding: 44px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); max-width: 560px; margin: 0 auto; text-align: center; }
.price-card .tag { display:inline-block; background: var(--gold-soft); color: var(--teal-dark); font: 500 12px/1 var(--font-sans); letter-spacing:.08em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; margin-bottom: 22px; }
.price-card .big { font: 700 42px/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--fg-1); margin: 0 0 6px; }
.price-card .big em { font-style: normal; font-weight: 700; color: var(--orange); }
.price-list { list-style: none; padding: 0; margin: 28px 0 0; text-align: left; display: grid; gap: 13px; }
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--fg-2); }
.price-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--coral); }

/* -------- Split feature row -------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Grid items default to min-width:auto, so a wide child (the API code block,
   with its long unbreakable curl line) stops the column shrinking and pushes
   the whole section past the viewport. min-width:0 lets the column shrink so
   the code block's own overflow-x:auto scrolls instead. */
.split > * { min-width: 0; }
.split.rev .split-text { order: 2; }
@media (max-width: 880px) { .split, .split.rev { grid-template-columns: 1fr; gap: 32px; } .split.rev .split-text { order: 0; } }
.split-text h2 { margin-bottom: 18px; }
.split-text p { font-size: 17px; line-height: 1.62; }
.feat-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--fg-2); }
.feat-list li svg { flex-shrink: 0; margin-top: 4px; color: var(--coral); }
.section-teal .feat-list li, .section-deep .feat-list li { color: var(--sage); }
.section-teal .feat-list li svg, .section-deep .feat-list li svg { color: var(--sage); }

/* -------- Footer -------- */
.footer { background: var(--skip-gradient); color: var(--sand); padding: 72px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer h5 { font: 500 13px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer a { color: rgba(255,255,255,.78); font-size: 15px; transition: color .15s; }
.footer a:hover { color: #fff; }
.footer .brand-col p { color: rgba(255,255,255,.78); font-size: 15px; max-width: 280px; margin: 16px 0 0; }
.footer-logo { display: flex; align-items: center; gap: 11px; }
.footer-logo .footer-wordmark { height: 26px; width: 87px; display: block; }
.footer-logo .nm { font-family: var(--font-brand); font-weight: 700; font-size: 24px; line-height: 1; color: #fff; letter-spacing: -0.01em; }
.footer-logo .tg { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; color: rgba(255,255,255,.78); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,.78); font-size: 13.5px; }

/* ============================================================
   Coded product mockups (trademark-free, neutral demo brand)
   ============================================================ */
.mock-dash {
  background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle);
  width: 100%;
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--mist-hi); border-bottom: 1px solid var(--border-subtle); }
.mock-bar .d { width: 10px; height: 10px; border-radius: 999px; }
.mock-bar .d.r { background: #F0734A; } .mock-bar .d.y { background: #FFBDCF; } .mock-bar .d.g { background: #FF8599; }
.mock-bar .url { margin-left: 10px; flex: 1; background: var(--white); border: 1px solid var(--border-subtle); border-radius: 7px; padding: 4px 11px; font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); }
.mock-body { padding: 18px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.mock-head .title { font: 500 17px/1.2 var(--font-sans); color: var(--fg-1); }
.mock-tags { display: flex; gap: 6px; margin: 8px 0 16px; flex-wrap: wrap; }
.mock-tag { font: 500 10.5px/1 var(--font-sans); padding: 4px 8px; border-radius: 999px; letter-spacing: .02em; }
.mock-tag.live { background: var(--matcha-100); color: var(--matcha-700); display:inline-flex; align-items:center; gap:5px; }
.mock-tag.live::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--matcha); }
.mock-tag.soft { background: var(--mist-hi); color: var(--fg-3); }
.mock-tag.gold { background: var(--blush); color: var(--orange-600); }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.mock-kpi { background: var(--sand-hi); border: 1px solid var(--border-subtle); border-radius: 11px; padding: 12px; }
.mock-kpi .k-label { font: 500 8.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 7px; }
.mock-kpi .k-num { font: 600 24px/1 var(--font-brand); letter-spacing: -0.01em; color: var(--fg-1); }
.mock-kpi .k-sub { font: 400 9.5px/1.2 var(--font-sans); color: var(--fg-3); margin-top: 5px; }
.mock-kpi .k-sub b { color: var(--matcha-700); font-weight: 500; }
.mock-chart { background: var(--sand-hi); border: 1px solid var(--border-subtle); border-radius: 11px; padding: 14px 14px 8px; }
.mock-chart .c-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mock-chart .c-title { font: 500 12px/1 var(--font-sans); color: var(--fg-2); }
.mock-chart .c-pill { font: 500 9.5px/1 var(--font-sans); color: var(--matcha-700); background: var(--matcha-100); padding: 4px 8px; border-radius: 999px; }
@media (max-width: 460px) { .mock-kpis { grid-template-columns: repeat(2,1fr); } }

/* Phone */
.mock-phone {
  width: 270px; max-width: 100%; aspect-ratio: 270 / 540; margin: 0 auto;
  background: #1F1419; border-radius: 34px; padding: 11px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,248,243,.12);
}
.mock-screen {
  height: 100%; border-radius: 24px; overflow: hidden; position: relative;
  background: linear-gradient(170deg, #C54F66 0%, #F0734A 52%, #FF8599 100%);
  display: flex; flex-direction: column;
}
.mock-screen .scr-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 4px; }
.mock-screen .scr-brand { font: 500 13px/1 var(--font-sans); color: var(--sand); letter-spacing: .01em; }
.mock-screen .scr-live { font: 500 9.5px/1 var(--font-sans); color: #FFBDCF; display: inline-flex; align-items: center; gap: 5px; letter-spacing: .08em; }
.mock-screen .scr-live::before { content:""; width:6px; height:6px; border-radius:999px; background:#F0734A; }
.mock-screen .scr-glass { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 0; }
/* `max-height: 100%` lets the glass shrink to fit the smaller hero phone so the
   reward/venue/timer rows below stay fully visible; on the full-size phone the
   container is taller than 168px, so it renders unchanged. */
.mock-screen .scr-glass svg { height: 168px; max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
.mock-screen .scr-info { text-align: center; padding: 0 16px 10px; }
.mock-screen .scr-eyebrow { font: 500 8.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .14em; color: #FFBDCF; margin-bottom: 7px; }
.mock-screen .scr-reward { font: 500 19px/1.1 var(--font-sans); color: var(--sand); margin-bottom: 4px; }
.mock-screen .scr-venue { font: 400 11px/1.2 var(--font-sans); color: #FFBDCF; }
.mock-screen .scr-timer { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; border-top: 1px solid rgba(255,248,243,.12); }
.mock-screen .scr-timer .lbl { font: 500 8px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: #FFBDCF; }
.mock-screen .scr-timer .big { font: 400 22px/1 var(--font-mono); color: var(--sand); }
.mock-screen .scr-timer .left { font: 400 10px/1 var(--font-mono); color: #A99CA2; }
.mock-screen .scr-foot { display: flex; align-items: center; gap: 11px; padding: 12px 16px 16px; background: rgba(31,20,25,.5); }
.mock-screen .scr-qr { width: 52px; height: 52px; border-radius: 8px; background: #fff; padding: 5px; flex-shrink: 0; }
.mock-screen .scr-foot .ft-t { font: 500 11px/1.2 var(--font-sans); color: var(--sand); margin-bottom: 2px; }
.mock-screen .scr-foot .ft-s { font: 400 9px/1.3 var(--font-sans); color: #A99CA2; }

/* Ops payout mock */
.mock-ops { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); }
.mock-ops .ops-head { padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.mock-ops .ops-head .t { font: 500 15px/1 var(--font-sans); color: var(--fg-1); }
.mock-ops .ops-head .run { font: 500 10.5px/1 var(--font-sans); color: #3F7187; background: #E4EEF2; padding: 5px 10px; border-radius: 999px; }
.mock-ops .ops-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border-subtle); }
.mock-ops .ops-row:last-child { border-bottom: 0; }
.mock-ops .ops-venue { font: 500 13.5px/1.2 var(--font-sans); color: var(--fg-1); }
.mock-ops .ops-iban { font: 400 10.5px/1.2 var(--font-mono); color: var(--fg-muted); margin-top: 3px; }
.mock-ops .ops-amt { font: 500 14px/1 var(--font-sans); color: var(--fg-1); }
.mock-ops .ops-status { font: 500 9.5px/1 var(--font-sans); padding: 4px 8px; border-radius: 999px; background: var(--peach-50); color: var(--cocoa); white-space: nowrap; }
.mock-ops .ops-foot { padding: 14px 18px; background: var(--sand-hi); display: flex; justify-content: space-between; align-items: center; }
.mock-ops .ops-foot .lbl { font: 400 12px/1 var(--font-sans); color: var(--fg-3); }
.mock-ops .ops-foot .tot { font: 500 16px/1 var(--font-sans); color: var(--fg-1); }

/* Hero composition: dashboard with phone overlapping */
.hero-compose { position: relative; padding: 0 0 38px; }
.hero-compose .mock-dash { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: center; }
.hero-compose .compose-phone { position: absolute; right: -10px; bottom: 0; width: 150px; }
.hero-compose .compose-phone .mock-phone { width: 150px; }
@media (max-width: 920px) { .hero-compose .mock-dash { transform: none; } .hero-compose .compose-phone { right: 0; width: 132px; } .hero-compose .compose-phone .mock-phone { width: 132px; } }
@media (max-width: 460px) { .hero-compose .compose-phone { display: none; } }

/* -------- Misc -------- */
.pill { display:inline-flex; align-items:center; gap:8px; padding: 7px 15px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(197,79,102,.12) 0%, rgba(240,115,74,.12) 52%, rgba(255,133,153,.12) 100%); border: 1px solid rgba(240,115,74,.14); font: 700 12px/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--bean); }
/* The "crumb" — Nibble's detached i-dot accent — leads the label. */
.pill::before { content:""; width: 7px; height: 7px; border-radius: 999px; background: var(--orange); flex: none; }
.divider-wave { display:block; width: 100%; height: 40px; color: var(--teal-dark); }
/* Reveal is a progressive enhancement: only hidden when JS is active (html.js),
   so no-JS / slow-load users always see content. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.anchor { scroll-margin-top: 90px; }

/* -------- Request-a-pilot modal -------- */
.modal { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px;
  background: transparent; color: var(--fg-1); box-shadow: var(--shadow-lg); overflow: visible; }
.modal::backdrop { background: rgba(46,35,41, 0.45); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .22s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-card { position: relative; background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 32px 32px 26px; }
.modal-x { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 999px;
  background: transparent; color: var(--fg-3); font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.modal-x:hover { background: var(--cream); color: var(--fg-1); }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal .field label { font: 500 13px/1 var(--font-sans); color: var(--fg-2); }
.modal .field input, .modal .field select {
  width: 100%; font: 400 15px/1.2 var(--font-sans); color: var(--fg-1);
  background: var(--white); border: 1px solid var(--border-default); border-radius: 11px;
  padding: 12px 13px; transition: border-color .15s, box-shadow .15s; }
.modal .field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23837079' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.modal .field input:focus, .modal .field select:focus { outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 115, 74, 0.16); }
.modal .field input:invalid:not(:placeholder-shown) { border-color: var(--orange-600); }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions .btn { flex: 1; justify-content: center; }
.modal-fallback { margin: 16px 0 0; text-align: center; font-size: 13px; }
.modal-fallback a { color: var(--orange); }
.modal-status { margin: 4px 0 0; padding: 12px 14px; border-radius: 11px; font: 500 14px/1.45 var(--font-sans); }
.modal-status.is-err { background: var(--blush); color: var(--orange-600); }
/* Success — the form's payoff moment: a wave on paper, the message on the
   gradient in white. The emoji sits in its own cream chip *beside* the
   gradient so it stays crisp. One entry animation, then everything rests. */
.modal-status.is-ok {
  display: flex; align-items: center; gap: 14px;
  background: none; padding: 8px 0 2px;
  animation: status-in 420ms var(--ease) both;
}
.modal-status.is-ok .ok-wave {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--cream); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  animation: wave-hello 1.1s ease-in-out 300ms 1 both;
  transform-origin: 60% 80%; /* pivot near the wrist */
}
.modal-status.is-ok .ok-text {
  flex: 1; background: var(--skip-gradient); color: #fff;
  padding: 14px 18px; border-radius: var(--r-sm);
  box-shadow: 0 8px 22px rgba(197, 79, 102, 0.28);
}
@keyframes status-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wave-hello {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-status.is-ok, .modal-status.is-ok .ok-wave { animation: none; }
}