/* ============================================================
   BDEVY — home-service growth & automation
   Editorial + SaaS product UI. Navy / lime / white.
   ============================================================ */

/* ---------- Brand tokens ---------- */
:root {
  --navy:  #07111F;
  --lime:  #B7F34A;
  --white: #F5F7FA;
  --slate: #94A3B8;
  --card:  #0D1A2B;
  --border:#1E3045;

  --lime-ink: #0A1A00;   /* text on lime */
  --ink-2:    #16283C;   /* deep navy tint for light sections */

  /* Ubuntu throughout, self-hosted (see fonts.css). One family with real
     character rather than three faces, none of which were distinctive. Its
     humanist shapes and open apertures hold up at small sizes, which matters
     on a page that is mostly dense text and tables.

     It has no width axis, so nothing here uses font-stretch, and its heaviest
     weight is 700. Ubuntu Mono is metrically its sibling, so figures line up
     with the prose around them. */
  --font-sans: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1200px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --sp-section: clamp(4.5rem, 9vw, 8rem);

  /* Elevation. Real depth needs an offset and a soft blur, never a halo, so
     both steps push the shadow down and spread it wide at low opacity. */
  --elev-1:
    0 1px 2px rgba(2, 8, 18, .28),
    0 3px 8px -2px rgba(2, 8, 18, .3),
    0 8px 22px -8px rgba(2, 8, 18, .32);
  --elev-2:
    0 1px 2px rgba(2, 8, 18, .3),
    0 4px 10px -3px rgba(2, 8, 18, .34),
    0 12px 28px -10px rgba(2, 8, 18, .4),
    0 28px 60px -24px rgba(2, 8, 18, .5);
  --elev-light:
    0 1px 2px rgba(16, 34, 56, .06),
    0 4px 10px -3px rgba(16, 34, 56, .08),
    0 12px 28px -10px rgba(16, 34, 56, .12),
    0 28px 56px -24px rgba(16, 34, 56, .16);
}

/* Surface themes — sections flip between them for editorial contrast */
.theme-dark {
  --bg: var(--navy);
  --fg: var(--white);
  --muted: var(--slate);
  --surface: var(--card);
  --surface-2: #0A1524;
  --line: var(--border);
  --accent: var(--lime);
  --accent-ink: var(--lime-ink);
  --sel-bg: var(--lime);
  --sel-fg: var(--lime-ink);
  color-scheme: dark;
}
.theme-light {
  --bg: var(--white);
  --fg: var(--navy);
  --muted: #4F6076;      /* was #55677D — 4.49:1 on the light band, just under AA */
  --surface: #FFFFFF;
  --surface-2: #EDF1F6;
  --line: #D9E1EA;
  --accent: #477200;          /* lime is illegible on white; this clears AA on both light surfaces */
  --accent-ink: var(--navy);
  --sel-bg: var(--navy);
  --sel-fg: var(--lime);
  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  /* The header is sticky at 74px. Without this every in-page anchor — tool
     tables of contents, "skip to content", FAQ deep links — lands underneath
     it and the reader sees the wrong heading. */
  scroll-padding-top: 6rem;
  scrollbar-color: var(--border) var(--navy);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--navy);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Browser chrome we did not draw still belongs to the design: selection, the
   caret, and form control accents all ship with defaults that match nothing. */
::selection { background: var(--sel-bg, var(--lime)); color: var(--sel-fg, var(--lime-ink)); }
input, textarea, select { caret-color: var(--accent, var(--lime)); }
input, textarea, select, progress { accent-color: var(--lime); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--maxw)); margin-inline: auto; }
.band { background: var(--bg); color: var(--fg); padding-block: var(--sp-section); position: relative; }
.band--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.band--flush-top { padding-top: 0; }
.hairline { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: 1rem; }

/* Grid and flex children default to min-width:auto, which lets an intrinsically
   wide child (a number input, a long affix) push a track past the viewport.
   Reset it everywhere we lay things out in tracks. */
.grid > *, .split > *, .calc > *, .demo > *, .formgrid > *, .field, .inputwrap { min-width: 0; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 .55em; font-weight: 700; letter-spacing: -.028em; line-height: 1.08;
  /* Stops the one-word last line that a fluid display size produces at some
     viewport widths. */
  text-wrap: balance;
}
.display { font-size: clamp(2.5rem, 6.4vw, 4.5rem); letter-spacing: -.04em; line-height: 1.0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.02em; }
h4 { font-size: 1rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1rem; color: var(--muted); text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--muted); max-width: 40ch; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.fg { color: var(--fg); }
.accent { color: var(--accent); }
.mono { font-family: var(--font-mono); }
strong, b { color: var(--fg); font-weight: 700; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { font-size: 1.05rem; margin-bottom: 0; }
.center { text-align: center; margin-inline: auto; }

/* Editorial numbering */
.num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: 999px;
  font-size: .96rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: transform .16s ease, filter .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: none; }
.theme-light .btn { --btn-bg: var(--navy); --btn-fg: var(--white); }
.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--lime-ink); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--fg); filter: none; }
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.btn-row--center { justify-content: center; }

.textlink {
  color: var(--fg); font-weight: 650; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: border-color .16s, color .16s;
}
.textlink:hover { border-color: var(--accent); color: var(--accent); }
.textlink .arw { transition: transform .16s; }
.textlink:hover .arw { transform: translateX(3px); }

/* ---------- Tags / pills ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.tag--live { color: var(--fg); }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tag .dot--pulse { animation: pulse 2s ease-in-out infinite; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.hdr.is-stuck { border-bottom-color: var(--border); background: color-mix(in srgb, var(--navy) 96%, transparent); }
.hdr__in { display: flex; align-items: center; gap: 1.5rem; height: 74px; }

.brand { display: inline-flex; align-items: baseline; gap: .1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.045em; color: var(--white); }
.brand .b-dot { color: var(--lime); }

.mainnav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.mainnav > * { position: relative; }
.navlink {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem; border-radius: 8px;
  font-size: .93rem; font-weight: 550; color: var(--slate);
  transition: color .16s, background .16s;
  background: none; border: 0; cursor: pointer;
}
.navlink:hover, .navlink[aria-expanded="true"] { color: var(--white); background: rgba(255,255,255,.05); }
.navlink.is-active { color: var(--white); }
.navlink.is-active::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
  height: 2px; background: var(--lime); border-radius: 2px;
}
.navlink .chev { width: 9px; height: 9px; opacity: .7; transition: transform .18s; }
.navlink[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + .5rem); left: 0;
  /* see .dropdown::before below — bridges the gap to the trigger */
  min-width: 320px; padding: .5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
  display: none;
}
.dropdown.is-open { display: block; }
/* Without this bridge the pointer crosses a dead 8px gap on the way to the
   menu, leaving :hover and closing it before it can be reached. */
.dropdown::before {
  content: ""; position: absolute;
  top: -.6rem; left: 0; right: 0; height: .6rem;
}

/* Desktop opens on hover and keyboard focus in CSS, so it cannot fight the
   JS click toggle (which is what mobile and keyboard users need). */
@media (min-width: 1001px) {
  .navitem:hover > .dropdown,
  .navitem:focus-within > .dropdown { display: block; }
  .navitem:hover > .navlink,
  .navitem:focus-within > .navlink { color: var(--white); background: rgba(255,255,255,.05); }
  .navitem:hover > .navlink .chev,
  .navitem:focus-within > .navlink .chev { transform: rotate(180deg); }
}
.dropdown a { display: block; padding: .7rem .8rem; border-radius: var(--r-sm); transition: background .14s; }
.dropdown a:hover { background: rgba(183,243,74,.07); }
.dropdown strong { display: block; font-size: .93rem; font-weight: 650; color: var(--white); }
.dropdown span { display: block; font-size: .82rem; color: var(--slate); line-height: 1.4; margin-top: .1rem; }

.hdr__cta { display: flex; align-items: center; gap: .6rem; }
/* The in-nav CTA is the mobile one; the header CTA is the desktop one.
   Exactly one is visible at any width. */
.mainnav > .btn { display: none; }
.navtoggle {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after {
  display: block; width: 18px; height: 2px; background: var(--white); border-radius: 2px;
}
.navtoggle .bars { position: relative; }
.navtoggle .bars::before, .navtoggle .bars::after { content: ""; position: absolute; left: 0; transition: transform .2s; }
.navtoggle .bars::before { top: -6px; }
.navtoggle .bars::after { top: 6px; }
.navtoggle[aria-expanded="true"] .bars { background: transparent; }
.navtoggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero .display { margin-bottom: 1.4rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.hero__meta div { min-width: 8rem; }
.hero__meta b { display: block; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 1.35rem; color: var(--fg); letter-spacing: -.02em; }
.hero__meta span { font-size: .82rem; color: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  transition: border-color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}
.card--link:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
}
.theme-light .card--link:hover { box-shadow: var(--elev-light); }
.card h3 { margin-bottom: .45rem; }
.admin h3, .admin h4, .toolcard h4, .crm__row b { font-family: var(--font-sans); }
.card p { font-size: .95rem; margin-bottom: 0; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.card__foot { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

.ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--lime) 14%, transparent);
  color: var(--lime);
  border: 1px solid color-mix(in srgb, var(--lime) 26%, transparent);
}
.theme-light .ico { background: color-mix(in srgb, var(--lime) 30%, transparent); color: var(--ink-2); border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.ico svg { width: 20px; height: 20px; }
/* When the icon sits directly above a heading it needs breathing room. Scoped
   to direct children so icons inside .card__top / .flow__node (laid out in a
   row, with their own spacing) are untouched. */
.card > .ico { margin-bottom: 1.15rem; }
.empty > .ico { margin: 0 auto 1.15rem; }

/* Bullet lists */
.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; color: var(--muted); font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent);
}
.ticks--lg li { font-size: 1rem; margin-bottom: .8rem; }

/* ---------- Stat / data ---------- */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.statgrid > div { padding: 1.5rem; border-right: 1px solid var(--line); background: var(--surface); }
.statgrid > div:last-child { border-right: 0; }
.statgrid b { display: block; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; color: var(--fg); }
.statgrid span { font-size: .84rem; color: var(--muted); }

/* ---------- Problem strip (missed call → lost job) ---------- */
.leak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.leak__step { background: var(--surface); padding: 1.5rem 1.35rem; position: relative; }
.leak__step .num { display: block; margin-bottom: .8rem; }
.leak__step h4 { margin-bottom: .35rem; }
.leak__step p { font-size: .9rem; margin: 0; }
.leak__step--bad { background: color-mix(in srgb, #FF5A5A 8%, var(--surface)); }
.leak__step--bad h4 { color: #FF8080; }
.theme-light .leak__step--bad { background: color-mix(in srgb, #FF5A5A 9%, var(--surface)); }
.theme-light .leak__step--bad h4 { color: #C22B2B; }

/* ---------- Flow / pipeline ---------- */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: .5rem; }
.flow__node {
  flex: 1 1 0; min-width: 150px;
  border: 1px solid var(--line); background: var(--surface);
  padding: 1.15rem 1rem; text-align: center;
  position: relative;
}
.flow__node:first-child { border-radius: var(--r) 0 0 var(--r); }
.flow__node:last-child { border-radius: 0 var(--r) var(--r) 0; }
.flow__node + .flow__node { border-left: 0; }
.flow__node .ico { margin: 0 auto .7rem; width: 36px; height: 36px; }
.flow__node b { display: block; font-size: .93rem; color: var(--fg); }
.flow__node span { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.flow__rail { position: relative; height: 2px; background: var(--line); margin: 1.25rem 0 0; border-radius: 2px; overflow: hidden; }
.flow__rail i { position: absolute; top: 0; left: 0; height: 100%; width: 22%; background: linear-gradient(90deg, transparent, var(--lime), transparent); animation: rail 3.4s linear infinite; }
@keyframes rail { from { transform: translateX(-120%); } to { transform: translateX(560%); } }

/* ---------- Demo (simulated SMS) ---------- */
.demo { display: grid; grid-template-columns: 340px 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.phone {
  background: var(--card); border: 1px solid var(--border); border-radius: 26px;
  padding: 1rem; box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.phone__bar { display: flex; align-items: center; justify-content: space-between; padding: .3rem .5rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .9rem; }
.phone__bar b { font-size: .88rem; color: var(--white); }
.phone__bar span { font-family: var(--font-mono); font-size: .7rem; color: var(--slate); }
.thread { display: flex; flex-direction: column; gap: .55rem; min-height: 320px; }
.msg { max-width: 84%; padding: .65rem .85rem; border-radius: 14px; font-size: .88rem; line-height: 1.45; animation: pop .28s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg--sys { align-self: center; max-width: 100%; text-align: center; background: transparent; color: var(--slate); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem 0; }
.msg--out { align-self: flex-start; background: #17283B; color: var(--white); border-bottom-left-radius: 5px; }
.msg--in { align-self: flex-end; background: var(--lime); color: var(--lime-ink); border-bottom-right-radius: 5px; font-weight: 550; }
.msg--typing { display: inline-flex; gap: 4px; align-items: center; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); animation: blink 1.2s infinite; }
.msg--typing i:nth-child(2) { animation-delay: .2s; }
.msg--typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.replies { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.reply {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: .45rem .9rem; font-size: .82rem; color: var(--white); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.reply:hover { border-color: var(--lime); background: rgba(183,243,74,.08); }
.demo__side .card + .card { margin-top: 1rem; }
.crm { font-family: var(--font-mono); font-size: .82rem; }
.crm__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.crm__row:last-child { border-bottom: 0; }
.crm__row span { color: var(--muted); }
.crm__row b { color: var(--fg); font-weight: 600; text-align: right; }
.crm__row b.pending { color: var(--muted); font-weight: 400; }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.calc__inputs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.35rem, 2.5vw, 2rem); }
.calc__results {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.35rem, 2.5vw, 2rem); position: sticky; top: 100px;
}
.theme-dark .calc__results { border-color: color-mix(in srgb, var(--lime) 35%, var(--border)); }

.field { margin-bottom: 1.15rem; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: .9rem; font-weight: 650; color: var(--fg); margin-bottom: .4rem; }
.field .help { display: block; font-size: .8rem; color: var(--muted); margin-top: .35rem; line-height: 1.45; }
.inputwrap { position: relative; display: flex; align-items: stretch; }
.inputwrap .affix {
  display: grid; place-items: center; padding-inline: .85rem;
  flex: 0 0 auto; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .88rem; color: var(--muted);
}
.inputwrap .affix--pre { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.inputwrap .affix--post { border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.inputwrap input, .inputwrap select {
  flex: 1 1 0; min-width: 0; width: 100%;
  padding: .75rem .9rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 1rem; color: var(--fg);
  transition: border-color .15s, box-shadow .15s;
}
.inputwrap .affix--pre + input,
.inputwrap .affix--pre + select { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.inputwrap input:has(+ .affix--post) { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.inputwrap input:focus, .inputwrap select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[type="range"] { padding: 0; background: transparent; border: 0; accent-color: var(--lime); width: 100%; }

.result { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.result:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.result__label { font-size: .88rem; color: var(--muted); display: block; margin-bottom: .2rem; }
.result__value { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 600; letter-spacing: -.03em; color: var(--fg); line-height: 1.1; }
.result--primary .result__value { color: var(--accent); font-size: clamp(2rem, 5vw, 3rem); }
.theme-dark .result--primary .result__value { text-shadow: 0 0 40px rgba(183,243,74,.25); }
.result__note { font-size: .82rem; color: var(--muted); margin-top: .3rem; }

.insight {
  margin-top: 1.5rem; padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--r-sm);
  font-size: .96rem; color: var(--fg); line-height: 1.5;
}
.insight strong { color: var(--accent); }
.theme-light .insight strong { color: var(--navy); background: var(--lime); padding: 0 .25rem; border-radius: 3px; }

.assumption {
  font-size: .8rem; color: var(--muted); font-style: italic;
  border-left: 2px solid var(--line); padding-left: .8rem; margin-top: 1.25rem;
}

/* ---------- Tool index ---------- */
.toolcat + .toolcat { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.toolcat__head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: .9rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.toolcat__head h3 { margin: 0; }
.toolcat__head span { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin-left: auto; }
.toolcard { display: flex; flex-direction: column; height: 100%; }
.toolcard h4 { font-size: 1.02rem; margin-bottom: .4rem; }
.toolcard p { font-size: .89rem; flex: 1; }
.toolcard .textlink { margin-top: 1rem; align-self: flex-start; font-size: .87rem; }

/* ---------- Forms (audit / contact) ---------- */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.formgrid .full { grid-column: 1 / -1; }
.formgrid .field { margin-bottom: 0; }
textarea {
  width: 100%; min-height: 130px; resize: vertical;
  padding: .75rem .9rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: .97rem; color: var(--fg);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
select option { background: var(--card); color: var(--white); }
.theme-light select option { background: #fff; color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
.formnote { font-size: .82rem; color: var(--muted); margin-top: .9rem; }
.formstatus { display: none; margin-top: 1.1rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .93rem; }
.formstatus.is-shown { display: block; }
.formstatus.is-ok { background: color-mix(in srgb, var(--lime) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 42%, transparent); color: var(--fg); }
.formstatus.is-err { background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.4); color: #FF9A9A; }
.theme-light .formstatus.is-err { color: #B31E1E; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 650; font-size: 1.02rem; color: var(--fg);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; color: var(--accent); flex: none; }

.faq details p { margin: .85rem 0 0; font-size: .96rem; max-width: 62ch; }

/* ---------- CTA band ---------- */
.cta {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface);
  position: relative; overflow: hidden;
}
.cta--lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.cta--lime h2, .cta--lime p, .cta--lime strong { color: var(--lime-ink); }
.cta--lime p { opacity: .78; }
.cta--lime .btn { --btn-bg: var(--navy); --btn-fg: var(--white); border-color: var(--navy); }
.cta--lime .btn--ghost { --btn-bg: transparent; --btn-fg: var(--lime-ink); border-color: rgba(10,26,0,.35); }

/* ---------- Article / prose ---------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 2.75rem; }
.prose h3 { font-size: 1.12rem; margin-top: 1.9rem; }
.prose p, .prose li { font-size: 1.02rem; line-height: 1.68; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--muted); margin-bottom: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 1.8rem 0; padding: 1.1rem 1.4rem;
  /* A 1px rule, not the 3px accent slab — the indent and the surface tint
     already separate the quote, and the thick colored bar is the single most
     recognizable generic-UI tell. */
  border-left: 1px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; color: var(--fg); }
.prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.updated { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.toc { border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.5rem; margin: 2rem 0; background: var(--surface); }
.toc h4 { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.toc ol { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.toc li { margin-bottom: .3rem; }
.toc a { color: var(--fg); }
.toc a:hover { color: var(--accent); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .45; }

/* ---------- Empty state ---------- */
.empty {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center;
}
.empty h3 { margin-bottom: .5rem; }
.empty p { margin-inline: auto; max-width: 44ch; }

/* ---------- Footer ---------- */
.ftr { background: var(--navy); border-top: 1px solid var(--border); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; color: var(--white); }
.ftr__grid { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
.ftr h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-bottom: 1.1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: .55rem; }
.ftr a { font-size: .9rem; color: var(--slate); }
.ftr a:hover { color: var(--lime); }
.ftr p { font-size: .9rem; color: var(--slate); }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  font-size: .84rem; color: var(--slate);
}
.ftr__bottom a { font-size: .84rem; }

/* ---------- Reveal ---------- */
.js-reveal .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .rv.is-in { opacity: 1; transform: none; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lime); color: var(--lime-ink); padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }
/* The ring was hardcoded lime, which all but vanishes on the light bands and
   on the lime CTA panel. Ring from the theme accent and back it with a
   contrasting halo so it survives every surface the site actually uses. */
:focus-visible {
  outline: 2px solid var(--accent, var(--lime));
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg, var(--navy)) 85%, transparent);
}
.cta--lime :focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 4px rgba(183, 243, 74, .9); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .demo { grid-template-columns: 1fr; }
  .phone { max-width: 380px; }
  .ftr__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 920px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .statgrid > div:nth-child(2n) { border-right: 0; }
  .statgrid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .leak { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc__results { position: static; }
}
/* The eight-item desktop nav plus the CTA needs 959px of viewport; below that
   it overflowed the header horizontally. The hand-off to the mobile menu has
   to happen above that number, not at the 860px it used to use. */
@media (max-width: 1000px) {
  /* .mainnav goes position:fixed here, which takes it out of the flow and
     leaves .brand and .hdr__cta as the only in-flow children — so the auto
     margin below has nothing to push against and the toggle ends up beside
     the wordmark. Push the two ends apart from the container instead. */
  .hdr__in { justify-content: space-between; }
  .navtoggle { display: flex; margin-left: auto; }
  .hdr__cta .btn { display: none; }
  .mainnav {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 1rem var(--gut) 2rem;
    background: var(--navy); border-bottom: 1px solid var(--border);
    max-height: calc(100dvh - 74px); overflow-y: auto;
    display: none;
  }
  .mainnav.is-open { display: flex; }
  .navlink { width: 100%; justify-content: space-between; padding: .85rem 0; font-size: 1.02rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .navlink:hover, .navlink[aria-expanded="true"] { background: none; }
  .navlink.is-active::after { display: none; }
  .navlink.is-active { color: var(--lime); }
  .dropdown { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: .35rem 0 .75rem; }
  .dropdown a { padding: .55rem 0 .55rem 1rem; border-left: 1px solid var(--border); border-radius: 0; }
  .dropdown a:hover { background: none; }
  .mainnav > .btn { display: flex; margin-top: 1.25rem; }
  .dropdown::before { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .g2, .g3, .g4, .formgrid { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: 1fr; }
  .statgrid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .statgrid > div:last-child { border-bottom: 0; }
  .leak { grid-template-columns: 1fr; }
  .flow { display: grid; grid-template-columns: 1fr; }
  .flow__node { border-radius: 0 !important; border-left: 1px solid var(--line) !important; border-top: 0; }
  .flow__node:first-child { border-radius: var(--r) var(--r) 0 0 !important; border-top: 1px solid var(--line); }
  .flow__node:last-child { border-radius: 0 0 var(--r) var(--r) !important; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__bottom { flex-direction: column; text-align: center; }
  .toolcat__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .toolcat__head span { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-reveal .rv { opacity: 1; transform: none; }
}

/* ---------- Utilities (no inline styles — CSP forbids them) ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.75rem; }
.ftr .btn { margin-top: .35rem; }
.nowrap { white-space: nowrap; }
.tar { text-align: right; }

/* ---------- Tool index: search + category chips ---------- */
.toolsearch { max-width: 34rem; margin-bottom: 1.5rem; }
.toolsearch .inputwrap input { font-family: var(--font-sans); }
.embed__label {
  display: block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .85rem; color: var(--muted); transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--accent); color: var(--fg); }
.chip span { font-family: var(--font-mono); font-size: .74rem; opacity: .7; }
.toolcat[hidden] { display: none; }
.toolcard[hidden] { display: none; }

/* ---------- Reference tables ---------- */
.tablewrap { overflow-x: auto; margin-top: 1rem; }
.reftable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.reftable th, .reftable td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.reftable th {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.reftable td { color: var(--muted); }
.reftable td:last-child { color: var(--fg); font-family: var(--font-mono); }

/* ---------- Formula block ---------- */
.formula {
  font-family: var(--font-mono); font-size: .92rem; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .9rem 1.1rem; color: var(--fg);
  overflow-x: auto; margin-bottom: 1rem;
}

/* ---------- Embed code box ---------- */
.embed__code {
  width: 100%; min-height: 7rem; resize: vertical;
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .8rem .9rem; color: var(--fg);
}
.copied { color: var(--accent); font-size: .85rem; margin-left: .6rem; }

/* ---------- Embedded calculator page ---------- */
.embed-body {
  background: var(--navy); color: var(--white);
  padding: 1rem; margin: 0; min-height: 100vh;
}
.embed { max-width: 760px; margin-inline: auto; }
.embed__head { margin-bottom: 1rem; }
.embed__head h1 { font-size: 1.15rem; margin: 0; letter-spacing: -.02em; }
.calc--embed { grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc--embed .calc__inputs,
.calc--embed .calc__results { padding: 1rem; }
.calc--embed .field { margin-bottom: .8rem; }
.calc--embed .field > label { font-size: .82rem; }
.calc--embed .help { display: none; }
.calc--embed .inputwrap input,
.calc--embed .inputwrap select { padding: .55rem .7rem; font-size: .9rem; }
.calc--embed .result { padding-top: .7rem; margin-top: .7rem; }
.calc--embed .result__value { font-size: 1.25rem; }
.calc--embed .result--primary .result__value { font-size: 1.75rem; }
.calc--embed .insight { font-size: .85rem; padding: .8rem .9rem; margin-top: 1rem; }
.embed__foot {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border);
  text-align: right; font-size: .85rem;
}
.embed__foot a { color: var(--slate); display: inline-flex; align-items: center; gap: .4rem; }
.embed__foot a:hover { color: var(--lime); }
.embed__foot strong { color: var(--white); }
@media (max-width: 620px) {
  .calc--embed { grid-template-columns: 1fr; }
}

/* ---------- date/time inputs ---------- */
.inputwrap input[type="date"],
.inputwrap input[type="time"] { color-scheme: dark; }
.theme-light .inputwrap input[type="date"],
.theme-light .inputwrap input[type="time"] { color-scheme: light; }

/* ---------- Admin ---------- */
.admin { background: var(--navy); color: var(--white); min-height: 100vh; }
.admin__login { max-width: 26rem; margin: 10vh auto; padding: 0 var(--gut); }
.admin__login code { font-family: var(--font-mono); font-size: .85em; color: var(--lime); }

.admin__bar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .75rem var(--gut); border-bottom: 1px solid var(--border);
  background: var(--card); position: sticky; top: 0; z-index: 30;
}
.admin__tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.admin__tab {
  background: none; border: 0; cursor: pointer; border-radius: 8px;
  padding: .5rem .85rem; font-size: .92rem; font-weight: 550; color: var(--slate);
}
.admin__tab:hover { color: var(--white); background: rgba(255,255,255,.05); }
.admin__tab.is-active { color: var(--lime-ink); background: var(--lime); }
.admin__bar-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.admin__whoami { font-size: .85rem; color: var(--slate); display: flex; flex-direction: column; line-height: 1.2; }
.admin__whoami em { font-style: normal; font-family: var(--font-mono); font-size: .7rem; opacity: .7; }

.admin__banner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: color-mix(in srgb, var(--lime) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--lime) 35%, transparent);
  padding: .75rem var(--gut); font-size: .92rem;
}

.admin__main { padding: 1.5rem var(--gut) 4rem; }
.admin__view { display: none; }
.admin__view.is-active { display: block; }
.admin__split { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: start; }
.admin__wide { max-width: 60rem; }

.admin__list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin__items { display: flex; flex-direction: column; gap: .5rem; max-height: 68vh; overflow-y: auto; }
.admin__post {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .8rem .9rem; transition: border-color .15s;
}
.admin__post:hover { border-color: var(--lime); }
.admin__post-title { display: block; font-weight: 650; font-size: .95rem; color: var(--white); margin-bottom: .4rem; }
.admin__post-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--font-mono); font-size: .72rem; color: var(--slate); }
.admin__post-meta .tag { padding: .18rem .5rem; font-size: .64rem; }

.admin__editor { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(1rem, 2vw, 1.75rem); }
.admin__editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.admin__editor-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin textarea { font-family: var(--font-mono); font-size: .88rem; line-height: 1.6; }
.admin__seo { border: 1px solid var(--border); border-radius: var(--r-sm); padding: .85rem 1rem; }
.admin__seo summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.admin__seo .field { margin-top: .9rem; }

.admin__users { display: flex; flex-direction: column; gap: .5rem; }
.admin__user {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .85rem 1rem;
}
.admin__user-meta { display: block; font-size: .8rem; color: var(--slate); margin-top: .2rem; }

.admin__preview {
  position: fixed; inset: 5vh 5vw; z-index: 60; overflow-y: auto;
  background: var(--white); color: var(--navy);
  border-radius: var(--r); padding: 2rem; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
.admin__preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.admin__preview .prose { max-width: 42rem; margin-inline: auto; }
.admin__preview .prose a { color: #2c6b00; }

@media (max-width: 900px) {
  .admin__split { grid-template-columns: 1fr; }
  .admin__items { max-height: none; }
  .admin__bar { gap: .75rem; }
  .admin__bar-actions { width: 100%; }
}

/* ---------- Ecosystem diagram ---------- */
.eco { display: flex; flex-direction: column; }
.eco__stage {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.15rem 1.4rem;
}
.eco__label { display: flex; flex-direction: column; gap: .3rem; }
.eco__label strong {
  font-size: 1.15rem; letter-spacing: -.02em; color: var(--fg);
  text-transform: uppercase; font-weight: 700;
}
a.eco__label:hover strong { color: var(--accent); }
.eco__items { display: flex; flex-wrap: wrap; gap: .5rem; }
.eco__chip {
  font-size: .85rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .8rem; background: var(--surface-2);
}
.eco__link {
  width: 2px; height: 1.6rem; margin-left: 3.4rem;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
}
.eco__link::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--accent); opacity: .55;
}
.eco--compact { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.eco__stage--inline {
  display: inline-flex; align-items: center; gap: .6rem;
  grid-template-columns: none; padding: .6rem 1rem;
}
.eco__stage--inline strong { font-size: .9rem; font-weight: 650; letter-spacing: -.01em; }

@media (max-width: 700px) {
  .eco__stage { grid-template-columns: 1fr; gap: .8rem; }
  .eco__link { margin-left: 1.5rem; }
}

/* ---------- Admin: leads ---------- */
.admin__badge {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding: 0 .35rem; margin-left: .4rem; border-radius: 999px;
  background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
}
.admin__tab.is-active .admin__badge { background: var(--navy); color: var(--lime); }
.admin__lead-preview {
  display: block; margin-top: .35rem; font-size: .8rem; color: var(--slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin__message {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .9rem 1.1rem;
  font-size: .95rem; line-height: 1.6; white-space: pre-wrap;
}
.admin .chip { cursor: pointer; font-family: inherit; }
.admin .chip.is-active { border-color: var(--lime); color: var(--white); }

/* ============================================================
   Platform surfaces
   Modern CSS the site can adopt without changing its look: each
   rule below is inert in browsers that do not support it, so the
   navy/lime editorial world renders identically either way.
   ============================================================ */

/* ---------- Cross-document view transitions ----------
   Every page here is a separate static document. Without this, moving from
   /services to /services/seo is a white flash and a scroll reset. With it the
   shell holds still and the content crossfades, so a 213-page static site
   reads as one continuous product. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .28s cubic-bezier(.2, .7, .3, 1) both; }

  /* The header and footer are the same on every page — carrying them across
     as their own transition roots keeps them from crossfading with the body. */
  .hdr { view-transition-name: site-header; }
  .ftr { view-transition-name: site-footer; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Disclosure ----------
   ::details-content plus interpolate-size can animate these open, but in
   testing the content stayed clipped at zero height once open, which hides
   every FAQ answer on the site. Not worth the risk for the motion; the marker
   carries the state change instead. */
.faq summary::after { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }

/* ---------- Reading surfaces ---------- */
.prose a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose { text-wrap: pretty; }

/* Data that is read as a column, or that updates under the reader's cursor,
   needs digits of equal width or the row jitters on every keystroke. */
.reftable td, .reftable th,
.crm__row b, .crm__row span,
.inputwrap input[type="number"],
.formula, .result__note, .admin__post-meta {
  font-variant-numeric: tabular-nums;
}

/* ---------- Scrollbars ----------
   Firefox reads scrollbar-color on <html>; WebKit needs its own pseudo, and
   both are scoped so the light bands do not get a dark gutter. */
.theme-light { scrollbar-color: #C6D1DC #EDF1F6; }
::-webkit-scrollbar { width: 12px; height: 12px; }
/* Transparent track so the inner scrollers inside light bands — reference
   tables, the pipeline strip — keep their own surface instead of a navy gutter. */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line, var(--border)); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted, #2C4A69); background-clip: padding-box; }

/* ============================================================
   Pipeline — "how it fits together"
   The argument of this section is the handoff between stages,
   not the stages themselves, so the rail and the travelling
   token are the primary objects and the panel explains them.
   ============================================================ */

.pipe { --pipe-dot: 46px; }

.pipe__railwrap { position: relative; }

/* The rail the token runs along. Sits behind the nodes, vertically centred
   on the dot row. */
.pipe__line {
  position: absolute;
  top: calc(var(--pipe-dot) / 2);
  left: calc(100% / 10);
  right: calc(100% / 10);
  height: 2px;
  border-radius: 2px;
  /* A continuous signal running the direction of the flow — the one authored
     motion here; panels never move on their own. Animated as a background
     position rather than a translated child, because a child wide enough to
     read would overflow this 2px box and widen the page, and clipping it would
     also clip the token's halo. */
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, transparent), transparent)
      0 0 / 18% 100% no-repeat,
    var(--line);
  animation: pipe-run 4.5s linear infinite;
}
@keyframes pipe-run { from { background-position: -25% 0; } to { background-position: 125% 0; } }

/* The job itself, moving between stages. JS positions it; the eased transition
   is what makes a two-stage jump read as travel rather than a cut. */
.pipe__token {
  position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform .55s cubic-bezier(.65, 0, .2, 1);
  will-change: transform;
}

.pipe__rail {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  list-style: none; margin: 0; padding: 0;
}

.pipe__node {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: 100%; padding: 0 .4rem;
  background: none; border: 0; cursor: pointer; text-align: center;
  color: var(--muted);
  transition: color .18s ease;
}
.pipe__dot {
  display: grid; place-items: center;
  width: var(--pipe-dot); height: var(--pipe-dot); border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}
.pipe__num {
  font-family: var(--font-mono); font-style: normal;
  font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--muted); transition: color .2s ease;
}
.pipe__name {
  font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--fg);
  transition: color .18s ease;
}
.pipe__role { font-size: .8rem; line-height: 1.35; color: var(--muted); }

.pipe__node:hover .pipe__dot { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-2px); }
.pipe__node:hover .pipe__name { color: var(--accent); }

.pipe__node.is-active .pipe__dot {
  background: var(--accent); border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}
.pipe__node.is-active .pipe__num { color: var(--accent-ink); }
/* On the light band --accent is the darkened green, and navy-on-green leaves
   the numeral at 3.3:1. Fill with the actual brand lime and outline it in the
   green so the disc still has a crisp edge against white. */
.theme-light .pipe__node.is-active .pipe__dot { background: var(--lime); border-color: var(--accent); }
.theme-light .pipe__node.is-active .pipe__num { color: var(--lime-ink); }
.pipe__node.is-active .pipe__name { color: var(--fg); }
.pipe__node:focus-visible { outline: none; }
.pipe__node:focus-visible .pipe__dot { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The return path. The fifth stage feeds the first, so the diagram closes
   rather than running off the right edge as a list would.

   It sits in flow BELOW the rail, not absolutely from the rail's own origin —
   positioned there it descended straight through the node labels and dropped
   its opaque centred caption on top of the middle stage's name. Its verticals
   land at the 10%/90% marks, which are the centres of the first and last
   nodes, so it still reads as returning from Grow to Attract. */
.pipe__loop {
  position: relative;
  margin: .9rem calc(100% / 10) 0;
  height: 2.4rem;
  border: 1px dashed var(--line); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  pointer-events: none;
}
.pipe__loop span {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  padding: 0 .7rem; background: var(--bg);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.pipe__loop::before {
  content: ""; position: absolute; left: 0; top: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid var(--line);
  transform: translate(-4px, -1px);
}

/* ---------- Panel ---------- */
.pipe__panels { margin-top: 2.5rem; }
.pipe__panel[hidden] { display: none; }
.pipe__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.pipe__grid > * { min-width: 0; }

.pipe__moment {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.5;
  color: var(--fg); max-width: 40ch; margin-bottom: 1.2rem;
}
.pipe__leak { font-size: .95rem; max-width: 52ch; margin-bottom: 1.4rem; }
.pipe__leak b { color: var(--fg); }

.pipe__handoff { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.pipe__io-label {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.pipe__handoff b { font-size: 1.02rem; font-weight: 650; color: var(--fg); }
.pipe__handoff--out .pipe__io-label { color: var(--accent); }
.pipe__handoff--out .arw { margin-left: .1rem; }
.pipe__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Panels swap on click, so the incoming one gets a short settle rather than a
   hard cut. Direction comes from JS, matching the token's travel. */
.pipe__panel.is-entering .pipe__grid { animation: pipe-in .38s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pipe-in { from { opacity: 0; transform: translateX(var(--pipe-from, 12px)); } }

/* ---------- Narrow ---------- */
@media (max-width: 860px) {
  .pipe { --pipe-dot: 40px; }
  .pipe__railwrap { padding-bottom: 0; }
  .pipe__line, .pipe__loop { display: none; }
  .pipe__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr);
    gap: .5rem; overflow-x: auto; padding-bottom: .75rem;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pipe__rail::-webkit-scrollbar { display: none; }
  .pipe__railitem { scroll-snap-align: center; }
  .pipe__node {
    gap: .4rem; padding: .9rem .6rem;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); height: 100%;
  }
  .pipe__node.is-active { border-color: var(--accent); }
  .pipe__name { font-size: .93rem; }
  .pipe__role { font-size: .74rem; }
  .pipe__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pipe__panels { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pipe__line { animation: none; }
  .pipe__token { transition: none; }
  .pipe__panel.is-entering .pipe__grid { animation: none; }
}

/* Without JS every panel stays open and the rail is a plain labelled list, so
   the argument still reads end to end. */
html:not(.js-reveal) .pipe__panel[hidden] { display: block; }
html:not(.js-reveal) .pipe__rail { pointer-events: none; }
html:not(.js-reveal) .pipe__token { display: none; }

/* ============================================================
   Trade cards — demand curve
   ============================================================ */

.trade {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  transition: border-color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}
.trade__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }

.trade__chart { margin-bottom: 1.15rem; color: var(--accent); }
.curve { width: 100%; height: auto; display: block; }
.curve__base  { opacity: .35; }
.curve__ticks { opacity: .22; }
.curve__peak  { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .25s ease; }
.trade:hover .curve__peak, .trade:focus-visible .curve__peak { opacity: 1; }

.trade__caption {
  display: block; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.trade p { font-size: .95rem; flex: 1; }
.trade__foot { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

.trade:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
}
.theme-light .trade:hover { box-shadow: var(--elev-light); }

/* The curve is the only thing that separates these four cards at a glance, so
   it gets the entrance rather than the card. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .trade .curve__line,
  .js-reveal .trade .curve__area { opacity: 0; transition: opacity .5s ease .15s; }
  .js-reveal .rv.is-in .trade .curve__line,
  .js-reveal .rv.is-in .trade .curve__area { opacity: 1; }
}

/* ============================================================
   Seam — the connective tissue between bands
   A band boundary was a hard navy/white cut with nothing carrying
   across it, which is what made the page read as separate posters
   rather than one document.
   ============================================================ */
/* Descends from the boundary INTO the band rather than straddling it: a
   straddling marker needs a background halo, and half that halo would land on
   the previous band's colour. Reads as a thread arriving from the section
   above, and never has to know what colour that section was. */
.seam {
  --seam-h: clamp(1.9rem, 3.5vw, 2.9rem);
  position: absolute; top: 0; left: 50%;
  width: 1px; height: var(--seam-h); margin-left: -.5px;
  background: linear-gradient(transparent, var(--accent));
  opacity: .55;
  pointer-events: none; z-index: 1;
}
.seam::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  width: 6px; height: 6px; margin-left: -3px; margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Prompt (inline CTA row) ---------- */
.prompt {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.prompt h3 { margin-bottom: .4rem; }
.prompt p { max-width: 52ch; font-size: .95rem; }
.prompt .btn { flex: none; }

/* ============================================================
   Surface texture
   Flat colour fields are what make a page read as a template.
   Two very low-contrast layers give each band an uneven surface:
   a fine grain, and a single-hue wash placed off-centre. Neither
   is a gradient in the decorative sense — there is one hue, and
   its job is to stop the field being perfectly even.
   ============================================================ */

:root {
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.82%22%20numOctaves=%224%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22160%22%20height=%22160%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* Grain sits above the band's own background but below its content. */
.band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  pointer-events: none;
  z-index: 0;
}
.theme-dark::before { opacity: .05; }
.theme-light::before { opacity: .035; }
.band > .wrap { position: relative; z-index: 1; }

/* An off-centre wash so the field is brighter on one side. Anchored away from
   the centre on purpose — a centred glow reads as a spotlight. */
.band::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.theme-dark::after {
  background:
    radial-gradient(70% 55% at 18% 0%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 68%),
    radial-gradient(60% 50% at 92% 100%, rgba(120, 170, 255, .05), transparent 70%);
}
.theme-light::after {
  background:
    radial-gradient(65% 50% at 88% 0%, color-mix(in srgb, var(--lime) 11%, transparent), transparent 70%);
}
.hero::after {
  background:
    radial-gradient(75% 60% at 12% -10%, color-mix(in srgb, var(--lime) 11%, transparent), transparent 66%),
    radial-gradient(55% 45% at 95% 105%, rgba(120, 170, 255, .07), transparent 72%);
}

/* The footer is a flat slab too. */
.ftr { position: relative; }
.ftr::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: .05; pointer-events: none;
}
.ftr > .wrap { position: relative; z-index: 1; }

/* ---------- Article tables and checklists (CMS markdown) ---------- */

/* .reftable is built for short data cells and sets nowrap. Article tables
   carry sentences, so inside prose they wrap and lean on the scroller only
   when they genuinely overflow. */
.prose .reftable th,
.prose .reftable td { white-space: normal; vertical-align: top; }
.prose .reftable th:first-child,
.prose .reftable td:first-child { padding-left: 0; }
.prose .reftable td:last-child { font-family: inherit; }
.prose .tablewrap { margin: 1.6rem 0; }
.reftable .ta-right { text-align: right; }
.reftable .ta-center { text-align: center; }

.checklist { list-style: none; margin: 1.1rem 0 1.4rem; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .42rem 0;
  font-size: 1rem; line-height: 1.55; color: var(--muted);
}
.checklist li + li { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.checklist input[type="checkbox"] {
  flex: none; margin: .28em 0 0;
  width: 1.05em; height: 1.05em;
  accent-color: var(--accent);
  /* Disabled inputs default to a washed-out grey that reads as broken rather
     than as "tick this on paper". */
  opacity: 1; cursor: default;
}
.checklist strong { color: var(--fg); }

/* ---------- Software landing pages ---------- */
.demoband {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}
.demoband h3 { margin-bottom: .3rem; }
.demoband p { max-width: 58ch; }
.demoband code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: .05em .35em; color: var(--fg);
}
.demoband .btn { margin-left: auto; flex: none; }

.chainflow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.chainflow__node { background: var(--surface); padding: 1.1rem 1rem; display: grid; gap: .25rem; align-content: start; }
.chainflow__node strong { font-size: 1rem; letter-spacing: -.02em; color: var(--fg); }
.chainflow__node > span:last-child { font-size: .82rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 980px) {
  .chainflow { grid-template-columns: repeat(3, 1fr); }
  .demoband .btn { margin-left: 0; width: 100%; }
}
@media (max-width: 620px) {
  .chainflow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Admin: typography panel
   ========================================================================== */
.fontpreview { border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.4rem;
  background: var(--white); margin-bottom: 1rem; }
.fontpreview__big { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15;
  margin: 0 0 .6rem; letter-spacing: -.02em; }
.fontpreview__body { font-size: 1rem; line-height: 1.6; margin: 0 0 .7rem; max-width: 56ch; }
.fontpreview__mono { font-size: .95rem; margin: 0; letter-spacing: .01em;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }

.fontbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--lime-50, #f7fee7); border: 1px solid var(--line); margin-bottom: 1rem;
  font-size: .9rem; }
.fontbar[hidden] { display: none; }

.fontgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.fontgrid__col h2 { margin: 0 0 .2rem; }

.fontopt { display: block; padding: .6rem .75rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: .45rem; cursor: pointer; background: var(--white); }
.fontopt:hover { border-color: var(--line-2, #cbd5e1); }
.fontopt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fontopt input { margin-right: .5rem; }
.fontopt__name { font-size: 1.05rem; font-weight: 600; }
.fontopt__note { display: block; font-size: .78rem; color: var(--ink-3, #5b6b7f); margin-top: .15rem;
  padding-left: 1.4rem; }

.fontupload { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; margin-top: .6rem; }
.fontupload__row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.fontupload__field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 11rem; }
.fontupload__field--narrow { flex: 0 1 8rem; }
.fontupload__field span { font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3, #5b6b7f); }

@media (max-width: 640px) {
  .fontupload__row { flex-direction: column; align-items: stretch; }
  .fontupload__field, .fontupload__field--narrow { flex: 1 1 auto; }
}

/* ---- Admin: calculator editor ---- */
.calcpaste { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem;
  margin-bottom: 1.1rem; background: var(--surface-2, #f8fafc); }
.calcpaste > summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.calcpaste textarea { width: 100%; }

.faqrow { display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: .5rem; background: var(--white); }
.faqrow textarea { width: 100%; }
.faqrow .btn { justify-self: start; }

textarea.mono, .admin__form textarea.mono { font-family: var(--font-mono); font-size: .82rem;
  line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

.inputwrap__pre { padding: 0 .1rem 0 .65rem; color: var(--ink-3, #5b6b7f); font-size: .86rem;
  white-space: nowrap; }
[data-calc-sandbox] { width: 0; height: 0; border: 0; position: absolute; visibility: hidden; }