/* Self-hosted latin variable fonts. Keeping them on fairstride.app removes
   the third-party font connection and keeps the privacy promise literal. */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/fraunces-v38-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/fraunces-v38-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Spline Sans Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/spline-sans-mono-v13-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Fairstride marketing site. Hybrid direction decided 2026-07-08:
   B headline + C matching-engine hero + B filmstrip as ink band +
   C ruled sections + A pricing/FAQ clarity. Type: Fraunces display,
   Inter body, Spline Sans Mono utility. */
/* Coral has two roles (AA audit 2026-07-10): bright --coral for large type,
   decoration, and anything on ink (5.02:1 there); --coral-ink for small text
   and button fills on light grounds (4.92:1 under white, 4.64:1 on paper).
   Bright coral under white text is 3.54:1 and fails AA, so buttons never
   use it. --coral-press is the hover/active fill. */
:root{
  --coral:#F24E3A; --coral-ink:#D33322; --coral-press:#B7291A; --ink:#15181D; --ink-2:#1C2027;
  --paper:#FBF8F3; --card:#FFFFFF; --rule:#DED7CA; --line-d:#2A2E35;
  --sub:#5A5D63; --fog:#A7ABB3;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --body:"Inter",-apple-system,sans-serif;
  --display:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--display);font-weight:600;margin:0}
a{color:inherit}
img{max-width:100%}
/* Horizontal padding only: vertical rhythm belongs to sections. Longhand
   everywhere so .wrap and section paddings never override each other. */
.wrap{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}

/* signature: coral page-progress rule */
.pagebar{position:fixed;top:0;left:0;height:3px;background:var(--coral);width:0;z-index:60}

/* nav */
nav{border-bottom:1px solid var(--ink);background:rgba(251,248,243,.88);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;gap:24px;height:62px}
/* W0 wordmark, decided 2026-07-10: roman ink Fair, italic coral stride */
.brand{display:flex;align-items:baseline;font:600 20px var(--display);
  letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand em,.wm-foot em{font-style:italic;font-weight:400;color:var(--coral-ink)}
.wm-foot{font:600 16px var(--display);color:var(--ink)}
.nav-kicker{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nav-links a{text-decoration:none;color:var(--sub)}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--coral-ink);color:#fff;border-radius:6px;
  padding:12px 24px;font:600 14.5px var(--body);text-decoration:none;
  border:none;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--coral-press);transform:translateY(-1px)}
.btn.ink{background:var(--ink)}
.btn.ink:hover{background:#000}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--ink);transform:none}
.btn.line:hover{background:#F2EDE4}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:88px;padding-bottom:80px;align-items:center}
.kicker{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:16px}
.hero h1{font-size:clamp(42px,5vw,64px);line-height:1.04;letter-spacing:-.012em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--coral)}
.lede{font-size:18px;color:var(--sub);margin:22px 0 30px;max-width:46ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.note{font:400 13px var(--mono);color:var(--sub);margin-top:16px}

/* the matching engine */
.engine{border:1px solid var(--ink);border-radius:16px;background:var(--card);padding:26px;position:relative}
.engine::before{content:"THE MATCHING ENGINE";position:absolute;top:-9px;left:22px;background:var(--paper);
  padding:0 10px;font:500 10.5px var(--mono);letter-spacing:.16em;color:var(--sub)}
.eq{font:500 12px var(--mono);color:var(--sub);margin-bottom:12px}
.chips{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.chip{font:500 13px var(--mono);border:1.5px solid var(--rule);border-radius:999px;padding:8px 16px;
  background:#fff;transition:all .3s ease;cursor:pointer}
.chip.on{border-color:var(--coral);background:#FEF1EF}
.goods{display:flex;flex-direction:column;gap:10px}
.good{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  border:1.5px solid var(--rule);border-radius:12px;padding:10px 14px;background:#fff;
  transition:all .45s cubic-bezier(.2,.8,.2,1)}
.good img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#F2EDE4}
.gname{font-weight:600;font-size:14.5px}
.gprice{font:400 13px var(--mono);color:var(--sub)}
.badge{font:500 10.5px var(--mono);letter-spacing:.08em;color:#fff;background:var(--coral-ink);
  border-radius:999px;padding:4px 10px;opacity:0;transform:scale(.8);transition:all .35s ease}
.good.lead{border-color:var(--coral);transform:translateY(-3px);box-shadow:0 10px 26px rgba(242,78,58,.14)}
.good.lead .badge{opacity:1;transform:none}
.good.dim{opacity:.45}

/* sections + ruled heads */
section{padding-top:88px;padding-bottom:88px}
.rule-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--ink);
  padding-bottom:18px;margin-bottom:0;flex-wrap:wrap}
.rule-head h2{font-size:clamp(28px,3.4vw,40px)}
.rule-head h2 em{font-style:italic;font-weight:400;color:var(--coral)}
.rule-head .idx{font:500 12px var(--mono);letter-spacing:.1em;color:var(--coral-ink)}
.rule-head .lead-in{margin-left:auto;font-size:14px;color:var(--sub);max-width:34ch}

/* ink story band: two beats, your side (editor sketch) then their side (demo) */
.cinema{background:var(--ink);color:#fff;padding-top:110px;padding-bottom:110px}
.beat{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.beat+.beat{margin-top:120px}
.beat.flip .beat-copy{order:2}
.beat.flip .demo-stage{order:1}
.beat-idx{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.beat h2{font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.1}
.beat h2 em{font-style:italic;font-weight:400;color:var(--coral)}
.beat p{color:var(--fog);font-size:16px;margin:18px 0 0;max-width:44ch}
.beat-stat{font:400 13px var(--mono);color:var(--coral);margin-top:22px;
  border-top:1px solid var(--line-d);padding-top:16px}

/* the editor card: same illustration language as the hero engine card.
   Label is just THE EDITOR; "sketched" read as process commentary
   (decided 2026-07-10). The aria-label keeps the sketch honesty. */
.studio{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;background:var(--card);
  border:1px solid var(--ink);border-radius:16px;padding:26px;position:relative;color:var(--ink)}
/* On ink, card labels are coral pills (the notch trick disappears against
   the band); on paper they stay border notches (hero engine card). */
.studio::before{content:"THE EDITOR";position:absolute;top:-11px;left:26px;background:var(--coral-ink);
  color:#fff;border-radius:999px;padding:5px 13px;font:500 11px var(--mono);letter-spacing:.12em}
.st-pane{min-width:0}
.st-h{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:12px}
.st-row{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--rule);
  border-radius:12px;padding:10px 14px;margin-bottom:10px;cursor:pointer;
  font-family:var(--body);transition:all .35s ease}
.st-a{display:block;font:500 14.5px var(--body);color:var(--ink)}
.st-rule{display:inline-block;margin-top:7px;font:500 11px var(--mono);letter-spacing:.04em;
  border:1px solid var(--rule);border-radius:999px;padding:3px 10px;color:var(--sub);
  transition:all .35s ease}
.st-row.on{border-color:var(--coral)}
.st-row.on .st-rule{border-color:var(--coral);background:#FEF1EF;color:var(--ink)}
.st-note{font:400 11.5px var(--mono);color:var(--sub);margin-top:2px}
.st-preview{border-left:1px solid var(--rule);padding-left:18px}
.st-card{border:1.5px solid var(--rule);border-radius:12px;padding:16px 14px;text-align:center;
  transition:border-color .35s ease}
.st-card img{width:88px;height:88px;object-fit:cover;border-radius:8px;background:#F2EDE4;
  display:block;margin:0 auto 10px;transition:opacity .3s ease}
.st-card.swap img{opacity:0}
.st-name{font-weight:600;font-size:13.5px}
.st-price{font:400 12px var(--mono);color:var(--sub);margin-top:2px}

/* the live demo widget: mirrors the storefront widget on a warm stage */
.demo-stage{background:#F2EDE4;border-radius:16px;padding:44px 32px;position:relative}
.demo-tag{position:absolute;top:-11px;left:26px;background:var(--coral-ink);color:#fff;
  font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px}
/* the one nudge (decided 2026-07-10, Codex option C): the first answer
   breathes coral twice in the widget's own hover vocabulary, a beat after
   the reveal. Previews a real affordance; no arrows, no tag motion. Re-runs
   after Replay because demoArea's display toggle restarts the animation,
   which is intended. */
.reveal.in #demoArea .opt:first-of-type{animation:opt-nudge 1.4s ease 1.1s 2}
@keyframes opt-nudge{0%,100%{border-color:var(--rule);box-shadow:none}
  38%{border-color:var(--coral);box-shadow:0 0 0 5px rgba(242,78,58,.16)}}
.widget{background:var(--card);border-radius:14px;box-shadow:0 18px 50px rgba(21,24,29,.16);
  padding:26px 24px 22px;max-width:400px;margin:0 auto;color:var(--ink)}
.progress{height:4px;background:#ECECEC;border-radius:2px;overflow:hidden;margin-bottom:16px}
.progress i{display:block;height:100%;width:0;background:var(--coral);border-radius:2px;transition:width .5s ease}
.step-label{text-align:center;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:8px}
.widget .q{text-align:center;font:600 19px var(--display);margin-bottom:16px}
.opt{display:block;width:100%;text-align:center;padding:13px;border:1.5px solid var(--rule);border-radius:10px;
  background:#fff;font:500 15px var(--body);margin-bottom:10px;cursor:pointer;transition:all .18s ease}
.opt:hover{border-color:var(--ink)}
.opt.picked{border-color:var(--coral);background:#FEF1EF}
.result{display:none;text-align:center}
.result img{width:150px;height:150px;object-fit:cover;border-radius:10px;margin:6px auto 12px;display:block;background:#F2EDE4}
.result .rname{font-weight:600;font-size:15.5px}
.result .rprice{font:400 13.5px var(--mono);color:var(--sub);margin:2px 0 14px}
.result .add{background:var(--ink);color:#fff;border:none;border-radius:8px;
  padding:11px 26px;font:600 14px var(--body);cursor:pointer;transition:background .15s}
.result .add:hover{background:#000}
.replay{display:none;margin:14px auto 0;background:none;border:none;color:var(--sub);
  font:500 13px var(--body);cursor:pointer;text-decoration:underline}

/* merchant payoff: the demo response rendered as a Responses dashboard row */
.trail{max-width:400px;max-height:0;margin:0 auto;overflow:hidden;opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease,max-height .4s ease,margin .4s ease}
.trail.in{max-height:100px;margin-top:16px;opacity:1;transform:none}
.trail-h{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sub);margin-bottom:8px}
.trail-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap;
  background:#fff;border:1px solid var(--rule);border-radius:10px;padding:10px 14px}
.trail-path{font:400 12.5px var(--mono);color:var(--ink)}
.trail-shown{font:500 12.5px var(--mono);color:var(--coral-ink)}

/* ruled columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr)}
.col{padding:28px 26px 34px;border-right:1px solid var(--rule)}
.col:last-child{border-right:none}
.col:first-child{padding-left:0}
.col h3{font:600 16.5px var(--body);margin:0 0 8px}
.col .m{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);display:block;margin-bottom:10px}
.col p{font-size:14.5px;color:var(--sub);margin:0}

/* pricing cards: A's clarity, C's type */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:28px;
  display:flex;flex-direction:column}
.plan.hot{border-color:var(--coral);box-shadow:0 12px 36px rgba(242,78,58,.10)}
.plan h3{margin:0;font:600 17px var(--body)}
.plan .for{font-size:13.5px;color:var(--sub);margin:4px 0 14px}
.plan .price{font:600 36px var(--display)}
.plan .price span{font:400 12.5px var(--mono);color:var(--sub);margin-left:4px}
.plan ul{list-style:none;margin:16px 0 0;padding:0;font-size:14px;color:#43464C}
.plan li{padding:4px 0}
.plan li::before{content:"— ";color:var(--coral)}
.plan-note{font:400 13px var(--mono);color:var(--sub);margin-top:16px}

/* faq */
.faq{max-width:780px;margin-top:20px}
details{border-bottom:1px solid var(--rule);padding:19px 0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--coral-ink);font-size:20px;flex:none}
details[open] summary::after{content:"–"}
details p{color:var(--sub);font-size:15px;margin:12px 0 0;max-width:64ch}

/* closing cta band */
.cta-band{background:var(--ink);border-radius:20px;color:#fff;text-align:center;padding:64px 32px}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,42px)}
.cta-band h2 em{font-style:italic;font-weight:400;color:var(--coral)}
.cta-band p{color:var(--fog);margin:14px auto 28px;max-width:46ch}

/* footer. Homepage closes on the W0 wordmark at display size (F2,
   decided 2026-07-10 from the 21st.dev round); doc pages keep the
   compact row with the small wordmark. */
footer{border-top:1px solid var(--ink);padding:64px 0 40px;font-size:14px;color:var(--sub)}
.bigname{font:600 112px/1 var(--display);letter-spacing:0;color:var(--ink);
  text-align:center;margin:0 0 56px}
.bigname em{font-style:italic;font-weight:400;color:var(--coral-ink)}
.foot{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .tag{margin-left:auto;font:500 12px var(--mono);letter-spacing:.06em}

/* legal / support pages */
.doc{max-width:760px;padding:72px 24px 96px;margin:0 auto}
.doc h1{font-size:clamp(34px,4vw,46px);margin-bottom:8px}
.doc .updated{font:400 13px var(--mono);color:var(--sub);margin-bottom:40px}
.doc h2{font-size:24px;margin:40px 0 12px}
.doc p,.doc li{color:#43464C;font-size:15.5px}
.doc ul{padding-left:22px}
.not-found{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.not-found p{max-width:54ch;margin:18px 0 28px}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px;gap:40px}
  .cols{grid-template-columns:1fr}
  .col{border-right:none;border-bottom:1px solid var(--rule);padding-left:0}
  .col:last-child{border-bottom:none}
  .plans{grid-template-columns:1fr}
  .nav-links,.nav-kicker{display:none}
  .rule-head .lead-in{margin-left:0}
  footer{padding-top:48px}
  .bigname{font-size:72px;margin-bottom:40px}
  .foot{flex-direction:column;align-items:flex-start;gap:12px}
  .foot .tag{margin-left:0}
  .cinema{padding-top:72px;padding-bottom:72px}
  .beat{grid-template-columns:1fr;gap:36px}
  .beat+.beat{margin-top:88px}
  .beat.flip .beat-copy{order:1}
  .beat.flip .demo-stage{order:2}
  .studio{grid-template-columns:1fr}
  .st-preview{border-left:none;border-top:1px solid var(--rule);padding-left:0;padding-top:18px}
}
@media (max-width:600px){
  .bigname{font-size:52px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .good,.chip,.badge,.opt,.progress i,.st-row,.st-rule,.st-card,.st-card img,.trail{transition:none}
  .reveal.in #demoArea .opt:first-of-type{animation:none}
}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px}