/* SlabWizard site. Colours are sampled from the app's factory style ("Dark
   Minimalist", ui/style/style_manager.py), so the page and the clips on it read
   as one thing. No build step: edit and reload.
   (--teal / --teal-deep are the ACCENT pair; the names are historical.) */

:root {
  color-scheme: dark;       /* one look, on purpose: scrollbars and controls follow it */
  --bg: #16181c;            /* the app's canvas */
  --bg-raised: #1a1c21;     /* the app's top bar and toolbar */
  --panel: #1d2026;
  --panel-hi: #252830;
  --tile: #2d2d37;          /* the app's sidebar */
  --line: rgba(180, 192, 220, 0.13);
  --line-strong: rgba(180, 192, 220, 0.24);
  --text: #eceef3;
  --warm: #f4efe4;          /* headline white, a touch of stone */
  --muted: #a9afbd;
  --faint: #7d8494;
  --teal: #5ab4d6;          /* accent on dark: the app's selection blue, lifted for text */
  --teal-deep: #3d76a8;     /* the app's steel blue, safe under white button text */
  --blue: #487aa5;          /* the app's blade-cut blue */
  --danger: #ff8f7a;
  --radius: 14px;
  --wrap: 1180px;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;          /* where supported: no sideways scroll, and the sticky bar keeps working on iOS */
}

/* The canvas grid, faint, fading out down the page. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1500px;
  background-image:
    linear-gradient(rgba(170, 185, 215, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 185, 215, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

img, video, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: #9bd6ee; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; color: var(--warm); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal-deep); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }
.mono { font-family: var(--mono); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 1rem/1 var(--font);
  padding: 15px 22px;
  border-radius: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s, color .15s;
}
.btn-primary { background: var(--teal-deep); color: #fff; box-shadow: 0 0 0 1px rgba(90, 180, 214,0.35) inset, 0 10px 30px -12px rgba(61, 118, 168, 0.9); }
.btn-primary:hover { background: #4685bb; color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--teal); color: #fff; }
.btn-small { padding: 11px 16px; font-size: .9375rem; border-radius: 10px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 24, 28, 0.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--warm); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.01em; }
.brand img { width: 38px; height: 38px; }
.brand:hover { color: #fff; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.nav-links a:hover { color: #fff; }
@media (max-width: 820px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.hero .wrap { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 5rem); font-weight: 800; max-width: 15ch; }
.hero h1 span { display: block; }
.hero h1 .l3 { color: var(--teal); }
.hero-sub { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); color: var(--muted); max-width: 50ch; margin: 26px 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--muted); font: 500 .78rem/1 var(--mono); }
.hero-facts li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(29, 32, 38,0.6); }
.clip.hero-clip { margin-top: clamp(40px, 5.5vw, 64px); }

/* The drawing beside the headline: a job the way the app draws one. */
.hero-art { position: absolute; right: -6px; top: 0; width: min(40%, 500px); height: auto; pointer-events: none; }
@media (max-width: 1240px) { .hero-art { display: none; } }
.ha-slab { fill: rgba(58, 62, 70, 0.4); stroke: rgba(180, 192, 220, 0.45); stroke-width: 1; stroke-dasharray: 5 4; }
.ha-note { fill: var(--faint); font: 500 10.5px var(--mono); }
.ha-cuts line { stroke: rgba(238, 240, 248, 0.5); stroke-width: 1.2; stroke-linecap: round; }
.ha-piece { fill: rgba(90, 180, 214,0.13); stroke: var(--teal); stroke-width: 1.5; }
.ha-hole { fill: var(--bg); stroke: rgba(238, 240, 248, 0.6); stroke-width: 1.1; }
.ha-dim path { stroke: var(--teal); stroke-width: 1; fill: none; }
.ha-dim text { fill: var(--teal); font: 500 11px var(--mono); }
.ha-badge rect { fill: #f6f8ff; stroke: #2f6fd0; stroke-width: 1.4; }
.ha-badge text { fill: #17306b; font: 600 10px var(--mono); text-anchor: middle; dominant-baseline: central; }
/* It draws itself once on arrival. The finished drawing is the plain, resting
   style; ".pre" (set by a one-line script beside the SVG, lifted by site.js on
   the next frame) is the blank sheet it starts from. Nothing is left "held" by
   an animation afterwards, so it cannot go missing when scrolled away and back,
   and with no script at all the drawing is simply there. */
.hero-art .draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease .15s; }
.hero-art .d2 { transition-delay: .9s; }
.hero-art .d3 { transition-delay: 1.3s; }
.hero-art .ha-piece, .hero-art .ha-hole { transition: stroke-dashoffset 1.1s ease .15s, fill-opacity .6s ease .9s; }
.hero-art .late { transition: opacity .5s ease 2.1s; }
.hero-art.pre .draw { stroke-dashoffset: 1; transition: none; }
.hero-art.pre .ha-piece, .hero-art.pre .ha-hole { fill-opacity: 0; transition: none; }
.hero-art.pre .late { opacity: 0; transition: none; }
.hero-art.done .draw { stroke-dasharray: none; transition: none; }

/* ---------- clip frame (video in a calm bezel) ---------- */
.clip {
  position: relative; margin: 0;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(29, 32, 38,0.6);
  overflow: hidden;
}
.clip video, .clip img { width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; background: #16181c; cursor: pointer; }
.clip-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font: 500 .78rem/1.3 var(--mono); color: var(--faint);
  background: var(--panel);
}
.clip-bar span { min-width: 0; }
.clip-btns { display: flex; gap: 6px; flex: none; }
.clip-btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--tile); color: var(--text);
  font: 600 .75rem/1 var(--mono); padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.clip-btn:hover { border-color: var(--teal); }
.clip-square video { aspect-ratio: 1 / 1; }      /* the phone cut of a clip */
.clip-square.clip-missing::before { aspect-ratio: 1 / 1; }
.clip-missing video { display: none; }
.clip-missing::before {
  content: "clip not rendered yet"; display: grid; place-items: center; aspect-ratio: 5 / 3;
  font: 500 .8125rem var(--mono); color: var(--faint);
  background-image: linear-gradient(rgba(140,165,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(140,165,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- section scaffolding ---------- */
section { padding: clamp(56px, 8vw, 112px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 800; }
.section-head p { color: var(--muted); margin: 16px 0 0; font-size: 1.125rem; }

/* A dimension line, the way the app draws one. Used as the section divider. */
.dim { display: flex; align-items: center; gap: 14px; color: var(--faint); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dim::before, .dim::after { content: ""; flex: 1; height: 9px; border-inline: 1px solid var(--line-strong); background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; }

/* ---------- features: the complaint, then the fix ---------- */
.features { padding-top: 0; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; padding: clamp(44px, 6vw, 84px) 0; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; }
.feature.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.feature.flip .feature-text { order: 2; }
.feature.flip .feature-media { order: 1; }
@media (max-width: 940px) {
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .feature-text { order: 0; }
  .feature.flip .feature-media { order: 0; }
}
.cut-badge {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; border: 2px solid var(--teal); background: rgba(90, 180, 214,0.1);
  color: var(--warm); font: 600 .9375rem/1 var(--mono);
}
.said {
  margin: 20px 0 20px; padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted); font-size: 1.0625rem; font-weight: 500;
}
.said::before { content: "\201C"; }
.said::after { content: "\201D"; }
.feature h3 { font-size: clamp(1.625rem, 3vw, 2.375rem); font-weight: 800; }
.feature-text > p { color: var(--muted); margin: 18px 0 0; max-width: 44ch; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--text); font-size: 1rem; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.ticks li::before { content: ""; width: 12px; height: 7px; margin-top: 8px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.pill { display: inline-block; margin-left: 12px; vertical-align: 12px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.fineprint { font-size: .9rem; color: var(--faint); margin-top: 18px !important; }

/* ---------- the toy canvas ---------- */
.toy { border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--panel); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(29, 32, 38,0.6); }
.toy-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 .78rem/1 var(--mono); color: var(--faint); }
.toy-top b { color: var(--teal); font-weight: 500; }
.toy-top span { line-height: 1.4; }
.toy-reset { margin-left: auto; flex: none; }
.toy svg { width: 100%; height: auto; background: var(--bg); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.toy-part { cursor: grab; touch-action: none; outline: none; }
.toy-part:active { cursor: grabbing; }
.toy-part rect { fill: rgba(90, 180, 214,0.14); stroke: #2f6c9c; stroke-width: 2; transition: fill .15s; }
.toy-part:hover rect, .toy-part:focus-visible rect { fill: rgba(90, 180, 214,0.28); stroke: #2f7fb8; }
.toy-part.dragging rect { fill: rgba(90, 180, 214,0.4); stroke: #2f7fb8; stroke-width: 2.6; }
.toy-part.blocked rect { fill: rgba(255, 143, 122, 0.3); stroke: var(--danger); }
.toy-label, .toy-badge-in { transform: scale(var(--k, 1)); }   /* --k is set by the script: bigger on a narrow screen */
.toy-part text { fill: #0b1530; font: 800 19px var(--font); pointer-events: none; paint-order: stroke; stroke: rgba(255, 255, 255, 0.7); stroke-width: 3px; }
.toy-part text.sz { font: 500 13.5px var(--mono); fill: #1d2c52; stroke-width: 2.5px; }
.toy-cut { stroke: #16181c; stroke-width: 1.8; stroke-linecap: round; opacity: .9; }
.toy-cut-glow { stroke: rgba(255, 255, 255, 0.55); stroke-width: 3.4; stroke-linecap: round; }
.toy-badge rect { fill: #f6f8ff; stroke: #2f6fd0; stroke-width: 1.4; }
.toy-badge text { fill: #17306b; font: 600 13px var(--mono); text-anchor: middle; dominant-baseline: central; }
.toy-status { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); font: 500 .78rem/1.35 var(--mono); color: var(--muted); min-height: 40px; }
.toy-status .ok { color: var(--teal); }
.toy-status .no { color: var(--danger); }
#toy-xy { color: var(--faint); white-space: nowrap; }
@media (max-width: 560px) { #toy-xy { display: none; } }

/* ---------- saws ---------- */
.saws { background: linear-gradient(180deg, transparent, rgba(29, 32, 38,0.55) 18%, rgba(29, 32, 38,0.55) 82%, transparent); }
.saw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .saw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .saw-grid { gap: 8px; } .saw-grid li { padding: 14px 12px 12px; } .saw-grid b { font-size: 1rem; line-height: 1.25; margin-bottom: 4px; } }
@media (max-width: 330px) { .saw-grid { grid-template-columns: 1fr; } }
.saw-grid li { padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.saw-grid b { display: block; color: var(--warm); font-weight: 700; font-size: 1.0625rem; }
.saw-grid span { color: var(--faint); font: 500 .78rem/1.4 var(--mono); }
.saw-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 44px; margin-top: 34px; color: var(--muted); }
.saw-note p { margin: 0; }
.saw-note strong { color: var(--text); }

/* ---------- trial steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.steps h3 { font-size: 1.25rem; font-weight: 800; margin: 16px 0 8px; }
.steps p { color: var(--muted); margin: 0; font-size: 1rem; }
.trial-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.mail { font: 500 .9375rem var(--mono); color: var(--muted); }
.mail button { appearance: none; background: none; border: 0; color: var(--teal); font: inherit; cursor: pointer; padding: 0 0 0 8px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- releases ---------- */
.rel { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rel li { display: grid; grid-template-columns: 92px 130px 1fr; gap: 6px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rel .v { font: 600 1rem var(--mono); color: var(--warm); }
.rel .d { font: 500 .8125rem var(--mono); color: var(--faint); }
.rel .w { color: var(--muted); }
@media (max-width: 700px) { .rel li { grid-template-columns: 80px 1fr; } .rel .w { grid-column: 1 / -1; } }
.rel-more { margin-top: 22px; color: var(--muted); }

/* ---------- questions ---------- */
/* Answers are on the page, not behind a click. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; } }
.qa { padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.qa h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.qa p { margin: 10px 0 0; color: var(--muted); font-size: 1rem; }

/* ---------- closing ---------- */
.closing { text-align: center; padding-bottom: clamp(64px, 9vw, 120px); }
.closing h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 800; max-width: 18ch; margin-inline: auto; }
.closing p { color: var(--muted); max-width: 48ch; margin: 20px auto 30px; font-size: 1.125rem; }
.closing .hero-cta { justify-content: center; }

footer { border-top: 1px solid var(--line); padding: 30px 0 44px; color: var(--faint); font-size: .9rem; }
.foot { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.foot a { color: var(--muted); }

/* ---------- lightbox ---------- */
dialog.lightbox { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0; background: #0e0f12; width: min(1600px, 96vw); max-height: 94vh; color: var(--text); }
dialog.lightbox::backdrop { background: rgba(4, 7, 18, 0.86); }
dialog.lightbox video { width: 100%; max-height: calc(94vh - 52px); background: #0e0f12; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font: 500 .8125rem var(--mono); color: var(--muted); }

/* ---------- phone ----------
   Most visitors arrive on one. Buttons a thumb can hit (44 px), nothing set
   smaller than 13 px, the caption above the clip's buttons, one clear column.
   Kept at the END of the sheet so it wins over the rules above. */
@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .nav-in { height: 60px; }
  .brand { min-height: 44px; }
  section { padding: 52px 0; }
  .hero { padding: 36px 0 44px; }
  .hero-sub { margin: 20px 0 26px; }
  .btn { padding: 16px 22px; }
  .hero-cta .btn, .trial-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-facts, .saw-grid span, .rel .d, .eyebrow, .dim { font-size: .8125rem; }
  .pill { font-size: .8125rem; padding: 6px 10px; letter-spacing: .03em; }
  .feature { padding: 44px 0; gap: 26px; }
  .clip, .toy { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); border-radius: 12px; }
  .clip-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; font-size: .8125rem; }
  .clip-btns { gap: 8px; }
  .clip-btns .clip-btn { flex: 1; }
  .clip-btn { min-height: 44px; padding: 10px 14px; font-size: .8125rem; }
  .toy-top { padding: 8px 8px 8px 12px; font-size: .8125rem; }
  .toy-status { font-size: .8125rem; }
  .mail { display: flex; align-items: center; flex-wrap: wrap; font-size: .9375rem; }
  .mail button { min-height: 44px; padding: 0 14px; }
  .rel-more a, .foot a { display: inline-block; padding: 12px 0; }
  .foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .qa { padding: 18px 18px; }
  .steps { gap: 10px; }
  .steps li { padding: 18px; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; }
  .steps h3 { margin: 4px 0 6px; }
  .steps p { grid-column: 2; }
  .closing .hero-cta .btn { flex: 1 1 100%; }
  dialog.lightbox { width: 100vw; max-width: 100vw; border-radius: 0; border-inline: 0; }
}

/* A phone on its side: the page is short, so the bar stops following you. */
@media (max-height: 480px) and (orientation: landscape) {
  .nav { position: static; }
  html { scroll-padding-top: 12px; }
}

/* ---------- entrances ---------- */
/* Only when the script is running (it puts "js" on <html>): with no script the
   page is simply all there, never a blank waiting for an observer. */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art .draw, .hero-art .late, .hero-art .ha-piece, .hero-art .ha-hole { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; fill-opacity: 1 !important; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}