/* 420Ledger marketing site — the whole stylesheet.
 *
 * WAS INLINED INTO ALL 42 PAGES, byte-identical in every one. Any change meant
 * 42 edits, so in practice it meant the pages drifting apart. Extracted here so
 * there is one copy to change and one thing to be wrong.
 *
 * Linked root-absolute (/styles.css) because pages sit at several depths:
 * /index.html, /pricing/index.html, /states/illinois/index.html.
 *
 * V2 — THE INSTRUMENT, COMMITTED. The v1 flattening was right but timid: it
 * removed the template vocabulary and put nothing in its place, so the page
 * read as hygienic and empty. V2 keeps every rule of the language — flat
 * ground, hairline borders, sharp radii, one green — and makes the language
 * carry the visual weight:
 *
 *   1. The hero mockup now looks like 420Ledger the product: dark sidebar,
 *      hairline metric strip, mono data register. It is a product shot, not
 *      a wireframe.
 *   2. The dark bands have structure — a ledger-grid texture, a §-watermark,
 *      and the §280E split rule built into their bottom edge — instead of
 *      being empty ink rectangles.
 *   3. Quad-ruled ledger paper replaces dead white: an ultra-low-alpha grid
 *      on the wash bands and behind the hero frame. Texture from the domain,
 *      not from noise PNGs.
 *   4. One mono register (system mono — no third webfont) for everything
 *      data-flavored: labels, verdicts, kickers, the URL pill. It is the
 *      marketing echo of the app's JetBrains Mono micro-labels.
 *   5. Iconography is the brand mark's grammar: ink square, green letterform.
 */

:root {
  /* Flat, high-contrast, hairline. Every ratio below is measured, not guessed. */

  --canvas: #FFFFFF;
  --tint: #F5F7F6;         /* alternating band wash */
  --tint-2: #EEF4F1;
  --card: #FFFFFF;

  --ink: #14181F;          /* 17.79:1 on white */
  --body: #4C5563;         /* 7.54:1  */
  /* WAS #6B7480 at 4.74:1 on white — but the wash bands are #F5F7F6, where it
     measured 4.40:1, under the floor. Small text sits on both grounds, so the
     token has to clear 4.5 on the DARKER-GROUND CASE: 5.20:1 on the wash,
     5.59:1 on white. */
  --muted: #5E6975;

  --line: #E4E7EA;         /* decorative rules only */
  /* Control edges need 3:1 under WCAG 1.4.11. --line is 1.16:1, and it was
     drawing the border on every input and every secondary button. */
  --line-strong: #828C99;  /* 3.41:1  */

  --brand: #0E7C5A;        /* 5.19:1 on white — works as a fill AND as text */
  --brand-hover: #0A6349;  /* 7.26:1 */
  --brand-soft: #E7F4EF;
  --brand-line: #CDE8DD;
  --ink-deep: #12251F;     /* dark band ground */
  --brand-bright: #22C186; /* 6.90:1 on --ink-deep */
  --on-dark: #FFFFFF;      /* 16.03:1 on --ink-deep */
  --on-dark-mute: #B4C1BB; /* 8.61:1  */
  /* WAS #B7791F at 3.64:1 — it carried 12.5px verdict text in the mockup
     table, which needs the full 4.5. Now 5.91:1, and .warn consumes the
     token instead of restating the hex. */
  --amber: #8A5A15;

  /* The mono register. Deliberately NOT a third webfont — system monos are
     everywhere, load in zero ms, and the register is 11–13px labels where
     the family matters less than the genre. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Two shadows now, both defined. v1 deleted --shadow-lg but left two
     var(--shadow-lg) references behind; an undefined var() kills the WHOLE
     declaration, so the product frame silently lost its shadow AND the 1px
     ring that lived in the same rule, and the mobile menu dropped with no
     depth at all. The deep one is ink-deep-tinted and reserved for the two
     floating surfaces: the product shot and the mobile menu. */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-lg: 0 1px 2px rgba(16,24,40,.06), 0 32px 64px -24px rgba(18,37,31,.28);

  /* Quad-ruled ledger paper. One declaration, reused; alpha low enough to be
     felt before it is seen. */
  --grid: repeating-linear-gradient(0deg,  rgba(20,24,31,.028) 0 1px, transparent 1px 28px),
          repeating-linear-gradient(90deg, rgba(20,24,31,.028) 0 1px, transparent 1px 28px);
  --grid-dark: repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
               repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);

  /* Sharp. 16/24/999px said "friendly app"; 6/12 says "instrument". */
  --r: 6px;
  --r-lg: 12px;

  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Archivo for display, Inter for body.
   Archivo is an expanded grotesque — institutional and confident rather than
   startup-cute, which is the register a §280E practice actually wants. Inter
   stays for body; the mono register handles every number and label that
   should read as data. */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(14,124,90,.28);
  outline-offset: 3px;
}
.site { background: var(--canvas); }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaque, not translucent. backdrop-filter costs a compositing pass on
     every scroll frame, and a blurred bar over the dark band goes muddy. */
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.nav-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
/* 44px — the wordmark is a link to / in both the header and the footer, and
   it was the shortest target on the page at 32px. */
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-weight: 800; letter-spacing: -.035em; font-size: 19px; color: var(--ink); }
.brand-mark {
  /* Flat ink square with the brand green as the letterform. This two-part
     grammar — ink ground, green mark — is now the grammar of every icon on
     the page (see .icon-dot), so the brand mark stops being a one-off. */
  width: 32px; height: 32px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--ink); color: var(--brand-bright);
  font-weight: 800; font-size: 13px;
}
.brand em { font-style: normal; color: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--body); font-size: 14.5px; font-weight: 550;
  padding: 0 11px; border-radius: var(--r);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--tint); }
.nav-links .btn-primary { display: none; }
/* "Client Login" appeared twice side by side on desktop — once as a nav link,
   once as the button in .nav-actions. The link copy is for the mobile menu;
   hide it on desktop, show it when the menu takes over (see 768px block). */
.nav-links .nav-link[href*="portal/login"] { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--r);
  font-weight: 650; font-size: 15px; border: 0; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
/* White on --brand is 5.19:1, so the brand green can carry the primary
   action without apology. No lift, no glow — the colour is the affordance,
   and :active presses 1px like a real key. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
/* --line-strong, not --line: this is a control boundary and WCAG 1.4.11
   wants 3:1 on one. */
.btn-secondary { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover { background: var(--tint); }
.hamburger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--tint); cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--ink); transition: transform .24s ease, opacity .18s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================ hero
   The ledger grid fades in behind the product shot — the right half of the
   hero is paper with the instrument sitting on it; the left half stays clean
   white for the headline. Texture with a reason, not a wash. */
.hero { position: relative; overflow: hidden; padding: 96px 0 84px; background: var(--canvas); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grid);
  -webkit-mask-image: linear-gradient(100deg, transparent 44%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 44%, #000 78%);
  pointer-events: none;
}
.hero > .container { position: relative; }
/* The display face is much larger than Inter was at the same size, so the
   left column needs more room or the headline wraps to five lines and the
   product frame gets squeezed into a strip. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(36px, 4vw, 60px); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  /* SENTENCE CASE, deliberately. CLAUDE.md forbids ALL CAPS on UI labels, so
     the eyebrow earns its role through the mono register, tracking and the
     dot rather than through uppercase. Squared, not a pill — pills were the
     old vocabulary. */
  padding: 6px 12px 6px 10px; border-radius: 4px;
  background: transparent; color: var(--brand-hover);
  box-shadow: inset 0 0 0 1px var(--brand-line);
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }
.hero h1, .section-head h2, .cta-card h2, .legal h1, .spotlight h2,
.panel-head h3, .feature-card h3, .step-card h3, .state-card h3, .faq-q,
.brand, .metric .v {
  font-family: Archivo, Inter, sans-serif;
  font-variation-settings: "wdth" 108;
}
.hero h1, .section-head h2, .cta-card h2, .legal h1, .spotlight h2 {
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .96;
  text-wrap: balance;
}
.hero h1 { font-size: clamp(42px, 5.2vw, 68px); max-width: 15ch; }
.hero h1 em, .section-head h2 em, .cta-card h2 em { color: var(--brand); font-style: normal; }
.hero p { margin-top: 22px; font-size: 18px; line-height: 1.68; color: var(--body); max-width: 54ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* Squared ticks in the mono register — they read as line items, not badges. */
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 4px;
  background: var(--canvas); color: var(--body);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 500;
}
.trust-pill span { width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }

/* ============================================================ product shot
   This is the one element allowed real elevation (the deep ink-tinted
   shadow) because it is the one thing on the page that is an OBJECT — the
   instrument itself, photographed on the ledger paper. And it now agrees
   with the product: the actual 420Ledger app runs a dark sidebar with a
   green active rail, so the mockup does too. A prospect who books a consult
   sees in the demo exactly what the marketing page promised. */
.product-frame {
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20,24,31,.07);
  overflow: hidden;
}
.product-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
/* The traffic lights lose the candy colours — three hairline dots. The frame
   is an instrument panel, not a macOS window cosplay. */
.traffic { display: flex; gap: 6px; }
.traffic span, .traffic span:first-child, .traffic span:nth-child(2), .traffic span:nth-child(3) {
  width: 8px; height: 8px; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
}
.url-pill { flex: 1; max-width: 300px; padding: 6px 12px; border-radius: 4px; background: var(--tint); color: var(--muted); font-family: var(--mono); font-size: 11.5px; text-align: center; }
/* LABELLED ON THE IMAGE, not in a caption. This is a mockup showing invented
   financials for an invented dispensary; a screenshot of it gets cropped and
   reposted, and the label has to travel with it. */
.demo-tag {
  flex: none;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--body);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.product-app { display: grid; grid-template-columns: 200px 1fr; min-height: 444px; background: #fff; }
.product-side { padding: 16px 12px; background: var(--ink-deep); border-right: 0; }
.demo-org {
  padding: 12px; border-radius: var(--r);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: var(--on-dark); font-weight: 650; font-size: 13px; line-height: 1.35;
}
.demo-org small { display: block; color: var(--on-dark-mute); font-family: var(--mono); font-size: 10.5px; font-weight: 500; margin-top: 4px; }
.tab-list { display: grid; gap: 2px; margin-top: 16px; }
.demo-tab {
  width: 100%; text-align: left; border: 0; border-radius: 4px;
  background: transparent; color: var(--on-dark-mute);
  /* 44px: these are real buttons in the mockup and they get tapped. */
  min-height: 44px; padding: 10px 11px;
  border-left: 2px solid transparent;
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.demo-tab:hover { background: rgba(255,255,255,.05); color: var(--on-dark); }
/* The real app's active state: bright green text on a green-tinted rail. */
.demo-tab.active {
  background: rgba(34,193,134,.10);
  color: var(--brand-bright);
  border-left-color: var(--brand-bright);
  font-weight: 650;
}
/* CONTAINER QUERIES, not viewport ones. This frame sits in a two-column hero,
   so at 1280px wide it is only ~500px itself — what matters is how wide the
   FRAME is, which is exactly what a container query asks. */
.product-main { padding: 20px; min-width: 0; container-type: inline-size; background: var(--canvas); }

@container (max-width: 460px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric .v { font-size: 21px; }
  .panel-head h3 { font-size: 21px; }
}
@container (max-width: 320px) {
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
}
.demo-panel { display: none; }
.demo-panel.active { display: block; animation: panelIn .24s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.panel-kicker { color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.panel-head h3 { font-size: 24px; letter-spacing: -.035em; line-height: 1.15; margin-top: 2px; }
.status-pill { padding: 6px 10px; border-radius: 4px; background: var(--brand-soft); color: var(--brand-hover); font-family: var(--mono); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* The metric strip is the app's own idiom: one hairline slab, tiles divided
   by 1px of ground — not three floating cards. gap:1px over a --line ground
   draws the rules for free. */
.metric-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-bottom: 14px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.metric { background: #fff; padding: 14px; }
.metric .k { color: var(--muted); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; }
.metric .v { margin-top: 7px; font-size: clamp(19px, 4.4cqi, 25px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric .d { margin-top: 6px; color: var(--brand); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.table-card { border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow-x: auto; }
.table-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--tint); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 0; }
td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--body); font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:first-child td { border-top: 0; }
/* THE LABEL COLUMN IS THE ONE THAT GIVES.
   Everything was nowrap, so a long row label pushed the table past the frame
   and the LAST column got cut — which is the §280E treatment, the entire
   point of the table. The label wraps; the amount and the verdict stay whole. */
td:first-child { text-align: left; color: var(--ink); font-weight: 650; white-space: normal; min-width: 0; }
td:last-child { padding-left: 8px; }
/* Verdicts wear the mono register and a square dot — colour is never the
   only encoding, same rule as the app's badges. */
.ok, .warn, .no { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.ok::before, .warn::before, .no::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 1.5px; margin-right: 6px; vertical-align: 1px;
}
.ok { color: var(--brand); }        .ok::before { background: var(--brand); }
.warn { color: var(--amber); }      .warn::before { background: var(--amber); }
.no { color: #B42318; }             .no::before { background: #B42318; }

/* ============================================================ sections */
.section { padding: clamp(72px, 9vw, 120px) 0; }
/* The wash bands are ruled ledger paper — the grid at whisper alpha plus the
   hairline edges makes the band a MATERIAL, not a background-color change. */
.section.alt { background: var(--tint); background-image: var(--grid); border-block: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 56px); }
.section-head p { margin-top: 18px; color: var(--body); font-size: 18px; line-height: 1.7; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Hairline border, no shadow stack. A 1px rule reads as precise. */
.feature-card, .step-card, .quote-card, .state-card {
  background: var(--card); border-radius: var(--r-lg); padding: 26px;
  border: 1px solid var(--line);
}
.feature-card h3, .step-card h3, .state-card h3 { font-size: 20px; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 10px; }
.feature-card p, .step-card p, .state-card p { color: var(--body); font-size: 15.8px; line-height: 1.68; }
/* The brand mark's grammar, reused: ink square, green-bright glyph. The pale
   mint chips read as placeholders; these read as keys on the instrument. */
.icon-dot {
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--ink); color: var(--brand-bright);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  margin-bottom: 18px;
}
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.step-card { position: relative; overflow: hidden; }
.step-card::after { content: none; }
/* Step letters set as display characters — "A." like a schedule line, with
   the period in brand green and a ledger rule beneath. */
.step-card .icon-dot {
  background: transparent;
  color: var(--ink);
  font-family: Archivo, Inter, sans-serif;
  font-variation-settings: "wdth" 112;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  width: auto; height: auto;
  display: block; line-height: 1;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.step-card .icon-dot::after { content: "."; color: var(--brand); }
.step-card h3 { margin-top: 16px; }

/* ============================================================ dark bands
   The ink-deep bands were empty rectangles — all that negative space read as
   unfinished rather than confident. Three structural moves, all in the
   band's own language: the ledger grid in reverse (light on dark), a huge
   §-watermark set in the display face (the statute IS the brand), and the
   §280E split rule fused into the bottom edge so the band ends the way the
   argument does — most of the line disallowed. */
.spotlight {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 48px 44px 52px;
  background: var(--ink-deep); color: var(--on-dark);
  background-image: var(--grid-dark), radial-gradient(120% 140% at 85% -10%, rgba(34,193,134,.10), transparent 55%);
}
.spotlight::before {
  content: "§"; position: absolute; right: -14px; top: -70px;
  font-family: Archivo, Inter, sans-serif; font-variation-settings: "wdth" 112;
  font-weight: 800; font-size: 340px; line-height: 1;
  color: rgba(255,255,255,.045);
  pointer-events: none; user-select: none;
}
.spotlight::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--brand-bright) 0 34%, var(--ink-deep) 34% calc(34% + 2px),
    rgba(255,255,255,.30) calc(34% + 2px) 100%);
}
.spotlight h2, .spotlight p { position: relative; }
.spotlight p { color: var(--on-dark-mute); font-size: 18px; line-height: 1.7; margin-top: 14px; max-width: 760px; }
.spotlight h2 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq-item { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; transition: border-color .16s var(--ease); }
.faq-item.open { border-color: var(--line-strong); }
.faq-q { width: 100%; border: 0; background: transparent; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); font: inherit; font-size: 17px; font-weight: 750; text-align: left; cursor: pointer; }
/* The toggle is a key: tint square idle, ink square with the green glyph
   when the answer is open. */
.faq-q span { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; background: var(--tint); color: var(--brand-hover); flex: none; transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.faq-item.open .faq-q span { transform: rotate(45deg); background: var(--ink); color: var(--brand-bright); }
.faq-a { display: none; padding: 0 22px 22px; color: var(--body); font-size: 16px; line-height: 1.7; }
.faq-item.open .faq-a { display: block; }
.cta-section { padding: clamp(72px, 9vw, 120px) 0; }
.cta-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 56px; color: var(--on-dark);
  background: var(--ink-deep);
  background-image: var(--grid-dark), radial-gradient(130% 150% at 90% 110%, rgba(34,193,134,.12), transparent 55%);
}
.cta-card::before {
  content: "§"; position: absolute; right: 8px; bottom: -120px;
  font-family: Archivo, Inter, sans-serif; font-variation-settings: "wdth" 112;
  font-weight: 800; font-size: 420px; line-height: 1;
  color: rgba(255,255,255,.05);
  pointer-events: none; user-select: none;
}
.cta-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--brand-bright) 0 34%, var(--ink-deep) 34% calc(34% + 2px),
    rgba(255,255,255,.30) calc(34% + 2px) 100%);
}
.cta-card h2, .cta-card p, .cta-card .actions { position: relative; }
.cta-card h2 { font-size: clamp(36px, 5vw, 62px); max-width: 760px; }
.cta-card p { color: var(--on-dark-mute); font-size: 18px; line-height: 1.7; max-width: 660px; margin-top: 18px; }
/* On the dark ground the primary inverts to the bright green with ink text —
   6.90:1 — rather than white-on-green, which would be the weaker pair here. */
.cta-card .btn-primary { background: var(--brand-bright); color: var(--ink-deep); }
.cta-card .btn-primary:hover { background: #35D89B; }
.cta-card .btn-secondary { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.cta-card .btn-secondary:hover { background: rgba(255,255,255,.08); }
.legal { width: min(860px, calc(100% - 48px)); margin: 0 auto; padding: 76px 0 96px; }
.legal-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); padding: 42px; }
.legal h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 10px; }
.legal .effective { color: var(--muted); font-family: var(--mono); font-size: 13px; margin-bottom: 34px; }
.legal h2 { font-size: 22px; letter-spacing: -.025em; margin: 34px 0 10px; }
.legal h3 { font-size: 17px; margin: 20px 0 8px; }
.legal p, .legal li { color: var(--body); font-size: 15.8px; line-height: 1.75; margin-bottom: 12px; }
.legal ul { margin: 8px 0 16px 22px; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.preamble, .contact-card { padding: 18px 20px; border-radius: var(--r); background: var(--brand-soft); border-left: 3px solid var(--brand); color: var(--body); margin: 18px 0 26px; }
.form-panel { margin-top: 30px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); padding: 28px; max-width: 740px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-group.full { grid-column: 1 / -1; }
label { display: block; font-size: 14px; font-weight: 720; margin-bottom: 7px; color: var(--ink); }
/* --line-strong for the 3:1 a control edge needs, and 16px so iOS does not
   zoom the page on focus and leave it scrolled sideways. */
input, select, textarea { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; color: var(--ink); font: 16px Inter, sans-serif; padding: 12px 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
textarea { min-height: 118px; resize: vertical; }
.form-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.footer { padding: 56px 0 28px; background: var(--canvas); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 34px; }
.footer p { margin-top: 14px; color: var(--body); max-width: 340px; font-size: 14px; }
.footer h4 { color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; margin-bottom: 12px; }
/* 44px each: these were ~24px, the smallest targets on the page. */
.footer a { display: flex; align-items: center; min-height: 44px; color: var(--body); font-size: 14px; }
.footer a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 75%); mask-image: linear-gradient(180deg, transparent 40%, #000 75%); }
  .hero h1 { max-width: 12.8ch; }
  .card-grid, .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .spotlight::before { font-size: 240px; top: -50px; }
  .cta-card::before { font-size: 300px; bottom: -90px; }
}
@media (max-width: 768px) {
  .container { width: min(100% - 36px, 1160px); }
  .nav-inner { height: 68px; }
  .nav-actions { display: none; }
  .hamburger { display: block; }
  .nav-links { position: absolute; left: 18px; right: 18px; top: 74px; display: grid; gap: 4px; background: #fff; padding: 10px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20,24,31,.07); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .25s ease, opacity .2s ease; }
  .nav-links.open { max-height: 620px; opacity: 1; pointer-events: auto; }
  .nav-links .btn-primary { display: inline-flex; width: 100%; margin-top: 4px; }
  /* the menu is where Client Login lives on mobile */
  .nav-links .nav-link[href*="portal/login"] { display: inline-flex; }
  .nav-link { padding: 12px 13px; border-radius: var(--r); }
  .hero { padding: 54px 0 44px; }
  .hero-grid { gap: 34px; }
  .hero h1 { font-size: 42px; }
  .hero p { font-size: 17px; }
  .actions { align-items: stretch; flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; }
  .product-app { grid-template-columns: 1fr; }
  .product-side { border-right: 0; border-bottom: 0; }
  .tab-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .demo-tab { min-height: 44px; border-left: 0; border-radius: 4px; }
  .demo-tab.active { box-shadow: inset 2px 0 0 var(--brand-bright); }
  .metric-grid, .card-grid, .steps, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .section, .cta-section { padding: 68px 0; }
  .section-head h2 { font-size: 34px; }
  .spotlight { padding: 34px 24px 40px; }
  .cta-card { padding: 44px 24px 34px; border-radius: var(--r-lg); }
  .spotlight::before { font-size: 190px; right: -30px; }
  .cta-card::before { font-size: 220px; right: -20px; bottom: -60px; }
  .legal { width: min(100% - 36px, 860px); padding: 48px 0 68px; }
  .legal-card { padding: 28px 22px; }
  .footer-bottom { flex-direction: column; }
}


/* ============================================================ the §280E split
   THE ONE MEMORABLE ELEMENT, and the analogue of an aging bar: a full-bleed
   rule split into the two halves every dollar in a dispensary falls into.
   Deductible cost of goods on the left, disallowed on the right.

   It narrates the pitch structurally instead of decorating it — §280E is not a
   feature of this practice, it is the whole reason the practice exists, and
   the proportions are the argument: most of what an ordinary business deducts,
   a dispensary cannot.

   Used at section boundaries only — and echoed on the dark bands' edges — so
   nothing else on the page competes with it. */
.split {
  --cogs: 38%;
  display: block;
  width: 100%;
  height: 7px;
  display: grid;
  grid-template-columns: var(--cogs) 1fr;
  gap: 2px;                   /* a ground gap, so the two read apart without
                                 relying on colour alone */
  background: var(--canvas);
}
.split i { display: block; border-radius: 1px; }
.split i:first-child { background: var(--brand); }
.split i:last-child  { background: var(--ink); }

.split-lab {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: baseline;
  padding: 12px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
.split-lab b { color: var(--ink); font-weight: 650; }
.split-lab em { font-style: normal; color: var(--brand-hover); font-weight: 650; }