/* =========================================================================
   humanear.com stylesheet
   -------------------------------------------------------------------------
   One file for every page. Colors, spacing and type sizes are declared once
   as CSS variables in :root so a brand change later is a few edits here,
   not a hunt through the whole file.

   The palette is the Humanear brand palette from claude.md. Two extra tints
   (--signal and --ink) are derived from it because the brand green #4a6b35
   is too dark to read as text on a charcoal background. --signal is the
   same hue, just lighter, so it still reads as "Humanear green".
   ========================================================================= */

/* ---- Fonts --------------------------------------------------------------
   Self-hosted so no visitor data goes to Google (and the page does not wait
   on a third-party server). Both are variable fonts: one file covers every
   weight, which is why there is only one @font-face per family. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap; /* show fallback text instantly, swap when loaded */
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  /* "optional" instead of "swap" for the BODY font only. On a slow first
     visit the browser keeps the system font rather than re-drawing every
     paragraph when Inter shows up late. That late re-draw was what Google
     timed as the page's "largest paint" (about 3.4s on mobile). Once Inter
     is cached, every later page view uses it. Headings keep "swap" so the
     brand typeface always appears. */
  font-display: optional;
}

:root {
  /* Brand palette (from claude.md) */
  --green: #4a6b35;      /* Humanear Green: buttons, fills */
  --charcoal: #2a2a2a;   /* Charcoal */
  --slate: #5a5a5a;      /* Slate Gray */
  --silver: #d0d0d0;     /* Silver: outlines, secondary text */
  --sage: #7a9060;       /* Sage: hover states, accents */
  --white: #ffffff;

  /* Derived working colors for a dark site */
  --ink: #111410;        /* page background, charcoal nudged toward green */
  --panel: #181c16;      /* cards and alternate bands */
  --panel-2: #1f241c;    /* raised elements inside panels */
  --line: rgba(208, 208, 208, 0.12);  /* hairline borders, silver at 12% */
  --text: #e8ebe4;       /* body text: off-white is easier on the eyes than pure white */
  --muted: #a2a99b;      /* secondary text, passes contrast on --ink */
  --signal: #a9cc84;     /* light brand green for text/icons on dark */

  /* Type */
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid sizes: clamp(min, preferred, max) scales with the screen width
     so headings shrink on phones without media queries for each size. */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);

  --radius: 14px;
  --wrap: 1180px;              /* max content width */
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 var(--step-0)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guards against any decorative graphic poking past the edge on phones */
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--signal); text-underline-offset: 3px; }
a:hover { color: var(--white); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--white);
  font-weight: 600;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
::selection { background: var(--green); color: var(--white); }

/* Visible keyboard focus everywhere. Mouse users never see it. */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--signal); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 8px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.section--panel { background: var(--panel); border-block: 1px solid var(--line); }
.center { text-align: center; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 46ch; line-height: 1.5; }
.center .lede { margin-inline: auto; }

/* Small uppercase label above headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.78rem/1 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--signal); }
.center .eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--signal); }

.accent { color: var(--signal); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font: 600 1rem/1 var(--font-head); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: var(--white); border-color: #5c8243; }
.btn--primary:hover { background: var(--sage); color: var(--white); }
.btn--ghost { color: var(--text); border-color: rgba(208,208,208,0.3); }
.btn--ghost:hover { border-color: var(--signal); color: var(--white); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  /* Transparent until the page scrolls; site.js adds .is-scrolled */
  transition: background 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(17, 20, 16, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand span { font: 600 1.2rem/1 var(--font-head); letter-spacing: -0.01em; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a[aria-current="page"] { background: rgba(169, 204, 132, 0.08); }
.nav .btn { margin-left: 10px; padding: 11px 18px; color: var(--white); }
.nav-phone { color: var(--silver) !important; font-variant-numeric: tabular-nums; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 10px;
  width: 44px; height: 44px; color: var(--white); cursor: pointer;
}
.nav-toggle svg { margin: auto; }

/* Phones and small tablets: nav collapses into a dropdown panel */
@media (max-width: 960px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    display: none; padding: 12px var(--gutter) 24px;
  }
  .nav.is-open { display: block; }
  .site-header:has(.nav.is-open) { background: var(--panel); }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { margin: 16px 0 0; justify-content: center; border-radius: 999px; }
}

/* ---- Home hero ---------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); position: relative; overflow: hidden; }
/* Soft green glow behind the hero. Purely decorative. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(74,107,53,0.35), transparent 70%);
  pointer-events: none;
}
.hero .wrap.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.hero h1 { margin-bottom: 0.35em; }
.hero h1 .line2 { display: block; color: var(--signal); }
.hero .lede { max-width: 40ch; }
.hero-art { width: 100%; }
@media (max-width: 860px) {
  .hero .wrap.hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; margin-inline: auto; }
}

/* Trust strip under the hero */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: clamp(40px, 6vw, 72px); }
.stat { background: var(--ink); padding: 22px 24px; }
.stat b { display: block; font: 600 var(--step-2)/1 var(--font-head); color: var(--white); margin-bottom: 6px; }
.stat span { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Page hero (inner pages) ------------------------------------------- */
.page-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; right: -15%; top: -40%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, rgba(74,107,53,0.28), transparent 70%); pointer-events: none;
}
.page-hero .wrap { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.page-hero h1 { font-size: var(--step-3); }
.page-hero .art { max-width: 420px; justify-self: end; width: 100%; }
@media (max-width: 860px) {
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero .art { justify-self: start; max-width: 360px; }
}

/* ---- Cards and grids ---------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px); position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.section--panel .card { background: var(--ink); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card p { color: var(--muted); }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: rgba(169,204,132,0.45); transform: translateY(-3px); }
.card .more { color: var(--signal); font-weight: 600; font-family: var(--font-head); font-size: 0.95rem; }

/* Icon tile used at the top of service cards */
.icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(74,107,53,0.22); border: 1px solid rgba(169,204,132,0.25); margin-bottom: 18px;
  color: var(--signal);
}
.icon svg { width: 24px; height: 24px; }

/* Lists with green check marks */
.checks { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--text); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* Two-column layout: text one side, graphic or list the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---- "Sound familiar?" pain list --------------------------------------- */
.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pain {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-size: 0.98rem; line-height: 1.5;
}
.pain svg { flex: none; width: 22px; height: 22px; color: #d9a35a; margin-top: 1px; }
@media (max-width: 640px) { .pains { grid-template-columns: 1fr; } }

/* ---- Process steps ------------------------------------------------------ */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.step { position: relative; padding-top: 64px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font: 600 1rem/1 var(--font-head); color: var(--signal);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(169,204,132,0.4); background: var(--ink);
}
/* the connecting line between step numbers */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 22px; left: 54px; right: -10px; height: 1px;
  background: linear-gradient(90deg, rgba(169,204,132,0.5), rgba(169,204,132,0.05));
}
.step p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .step::after { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---- Work / portfolio --------------------------------------------------- */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 960px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work { grid-template-columns: 1fr; } }
.work a { text-decoration: none; color: inherit; display: block; }
.shot {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2);
  aspect-ratio: 16 / 10; position: relative;
}
/* fake browser bar so screenshots read as "a website" at a glance */
.shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; z-index: 1;
  background: #262b23 radial-gradient(circle at 12px 11px, #5a5a5a 3px, transparent 3.5px),
              radial-gradient(circle at 24px 11px, #5a5a5a 3px, transparent 3.5px),
              radial-gradient(circle at 36px 11px, #5a5a5a 3px, transparent 3.5px);
  background-color: #262b23;
}
.shot img { position: absolute; top: 22px; left: 0; width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top; transition: transform 0.6s ease; }
.work a:hover .shot img { transform: scale(1.04); }
.work h3 { margin: 16px 0 4px; font-size: 1.1rem; }
.work p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ---- Email tiers -------------------------------------------------------- */
.tier { display: flex; flex-direction: column; }
.tier .tag { font: 600 0.75rem/1 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tier--best { border-color: rgba(169,204,132,0.55); background: linear-gradient(180deg, rgba(74,107,53,0.18), var(--panel) 60%); }
.tier--best .tag { color: var(--signal); }
.tier .checks { margin-top: auto; padding-top: 12px; }

/* Address comparison graphic on the email page */
.addr-compare { display: grid; gap: 14px; }
.addr {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px;
  font: 500 clamp(0.95rem, 0.8rem + 0.8vw, 1.25rem)/1.2 var(--font-head); border: 1px solid var(--line); background: var(--panel-2);
  overflow-wrap: anywhere;
}
.addr small { display: block; font: 400 0.8rem/1.3 var(--font-body); color: var(--muted); margin-top: 4px; }
.addr .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.addr--meh .dot { background: #c9774f; }
.addr--good { border-color: rgba(169,204,132,0.5); }
.addr--good .dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(169,204,132,0.18); }

/* ---- Automation before/after ------------------------------------------- */
.story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.story + .story { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
.flow { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.flow-label { font: 600 0.75rem/1 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; margin: 6px 0 12px; }
.flow-label--before { color: #d9a35a; }
.flow-label--after { color: var(--signal); }

/* ---- Timeline (About) --------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--signal), rgba(169,204,132,0.1)); }
.timeline li { position: relative; padding-left: 40px; margin-bottom: 28px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--signal); }
.timeline b { font: 600 0.85rem/1 var(--font-head); letter-spacing: 0.12em; color: var(--signal); display: block; margin-bottom: 6px; }
.timeline p { margin: 0; color: var(--muted); }

.pull {
  font: 500 var(--step-2)/1.3 var(--font-head); color: var(--white); letter-spacing: -0.01em;
  border-left: 3px solid var(--signal); padding-left: 24px; margin: 0;
}
.pull cite { display: block; font: 400 0.95rem/1.4 var(--font-body); color: var(--muted); margin-top: 14px; font-style: normal; }

/* ---- CTA band ----------------------------------------------------------- */
.cta {
  border-radius: 22px; padding: clamp(36px, 6vw, 72px); position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(122,144,96,0.45), transparent 55%), linear-gradient(135deg, #2d4220, #1a2414);
  border: 1px solid rgba(169,204,132,0.3);
  display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
}
.cta h2 { font-size: var(--step-3); margin-bottom: 0.3em; }
.cta p { color: #cfd8c6; margin: 0; max-width: 52ch; }
.cta .btn-row { margin: 0; flex-direction: column; align-items: stretch; }
.cta .btn--ghost { border-color: rgba(255,255,255,0.35); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta .btn-row { flex-direction: row; } }

/* ---- Contact form ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; text-decoration: none; color: var(--text); }
.contact-card:hover { border-color: rgba(169,204,132,0.45); color: var(--white); }
.contact-card small { display: block; color: var(--muted); font-size: 0.82rem; }
.contact-card b { font: 600 1.1rem/1.3 var(--font-head); color: var(--white); }

form.contact { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 4vw, 40px); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
label, legend { display: block; font-weight: 500; font-size: 0.92rem; margin-bottom: 8px; color: var(--silver); }
.req { color: var(--signal); }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px; font: inherit; font-size: 1rem;
  background: var(--ink); color: var(--white); border: 1px solid rgba(208,208,208,0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(169,204,132,0.18); }
textarea { min-height: 150px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }

/* "What do you need help with?" chips: real checkboxes, styled as pills */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: 0.92rem; cursor: pointer;
  border: 1px solid rgba(208,208,208,0.22); color: var(--muted); user-select: none;
  transition: all 0.15s ease;
}
.chip input:checked + span { background: rgba(74,107,53,0.4); border-color: var(--signal); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin: 6px 0 20px; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot, hidden from people */
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 10px; display: none; }
.form-status.is-ok { display: block; background: rgba(74,107,53,0.25); border: 1px solid var(--signal); color: var(--white); }
.form-status.is-err { display: block; background: rgba(201,119,79,0.15); border: 1px solid #c9774f; color: #f2d2c2; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.turnstile { margin: 4px 0 18px; min-height: 65px; }

/* ---- Legal pages -------------------------------------------------------- */
.legal { max-width: 820px; }
.legal .policy_embed_div { color: var(--text); }
/* Termageddon injects its own markup; these keep it readable on dark */
.legal .policy_embed_div h1, .legal .policy_embed_div h2, .legal .policy_embed_div h3 { color: var(--white); font-size: var(--step-1); margin-top: 1.6em; }
.legal .policy_embed_div a { color: var(--signal); }
.legal .policy_embed_div * { max-width: 100%; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 32px; margin-top: clamp(40px, 6vw, 80px); background: #0c0e0b; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .footer-h { font: 600 0.8rem/1.2 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; max-width: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--text); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--signal); }
.site-footer p { color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.footer-base a { color: var(--muted); font-size: 0.85rem; }

/* ---- Scroll reveal -------------------------------------------------------
   Elements with .reveal fade up as they scroll into view (site.js adds
   .is-in). Only hidden when JS is running (html.js), so the content is
   never invisible if the script fails. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- SVG graphic styling -------------------------------------------------
   The inline graphics use these classes instead of hardcoded colors, so
   they follow the palette above. */
.g-line { stroke: rgba(208,208,208,0.22); fill: none; }
.g-line--signal { stroke: var(--signal); fill: none; }
.g-chaos { stroke: #c9774f; fill: none; opacity: 0.75; }
.g-node { fill: var(--panel-2); stroke: rgba(208,208,208,0.3); }
.g-node--hub { fill: var(--green); stroke: var(--signal); }
.g-text { fill: var(--text); font: 500 13px var(--font-head); }
.g-text--muted { fill: var(--muted); font: 400 11px var(--font-body); }
.g-text--white { fill: var(--white); font: 600 15px var(--font-head); }
.g-icon { stroke: var(--signal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Animated "data" moving along the calm lines in the hero */
.flowline { stroke-dasharray: 4 14; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
/* The tangled lines gently drift */
.wobble { animation: wobble 7s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes wobble { to { transform: rotate(4deg) translateY(4px); } }
.pulse { animation: pulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(1.35); } }

/* Respect people who turn off motion in their OS settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- Before/after flow rows (Automation page) ---------------------------
   Built from plain HTML pills instead of SVG so they wrap naturally on
   phones. Each .fstep is one manual (or automatic) step; the arrow between
   steps is drawn by CSS, so the HTML stays just a list. */
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; list-style: none; padding: 0; margin: 0 0 6px; }
.fstep {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 10px; font-size: 0.9rem; line-height: 1.25;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
}
.fstep:not(:last-child)::after { content: "\2192"; margin-left: 8px; color: var(--muted); } /* right arrow */
.flow-row--before .fstep { border-color: rgba(217,163,90,0.35); }
.flow-row--after .fstep { border-color: rgba(169,204,132,0.5); background: rgba(74,107,53,0.2); }
.flow-count { font: 600 0.8rem/1 var(--font-head); color: var(--muted); margin: 8px 0 18px; }
.flow-count b { color: var(--white); }

/* Idea chips on the Automation page */
.ideas { display: flex; flex-wrap: wrap; gap: 10px; }
.ideas span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 0.95rem; color: var(--text); }

/* On phones, put the contact form above the contact cards. People who
   scrolled to this page came to send a message; the cards are the fallback. */
@media (max-width: 860px) { .contact-grid form.contact { order: -1; } }