/* thicket marketing site — brand tokens mirror app/lib/theme/thicket_theme.dart
   (ThicketBrand + light palette) so the site and app read as one product. */

/* woff2 only. The .ttf originals were 484 KB combined — 80% of the page
   weight — against 178 KB here for pixel-identical output. woff2 is
   supported by every browser this site targets. */
@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/Karla-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --canopy: #1b3a2f;
  --canopy-2: #264f3e;
  --moss: #5c8b6b;
  --moss-light: #a9c6a9;
  --amber: #d98e2f;
  --amber-light: #f0c784;
  --paper: #eeefe5;
  --paper-2: #e3e5d6;
  --ink: #20241f;
  --ink-soft: #5a6156;
  --line: #1b3a2f24;
  --white: #fdfdf9;
  /* amber is 2.3:1 on --paper, far under AA. This is the text-safe variant
     for light backgrounds; --amber stays for fills, borders and dark bands. */
  --amber-ink: #8a5510;
  /* moss is 3.4:1 on --paper and 3.8:1 on --white, also under AA. Same deal:
     this is the text-safe green; --moss stays for dots, ticks and bullets. */
  --moss-ink: #44684f;

  --heading-font: "Patrick Hand", "Comic Sans MS", cursive;
  --body-font: "Karla", system-ui, -apple-system, sans-serif;
  --mono-font: "JetBrains Mono", ui-monospace, monospace;

  --max: 1120px;
  --radius: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* anchor targets clear the 72px sticky header explicitly rather than
   relying on section padding to happen to be larger than it */
section[id], main[id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is required, not optional: every <img> carries explicit
   width/height attributes so the browser can reserve space and avoid layout
   shift. Without this the attribute height is used as the rendered height and
   every image is stretched to its intrinsic pixel height. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amber);
  color: #201503;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 2px; }
.site-header :focus-visible,
.site-footer :focus-visible,
.on-canopy :focus-visible,
.band-canopy :focus-visible { outline-color: var(--amber-light); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.15;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber-ink);
}
.on-canopy .eyebrow { color: var(--amber-light); }

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.on-canopy .lede { color: var(--moss-light); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--amber);
  color: #201503;
  box-shadow: 0 6px 18px #d98e2f40;
}
.btn-primary:hover { background: var(--amber-light); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  opacity: 0.92;
}
.on-canopy .btn-outline { border-color: #ffffff55; }
.btn-outline:hover { background: #ffffff14; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canopy);
  border-bottom: 1px solid #ffffff14;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
}
.brand img { width: 30px; height: auto; }
.brand span {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--moss-light);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--amber);
  color: #201503;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
}
.nav-toggle { display: none; }
#nav-check { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .nav-links { position: absolute; top: 72px; left: 0; right: 0; background: var(--canopy);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px;
    border-bottom: 1px solid #ffffff14; display: none; }
  .nav-links li { width: 100%; padding: 12px 0; border-bottom: 1px solid #ffffff10; }
  .nav-links .nav-cta { display: inline-block; margin-top: 6px; }
  #nav-check:checked ~ .nav-links { display: flex; }
  label.nav-toggle {
    display: block; background: none; border: 0; color: var(--white);
    font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 6px;
  }
}

/* ---------- hero ---------- */
.hero {
  background: radial-gradient(120% 140% at 85% -10%, var(--canopy-2), var(--canopy) 60%);
  color: var(--white);
  padding: 72px 0 90px;
  position: relative;
  overflow: clip;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { color: var(--white); margin-top: 14px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.pilot-strip {
  margin-top: 34px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono-font);
  font-size: 0.78rem;
  color: var(--moss-light);
}
.pilot-strip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px #d98e2f30;
}

/* Mobile hero: headline and CTA lead, screenshots follow. Most traffic arrives
   from Instagram's in-app browser, so the pitch has to clear the fold on a
   phone — the previous `order: -1` pushed the h1 ~550px down. */
/* The stage needs an explicit height because .phone.back is absolutely
   positioned. Screenshots are 540x1200, so a phone renders ~2.22x its width
   plus 20px padding — a 200px phone is ~420px tall. Set the stage shorter
   than that and the flex-centred phones overflow upward into the pilot strip. */
@media (max-width: 900px) {
  .hero { padding: 44px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .phone { width: 200px; }
  .hero .phone-stage { order: 0; margin: 56px auto 0; height: 460px; }
  .phone-stage .phone.back { transform: rotate(-9deg) translate(-46px, 8px); }
  .hero .lede { font-size: 1.06rem; }
  .hero .cta-row { margin-top: 24px; }
  .pilot-strip { margin-top: 24px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 2rem; }
  .phone { width: 168px; }
  .hero .phone-stage { height: 380px; }
  .phone-stage .phone.back { transform: rotate(-9deg) translate(-38px, 6px); }
  .hero .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- phone mockups ---------- */
.phone {
  width: 230px;
  border-radius: 34px;
  background: var(--ink);
  padding: 10px;
  box-shadow: 0 30px 60px -20px #00000070, 0 0 0 1px #ffffff14 inset;
}
.phone img {
  border-radius: 24px;
  width: 100%;
  display: block;
}
.phone-stage { position: relative; z-index: 0; height: 420px; display: flex; align-items: center; justify-content: center; }
.pilot-strip { position: relative; z-index: 1; }
.phone-stage .phone.back {
  position: absolute;
  transform: rotate(-9deg) translate(-64px, 10px);
  opacity: 0.85;
  filter: brightness(0.85);
}
.phone-stage .phone.front {
  position: relative;
  transform: rotate(4deg);
}

/* ---------- sections ---------- */
section { padding: 88px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 12px; }

.band-paper2 { background: var(--paper-2); }
.band-canopy { background: var(--canopy); color: var(--white); }

/* ---------- pull quote ---------- */
.one-liner {
  margin-top: 28px;
  padding: 22px 26px;
  border-left: 4px solid var(--amber);
  background: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: var(--ink);
}

/* ---------- stat row (Why thicket) ---------- */
/* Figures use --canopy rather than --amber: amber is 2.3:1 on paper and these
   are text, not decoration. The amber rule above each one carries the colour. */
.stat-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0 32px;
  padding: 0;
}
.stat-row li {
  border-top: 3px solid var(--amber);
  padding-top: 16px;
}
.stat-figure {
  display: block;
  font-family: var(--heading-font);
  font-size: 2.7rem;
  line-height: 1.05;
  color: var(--canopy);
  margin-bottom: 10px;
}
.stat-label {
  display: block;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.stat-note {
  margin-top: 20px;
  font-family: var(--mono-font);
  font-size: 0.84rem;
}
.stat-note a { color: var(--ink-soft); }
.stat-note a:hover { color: var(--amber-ink); }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; gap: 24px; margin: 32px 0 26px; }
  .stat-figure { font-size: 2.3rem; }
}

/* ---------- sources page ---------- */
.source-list { list-style: none; padding: 0; margin: 0; }
.source-list > li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.source-list > li:last-child { border-bottom: 0; }
.source-figure {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: var(--canopy);
  display: block;
  margin-bottom: 6px;
}
.source-cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono-font);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- cards / feature grid ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}
.feature-card { padding: 26px; }
.hex {
  width: 52px;
  height: 46px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: var(--canopy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); font-size: 0.96rem; }
.feature-card ul { list-style: none; margin: 0; padding: 0; }
.feature-card ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.feature-card ul li:last-child { margin-bottom: 0; }
.feature-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
}
.roadmap-note { margin-top: 28px; text-align: center; }

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

/* ---------- pilot coverage list ---------- */
.city-list { list-style: none; margin: 20px 0 0; padding: 0; max-width: 560px; }
.city-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.city-list li:last-child { border-bottom: none; }
.city-list .status {
  margin-left: auto;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--moss-ink);
  text-transform: uppercase;
  font-weight: 700;
}
.privacy-points { list-style: none; margin: 0; padding: 0; }
.privacy-points li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--ink-soft);
}
.privacy-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--moss);
  font-weight: 800;
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .wrap { max-width: 700px; }
.cta-band .lede { margin: 0 auto; }
.privacy-proof a { color: var(--amber-light); text-decoration: underline; }
.cta-band .btn-row { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--canopy);
  color: var(--moss-light);
  padding: 56px 0 32px;
  font-size: 0.9rem;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* else the brand stretches and floats mid-height */
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid #ffffff14;
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--white); }
.footer-brand img { width: 26px; }
.footer-brand span { font-family: var(--heading-font); font-size: 1.3rem; }
.footer-links { display: flex; gap: 36px; flex-wrap: wrap; }
.footer-links h4 {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--amber-light);
  margin: 0 0 12px;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { text-decoration: none; color: var(--moss-light); }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: var(--moss-light);
  opacity: 0.85;
}

/* ---------- inline waitlist form ---------- */
/* Posts straight to /api/waitlist as a normal HTML form. No JavaScript, so it
   works with script-src 'none' and degrades to nothing on any browser. */
.waitlist-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  max-width: 470px;
}
.waitlist-form.centered { margin-left: auto; margin-right: auto; }
.waitlist-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--body-font);
  font-size: 0.98rem;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.waitlist-form .btn { flex: 0 0 auto; }
.on-canopy .waitlist-form input[type="email"] {
  border-color: #ffffff3d;
  background: #ffffff14;
  color: var(--white);
}
.on-canopy .waitlist-form input[type="email"]::placeholder { color: #ffffff8a; }
.cta-band .form-note { margin-top: 12px; }

/* Honeypot: hidden from people, irresistible to bots. Not display:none, which
   some bots skip -- this stays in the DOM but off-screen and unfocusable. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .waitlist-form input[type="email"] { flex: 1 1 100%; }
  .waitlist-form .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- apply form ---------- */
.apply-form { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
fieldset.form-row { border: 0; margin: 0; padding: 0; }
.form-row legend { padding: 0; }
.form-row label, .form-row .form-row-label { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.form-row .optional { font-weight: 400; color: var(--ink-soft); }
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form select,
.apply-form textarea {
  font-family: var(--body-font);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.apply-form textarea { resize: vertical; min-height: 96px; }
.apply-form input:focus-visible,
.apply-form select:focus-visible,
.apply-form textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.field-hint { font-size: 0.85rem; color: var(--ink-soft); margin: -2px 0 0; }
.radio-group { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.radio-option input { accent-color: var(--amber); width: 16px; height: 16px; }
.apply-form .btn { align-self: flex-start; }
.form-note { font-size: 0.82rem; color: var(--ink-soft); margin: -6px 0 0; }

/* ---------- legal pages ---------- */
.legal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
  max-width: 800px;
  margin: 0 auto;
}
.legal h2 { margin-top: 1.8em; font-size: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-soft); }
.legal strong { color: var(--ink); }
/* Inline style attributes are blocked by the CSP (style-src 'self'), so the
   result pages use this instead of style="margin-top:2em". */
.legal-back { margin-top: 2em; }
.legal-updated {
  font-family: var(--mono-font);
  font-size: 0.78rem;
  color: var(--moss-ink);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.legal-hero {
  padding: 56px 0 40px;
  background: var(--canopy);
  color: var(--white);
}
.legal-hero h1 { color: var(--white); margin: 10px 0 0; }

/* ---------- privacy band (dark, so it reads as the differentiator it is) ---------- */
.band-canopy .eyebrow { color: var(--amber-light); }
.band-canopy .lede { color: var(--moss-light); }
.band-canopy h2 { color: var(--white); }
.band-canopy .privacy-points li { color: var(--moss-light); }
.band-canopy .privacy-points li::before { color: var(--amber-light); }
.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  align-items: start;
}
.privacy-proof {
  margin-top: 28px;
  padding: 18px 22px;
  border-left: 3px solid var(--amber);
  background: #ffffff0f;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.94rem;
  color: var(--moss-light);
}
.privacy-proof strong { color: var(--white); }
@media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- print (legal pages get printed) ---------- */
@media print {
  .site-header, .site-footer, .skip-link, .nav-links, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .legal { border: 0; padding: 0; max-width: none; background: #fff; }
  .legal-hero { background: #fff; color: #000; padding: 0 0 12px; }
  .legal-hero h1 { color: #000; }
  .legal p, .legal li { color: #000; }
  section { padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}