/* StillSuite placeholder mockups · Hybrid C4 "Split Sheet"
   A warm, soft D5 page holds an inset dark D4 drafting panel. The D5 app mock is
   lifted off the board across the panel's left edge on a deep shadow.
   Light primary; dark via prefers-color-scheme or [data-theme="dark"].
   The drafting panel keeps D4's palette in both themes. */

:root {
  --bg: #FBF8F0;
  --surface: #ffffff;
  --surface-2: #F5EFE2;
  --ink: #1d1914;
  --ink-soft: #625748;
  --line: #e4dccb;
  --copper: #B5712A;
  --copper-ink: #8A5218;
  --on-copper: #ffffff;
  --green: #267355;
  --green-soft: #e3efe8;
  --amber: #8a5a0c;
  --amber-soft: #f6ead2;
  --shadow: 0 1px 2px rgba(93, 71, 45, .08), 0 12px 32px -12px rgba(93, 71, 45, .22);
  --btn: #8A5218;
  --btn-hover: #6f4010;
  --bezel: #1d1914;
  /* depth between the two worlds */
  --panel-shadow: 0 2px 4px rgba(36, 24, 15, .12), 0 30px 60px -20px rgba(36, 24, 15, .45);
  --lift-shadow: 0 2px 4px rgba(36, 24, 15, .16), 0 14px 28px -10px rgba(36, 24, 15, .34), 0 48px 84px -26px rgba(36, 24, 15, .6);
  --phone-ring: 0 0 0 1px rgba(36, 24, 15, .12);
  /* drafting panel: D4 palette, identical in both themes */
  --panel: #12201c;
  --panel-raise: #182a25;
  --grid: rgba(184, 150, 85, .07);
  --grid-major: rgba(184, 150, 85, .13);
  --draw: #D4924A;
  --draw-soft: rgba(212, 146, 74, .45);
  --foil: #B89655;
  --panel-ink: #E9E1CF;
  --panel-ink-soft: #a3b3a9;
  --head: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161412;
    --surface: #1f1c19;
    --surface-2: #27231f;
    --ink: #f2ebdf;
    --ink-soft: #b3a794;
    --line: #34302a;
    --copper: #d08a45;
    --copper-ink: #e3a56c;
    --on-copper: #1d1914;
    --green: #5fae8a;
    --green-soft: #1d3329;
    --amber: #e0b25c;
    --amber-soft: #3a2e17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -12px rgba(0, 0, 0, .55);
    --btn: #d08a45;
    --btn-hover: #e09a55;
    --bezel: #27231f;
    --panel-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(212, 146, 74, .24);
    --lift-shadow: 0 0 0 1px rgba(242, 235, 223, .09), 0 2px 4px rgba(0, 0, 0, .45), 0 14px 28px -10px rgba(0, 0, 0, .6), 0 48px 84px -24px rgba(0, 0, 0, .85);
    --phone-ring: 0 0 0 1px rgba(242, 235, 223, .18);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #161412;
  --surface: #1f1c19;
  --surface-2: #27231f;
  --ink: #f2ebdf;
  --ink-soft: #b3a794;
  --line: #34302a;
  --copper: #d08a45;
  --copper-ink: #e3a56c;
  --on-copper: #1d1914;
  --green: #5fae8a;
  --green-soft: #1d3329;
  --amber: #e0b25c;
  --amber-soft: #3a2e17;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -12px rgba(0, 0, 0, .55);
  --btn: #d08a45;
  --btn-hover: #e09a55;
  --bezel: #27231f;
  --panel-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(212, 146, 74, .24);
  --lift-shadow: 0 0 0 1px rgba(242, 235, 223, .09), 0 2px 4px rgba(0, 0, 0, .45), 0 14px 28px -10px rgba(0, 0, 0, .6), 0 48px 84px -24px rgba(0, 0, 0, .85);
  --phone-ring: 0 0 0 1px rgba(242, 235, 223, .18);
  color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--copper-ink); text-underline-offset: 3px; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ic { border-radius: 22%; flex: none; }
svg.i { width: 18px; height: 18px; flex: none; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--copper-ink);
  outline-offset: 2px;
}
.panel a:focus-visible { outline-color: var(--panel-ink); }

.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--btn);
  color: var(--on-copper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus-visible { top: 12px; }

/* ---------- top bar ---------- */

.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand, .brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { color: var(--ink); text-decoration: none; }
.brand-name {
  font: 600 1.3rem/1.1 var(--head);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand-stack { display: flex; flex-direction: column; min-width: 0; }
.by { font-size: 12px; line-height: 1.25; color: var(--ink-soft); text-decoration: none; }
.by:hover, a.brand-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.top-links { display: flex; align-items: center; gap: 18px; flex: none; }
.top-links a:not(.btn) {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.top-links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--btn); color: var(--on-copper); }
.btn-primary:hover { background: var(--btn-hover); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-secondary, .btn-out { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover, .btn-out:hover { border-color: var(--copper); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { min-height: 56px; min-width: 240px; padding: 0 32px; font-size: 18px; }

/* ---------- hero ---------- */

.hero {
  --gap: clamp(28px, 4.4vw, 56px);
  --m-w: clamp(264px, 28vw, 350px);
  --r-k: .5;
  --panel-min: 520px;
  padding: clamp(28px, 4.5vw, 56px) 0 56px;
  background: radial-gradient(760px 420px at 94% -6%, color-mix(in srgb, var(--copper) 14%, transparent), transparent 70%);
}
.hero.is-sales { --m-w: clamp(250px, 22vw, 262px); --r-k: .58; --panel-min: 540px; }
.hero.is-gate { --m-w: clamp(290px, 29vw, 370px); --r-k: .46; --panel-min: 450px; }

.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hero-copy, .board { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--copper-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
h1 {
  margin-bottom: 18px;
  font: 600 clamp(2.15rem, 1rem + 3.1vw, 3.3rem)/1.04 var(--head);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.nb { display: inline-block; }
.lead {
  max-width: 36em;
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.status {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(93, 71, 45, .06);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}
.dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
}
.fineprint { margin-top: 8px; color: var(--ink-soft); font-size: 13px; }
.help { margin-top: 18px; color: var(--ink-soft); font-size: 15px; }

/* ---------- drafting board: panel + lifted mock ---------- */

.board { position: relative; display: flex; flex-direction: column; }
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 16px 60px;
  border-radius: 20px;
  background-color: var(--panel);
  background-image:
    radial-gradient(90% 70% at 72% 18%, rgba(212, 146, 74, .09), transparent 70%),
    repeating-linear-gradient(to right, var(--grid-major) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 24px);
  color: var(--panel-ink);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  isolation: isolate;
}
.panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(212, 146, 74, .3);
  border-radius: 14px;
  pointer-events: none;
}
.dwg { min-width: 0; margin-top: auto; }
.dwg svg { display: block; width: 100%; height: auto; }

.strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  overflow: hidden;
  border: 1px solid var(--draw-soft);
  border-radius: 12px;
  background: var(--panel-raise);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.strip .cell {
  flex: 1 1 150px;
  min-width: 0;
  padding: 7px 10px 8px;
  box-shadow: 1px 0 0 var(--draw-soft), 0 1px 0 var(--draw-soft);
}
.strip .k {
  display: block;
  margin-bottom: 2px;
  color: var(--foil);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.strip .v { display: block; color: var(--panel-ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

/* the lifted card */
.lift {
  position: relative;
  z-index: 3;
  margin: -44px 12px 0;
}

/* callout key, shared by drawing and legend */
.key {
  position: absolute;
  top: -8px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--draw);
  border-radius: 50%;
  background: var(--panel);
  color: var(--panel-ink);
  font: 500 11px/1 var(--mono);
}

/* ---------- invite form (hub) ---------- */

.capture { max-width: 30rem; margin-bottom: 22px; scroll-margin-top: 96px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 12px; }
.field label { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.field label span { font-weight: 400; }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 55%, var(--line));
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.2 var(--sans);
  box-shadow: 0 1px 2px rgba(93, 71, 45, .05);
}
.field input::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:focus-visible { border-color: var(--copper-ink); }
.capture .btn { width: 100%; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fine { margin-top: 12px; color: var(--ink-soft); font-size: 13.5px; }
#form-msg { margin-top: 8px; color: var(--amber); font-size: 14px; font-weight: 500; }
#form-msg:empty { display: none; }
.thanks { padding: 20px 22px; border-radius: 14px; background: var(--green-soft); }
.thanks h3 { margin-bottom: 4px; color: var(--green); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.thanks p { color: var(--ink); }
.thanks:focus-visible { outline-offset: 3px; }

/* ---------- UI mock card (lifted) ---------- */

.mock {
  container-type: inline-size;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--lift-shadow);
}
.mock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}
.org { display: flex; align-items: center; gap: 8px; min-width: 0; }
.org .mono { font-size: 12.5px; }
.mock-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; }
.tag-ex {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font: 400 11px/1 var(--mono);
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.idle { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.chip.idle::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* hub mock */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tile { min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); }
.tile-l { display: block; margin-bottom: 2px; color: var(--ink-soft); font-size: 11.5px; font-weight: 500; }
.tile-v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.tile-v b { color: var(--ink); font-size: 15px; font-weight: 500; }
.tile-v .u { color: var(--ink-soft); font-size: 11px; }
.prod-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.prod-list .ic { grid-row: span 2; }
.prod-list .chip { grid-column: 2; justify-self: start; }
.pname { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }

/* reporting mock */
.rep-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.code { color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rname { min-width: 0; font-size: 14.5px; font-weight: 600; }
/* narrow card (tablet and phone): the chip drops under the report name */
@container (max-width: 285px) {
  .rep-list li { grid-template-columns: 54px minmax(0, 1fr); }
  .rep-list .chip { grid-column: 2; justify-self: start; }
}
.callout {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--amber-soft);
  font-size: 13.5px;
  line-height: 1.45;
}
.callout .i { margin-top: 2px; color: var(--amber); }
.callout b { color: var(--amber); font-weight: 700; }
.fake-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--amber);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mock-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* sales phone (floats on its own, no stage) */
.lift.phone-lift { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; width: min(262px, calc(100% - 24px)); margin-inline: auto; }
.phone-lift .tag-corner {
  position: absolute;
  top: -12px;
  right: 6px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.phone {
  width: 100%;
  aspect-ratio: 300 / 548;
  min-height: 452px;
  overflow: hidden;
  border: 10px solid var(--bezel);
  border-radius: 34px;
  background: var(--bezel);
  box-shadow: var(--phone-ring), var(--lift-shadow);
}
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 16px 14px;
  border-radius: 24px;
  background: var(--surface);
}
.screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 64px;
  height: 18px;
  border-radius: 999px;
  background: var(--bezel);
  transform: translateX(-50%);
}
.s-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.timer { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.s-map {
  position: relative;
  flex: none;
  height: 86px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(115deg, transparent 44%, var(--surface) 44% 49%, transparent 49%),
    linear-gradient(24deg, transparent 57%, var(--surface) 57% 61%, transparent 61%),
    var(--surface-2);
}
.s-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  color: var(--copper-ink);
  transform: translate(-50%, -50%);
}
.s-pin svg { width: 20px; height: 20px; }
.s-acct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 12px; }
.s-acct strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.s-acct .mono { color: var(--ink-soft); font-size: 12.5px; }
.s-label { margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.pick.on { border-color: var(--btn); background: var(--btn); color: var(--on-copper); }
.s-spacer { flex: 1 1 auto; min-height: 10px; }
.s-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 10px;
  background: var(--btn);
  color: var(--on-copper);
  font-size: 16px;
  font-weight: 700;
}
.s-next {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
}
.s-next .i { width: 16px; height: 16px; color: var(--copper-ink); }

/* gateway card (lifted) */
.apps { padding: 0; overflow: hidden; }
.apps h2 {
  padding: 16px 18px 10px;
  font: 700 17px/1.3 var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
}
.app-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.app-row .leg-ico, .app-row .leg-ico > img { width: 36px; height: 36px; }
.app-row:hover { background: var(--surface-2); }
.app-row:focus-visible { outline-offset: -3px; }
.app-t { display: flex; flex-direction: column; min-width: 0; }
.app-t strong { font-size: 16px; font-weight: 700; }
.app-t span { color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.app-row .go { color: var(--ink-soft); }
.app-row:hover .go { color: var(--copper-ink); }

/* ---------- legend (keyed to the drawing) ---------- */

.sec { padding: clamp(44px, 6vw, 72px) 0 0; }
.sec:last-of-type { padding-bottom: clamp(44px, 6vw, 72px); }
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-bottom: clamp(24px, 3.5vw, 34px);
}
.sec-note { color: var(--ink-soft); font-size: 12.5px; letter-spacing: .04em; }
h2 {
  font: 600 clamp(1.55rem, 1.1rem + 1.7vw, 2.15rem)/1.1 var(--head);
  letter-spacing: .005em;
  text-transform: uppercase;
}

.legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.leg {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.leg-ico { position: relative; width: 44px; height: 44px; }
.leg-ico > img { width: 44px; height: 44px; border-radius: 22%; }
.leg-ico.sq {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--copper-ink);
}
.leg-ico.sq svg { width: 22px; height: 22px; }
.leg-ico.tile {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--draw-soft);
}
.leg-ico.tile .key {
  position: static;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: var(--draw);
  font-size: 18px;
}
.leg-body { min-width: 0; }
.leg-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.leg-name a { color: var(--ink); text-decoration: none; }
.leg-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.leg-title { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.leg-title .mono { font-size: 14px; font-weight: 500; }
.leg-text { margin-top: 2px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.leg.note {
  display: block;
  align-self: start;
  background: var(--surface-2);
  box-shadow: none;
}
.leg.note .mono { display: block; margin-bottom: 6px; color: var(--copper-ink); font-size: 12px; font-weight: 500; }
.leg.note p { color: var(--ink); }
.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--copper-ink);
  font-weight: 600;
  text-decoration: none;
}
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 700px) {
  .legend.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend .wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .legend.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legend .wide { grid-column: span 2; }
}

/* ---------- points, forms, price ---------- */

.feat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 36px; }
.feat { min-width: 0; }
.feat .ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--copper-ink);
}
.feat .ico svg { width: 20px; height: 20px; }
.feat h3 { margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.feat p { color: var(--ink-soft); font-size: 16px; }
@media (min-width: 760px) {
  .feat-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.forms-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.forms { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.forms li { padding: 14px 0; border-top: 1px solid var(--line); }
.forms .fcode { display: block; margin-bottom: 2px; color: var(--copper-ink); font-family: var(--mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.forms .fname { display: block; font-size: 16px; font-weight: 500; }
.price {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.price-line { font-size: 18px; font-weight: 600; line-height: 1.45; }
.price-line .amt { color: var(--copper-ink); font-family: var(--mono); font-size: 1.5em; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price .fineprint { margin-top: 8px; }
.price-tool { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-tool p { margin-bottom: 4px; color: var(--ink-soft); font-size: 15px; }
@media (min-width: 560px) {
  .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .forms-wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* ---------- gateway support cards ---------- */

.minis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mini {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.mini .ico36 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--copper-ink);
}
.mini .ico36 svg { width: 20px; height: 20px; }
.mini h3 { margin-bottom: 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.mini p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 700px) {
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- bands ---------- */

.band { margin-top: clamp(44px, 6vw, 72px); padding: 44px 0; border-block: 1px solid var(--line); background: var(--surface-2); }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.band-copy { flex: 1 1 280px; min-width: 0; }
.band-copy h2 { margin-bottom: 6px; font-size: 1.45rem; }
.band-copy p { max-width: 32em; color: var(--ink-soft); font-size: 16px; }
.band-items { display: flex; flex: 1 1 360px; flex-wrap: wrap; gap: 10px; min-width: 0; }
.band-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
a.band-item:hover { border-color: var(--copper); }
.band-item[aria-current="page"] { border-color: var(--copper-ink); }

.tools-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.tools-label { color: var(--ink-soft); font-family: var(--mono); font-size: 13px; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.tool {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.tool .ico36 {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--copper-ink);
}
.tool .ico36 svg { width: 18px; height: 18px; }
.tool > svg { color: var(--ink-soft); }
.tool:hover { border-color: var(--copper); }

/* ---------- footer ---------- */

.foot { padding: 36px 0 44px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; }
.foot-links a { color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: var(--ink-soft); font-size: 14px; }

/* ---------- drawing (SVG) ---------- */
/* SVG-START */
svg .lines > * {
  fill: none;
  stroke: var(--draw);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg .lines > .faint { fill: rgba(212, 146, 74, .07); }
svg .lines > .route { stroke-width: 3.6; }
svg .lines > .solid { fill: var(--draw); }
svg .center { fill: none; stroke: var(--draw-soft); stroke-width: 1.2; stroke-dasharray: 12 4 3 4; }
svg .route-todo { fill: none; stroke: var(--draw); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 7; }
svg .dim { fill: none; stroke: var(--foil); stroke-width: 1.2; }
svg .ext { fill: none; stroke: var(--foil); stroke-width: .9; }
svg .leader { fill: none; stroke: var(--draw); stroke-width: 1.2; }
svg .street { fill: none; stroke: rgba(184, 150, 85, .15); stroke-width: 8; }
svg .hatch-l { stroke: var(--draw-soft); stroke-width: 1.2; }
svg .mk { fill: var(--foil); stroke: none; }
svg .mk-dot { fill: var(--draw); stroke: none; }
svg .flow { fill: var(--draw); stroke: none; }
svg text {
  font-family: var(--mono);
  font-size: 16px;
  fill: var(--panel-ink-soft);
  font-variant-numeric: tabular-nums;
}
svg .cl circle { fill: var(--panel); stroke: var(--draw); stroke-width: 1.8; }
svg .cl circle.todo { stroke-dasharray: 3 3; }
svg .cl text { fill: var(--panel-ink); font-size: 19px; font-weight: 500; text-anchor: middle; }
svg .t-main { fill: var(--panel-ink); font-size: 15px; font-weight: 500; }
svg .sm { font-size: 12.5px; }
svg .mid { text-anchor: middle; }
svg .tag-rect { fill: rgba(24, 42, 37, .92); stroke: var(--draw); stroke-width: 1.6; }
svg a { cursor: pointer; }
svg a:hover .tag-rect { fill: rgba(212, 146, 74, .22); }
svg a:focus-visible { outline: 2px solid var(--panel-ink); outline-offset: 3px; }
svg a:focus-visible .tag-rect { stroke: var(--panel-ink); stroke-width: 2.6; }
/* SVG-END */

/* ---------- motion: draw once, then the card lifts in ---------- */

@media (prefers-reduced-motion: no-preference) {
  .is-drawing .lines > * {
    stroke-dasharray: var(--len);
    animation: draw 1.2s cubic-bezier(.45, .1, .25, 1) both;
    animation-delay: calc(var(--g, 0) * .1s);
  }
  .is-drawing .fade {
    animation: fade-in .8s ease-out both;
    animation-delay: calc(var(--g, 0) * .1s + .35s);
  }
  .lift { animation: lift-in .8s cubic-bezier(.2, .7, .2, 1) 1.4s both; }
}
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- desktop: both worlds side by side, card across the seam ---------- */

@media (min-width: 860px) {
  .hero { padding-bottom: 80px; }
  .hero + .sec { padding-top: 40px; }
  .hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: stretch;
  }
  .board { align-self: center; }
  .hero-copy {
    align-self: center;
    padding-right: max(0px, calc(var(--m-w) * .35 - var(--gap) + 16px));
  }
  .panel {
    min-height: var(--panel-min);
    padding: 22px;
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
  }
  .panel::before { inset: 10px; border-radius: 16px; }
  .dwg { padding-left: calc(var(--m-w) * var(--r-k)); }
  .strip { margin-left: calc(var(--m-w) * .65 - 10px); }
  .lift {
    position: absolute;
    left: calc(var(--m-w) * -.35);
    bottom: -56px;
    width: var(--m-w);
    margin: 0;
  }
  .lift.phone-lift { width: var(--m-w); margin: 0; bottom: -60px; }
  .legend.cols2 .leg { padding: 20px; }
}
@media (min-width: 860px) and (max-width: 1099px) {
  /* the drawing runs small here, so its labels get a size bump */
  svg text { font-size: 19px; }
  svg .cl text { font-size: 21px; }
  svg .t-main { font-size: 16px; }
  svg .sm { font-size: 14.5px; }
}
@media (min-width: 1100px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* ---------- phones: stack, mock pulled up over the panel's bottom edge ---------- */

@media (max-width: 859px) {
  svg text { font-size: 18px; }
  svg .cl text { font-size: 19px; }
  svg .t-main { font-size: 17px; }
  svg .sm { font-size: 14.5px; }
  .hero { padding-bottom: 44px; }
}
@media (max-width: 520px) {
  .btn-lg { width: 100%; min-width: 0; }
  .actions .btn { flex: 1 1 100%; }
  .lead { font-size: 17px; }
}
@media (max-width: 374px) {
  .top-links { gap: 12px; }
  .mock { padding: 14px; }
}