/* lp-base.css — shared ground for the five landing-page concepts.
   Same tokens, same copy, same components. Only the MOTION concept differs
   per page, and that lives in each page's own <style> + <script>. */

@font-face{font-family:'Mona Sans';font-weight:400;src:url(assets/MonaSans-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Mona Sans';font-weight:500;src:url(assets/MonaSans-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Mona Sans';font-weight:700;src:url(assets/MonaSans-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Mona Sans';font-weight:800;src:url(assets/MonaSans-800.woff2) format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-weight:400;src:url(assets/IBMPlexMono-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-weight:500;src:url(assets/IBMPlexMono-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Caveat';font-weight:500;src:url(assets/Caveat-500.woff2) format('woff2');font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#040e11; --surface:#0a1a1f; --surface2:#0f242a;
  --line:rgba(224,242,248,.14); --lineSoft:rgba(224,242,248,.07);
  --text:#e4f1f4; --text2:#a2bac0; --text3:#6a8085; --textq:#8da3a9;
  --teal:#2dd4bf; --tealDim:#86e7d9; --tealDeep:#0c5e57;
  --ctaA:#22c4b0; --ctaB:#5fe7d6; --ctaInk:#03211f;
  --hand:#adc3c9;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:'Mona Sans',sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* ── film grain, every concept ─────────────────────────────── */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── showroom bar ──────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;align-items:center;gap:16px;
  padding:10px 20px;background:rgba(4,14,17,.86);backdrop-filter:blur(9px);border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.bar b{color:var(--teal);font-weight:500}
.bar span{color:var(--text3)}
.bar a{margin-left:auto;color:var(--textq);text-decoration:none;border:1px solid var(--line);
  padding:6px 12px;border-radius:4px}
.bar a:hover{color:var(--text);border-color:var(--teal)}
body{padding-top:38px}

/* ── type ──────────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--tealDim);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--tealDeep);flex:none}
h1,h2{font-weight:800;letter-spacing:-.014em;text-transform:uppercase;line-height:1.05}
h1{font-size:clamp(38px,5.4vw,68px)}
h2{font-size:clamp(28px,3.2vw,42px)}
.deck{color:var(--text2);font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:640px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.hand{font-family:'Caveat',cursive;font-size:23px;color:var(--hand);line-height:1.2}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{position:relative}

/* ── CTA ───────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;gap:11px;padding:16px 28px;border-radius:6px;border:0;
  background:linear-gradient(100deg,var(--ctaA),var(--ctaB));color:var(--ctaInk);
  font-family:'Mona Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-90px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:sheen 4.2s var(--ease) infinite}
@keyframes sheen{0%,62%{left:-90px}92%,100%{left:118%}}
.cta2{display:inline-flex;align-items:center;gap:9px;padding:16px 6px;color:var(--text2);
  font-size:16px;text-decoration:none}
.cta2:hover{color:var(--text)}
.micro{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--textq)}

/* ── the circled YES ───────────────────────────────────────── */
.yes{position:relative;display:inline-block;white-space:nowrap}
.yes svg{position:absolute;left:-11%;top:-26%;width:122%;height:152%;overflow:visible;pointer-events:none}
.yes path{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:640;animation:draw .8s var(--ease) .95s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── trust strip ───────────────────────────────────────────── */
.trust{padding:46px 0 8px;text-align:center}
.trust .lbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text3);margin-bottom:22px}
.brands{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(20px,3.4vw,46px)}
.brands b{font-weight:700;font-size:17px;color:#8ea6ac;opacity:.72;letter-spacing:-.01em}
.claims{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,40px);
  margin-top:30px;padding-top:24px;border-top:1px solid var(--lineSoft)}
.claims i{font-style:normal;display:inline-flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--textq)}
.claims i::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--tealDeep);
  background:radial-gradient(circle,var(--teal) 0 3px,transparent 3px)}

/* ── ledger (the promise) ──────────────────────────────────── */
.ledger{margin-top:30px;border-top:1px solid var(--lineSoft);max-width:660px}
.ledger div{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--lineSoft)}
.ledger em{font-style:normal;flex:1;font-size:17px;color:var(--text)}
.ledger s{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tealDim)}

/* ── steps ─────────────────────────────────────────────────── */
.step{display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.16em;color:var(--tealDim);padding-top:6px}
.step h3{font-size:clamp(21px,2vw,27px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:9px}
.step p{color:var(--text2);font-size:16.5px;line-height:1.6;max-width:520px}

/* ── cards / media ─────────────────────────────────────────── */
.card{border-radius:10px;overflow:hidden;border:1px solid var(--lineSoft);background:var(--surface);position:relative}
/* height:auto, not 100%: these <img> may carry width/height attributes, which
   become a definite height and make aspect-ratio inert. */
.card img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.chip{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:4px;background:rgba(4,14,17,.76);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#dfeef1;
  display:inline-flex;align-items:center;gap:6px}
.chip.ok{background:rgba(45,212,191,.16);color:#bff6ec}
.meta{position:absolute;left:12px;bottom:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#c6dade;background:rgba(4,14,17,.7);padding:5px 9px;border-radius:4px}

/* ── quotes ────────────────────────────────────────────────── */
.q{padding:22px 24px;border:1px solid var(--lineSoft);border-radius:14px;background:var(--surface);position:relative}
.q::after{content:"";position:absolute;left:30px;bottom:-9px;width:16px;height:16px;background:var(--surface);
  border-right:1px solid var(--lineSoft);border-bottom:1px solid var(--lineSoft);transform:rotate(45deg)}
.q .st{color:var(--teal);letter-spacing:2px;font-size:12px}
.q .sg{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-left:9px}
.q p{margin-top:11px;color:var(--text2);font-size:15px;line-height:1.6}
.who{display:flex;align-items:center;gap:11px;margin:22px 0 0 8px}
.av{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--textq)}
.who b{display:block;font-size:13.5px}
.who span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--textq)}
/* `.who span` is (0,1,1) and `.av` is only (0,1,0), so the block display above
   was quietly beating the avatar's own display:flex — which is what threw the
   initials into the top-left corner instead of the middle of the circle. */
.who .av{display:flex;align-items:center;justify-content:center;flex:none}

/* ── pricing teaser ────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:34px}
.tier{padding:24px 22px;border:1px solid var(--lineSoft);border-radius:10px;background:rgba(10,26,31,.55)}
.tier .nm{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.tier .pr{margin-top:12px;font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--teal)}
.tier .pr small{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace;color:var(--textq);margin-top:7px}
.tier .then{margin-top:9px;font-size:13px;color:var(--text3)}
.tier.rec{border-color:rgba(45,212,191,.32);background:rgba(15,36,42,.7)}
.tier .rl{display:block;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tealDim)}

/* ── objections + chips ────────────────────────────────────── */
.obj{border-top:1px solid var(--lineSoft);padding-top:18px;margin-top:16px}
.obj h4{font-size:15.5px;font-weight:700;margin-bottom:7px}
.obj p{color:var(--text2);font-size:15px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips b{font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--textq);border:1px solid var(--lineSoft);border-radius:999px;padding:7px 14px}

/* ── reveal, INVERTED GATE ─────────────────────────────────────
 * Nothing hides until JS has proved it can un-hide it. The naive form
 *     [data-r]{opacity:0}  +  [data-r].in{opacity:1}
 * ships the entire page below the hero INVISIBLE the moment the observer never
 * fires — a zero-height viewport, a JS error earlier in the file, an old
 * browser, JS off. That exact failure already shipped once on the real site.
 * Here the hidden state is scoped to [data-reveal-armed], which only JS sets,
 * so the worst case is "no animation", never "no page". */
[data-r]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal-armed] [data-r]:not(.in){opacity:0;transform:translate3d(0,20px,0)}
@media(prefers-reduced-motion:reduce){
  [data-r]{opacity:1;transform:none;transition:none}
  .cta::after,.yes path{animation:none}
  .yes path{stroke-dashoffset:0}
}

/* ══ PAGE TRANSITION — Push ═══════════════════════════════════════
   A real cross-document view transition between / and /pricing. The browser
   snapshots both documents and animates between them, so there is no white
   flash and no framework involved. Both documents must carry this at-rule.

   `html.back` is set in <head> before first paint (see the boot script) when
   the navigation is heading to an earlier page, so returning slides the other
   way instead of repeating the forward move.

   NOTE: no blanket animation reset. If anything fails to resolve in time the
   fallback is the browser's own cross-fade — degraded, never a hard cut. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}

::view-transition-old(root){animation:gsPushOutL .55s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:gsPushInR .55s cubic-bezier(.22,1,.36,1) both;z-index:2}
html.back::view-transition-old(root){animation:gsPushOutR .55s cubic-bezier(.22,1,.36,1) both;z-index:2}
html.back::view-transition-new(root){animation:gsPushInL .55s cubic-bezier(.22,1,.36,1) both;z-index:1}
@keyframes gsPushOutL{from{transform:none;opacity:1}to{transform:translateX(-25%);opacity:.3}}
@keyframes gsPushInR{from{transform:translateX(100%)}to{transform:none}}
@keyframes gsPushOutR{from{transform:none}to{transform:translateX(100%)}}
@keyframes gsPushInL{from{transform:translateX(-25%);opacity:.3}to{transform:none;opacity:1}}

@media(prefers-reduced-motion:reduce){
  /* page-level motion is the category that can genuinely make people ill */
  @view-transition{navigation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE FOOTER (added 2026-08-09)
   ══════════════════════════════════════════════════════════════════════════
   The landing and pricing pages shipped without one. Beyond looking unfinished,
   it meant the page that takes payment offered no route to the Terms or the
   Privacy Policy.

   Kept visually identical to CraftChrome.module.css, which renders the same
   footer on the React side (/faq, /terms, /privacy). The two cannot share code
   — these pages carry no React at all — so they are matched by hand and the
   publish gate checks the three legal links are present on both.
   ══════════════════════════════════════════════════════════════════════════ */

.sfoot{
  border-top:1px solid rgba(224,242,248,.07);
  margin-top:clamp(56px,9vh,110px);
  padding:44px clamp(18px,4vw,44px) 52px;
}
.sfinner{
  max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;gap:clamp(28px,5vw,56px);
}
.sfbrand{display:flex;flex-direction:column;gap:14px;max-width:34ch}

/* The wordmark is the footer's anchor, set the way the H1 is set: Mona Sans
   800, ALL-CAPS, tight tracking, optically flush left. A 15px logo lockup read
   as a generic SaaS footer bolted onto a page that shouts. */
.sfword{
  font-family:'Mona Sans',sans-serif;font-weight:800;
  font-size:clamp(30px,4.4vw,46px);line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;color:#e4f1f4;text-decoration:none;
  margin-left:-.02em;display:block;
}
.sfword b{color:#2dd4bf;font-weight:800}
.sfbrand p{
  font-size:13px;line-height:1.55;color:#8da3a9;margin:0;
}
/* retained for the base row, not the brand block */
.sfmark{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:#e4f1f4;font-weight:600;font-size:15px;letter-spacing:-.01em;
}
.sfmark span{
  width:22px;height:22px;display:grid;place-items:center;
  border:1px solid #2dd4bf;color:#2dd4bf;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;line-height:1;
}
.sfcols{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,72px)}
.sfcol{display:flex;flex-direction:column;gap:11px}
.sflabel{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8da3a9;margin-bottom:2px;
}
.sfcol a{
  font-size:13.5px;color:#a8bfc5;text-decoration:none;transition:color .15s ease;
}
.sfcol a:hover{color:#2dd4bf}
.sfbase{
  max-width:1120px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid rgba(224,242,248,.07);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8da3a9;
}
.sfbase a{color:inherit;text-decoration:none}
.sfbase a:hover{color:#2dd4bf}

/* The sticky pricing pill floats above the page; without clearance it lands
   on top of the footer's last row at the bottom of the scroll. */
.scPill ~ .sfoot,
.sfoot:last-of-type{padding-bottom:clamp(72px,10vh,120px)}