/* ===========================================================================
   Loamio landing — "Headgate" design system.
   Tokens are docs/design-system.md v2 (water-blue, approved 2026-06-12), the
   same palette app.loamio.com uses. Before 2026-08-26 this page ran a warm
   cream + Georgia serif system of its own, so the marketing site and the app
   looked like two different products.

   Fonts are SELF-HOSTED (/assets/fonts/). Google Fonts would need
   fonts.googleapis.com in style-src and fonts.gstatic.com in font-src -
   a CSP change plus a CloudShell bundle run. `font-src 'self'` already
   covers this, so the CSP is untouched. It is also faster and keeps
   visitor IPs away from Google, which matters for the EU-consent note
   at the top of this file.

   The legacy variable names (--ink, --rule, --water ...) are KEPT and
   repointed at the new palette on purpose: inline style="" attributes in
   the markup below reference them, so they restyle with no markup edit.
   =========================================================================== */

/* ===========================================================================
   PORTABLE LAYER — @font-face + :root tokens.
   ---------------------------------------------------------------------------
   Everything between here and "END PORTABLE LAYER" is design-system, not
   landing-page. It is the half that the APP REBUILD consumes (Sabin,
   2026-08-26: "the style sheet should also be used when we do the app pages
   redesign"). Copy this block, do not re-derive it — see the "Reusing this
   for the app" section of docs/design-headgate.md for exactly how, including
   the hex -> HSL mapping shadcn needs and the two live bugs it fixes
   (app/index.html loads Inter from rsms.me, a third-party origin, and never
   loads Inter Tight at all, so every app heading silently falls back).

   Everything BELOW the end marker is landing-page component CSS and does NOT
   port — the app re-expresses those as Tailwind/shadcn components against
   these same tokens.
   =========================================================================== */

@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("/assets/fonts/inter-tight-var-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* ---- design-system.md v2 scales ---- */
  --water-50:#E6F0F7;  --water-100:#DDE9F1; --water-200:#B5C4D2; --water-300:#5BA1C5;
  --water-400:#1E97C9; --water-500:#0B5C84; --water-600:#084866; --water-700:#063B57;
  --water-800:#04293D; --water-900:#021724;
  --paper-50:#FFFFFF;  --paper-100:#F4F8FB; --paper-200:#EEF3F8; --paper-300:#D7E1EA;
  --paper-400:#B5C4D2; --paper-500:#93A4B6; --paper-600:#4F6379; --paper-700:#324658;
  --paper-800:#1B2D40; --paper-900:#0F2236;
  --gold-50:#FBEFD2;   --gold-300:#E0A646;  --gold-500:#C4881A;  --gold-700:#8C5A00;
  --sage-50:#DEEEDF;   --sage-500:#2E7D4A;  --sage-700:#1E5732;  --teal:#4FB5A3;
  --ember-500:#C66A22; --earth:#8C5A2E;     --rust-500:#B0322F;  --iris:#6F4C8E;

  /* ---- legacy aliases: repointed, NOT removed (inline styles use them) ---- */
  --ink:#0F2236; --ink-soft:#4F6379;
  --paper:#F4F8FB; --paper-card:#FFFFFF;
  --water:#0B5C84; --water-deep:#063B57; --water-bright:#1E97C9;
  --grass:#2E7D4A; --rule:#D7E1EA; --focus:#1E97C9; --warn:#B0322F;

  --shadow-card:0 1px 2px rgba(11,92,132,.06);
  --shadow-lift:0 10px 30px rgba(2,23,36,.10);
  --radius:12px;
}

/* ======================= END PORTABLE LAYER ============================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}      /* overflow-x guards the full-bleed breakout below */
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"cv11","ss03","tnum";        /* tabular figures, per design-system.md */
  color:var(--paper-900);
  background:var(--paper-50);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Inter Tight","Inter",sans-serif;letter-spacing:-.025em;margin:0;line-height:1.12}
p{margin:0}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* Full-bleed helper. Sections sit inside .wrap, so they break out to the
   viewport and re-pad themselves; html{overflow-x:hidden} stops the
   scrollbar-width rounding from producing a horizontal scroll. */
.site-header,.hero,.page-hero,.factstrip,section.cta{
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:max(32px,calc(50vw - 600px));
  padding-right:max(32px,calc(50vw - 600px));
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--water-700);color:#fff;padding:12px 16px;
  text-decoration:none;font-size:15px;font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--water-400);outline-offset:2px;border-radius:4px;
}

/* ===================== HEADER + HERO: one deep-water band ================= */
header.site-header{
  background:var(--water-700);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px;
}
.brand{
  font-family:"Inter Tight",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
}
.brand .drop{
  width:32px;height:32px;border-radius:8px;background:var(--water-400);
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;
}
nav.primary{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
nav.primary a{
  color:var(--water-100);text-decoration:none;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;min-height:44px;
}
nav.primary a:hover{color:#fff;text-decoration:underline}
nav.primary a.nav-cta{
  background:var(--water-400);color:#fff;font-weight:600;
  padding:0 20px;border-radius:8px;min-height:44px;text-decoration:none;
}
nav.primary a.nav-cta:hover{background:#2AA6D8;text-decoration:none}

nav.primary details.nav-drop{position:relative}
nav.primary details.nav-drop summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  color:var(--water-100);font-size:15px;font-weight:500;min-height:44px;
}
nav.primary details.nav-drop summary::-webkit-details-marker{display:none}
nav.primary details.nav-drop summary::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--water-300);
  border-bottom:2px solid var(--water-300);transform:rotate(45deg) translateY(-2px);
}
nav.primary details.nav-drop summary:hover{color:#fff}
nav.primary details.nav-drop[open] summary::after{transform:rotate(225deg) translateY(-2px)}
nav.primary .nav-drop-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:224px;
  background:#fff;border:1px solid var(--paper-300);border-radius:10px;
  box-shadow:var(--shadow-lift);padding:8px;display:flex;flex-direction:column;
}
nav.primary .nav-drop-menu a{
  color:var(--paper-700);padding:0 12px;border-radius:6px;font-size:15px;min-height:44px;
}
nav.primary .nav-drop-menu a:hover{background:var(--paper-100);color:var(--water-500);text-decoration:none}

section.hero{
  background:var(--water-700);
  padding-top:56px;padding-bottom:72px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
.hero .eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--water-300);margin-bottom:18px;
}
.hero h1{font-size:clamp(34px,4.4vw,58px);font-weight:700;color:#fff;text-wrap:pretty}
.hero .lede{font-size:19px;line-height:1.62;color:var(--water-200);margin-top:20px;max-width:600px}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:30px}
.hero .cta-primary{display:flex;flex-direction:column;align-items:stretch}
.hero-meta{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--water-600);
  font-size:14px;color:var(--paper-500);
}
.hero-figure{
  border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--water-600);box-shadow:0 18px 44px rgba(2,23,36,.34);
}
.hero-figure img{display:block;width:100%;height:auto}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:10px;
  font-size:17px;font-weight:600;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--water-400);color:#fff}
.btn-primary:hover{background:#2AA6D8}
.btn-ghost{background:transparent;color:#fff;border-color:var(--water-300)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-note{margin:8px 0 0;font-size:13px;color:var(--paper-500);text-align:center}
/* On light sections the ghost/primary pair flips to the light palette. */
.block .btn-primary,section.pricing .btn-primary{background:var(--water-500)}
.block .btn-primary:hover,section.pricing .btn-primary:hover{background:var(--water-600)}
.block .btn-ghost,section.pricing .btn-ghost{color:var(--water-500);border-color:var(--paper-400)}
.block .btn-ghost:hover,section.pricing .btn-ghost:hover{background:var(--paper-100)}
.block .btn-note,section.pricing .btn-note{color:var(--paper-600)}

/* ===================== FACT STRIP ======================================== */
.factstrip{
  background:var(--water-500);
  padding-top:26px;padding-bottom:26px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
}
.factstrip .fact{padding:4px 24px 4px 0}
.factstrip .fact + .fact{border-left:1px solid var(--water-400);padding-left:24px}
.factstrip b{
  display:block;font-family:"Inter Tight",sans-serif;font-size:22px;font-weight:700;
  color:#fff;letter-spacing:-.02em;line-height:1.2;
}
.factstrip span{display:block;margin-top:5px;font-size:14.5px;color:var(--water-200);line-height:1.45}
.factstrip b small{font-size:16px;font-weight:500;color:var(--water-200);letter-spacing:0}

/* ===================== SECTIONS ========================================== */
section.block{padding:76px 0;border-top:1px solid var(--paper-300)}
section.block:first-of-type{border-top:none}
.section-title{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--water-500);margin-bottom:14px;
}
section.block h2,section.pricing h2{font-size:clamp(28px,3.2vw,42px);font-weight:700;color:var(--paper-900);text-wrap:pretty}
.supporting{margin-top:16px;max-width:820px;font-size:18px;line-height:1.62;color:var(--paper-600)}
.lede{font-size:18px;line-height:1.62;color:var(--paper-600)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}

.card{
  background:#fff;border:1px solid var(--paper-300);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:26px 24px;margin:0;
  border-top:6px solid var(--water-500);
}
.card h3{font-size:22px;font-weight:700;color:var(--paper-900);margin:14px 0 10px}
.card p{font-size:16px;line-height:1.62;color:var(--paper-600)}
.card .icon{display:block;line-height:0}
.card .icon svg{width:32px;height:32px;display:block}
/* Chart-series rails, in the fixed order from design-system.md. Gold is NOT
   used here - it means "live/active" in this system and nothing on a
   marketing card is live. */
#problem .card:nth-child(1),#mapping .card:nth-child(1),#features .card:nth-child(1){border-top-color:var(--water-500)}
#problem .card:nth-child(2),#mapping .card:nth-child(2),#features .card:nth-child(2){border-top-color:var(--water-400)}
#problem .card:nth-child(3),#mapping .card:nth-child(3),#features .card:nth-child(3){border-top-color:var(--teal)}
#features .card:nth-child(1){border-top-color:var(--earth)}
#features .card:nth-child(2){border-top-color:var(--water-400)}
#features .card:nth-child(3){border-top-color:var(--iris)}

/* ---- product tour figures ---- */
section.tour figure{margin:36px 0 0}
section.tour figure img,section.tour figure svg{
  display:block;width:100%;height:auto;
  border:1px solid var(--paper-300);border-radius:var(--radius);background:var(--paper-100);
}
figcaption{margin-top:14px;font-size:16px;line-height:1.55;color:var(--paper-600)}
figcaption b{color:var(--paper-900);font-weight:700}

/* ===================== COMPARISON TABLE ================================== */
/* Deliberately on a LIGHT field, not the dark band the mockup used: this is a
   dense sourced table and legibility wins over the colour block. */
.cmp-scroll{overflow-x:auto;margin-top:36px;border:1px solid var(--paper-300);border-radius:var(--radius)}
table.cmp{border-collapse:collapse;width:100%;min-width:860px;font-size:15px}
table.cmp thead th{
  background:var(--paper-100);color:var(--paper-700);font-weight:600;font-size:13.5px;
  text-align:center;padding:15px 12px;border-bottom:2px solid var(--water-700);white-space:nowrap;
}
table.cmp thead th:first-child{text-align:left}
table.cmp thead th:nth-child(2){color:var(--water-500);font-weight:700}
table.cmp th,table.cmp td{padding:15px 12px;border-bottom:1px solid var(--paper-200);text-align:center;vertical-align:middle}
table.cmp th[scope=row]{text-align:left;font-weight:500;color:var(--paper-900);font-size:15.5px}
table.cmp tbody tr:nth-child(even) th[scope=row],table.cmp tbody tr:nth-child(even) td{background:var(--paper-100)}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none}
table.cmp td.loamio{background:var(--water-50)}
table.cmp tbody tr:nth-child(even) td.loamio{background:var(--water-100)}
.cmp .yes{color:var(--sage-500);font-weight:700;font-size:17px}
.cmp .no{color:var(--paper-500);font-weight:600}
.cmp .ico{width:18px;height:18px;display:inline-block;vertical-align:-4px}
.cmp .part{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--paper-200);color:var(--paper-700);font-size:13.5px;font-weight:600;
}
.cmp-note{margin-top:16px;font-size:13.5px;color:var(--paper-500);line-height:1.55}
.other-comparisons{margin-top:18px;font-size:15.5px;color:var(--paper-600)}
.other-comparisons a{color:var(--water-500);text-decoration:none;font-weight:600}
.other-comparisons a:hover{text-decoration:underline}

/* ===================== STRIPE FLOW (full-bleed dark) ===================== */
section.stripe-flow{background:var(--paper-900);padding:72px 0}
section.stripe-flow .section-title{color:var(--water-300)}
section.stripe-flow h2{font-size:clamp(28px,3.2vw,42px);font-weight:700;color:#fff}
section.stripe-flow p{margin-top:16px;max-width:840px;font-size:18px;line-height:1.62;color:var(--paper-400)}
section.stripe-flow p b{color:#fff}
.flow-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.flow-cols .step{background:var(--paper-800);border-radius:var(--radius);padding:26px 24px;border-top:5px solid var(--water-400)}
.flow-cols .step:nth-child(2){border-top-color:var(--teal)}
.flow-cols .step h3{font-size:20px;font-weight:700;color:#fff}
.flow-cols .step p{margin-top:10px;font-size:16px;color:var(--paper-400)}

/* ===================== PRICING =========================================== */
section.pricing{padding:76px 0;border-top:1px solid var(--paper-300)}
.tier{
  background:#fff;border:1px solid var(--paper-300);border-radius:14px;padding:30px 26px;
  display:flex;flex-direction:column;gap:14px;position:relative;box-shadow:var(--shadow-card);margin:0;
}
.tier h3{font-family:"Inter Tight",sans-serif;font-size:21px;font-weight:700;color:var(--paper-900)}
.tier .who{font-size:15px;color:var(--paper-600)}
.tier .price{
  font-family:"Inter Tight",sans-serif;font-size:50px;font-weight:700;color:var(--water-500);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
}
.tier .price span{font-size:18px;font-weight:500;color:var(--paper-600);letter-spacing:0}
.tier ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.tier ul li{position:relative;padding-left:26px;font-size:15.5px;color:var(--paper-700);line-height:1.5}
.tier ul li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2.5px solid var(--sage-500);border-bottom:2.5px solid var(--sage-500);
  transform:rotate(-45deg);
}
.tier.popular{background:var(--water-700);border-color:var(--water-700)}
.tier.popular h3{color:#fff}
.tier.popular .who{color:var(--water-200)}
.tier.popular .price{color:#fff}
.tier.popular .price span{color:var(--water-200)}
.tier.popular ul li{color:var(--water-100)}
.tier.popular ul li::before{border-color:var(--teal)}
.tier.popular .btn-primary{background:var(--water-400)}
.tier.popular .btn-primary:hover{background:#2AA6D8}
.tier.popular .btn-ghost{color:#fff;border-color:var(--water-300)}
.tier.popular .btn-ghost:hover{background:rgba(255,255,255,.08)}
.tier.popular .btn-note{color:var(--paper-500)}
.badge{
  position:absolute;top:-13px;right:22px;
  padding:5px 13px;border-radius:999px;background:var(--water-400);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.03em;
}
.pricing-fine{
  margin-top:28px;padding:22px 24px;background:var(--paper-100);
  border:1px solid var(--paper-300);border-radius:var(--radius);
  font-size:15px;line-height:1.6;color:var(--paper-600);
}
.pricing-fine b{color:var(--paper-900);font-weight:700;font-variant-numeric:tabular-nums}

/* ===================== WATER LAW / ROLLOUT =============================== */
.law-list{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.law-list li{
  background:#fff;border:1px solid var(--paper-300);border-left:5px solid var(--water-500);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;
  font-size:16px;line-height:1.6;color:var(--paper-600);
}
.law-list li b,.law-list li strong{display:block;margin-bottom:7px;color:var(--paper-900);
  font-family:"Inter Tight",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.02em}
.law-list li span{display:block}
.law-list li:nth-child(2){border-left-color:var(--water-400)}
.law-list li:nth-child(3){border-left-color:var(--teal)}
.law-list li:nth-child(4){border-left-color:var(--earth)}

ol.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:step}
ol.steps li{position:relative;padding-top:22px;counter-increment:step;border-top:3px solid var(--paper-300)}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;top:-14px;left:0;background:#fff;padding-right:10px;
  font-family:"Inter Tight",sans-serif;font-size:14px;font-weight:700;color:var(--water-500);
  font-variant-numeric:tabular-nums;
}
ol.steps li:nth-child(1){border-top-color:var(--water-500)}
ol.steps li:nth-child(2){border-top-color:var(--water-400)}
ol.steps li:nth-child(3){border-top-color:var(--teal)}
ol.steps li:nth-child(4){border-top-color:var(--sage-500)}
ol.steps li h3{font-size:19px;font-weight:700;color:var(--paper-900)}
ol.steps li p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--paper-600)}

/* ===================== FAQ =============================================== */
section.faq details{
  border:1px solid var(--paper-300);border-radius:var(--radius);background:#fff;
  padding:0;margin-top:14px;box-shadow:var(--shadow-card);
}
section.faq details[open]{border-color:var(--water-300)}
section.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;min-height:44px;
  font-family:"Inter Tight",sans-serif;font-size:18px;font-weight:600;color:var(--paper-900);
}
section.faq summary::-webkit-details-marker{display:none}
section.faq summary::after{
  content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--water-500);border-bottom:2px solid var(--water-500);
  transform:rotate(45deg) translateY(-3px);
}
section.faq details[open] summary::after{transform:rotate(225deg) translateY(-1px)}
section.faq details > p,section.faq details > div{padding:0 22px 20px;font-size:16px;line-height:1.65;color:var(--paper-600)}

/* ===================== CONTACT CTA (full-bleed dark) ===================== */
section.cta{background:var(--water-700);padding-top:76px;padding-bottom:76px}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:none}
section.cta .section-title{color:var(--water-300);text-align:left !important}
section.cta h2{font-size:clamp(30px,3.4vw,46px);font-weight:700;color:#fff}
section.cta .lede{margin-top:16px;font-size:18px;color:var(--water-200);max-width:520px}
.secondary-cta{grid-column:1/-1;margin-top:8px;font-size:15px;color:var(--paper-500)}
.secondary-cta a{color:var(--water-300);text-decoration:none;font-weight:600}
.secondary-cta a:hover{color:#fff;text-decoration:underline}

form.demo{
  background:#fff;border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-lift);
}
form.demo .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.demo .field{display:flex;flex-direction:column;gap:7px}
form.demo label{font-size:13.5px;font-weight:600;color:var(--paper-700)}
form.demo .req{color:var(--rust-500)}
form.demo input,form.demo textarea{
  font-family:inherit;font-size:16px;color:var(--paper-900);
  background:var(--paper-100);border:1px solid var(--paper-300);border-radius:8px;
  padding:0 14px;min-height:46px;width:100%;
}
form.demo textarea{padding:12px 14px;min-height:88px;resize:vertical;line-height:1.5}
form.demo input:focus,form.demo textarea:focus{
  outline:3px solid var(--water-400);outline-offset:1px;background:#fff;border-color:var(--water-400);
}
form.demo input::placeholder,form.demo textarea::placeholder{color:var(--paper-500)}
form.demo button{width:100%;background:var(--water-500);color:#fff;border:none;min-height:54px}
form.demo button:hover{background:var(--water-600)}
.form-msg{margin:0;font-size:14.5px;color:var(--paper-600);min-height:1px}

/* ===================== FOOTER ============================================ */
footer{
  border-top:1px solid var(--paper-300);margin-top:0;padding:34px 0 44px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:14.5px;color:var(--paper-600);
}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--paper-600);text-decoration:none}
footer a:hover{color:var(--water-500);text-decoration:underline}

/* Keyword landing-page links (D-060). flex-basis:100% makes this a full-width
   first row inside the existing flex footer, so it reads as its own band
   rather than mixing with the legal/contact links below it. */
footer nav.solutions{
  flex-basis:100%;padding-bottom:20px;margin-bottom:4px;
  border-bottom:1px solid var(--paper-300);gap:12px 22px;
}

/* ===========================================================================
   RESPONSIVE. The ditch rider is the one user who is always on a phone,
   so the mobile pass is not an afterthought: single column, 16px+ body,
   44px targets, and the nav wraps instead of hiding behind JS (a
   hamburger would need an inline script and a new CSP hash).
   =========================================================================== */
@media(max-width:1080px){
  .factstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1px;row-gap:22px}
  .factstrip .fact:nth-child(odd){border-left:none;padding-left:0}
  .factstrip .fact:nth-child(even){border-left:1px solid var(--water-400);padding-left:24px}
  ol.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media(max-width:900px){
  section.hero{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:56px}
  .hero-figure{order:2}
  .grid{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .flow-cols{grid-template-columns:1fr}
  .law-list{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .site-header,.hero,.page-hero,.factstrip,section.cta{padding-left:20px;padding-right:20px}
  header.site-header{flex-direction:column;align-items:stretch;gap:6px;padding-top:14px;padding-bottom:16px}
  .brand{justify-content:flex-start}
  nav.primary{
    gap:0 20px;justify-content:flex-start;
    border-top:1px solid var(--water-600);padding-top:6px;margin-top:6px;
  }
  nav.primary a,nav.primary details.nav-drop summary{font-size:15px}
  nav.primary a.nav-cta{width:100%;margin-top:10px;justify-content:center}
  nav.primary details.nav-drop{width:100%}
  nav.primary .nav-drop-menu{position:static;box-shadow:none;margin:6px 0 4px;width:100%}
  section.hero{padding-top:34px;padding-bottom:44px}
  .hero .lede{font-size:17px}
  .hero .cta-row{gap:12px}
  .hero .cta-row .btn,.hero .cta-row > div{width:100%}
  .btn{width:100%;min-height:52px;font-size:16px}
  section.block,section.pricing{padding:52px 0}
  .supporting{font-size:16.5px}
  .factstrip{grid-template-columns:1fr;row-gap:18px;padding-top:22px;padding-bottom:22px}
  .factstrip .fact,.factstrip .fact + .fact{border-left:none;padding-left:0}
  .factstrip .fact + .fact{border-top:1px solid var(--water-400);padding-top:16px}
  .factstrip b{font-size:20px}
  ol.steps{grid-template-columns:1fr;gap:26px}
  form.demo{padding:22px}
  form.demo .two{grid-template-columns:1fr}
  section.cta{padding-top:52px;padding-bottom:56px}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
  .cmp-scroll{border-radius:10px}
  table.cmp{font-size:14px;min-width:720px}
  /* 44px tap targets for every standalone link (the rider is one-handed,
     outdoors, often with gloves). Links inside running prose keep their
     inline flow - WCAG 2.5.8 exempts those. */
  .brand{min-height:44px;align-items:center}
  .card p a,.other-comparisons a,.secondary-cta a,footer a,p > a:only-child{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .other-comparisons{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .other-comparisons strong{margin-bottom:4px}
  footer nav{gap:0 24px}
}
@media(max-width:420px){
  .hero h1{font-size:30px}
  .tier .price{font-size:42px}
  .badge{right:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ===========================================================================
   SUBPAGE COMPONENTS — the 13 pages other than the homepage.
   Same tokens, same bands; these are the components the homepage does not use.
   =========================================================================== */

/* Subpage hero: the same deep-water band as the homepage, single column. */
section.page-hero{background:var(--water-700);padding-top:56px;padding-bottom:62px}
section.page-hero .eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--water-300);margin-bottom:16px;
}
section.page-hero h1{
  font-size:clamp(30px,3.8vw,48px);font-weight:700;color:#fff;max-width:900px;text-wrap:pretty;
}
section.page-hero .lede{margin-top:18px;max-width:760px;font-size:19px;line-height:1.62;color:var(--water-200)}
section.page-hero + section.block{border-top:none}

.narrow{max-width:720px}

/* Product screenshots on the feature pages. */
figure.shot{margin:32px 0 0}
figure.shot img,.shots-2 img,.img-two img{
  display:block;width:100%;height:auto;
  border:1px solid var(--paper-300);border-radius:var(--radius);background:var(--paper-100);
}
.shots-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:8px 0 0}
.img-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}

ul.points{margin:0 0 16px;padding-left:22px;font-size:16.5px;line-height:1.62;color:var(--paper-600)}
ul.points li{margin-bottom:8px}
ul.points li::marker{color:var(--water-400)}

/* Curtailment / schematic status bands. These carry the system's REAL status
   semantics, so the colours are not free choices: sage = ok, gold = near the
   limit (gold is the live/at-risk register), rust = over, paper = idle. */
.bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 0}
.band{
  background:#fff;border:1px solid var(--paper-300);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-card);border-top:5px solid var(--paper-300);
}
.band b{display:block;font-family:"Inter Tight",sans-serif;font-size:18px;font-weight:700;margin-bottom:6px}
.band.ok{border-top-color:var(--sage-500)}    .band.ok b{color:var(--sage-700)}
.band.near{border-top-color:var(--gold-500)}  .band.near b{color:var(--gold-700)}
.band.over{border-top-color:var(--rust-500)}  .band.over b{color:var(--rust-500)}
.band.idle{border-top-color:var(--paper-400)} .band.idle b{color:var(--paper-600)}

/* About page. */
.founder-card{
  background:#fff;border:1px solid var(--paper-300);border-left:5px solid var(--water-500);
  border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px;margin-top:8px;box-shadow:var(--shadow-card);
}
.founder-card b{color:var(--paper-900);font-weight:700}
.contact-line{font-size:16px;color:var(--paper-600)}
ul.stack{list-style:none;margin:0;padding:0;font-size:16px;color:var(--paper-600)}
ul.stack li{padding:9px 0;border-bottom:1px solid var(--paper-200)}
ul.stack li:last-child{border-bottom:none}

/* Mapping page. */
ul.basemap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
ul.basemap-list li{background:#fff;border:1px solid var(--paper-300);border-radius:10px;padding:14px 16px;font-size:15.5px;color:var(--paper-600)}
ul.basemap-list li b{color:var(--paper-900);font-weight:700}
.callout{
  background:var(--water-50);border:1px solid var(--water-100);border-left:5px solid var(--water-500);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:24px 0 0;
  font-size:16.5px;line-height:1.62;color:var(--paper-700);
}
.callout b{color:var(--paper-900);font-weight:700}
section.cta-footer{padding:64px 0;text-align:center;border-top:1px solid var(--paper-300)}
section.cta-footer .btn{width:auto}

/* Comparison pages. */
.closing-note{padding:28px 0 0;font-size:15px;line-height:1.62;color:var(--paper-600);max-width:760px}
.last-checked{
  font-size:14px;line-height:1.55;color:var(--paper-600);margin:22px 0 0;padding:16px 18px;
  background:var(--paper-100);border:1px solid var(--paper-300);border-radius:var(--radius);
}
.last-checked b{color:var(--paper-900);font-weight:700}

/* Privacy / terms. */
.updated{font-size:14px;color:var(--paper-600);margin:0 0 28px}

@media(max-width:900px){
  .bands{grid-template-columns:1fr}
  .shots-2,.img-two{grid-template-columns:1fr}
  ul.basemap-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  section.page-hero{padding-top:36px;padding-bottom:42px}
  section.page-hero .lede{font-size:17px}
  .callout{padding:18px 20px;font-size:16px}
  section.cta-footer .btn{width:100%}
}