/* ============================================================================
   Sand — marketing site stylesheet.

   Tokens are copied verbatim from sand-webapp/src/styles/sand.css (KILN light
   theme) rather than imported, so this site has zero dependency on the app
   build. If the app's palette changes, re-copy the token block below; nothing
   else in this file hardcodes a colour.

   Site-only additions are grouped under "SITE TOKENS" and are prefixed --s-.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* grounds */
  --bg:#f5ead8;
  --paper:#f9f4ed;
  --surface:#f9f4ed;
  --line:#dcd3c4;
  --line2:#eee7db;
  --hover:#f0e7d8;
  --sel:#ffe1d0;

  /* ink */
  --ink:#201e1d;
  --ink2:#474238;
  --mut:#645c50;          /* muted TEXT — 6.0:1 */
  --mut2:#82796a;         /* decorative only: icons, 16px+ */

  /* accent */
  --accent:#c67139;
  --accent-h:#b2622d;
  --accent-deep:#8c491a;  /* accent-coloured TEXT at body size */
  --btnfg:#fff2eb;

  /* ink surfaces */
  --rail:#2e2b25;
  --rail-fg:#c0b6a5;
  --rail-fg-strong:#f9f4ed;
  --rail-fg-mut:#a19786;
  --rail-line:#474238;

  /* sage — verified / positive only */
  --sage:#728157;
  --sage-bg:#e1eecc;
  --sage-bd:#ccdbb2;
  --sage-tx:#3d472b;

  --track:#dcd3c4;
  --well:#ebddc5;
  --shadow:0 2px 6px rgba(46,43,37,0.06),0 12px 32px rgba(46,43,37,0.14);
  --shadow-card:0 1px 2px rgba(46,43,37,0.10);

  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Caprasimo',Georgia,serif;
  --radius-container:16px;
  --radius-card:12px;
  --radius-control:999px;
  --control-h:38px;

  /* ----- SITE TOKENS ----- */
  --s-max:1280px;          /* content column */
  --s-gutter:24px;
  --s-section:clamp(72px, 9vw, 128px);   /* vertical rhythm between sections */
  --s-header-h:64px;
}

/* On a wide display 1280 still leaves a lot of ground either side, so the
   gutter opens up rather than the column stretching — long measures are harder
   to read, not easier. */
@media (min-width:1500px) {
  :root { --s-max:1400px; --s-gutter:40px; }
}

/* ------------------------------------------------------------------ BASE -- */
*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

body {
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg { display:block; max-width:100%; }
a { color:var(--accent-deep); text-decoration:none; }
a:hover { text-decoration:underline; }

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rail); color:var(--rail-fg-strong);
  padding:12px 20px; border-radius:0 0 12px 0; font-weight:600;
}
.skip:focus { left:0; }

.wrap { width:100%; max-width:var(--s-max); margin:0 auto; padding:0 var(--s-gutter); }

/* Numbers use Figtree tabular figures — Kiln has no mono voice. */
.num { font-variant-numeric:tabular-nums; font-weight:700; }

/* ------------------------------------------------------------------ TYPE -- */
.display {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.02;
  color:var(--ink);
  margin:0;
}

/* text-wrap:balance evens the rag instead of leaving one orphaned word on the
   last line. Caprasimo is wide and heavy, so a hard <br> fights the natural
   break point at every viewport except the one it was authored at — let the
   browser choose and just cap the measure. */
h1.display { font-size:clamp(38px, 5vw, 66px); max-width:15ch; text-wrap:balance; }
h2.display { font-size:clamp(30px, 4.4vw, 46px); line-height:1.06; text-wrap:balance; }
h3 { font-family:var(--font-body); font-size:18px; font-weight:700; margin:0 0 8px; color:var(--ink); }

.eyebrow {
  font-size:11.5px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--mut); margin:0 0 18px;
}
.lede { font-size:clamp(17px, 2vw, 20px); color:var(--ink2); max-width:56ch; margin:20px 0 0; }
.sub  { font-size:16px; color:var(--mut); max-width:60ch; margin:14px 0 0; }

/* ---------------------------------------------------- GRAIN LINE DIVIDER --
   The sieve mesh, reused as a rule. Structural, not decorative: it marks the
   boundary between what the reader has been told and what comes next. */
.grain {
  height:5px;
  background-image:radial-gradient(circle, var(--line) 1.6px, transparent 1.7px);
  background-size:14px 5px;
  background-repeat:repeat-x;
  background-position:center;
  border:0;
  margin:0;
  opacity:0.9;
}

/* --------------------------------------------------------------- BUTTONS -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 26px;
  border-radius:var(--radius-control);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  white-space:nowrap; border:none; cursor:pointer;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover { text-decoration:none; }
.btn-pri { background:var(--accent); color:var(--btnfg); }
.btn-pri:hover { background:var(--accent-h); }
.btn-ghost { background:transparent; color:var(--ink2); box-shadow:inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background:var(--hover); }
.btn-sm { height:var(--control-h); padding:0 20px; font-size:14px; }
.btn-onink { background:var(--accent); color:var(--btnfg); }
.btn-onink:hover { background:var(--accent-h); }

/* ---------------------------------------------------------------- HEADER -- */
.hdr {
  position:sticky; top:0; z-index:50;
  height:var(--s-header-h);
  display:flex; align-items:center;
  background:rgba(245,234,216,0.86);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  transition:box-shadow .18s ease, background .18s ease;
}
.hdr.is-stuck { box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(46,43,37,0.06); }
.hdr .wrap { display:flex; align-items:center; gap:20px; }

.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:17px; }
.brand:hover { text-decoration:none; }
.brand svg { width:26px; height:26px; }
.brand .name { font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:0.02em; }

.nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a.navlink {
  padding:8px 14px; border-radius:var(--radius-control);
  font-size:14.5px; font-weight:500; color:var(--ink2);
}
.nav a.navlink:hover { background:var(--hover); text-decoration:none; }

.navtoggle { display:none; }

/* ------------------------------------------------------------------ HERO -- */
.hero { padding:clamp(56px, 8vw, 104px) 0 0; }
.hero-grid {
  display:grid; grid-template-columns:1fr; gap:clamp(40px, 5vw, 64px);
  align-items:center;
}
@media (min-width:900px) {
  .hero-grid { grid-template-columns:1.05fr 0.95fr; }
}
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---- Module off: layout repairs -------------------------------------------
   Hiding a child of a fixed-column grid leaves a hole rather than reflowing.
   .bento and .stats are auto-fit / span-based and heal themselves; these two
   are not, so they are collapsed explicitly. The class is set on <html> by
   main.js once the site flags arrive. */
.no-enrichment .hero-grid { grid-template-columns:1fr; max-width:760px; }
@media (min-width:820px) {
  .no-enrichment .steps { grid-template-columns:repeat(2,1fr); }
}

/* Both halves of every swapped block ship in the HTML, so before the flags
   arrive the page would show two headlines at once and then drop one. The
   alternates stay hidden until main.js adds .flags-ready.

   Without JS the alternates never appear and the module-on copy stands, which
   is the right default: no answer from the API is not evidence a module is
   switched off. */
[data-module-off] { display:none; }
.flags-ready [data-module-off] { display:revert; }
.hero-note { font-size:13.5px; color:var(--mut); margin:16px 0 0; }

/* ------------------------------------------------------- THE SIEVE (hero) --
   The signature. Unenriched field labels fall through the ring and settle as
   verified ones. These are SCHEMA labels, never values — the site shows which
   fields get filled, it does not invent data to fill them with. */
.sieve {
  position:relative;
  background:var(--paper);
  border-radius:var(--radius-container);
  box-shadow:var(--shadow-card);
  padding:28px 24px 24px;
  overflow:hidden;
}
.sieve-cap {
  font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mut); display:flex; justify-content:space-between; gap:12px;
}
.sieve-stage { position:relative; height:300px; margin-top:14px; }

/* Ring is 140px centred at y=150, so it occupies 80–220 of the 300px stage.
   Every keyframe offset below is derived from those two edges — raw pills fade
   at the centre line (150), graded pills appear clear of the bottom edge (220).
   Change the ring size and the offsets have to move with it. */
.sieve-ring {
  position:absolute; left:50%; top:150px; transform:translate(-50%,-50%);
  width:140px; height:140px; border-radius:50%;
  border:3px solid var(--accent);
  background:
    radial-gradient(circle, var(--sel) 1.7px, transparent 1.8px) center / 17px 17px;
  z-index:1;
}
.sieve-ring::after {
  content:''; position:absolute; inset:-13px; border-radius:50%;
  border:1px dashed var(--line); opacity:0.85;
}

/* top:0 is explicit. With top:auto an absolutely positioned element falls back
   to its static position, which for eight out-of-flow siblings is
   implementation-dependent — not something to animate against. */
.pill {
  position:absolute; left:50%; top:0;
  display:inline-flex; align-items:center; gap:7px;
  height:29px; padding:0 14px; border-radius:var(--radius-control);
  font-size:12.5px; font-weight:600; white-space:nowrap;
  z-index:2;
}
.pill .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.pill-raw    { background:var(--line2); color:var(--mut); box-shadow:inset 0 0 0 1px var(--line); }
.pill-raw .dot { background:var(--mut2); }
.pill-done   { background:var(--sage-bg); color:var(--sage-tx); box-shadow:inset 0 0 0 1px var(--sage-bd); }
.pill-done .dot { background:var(--sage); }

/* Each pill carries --d (delay) and --x (horizontal offset) inline; the timing
   and the travel are shared here.

   The horizontal offset is scaled DOWN to zero as the pill nears the ring, then
   back out below it — a funnel. Holding --x constant through the whole fall
   (the first version) sent the wider pills past the ring's edge instead of
   through its middle, which read as "beside the sieve", not "through" it.

   8s loop with a 2s stagger keeps two pills in the descent and two settled at
   any moment. At 7s/0.9s all four were mid-fall together and the ring vanished
   under a cluster of chips. */
.sieve .pill {
  animation:sift-in 8s cubic-bezier(.5,.05,.35,1) infinite;
  animation-delay:var(--d, 0s);
  opacity:0;
}
@keyframes sift-in {
  0%   { transform:translate(calc(-50% + var(--x,0px)), 0) scale(.94); opacity:0; }
  7%   { opacity:1; }
  26%  { transform:translate(calc(-50% + (var(--x,0px) * 0.5)), 74px) scale(1); opacity:1; }
  41%  { transform:translate(-50%, 124px) scale(.98); opacity:1; }
  50%  { transform:translate(-50%, 146px) scale(.84); opacity:0; }
  100% { transform:translate(calc(-50% + var(--x,0px)), 0) scale(.94); opacity:0; }
}

/* Graded pill: emerges from the ring's centre line, clears the bottom edge at
   220, then fans back out to its own column. Held invisible until the raw one
   has gone so a pair never doubles up. */
.sieve .pill-done { animation-name:sift-out; }
@keyframes sift-out {
  0%   { transform:translate(-50%, 196px) scale(.84); opacity:0; }
  50%  { transform:translate(-50%, 196px) scale(.84); opacity:0; }
  60%  { transform:translate(-50%, 228px) scale(1); opacity:1; }
  76%  { transform:translate(calc(-50% + (var(--x,0px) * 0.6)), 246px) scale(1); opacity:1; }
  92%  { transform:translate(calc(-50% + var(--x,0px)), 262px) scale(1); opacity:1; }
  100% { transform:translate(calc(-50% + var(--x,0px)), 270px) scale(1); opacity:0; }
}

/* Reduced motion: show one pair only, parked either side of the ring. Showing
   all four statically would stack 29px pills at 30px intervals inside a 300px
   stage — they collide and the read is lost. One pair still carries the idea. */
@media (prefers-reduced-motion: reduce) {
  .sieve .pill { animation:none; opacity:1; }
  /* Every pill is a <span>, so :first-of-type would match by tag and never by
     class — .pill-done:first-of-type selects nothing. Count spans instead:
     1 and 2 are the first raw/graded pair, 3 onward are the other three pairs. */
  .sieve .pill:nth-of-type(n+3) { display:none; }
  .sieve .pill-raw  { transform:translate(-50%, 26px); }
  .sieve .pill-done { transform:translate(-50%, 240px); }
}

/* ----------------------------------------------------------- STATS STRIP -- */
.stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:2px; background:var(--line); border-radius:var(--radius-container);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.stat { background:var(--paper); padding:24px 22px; }
.stat .v { font-family:var(--font-display); font-size:34px; line-height:1.05; color:var(--ink); }
.stat .v.empty { color:var(--mut2); }
.stat .k { font-size:13px; color:var(--mut); margin-top:6px; }

/* --------------------------------------------------------------- SECTION -- */
.section { padding:var(--s-section) 0; }
.section-head { max-width:60ch; margin-bottom:clamp(36px, 4.5vw, 56px); }

/* ------------------------------------------------------------ BENTO GRID -- */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.tile {
  grid-column:span 6;
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); padding:26px 24px;
}
@media (min-width:720px) {
  .tile { grid-column:span 3; }
  .tile-wide { grid-column:span 6; }
}
@media (min-width:1000px) {
  .tile { grid-column:span 2; }
  .tile-wide { grid-column:span 3; }
}
.tile p { margin:0; color:var(--mut); font-size:15px; }
.tile .mark {
  width:34px; height:34px; border-radius:11px; margin-bottom:16px;
  background:var(--sel); display:flex; align-items:center; justify-content:center;
  color:var(--accent-deep);
}
.tile .mark svg { width:18px; height:18px; }

/* ----------------------------------------------------------------- STEPS -- */
.steps { display:grid; grid-template-columns:1fr; gap:2px; background:var(--line);
         border-radius:var(--radius-container); overflow:hidden; box-shadow:var(--shadow-card); }
@media (min-width:820px) { .steps { grid-template-columns:repeat(3,1fr); } }
.step { background:var(--paper); padding:30px 26px; }
.step .n {
  font-family:var(--font-display); font-size:15px; color:var(--accent);
  display:block; margin-bottom:14px; letter-spacing:0.06em;
}

/* ----------------------------------------------------------- SCREENSHOTS -- */
.shots { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:820px) { .shots { grid-template-columns:1fr 1fr; } }
.shot {
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.shot img { width:100%; height:auto; }
.shot .cap { padding:16px 20px 20px; }
.shot .cap strong { display:block; font-size:15px; margin-bottom:4px; }
.shot .cap span { font-size:14px; color:var(--mut); }
/* Empty slot styling — visible and obviously unfilled, never a fake mockup. */
.shot .slot {
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:var(--well); color:var(--mut2); font-size:13.5px; text-align:center;
  padding:20px; border-bottom:1px solid var(--line);
}

/* --------------------------------------------------------------- PRICING -- */
/* auto-fit with a max column width rather than a fixed column count: the number
   of cards varies with the site flags, and repeat(4,1fr) left two enabled plans
   stranded in the first two of four columns. Capping the column and centring the
   track keeps any count — two or four — balanced in the middle. */
.tiers {
  display:grid; gap:16px; align-items:start; justify-content:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 320px));
}

/* Billing period switch. Mirrors the signup wizard's control so the two
   surfaces cannot show different numbers for the same plan. */
.billing { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 30px; flex-wrap:wrap; }
.billing .lbl { font-size:14px; color:var(--mut); }
.billing .lbl.on { color:var(--ink); font-weight:600; }
.billing .sw {
  width:46px; height:26px; border-radius:999px; background:var(--line);
  position:relative; flex:0 0 auto; transition:background .15s; cursor:pointer;
  border:none; padding:0;
}
.billing .sw[aria-checked="true"] { background:var(--accent); }
.billing .sw .knob {
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); transition:left .15s;
}
.billing .sw[aria-checked="true"] .knob { left:23px; }
.billing .save {
  font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px;
  background:var(--st-en-bg); color:var(--st-en-tx); box-shadow:inset 0 0 0 1px var(--st-en-bd);
}
.billing .save[hidden] { display:none; }
.tier {
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); padding:30px 26px; display:flex; flex-direction:column;
}
.tier.featured { box-shadow:inset 0 0 0 2px var(--accent), var(--shadow-card); }
.tier .tname { font-family:var(--font-display); font-size:24px; margin-bottom:4px; }
.tier .tfor  { font-size:14px; color:var(--mut); min-height:42px; }
.tier .price { font-size:15px; font-weight:700; color:var(--ink); margin:18px 0 22px; }
.tier ul { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.tier li { display:flex; gap:10px; font-size:14.5px; color:var(--ink2); align-items:flex-start; }
.tier li::before {
  content:''; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--sage); margin-top:8px;
}
.tier .btn { margin-top:auto; width:100%; }
.tier-tag {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent-deep); background:var(--sel);
  padding:4px 10px; border-radius:var(--radius-control); margin-bottom:12px;
}

/* -------------------------------------------------------------- INK BAND -- */
.band {
  background:var(--rail); color:var(--rail-fg-strong);
  border-radius:var(--radius-container);
  padding:clamp(44px, 6vw, 72px) clamp(28px, 5vw, 60px);
}
.band .display { color:var(--rail-fg-strong); }
.band p { color:var(--rail-fg); max-width:52ch; }

/* ---------------------------------------------------------------- FOOTER -- */
.ftr { padding:52px 0 40px; }
.ftr .row { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.ftr .links { display:flex; flex-wrap:wrap; gap:22px; margin-left:auto; }
.ftr a { color:var(--mut); font-size:14.5px; }
.ftr a:hover { color:var(--ink2); }
.ftr .fine { font-size:13px; color:var(--mut2); margin-top:26px; }

/* ------------------------------------------------------- SCROLL REVEAL --- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ------------------------------------------------------------- RESPONSIVE - */
@media (max-width:719px) {
  :root { --s-gutter:20px; }
  .nav .navlink { display:none; }
  .nav .btn { padding:0 16px; }
}

/* ===================================================================
   REBUILD ADDITIONS — new sections added in the full rebuild.
   Every colour below is an existing token; no new palette values.
   =================================================================== */

/* Larger button for hero / band CTAs. */
.btn-lg { height:52px; padding:0 30px; font-size:16px; }

/* Centre a .sub under a section head. */
.sub-center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head.reveal { margin-left:auto; margin-right:auto; }
.section-head { text-align:center; margin-left:auto; margin-right:auto; }
.section-head .lede { margin-left:auto; margin-right:auto; }

/* A section with less air above than the default rhythm (stats under hero). */
.section-tight { padding:clamp(40px,5vw,64px) 0; }

/* Module dots — one per part, reusing the brand colours. */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; vertical-align:middle; }
.dot-base  { background:var(--accent); }
.dot-grain { background:var(--sage); }
.dot-wave  { background:var(--ink2); }
.eyebrow .dot { margin-right:8px; }

/* ---- Hero chips: the three parts as a quick map under the hero CTA ---- */
.hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--radius-control);
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink2);
}
.hero-chip:hover { background:var(--hover); text-decoration:none; }

/* ---- Hero card (enrichment-off fallback for the right column) ---- */
.hero-card {
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); padding:22px 22px 10px;
}
.hc-row { display:flex; align-items:center; justify-content:space-between; }
.hc-head { font-family:var(--font-display); font-size:19px; color:var(--ink); padding-bottom:14px; border-bottom:1px solid var(--line2); margin-bottom:6px; }
.hc-badge { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep); background:var(--sel); padding:3px 9px; border-radius:var(--radius-control); }
.hc-field { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line2); }
.hc-field:last-child { border-bottom:none; }
.hc-field .k { font-size:13.5px; color:var(--mut); }
.hc-field .v { font-size:14.5px; color:var(--ink2); font-weight:600; }
.hc-field .v.empty { color:var(--mut2); font-weight:400; }

/* ---- Module cards: the three parts of Sand ---- */
.modcards { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:820px) { .modcards { grid-template-columns:repeat(3,1fr); } }
.no-enrichment .modcards, .no-outreach .modcards { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.modcard {
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); padding:28px 26px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.modcard h3 { font-family:var(--font-display); font-weight:400; font-size:22px; margin:0 0 10px; }
.modcard p { margin:0 0 18px; color:var(--mut); font-size:15px; }
.modtag {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; padding:4px 11px; border-radius:var(--radius-control);
  margin-bottom:16px;
}
.modtag-base  { color:var(--accent-deep); background:var(--sel); }
.modtag-grain { color:var(--sage-tx); background:var(--sage-bg); box-shadow:inset 0 0 0 1px var(--sage-bd); }
.modtag-wave  { color:var(--rail-fg-strong); background:var(--rail); }
.modlink { margin-top:auto; font-size:14.5px; font-weight:600; color:var(--accent-deep); }

/* ---- Ink section (Grain) — a dark band like the access band ---- */
.section-ink { }
.section-ink > .wrap > .split {
  background:var(--rail); color:var(--rail-fg-strong);
  border-radius:var(--radius-container);
  padding:clamp(36px,5vw,56px);
  display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,48px); align-items:center;
}
@media (min-width:900px) { .section-ink > .wrap > .split { grid-template-columns:1.05fr 0.95fr; } }
.eyebrow-onink { color:var(--rail-fg-mut); }
.split-copy .display { color:var(--rail-fg-strong); }
.lede-onink { font-size:clamp(16px,1.8vw,19px); color:var(--rail-fg); max-width:50ch; margin:18px 0 0; }
.checklist { list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:12px; }
.checklist li { display:flex; gap:11px; font-size:15px; color:var(--rail-fg); align-items:flex-start; }
.checklist li::before {
  content:''; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--sage); margin-top:7px;
}
.split-shot { margin:0; }
.slot-ink {
  aspect-ratio:16/11; display:flex; align-items:center; justify-content:center;
  background:rgba(249,244,237,0.05); color:var(--rail-fg-mut); font-size:13.5px;
  text-align:center; padding:22px; border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px var(--rail-line);
}
.cap-onink { padding:14px 2px 0; }
.cap-onink strong { display:block; font-size:15px; color:var(--rail-fg-strong); margin-bottom:3px; }
.cap-onink span { font-size:14px; color:var(--rail-fg-mut); }

/* ---- Wave flow: four steps with arrows between ---- */
.flow { display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch; }
.flowarrow { display:none; color:var(--mut2); font-size:22px; text-align:center; align-self:center; }
@media (min-width:900px) {
  .flow { grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:10px; }
  .flowarrow { display:block; }
}
.flowstep {
  background:var(--paper); border-radius:var(--radius-container);
  box-shadow:var(--shadow-card); padding:24px 22px;
}
.flowstep .n {
  font-family:var(--font-display); font-size:15px; color:var(--accent);
  display:block; margin-bottom:12px; letter-spacing:0.06em;
}
.flowstep h3 { font-size:17px; }
.flowstep p { margin:0; color:var(--mut); font-size:14px; }

.wave-feats { display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
@media (min-width:820px) { .wave-feats { grid-template-columns:repeat(3,1fr); } }
.wave-feat { padding:22px 20px; border-radius:var(--radius-container); box-shadow:inset 0 0 0 1px var(--line); }
.wave-feat h4 { margin:0 0 8px; font-family:var(--font-body); font-size:15.5px; font-weight:700; color:var(--ink); }
.wave-feat p { margin:0; font-size:14px; color:var(--mut); }

/* ---- Industry chips grid (coverage) ---- */
.chips-grid { display:grid; gap:2px; background:var(--line);
  border-radius:var(--radius-container); overflow:hidden; box-shadow:var(--shadow-card); }
.chips-grid .step { padding:20px 22px; }
.chips-grid .step h3 { margin:0; font-size:15.5px; }

/* ---- FAQ ---- */
.faq { max-width:760px; margin:0 auto; display:grid; gap:2px;
  background:var(--line); border-radius:var(--radius-container);
  overflow:hidden; box-shadow:var(--shadow-card); }
.qa { background:var(--paper); }
.qa summary {
  list-style:none; cursor:pointer; padding:20px 24px;
  font-size:16px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:'+'; font-size:22px; font-weight:400; color:var(--accent); flex:0 0 auto; }
.qa[open] summary::after { content:'−'; }
.qa summary:hover { background:var(--hover); }
.qa p { margin:0; padding:0 24px 22px; color:var(--mut); font-size:15px; max-width:64ch; }

/* ---- Band note under the access CTA ---- */
.band-note { font-size:13.5px; color:var(--rail-fg-mut); margin:16px 0 0; }

/* ===================================================================
   Contact sales dialog — opened by the quote-only tier's button.
   Built in JS on first use (main.js), so these styles stand alone.
   =================================================================== */
.sales-wrap[hidden] { display:none; }
.sales-wrap {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.sales-scrim { position:absolute; inset:0; background:rgba(32,30,29,.46); }
.sales-box {
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--paper); border-radius:18px; padding:28px;
  box-shadow:0 24px 60px rgba(32,30,29,.28);
}
.sales-box h3 { margin:0 0 6px; }
.sales-lede { font-size:14px; color:var(--ink2); line-height:1.6; margin:0 0 18px; }
.sales-box label { display:block; font-size:12.5px; color:var(--mut); margin-bottom:12px; }
.sales-box .opt { opacity:.75; }
.sales-box input, .sales-box select, .sales-box textarea {
  display:block; width:100%; margin-top:5px;
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:0 12px; height:42px;
}
.sales-box textarea { height:auto; padding:10px 12px; line-height:1.55; resize:vertical; }
.sales-box input:focus, .sales-box select:focus, .sales-box textarea:focus {
  outline:none; border-color:var(--accent);
}
.sales-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sales-err {
  font-size:13px; color:#a33a26; background:#fbe6e0;
  border-radius:8px; padding:9px 12px; margin:0 0 12px;
}
.sales-err[hidden], .sales-done[hidden] { display:none; }
.sales-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
.sales-done { text-align:center; }
.sales-done p { font-size:14px; color:var(--ink); margin:0 0 6px; }
@media (max-width:719px) {
  .sales-box { padding:22px; }
  .sales-row { grid-template-columns:1fr; gap:0; }
}