/* ═══════════════════════════════════════════════════════════════════════════
   Aerys Software — marketing site
   ═══════════════════════════════════════════════════════════════════════════

   ★★★★★ DARK, BECAUSE THE ORIGINAL SITE WAS DARK AND THAT WAS THE RIGHT CALL.
     The first version of this file got every colour right and every ROLE
     inverted. I harvested the palette by counting how often each hex appeared
     in the old CSS and promoted the most frequent to the page ground — but
     frequency measures how much AREA a colour covers, not what it is FOR.
     #F5F1E8 was everywhere because it was the BODY TEXT on a near-black page;
     counting it made it the background. A true measurement attached to the
     wrong referent, and the result was a cream site that was on-palette and
     off-brand.

     The authoritative source was sitting in the old homepage all along: a
     Tailwind config that NAMES the role of every colour. Roles are no longer
     inferred from anything — they are transcribed:

       bg #0A0A0F · card #14141A · border #2A2530
       red #A01E2D (primary button) · red-deep #5A1219 · red-bright #C43040
       text #F5F1E8 · text-mute #A89F94 · text-dim #5A5550 · gold #D4A574

     Its three gradients and two shadows are reproduced verbatim below. The old
     site used NO gradient text (zero uses of bg-clip-text), so neither does
     this — the restraint was part of what worked.

   ★★★★ ONE FILE, NO TEMPLATE CHANGES. Every class name is identical to the
     version this replaces, so inverting the whole site is a stylesheet swap
     rather than an edit across 57 pages. The build's class-coverage check has
     to come back at zero unstyled, which is what proves nothing was dropped.

   ★★★ SINGLE-THEME ON PURPOSE. This commits to one visual world, so there is
     no prefers-color-scheme branch — but every colour is declared explicitly
     and `body` paints its own background, so the page never borrows a ground.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* grounds and surfaces */
  --bg: #0a0a0f;
  --card: #14141a;
  --card-raised: #1b1b22;
  --border: #2a2530;
  --border-soft: rgba(245, 241, 232, .08);

  /* type */
  --text: #f5f1e8;
  --mute: #a89f94;
  --dim: #87837f;

  /* accents */
  --red: #a01e2d;          /* primary button */
  --red-deep: #5a1219;
  --red-bright: #c43040;   /* accent, borders, fills, the glow */
  --red-text: #d2606c;     /* the same red as TEXT: #c43040 is 3.62:1 on the
                              page ground, below AA for anything under 18.66px.
                              Borders and fills keep --red-bright; only letters
                              take this. */
  --gold: #d4a574;         /* highlights, inline links, numerals */
  --green: #10b981;        /* proof / success only */

  /* the old site's three gradients, verbatim */
  --grad: linear-gradient(135deg, #c43040 0%, #a01e2d 50%, #5a1219 100%);
  --grad-soft: linear-gradient(135deg, rgba(196, 48, 64, .15) 0%, rgba(90, 18, 25, .05) 100%);
  --grad-radial: radial-gradient(ellipse at top, rgba(196, 48, 64, .18), transparent 60%);

  /* and its two shadows */
  --glow: 0 0 60px -15px rgba(196, 48, 64, .4);
  --shadow-card: 0 1px 0 rgba(245, 241, 232, .04) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);

  --f-display: 'Bebas Neue', Impact, 'Haettenschweiler', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: 20px;
  --maxw: 1140px;
  --maxw-prose: 68ch;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img { max-width: 100%; height: auto; }

/* ★ Inline links use GOLD, not red-bright. #C43040 on #0A0A0F is about 3.6:1 —
   fine for a large eyebrow, under the 4.5:1 body-text threshold. Gold is about
   8.5:1 and was already a highlight colour in the old palette. */
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 2px; }

::selection { background: rgba(196, 48, 64, .35); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ─── type ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: .95;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 8vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1.05em; }

.lede { font-size: clamp(1.08rem, 2.1vw, 1.32rem); line-height: 1.55; color: var(--mute); max-width: 60ch; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin: 0 0 .9rem;
}
.eyebrow a { color: inherit; }
.kicker { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.num { font-family: var(--f-display); color: var(--gold); font-size: 1.15em; }
strong { font-weight: 600; color: var(--text); }
.note { font-size: .88rem; color: var(--dim); }
.note a { color: var(--gold); }
.hr { border: 0; border-top: 1px solid var(--border); margin-block: clamp(2rem, 4vw, 3rem); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); color: var(--text); padding: .6rem 1rem; z-index: 100; border-radius: 4px; }

/* ─── layout ────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 820px; }
.prose { max-width: var(--maxw-prose); }
section { padding-block: clamp(3.2rem, 7vw, 6rem); }
section.tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }

/* ★ On a dark page, banding is a RAISED surface, not a darker one. */
.band { background: var(--card); border-block: 1px solid var(--border); }

/* ★ `.dark` is kept so no template changes: it is now the dramatic section —
     the soft crimson gradient the old site laid over feature blocks. */
.dark { position: relative; background: var(--bg); overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); pointer-events: none; }
.dark > * { position: relative; }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.g2, .g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) {
  .g2 { grid-template-columns: 1fr 1fr; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── header ────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .55rem var(--gutter) .5rem;
  background: rgba(10, 10, 15, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-head { background: var(--bg); }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-display);
  font-size: 1.22rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand img { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .brand { font-size: 1.5rem; gap: .55rem; }
  .brand img { width: 28px; height: 28px; }
}
/* The nav is a wrapping second row on a phone and an inline row on a desk.
   ★ It used to be display:none below 900px with no replacement, which left a
     phone visitor the logo and the apply button — the gate, and nothing to
     look at before it. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  order: 3;
  width: 100%;
  gap: .3rem .85rem;
  margin: 0;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
.site-nav a { color: var(--mute); font-size: .82rem; font-weight: 500; line-height: 1.5; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--red-text); }
.site-head .btn-sm { margin-left: auto; }
@media (min-width: 900px) {
  .site-nav {
    order: 0; width: auto; flex-wrap: nowrap; margin-left: auto;
    gap: 1.25rem; padding-top: 0; border-top: 0;
  }
  .site-nav a { font-size: .94rem; }
  .site-head .btn-sm { margin-left: 0; }
}

/* ─── hero, with the radial glow the old site opened on ─────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.8rem, 6vw, 5rem) clamp(2.4rem, 5vw, 4rem); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-radial); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { margin-bottom: 1rem; }
.hero .lede { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }

/* ─── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: .375rem;
  background: var(--red);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--red-bright); text-decoration: none; box-shadow: var(--glow); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--card); border-color: var(--red-bright); box-shadow: none; }
.ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
/* ★ On a phone a wrapping flex row becomes a column of buttons sized to their
     own text, which reads as ragged rather than as a stack. Full width below
     560px, which is also the bigger tap target. */
@media (max-width: 560px) {
  .ctas { flex-direction: column; align-items: stretch; }
  .ctas .btn { width: 100%; }
}

/* ─── cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--mute); }
.card p:last-child { margin-bottom: 0; }
.card-rail { border-left: 3px solid var(--red-bright); }
.card-accent { border-left: 3px solid var(--red-bright); background: var(--card-raised); }
.card-accent h2 { margin-bottom: .6rem; }

.card-link { display: block; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.card-link:hover { text-decoration: none; border-color: var(--red-bright); transform: translateY(-2px); box-shadow: var(--glow); }
.card-link h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-bottom: .5rem; }
.card-link p { color: var(--mute); font-size: .96rem; margin-bottom: .9rem; }
.more { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); }

/* ─── the proof slab (90 min → 10 min) ──────────────────────────────────── */
.proof {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 520px;
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}
.proof .was, .proof .now { display: flex; flex-direction: column; gap: .15rem; }
.proof .k { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.proof .v { font-family: var(--f-display); font-size: 2.05rem; line-height: 1; }
.proof .was .v { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 2px; }
.proof .now .v { color: var(--green); }
.proof .arrow { color: var(--red-bright); font-size: 1.4rem; }

/* ─── pricing ───────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 1.6rem 1.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  box-shadow: var(--shadow-card);
}
.plan.featured { border-color: var(--red-bright); box-shadow: var(--glow); }
.plan.featured::before {
  content: "Most companies start here";
  position: absolute;
  top: -.72rem;
  left: 1.3rem;
  background: var(--red);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .26rem .6rem;
  border-radius: 2px;
  white-space: nowrap;
}
.plan-name { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red-text); }
.plan-price { display: flex; align-items: baseline; gap: .25rem; }
.plan-price .amt { font-family: var(--f-display); font-size: 3.1rem; line-height: 1; color: var(--text); }
.plan-price .cad { color: var(--dim); font-size: .95rem; }
.plan-tag { color: var(--mute); font-size: .95rem; margin: 0; }
.plan .btn { margin-top: auto; }
.credits {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--dim);
  padding-top: .8rem;
  border-top: 1px solid var(--border-soft);
}

/* ─── lists ─────────────────────────────────────────────────────────────── */
.ticks { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.5rem; color: var(--mute); font-size: .95rem; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.plain { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .62rem; }
.plain li { padding-left: 1.05rem; position: relative; color: var(--mute); line-height: 1.5; }
.plain li::before { content: "—"; position: absolute; left: 0; color: var(--dim); }

/* ─── prose blocks and cross-links ──────────────────────────────────────── */
.prose-block { max-width: var(--maxw-prose); margin-bottom: clamp(2rem, 4vw, 3rem); }
.prose-block:last-child { margin-bottom: 0; }
.prose-block h2 { margin-bottom: .7rem; }
.prose-block p { color: var(--mute); line-height: 1.62; }

.linkgrid { display: grid; gap: .55rem 1.2rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 620px) { .linkgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .linkgrid { grid-template-columns: repeat(3, 1fr); } }
.linkgrid a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .62rem .2rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
}
.linkgrid a:hover { color: var(--gold); }

/* ─── comparison table ──────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 560px; }
table.cmp th, table.cmp td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cmp thead th { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); }
table.cmp tbody th { font-weight: 600; color: var(--text); }
table.cmp td { color: var(--mute); }
table.cmp .yes { color: var(--green); font-weight: 600; }
table.cmp .no { color: var(--dim); }

/* ─── callout ───────────────────────────────────────────────────────────── */
.callout {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: .95rem 1.1rem;
  max-width: var(--maxw-prose);
  color: var(--mute);
  font-size: .95rem;
}
.callout code { font-family: var(--f-mono); font-size: .86em; background: var(--bg); color: var(--gold); padding: .1em .35em; border-radius: 3px; }

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: .7rem; max-width: var(--maxw-prose); }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: .95rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--text); }
.faq summary:hover { color: var(--gold); }
.faq details[open] summary { margin-bottom: .6rem; color: var(--gold); }
.faq p { color: var(--mute); line-height: 1.62; }
.faq p:last-child { margin-bottom: 0; }

/* ─── forms ─────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1rem; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--text); }
.unit { font-family: var(--f-mono); font-size: .76rem; font-weight: 400; color: var(--dim); letter-spacing: .04em; }
.field .hint { font-size: .8rem; color: var(--dim); line-height: 1.45; }
.field input, .field select, .field textarea {
  /* ★ Without these a <select> is as wide as its longest option: "Rough /
       bare / porous (250 sq ft per gal)" pushed the paint calculator 54px off
       the side of a 320px screen. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--text);
  padding: .72rem .85rem;
  min-height: 48px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 3px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red-bright); outline: none; }
.field select { color: var(--text); }
.field option { background: var(--card); color: var(--text); }

.form-status {
  max-width: 520px;
  margin-bottom: 1.2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-size: .98rem;
  line-height: 1.55;
}
.form-status:focus { outline: 3px solid var(--red-bright); outline-offset: 2px; }
.form-status.ok { border-left-color: var(--green); }
.form-status.err { border-left-color: var(--red-bright); }

/* ─── calculators ───────────────────────────────────────────────────────── */
.calc { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .calc { grid-template-columns: 1fr 1fr; } }
.calc-in { display: flex; flex-direction: column; gap: 1.05rem; min-width: 0; }
.calc > *, .field { min-width: 0; }

/* ★ The results panel must read as RAISED against a dark page, so it takes the
     raised surface plus the accent border and the glow. A lighter grey on
     #0A0A0F reads as washed out rather than elevated. */
.calc-res {
  position: sticky;
  top: 5.5rem;
  background: var(--card-raised);
  border: 1px solid var(--red-bright);
  border-radius: 4px;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  box-shadow: var(--glow);
}
.calc-res h2 {
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 1rem;
}
.calc-outs { display: flex; flex-direction: column; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--border); }
.calc-row:last-child { border-bottom: 0; }
.calc-row .k { font-size: .88rem; color: var(--mute); line-height: 1.35; }
.calc-row .v {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.calc-row.emph .v { color: var(--gold); font-size: 2.05rem; }
.calc-row.emph .k { color: var(--text); font-weight: 500; }
.calc-row.neg .v { color: var(--red-text); }
.sfx { font-family: var(--f-mono); font-size: .62em; letter-spacing: .06em; color: var(--dim); }
.calc-err { color: var(--red-text); font-size: .92rem; margin: 0; }

/* ─── legal pages ───────────────────────────────────────────────────────── */
.legal { max-width: var(--maxw-prose); }
.legal h2 { font-family: var(--f-body); font-weight: 600; font-size: 1.12rem; letter-spacing: 0; margin: 2.1rem 0 .55rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: .97rem; line-height: 1.66; color: var(--mute); }
.legal code { font-family: var(--f-mono); font-size: .86em; background: var(--card); color: var(--gold); padding: .1em .35em; border-radius: 3px; }

/* ★ An unfilled fact must be impossible to miss in the rendered page, not
     buried in an attribute the way the old site's REPLACE_ME ids were. Gold on
     near-black is the loudest thing on the page and is still on-palette. */
.tbd {
  background: var(--gold);
  color: var(--bg);
  font-family: var(--f-mono);
  font-size: .82em;
  font-weight: 500;
  padding: .12em .4em;
  border-radius: 3px;
  box-decoration-break: clone;
}

/* ─── footer ────────────────────────────────────────────────────────────── */
.site-foot {
  background: var(--card);
  border-top: 1px solid var(--border);
  color: var(--mute);
  padding-block: clamp(2.6rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.fcols { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1.8rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .fcols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.fgroup h2 {
  font-size: .78rem;
  font-family: var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: .7rem;
}
.fgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .42rem; }
.fgroup a { color: var(--mute); font-size: .9rem; }
.fgroup a:hover { color: var(--text); }
.fbase {
  max-width: var(--maxw);
  margin: 2.2rem auto 0;
  padding: 1.2rem var(--gutter) 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--dim);
}
.fbase a { color: var(--gold); }

/* ═══ product displays ══════════════════════════════════════════════════════
   Framed, tabbed surfaces drawn from the real product. These use the SITE
   tokens throughout — CJ: "i like the marketing sites palette, keep that" —
   so what signals "this is an application" is structure, not a second palette:
   the browser frame, the tab strip, and the table/pill idioms from the
   components themselves.

   ★★★★ AT REST, PANEL ONE IS VISIBLE. Panels are hidden by [data-on], which
   the GENERATOR sets on the first one. With JS off, or before ui.js runs, the
   reader still sees a real surface. Nothing here is load-bearing for reading
   the page. */

.ax { margin: 2.2rem 0 0; }
.ax-frame {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ax-bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .85rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ax-dots { display: flex; gap: 6px; flex-shrink: 0; }
.ax-dots::before, .ax-dots::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--border);
  display: block;
}
.ax-url {
  font: 500 11.5px/1 var(--f-mono);
  color: var(--dim); letter-spacing: .02em;
  padding: .25rem .6rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 5px;
}
.ax-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: .5rem .5rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ax-tab {
  font: 600 12.5px/1 inherit;
  color: var(--mute); background: none;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 7px 7px 0 0;
  padding: .55rem .85rem; cursor: pointer;
  margin-bottom: -1px;
}
.ax-tab:hover { color: var(--text); }
.ax-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
}
.ax-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ax-stage { padding: 1.1rem 1.15rem 1.15rem; }
.ax-panel { display: none; }
.ax-panel[data-on] { display: block; }

.ax-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.ax-head h4 {
  font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; margin: 0 0 .2rem; color: var(--text);
}
.ax-head p { margin: 0; font-size: 12.5px; color: var(--mute); }

.ax-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--card-raised); border: 1px solid var(--border);
}
.ax-success { color: var(--green); }
.ax-info    { color: var(--gold); }
.ax-neutral { color: var(--dim); }

.ax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ax-table th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
  padding: 0 .5rem .5rem; border-bottom: 1px solid var(--border);
}
.ax-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.ax-table tr:last-child td { border-bottom: none; }
.ax-table td b { display: block; font-weight: 600; color: var(--text); }
.ax-table td span { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; }
/* ★ Numeric cells of .ax-table. This was called .ax-num until a second,
     unrelated component 200 lines below claimed the same name with
     display:grid and silently dissolved every estimate table on the site. */
.ax-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-amt { color: var(--text); font-weight: 600; }

.ax-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border);
}
.ax-hint { font-size: 12px; color: var(--mute); }
.ax-total { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ax-total.ax-green { color: var(--green); }

.ax-doc { border: 1px solid var(--border); border-radius: 9px; padding: 1rem; background: var(--bg); }
.ax-doc-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ax-doc-brand { font-weight: 700; color: var(--text); font-size: 13px; }
.ax-doc-ref { font: 500 11.5px/1 var(--f-mono); color: var(--dim); }
.ax-doc-scope { margin: .35rem 0 .9rem; font-size: 12.5px; color: var(--mute); }
.ax-sum { margin: 0 0 1rem; }
.ax-sum > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--border);
}
.ax-sum > div:last-child { border-bottom: none; }
.ax-sum dt { font-size: 12.5px; color: var(--mute); }
.ax-sum dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ax-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ax-btn {
  font-size: 12.5px; font-weight: 600; padding: .5rem .9rem; border-radius: 7px;
  border: 1px solid var(--border); color: var(--mute);
}
.ax-btn-go { background: var(--grad); border-color: transparent; color: #fff; }
.ax-doc-note { margin: .8rem 0 0; font-size: 11.5px; color: var(--dim); }

.ax-feed { list-style: none; margin: 0; padding: 0; }
.ax-feed li {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.ax-feed li:last-child { border-bottom: none; }
.ax-feed i { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; margin-top: 2px; }
.ax-ok { background: rgba(16, 185, 129, .15); border: 1px solid var(--green); position: relative; }
.ax-ok::after {
  content: ""; position: absolute; left: 4.5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--green);
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.ax-feed b { font-size: 13px; font-weight: 600; color: var(--text); }
.ax-feed span { font-size: 11.5px; color: var(--mute); }

.ax figcaption { margin-top: .7rem; font-size: 12px; color: var(--dim); line-height: 1.5; }

@media (max-width: 560px) {
  .ax-stage { padding: .85rem; }
  .ax-head { flex-direction: column; gap: .5rem; }
  .ax-table { font-size: 12px; }
  /* ★ Drops the QUANTITY, never the amount. This hid nth-child(3) — the
       price — so a phone saw "2,840 sq ft × $1.85" and no money at all. */
  .ax-table th:nth-child(2), .ax-table td:nth-child(2) { display: none; }
  .ax-total { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .ax * { transition: none !important; } }

/* ─── product display primitives (boards, cards, bars, phone) ─────────────── */
.ax-out {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 6px; border: 1px solid currentColor;
}
.ax-warn    { color: var(--gold); }
.ax-danger  { color: var(--red-text); }
.ax-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: .4rem; }

.ax-block { margin-bottom: .9rem; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.ax-block-h { padding: .45rem .7rem; background: var(--card-raised); font-size: 12px; font-weight: 700; color: var(--text); }
.ax-block .ax-table td { padding: .5rem .7rem; font-size: 12.5px; }
.ax-q { color: var(--mute); font-size: 11.5px; }

.ax-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; }
.ax-col h5 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 .45rem; display: flex; align-items: center;
}
.ax-col h5 b { margin-left: auto; color: var(--text); font-size: 11px; }
.ax-chip {
  font-size: 11.5px; color: var(--text); background: var(--card-raised);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .35rem .5rem; margin-bottom: .35rem; line-height: 1.35;
}
.ax-edge-success { border-left: 3px solid var(--green); }
.ax-edge-info    { border-left: 3px solid var(--gold); }
.ax-edge-warn    { border-left: 3px solid var(--gold); }
.ax-edge-danger  { border-left: 3px solid var(--red-bright); }
.ax-edge-neutral { border-left: 3px solid var(--border); }

.ax-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .55rem; }
.ax-card2 {
  border: 1px solid var(--border); border-radius: 8px; padding: .65rem .75rem;
  background: var(--card-raised); display: flex; flex-direction: column; gap: .15rem;
}
.ax-k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.ax-v { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ax-s { font-size: 11.5px; color: var(--mute); }

.ax-fields { display: flex; flex-direction: column; }
.ax-field {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.ax-field:last-child { border-bottom: none; }
.ax-fv { font-size: 13px; color: var(--text); text-align: right; }
.ax-fv em { color: var(--mute); font-style: normal; font-size: 11.5px; }
.ax-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--border); margin: 0 .3rem 0 .6rem; vertical-align: -1px; }
.ax-fv .ax-sw:first-child { margin-left: 0; }

.ax-bars { display: flex; flex-direction: column; gap: .8rem; }
.ax-meter { display: flex; flex-direction: column; }
.ax-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 12.5px; margin-bottom: .35rem; }
.ax-meter-top b { color: var(--text); font-weight: 600; }
.ax-meter-top span { color: var(--text); font-variant-numeric: tabular-nums; }
.ax-meter-top i { color: var(--mute); font-style: normal; }
.ax-track { height: 7px; border-radius: 99px; background: var(--card-raised); border: 1px solid var(--border); overflow: hidden; }
.ax-track span { display: block; height: 100%; background: var(--green); }
.ax-track span.ax-over { background: var(--red-bright); }

.ax-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.ax-day h5 { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin: 0 0 .45rem; }

.ax-phone {
  max-width: 260px; margin: 0 auto; border: 1px solid var(--border);
  border-radius: 20px; padding: .55rem; background: var(--bg);
}
.ax-phone-in { border-radius: 13px; background: var(--card); padding: .7rem; }
.ax-p-h { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-bottom: .55rem; }
.ax-p-card { border: 1px solid var(--border); border-radius: 8px; padding: .55rem .6rem; margin-bottom: .5rem; display: flex; flex-direction: column; gap: .1rem; }
.ax-p-card b { font-size: 12.5px; color: var(--text); }
.ax-p-card span { font-size: 11px; color: var(--mute); }
.ax-p-time { color: var(--gold) !important; }
.ax-dim2 { opacity: .5; }
.ax-p-btn {
  background: var(--grad); color: #fff; text-align: center; font-size: 12.5px; font-weight: 700;
  padding: .65rem; border-radius: 8px; margin-bottom: .5rem;
}
.ax-note { margin: .8rem 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.55; }

.ax-sum .ax-strong dt, .ax-sum .ax-strong dd { font-weight: 700; color: var(--text); }
.ax-btn-accept  { background: var(--green); border-color: transparent; color: #04120c; }
.ax-btn-sign    { background: var(--card-raised); color: var(--text); }
.ax-btn-decline { color: var(--red-text); }

@media (max-width: 560px) {
  .ax-week { grid-template-columns: repeat(2, 1fr); }
  .ax-board { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ month calendar ═══════════════════════════════════════════════════════
   Drawn against CalendarMonthGrid.jsx: a fixed 6x7 = 42-cell grid, Sunday
   first, so the height never jumps between months. Out-of-month cells dim,
   today's date is a ringed pill in the cell's top-RIGHT, and a cell shows at
   most 3 blocks before a "+N more". The week strip this replaces was five
   columns of Mon-Fri, which is not a view the product has. */
.ax-cal { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.ax-cal-h, .ax-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }
.ax-cal-h div {
  padding: 6px 8px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  background: var(--card-raised); border-bottom: 1px solid var(--border);
}
.ax-cell {
  min-height: 74px; min-width: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ax-cell:nth-child(7n) { border-right: none; }
.ax-cell:nth-child(n+36) { border-bottom: none; }
.ax-cell.out { background: var(--card-raised); opacity: .5; }
.ax-dnum {
  align-self: flex-end; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--mute); border: 1px solid transparent;
}
.ax-dnum.today { color: var(--red-text); font-weight: 700; background: rgba(196,48,64,.12); border-color: rgba(196,48,64,.4); }
.ax-jb {
  display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 3px;
  background: var(--card-raised); border: 1px solid var(--border);
  font-size: 9.5px; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ax-jb i { width: 5px; height: 5px; border-radius: 999px; flex: 0 0 auto; background: var(--dim); }
.ax-jb .t { color: var(--mute); opacity: .8; }
.ax-jb.urgent i   { background: #f87171; }
.ax-jb.priority i { background: #fbbf24; }
.ax-jb.flexible i { background: var(--gold); }
.ax-jb.filler i   { background: var(--dim); }
.ax-jb.clash { border-color: var(--red-bright); box-shadow: 0 0 0 1px rgba(196,48,64,.35); }
.ax-more { align-self: flex-start; padding: 0 3px; font-size: 9px; font-weight: 600; color: var(--dim); }
.ax-cal-legend {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .6rem;
  font-size: 10.5px; color: var(--mute);
}
.ax-cal-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.ax-cal-legend i { width: 6px; height: 6px; border-radius: 999px; }

/* ═══ builder split pane ═══════════════════════════════════════════════════
   EstimateBuilderShell.jsx is a split pane: job setup on the left third,
   the quote on the right two thirds, with the Numbers Portal above. */
/* ★ Same track count and same gap as .ax-num above it, so the panes'
     internal boundary lands exactly on the KPI tiles' first boundary at any
     width. They used to miss by 14px at 1280. */
.ax-split { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .5rem; }
@media (min-width: 720px) {
  .ax-split { grid-template-columns: repeat(3, 1fr); }
  .ax-split > div + div { grid-column: span 2; }
}
.ax-pane { border: 1px solid var(--border); border-radius: 7px; background: var(--card-raised); padding: .6rem .7rem; }
.ax-pane h6 {
  margin: 0 0 .5rem; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--dim);
}
.ax-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ax-pane li { font-size: 11.5px; color: var(--mute); display: flex; justify-content: space-between; gap: .6rem; }
.ax-pane li b { color: var(--text); font-weight: 600; }

/* ═══ numbers portal ═══════════════════════════════════════════════════════
   Per-service revenue / cost / margin, with the margin health band. Target
   60%, warn band 5pp: >=60 good, 55-59 warn, <55 bad. Operator-only — the
   customer never sees this surface, which is the point of showing it. */
.ax-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ax-num > div {
  border: 1px solid var(--border); border-radius: 7px; background: var(--card-raised);
  padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.ax-num .n { font-family: var(--f-mono); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ax-num .n.good { color: var(--green); }
.ax-num .n.warn { color: var(--gold); }
.ax-num .n.bad  { color: var(--red-text); }
.ax-num .s { font-size: 10px; color: var(--dim); }

/* ═══ analyzer: one block per service ══════════════════════════════════════
   bidServiceTotals.js — one figure block per core service, a subtotal PER
   UNIT (never a scalar total across sqft and each), and the shortfall named
   before the figure. */
.ax-svc { display: flex; flex-direction: column; gap: .5rem; }
.ax-svc > div { border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; background: var(--card-raised); padding: .5rem .65rem; }
.ax-svc .h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ax-svc .h b { font-size: 12.5px; color: var(--text); font-weight: 600; }
.ax-svc .u { font-family: var(--f-mono); font-size: 12px; color: var(--text); }
.ax-svc .u em { color: var(--mute); font-style: normal; font-size: 10.5px; }
.ax-svc .l { margin-top: .3rem; font-size: 10.5px; color: var(--mute); line-height: 1.5; }
.ax-svc .l .gap { color: var(--gold); }
.ax-svc .l .held { color: var(--dim); }
.ax-svc .empty { color: var(--dim); font-style: italic; }

/* ═══ mockup before / after ════════════════════════════════════════════════
   A DRAWING, not a photograph, and deliberately so: the image provider is
   bring-your-own and unprovisioned, so there is no real generated output to
   show and a stock photo pair would be a fabricated result. This is a
   schematic of the same elevation in two color schemes — it demonstrates the
   before/after surface honestly and nobody can mistake it for a render. */
.ax-ba { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 560px) { .ax-ba { grid-template-columns: 1fr 1fr; } }
.ax-ba figure { margin: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--card-raised); }
.ax-ba svg { display: block; width: 100%; height: auto; }
.ax-ba figcaption {
  padding: .35rem .6rem; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border-top: 1px solid var(--border);
}
.ax-ba figure.after figcaption { color: var(--gold); }

@media (max-width: 560px) {
  .ax-cell { min-height: 54px; }
  .ax-jb { font-size: 8.5px; }
  .ax-num { grid-template-columns: 1fr; }
}

.ax-pane li b.ax-mg-warn { color: var(--gold); }
.ax-pane li b.ax-mg-bad  { color: var(--red-text); }
.ax-pane li b.ax-mg-good { color: var(--text); }

/* ═══ mockup before / after wipe ═══════════════════════════════════════════
   The two panels become one elevation with the repaint sweeping across it,
   which is the moment the tool exists for: the customer watching their own
   house change. Pure CSS — no JS, no library, nothing to fetch.

   ★ IT IS STILL A DRAWING. Animating it does not make it a product output,
     and the caption keeps saying so.

   ★ AND IT HOLDS STILL FIRST. The page must read at rest for a screenshot, a
     link preview or a reader who arrives mid-scroll, so the "after" layer
     parks at 55% revealed before the animation starts — the before/after is
     legible as one frame, and the sweep is the flourish on top.

   ★ prefers-reduced-motion KEEPS THE SPLIT AND DROPS THE MOVEMENT, rather
     than hiding the comparison from the people who asked for less motion. */
.ax-wipe { position: relative; max-width: 520px; margin-inline: auto; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--card-raised); }
.ax-wipe svg { display: block; width: 100%; height: auto; }
.ax-wipe .after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 50%);
  animation: ax-sweep 10s cubic-bezier(.65, 0, .35, 1) 1.5s 3 both;
}
.ax-wipe .seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  animation: ax-seam 10s cubic-bezier(.65, 0, .35, 1) 1.5s 3 both;
}
.ax-wipe .tag {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: .35rem .6rem;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(10,10,15,.85), transparent);
}
.ax-wipe .tag .a { color: var(--dim); }
.ax-wipe .tag .b { color: var(--gold); }

@keyframes ax-sweep {
  0%,  10%  { clip-path: inset(0 0 0 50%); }
  35%       { clip-path: inset(0 0 0 90%); }
  65%       { clip-path: inset(0 0 0 10%); }
  90%, 100% { clip-path: inset(0 0 0 50%); }
}
@keyframes ax-seam {
  0%,  10%  { left: 50%; }
  35%       { left: 90%; }
  65%       { left: 10%; }
  90%, 100% { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-wipe .after { animation: none; clip-path: inset(0 0 0 50%); }
  .ax-wipe .seam  { animation: none; left: 50%; }
}

/* ═══ crew task tree ═══════════════════════════════════════════════════════
   THE GRAIN LAW (§P1-D): headers sit at the SERVICE-ELEMENT grain — Prep,
   Walls, Closets, Guest bathroom — never at the core-service grain. A single
   "Interior Painting" header over a flat list is the shapeless version this
   replaced, and it is what CJ's examples were a complaint about.

   ★ NO CHECKBOX, ANYWHERE. The crew never mark a task done; each row is a
     bullet and a label, never a control. Styling it as a list rather than a
     form is the point, not an omission. */
.ax-tree { display: flex; flex-direction: column; gap: .7rem; }
.ax-tg h5 {
  margin: 0 0 .35rem; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
}
.ax-tg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; }
.ax-tg li {
  position: relative; padding-left: .95rem;
  font-size: 12px; color: var(--text); line-height: 1.45;
}
/* ═══ the translation, stacked under its own line ═════════════════════════
   CJ: "have a 'Auto-Translated' pill on the tasks, and the spanish version
   below." Stacking beats a second tab: the claim is that ONE list carries
   both, written once — a tab hides that from anyone who does not click it.

   ★ The Spanish line is a sibling <span>, not a title attribute or a tooltip,
     so it is present for a screen reader, a crawler and a printed page. It
     carries lang="es" at the markup level for the same reason. */
.ax-tr-tag { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.ax-tr-tag span { font-size: 10.5px; color: var(--dim); }
.ax-tg h5 .es,
.ax-tg li .es { display: block; color: var(--mute); font-weight: 400; }
.ax-tg h5 .es { font-size: 9.5px; letter-spacing: .05em; margin-top: .1rem; opacity: .75; }
.ax-tg li .es { font-size: 11px; letter-spacing: 0; text-transform: none; margin-top: .05rem; }
.ax-tg li { padding-bottom: .15rem; }

.ax-tg li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 4px; height: 4px; border-radius: 999px; background: var(--dim);
}

/* ═══ site access card ═════════════════════════════════════════════════════
   The FRONT-AND-CENTER card at the top of every crew job: how to get on site,
   what not to touch, and the pinned priority. Crew-facing only — the assembler
   carries an explicit warning that it must never reach a customer surface, so
   the display keeps it visibly on the crew's side of the product. */
.ax-access { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ax-access > div {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .45rem .65rem; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text); line-height: 1.45;
}
.ax-access > div:last-child { border-bottom: none; }
.ax-access .ax-k { flex: 0 0 5.6rem; }
/* The plain rows. Named rather than left to the bare child selector so the
   class census can see every class the markup actually uses. */
.ax-ac-row .ax-k { color: var(--dim); }
.ax-ac-x { background: rgba(196, 48, 64, .07); }
.ax-ac-x .ax-k { color: var(--red-text); }
.ax-ac-p { background: rgba(212, 165, 116, .07); }
.ax-ac-p .ax-k { color: var(--gold); }

@media (max-width: 560px) {
  .ax-access > div { flex-direction: column; gap: .1rem; }
  .ax-access .ax-k { flex: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE SHAPES
   Three sections used to be the same bordered-card grid in a row, which is
   what made the page read as one long undifferentiated note. Each of these
   gives a section a shape that matches what it is actually saying.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── .flow — a numbered process rail ───────────────────────────────────────
   For a section that is genuinely a sequence. Vertical with a connecting line
   on a phone, horizontal with the line running between the numbers on a wide
   screen. The rail is drawn with ::after on each item except the last, so it
   never dangles past the end. */
.flow { list-style: none; margin: 2.1rem 0 0; padding: 0; display: grid; gap: 1.7rem; counter-reset: fl; }
.flow > li { position: relative; padding-left: 3.2rem; }
.flow > li::before {
  counter-increment: fl; content: counter(fl);
  position: absolute; left: 0; top: 0;
  width: 2.15rem; height: 2.15rem; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .88rem; font-weight: 500;
  color: var(--red-text); background: var(--card-raised);
  border: 1px solid var(--red-bright);
}
.flow > li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.07rem; top: 2.45rem; bottom: -1.7rem;
  width: 1px; background: linear-gradient(var(--red-bright), var(--border));
}
.flow h3 { margin: .2rem 0 .45rem; }
.flow p { margin: 0; color: var(--mute); }

@media (min-width: 880px) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
  .flow > li { padding-left: 0; padding-top: 3.3rem; }
  .flow > li:not(:last-child)::after {
    left: 2.55rem; right: -2.4rem; top: 1.07rem; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, var(--red-bright), var(--border));
  }
}

/* ─── .spec — term / description rows ───────────────────────────────────────
   For a section that is a specification rather than a pitch. Hairline rules
   instead of boxes, so four items of unequal length do not become four boxes
   of equal height with dead space in two of them. */
.spec { margin-top: 2.1rem; border-top: 1px solid var(--border); }
.spec > div {
  display: grid; grid-template-columns: 1fr; gap: .3rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--border);
}
/* ★ Bebas is condensed, so 1.05rem read smaller than the 1rem body text
     beside it and the TERM column looked subordinate to its own description.
     Sized by what it reads as, not by the number. */
.spec h3 { margin: 0; font-size: 1.24rem; line-height: 1.15; }
.spec p { margin: 0; color: var(--mute); }
@media (min-width: 820px) {
  .spec > div { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}

/* ─── .pstrip — pricing in one row ──────────────────────────────────────────
   The full three-card plan grid belongs on /pricing. Here the reader wants
   the number and a way in. Figures come from PLANS, so the two cannot drift. */
.pstrip {
  display: grid; grid-template-columns: 1fr; margin-top: 1.9rem;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--card);
}
.pstrip > div {
  padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; min-width: 0;
}
.pstrip > div:last-child { border-bottom: 0; }
.pstrip .pk {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--red-text); flex: 0 0 5.2rem;
}
.pstrip .pv { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; color: var(--text); }
.pstrip .pv em { font-style: normal; font-family: var(--f-body); font-size: .8rem; color: var(--mute); }
.pstrip .ps { color: var(--mute); font-size: .92rem; min-width: 0; }
@media (min-width: 820px) {
  .pstrip { grid-template-columns: repeat(3, 1fr); }
  .pstrip > div {
    flex-direction: column; align-items: flex-start; gap: .5rem;
    border-bottom: 0; border-right: 1px solid var(--border);
  }
  .pstrip > div:last-child { border-right: 0; }
  .pstrip .pk { flex: none; }
}

/* ─── .scta — the sticky apply bar ──────────────────────────────────────────
   Between the hero and pricing there were ~3,200px with no way to apply.
   ★ Hidden by DEFAULT and revealed only by JS once the hero leaves the
     screen: a reader with no JS sees nothing half-drawn, and still has the
     header button. visibility, not just transform, so it is never a focusable
     target sitting off-screen. */
.scta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .62rem var(--gutter);
  background: rgba(20, 20, 26, .94);
  border-top: 1px solid var(--border);
  visibility: hidden; transform: translateY(110%);
  transition: transform .24s ease, visibility 0s linear .24s;
}
.scta[data-on] { visibility: visible; transform: translateY(0); transition: transform .24s ease; }
.scta p { margin: 0; font-size: .88rem; color: var(--mute); }
.scta-space { height: 0; }
@supports (backdrop-filter: blur(8px)) { .scta { backdrop-filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .scta { transition: none; } }
@media (max-width: 620px) {
  .scta p { display: none; }
  .scta { padding: .55rem var(--gutter); }
  .scta .btn { width: 100%; }
}

/* ─── .faq-2 — two-column FAQ for wide, non-prose pages ─────────────────── */
@media (min-width: 900px) {
  .faq-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .7rem 1.2rem; max-width: none; align-items: start;
  }
}