/* Fete Labs — shared surface.
   The hero's own CSS stays inline in index.html (it is the critical path and
   must paint without a second request). Everything below the fold, and every
   generated page under /ecosystem and /guides, is styled from here.

   ONE RULE, and it is the reason this file exists: a button is the .cta
   recipe. var(--sign), 3px solid var(--bone), the double offset shadow, ink
   on a saturated fill, lift on hover, press on active. A colour is three
   custom properties; it is never a different button. */

:root{
  --ink:#04080A;
  --deep:#0A1614;
  --green:#00E676;
  --lime:#A8F03C;
  --teal:#0FC6A4;
  --cyan:#25DFFF;
  --blue:#0F9BD6;
  --bone:#E8F7F0;
  --ash:#6B9086;

  /* Seed-stage products get their own current: a warm orange, the one warm
     note in the palette. On --ink text #FF8A1F is 8.53:1, and #FFC48A on
     the panel is 11.88:1. */
  --orange:#FF8A1F;
  --orange-deep:#C2430A;
  --orange-pale:#FFC48A;

  --rule:rgba(15,198,164,.28);
  --panel:rgba(7,17,15,.72);

  --paint:"Rubik Wet Paint","Comic Sans MS",cursive;
  --sign:"Bungee","Arial Black",sans-serif;
  --body:"Barlow Condensed","Arial Narrow",sans-serif;

  --gut:clamp(16px,4vw,40px);
  --band:clamp(46px,7vw,92px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  -webkit-tap-highlight-color:rgba(37,223,255,.24);
}
img,svg{max-width:100%}
button{font:inherit}

/* skip link — every page gets one, it is the cheapest a11y win there is */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  font-family:var(--sign);font-size:14px;text-transform:uppercase;
  background:var(--cyan);color:var(--ink);padding:10px 16px;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* ───────────────────────── layout ───────────────────────── */

.band{
  position:relative;z-index:4;
  padding:var(--band) var(--gut);
  border-top:2px solid var(--rule);
  background:linear-gradient(180deg, rgba(4,8,10,.84), rgba(4,8,10,.94));
  backdrop-filter:blur(3px);
}
.band--flush{border-top:0}
.wrap{width:min(1180px,100%);margin:0 auto}
.wrap--tight{width:min(820px,100%)}

.kicker{
  margin:0 0 10px;
  font-size:clamp(10px,1.1vw,13px);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
}
.kicker b{color:var(--green);font-weight:700}

.h{
  margin:0 0 14px;
  font-family:var(--sign);font-weight:400;
  font-size:clamp(26px,5.2vw,58px);
  line-height:1.02;letter-spacing:.005em;text-transform:uppercase;
  color:var(--bone);
}
.h em{font-style:normal;color:var(--green)}
/* The FetePass app icon beside the FetePASS app's name (index.html and every
   territory page). Sized to the text it sits in, so one class serves a card
   heading and the beta sheet's kicker alike. */
.fp-logo,.fl-icon{display:inline-block;width:1.2em;height:1.2em;margin-right:.4em;vertical-align:-.22em;flex:none}
.h3{
  margin:0 0 8px;
  font-family:var(--sign);font-weight:400;
  font-size:clamp(16px,2.3vw,25px);line-height:1.1;
  text-transform:uppercase;color:var(--cyan);
}
.lede{
  margin:0 0 clamp(24px,3.4vw,42px);
  font-size:clamp(15px,1.85vw,22px);line-height:1.38;letter-spacing:.02em;
  max-width:62ch;color:var(--bone);text-wrap:pretty;
}
.lede em{font-style:normal;color:var(--cyan)}
.p{margin:0 0 14px;font-size:clamp(14px,1.55vw,18px);line-height:1.5;letter-spacing:.02em;color:var(--bone)}
.p--dim{color:var(--ash)}
.p a,.lede a{color:var(--cyan)}
.p a:hover,.lede a:hover{color:var(--lime)}

/* ───────────────────────── buttons ─────────────────────────
   The single recipe. --fill is the face, --s1/--s2 the two offsets. */

.btn{
  --fill:var(--green); --s1:var(--cyan); --s2:var(--teal); --sh:7px;
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sign);font-weight:400;
  font-size:clamp(12px,1.55vw,18px);
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--fill);
  padding:clamp(9px,1.2vw,14px) clamp(16px,2.6vw,30px);
  border:3px solid var(--bone);
  box-shadow:var(--sh) var(--sh) 0 var(--s1), calc(var(--sh) * -1) calc(var(--sh) * -1) 0 var(--s2);
  cursor:pointer;
  transition:transform .13s ease, box-shadow .13s ease, background-color .13s ease;
}
@media (hover:hover){
  .btn:hover{
    transform:translate(-3px,-3px);
    background:var(--lime);
    box-shadow:calc(var(--sh) + 5px) calc(var(--sh) + 5px) 0 var(--s1),
               calc((var(--sh) + 5px) * -1) calc((var(--sh) + 5px) * -1) 0 var(--s2);
  }
}
.btn:focus-visible{background:var(--lime);outline:4px solid var(--cyan);outline-offset:6px}
.btn:active{
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--s1), -3px -3px 0 var(--s2);
}
.btn small{
  display:block;font-family:var(--body);font-weight:600;
  font-size:clamp(9px,1vw,12px);letter-spacing:.09em;opacity:.78;
}
.btn-stack{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.05}

.btn--cyan{--fill:var(--cyan);--s1:var(--blue);--s2:var(--teal)}
.btn--orange{--fill:var(--orange);--s1:var(--cyan);--s2:var(--orange-deep)}
.btn--lime{--fill:var(--lime);--s1:var(--teal);--s2:var(--green)}
.btn--sm{--sh:5px;font-size:clamp(11px,1.25vw,14px);padding:9px 16px;border-width:2px}
/* the one non-filled variant: still var(--sign), still the offset, no fill */
.btn--ghost{
  --fill:transparent;--s1:var(--teal);--s2:transparent;--sh:5px;
  color:var(--bone);border-color:var(--teal);
}
@media (hover:hover){ .btn--ghost:hover{background:rgba(15,198,164,.18);color:var(--bone)} }
.btn--ghost:focus-visible{background:rgba(15,198,164,.18);color:var(--bone)}

.btnrow{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,26px);align-items:center}
/* the double shadow needs air or the offsets collide with the neighbour */
.btnrow > .btn{margin:6px 8px}

/* ───────────────────────── specs ───────────────────────── */

.grid{display:grid;gap:clamp(14px,2.2vw,26px)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
/* exactly four cards: 3-up leaves an orphan, so pair them */
.grid--pair{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

.spec{
  border:2px solid var(--rule);
  background:var(--panel);
  padding:clamp(18px,2.4vw,28px);
}
.spec-k{
  margin:0 0 10px;
  font-family:var(--sign);font-weight:400;
  font-size:clamp(26px,3.8vw,44px);line-height:1;
  text-transform:uppercase;color:var(--green);
}
.spec:nth-child(2) .spec-k{color:var(--cyan)}
.spec:nth-child(3) .spec-k{color:var(--lime)}
.spec-to{
  display:block;margin:0 0 10px;
  font-size:clamp(11px,1.15vw,14px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ash);
}
.spec p{margin:0;font-size:clamp(14px,1.5vw,17px);line-height:1.45;letter-spacing:.02em}

/* ───────────────────────── the lab (modules) ───────────────────────── */

.mod{
  position:relative;
  border:2px solid var(--rule);
  background:var(--panel);
  padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;gap:10px;
}
.mod-no{
  font-family:var(--sign);font-size:11px;letter-spacing:.14em;
  color:var(--ash);text-transform:uppercase;margin:0;
}
.mod h3{margin:0;font-family:var(--sign);font-weight:400;
  font-size:clamp(17px,2.2vw,24px);line-height:1.1;text-transform:uppercase;color:var(--bone)}
.mod-out{margin:0;font-size:clamp(14px,1.5vw,17px);line-height:1.45;letter-spacing:.02em;color:var(--bone)}
.mod-live{margin:auto 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:600}
.mod-live.is-off{color:var(--ash)}

/* ───────────────────────── venture tiers ───────────────────────── */

.tier{
  border:2px solid var(--rule);
  background:var(--panel);
  padding:clamp(20px,2.8vw,34px);
  margin-bottom:clamp(16px,2.4vw,26px);
}
.tier--orange{border-color:rgba(255,138,31,.42)}
.tier--orange .h3{color:var(--orange-pale)}
.tier--cyan{border-color:rgba(37,223,255,.38)}
.tier-no{
  display:inline-block;margin:0 0 12px;
  font-family:var(--sign);font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--teal);padding:5px 10px;
}
.tier--orange .tier-no{background:var(--orange)}
.tier--cyan .tier-no{background:var(--cyan)}
.tier-grid{display:grid;gap:clamp(16px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));align-items:start}
.bul{margin:0 0 18px;padding:0;list-style:none}
.bul li{
  position:relative;padding-left:20px;margin:0 0 7px;
  font-size:clamp(14px,1.5vw,17px);line-height:1.42;letter-spacing:.02em;
}
.bul li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--green)}
.tier--orange .bul li::before{background:var(--orange)}
.tier--cyan .bul li::before{background:var(--cyan)}

/* labels the shape of an offer, never a number */
.offer{
  font-family:var(--sign);font-size:clamp(13px,1.5vw,17px);
  color:var(--lime);letter-spacing:.02em;text-transform:uppercase;margin:0 0 4px;
}

/* ───────────────────────── territory map ───────────────────────── */

.isles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr));margin:0;padding:0;list-style:none}
.isle{
  display:block;position:relative;
  border:2px solid var(--rule);background:rgba(7,17,15,.6);
  padding:11px 12px 12px;text-decoration:none;color:var(--bone);
  transition:border-color .14s ease, background-color .14s ease, transform .14s ease;
}
@media (hover:hover){ .isle:hover{border-color:var(--cyan);background:rgba(12,30,28,.85);transform:translateY(-2px)} }
.isle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-color:var(--cyan)}
.isle-flag{display:block;height:5px;margin:0 0 9px}
/* Waving flag: bar stays on top; the flag sits left of the name and currency.
   4x4 sprite, 16 frames, shown at 40x28 from an 80x56-per-frame sheet (2x for retina).
   Two stepped animations, columns fast and rows slow, walk the grid in order. */
.isle.has-wave{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:9px;align-content:start}
.isle.has-wave .isle-flag{grid-column:1/-1}
.isle.has-wave .isle-n{grid-column:2;grid-row:2}
.isle.has-wave .isle-m{grid-column:2;grid-row:3}
.isle-wave{
  grid-column:1;grid-row:2 / 4;align-self:start;
  width:40px;height:28px;
  background-repeat:no-repeat;background-size:160px 112px;background-position:0 0;
  animation:wave-x .25s steps(4) infinite, wave-y 1s steps(4) infinite;
}
@keyframes wave-x{ to{background-position-x:-160px} }
@keyframes wave-y{ to{background-position-y:-112px} }

/* Territory page header: the same flag, larger, left of the kicker and heading.
   Sized by two variables so the phone size only has to change them. */
.isle-head{display:flex;align-items:flex-start;gap:18px}
.isle-head-txt{min-width:0;flex:1}
.isle-wave-lg{
  --fw:72px;--fh:51px;
  flex:none;width:var(--fw);height:var(--fh);margin-top:2px;
  background-repeat:no-repeat;background-size:calc(var(--fw) * 4) calc(var(--fh) * 4);background-position:0 0;
  animation:wave-x-lg .25s steps(4) infinite, wave-y-lg 1s steps(4) infinite;
}
@keyframes wave-x-lg{ to{background-position-x:calc(var(--fw) * -4)} }
@keyframes wave-y-lg{ to{background-position-y:calc(var(--fh) * -4)} }
@media (max-width:480px){ .isle-head{gap:12px} .isle-wave-lg{--fw:56px;--fh:40px} }
.isle-n{
  display:block;font-family:var(--sign);font-weight:400;font-size:14px;
  line-height:1.12;text-transform:uppercase;letter-spacing:.005em;
}
.isle-m{display:block;margin-top:5px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.isle.is-pri{border-color:rgba(0,230,118,.5)}
.isle.is-pri .isle-m{color:var(--green)}

/* ───────────────────────── facts table ───────────────────────── */

.facts{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:clamp(13px,1.45vw,16px)}
.facts th,.facts td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.facts th{
  width:40%;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(10px,1.05vw,12px);color:var(--ash);
}
.facts td{color:var(--bone);letter-spacing:.02em}
.facts td b{color:var(--cyan);font-weight:600}

/* ───────────────────────── notices ───────────────────────── */

.note{
  border:2px solid var(--rule);
  background:rgba(7,17,15,.6);
  padding:clamp(14px,1.8vw,20px);margin:0 0 22px;
}
.note p{margin:0 0 8px;font-size:clamp(13px,1.4vw,16px);line-height:1.45;letter-spacing:.02em}
.note p:last-child{margin:0}
.note b{color:var(--lime)}

/* independence disclosure. It is loud on purpose: these pages name
   institutions we have no relationship with, and the page must say so
   before it says anything else. */
.indep{
  border:3px solid var(--lime);background:rgba(7,17,15,.82);
  padding:clamp(13px,1.7vw,18px);margin:0 0 clamp(22px,3vw,32px);
}
.indep p{margin:0;font-size:clamp(13px,1.4vw,16px);line-height:1.45;letter-spacing:.02em;color:var(--bone)}
.indep b{font-family:var(--sign);font-weight:400;color:var(--lime);text-transform:uppercase;letter-spacing:.02em}

/* ───────────────────────── crumbs + head + foot ───────────────────────── */

.top{
  position:relative;z-index:4;
  padding:clamp(14px,2vw,22px) var(--gut);
  border-bottom:2px solid var(--rule);
  background:rgba(4,8,10,.9);
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:baseline;justify-content:space-between;
}
.top-brand{
  font-family:var(--paint);font-weight:400;font-size:clamp(17px,2.2vw,24px);
  text-transform:uppercase;color:var(--bone);text-decoration:none;letter-spacing:.04em;line-height:1;
}
.top-brand span{color:var(--green)}
/* The logo ahead of the name, sized to the text; the test tube is 96x203 in
   its own units. Drawn 1.5em tall and .36em below the baseline, but the
   negative block margins give it a zero-height margin box, so it adds
   nothing to the line and the header keeps its height. */
.fl-mark{display:inline-block;height:1.5em;width:.71em;vertical-align:baseline;margin:-1.14em .42em -.36em 0}
.top-nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.top-nav a{
  font-size:clamp(10px,1.1vw,13px);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);text-decoration:none;
  /* WCAG 2.5.8 — the text is 16px tall, the target must be 24 */
  display:inline-block;padding:5px 2px;
}
.top-nav a:hover,.top-nav a:focus-visible{color:var(--cyan)}

.crumb{
  margin:0 0 clamp(18px,2.4vw,26px);
  font-size:clamp(10px,1.1vw,13px);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);
}
.crumb a{color:var(--teal);text-decoration:none}
.crumb a:hover{color:var(--cyan)}
.crumb span{color:var(--ash);margin:0 7px}

.sitefoot{
  position:relative;z-index:4;
  padding:var(--band) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));
  border-top:2px solid var(--rule);background:rgba(4,8,10,.95);
}
.sitefoot-cols{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));margin-bottom:34px}
.sitefoot h3{
  margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash);
}
.sitefoot ul{margin:0;padding:0;list-style:none}
.sitefoot li{margin:0 0 7px}
.sitefoot a{color:var(--bone);text-decoration:none;font-size:clamp(13px,1.4vw,16px);letter-spacing:.02em}
.sitefoot a:hover,.sitefoot a:focus-visible{color:var(--cyan)}
.sitefoot-fine{
  margin:0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);line-height:1.7;
}

/* ───────────────────────── forms (build brief) ───────────────────────── */

.form{border:2px solid var(--rule);background:var(--panel);padding:clamp(20px,2.8vw,34px)}
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.f{display:block}
.f--wide{grid-column:1/-1}
.f > span:first-child{
  display:block;margin:0 0 5px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}
.f input,.f select,.f textarea{
  width:100%;font:inherit;font-size:16px;
  color:var(--bone);background:#040B0A;
  border:2px solid var(--rule);padding:10px 12px;
}
/* room for the arrow drawn in the background, or long option text runs under it */
.f select{padding-right:34px;text-overflow:ellipsis}
.f textarea{min-height:126px;resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--cyan)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.f-hint{margin:5px 0 0;font-size:12px;letter-spacing:.04em;color:var(--ash);line-height:1.4}
.chk{display:flex;align-items:flex-start;gap:9px;margin:16px 0 4px;font-size:15px;line-height:1.35;cursor:pointer}
.chk input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--green)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fine{margin:12px 0 0;font-size:12px;letter-spacing:.04em;color:var(--ash);line-height:1.45}
.form-fine.is-err{color:var(--lime)}
.form-done[hidden]{display:none}
.done-big{margin:0 0 6px;font-family:var(--sign);font-weight:400;font-size:clamp(18px,3vw,24px);color:var(--green);line-height:1.15}
.btn[disabled]{opacity:.6;cursor:default}

/* ───────────────────────── misc ───────────────────────── */

.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.tag{
  border:2px solid var(--rule);padding:6px 11px;
  font-size:clamp(10px,1.05vw,12px);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);
}
.tag--on{border-color:var(--green);color:var(--green)}

.anchor{scroll-margin-top:clamp(72px,9vw,98px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ── hero scroll cue ─────────────────────────────────────────────── */
.scrolldown{
  display:inline-flex;align-items:center;gap:8px;
  font-size:clamp(9px,1vw,12px);font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ash);text-decoration:none;
  padding:6px 4px;
  animation:fade 1s ease 2.15s both;
}
.scrolldown:hover,.scrolldown:focus-visible{color:var(--cyan)}
.scrolldown:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.scrolldown i{font-style:normal;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-height:600px){ .scrolldown{display:none} }

/* ── the nav floats in only once the poster is behind you ─────────── */
.top--float{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding-left:calc(var(--gut) + env(safe-area-inset-left));
  padding-right:calc(var(--gut) + env(safe-area-inset-right));
  border-top:0;border-bottom:2px solid var(--rule);
  background:rgba(4,8,10,.94);backdrop-filter:blur(8px);
  transition:transform .24s ease;
}
/* Default visible: with no JS the nav must still work. The `js` class is set
   by an inline script before first paint, so it never flashes. */
.js .top--float{transform:translateY(-102%)}
.js .top--float.is-on{transform:none}
.top--float:focus-within{transform:none !important}

/* ── ground for the generated pages: a flat ground and a single hairline ── */
body.lit{background:var(--ink)}
body.lit::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,198,164,.05), rgba(4,8,10,0) 42%);
}

/* ── 320px is a real phone here, not an edge case ─────────────────── */
@media (max-width:360px){
  :root{--gut:14px}
  .stack,.facts td,.facts th,.mod-out,.p,.lede{overflow-wrap:anywhere}
  .btn{font-size:12px;padding:10px 13px;--sh:5px}
  /* two columns leave a waving-flag tile about 65px for its text; one column gives it room */
  .isles{grid-template-columns:1fr}
}