/* ═══════════════════════════════════════════════════════════════════════════
   Etvora — design system
   Dark, tool-like, high contrast. Monospace micro-labels + hi-vis amber.
   No external fonts: system stacks only, so nothing render-blocks on a
   tradie's phone over 4G in a suburb with one bar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --bg:            #0B0D0C;
  --bg-panel:      #111513;
  --bg-raised:     #171C19;
  --bg-inset:      #0A0C0B;
  --line:          #232A26;
  --line-strong:   #39443D;

  /* type */
  --text:          #E9EEE9;
  --text-dim:      #9DA9A2;
  --text-faint:    #6C776F;

  /* signal colours */
  --hivis:         #F2B705;   /* safety amber — primary accent      */
  --hivis-deep:    #C08F00;
  --hivis-soft:    rgba(242,183,5,.12);
  --signal:        #35D0A5;   /* answered / healthy                 */
  --signal-soft:   rgba(53,208,165,.12);
  --alert:         #FF5C47;   /* life safety                        */
  --alert-soft:    rgba(255,92,71,.12);

  /* type stacks */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* metrics */
  --maxw: 1180px;
  --r: 3px;               /* deliberately near-sharp: instrument, not toy */
  --nav-h: 62px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* zh pages need a CJK-first stack and looser tracking — negative letter-spacing
   makes Han characters look broken, and CJK wants more leading than Latin. */
html[lang^="zh"] { --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                           -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[lang^="zh"] body { line-height: 1.78; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4 {
  letter-spacing: -.005em; line-height: 1.22;
}
html[lang^="zh"] .h1 { line-height: 1.16; letter-spacing: -.01em; }
html[lang^="zh"] .lede { line-height: 1.82; }
/* mono micro-labels stay Latin — they read as technical markings, which is the point */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--hivis); color: #0B0D0C; }

a { color: var(--hivis); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

.section { padding-block: clamp(64px, 9vw, 116px); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hivis); color: #0B0D0C; padding: 10px 18px; font: 600 14px/1 var(--sans);
}
.skip:focus { left: 12px; top: 12px; }

/* ── monospace micro-label: the signature of the whole design ───────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hivis);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--hivis); flex: none;
}
.eyebrow--dim { color: var(--text-faint); }
.eyebrow--dim::before { background: var(--line-strong); }

/* ── headings ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 750; letter-spacing: -.022em; line-height: 1.1; }

.h1 {
  font-size: clamp(34px, 6.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 800;
}
.h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.1; }
.h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.25; letter-spacing: -.015em; }

.lede {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-dim);
  line-height: 1.62;
  max-width: 62ch;
  margin: 20px 0 0;
}

.hl { color: var(--hivis); }
.hl-signal { color: var(--signal); }
.nowrap { white-space: nowrap; }

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(11,13,12,.86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 26px; width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand__name {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
}
.brand__name span { color: var(--hivis); }

.nav__links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav__links a {
  font-size: 13.5px; color: var(--text-dim); font-weight: 500;
  transition: color .16s var(--ease);
}
.nav__links a:hover { color: var(--text); text-decoration: none; }

.lang {
  display: flex; align-items: center; gap: 0; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
}
.lang a { padding: 5px 9px; color: var(--text-faint); }
.lang a:hover { color: var(--text); text-decoration: none; background: var(--bg-raised); }
.lang a[aria-current="true"] { background: var(--hivis); color: #0B0D0C; font-weight: 700; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  font: 650 14.5px/1 var(--sans);
  letter-spacing: -.005em;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .14s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), box-shadow .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--hivis); color: #0B0D0C;
  box-shadow: 0 0 0 1px rgba(242,183,5,.28), 0 8px 26px -12px rgba(242,183,5,.7);
}
.btn--primary:hover { background: #FFC61A; box-shadow: 0 0 0 1px rgba(242,183,5,.4), 0 12px 30px -10px rgba(242,183,5,.8); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text-faint); background: var(--bg-raised); }

.btn--sm { padding: 9px 15px; font-size: 13px; }
.btn__ico { font-family: var(--mono); font-size: 15px; line-height: 1; }

/* ── panels ─────────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
/* technical-drawing corner ticks */
.panel--ticked::before,
.panel--ticked::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
}
.panel--ticked::before { top: -1px; left: -1px; border-top: 1px solid var(--hivis); border-left: 1px solid var(--hivis); }
.panel--ticked::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--hivis); border-right: 1px solid var(--hivis); }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { position: relative; padding-block: clamp(58px, 8vw, 104px) clamp(52px, 7vw, 88px); overflow: hidden; }

.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 92% 68% at 50% 0%, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse 92% 68% at 50% 0%, #000 22%, transparent 76%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -340px; left: 50%; translate: -50% 0;
  width: 900px; height: 620px;
  background: radial-gradient(ellipse at center, rgba(242,183,5,.10), transparent 62%);
}
.hero__in { position: relative; }

.hero__grid { display: grid; gap: clamp(38px, 5vw, 62px); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); } }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.trust {
  list-style: none; margin: 30px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.trust li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: 7px;
}
.trust li::before { content: "✓"; color: var(--signal); font-size: 11px; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: 100px; background: var(--bg-panel);
}
.status__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none;
  box-shadow: 0 0 0 0 rgba(53,208,165,.6); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,208,165,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(53,208,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,208,165,0); }
}

/* ── console panel: the real-call demo ──────────────────────────────────── */

.console {
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
}
.console__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.console__dots { display: flex; gap: 5px; }
.console__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.console__title { color: var(--text-dim); }
.console__badge {
  margin-left: auto; color: var(--signal);
  border: 1px solid rgba(53,208,165,.3); background: var(--signal-soft);
  padding: 2px 8px; border-radius: 100px; letter-spacing: .1em;
}
.console__badge--alert { color: var(--alert); border-color: rgba(255,92,71,.35); background: var(--alert-soft); }

.console__body { padding: 6px 0; }
.console__scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.console__scroll::-webkit-scrollbar { width: 8px; }
.console__scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

.line {
  display: grid; grid-template-columns: 62px 74px 1fr; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(35,42,38,.55);
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.line:last-child { border-bottom: 0; }
.line.is-on { opacity: 1; transform: none; }
.line--instant { opacity: 1; transform: none; }
@media (max-width: 620px) { .line { grid-template-columns: 1fr; gap: 4px; padding: 12px 15px; } }

.line__t   { color: var(--text-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.line__who { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.line__txt { color: var(--text); word-break: break-word; }

.line--caller .line__who { color: var(--text-faint); }
.line--caller .line__txt { color: var(--text-dim); }
.line--agent  { background: linear-gradient(90deg, rgba(242,183,5,.055), transparent 62%); }
.line--agent  .line__who { color: var(--hivis); }
.line--agent  .line__txt { color: var(--text); }
.line--alert  { background: linear-gradient(90deg, rgba(255,92,71,.11), transparent 62%); }
.line--alert  .line__who { color: var(--alert); }
.line--alert  .line__txt { color: #FFD9D2; font-weight: 600; }

.line__ms { color: var(--hivis-deep); font-size: 11px; }

.console__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-panel);
}
.console__note {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6;
  color: var(--text-faint); letter-spacing: .02em; margin: 0; flex: 1 1 260px;
}

.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.demo-tabs button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r); cursor: pointer;
  background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--line);
  transition: all .16s var(--ease);
}
.demo-tabs button:hover { border-color: var(--line-strong); color: var(--text); }
.demo-tabs button[aria-selected="true"] {
  background: var(--hivis-soft); border-color: rgba(242,183,5,.45); color: var(--hivis); font-weight: 700;
}

/* ── SMS card ───────────────────────────────────────────────────────────── */

.sms {
  background: var(--bg-inset); border: 1px solid var(--line-strong); border-radius: var(--r);
  overflow: hidden;
}
.sms__bar {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  background: var(--bg-raised); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.sms__body {
  margin: 0; padding: 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.72;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.sms__body b { color: var(--hivis); font-weight: 700; }
.sms--alert .sms__body b { color: var(--alert); }

/* ── steps ──────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.step__n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--hivis); display: block; margin-bottom: 14px;
}
.step p { color: var(--text-dim); font-size: 14.5px; margin: 10px 0 0; }

.code {
  display: block; margin-top: 16px; padding: 12px 14px;
  background: var(--bg-inset); border: 1px solid var(--line); border-left: 2px solid var(--hivis);
  border-radius: var(--r);
  font-family: var(--mono); font-size: 14px; color: var(--hivis);
  letter-spacing: .04em; word-break: break-all;
  cursor: pointer; position: relative;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.code:hover { background: #0E1210; border-color: var(--line-strong); border-left-color: var(--hivis); }
.code::after {
  content: attr(data-copy); position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.code.is-copied::after { content: "✓ copied"; color: var(--signal); }

/* ── feature list ───────────────────────────────────────────────────────── */

.feat { display: flex; flex-direction: column; gap: 0; }
.feat__ico {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg-inset); color: var(--hivis);
  font-family: var(--mono); font-size: 15px; margin-bottom: 16px;
}
.feat p { color: var(--text-dim); font-size: 14.5px; margin: 9px 0 0; }

.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; gap: 10px; font-size: 14px; color: var(--text-dim); }
.checks li::before { content: "✓"; color: var(--signal); font-family: var(--mono); font-size: 12px; flex: none; margin-top: 3px; }

/* ── pricing ────────────────────────────────────────────────────────────── */

.tiers { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; display: flex; flex-direction: column; gap: 0; position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tier:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tier--best { border-color: rgba(242,183,5,.5); background: linear-gradient(180deg, rgba(242,183,5,.055), var(--bg-panel) 42%); }
@media (min-width: 860px) { .tier--best { transform: scale(1.025); } .tier--best:hover { transform: scale(1.025) translateY(-2px); } }

.tier__tag {
  position: absolute; top: -1px; right: 18px;
  background: var(--hivis); color: #0B0D0C;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px 5px; border-radius: 0 0 var(--r) var(--r);
}
.tier__name { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.tier__price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px; }
.tier__amt { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.tier__per { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.tier__note { font-size: 12.5px; color: var(--text-faint); font-family: var(--mono); margin: 0 0 20px; }
.tier .checks { margin: 4px 0 24px; }
.tier .checks li { font-size: 13.5px; }
.tier__cta { margin-top: auto; }
.tier__over {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; letter-spacing: .02em;
}

.pricing-note {
  margin-top: 26px; padding: 16px 20px;
  border: 1px solid var(--line); border-left: 2px solid var(--hivis); border-radius: var(--r);
  background: var(--bg-panel);
  font-size: 13.5px; color: var(--text-dim);
}
.pricing-note strong { color: var(--text); }

/* ── trust / compliance ─────────────────────────────────────────────────── */

.pledge { border-left: 2px solid var(--line-strong); padding-left: 18px; }
.pledge--alert { border-left-color: var(--alert); }
.pledge--signal { border-left-color: var(--signal); }
.pledge p { color: var(--text-dim); font-size: 14px; margin: 8px 0 0; }
.pledge__law { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text-faint); margin-top: 12px; display: block; text-transform: uppercase; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0;
  font-size: 16px; font-weight: 620; letter-spacing: -.012em; color: var(--text);
  position: relative; transition: color .16s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--hivis); }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -52%;
  font-family: var(--mono); font-size: 21px; color: var(--hivis); line-height: 1;
  transition: rotate .2s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--hivis); }
.faq__a { padding: 0 40px 24px 0; color: var(--text-dim); font-size: 14.8px; max-width: 78ch; }
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a code {
  font-family: var(--mono); font-size: 13px; background: var(--bg-inset);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 2px; color: var(--hivis);
}

/* ── contact ────────────────────────────────────────────────────────────── */

.contact { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact { grid-template-columns: repeat(2, 1fr); } }

.contact__card {
  display: flex; align-items: center; gap: 16px; padding: 22px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.contact__card:hover { border-color: var(--hivis); background: var(--bg-raised); text-decoration: none; }
.contact__ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg-inset);
  font-size: 18px;
}
.contact__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); display: block; }
.contact__val { font-size: 17px; font-weight: 650; color: var(--text); letter-spacing: -.015em; word-break: break-all; }

/* ── CTA band ───────────────────────────────────────────────────────────── */

.band {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: linear-gradient(135deg, rgba(242,183,5,.09), transparent 46%), var(--bg-panel);
  padding: clamp(32px, 5vw, 56px);
}
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 50%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 100% at 100% 50%, #000, transparent 70%);
}
.band > * { position: relative; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 44px 34px; background: var(--bg-inset); }
.foot__grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px; font-weight: 600;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { color: var(--text-dim); font-size: 14px; }
.foot ul a:hover { color: var(--hivis); }
.foot__blurb { color: var(--text-faint); font-size: 13.5px; max-width: 42ch; margin: 14px 0 0; }
.foot__legal {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-faint);
}
.foot__legal .sep { color: var(--line-strong); }

.todo {
  background: var(--alert-soft); border: 1px dashed rgba(255,92,71,.45);
  color: #FFC0B6; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 1px 5px; border-radius: 2px; text-transform: uppercase;
}

/* ── legal pages ────────────────────────────────────────────────────────── */

.doc { max-width: 780px; }
.doc h2 { font-size: 21px; margin: 42px 0 12px; letter-spacing: -.015em; }
.doc h2:first-of-type { margin-top: 30px; }
.doc p, .doc li { color: var(--text-dim); font-size: 15.2px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--text); font-weight: 650; }
.doc .updated { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }

.callout {
  border: 1px solid var(--line); border-left: 2px solid var(--hivis);
  background: var(--bg-panel); border-radius: var(--r);
  padding: 18px 20px; margin: 24px 0;
}
.callout p { margin: 0; font-size: 14.2px; }
.callout--alert { border-left-color: var(--alert); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── utilities ──────────────────────────────────────────────────────────── */

.mt-0 { margin-top: 0; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 44px; }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.section-head { max-width: 70ch; margin-bottom: clamp(34px, 4.5vw, 54px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── demo layout: console + SMS side by side on wide screens ────────────── */

@media (min-width: 1000px) {
  #demo-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; }
}

/* ── draft banner (currently UNUSED — markup removed from all pages) ────── */
/* Kept as an escape hatch: if you ever want a staging banner again, add
     <div class="draftbar" role="status"><span>DRAFT</span> …text… </div>
   just inside <body data-draft="true"> and it appears. Nothing else needed. */

.draftbar {
  display: none;
  gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 22px;
  background: repeating-linear-gradient(
    -45deg, rgba(255,92,71,.14) 0 10px, rgba(255,92,71,.06) 10px 20px);
  border-bottom: 1px solid rgba(255,92,71,.4);
  color: #FFC0B6;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; line-height: 1.5;
}
body[data-draft="true"] .draftbar { display: flex; }
.draftbar span:first-child {
  background: var(--alert); color: #180806; font-weight: 700;
  letter-spacing: .14em; padding: 2px 7px; border-radius: 2px; flex: none;
}
.draftbar code {
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,92,71,.28);
  padding: 0 5px; border-radius: 2px; color: #FFD9D2;
}