/* Sightgrid website. Daylight design system with a dark version.
   Tokens first (light, then dark), then base, nav, the live model, the scroll story, sections, pricing, forms, footer. */
:root {
  --bg: #ECEAE4; --surface: #F5F4F0; --card: #FFFFFF; --card2: #F8F7F3; --ink: #121412; --ink2: #2B2F2B; --muted: #5C615B; --faint: #8C908A;
  --line: #D9D5CC; --line2: #C4BFB4; --accent: #087A3F; --accent-hi: #3DFF88; --accent-ink: #0C100D; --accent-soft: rgba(8,122,63,.09);
  --red: #D9372B; --amber: #B7791F; --blue: #2F6FB5; --night: #0C100D; --night-ink: #EEF3EC; --viewer: #E9E7E1;
  --btn-bg: #121412; --btn-ink: #F5F4F0; --shadow: 0 1px 0 rgba(0,0,0,.03), 0 24px 50px -34px rgba(0,0,0,.45);
  --display: "Archivo", "Arial Black", sans-serif; --body: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --gut: clamp(16px, 4.4vw, 72px); --nav: 72px; --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B0F0C; --surface: #111713; --card: #151C17; --card2: #121813; --ink: #EEF3EC; --ink2: #CDD5CD; --muted: #8E978E; --faint: #5E665E;
  --line: #222A24; --line2: #2E3830; --accent: #3DFF88; --accent-hi: #3DFF88; --accent-ink: #0C100D; --accent-soft: rgba(61,255,136,.08);
  --red: #FF6B5E; --amber: #E3C173; --blue: #74A7F0; --night: #070A08; --viewer: #101511; --btn-bg: #3DFF88; --btn-ink: #0C100D;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -30px rgba(0,0,0,.9); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0B0F0C; --surface: #111713; --card: #151C17; --card2: #121813; --ink: #EEF3EC; --ink2: #CDD5CD; --muted: #8E978E; --faint: #5E665E;
  --line: #222A24; --line2: #2E3830; --accent: #3DFF88; --accent-hi: #3DFF88; --accent-ink: #0C100D; --accent-soft: rgba(61,255,136,.08);
  --red: #FF6B5E; --amber: #E3C173; --blue: #74A7F0; --night: #070A08; --viewer: #101511; --btn-bg: #3DFF88; --btn-ink: #0C100D;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -30px rgba(0,0,0,.9); color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17.5px/1.62 var(--body); overflow-x: clip; transition: background .3s, color .3s; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* headlines: wide Archivo, tight, two tones; the second clause sits back in the muted tone. No highlighter. */
h1, h2, h3 { font-family: var(--display); font-weight: 760; font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.03em; line-height: .98; margin: 0 0 .42em; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.6vw, 92px); }
h2 { font-size: clamp(32px, 4vw, 64px); }
h3 { font-size: clamp(20px, 1.6vw, 25px); letter-spacing: -.015em; line-height: 1.12; font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--muted); }
.over { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.over::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.lead { font-size: clamp(18.5px, 1.35vw, 22px); line-height: 1.52; color: var(--ink2); max-width: 34em; }
.fine { font-size: 14px; color: var(--muted); }
.mono { font-family: var(--mono); }
.ex { font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--amber); border: 1px dashed currentColor; padding: 4px 7px; border-radius: 3px; vertical-align: 2px; white-space: nowrap; }
.cap { font: 500 11.5px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.cap b { color: var(--ink); font-weight: 600; }

/* paper grain on the page background only, behind every panel and every live model (never over a model) */
body::after { content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .11; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .05; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .05; } }
.ambient { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; transition: opacity .8s; }
.ambient.held { opacity: .3; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; color: var(--ink); font: 600 16px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { border-color: var(--ink); }
.btn.solid { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.btn.solid:hover { transform: translateY(-1px); }
.btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hi); }
.btn.solid .dot { background: var(--accent-hi); }
:root[data-theme="dark"] .btn.solid .dot { background: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.solid .dot { background: var(--accent-ink); } }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* nav */
.nav { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 50; height: calc(var(--nav) - 12px); background: var(--card); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.nav .in { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 18px; }
.nav .logo { display: flex; align-items: center; }
.nav .logo img { height: 22px; width: auto; }
.nav .logo .on-dark { display: none; }
:root[data-theme="dark"] .nav .logo .on-light, :root[data-theme="dark"] .foot .logo .on-light { display: none; }
:root[data-theme="dark"] .nav .logo .on-dark, :root[data-theme="dark"] .foot .logo .on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav .logo .on-light, :root:not([data-theme="light"]) .foot .logo .on-light { display: none; } :root:not([data-theme="light"]) .nav .logo .on-dark, :root:not([data-theme="light"]) .foot .logo .on-dark { display: block; } }
.nav ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 2px; }
.nav ul a { display: block; padding: 8px 13px; text-decoration: none; font-size: 15px; font-weight: 500; border-radius: 999px; color: var(--ink2); }
.nav ul a[aria-current] { background: var(--ink); color: var(--bg); }
.nav ul a:hover:not([aria-current]) { background: var(--card2); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.themebtn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.themebtn svg { width: 18px; height: 18px; }
.themebtn .moon { display: none; }
:root[data-theme="dark"] .themebtn .sun { display: none; } :root[data-theme="dark"] .themebtn .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themebtn .sun { display: none; } :root:not([data-theme="light"]) .themebtn .moon { display: block; } }
.menubtn { display: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; font: 600 15px var(--body); cursor: pointer; color: var(--ink); }
.panelmenu { position: fixed; left: 12px; right: 12px; top: calc(var(--nav) + 6px); z-index: 49; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 18px 20px; display: none; box-shadow: var(--shadow); }
.panelmenu.open { display: block; }
.panelmenu a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; font: 700 22px/1.1 var(--display); font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.02em; }
.panelmenu .btn { margin-top: 18px; width: 100%; font: 600 16px var(--body); border-bottom: 1.5px solid var(--btn-bg); }
@media (max-width: 1080px) { .nav ul, .nav .navcta { display: none; } .menubtn { display: inline-block; margin-left: auto; } }

/* boot */
.boot { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; transition: opacity .8s, visibility .8s; }
.boot .in { display: grid; justify-items: center; gap: 22px; }
.boot img { width: 70px; height: 70px; }
.boot .on-dark { display: none; }
:root[data-theme="dark"] .boot .on-light { display: none; } :root[data-theme="dark"] .boot .on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boot .on-light { display: none; } :root:not([data-theme="light"]) .boot .on-dark { display: block; } }
.boot .bar { width: 160px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.boot .bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.boot.done { opacity: 0; visibility: hidden; }

/* ---------- the live model (home hero, GC board) */
.hero { padding: calc(var(--nav) + 18px) 12px 12px; display: grid; grid-template-columns: minmax(360px, 31%) 1fr; gap: 12px; min-height: 100svh; }
.hero .panel { background: var(--surface); border-radius: var(--r); padding: clamp(26px, 3.2vw, 52px); display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); }
.hero .panel h1 { font-size: clamp(38px, 3.6vw, 62px); }
.hero .stagecol { display: flex; flex-direction: column; min-width: 0; }
.hero .stagewrap { position: relative; flex: 1; min-height: 440px; display: flex; gap: 12px; }
.try { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 22px; }
.sgv { position: relative; overflow: hidden; border-radius: var(--r); background: var(--viewer); isolation: isolate; flex: 1; min-width: 0; border: 1px solid var(--line); }
.sgv-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; cursor: grab; }
.sgv-canvas:active { cursor: grabbing; }
.sgv .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; z-index: 2; pointer-events: none; background: var(--viewer); }
.sgv.live .poster { opacity: 0; }
.sgv .loading { position: absolute; left: 14px; top: 14px; z-index: 3; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 12px; display: none; align-items: center; gap: 8px; }
.sgv.busy .loading, .sgv.detail .loading { display: inline-flex; }
.sgv .loading i { width: 60px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; }
.sgv .loading i b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
.sgv .tag { position: absolute; z-index: 3; right: 14px; top: 14px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 7px; }
.sgv .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); }
.sgv .walkpad { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; gap: 6px; background: var(--card); border-radius: 999px; padding: 6px; box-shadow: var(--shadow); }
.sgv.walking .walkpad { display: flex; }
.sgv .walkpad button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--card); font: 600 15px var(--body); color: var(--ink); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.sgv .walkpad button:active { background: var(--accent-hi); color: var(--accent-ink); }
.sgv .nogl { position: absolute; inset: auto 14px 14px 14px; z-index: 3; background: var(--card); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: none; }
.sgv.nogl-on .nogl { display: block; }
.phoneframe { display: none; width: clamp(200px, 19vw, 280px); flex: none; align-self: center; }
.stagewrap.with-phone .phoneframe { display: block; }
.phoneframe .body { background: #111; border-radius: 40px; padding: 9px; box-shadow: 0 0 0 1.5px #3a3d3a, var(--shadow); }
.phoneframe .sgv { aspect-ratio: 9 / 19.5; border-radius: 32px; flex: none; }
.phoneframe .cap { text-align: center; }
.ctl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; margin-top: 10px; }
.ctl .grp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ctl .lbl { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.ctl .sep { width: 1px; height: 26px; background: var(--line); }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); font: 600 14px var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.clash { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); }
.chip.clash[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.chip.icon { width: 40px; padding: 0; font-size: 18px; justify-content: center; }
.chip:disabled { opacity: .4; cursor: default; }
.chip .sw { width: 9px; height: 9px; border-radius: 50%; }
.clashline { display: none; margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; border-left: 5px solid var(--red); font-size: 14.5px; }
.clashline b { margin-right: 6px; }
.clashline.on { display: block; }
.credit { font: 500 10.5px/1.45 var(--mono); color: var(--faint); margin-top: 10px; max-width: 70em; }
@media (max-width: 999px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: calc(var(--nav) + 8px) 8px 8px; }
  .hero .stagecol { order: -1; }
  .hero .stagewrap { flex: none; height: 56svh; min-height: 330px; }
  .hero .panel { padding: 24px 20px; }
  .hero .panel h1 { font-size: clamp(32px, 9vw, 44px); }
  .ctl { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px; gap: 8px; }
  .ctl::-webkit-scrollbar { display: none; }
  .ctl .grp { flex-wrap: nowrap; }
  .ctl .lbl, [data-act="phone"] { display: none !important; }
  .chip { min-height: 44px; }
}

/* proof strip */
.proof { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin: 0 12px; }
.proof div { background: var(--surface); padding: 22px 20px; }
.proof b { display: block; font: 700 17px/1.2 var(--body); margin-bottom: 4px; }
.proof span { font-size: 14px; color: var(--muted); }
@media (max-width: 999px) { .proof { grid-template-columns: 1fr 1fr; margin: 0 8px; } .proof div:last-child { grid-column: 1 / -1; } }

/* ---------- the scroll story: desktop scrubs Cycles frames; phones play the same moment as a short video */
.story { position: relative; height: 420vh; }
.story .stick { position: sticky; top: 0; height: 100svh; padding: calc(var(--nav) + 14px) 12px 12px; display: grid; grid-template-columns: minmax(380px, 36%) 1fr; gap: 12px; }
.story .copy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px, 3.4vw, 54px); display: flex; flex-direction: column; position: relative; min-width: 0; }
.story .steps { position: relative; flex: 1; }
.story [data-step] { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility .5s; }
.story [data-step].on { opacity: 1; visibility: visible; transform: none; }
html:not(.booted) .story [data-step]:first-child { opacity: 1; visibility: visible; transform: none; }
.story .dots { display: flex; gap: 6px; margin-top: 18px; }
.story .dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--line2); transition: background .3s, width .3s; }
.story[data-step-now="0"] .dots i:nth-child(1), .story[data-step-now="1"] .dots i:nth-child(2), .story[data-step-now="2"] .dots i:nth-child(3), .story[data-step-now="3"] .dots i:nth-child(4), .story[data-step-now="4"] .dots i:nth-child(5) { background: var(--accent); width: 40px; }
.story .photo { position: relative; border-radius: var(--r); overflow: hidden; background: var(--viewer); min-width: 0; border: 1px solid var(--line); }
.story canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .figcap { position: absolute; left: 16px; bottom: 16px; z-index: 2; pointer-events: none; }
.story .figcap .cap { background: color-mix(in srgb, var(--card) 92%, transparent); padding: 8px 12px; border-radius: 8px; margin: 0; }
.story .vid { display: none; }
@media (max-width: 999px) {
  .story { height: auto; }
  .story .stick { position: static; height: auto; grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .story .photo { grid-row: 1; aspect-ratio: 720 / 1280; max-height: 78svh; }
  .story .photo canvas { display: none; }
  .story .vid { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .story .copy { padding: 22px 20px; }
  .story .steps { display: grid; gap: 22px; }
  .story [data-step] { position: static; opacity: 1; visibility: visible; transform: none; }
  .story [data-step] h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .story .dots { display: none; }
  .story .replay { z-index: 3; }
}
.story .replay { display: none; position: absolute; top: 12px; right: 12px; bottom: auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); font: 600 13px var(--body); cursor: pointer; box-shadow: var(--shadow); }
@media (max-width: 999px) { .story .replay { display: inline-flex; align-items: center; } }

/* ---------- sections */
section.s { padding: clamp(90px, 11vw, 160px) 0; position: relative; }
section.s.tight { padding: clamp(60px, 7vw, 100px) 0; }
.head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.head.center { text-align: center; margin-left: auto; margin-right: auto; }
.head.center .lead { margin-left: auto; margin-right: auto; }
.head.center .over::after { content: ""; width: 28px; height: 1.5px; background: currentColor; }

/* figures: the media keeps its own shape (width 100%, height from its own size), never cropped */
.figure { margin: 0; }
.figure .frame { background: var(--night); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.figure .frame img, .figure .frame video { width: 100%; height: auto; }
.handset { width: min(100%, 300px); margin: 0 auto; background: #111; border-radius: 42px; padding: 9px; box-shadow: 0 0 0 1.5px #3a3d3a, var(--shadow); }
.handset img, .handset video { width: 100%; height: auto; border-radius: 34px; }
.figure .cap { display: flex; gap: 8px; }
.figure.center .cap { justify-content: center; }

/* bento: one job, everyone on it */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.tile .t { padding: 24px 24px 18px; }
.tile .t h3 { margin: 8px 0 8px; }
.tile .t p { color: var(--ink2); font-size: 16px; margin: 0; }
.tile .k { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tile .m { margin-top: auto; padding: 0 24px; }
.tile .m.desk { padding: 0 0 0 24px; }
.tile .m.desk img, .tile .m.desk video { width: 100%; height: auto; border-radius: 12px 0 0 0; border: 1px solid var(--line); border-bottom: 0; border-right: 0; display: block; }
.tile .m.phone { display: flex; justify-content: center; padding: 0 24px; }
.tile .m.phone .shell { width: min(80%, 260px); background: #111; border-radius: 36px 36px 0 0; padding: 8px 8px 0; }
.tile .m.phone img, .tile .m.phone video { width: 100%; height: auto; border-radius: 28px 28px 0 0; display: block; }
.tile.w7 { grid-column: span 7; } .tile.w5 { grid-column: span 5; } .tile.w4 { grid-column: span 4; } .tile.w8 { grid-column: span 8; } .tile.w6 { grid-column: span 6; } .tile.w12 { grid-column: 1 / -1; }
.tile .finding { margin: 0 24px 24px; }
@media (max-width: 999px) { .bento > .tile { grid-column: 1 / -1 !important; } }
.finding { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; border-left: 5px solid var(--red); }
.finding .q { font: 600 clamp(16px, 1.4vw, 20px)/1.45 var(--mono); color: var(--ink); margin: 8px 0 0; }
.finding .sug { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line2); font-size: 15.5px; color: var(--ink2); }
.finding .sug b { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--amber); display: block; margin-bottom: 4px; }

/* split sections */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 999px) { .split, .split.even { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.numlist { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.numlist li { display: grid; grid-template-columns: 80px 1fr 1.3fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line2); align-items: baseline; }
.numlist .n { font: 500 13px var(--mono); color: var(--muted); }
.numlist h3 { margin: 0; }
.numlist p { margin: 0; color: var(--ink2); }
@media (max-width: 999px) { .numlist li { grid-template-columns: 1fr; gap: 6px; } }

/* page hero (inner pages) */
.phero { padding: calc(var(--nav) + clamp(60px, 9vw, 130px)) 0 clamp(40px, 6vw, 80px); }
.phero h1 { max-width: 13em; }

/* CTA band: the funnel to the field test */
.band { margin: 0 12px; background: var(--night); color: var(--night-ink); border-radius: 26px; padding: clamp(36px, 6vw, 96px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; position: relative; overflow: hidden; }
.band h2 em { color: #8E978E; }
.band .lead { color: #c9d1c9; }
.band .over { color: var(--accent-hi); }
.band .btn { border-color: #3a453c; color: var(--night-ink); }
.band .btn.solid { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }
.band .btn.solid .dot { background: var(--accent-ink); }
.band ul { margin: 0; padding-left: 18px; color: #c9d1c9; }
.band li { margin-bottom: 6px; }
.band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(61,255,136,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(61,255,136,.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.band > * { position: relative; }
@media (max-width: 999px) { .band { grid-template-columns: 1fr; margin: 0 8px; } }

/* ---------- pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan.rec { border: 2px solid var(--accent); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--accent) 60%, transparent); }
.plan .badge { position: absolute; top: -13px; left: 28px; background: var(--accent); color: var(--bg); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
:root[data-theme="dark"] .plan .badge { color: var(--accent-ink); }
.plan .who { font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan h3 { font-size: 30px; margin: 0; }
.plan .amt { display: flex; align-items: baseline; gap: 8px; }
.plan .amt b { font: 760 52px/1 var(--display); font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.03em; }
.plan .amt span { font-size: 15px; color: var(--muted); }
.plan .founding { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; }
.plan .founding b { color: var(--accent); }
.plan .founding .pill { font: 700 10px var(--mono); letter-spacing: .1em; background: var(--accent); color: var(--bg); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
:root[data-theme="dark"] .plan .founding .pill { color: var(--accent-ink); }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--ink2); }
.plan ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan ul li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .seats { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.plan .btn { margin-top: auto; width: 100%; }
@media (max-width: 999px) { .plans { grid-template-columns: 1fr; } }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font: 700 15px var(--body); background: var(--card2); position: sticky; top: var(--nav); z-index: 1; }
.compare thead th.rec { color: var(--accent); }
.compare tr.grp td { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--card2); text-align: left; }
.compare .y { color: var(--accent); font-weight: 700; }
.compare .n { color: var(--faint); }
.compare td.rec { background: var(--accent-soft); }
.compare tbody tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; border-radius: 18px; }
@media (max-width: 700px) { .compare { font-size: 13.5px; } .compare th, .compare td { padding: 10px 8px; } }
.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.addon { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.addon h3 { margin: 0; font-size: 20px; }
.addon .p { font: 700 18px var(--body); text-align: right; }
.addon .p small { display: block; font: 500 12.5px var(--body); color: var(--muted); }
.addon p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink2); font-size: 15.5px; }
.addon .on { grid-column: 1 / -1; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 999px) { .addons { grid-template-columns: 1fr; } }
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 650 clamp(17px, 1.3vw, 20px)/1.35 var(--body); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font: 400 26px var(--body); color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink2); max-width: 46em; }

/* forms */
.form { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.form input, .form select, .form textarea { font: 400 16px var(--body); color: var(--ink); background: var(--card2); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; min-height: 52px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: 110px; resize: vertical; }
.form .full { grid-column: 1 / -1; }
.form .note { grid-column: 1 / -1; font-size: 14px; color: var(--muted); margin: 0; }
.form button[type=submit] { justify-self: start; }
.form .status { grid-column: 1 / -1; border-radius: 12px; padding: 12px 14px; font-weight: 600; display: none; background: var(--accent-soft); border: 1px solid var(--accent); }
.form.done .status { display: block; }
@media (max-width: 760px) { .form { grid-template-columns: 1fr; } }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards2 > div { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.cards2 h3 { margin-top: 0; }
.cards2 ul { padding-left: 18px; margin: 0; color: var(--ink2); }
.cards2 li { margin-bottom: 7px; }
@media (max-width: 999px) { .cards2 { grid-template-columns: 1fr; } }

/* GC board: the live model with every clash between trades and who holds it */
.gcboard { display: grid; grid-template-columns: 1fr minmax(340px, 30%); gap: 12px; padding: calc(var(--nav) + 18px) 12px 12px; height: max(640px, 100svh); }
.gcboard .stage { display: flex; flex-direction: column; min-width: 0; }
.gcboard .stage .sgv { flex: 1; min-height: 460px; }
.gcboard aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.gcboard aside h1 { font-size: clamp(34px, 3vw, 52px); }
.companies { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.companies span { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--body); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 11px; background: var(--card); }
.companies i { width: 9px; height: 9px; border-radius: 50%; }
.clist { list-style: none; margin: 0; padding: 0 2px 0 0; display: grid; align-content: start; gap: 6px; overflow: auto; flex: 1; min-height: 120px; }
.clist button { width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; cursor: pointer; color: var(--ink); font: 400 14px var(--body); }
.clist button[aria-pressed="true"] { border-color: var(--ink); }
.clist b { font-size: 14.5px; }
.clist .who { color: var(--muted); font-size: 13px; grid-column: 1 / 2; }
.st { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid; border-radius: 999px; padding: 4px 8px; white-space: nowrap; align-self: start; grid-row: 1 / 3; grid-column: 2; }
.st.open { color: var(--red); } .st.assigned { color: var(--amber); } .st.fixing { color: var(--blue); } .st.waiting { color: #D9822B; } .st.cleared { color: var(--accent); }
@media (max-width: 999px) { .gcboard { grid-template-columns: 1fr; padding: calc(var(--nav) + 8px) 8px 8px; height: auto; } .gcboard aside { overflow: visible; } .gcboard .stage .sgv { flex: none; height: 52svh; min-height: 320px; } .clist { max-height: none; } }

/* about */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.founder { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.founder .init { width: 64px; height: 64px; border-radius: 16px; background: var(--night); color: var(--accent-hi); display: grid; place-items: center; font: 700 20px var(--mono); margin-bottom: 18px; }
.founder h3 { margin: 0 0 4px; font-size: 26px; }
.founder .role { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
@media (max-width: 999px) { .founders { grid-template-columns: 1fr; } }

/* legal prose */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 2.2vw, 32px); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.draft { display: inline-flex; gap: 10px; align-items: center; background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid var(--amber); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 600; margin-bottom: 26px; }
.draft b { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--amber); }
.legalnav { display: flex; gap: 8px; margin-bottom: 30px; }

/* footer */
.foot { padding: 70px 0 30px; }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; border-top: 1.5px solid var(--ink); padding-top: 34px; }
.foot h4 { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.foot a { display: block; text-decoration: none; padding: 4px 0; font-size: 15.5px; }
.foot .logo img { height: 24px; width: auto; margin-bottom: 14px; }
.foot .logo .on-dark { display: none; }
.foot .credits { margin-top: 30px; font: 500 11px/1.65 var(--mono); color: var(--muted); }
.foot .credits b { color: var(--ink2); }
.foot .base { margin-top: 26px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 999px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .cols > div:first-child { grid-column: 1 / -1; } }

/* ---------- reveals (readable at rest; hidden only under .motion until seen) */
.motion [data-rv] { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.motion [data-rv]:not(.in) { opacity: 0; transform: translateY(30px); }
.motion [data-rv-d="1"] { transition-delay: .12s; } .motion [data-rv-d="2"] { transition-delay: .24s; } .motion [data-rv-d="3"] { transition-delay: .36s; }

/* ---------- one entrance per headline */
.w { display: inline-block; white-space: nowrap; }
.motion [data-enter] .wi, .motion [data-enter] .c { display: inline-block; }
/* lift: words rise out of their own line */
.motion [data-enter="lift"] .w { overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.motion [data-enter="lift"] .wi { transition: transform 1s cubic-bezier(.2,.8,.15,1); transition-delay: calc(var(--i) * 55ms); }
.motion [data-enter="lift"]:not(.in) .wi { transform: translateY(108%); }
/* tape: the line pulls out from the left */
.motion [data-enter="tape"] { transition: clip-path 1.2s cubic-bezier(.6,0,.2,1); clip-path: inset(-12% 0 -12% 0); }
.motion [data-enter="tape"]:not(.in) { clip-path: inset(-12% 100% -12% 0); }
/* develop: from pale and soft to ink */
.motion [data-enter="develop"] .wi { transition: opacity 1.4s ease, filter 1.2s; transition-delay: calc(var(--i) * 70ms); }
.motion [data-enter="develop"]:not(.in) .wi { opacity: .12; filter: blur(5px); }
/* pivot: words turn in on their baseline */
.motion [data-enter="pivot"] .wi { transition: transform .9s cubic-bezier(.2,.9,.3,1.1), opacity .5s; transition-delay: calc(var(--i) * 60ms); transform-origin: 0 100%; }
.motion [data-enter="pivot"]:not(.in) .wi { transform: rotate(8deg) translateY(20%); opacity: 0; }
/* press: letters press in from larger */
.motion [data-enter="press"] .c { transition: transform .55s cubic-bezier(.2,.9,.3,1), opacity .3s; transition-delay: calc(var(--i) * 18ms); }
.motion [data-enter="press"]:not(.in) .c { transform: scale(1.6); opacity: 0; }
/* level: the line settles level */
.motion [data-enter="level"] { transition: transform 1.2s cubic-bezier(.3,1.5,.4,1), opacity .6s; }
.motion [data-enter="level"]:not(.in) { transform: rotate(-3deg) translateY(16px); opacity: 0; }
/* roll: letters roll up */
.motion [data-enter="roll"] .c { transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s; transition-delay: calc(var(--i) * 22ms); }
.motion [data-enter="roll"]:not(.in) .c { transform: translateY(70%); opacity: 0; }
/* rule: a hairline draws under the headline, then the words settle */
[data-enter="rule"] { position: relative; padding-bottom: .26em; }
[data-enter="rule"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 6em); height: 2px; background: var(--accent); transform-origin: 0 50%; }
.motion [data-enter="rule"]::after { transition: transform .7s cubic-bezier(.7,0,.3,1); }
.motion [data-enter="rule"]:not(.in)::after { transform: scaleX(0); }
.motion [data-enter="rule"] .wi { transition: transform .7s cubic-bezier(.2,.9,.3,1.2), opacity .4s; transition-delay: calc(.35s + var(--i) * 45ms); }
.motion [data-enter="rule"]:not(.in) .wi { transform: translateY(-30%); opacity: 0; }
/* spread: letter spacing closes up */
.motion [data-enter="spread"] { transition: letter-spacing 1.2s cubic-bezier(.2,.8,.2,1), opacity .9s; }
.motion [data-enter="spread"]:not(.in) { letter-spacing: .12em; opacity: 0; }
/* slide: words come in from alternate sides */
.motion [data-enter="slide"] .wi { transition: transform .9s cubic-bezier(.2,.75,.15,1), opacity .6s; transition-delay: calc(var(--i) * 50ms); }
.motion [data-enter="slide"]:not(.in) .w:nth-child(odd) .wi { transform: translateX(-26px); opacity: 0; }
.motion [data-enter="slide"]:not(.in) .w:nth-child(even) .wi { transform: translateX(26px); opacity: 0; }
/* zoom: from small */
.motion [data-enter="zoom"] { transition: transform .9s cubic-bezier(.2,.9,.3,1.1), opacity .5s; transform-origin: 0 100%; }
.motion [data-enter="zoom"]:not(.in) { transform: scale(.86); opacity: 0; }
.head.center [data-enter="zoom"] { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.nav .logo { flex: none; } .nav .logo img, .foot .logo img { max-width: none; flex: none; }
@media (max-width: 380px) { .nav .in { gap: 10px; padding-left: 14px; } .nav .logo img { height: 19px; } }
.compare thead th { position: static; }

/* ---------- round 4: the continuous tour, the slice slider, the bend calculator */
.tour { position: relative; height: 640vh; }
.tour .stick { position: sticky; top: 0; height: 100svh; padding: calc(var(--nav) + 18px) 12px 12px; display: grid; grid-template-columns: minmax(360px, 31%) 1fr; gap: 12px; }
.tour .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(26px, 3.2vw, 52px); display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }
.tour .beats { position: relative; flex: 1; }
.tour [data-beat] { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility .5s; }
.tour [data-beat].on { opacity: 1; visibility: visible; transform: none; }
html:not(.booted) .tour [data-beat]:first-child { opacity: 1; visibility: visible; transform: none; }
.tour [data-beat] h1 { font-size: clamp(38px, 3.6vw, 62px); }
.tour [data-beat] h2 { font-size: clamp(30px, 2.8vw, 48px); }
.tour .dots { display: flex; gap: 6px; margin-top: 16px; }
.tour .dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--line2); transition: background .3s, width .3s; }
.tour[data-beat="0"] .dots i:nth-child(1), .tour[data-beat="1"] .dots i:nth-child(2), .tour[data-beat="2"] .dots i:nth-child(3), .tour[data-beat="3"] .dots i:nth-child(4), .tour[data-beat="4"] .dots i:nth-child(5), .tour[data-beat="5"] .dots i:nth-child(6) { background: var(--accent); width: 40px; }
.tour .stagecol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tour .stagewrap { position: relative; flex: 1; min-height: 0; display: flex; gap: 12px; }
.tour .companies { margin-top: 8px; }
.ctl { transition: opacity .35s; }
.ctl.off { opacity: .35; pointer-events: none; }
.slicer { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 12px; border: 1.5px solid var(--line2); border-radius: 999px; }
.slicer span { font: 600 13px var(--body); }
.slicer input { -webkit-appearance: none; appearance: none; width: 150px; height: 28px; background: transparent; cursor: pointer; touch-action: none; }
.slicer input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line2); }
.slicer input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line2); }
.slicer input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.slicer input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); }
@media (max-width: 999px) {
  .tour { height: 620vh; }
  .tour .stick { grid-template-columns: 1fr; grid-template-rows: 52% 48%; padding: calc(var(--nav) + 8px) 8px 8px; gap: 8px; }
  .tour .stagecol { grid-row: 1; }
  .tour .panel { grid-row: 2; padding: 20px 20px 16px; }
  .tour [data-beat] { justify-content: flex-start; }
  .tour [data-beat] h1 { font-size: clamp(28px, 7.8vw, 38px); }
  .tour [data-beat] h2 { font-size: clamp(24px, 6.6vw, 32px); }
  .tour [data-beat] .lead { font-size: 15.5px; line-height: 1.5; }
  .tour .ctl { margin-top: 8px; }
  .tour .credit { display: none; }
  .slicer input { width: 120px; }
}
@media (max-width: 999px) and (max-height: 600px) { .tour [data-beat] .lead { display: none; } .tour [data-beat]:first-child .lead { display: block; font-size: 14px; } .tour .try { display: none; } }

/* the bend calculator */
.bendhero { display: grid; grid-template-columns: minmax(340px, 30%) 1fr minmax(220px, 17%); gap: 12px; padding: calc(var(--nav) + 18px) 12px 12px; min-height: 100svh; }
.bendhero .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 2.6vw, 40px); min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bendhero h1 { font-size: clamp(34px, 3vw, 52px); margin-bottom: .1em; }
.bendstage { position: relative; background: var(--viewer); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: 460px; }
.bend-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.bend-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bend-label { position: absolute; left: 0; top: 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font: 600 12.5px var(--mono); white-space: nowrap; box-shadow: var(--shadow); }
.bend-label b { color: var(--accent); margin-right: 4px; }
.bendform { display: grid; gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; border-radius: 999px; font: 600 14px var(--body); }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields label { display: grid; gap: 5px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fields input, .fields select { font: 500 16px var(--body); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 48px; width: 100%; }
.fields [hidden] { display: none; }
.bend-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bend-marks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; }
.bend-marks b { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--bg); display: grid; place-items: center; font: 700 12px var(--mono); }
:root[data-theme="dark"] .bend-marks b { color: var(--accent-ink); }
.bend-marks em { font: 700 15px var(--mono); font-style: normal; }
.bend-why summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 6px 0; }
.bend-why ol { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink2); }
.bend-warn { margin: 0; padding: 10px 12px 10px 28px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid var(--amber); font-size: 13.5px; }
.bend-err { color: var(--red); font-weight: 600; }
.bendphone { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bendphone .handset { width: 100%; max-width: 260px; }
@media (max-width: 1200px) { .bendhero { grid-template-columns: minmax(320px, 36%) 1fr; } .bendphone { display: none; } }
@media (max-width: 999px) { .bendhero { grid-template-columns: 1fr; padding: calc(var(--nav) + 8px) 8px 8px; } .bendstage { order: -1; min-height: 0; height: 46svh; } }