/* ============================================================
   Fox & Otter Data — shared stylesheet for the Tier 0 funnel pages.

   Every token here is lifted verbatim from src/index.html so the free
   pages and the main site are the same brand. Do not invent colours,
   sizes or radii. If you need something that is not here, add it here
   once rather than writing page-local CSS.

   Component reference lives in src/assets/COMPONENTS.md.
   ============================================================ */

:root{
  --ink:#16212F;
  --navy:#22364F;
  --heading:var(--navy);
  --slate:#5C6B7A;
  --sage:#D9A579;
  --sage-deep:#C1592D;
  --sage-deep-dark:#9C4720;
  --paper:#F2F4F1;
  --paper-alt:#E8ECE6;
  --line:#C9D2CA;
  --cream:#FBFBF9;
  --header-bg: rgba(242,244,241,.88);
  --danger:#B3261E;
  color-scheme: light;

  --display: 'Bitter', 'Roboto Slab', Georgia, serif;
  --body: 'Lora', Georgia, 'Times New Roman', serif;
  --mono: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

html[data-theme="dark"]{
  --ink:#E7EAE6;
  --heading:#EDEFEA;
  --slate:#95A3AE;
  --sage:#E3B084;
  --sage-deep:#E07A43;
  --sage-deep-dark:#F0925C;
  --paper:#141A21;
  --paper-alt:#1B232B;
  --line:#2A333D;
  --header-bg: rgba(20,26,33,.88);
  --danger:#F08A80;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition: background-color .25s ease, color .25s ease;
}
h1,h2,h3{ font-family:var(--display); margin:0; color:var(--heading); font-weight:600; }
h1 em, h2 em, .logo em{ font-style:normal; color:var(--sage-deep); }
a{ color:inherit; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }
.wrap.narrow{ max-width:820px; }
section{ position:relative; padding:120px 0; }
section.tight{ padding:80px 0; }
@media (max-width:720px){
  section{ padding:80px 0; }
  section.tight{ padding:56px 0; }
  .wrap{ padding:0 22px; }
}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sage-deep);
  display:flex; align-items:center; gap:.6em; margin:0 0 1.1em;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--sage-deep); display:inline-block;
  flex:none;
}

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:var(--header-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition: background-color .25s ease, border-color .25s ease;
}
.nav{
  max-width:1080px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
@media (max-width:720px){ .nav{ padding:16px 22px; } }
.logo{
  font-family:var(--display); font-weight:600; font-size:20px; color:var(--heading);
  letter-spacing:-.01em; text-decoration:none;
  display:inline-flex; align-items:baseline; gap:8px;
}
/* Small "for Shopify" mono tag next to the "Upstream" wordmark -- shared by
   the header logo and the footer logo so the two brand lockups match. */
.logo-tag{
  font-family:var(--mono); font-weight:600; font-size:10px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--sage-deep);
}
.navlinks{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end; row-gap:10px; }
/* Font + color matched empirically against the live React <Navbar> (see
   src/components/truemargin/Navbar.jsx): its nav links carry no font-family
   utility class of their own, so they inherit body's `font-body` (Lora) —
   not var(--mono) — and render at the page's main --ink text color, not a
   dimmed secondary tone. Confirmed via getComputedStyle() on the deployed
   component: font-family "Lora, Georgia, serif", color matching --ink
   exactly in both themes. */
.navlinks a{
  font-family:var(--body); font-size:13px; font-weight:500; text-decoration:none;
  color:var(--ink); letter-spacing:.02em; position:relative; padding-bottom:3px;
}
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--sage-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.navlinks a:hover::after{ transform:scaleX(1); }
.navlinks a:hover{ color:var(--sage-deep); }
@media (max-width:600px){ .navlinks a.hide-sm{ display:none; } }

/* Size matched to the React <ThemeToggle> (h-9 w-9 = 36px); see fo.js for
   the icon itself (swapped from a text glyph to an inline SVG so it reads
   as a real icon like the React version's lucide-react Sun/Moon, not a
   font-rendered character). */
.theme-toggle{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  color:var(--heading); line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; flex:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle svg{ width:16px; height:16px; display:block; }
.theme-toggle:hover{ border-color:var(--sage-deep); color:var(--sage-deep); transform:translateY(-1px); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; padding:10px 18px; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--heading); color:var(--heading); background:transparent;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.solid{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--cream); }
.btn.solid:hover{ background:var(--sage-deep-dark); border-color:var(--sage-deep-dark); }
.btn.on-dark{ border-color:var(--cream); color:var(--cream); }
.btn.on-dark:hover{ background:var(--cream); color:var(--sage-deep-dark); }

/* ---------- quick CTA (right after the calculator result, so signup
   doesn't require scrolling past other-tools/limits/faq to reach it --
   the full CTA band at the bottom of the page still exists too, this is
   just a second, earlier chance to convert right when the result lands) */
.quick-cta{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.quick-cta-note{ font-size:13.5px; color:var(--slate); }

/* ---------- hero ---------- */
.hero{ padding-top:96px; padding-bottom:84px; }
.hero .wrap{ max-width:820px; }
.hero h1{
  font-size:clamp(36px, 5.2vw, 62px);
  line-height:1.06; letter-spacing:-.01em; margin-bottom:26px;
}
.hero p.lede{ font-size:19px; color:var(--slate); max-width:600px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---------- generic type helpers ---------- */
h2{ font-size:clamp(28px,3.4vw,40px); letter-spacing:-.01em; max-width:640px; margin-bottom:20px; }
h3{ font-size:19px; margin-bottom:10px; }
.intro{ max-width:600px; color:var(--slate); font-size:17px; margin-bottom:48px; }
.measure{ max-width:560px; }
.muted{ color:var(--slate); }
.small{ font-size:14.5px; }
.label{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--sage-deep);
  letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- banded section ---------- */
.band{
  background:var(--paper-alt);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  transition: background-color .25s ease, border-color .25s ease;
}
.band-navy{ background:var(--navy); color:var(--cream); }
.band-navy h2, .band-navy h3{ color:var(--cream); }
.band-navy .muted{ color:#B9C4D1; }
.band-navy .eyebrow{ color:var(--sage); }
.band-navy .eyebrow::before{ background:var(--sage); }

/* ---------- hairline tile grid ----------
   The site draws dividers with a 1px grid gap over a --line background.
   Never add per-cell borders. */
.tiles{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:10px;
}
.tiles.c2{ grid-template-columns:repeat(2,1fr); }
.tiles.c3{ grid-template-columns:repeat(3,1fr); }
.tiles.c4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .tiles.c4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .tiles.c2,.tiles.c3{ grid-template-columns:1fr; } .tiles.c4{ grid-template-columns:1fr; } }
.tile{
  background:var(--paper-alt); padding:28px 22px;
  display:flex; flex-direction:column; gap:10px;
}
section:not(.band) .tile{ background:var(--paper); }
.tile p{ font-size:14.5px; color:var(--slate); margin:0; }
.tile h3{ font-size:19px; margin:0; }

/* ---------- navy result strip ---------- */
.result-strip{
  margin-top:1px; background:var(--navy); color:var(--cream);
  padding:26px 30px; font-family:var(--mono); font-size:14px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); border-top:none;
}
.result-strip .arrow{ color:var(--sage); }

/* ---------- numbered steps ---------- */
.steps{ display:flex; flex-direction:column; margin-top:10px; }
.step{
  display:grid; grid-template-columns:100px 1fr; gap:28px;
  padding:34px 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .num{ font-family:var(--mono); font-size:13px; color:var(--sage-deep); padding-top:4px; }
.step h3{ font-size:22px; margin-bottom:8px; }
.step p{ color:var(--slate); margin:0; max-width:560px; }
@media (max-width:600px){ .step{ grid-template-columns:1fr; gap:8px; } }

/* ---------- rule list (numbered reasons, mistakes, etc) ---------- */
.rulelist{ list-style:none; margin:10px 0 0; padding:0; }
.rulelist li{
  padding:26px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:52px 1fr; gap:22px;
}
.rulelist li:last-child{ border-bottom:1px solid var(--line); }
.rulelist .n{ font-family:var(--mono); font-size:13px; color:var(--sage-deep); padding-top:5px; }
.rulelist h3{ font-size:20px; margin-bottom:6px; }
.rulelist p{ color:var(--slate); margin:0; max-width:600px; }
@media (max-width:600px){ .rulelist li{ grid-template-columns:1fr; gap:6px; } }

/* ---------- the deprivation note ----------
   Every Tier 0 page states plainly what the free thing does NOT answer.
   That honesty is the product. Use .notsolved exactly once per page. */
.notsolved{
  border:1px solid var(--line); border-left:3px solid var(--sage-deep);
  padding:26px 28px; max-width:640px; margin-top:10px;
  background:var(--paper);
}
.band .notsolved{ background:var(--paper-alt); }
.notsolved .label{ display:block; margin-bottom:10px; }
.notsolved p{ margin:0; color:var(--slate); }
.notsolved p + p{ margin-top:.9em; }

/* ---------- plain data table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:15.5px; margin-top:10px; }
.tbl th, .tbl td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate); border-bottom:1px solid var(--line);
}
.tbl td.num{ font-family:var(--mono); white-space:nowrap; }
.tbl-scroll{ overflow-x:auto; }

/* ---------- code / query blocks ---------- */
pre.code{
  background:var(--navy); color:var(--cream); padding:22px 24px; overflow-x:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px; line-height:1.55; margin:0; border-radius:2px;
}
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92em; }

/* ---------- calculator panel ---------- */
.calcgrid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:10px; }
@media (max-width:860px){ .calcgrid{ grid-template-columns:1fr; } }
.panel{
  border:1px solid var(--line); background:var(--paper); padding:30px 28px;
}
.band .panel{ background:var(--paper-alt); }
.panel h3{ font-size:20px; margin-bottom:18px; }
.readout{ border:1px solid var(--line); background:var(--navy); color:var(--cream); padding:30px 28px; }
.readout h3{ color:var(--cream); font-size:20px; margin-bottom:18px; }
.bignum{
  font-family:var(--display); font-size:clamp(38px,6vw,56px); line-height:1;
  color:var(--cream); letter-spacing:-.02em;
}
.readout .sub{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); }
.statrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); margin-top:24px; }
.statrow .cell{ background:var(--navy); padding:18px 16px; }
.statrow .cell .v{ font-family:var(--display); font-size:24px; color:var(--cream); }
.statrow .cell .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); margin-bottom:6px; }
.bar{ height:10px; background:rgba(255,255,255,.16); margin-top:8px; }
.bar > span{ display:block; height:100%; background:var(--sage-deep); }
.bar.alt > span{ background:var(--sage); }

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field:last-of-type{ margin-bottom:0; }
.field label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.field .hint{ font-family:var(--body); font-size:13px; text-transform:none; letter-spacing:0; color:var(--slate); margin-top:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; font-family:var(--body); font-size:15.5px;
  border:1px solid var(--line); border-radius:2px; background:var(--paper);
  color:var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.field select{ appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.15em + 2px), calc(100% - 15px) calc(1.15em + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--sage-deep); outline-offset:1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .row2{ grid-template-columns:1fr; } }
.submit-btn{
  width:100%; padding:14px; margin-top:22px; border:none; border-radius:2px;
  background:var(--sage-deep); color:var(--cream);
  font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.03em;
  cursor:pointer; transition:background .2s ease;
}
.submit-btn:hover{ background:var(--sage-deep-dark); }
.submit-btn:disabled{ opacity:.75; cursor:default; }
.form-note{ margin-top:14px; font-size:13px; color:var(--slate); }
.confirm{ display:none; font-family:var(--mono); font-size:14px; color:var(--sage-deep-dark); margin-top:16px; }
.confirm.error{ color:var(--danger); }

/* ---------- the ask section: terracotta band with a floating card ---------- */
.ask{ background:var(--sage-deep); color:var(--cream); }
.ask .eyebrow{ color:#F7DDC7; }
.ask .eyebrow::before{ background:#F7DDC7; }
.ask h2{ color:var(--cream); }
.ask p.lede{ color:#FBE9DA; max-width:560px; margin-bottom:40px; font-size:17px; }
.ask-form{
  background:#FBFBF9; border-radius:3px; padding:38px; max-width:620px; color:#16212F;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.35);
}
.ask-form .field label{ color:#5C6B7A; }
.ask-form .field input, .ask-form .field select, .ask-form .field textarea{
  background:#F2F4F1; border-color:#C9D2CA; color:#16212F;
}
.ask-form .field .hint, .ask-form .form-note{ color:#5C6B7A; }
.ask-form h3{ color:#22364F; }
.ask-form .qualnote{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#C1592D; margin:0 0 20px;
}

/* ---------- footer ----------
   Mirrors src/components/truemargin/Footer.jsx: "Upstream" as the primary
   wordmark, "A Fox & Otter Data product" as a small secondary byline, and
   the same Platform/Method/Company link columns pointing at /how-it-works
   section anchors. Adapted into this page's own grid/typography system
   rather than copied Tailwind markup -- see fo.css header comment. */
footer{ padding:52px 0 40px; border-top:1px solid var(--line); }
.foot-top{
  display:grid; gap:36px 24px; padding:8px 0 44px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
}
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.foot-logo{ font-family:var(--display); font-size:20px; color:var(--heading); display:inline-flex; align-items:baseline; gap:8px; }
.foot-desc{ font-family:var(--body); font-size:14px; line-height:1.7; color:var(--slate); max-width:320px; margin:14px 0 0; }
.foot-byline{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--slate); margin:12px 0 0;
}
.foot-col-title{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--slate); margin:0 0 14px;
}
.foot-col-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col-links a{ font-family:var(--body); font-size:14px; color:var(--ink); text-decoration:none; }
.foot-col-links a:hover{ color:var(--sage-deep); }
.foot-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.foot-copy{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--slate); margin:0; }
.foot-legal{ display:flex; gap:20px; }
.foot-legal a{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--slate); text-decoration:none; }
.foot-legal a:hover{ color:var(--heading); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:2px; }