/* ============================================================================
   Design options: a dev-only switcher + the additive layers each option adds.
   Loaded AFTER style.css. The base style.css is Option 1 ("Compact, no grids")
   and is never touched here; each option's look is layered on, scoped to
   html[data-design="N"], so switching options changes nothing about the content.

     data-design="1"  Compact, no grids   (base: this file adds nothing)
     data-design="2"  Compact + grids     (column-frame rails + section rules)
     data-design="3"  (reserved)

   Grid best practices in Option 2: one hairline weight/color from --hairline,
   everything aligned to the column, separators span exactly rail-to-rail, even
   vertical rhythm (rules sit centered in equal gaps), restraint (no black), a
   closed frame, responsive to the column padding, decorative (aria-hidden).
   ========================================================================= */

/* ---------- Option 2 · grids ---------- */
html[data-design="2"] main {
  position: relative;
  --pad: 24px; /* the column's horizontal padding = how far separators reach out */
  counter-reset: section; /* numbers the content sections in the gutter */
  padding-block: 18px; /* keep L/R padding from the base; tighten top/bottom for the frame */
  /* the column frame: left/right rails + top/bottom caps, one hairline */
  border: 1px solid var(--hairline);
}
@media (max-width: 480px) {
  html[data-design="2"] main {
    --pad: 18px;
    padding-block: 16px;
  }
}

/* even vertical rhythm: drop the varied section margins, give every top-level
   block equal top/bottom padding so a separator sits centered in each ~40px gap */
html[data-design="2"] main > * {
  position: relative;
  margin-block: 0;
  padding-block: 20px;
}

/* section separators: a plain hairline between every top-level block, extended
   out to meet the rails at both ends. The band is 9px tall (sits in the empty
   gap, never touches content); the hairline itself stays 1px, centered. Not
   above the first block. (No + node ticks: the user asked for clean borders.) */
html[data-design="2"] main > * + *::before {
  content: "";
  position: absolute;
  top: -4px;
  height: 9px;
  inset-inline: calc(-1 * var(--pad));
  background:
    linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
  pointer-events: none;
}

/* numbered content sections (01…) in the left gutter: activates the empty side,
   documented/spec feel. Only where there's gutter room (wide viewports). */
html[data-design="2"] main > section {
  counter-increment: section;
}
@media (min-width: 620px) {
  html[data-design="2"] main > section::after {
    content: counter(section, decimal-leading-zero);
    position: absolute;
    top: 19px;
    left: calc(-1 * var(--pad) - 42px);
    width: 30px;
    text-align: right;
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--ink-3);
    pointer-events: none;
  }
}

/* in the grid, the demo sections drop their headings (the gutter number labels them) */
html[data-design="2"] .video-demo > .section-head,
html[data-design="2"] .stage-wrap > .section-head {
  display: none;
}

/* in the grid, the FAQ's own top + bottom rules double up with the section
   separators, so drop them (keep the dividers between items) */
html[data-design="2"] .faq-item:first-child {
  border-top: 0;
}
html[data-design="2"] .faq-item:last-child {
  border-bottom: 0;
}

/* video demo: full-bleed to the column edges (keeps the base 8/5 frame height),
   and flush to the bottom rule (drop the section's bottom padding so there's no
   empty gap under the full-bleed video) */
html[data-design="2"] .video-demo {
  padding-bottom: 0;
}
html[data-design="2"] .video-demo .vd-card {
  margin-inline: calc(-1 * var(--pad));
  border-radius: 0;
  box-shadow: none;
}

/* interactive demo: full-bleed + flush to both rules (no title, so no top/bottom gap) */
html[data-design="2"] .stage-wrap {
  padding-block: 0;
}
html[data-design="2"] .stage-wrap .stage {
  margin-inline: calc(-1 * var(--pad));
  border-radius: 0;
  box-shadow: none;
}

/* fixed topbar: pin the masthead so the Download CTA stays reachable. Applied to
   BOTH the no-grid (1) and grid (2) options. Bleed it to the column width (negative
   margin + matching padding keeps the content in place), soft paper bg + blur so
   content reads under it, and a hairline divider under it. */
html[data-design="1"] main {
  --pad: 24px; /* the no-grid column padding, so the bar can bleed to the column edge */
}
@media (max-width: 480px) {
  html[data-design="1"] main {
    --pad: 18px;
  }
}
html[data-design="1"] main > .top,
html[data-design="2"] main > .top {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  background: rgba(245, 244, 240, 0.85);
  -webkit-backdrop-filter: saturate(1.4) blur(9px);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--hairline);
}
/* no-grid has no section rhythm, so give its sticky bar its own breathing room */
html[data-design="1"] main > .top {
  padding-block: 13px;
  margin-bottom: 30px;
}
/* grid: the header's own divider replaces the first section separator (no double line) */
html[data-design="2"] main > .top + *::before {
  display: none;
}

/* ---------- design switcher (dev tool; not part of the landing) ---------- */
.design-switch {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--control-bg);
  border-radius: 999px;
  box-shadow: var(--shadow-control);
}
.ds-label {
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 7px;
}
.ds-btn {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  padding: 6px 11px;
  border-radius: 999px;
  transition:
    color 0.14s ease,
    background-color 0.16s var(--ease-out),
    transform 0.1s ease;
}
.ds-btn:hover {
  color: var(--ink);
}
.ds-btn:active {
  transform: scale(0.96);
}
.ds-btn.active {
  background: var(--tabs-bg);
  color: var(--ink);
}
.ds-btn.ds-ghost {
  color: var(--ink-3);
}
.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 36, 20, 0.22);
}
@media (max-width: 480px) {
  .design-switch {
    bottom: 10px;
  }
  .ds-btn {
    padding: 6px 9px;
  }
}