/* ============================================================
   Stock & Spoon — Site Design System
   ============================================================ */

:root{
  --navy-950:#0A0F1C;
  --navy-900:#111A2C;
  --navy-800:#1A2740;
  --navy-700:#233252;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);

  --green:#34C77B;
  --green-deep:#1C9A5C;
  --green-tint: rgba(52,199,123,0.14);

  --orange:#D65B27;
  --orange-deep:#B3441A;
  --orange-tint: rgba(214,91,39,0.16);

  --cream:#F5F1E9;
  --cream-2:#EDE6D6;

  --ink:#F3F1EC;
  --ink-dim:#C7CEDC;
  --muted:#8D97AC;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--ink);
  font-family:'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:#fff;
  line-height:1.08;
  margin:0;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow.green{ color:var(--green); }
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
section{ position:relative; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:14px 26px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--green); color:#062015; box-shadow:0 10px 24px -10px rgba(52,199,123,0.55); }
.btn-primary:hover{ background:#3FDA89; }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-outline-cream{ background:transparent; border-color:rgba(0,0,0,0.18); color:var(--navy-950); }
.btn-sm{ padding:10px 18px; font-size:13px; }

/* ---------------- NAV ---------------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,15,28,0.86);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:36px; height:36px; border-radius:9px; }
.brand span{ font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:#fff; }

.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{
  font-size:14px; font-weight:500; color:var(--ink-dim);
  padding:9px 16px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.nav-links a:hover{ color:#fff; background:var(--navy-800); }
.nav-links a.active{ color:#fff; background:var(--navy-800); }

.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; padding:6px; cursor:pointer; }
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; top:74px; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--navy-900);
    border-bottom:1px solid var(--line);
    padding:10px 20px 18px;
    gap:4px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ padding:13px 14px; }
  .nav-toggle{ display:block; }
  .nav-right .btn-ghost{ display:none; }
}

/* ---------------- FOOTER ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:64px 0 32px;
  margin-top:120px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}
.footer-grid h4{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:16px;}
.footer-grid .fbrand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-grid .fbrand img{ width:30px; height:30px; border-radius:7px; }
.footer-grid .fbrand span{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:#fff; }
.footer-grid p{ font-size:13.5px; color:var(--muted); line-height:1.6; max-width:320px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ font-size:13.5px; color:var(--ink-dim); }
.footer-grid ul a:hover{ color:var(--green); }
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--muted);
  flex-wrap:wrap; gap:10px;
}

@media (max-width:800px){
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
}

/* ---------------- HERO ---------------- */
.hero{
  padding:76px 0 40px;
  background:
    radial-gradient(ellipse 900px 520px at 78% 10%, rgba(52,199,123,0.13), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 90%, rgba(214,91,39,0.10), transparent 60%);
  overflow:hidden;
}
.hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
.hero h1{ font-size:52px; letter-spacing:-0.01em; margin-top:20px; }
.hero h1 em{ font-style:italic; color:var(--green); font-weight:500; }
.hero .sub{ font-size:17px; line-height:1.6; color:var(--ink-dim); max-width:480px; margin-top:20px; }
.hero .cta-row{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero .microtrust{ margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; }
.hero .microtrust span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.04em; display:flex; align-items:center; gap:7px;}
.hero .microtrust span::before{ content:"✓"; color:var(--green); font-weight:700; }

.phone-frame{
  position:relative;
  margin:0 auto;
  width:290px;
  border-radius:36px;
  padding:12px;
  background:linear-gradient(160deg, #26324C, #131C30);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06);
}
.phone-frame .screen{ border-radius:26px; overflow:hidden; background:#0d1424; }
.phone-frame .screen img{ width:100%; display:block; }
.phone-frame .notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:90px; height:22px; background:#131C30; border-radius:0 0 14px 14px; z-index:2;
}

/* ---------------- HOW IT WORKS ---------------- */
.flowbar{ padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.flowbar .steps{ display:flex; align-items:stretch; gap:0; }
.flowbar .step{ flex:1; padding:0 22px; position:relative; }
.flowbar .step:not(:last-child)::after{
  content:"→"; position:absolute; right:-4px; top:8px; color:var(--muted); font-size:18px;
}
.flowbar .step .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--orange); font-weight:600; letter-spacing:.08em;}
.flowbar .step h3{ font-size:18px; margin-top:8px; color:#fff; }
.flowbar .step p{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5; }

@media (max-width:900px){
  .flowbar .steps{ flex-direction:column; gap:26px; }
  .flowbar .step:not(:last-child)::after{ content:"↓"; right:auto; left:0; top:auto; bottom:-20px; }
}

/* ---------------- RECEIPT (signature element) ---------------- */
.receipt-section{ padding:100px 0 40px; }
.receipt-section .head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.receipt-section .head h2{ font-size:38px; }
.receipt-section .head p{ color:var(--ink-dim); font-size:15.5px; margin-top:14px; line-height:1.6; }

.receipt{
  max-width:560px; margin:0 auto;
  background:var(--cream);
  color:var(--navy-950);
  border-radius:4px;
  padding:8px 0 0;
  box-shadow:0 50px 90px -40px rgba(0,0,0,0.6);
  position:relative;
}
.receipt::before, .receipt::after{
  content:"";
  position:absolute; left:0; right:0; height:14px;
  background:
    linear-gradient(135deg, var(--cream) 25%, transparent 25.5%) 0 0,
    linear-gradient(-135deg, var(--cream) 25%, transparent 25.5%) 0 0;
  background-size:14px 14px; background-repeat:repeat-x;
}
.receipt::before{ top:-13px; }
.receipt::after{ bottom:-13px; transform:rotate(180deg); }

.receipt .rhead{ text-align:center; padding:22px 30px 16px; border-bottom:1px dashed rgba(10,15,28,0.25); }
.receipt .rhead .rname{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; }
.receipt .rhead .rsub{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#6E655B; margin-top:4px;}

.ritem{ padding:18px 30px; border-bottom:1px dashed rgba(10,15,28,0.18); display:flex; justify-content:space-between; gap:16px; }
.ritem:last-of-type{ border-bottom:1px dashed rgba(10,15,28,0.25); }
.ritem .rleft{ flex:1; }
.ritem .rleft .rt{ font-weight:600; font-size:14.5px; }
.ritem .rleft .rd{ font-size:12.3px; color:#6E655B; margin-top:4px; line-height:1.5; }
.ritem .rprice{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--green-deep); font-weight:600; white-space:nowrap; padding-top:2px;}

.receipt .rfoot{ padding:20px 30px 30px; text-align:center; }
.receipt .rfoot .rtotal{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed rgba(10,15,28,0.25);}
.receipt .rfoot p{ font-size:11.5px; color:#8A8074; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; }

/* ---------------- TRUST / STATUS BAND ---------------- */
.trust-band{ padding:90px 0; }
.trust-band .head{ max-width:600px; margin-bottom:44px; }
.trust-band .head h2{ font-size:34px; }
.trust-band .head p{ color:var(--ink-dim); font-size:15px; margin-top:14px; line-height:1.6; }

.status-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.status-card{ background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px 24px; }
.status-card .dot-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.status-card .dot{ width:8px; height:8px; border-radius:50%; }
.status-card .dot.live{ background:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.status-card .dot.build{ background:var(--orange); box-shadow:0 0 0 4px var(--orange-tint); }
.status-card .dot.plan{ background:var(--muted); box-shadow:0 0 0 4px rgba(141,151,172,0.14); }
.status-card .stlabel{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.status-card h3{ font-size:17px; margin-top:12px; color:#fff; }
.status-card p{ font-size:12.8px; color:var(--muted); margin-top:8px; line-height:1.55; }

@media (max-width:900px){ .status-grid{ grid-template-columns:1fr; } }

/* ---------------- RESPONSIVE — broad pass ---------------- */
@media (max-width:900px){
  .hero{ padding:44px 0 20px; }
  .hero .wrap{ grid-template-columns:1fr; gap:44px; }
  .hero h1{ font-size:38px; }
  .hero .hero-art{ order:-1; }
  .phone-frame{ width:230px; }

  .receipt-section{ padding:70px 0 20px; }
  .receipt-section .head h2{ font-size:28px; }

  .trust-band{ padding:60px 0; }
  .trust-band .head h2{ font-size:26px; }

  .final-cta .box{ padding:44px 26px; }
  .final-cta h2{ font-size:26px; }

  .page-header{ padding:50px 0 10px; }
  .page-header h1{ font-size:30px; }

  .wrap{ padding:0 22px; }
}

@media (max-width:520px){
  .hero h1{ font-size:32px; }
  .receipt .rhead, .ritem, .receipt .rfoot{ padding-left:20px; padding-right:20px; }
}

/* ---------------- SCREENSHOT STRIP ---------------- */
.strip-section{ padding:20px 0 100px; }
.strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.strip-card{ background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius-l); padding:22px 22px 0; overflow:hidden; }
.strip-card .stxt{ padding-bottom:18px; }
.strip-card .stxt .k{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--orange); letter-spacing:.1em; text-transform:uppercase; font-weight:600;}
.strip-card .stxt h3{ font-size:16.5px; margin-top:8px; color:#fff; }
.strip-card .simg{ border-radius:var(--radius-m) var(--radius-m) 0 0; overflow:hidden; margin-top:14px; }
.strip-card .simg img{ width:100%; display:block; }
.strip-more{ text-align:center; margin-top:44px; }

@media (max-width:900px){ .strip-grid{ grid-template-columns:1fr; } }

/* ---------------- FINAL CTA ---------------- */
.final-cta{ padding:30px 0 110px; }
.final-cta .box{
  background:linear-gradient(135deg, var(--navy-800), var(--navy-900));
  border:1px solid var(--line);
  border-radius:28px;
  padding:64px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta .box::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 500px 300px at 50% 0%, rgba(52,199,123,0.16), transparent 70%);
}
.final-cta h2{ font-size:36px; max-width:560px; margin:0 auto; position:relative; }
.final-cta p{ color:var(--ink-dim); font-size:15px; margin:16px auto 0; max-width:440px; position:relative; }
.final-cta .cta-row{ display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; position:relative; }

/* ---------------- generic page header (inner pages) ---------------- */
.page-header{ padding:70px 0 20px; text-align:center; }
.page-header .eyebrow{ justify-content:center; }
.page-header h1{ font-size:44px; margin-top:18px; }
.page-header p{ color:var(--ink-dim); font-size:15.5px; max-width:560px; margin:16px auto 0; line-height:1.6; }

/* ---------------- FEATURE DEEP DIVE (features.html) ---------------- */
.deepdive{ padding:70px 0; border-top:1px solid var(--line); }
.deepdive:first-of-type{ border-top:none; }
.deepdive .grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.deepdive.reverse .grid{ direction:rtl; }
.deepdive.reverse .grid > *{ direction:ltr; }
.deepdive .txt .eyebrow{ margin-bottom:16px; }
.deepdive h2{ font-size:30px; }
.deepdive .txt p.desc{ color:var(--ink-dim); font-size:15px; line-height:1.65; margin-top:16px; max-width:460px; }
.deepdive .points{ margin-top:22px; }
.deepdive .points li{ display:flex; gap:10px; font-size:13.8px; color:var(--ink-dim); padding:9px 0; border-bottom:1px solid var(--line); max-width:460px; }
.deepdive .points li:last-child{ border:none; }
.deepdive .points li .chk{ color:var(--green); font-weight:700; flex-shrink:0; }
.deepdive .imgwrap{ display:flex; justify-content:center; }
.deepdive .imgwrap .phone-frame{ width:250px; }

@media (max-width:860px){
  .deepdive .grid{ grid-template-columns:1fr; gap:36px; }
  .deepdive.reverse .grid{ direction:ltr; }
  .deepdive .imgwrap{ order:-1; }
}

/* ---------------- ABOUT PAGE ---------------- */
.story{ padding:20px 0 90px; }
.story .grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.story .lead{ font-size:19px; line-height:1.6; color:#fff; font-family:'Fraunces',serif; font-weight:500; }
.story .body p{ font-size:15px; line-height:1.75; color:var(--ink-dim); margin-bottom:18px; }
.story .signoff{ margin-top:26px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted); }
.story .signoff b{ color:#fff; }

.timeline{ margin-top:0; }
.trow{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.trow:first-child{ padding-top:0; }
.trow .tstate{ width:96px; flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding-top:2px;}
.trow .tstate.live{ color:var(--green); }
.trow .tstate.build{ color:var(--orange); }
.trow .tstate.plan{ color:var(--muted); }
.trow h3{ font-size:16.5px; color:#fff; }
.trow p{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.55; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:80px; }
.value-card{ padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--navy-900); }
.value-card h3{ font-size:16px; }
.value-card p{ font-size:12.8px; color:var(--muted); margin-top:10px; line-height:1.55; }

@media (max-width:900px){
  .story .grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   LEGAL / CONTACT PAGES
   Shared by privacy.html, terms.html, contact.html so the
   long-form pages inherit the same type scale and rhythm as
   the marketing pages instead of carrying their own theme.
   ============================================================ */
.page-head{
  padding:70px 0 34px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 320px at 15% -40%, rgba(52,199,123,0.10), transparent 70%),
    var(--navy-950);
}
.page-head h1{ font-size:clamp(34px,5.2vw,52px); margin-top:14px; }
.page-head .sub{
  color:var(--ink-dim);
  font-size:17px;
  line-height:1.65;
  max-width:640px;
  margin:16px 0 0;
}
.page-head .stamp{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:18px;
}

.legal{ padding:56px 0 90px; }
.legal .wrap{ max-width:840px; }
.legal-card{
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:48px 52px;
}
.legal-card h2{
  font-size:25px;
  margin:44px 0 14px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.legal-card h2:first-of-type{ margin-top:6px; padding-top:0; border-top:0; }
.legal-card h3{
  font-size:18px;
  margin:26px 0 10px;
  color:var(--green);
}
.legal-card p{
  color:var(--ink-dim);
  font-size:15.5px;
  line-height:1.75;
  margin:0 0 15px;
}
.legal-card ul{
  margin:0 0 18px;
  padding-left:2px;
}
.legal-card li{
  position:relative;
  color:var(--ink-dim);
  font-size:15.5px;
  line-height:1.7;
  padding-left:24px;
  margin-bottom:9px;
}
.legal-card li::before{
  content:"";
  position:absolute;
  left:4px; top:10px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
  opacity:.75;
}
.legal-card a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.legal-card a:hover{ color:#3FDA89; }
.legal-card strong{ color:var(--ink); font-weight:600; }
.legal-card .last-updated{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:26px;
}

/* -------- Contact -------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-bottom:44px;
}
.contact-card{
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:28px 26px;
  transition:border-color .15s ease, transform .15s ease;
}
.contact-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.contact-card .cicon{ font-size:26px; margin-bottom:14px; }
.contact-card h3{ font-size:19px; margin-bottom:9px; }
.contact-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; margin:0 0 16px; }
.contact-card .contact-link{
  color:var(--green);
  font-weight:600;
  font-size:14.5px;
  word-break:break-word;
}
.contact-card .contact-link:hover{ text-decoration:underline; }

.form-card{
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:44px 46px;
}
.form-card > h2{ font-size:27px; text-align:center; margin-bottom:8px; }
.form-card > .fsub{
  text-align:center;
  color:var(--ink-dim);
  font-size:15px;
  margin:0 0 32px;
}
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-dim);
}
.field input,
.field textarea{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  padding:13px 15px;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  transition:border-color .15s ease, background .15s ease;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(255,255,255,0.05);
}
.form-card button[type="submit"]{ width:100%; margin-top:6px; }
.form-note{
  display:none;
  text-align:center;
  font-weight:600;
  font-size:14.5px;
  padding:15px;
  border-radius:var(--radius-s);
  margin-top:20px;
  color:var(--green);
  background:var(--green-tint);
  border:1px solid rgba(52,199,123,0.3);
}

@media (max-width:720px){
  .legal-card{ padding:32px 24px; }
  .form-card{ padding:30px 22px; }
  .legal-card h2{ font-size:22px; }
  .page-head{ padding:52px 0 28px; }
}