/* ==========================================================================
   REBORN STORE

   The store page rebuilt in the homepage's block language. Replaces store.css
   outright — that stylesheet drew this page as a dark HUD, and three layers of
   overrides on top of it were the reason the page never sat in the same system
   as the rest of the site.

   What this file owns: the whole composition (section rhythm, hero, product
   window, stat rail, capability row, configurator, plan grid, comparison,
   timeline, FAQ, final CTA, tour dialog) plus the handful of base rules
   store.css used to supply for shared components (`.store-button` box, the
   skip link, the segmented control, the icon button).

   What it does not own: colour, type scale and shared chrome come from
   reborn-core.css; buttons, cards, HUD atoms and status inks come from
   reborn-pages.css. Where a rule here answers one of theirs, it says so.

   ---------------------------------------------------------------------------
   COMPOSITION NOTES (2026-08-17 rebuild)

   The previous version drew every one of the eight sections the same way:
   left-aligned heading block, then a grid of bordered cards with a hard
   shadow. Three of those grids (capabilities, plans, onboarding) also cycled
   the same four saturated hues card by card, so the page carried the palette's
   full range three times over with no element ranked above another. Read top
   to bottom it was one texture repeated eight times — which is what made a
   perfectly on-brand page look unresolved.

   The rebuild takes the discipline the homepage already uses and applies it
   here, so "same style as the other pages" becomes true of the composition and
   not just the colours:

   - One hue per SECTION (`--sv-accent`), never per card. The rainbow still
     runs across the page, just at the scale where it reads as navigation.
   - Section seams. Dashed rules between sections and two sections that own a
     ground of their own (the pricing band, the closing slab), so the scroll has
     a rhythm instead of eight identical white blocks.
   - Ranked elevation. The hard shadow is now reserved for the things being
     sold — the product window, the stat rail, the plan cards, the answer bar,
     the closing slab. Explainer blocks (capabilities, timeline) lost their
     boxes entirely and are drawn with rules and whitespace.
   - Three different shapes for the three explainer blocks: a divided row, a
     three-question strip with a wide answer bar, a connected timeline. None of
     them is a card grid.

   Class names the JavaScript reads (`.pricing-card`, `.product-preview__panel`,
   `.faq-grid details`, `.store-choice-grid`, every `data-*` hook and every id)
   are kept exactly as store.js expects; everything built fresh is `sv-*`.

   Load order: reborn-core.css → reborn-pages.css → this file.
   ========================================================================== */

/* ==========================================================================
   0. BASE

   store.js toggles visibility with the `hidden` attribute in nine places
   (preview panels, the play button, the savings line, the recommendation
   badge and body, the extra comparison rows, the currency hint). Several of
   those elements are given a `display` below, which would beat the UA's
   `[hidden]` rule — so the attribute is re-asserted once, here, rather than
   remembered at nine separate declarations.
   ========================================================================== */

.store-v2-page :is(.sv-shell, .sv-dialog, .sv-mobile-bar) [hidden] { display: none !important; }

/* This page loads no Tailwind preflight, so it inherits the UA's content-box —
   which means every `width: 100%` here resolves to 100% *plus* the element's
   own padding and border. The recommendation CTA is the case that shows it:
   in a 272px grid column it measured 325px and hung 53px outside the bar.
   Scoped to the three roots this file owns rather than set globally, because
   site-chrome's header and footer size themselves under the old box model. */
.store-v2-page :is(.sv-shell, .sv-dialog, .sv-mobile-bar),
.store-v2-page :is(.sv-shell, .sv-dialog, .sv-mobile-bar) *,
.store-v2-page :is(.sv-shell, .sv-dialog, .sv-mobile-bar) *::before,
.store-v2-page :is(.sv-shell, .sv-dialog, .sv-mobile-bar) *::after {
  box-sizing: border-box;
}

.store-v2-page .sv-shell {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

.store-v2-page .store-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 60;
  padding: .7rem 1.1rem;
  border: 2px solid var(--reset-cream);
  border-radius: 12px;
  background: var(--reset-surface);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}

.store-v2-page .store-skip-link:focus-visible { top: 1rem; }

/* reborn-pages.css gives `.store-button` its skin (pill, ink border, hard
   shadow) but not its box — that came from store.css. */
.store-v2-page .store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.5rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

/* Same story for the segmented control and the dialog's close button. */
.store-v2-page .pricing-control__options {
  display: inline-flex;
  align-items: center;
}

.store-v2-page .pricing-control__options button {
  padding-inline: 1rem;
  cursor: pointer;
  font-family: var(--heading-font-family);
  font-weight: 700;
  white-space: nowrap;
}

.store-v2-page .store-icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 12px;
  background: var(--reset-surface);
  cursor: pointer;
  place-items: center;
}

.store-v2-page .store-icon-button:hover { border-color: var(--reset-cream); }

/* ==========================================================================
   1. SECTION SYSTEM

   Three things make the page scan: the hue each section owns, the seam
   between one section and the next, and one heading block built the same way
   every time. Nothing else is shared between sections — the blocks inside
   them are deliberately different shapes.
   ========================================================================== */

/* One hue per section, the way home-redesign.css assigns `--sec-accent`.
   `--sv-accent` paints fills that carry the dark tile ink on top;
   `--sv-accent-ink` is the darkened twin for the cases where the hue has to
   be type or a hairline on the page ground. */
.store-v2-page .sv-section {
  --sv-accent: var(--reset-sun);
  --sv-accent-ink: var(--reset-ink-sun);
  position: relative;
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
  scroll-margin-top: 5.5rem;
}

.store-v2-page #capabilities { --sv-accent: var(--reset-sky); --sv-accent-ink: var(--reset-ink-sky); }
.store-v2-page .sv-configurator { --sv-accent: var(--reset-rose); --sv-accent-ink: var(--reset-ink-rose); }
.store-v2-page #comparison { --sv-accent: var(--reset-sky); --sv-accent-ink: var(--reset-ink-sky); }
.store-v2-page #onboarding { --sv-accent: var(--reset-coral); --sv-accent-ink: var(--reset-ink-coral); }
.store-v2-page #faq { --sv-accent: var(--reset-rose); --sv-accent-ink: var(--reset-ink-rose); }

/* Section boundaries. Same device as the homepage: without a rule at the seam
   a run of white sections reads as one continuous scroll. */
.store-v2-page .sv-section + .sv-section::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--shell);
  border-top: 1.5px dashed var(--reset-line);
  content: "";
  translate: -50% 0;
}

/* Two sections carry a ground of their own, and a section that follows one
   already has a hard edge above it. Either way the dashed seam is redundant. */
.store-v2-page :is(.sv-pricing, .sv-final)::before,
.store-v2-page .sv-pricing + .sv-section::before { display: none; }

.store-v2-page .sv-wrap {
  width: var(--shell);
  margin-inline: auto;
}

.store-v2-page .sv-head {
  display: flex;
  max-width: 46rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* The eyebrow was 12px of mono in the section's accent — the quietest thing in
   a block whose job is to tell you which part of the page you are in. As the
   bordered pill the homepage uses it becomes the marker the eye scrolls
   between, and the accent moves into the disc where it is a fill rather than
   11px type. Every declaration here answers one in reborn-pages.css §7. */
.store-v2-page .sv-head .store-eyebrow,
.store-v2-page .sv-hero__copy .store-eyebrow,
.store-v2-page .sv-final__copy .store-eyebrow {
  padding: .34rem .78rem .34rem .55rem;
  border: 1.5px solid var(--reset-cream);
  border-radius: 999px;
  color: var(--reset-cream) !important;
  background: var(--reset-surface) !important;
  box-shadow: 3px 3px 0 var(--reset-shadow);
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

.store-v2-page .sv-head .store-eyebrow::before,
.store-v2-page .sv-hero__copy .store-eyebrow::before,
.store-v2-page .sv-final__copy .store-eyebrow::before {
  display: block;
  width: 9px !important;
  height: 9px !important;
  flex: none;
  border: 1.5px solid var(--reset-cream);
  border-radius: 50% !important;
  background: var(--sv-accent) !important;
  content: "";
}

/* `.hud-tag`'s leading bar is drawn by reborn-pages.css, but its `content`
   lived in a page stylesheet this file replaces. */
.store-v2-page .hud-tag::before {
  display: block;
  content: "";
}

.store-v2-page .sv-title {
  margin: 0;
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  line-height: 1.06;
}

/* `--fs-xl` tops out at 2rem, which was set when the shell was narrower. On a
   1280px shell that left section headings barely larger than their own lead
   paragraph, and a heading that does not outrank its own body copy is the
   fastest way to make a long page feel flat. */
.store-v2-page .sv-title--sec {
  font-size: clamp(1.55rem, 1.1rem + 1.35vw, 2.35rem);
  line-height: 1.12;
}

.store-v2-page .sv-lead {
  max-width: 56ch;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* The lead is the longest run of grey in each section. Hung off an accent rule
   it reads as a captioned intro rather than a slab — same words, half the
   perceived mass. The centred heads below opt out. */
.store-v2-page .sv-head .sv-lead {
  padding-left: 1.05rem;
  background-image: linear-gradient(var(--sv-accent), var(--sv-accent));
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 3px 100%;
}

.store-v2-page .sv-section p { text-wrap: pretty; }

/* The quiet footnote under a block: an icon plus one line, never a paragraph. */
.store-v2-page .sv-note {
  display: flex;
  max-width: 60ch;
  align-items: baseline;
  gap: .55rem;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.store-v2-page .sv-note i { color: var(--sv-accent-ink); }
.store-v2-page .sv-note a { color: var(--reset-ink-coral); font-weight: 700; }

.store-v2-page .sv-note--center {
  margin-inline: auto;
  margin-top: 1.75rem;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   2. HERO

   Copy beside the product window, with the window taking the larger share —
   it is the page's single strongest asset, a real screenshot of the thing
   being sold, and at 50/50 it was rendering at roughly the size of a feature
   card. The stat rail below closes the fold as one object rather than four
   detached tiles.
   ========================================================================== */

.store-v2-page .sv-hero {
  padding-top: clamp(1.5rem, 3.5vw, 2.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* A dot field behind the fold, faded out before it reaches the stat rail. It
   sits in a pseudo rather than on the section's own background because a mask
   on the section would take the type down with the texture. */
.store-v2-page .sv-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(var(--reset-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 52%, transparent 88%);
  pointer-events: none;
}

.store-v2-page .sv-hero > * {
  position: relative;
  z-index: 1;
}

.store-v2-page .sv-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.store-v2-page .sv-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.05rem;
}

.store-v2-page .sv-hero__copy .sv-title { max-width: 15ch; }
.store-v2-page .sv-hero__copy .sv-lead { max-width: 40ch; }

.store-v2-page .sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .35rem;
}

.store-v2-page .sv-actions .store-button { flex-shrink: 0; }

@media (min-width: 1040px) {
  .store-v2-page .sv-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  /* Past this width the headline gets a share of a shell that has stopped
     growing, not the viewport, so the global step overshoots its own column. */
  .store-v2-page .sv-hero__copy .sv-title { font-size: clamp(2.1rem, 1.35rem + 1.9vw, 2.95rem); }
}

/* ==========================================================================
   3. PRODUCT WINDOW

   Same construction as the launcher page's `.lx-window`: a saturated title
   bar, an ink border and a hard shadow, so the screenshot reads as an
   application rather than as another card with a picture in it.

   reborn-pages.css already paints `.product-preview*` for the light theme;
   these rules supply the layout store.css used to own, and take the title bar
   from panel to sky so the frame reads as chrome.
   ========================================================================== */

.store-v2-page .product-preview {
  overflow: hidden;
  min-width: 0;
  border: 2px solid var(--reset-cream) !important;
  border-radius: 20px !important;
  box-shadow: 9px 9px 0 var(--reset-shadow) !important;
}

.store-v2-page .product-preview__topline {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .6rem .9rem;
  border-bottom: 2px solid var(--reset-cream) !important;
  color: var(--reset-tile-ink) !important;
  background: var(--reset-sky) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-v2-page .sv-window__dots {
  display: inline-flex;
  flex-shrink: 0;
  gap: .35rem;
}

.store-v2-page .sv-window__dots i {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--reset-tile-ink);
  border-radius: 50%;
}

.store-v2-page .sv-window__dots i:first-child { background: var(--reset-coral); }

.store-v2-page .sv-window__name {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-v2-page .sv-window__state {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .4rem;
}

.store-v2-page .product-preview__status {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--reset-tile-ink);
  border-radius: 50%;
}

.store-v2-page .product-preview__tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-bottom: 1.5px solid var(--reset-line);
  background: var(--reset-panel-raised) !important;
}

.store-v2-page .product-preview__tabs button {
  flex: 1;
  min-height: 38px;
  padding-inline: .6rem;
  border: 0;
  cursor: pointer;
  font-family: var(--heading-font-family);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 16:9 matches Launcher.mp4 and crm.jpg, so `cover` never crops the UI. */
.store-v2-page .product-preview__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--reset-bg);
}

.store-v2-page .product-preview__panel {
  position: absolute;
  inset: 0;
}

.store-v2-page .product-preview__panel :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-v2-page .product-preview__play {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  border: 0;
  background: rgba(12, 13, 17, .34);
  cursor: pointer;
  place-items: center;
  transition: background .2s ease;
}

.store-v2-page .product-preview__play:hover { background: rgba(12, 13, 17, .18); }

.store-v2-page .product-preview__play span {
  display: grid;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--reset-shadow);
  font-size: 1.25rem;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.store-v2-page .product-preview__play:hover span {
  box-shadow: 2px 2px 0 var(--reset-shadow);
  transform: translate(2px, 2px);
}

/* The play glyph is a triangle — optical centring needs a nudge. */
.store-v2-page .product-preview__play span i { transform: translateX(2px); }

.store-v2-page .product-preview__caption {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-top: 2px solid var(--reset-cream);
  background: var(--reset-panel-raised) !important;
}

.store-v2-page .product-preview__caption p {
  margin: 0;
  font-size: var(--fs-sm);
}

.store-v2-page .product-preview__caption button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--heading-font-family);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .store-v2-page .sv-window__state { display: none; }
  .store-v2-page .product-preview__caption { justify-content: flex-start; }
}

/* ==========================================================================
   4. STAT RAIL

   Four numbers that belong to one claim, so they are drawn as one object:
   a single bordered rail split by ink rules, one shadow, one radius. As four
   separately-shadowed saturated tiles they were four competing surfaces
   directly under a screenshot that already carries the fold — the loudest
   thing on the page was its footnote.

   The hues survive where they belong: on the numerals, as the accent inks the
   homepage's trust row uses for exactly this.
   ========================================================================== */

.store-v2-page .sv-stats {
  display: grid;
  overflow: hidden;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0;
  border: 2px solid var(--reset-cream);
  border-radius: 18px;
  background: var(--reset-panel-raised);
  box-shadow: 6px 6px 0 var(--reset-shadow);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.store-v2-page .sv-stats li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem);
  border-left: 2px solid var(--reset-cream);
}

.store-v2-page .sv-stats li:first-child { border-left: 0; }

.store-v2-page .sv-stats li:nth-child(1) { --sv-cell: var(--reset-ink-sun); }
.store-v2-page .sv-stats li:nth-child(2) { --sv-cell: var(--reset-ink-rose); }
.store-v2-page .sv-stats li:nth-child(3) { --sv-cell: var(--reset-ink-sky); }
.store-v2-page .sv-stats li:nth-child(4) { --sv-cell: var(--reset-ink-coral); }

.store-v2-page .sv-stats strong {
  color: var(--sv-cell);
  font-family: var(--heading-font-family);
  font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.store-v2-page .sv-stats span {
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .store-v2-page .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-v2-page .sv-stats li:nth-child(odd) { border-left: 0; }
  .store-v2-page .sv-stats li:nth-child(n + 3) { border-top: 2px solid var(--reset-cream); }
}

@media (max-width: 520px) {
  .store-v2-page .sv-stats { grid-template-columns: minmax(0, 1fr); }
  /* Same specificity as the `:nth-child(odd)` rule above, and later — the even
     cells need their left rule dropped too once the grid is one column. */
  .store-v2-page .sv-stats li:nth-child(n) { border-left: 0; }
  .store-v2-page .sv-stats li + li { border-top: 2px solid var(--reset-cream); }
}

/* ==========================================================================
   5. CAPABILITY ROW

   Three products, drawn as one divided row rather than three cards. This
   block sits between the hero window and the configurator — two objects that
   both need to look clickable — so it is the one place on the page that
   deliberately has no box, no fill and no shadow. It is an explainer, and an
   explainer that is styled like a control competes with the controls.
   ========================================================================== */

.store-v2-page .sv-caps {
  display: grid;
  border-top: 2px solid var(--reset-cream);
  counter-reset: sv-cap;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-v2-page .sv-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.15rem, 2.4vw, 1.9rem);
  border: 0;
  border-left: 1.5px dashed var(--reset-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  counter-increment: sv-cap;
}

.store-v2-page .sv-cap:first-child {
  border-left: 0;
  padding-left: 0;
}

.store-v2-page .sv-cap:last-child { padding-right: 0; }

.store-v2-page .sv-cap::before {
  color: var(--reset-muted);
  content: "0" counter(sv-cap);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
}

.store-v2-page .sv-caps > .sv-cap:nth-child(1) { --sv-tile: var(--reset-sun); }
.store-v2-page .sv-caps > .sv-cap:nth-child(2) { --sv-tile: var(--reset-rose); }
.store-v2-page .sv-caps > .sv-cap:nth-child(3) { --sv-tile: var(--reset-sky); }

.store-v2-page .sv-cap__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px solid var(--reset-cream);
  border-radius: 14px;
  color: var(--reset-tile-ink);
  background: var(--sv-tile, var(--reset-sun));
  box-shadow: 4px 4px 0 var(--reset-shadow);
  font-size: 1.25rem;
  place-items: center;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}

.store-v2-page .sv-cap:hover .sv-cap__icon {
  box-shadow: 6px 6px 0 var(--reset-shadow);
  transform: translate(-2px, -2px) rotate(-5deg);
}

.store-v2-page .sv-cap h3 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.store-v2-page .sv-cap p {
  max-width: 34ch;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .store-v2-page .sv-caps { grid-template-columns: minmax(0, 1fr); }
  .store-v2-page .sv-cap {
    padding-inline: 0;
    border-left: 0;
    border-top: 1.5px dashed var(--reset-line);
  }
  .store-v2-page .sv-cap:first-child { border-top: 0; }
}

/* ==========================================================================
   6. CONFIGURATOR

   Three questions across the top, the answer as a full-width bar underneath.

   It used to be questions on the left and a sticky coral box on the right,
   which meant the first thing the section showed was a large empty saturated
   panel apologising for having nothing to say yet. Laid out horizontally the
   three questions fit one screen, the answer lands under them as a single
   decisive object, and — see `:has()` below — the bar stays quiet until there
   is actually a recommendation in it.

   The section also moved above PRICING, which is the order docs/store-
   redesign-spec.md §2 defines (hero → configurator → recommendation → pricing)
   and the reverse of what the markup shipped.
   ========================================================================== */

.store-v2-page .sv-quiz { display: block; }

.store-v2-page .sv-quiz__steps {
  display: grid;
  gap: clamp(.85rem, 1.8vw, 1.25rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.store-v2-page .sv-quiz__step {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 18px;
  background: var(--reset-panel);
}

.store-v2-page .sv-quiz__step legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0;
  margin-bottom: 1rem;
  color: var(--reset-cream) !important;
  font-family: var(--heading-font-family);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
}

.store-v2-page .sv-quiz__num {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border: 1.5px solid var(--reset-cream);
  border-radius: 50%;
  color: var(--reset-tile-ink);
  background: var(--sv-accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 700;
  place-items: center;
}

/* Rows, not squares. In a third of the shell the old auto-fit grid collapsed
   to one column anyway, so every option was a 74px-tall box holding one short
   label floating in the middle of it. As a row the icon and the label are one
   object and five options cost the height three used to. */
.store-v2-page .sv-choices {
  display: grid;
  gap: .5rem;
  grid-template-columns: minmax(0, 1fr);
}

.store-v2-page .sv-choices--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Positioned so the visually-hidden radio inside cannot become the page's
   offset parent and scroll the layout when it takes focus. */
.store-v2-page .sv-choices label {
  position: relative;
  margin: 0;
}

/* The radio stays in the accessibility tree and keeps its focus ring — it is
   only pulled out of the visual box so the tile can be the control. */
.store-v2-page .sv-choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The skin (border, radius, surface, and the sun fill on `:checked`) is
   reborn-pages.css §"Choice tiles"; only the box is set here. */
.store-v2-page .sv-choices label > span {
  display: flex;
  height: 100%;
  min-height: 46px;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.store-v2-page .sv-choices--compact label > span {
  justify-content: center;
  text-align: center;
}

.store-v2-page .sv-choices label > span i {
  width: 1.15rem;
  flex-shrink: 0;
  color: var(--sv-accent-ink);
  font-size: 1rem;
  text-align: center;
}

.store-v2-page .sv-choices label > span b {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
}

.store-v2-page .sv-choices label:hover > span { border-color: var(--reset-cream) !important; }

.store-v2-page .sv-choices input:checked + span {
  box-shadow: 3px 3px 0 var(--reset-shadow) !important;
  transform: translate(-2px, -2px);
}

.store-v2-page .sv-choices input:checked + span i { color: inherit; }

.store-v2-page .sv-choices input:focus-visible + span {
  outline: 3px solid var(--reset-ink-coral);
  outline-offset: 3px;
}

/* --- the answer ---------------------------------------------------------- */

.store-v2-page .sv-result {
  display: block;
  min-width: 0;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  padding: clamp(1.35rem, 2.8vw, 2rem);
  border: 2px solid var(--reset-cream);
  border-radius: 20px;
  color: var(--reset-tile-ink);
  background: var(--reset-coral);
  box-shadow: 7px 7px 0 var(--reset-shadow);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Before all three questions are answered there is nothing to sell, so the bar
   drops to a dashed outline and gets out of the way. `:has()` is the only way
   to reach the container from the state store.js writes (it toggles `hidden`
   on the two children, never a class on the parent); browsers without it just
   keep the coral bar, which is the pre-existing behaviour. */
.store-v2-page .sv-result:has(> .sv-result__body[hidden]) {
  border-style: dashed;
  border-color: var(--reset-line-strong);
  color: var(--reset-muted);
  background: transparent;
  box-shadow: none;
}

.store-v2-page .sv-result__empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  text-align: center;
}

.store-v2-page .sv-result:has(> .sv-result__body[hidden]) .sv-result__empty i {
  color: var(--sv-accent-ink) !important;
}

.store-v2-page .sv-result__empty i {
  color: var(--reset-tile-ink) !important;
  font-size: 1.35rem;
}

.store-v2-page .sv-result__empty p {
  max-width: 46ch;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* The recommendation carries six children and no wrapper elements of its own,
   so the bar is assembled with named areas rather than by nesting: identity in
   the first column, the reasoning in the middle, the action on the right. */
.store-v2-page .sv-result__body {
  display: grid;
  gap: .5rem;
  grid-template-columns: minmax(0, 1fr);
}

.store-v2-page .sv-result :is(.store-kicker, h3, dt, dd, .sv-result__price) {
  color: var(--reset-tile-ink) !important;
}

.store-v2-page .sv-result .store-kicker::before { background: var(--reset-tile-ink) !important; }

.store-v2-page .sv-result__body h3 {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
  line-height: 1;
}

.store-v2-page .sv-result__price {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.store-v2-page .sv-result__list {
  display: grid;
  gap: .75rem;
  margin: .35rem 0 .5rem;
}

.store-v2-page .sv-result__list > div {
  padding-top: .65rem;
  border-top: 1.5px solid rgba(36, 29, 20, .28);
}

/* No `opacity` here: faded ink on coral put this 12px label at 4.2:1. The mono
   face, the tracking and the caps carry the hierarchy instead. */
.store-v2-page .sv-result__list dt {
  margin-bottom: .2rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.store-v2-page .sv-result__list dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
}

/* A light plate keeps the dark label at the same contrast it has on every
   other tile colour. */
.store-v2-page .sv-result .store-button--primary {
  width: 100%;
  border-color: var(--reset-tile-ink) !important;
  color: var(--reset-tile-ink) !important;
  background: var(--reset-control-surface) !important;
}

.store-v2-page .sv-result .store-button--primary:hover { background: var(--reset-sun) !important; }

.store-v2-page .sv-result__all {
  color: var(--reset-tile-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 920px) {
  .store-v2-page .sv-result__body {
    gap: .35rem clamp(1.5rem, 3.5vw, 3rem);
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 16rem);
    grid-template-areas:
      "kicker  facts action"
      "name    facts action"
      "price   facts more";
    align-items: center;
  }
  .store-v2-page .sv-result__body > .store-kicker { grid-area: kicker; align-self: end; }
  .store-v2-page .sv-result__body > h3 { grid-area: name; }
  .store-v2-page .sv-result__price { grid-area: price; align-self: start; }
  .store-v2-page .sv-result__list {
    margin: 0;
    grid-area: facts;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(1rem, 2.5vw, 2rem);
  }
  .store-v2-page .sv-result__list > div {
    padding-top: 0;
    padding-left: 1rem;
    border-top: 0;
    border-left: 1.5px solid rgba(36, 29, 20, .28);
  }
  .store-v2-page .sv-result .store-button--primary { grid-area: action; }
  .store-v2-page .sv-result__all { grid-area: more; align-self: start; }
}

@media (max-width: 980px) {
  .store-v2-page .sv-quiz__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   7. PRICING

   The one section that owns a ground. Eight white sections in a row give the
   eye nowhere to stop, and the block that has to be found from a header link
   is the right one to lift out of the column — the band is the page's only
   "you are here".

   Card treatment: reborn-pages.css fills all three plan tiles with a saturated
   colour, which is right for a three-across feature grid and wrong for a price
   table — with every card shouting equally there is no recommended plan, and a
   pricing page that recommends nothing converts nothing. MINI and ENTERPRISE
   are panel cards, PRO is the one sun tile, and on desktop PRO also breaks the
   row's top and bottom edge so the ranking survives without colour alone.
   ========================================================================== */

.store-v2-page .sv-pricing {
  border-block: 2px solid var(--reset-cream);
  background-color: var(--reset-panel);
  background-image: radial-gradient(var(--reset-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

.store-v2-page .sv-pricing .sv-head {
  max-width: 44rem;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* The accent rule is a left-hang device; on a centred head it reads as a
   stray mark. */
.store-v2-page .sv-pricing .sv-head .sv-lead {
  padding-left: 0;
  background-image: none;
}

.store-v2-page .sv-switches {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.store-v2-page .pricing-control {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.store-v2-page .pricing-control__label {
  color: var(--reset-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-v2-page .pricing-controls__hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Stretched, not `start`: the three cards hold different numbers of bullets,
   and a price table whose CTAs sit at three different heights reads as three
   unrelated cards rather than one comparison. `.sv-plan__list { flex: 1 }`
   takes up the slack so every footer lands on the same line. */
.store-v2-page .pricing-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.store-v2-page .pricing-grid > .pricing-card {
  --sv-plan-ink: var(--reset-cream);
  --sv-plan-soft: var(--reset-muted);
  --sv-plan-rule: var(--reset-line);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding: 0;
  border-color: var(--reset-cream) !important;
  border-radius: 20px !important;
  color: var(--sv-plan-ink) !important;
}

.store-v2-page .pricing-grid > .pricing-card.sv-plan--featured {
  --sv-plan-ink: var(--reset-tile-ink);
  --sv-plan-soft: rgba(36, 29, 20, .78);
  --sv-plan-rule: rgba(36, 29, 20, .28);
  box-shadow: 9px 9px 0 var(--reset-shadow) !important;
}

/* The shared layer fills tile 1 sun, tile 2 rose and tile 3 sky, each of those
   last two through an `:nth-child()` that outranks a plain class selector — so
   the fills have to be answered position by position rather than in one rule.
   `--reset-surface` rather than `--reset-panel`: these now sit on the panel
   band, and a panel card on a panel ground has no edge but its border. */
.store-v2-page .pricing-grid > .pricing-card,
.store-v2-page .pricing-grid > .pricing-card:nth-child(2),
.store-v2-page .pricing-grid > .pricing-card:nth-child(3) {
  background: var(--reset-surface) !important;
}

.store-v2-page .pricing-grid > .pricing-card.sv-plan--featured,
.store-v2-page .pricing-grid > .pricing-card.sv-plan--featured:nth-child(2),
.store-v2-page .pricing-grid > .pricing-card.sv-plan--featured:nth-child(3) {
  background: var(--reset-sun) !important;
}

/* Non-featured cards take the ordinary outline button. The light plate
   reborn-pages.css puts behind every `.pricing-card .store-button` exists so a
   dark label survives a saturated tile — and only PRO is one now. */
.store-v2-page .pricing-grid > .pricing-card:not(.sv-plan--featured) .store-button {
  border-color: var(--reset-cream) !important;
  color: var(--reset-cream) !important;
  background: transparent !important;
}

/* `.frontline-reborn .pricing-card :is(h3, h4, p, li, strong, span, i, …)` puts
   `color: currentColor !important` on every descendant. That is a no-op in
   itself — currentColor on a child is what inheritance already gives it — but
   it blocks anything less specific, so each deliberate exception below has to
   clear (0,2,1). */
.store-v2-page .pricing-grid .sv-plan__audience { color: var(--sv-plan-soft) !important; }

.store-v2-page .pricing-card .sv-plan__ribbon,
.store-v2-page .sv-plan__rec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: .6rem 1rem;
  border-bottom: 1.5px solid var(--reset-cream);
  color: var(--reset-tile-ink) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.store-v2-page .pricing-card .sv-plan__ribbon { background: var(--reset-coral); }

.store-v2-page .sv-plan__rec {
  border-bottom-color: var(--reset-cream) !important;
  background: var(--reset-ok) !important;
}

/* Two stacked bands say the same thing twice; the personal recommendation is
   the more specific claim, so it wins the slot. */
.store-v2-page .sv-plan.is-recommended .sv-plan__ribbon { display: none; }

.store-v2-page .sv-plan__head {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1.4rem, 2.8vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.15rem, 2.2vw, 1.5rem);
}

.store-v2-page .sv-plan__head h3 {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: var(--fs-lg) !important;
  letter-spacing: .02em;
  line-height: 1;
}

.store-v2-page .sv-plan__audience {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.store-v2-page .sv-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  margin: .6rem 0 0;
}

.store-v2-page .sv-plan__price strong {
  font-family: var(--heading-font-family);
  font-size: var(--fs-2xl) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.store-v2-page .sv-plan__price--custom strong { font-size: var(--fs-lg) !important; }

.store-v2-page .sv-plan__price span {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.store-v2-page .sv-plan__saving {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.store-v2-page .pricing-grid .sv-plan__saving { color: var(--reset-ink-ok) !important; }
.store-v2-page .pricing-grid .sv-plan--featured .sv-plan__saving { color: var(--reset-tile-ink) !important; }

.store-v2-page .sv-plan__limit {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  margin: .65rem 0 0;
  padding: .35rem .75rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.store-v2-page .sv-plan__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .65rem;
  margin: 0;
  padding: clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.6vw, 1.75rem);
  border-top: 1.5px solid var(--sv-plan-rule);
  list-style: none;
}

.store-v2-page .sv-plan__list li {
  display: grid;
  gap: .6rem;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.store-v2-page .sv-plan__list li i {
  margin-top: .3em;
  font-size: .75em;
}

.store-v2-page .pricing-grid .sv-plan__list li i { color: var(--reset-ink-ok) !important; }
/* On the sun tile the ok-ink twin is a mid green on saturated yellow; the
   tile's own ink is the pair that palette was tuned for. */
.store-v2-page .pricing-grid .sv-plan--featured .sv-plan__list li i {
  color: var(--reset-tile-ink) !important;
}

.store-v2-page .sv-plan__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 0 clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.4rem, 2.8vw, 1.9rem);
}

.store-v2-page .sv-plan__foot .store-button { width: 100%; }

.store-v2-page .sv-plan__details {
  padding: 0;
  border: 0;
  background: none;
  color: inherit !important;
  cursor: pointer;
  font-family: var(--body-copy-font-family);
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: .8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.store-v2-page .sv-plan__details:hover { opacity: 1; }

/* The recommended plan breaks the row's edge. `align-items: stretch` on the
   grid means a negative block margin makes the card taller than its
   neighbours rather than moving it off its own baseline, so nothing below it
   shifts and the three footers stay on the same line. */
@media (min-width: 1001px) {
  .store-v2-page .pricing-grid > .sv-plan--featured { margin-block: -1.1rem; }
}

@media (max-width: 1000px) {
  .store-v2-page .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the featured plan reads first — nobody scrolls past a price to
     find the one we recommend. */
  .store-v2-page .sv-plan--featured { order: -1; }
}

/* ==========================================================================
   8. COMPARISON

   The old table ran thirteen rows, seven of which said "требует
   подтверждения". A comparison whose most repeated answer is "we'll get back
   to you" argues against the product; the definite rows are visible and the
   four that genuinely depend on the customer's setup live behind the toggle.

   PRO keeps the highlight it has in the plan grid, but as a full column spine
   rather than a pale wash — a tint alone disappears the moment the table is
   scrolled sideways on a phone.
   ========================================================================== */

.store-v2-page .sv-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--reset-cream);
  border-radius: 20px;
  background: var(--reset-panel-raised);
  box-shadow: 6px 6px 0 var(--reset-shadow);
  -webkit-overflow-scrolling: touch;
}

.store-v2-page .sv-table-wrap:focus-visible {
  outline: 3px solid var(--reset-ink-coral);
  outline-offset: 3px;
}

.store-v2-page .sv-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  color: var(--reset-cream) !important;
  font-size: var(--fs-sm);
}

.store-v2-page .sv-table :is(th, td) {
  padding: .9rem 1.15rem;
  border-bottom: 1.5px solid var(--reset-line) !important;
  text-align: left;
  vertical-align: middle;
}

.store-v2-page .sv-table thead th {
  border-bottom: 2px solid var(--reset-cream) !important;
  background: var(--reset-panel-raised) !important;
  font-family: var(--heading-font-family);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The feature name has to stay readable while the plan columns scroll past it
   on a narrow screen; the cells carry an opaque ground so the rest slides
   underneath rather than through. */
.store-v2-page .sv-table :is(thead th, tbody th):first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--reset-panel-raised) !important;
}

.store-v2-page .sv-table thead th:first-child { z-index: 3; }

.store-v2-page .sv-table tbody th {
  color: var(--reset-cream) !important;
  font-weight: 700;
}

.store-v2-page .sv-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; }

/* The featured column, drawn as one continuous object down the table. The
   `inset` shadows are the only way to get side rules on a `border-collapse`
   table without the collapsed borders eating one of the two edges.

   `!important` throughout: reborn-pages.css clears `box-shadow` on
   `.comparison-table thead th` with one of its own, and an `!important`
   declaration beats a more specific plain one — the header cell was the single
   cell in the column that came back without its spine. */
.store-v2-page .sv-table :is(th, td).is-featured {
  background: rgba(255, 192, 46, .16) !important;
  box-shadow:
    inset 2px 0 0 var(--reset-cream),
    inset -2px 0 0 var(--reset-cream) !important;
}

.store-v2-page .sv-table thead th.is-featured {
  color: var(--reset-tile-ink) !important;
  background: var(--reset-sun) !important;
  box-shadow:
    inset 2px 0 0 var(--reset-cream),
    inset -2px 0 0 var(--reset-cream) !important;
}

.store-v2-page .sv-table tbody tr:last-child td.is-featured {
  box-shadow:
    inset 2px 0 0 var(--reset-cream),
    inset -2px 0 0 var(--reset-cream),
    inset 0 -2px 0 var(--reset-cream) !important;
}

.store-v2-page .sv-yes {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--reset-ink-ok);
  font-weight: 700;
}

.store-v2-page .sv-no { color: var(--reset-muted); }

.store-v2-page .sv-soon {
  color: var(--reset-ink-warn);
  font-weight: 600;
}

.store-v2-page #published-prices {
  margin-top: 2rem;
  scroll-margin-top: 6rem;
}

.store-v2-page #published-prices .sv-table {
  min-width: 0;
  table-layout: fixed;
}

.store-v2-page #published-prices .sv-table :is(th, td) {
  width: auto;
  min-width: 0;
  padding: .75rem;
  overflow-wrap: anywhere;
}

.store-v2-page #published-prices a {
  color: inherit;
  text-underline-offset: .2em;
}

/* `.store-button` is inline-flex, so `margin-inline: auto` alone would not
   centre it. */
.store-v2-page .sv-table-toggle {
  display: flex;
  width: fit-content;
  margin: 1.5rem auto 0;
}

/* ==========================================================================
   9. ONBOARDING TIMELINE

   Four steps on a dashed rail. As four bordered cards this was the page's
   third card grid in a row and said nothing the numbers weren't already
   saying; on a rail the sequence is the shape, which is the whole content of
   the block.
   ========================================================================== */

.store-v2-page .sv-steps {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

/* The rail sits at the discs' centre line: they are 2.4rem tall and the list
   items have no top padding, so that is 1.2rem down. */
.store-v2-page .sv-steps::before {
  position: absolute;
  top: calc(1.2rem - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background-image: repeating-linear-gradient(90deg,
    var(--reset-line-strong) 0 7px, transparent 7px 15px);
  content: "";
}

.store-v2-page .sv-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.store-v2-page .sv-steps li:nth-child(1) { --sv-tile: var(--reset-sun); }
.store-v2-page .sv-steps li:nth-child(2) { --sv-tile: var(--reset-rose); }
.store-v2-page .sv-steps li:nth-child(3) { --sv-tile: var(--reset-sky); }
.store-v2-page .sv-steps li:nth-child(4) { --sv-tile: var(--reset-coral); }

/* The disc has to be opaque and sit above the rail, and it needs a ring of
   page ground so the dashes stop cleanly at its edge rather than touching the
   ink border. */
.store-v2-page .sv-steps__num {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--reset-cream);
  border-radius: 50%;
  color: var(--reset-tile-ink);
  background: var(--sv-tile, var(--reset-sun));
  box-shadow: 0 0 0 6px var(--reset-bg), 3px 3px 0 var(--reset-shadow);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-xs);
  font-weight: 700;
  place-items: center;
}

.store-v2-page .sv-steps h3 {
  margin: .35rem 0 0;
  font-size: var(--fs-md);
  line-height: 1.2;
}

.store-v2-page .sv-steps p {
  max-width: 30ch;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Below the breakpoint the rail turns vertical — the same object rotated,
   rather than the block falling back to a stack of unrelated cards. */
@media (max-width: 860px) {
  .store-v2-page .sv-steps {
    gap: clamp(1.35rem, 4vw, 2rem);
    grid-template-columns: minmax(0, 1fr);
  }
  .store-v2-page .sv-steps::before {
    top: 1.2rem;
    right: auto;
    bottom: 1.2rem;
    left: calc(1.2rem - 1px);
    width: 2px;
    height: auto;
    background-image: repeating-linear-gradient(180deg,
      var(--reset-line-strong) 0 7px, transparent 7px 15px);
  }
  .store-v2-page .sv-steps li { padding-left: 3.6rem; }
  .store-v2-page .sv-steps__num {
    position: absolute;
    top: 0;
    left: 0;
  }
  .store-v2-page .sv-steps h3 { margin-top: 0; }
  .store-v2-page .sv-steps p { max-width: 54ch; }
}

/* ==========================================================================
   10. FAQ

   Six questions with six real answers. The page shipped fourteen, eight of
   which resolved to the same sentence about asking support — the shortest
   route to a visitor deciding the product is not ready.

   One column, not two: in a two-column accordion opening a question on the
   left reflows the column on the right, so every answer moves the question
   the reader was about to ask next. The heading block takes the freed space
   beside the list, which is also the one layout on the page that puts a
   section head anywhere other than above its content.
   ========================================================================== */

.store-v2-page .sv-wrap--split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.store-v2-page .sv-faq {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.store-v2-page .sv-faq details {
  overflow: hidden;
  border: 1.5px solid var(--reset-line-strong) !important;
  border-radius: 16px;
  background: var(--reset-panel) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.store-v2-page .sv-faq details:hover { border-color: var(--reset-cream) !important; }

.store-v2-page .sv-faq details[open] {
  border-color: var(--sv-accent) !important;
  border-width: 2px !important;
  box-shadow: 4px 4px 0 var(--reset-shadow);
}

.store-v2-page .sv-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-family: var(--heading-font-family);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

.store-v2-page .sv-faq summary::-webkit-details-marker { display: none; }

.store-v2-page .sv-faq summary::after {
  flex-shrink: 0;
  color: var(--sv-accent-ink) !important;
  content: "+";
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.3rem;
  line-height: 1;
}

.store-v2-page .sv-faq details[open] summary::after { content: "−"; }

.store-v2-page .sv-faq p {
  margin: 0;
  padding: 0 1.25rem 1.2rem;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .store-v2-page .sv-wrap--split {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  /* Explicit placement rather than auto-flow: the note is the third child but
     belongs under the heading in column one, and the accordion list has to
     span both rows so column one can hold two stacked blocks. */
  .store-v2-page .sv-wrap--split > .sv-head {
    margin-bottom: 0;
    grid-area: 1 / 1 / 2 / 2;
  }
  .store-v2-page .sv-wrap--split > .sv-faq { grid-area: 1 / 2 / 3 / 3; }
  .store-v2-page .sv-wrap--split > .sv-note {
    margin: 1.25rem 0 0;
    grid-area: 2 / 1 / 3 / 2;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   11. FINAL CTA

   The page's closing slab: one framed panel, centred, on the same dotted
   ground the homepage's closing block uses. It was a two-column layout with
   the copy on one side and a stack of full-width buttons on the other, which
   put the last thing the page says and the action it asks for at two
   different optical centres.
   ========================================================================== */

.store-v2-page .sv-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.35rem, 3vw, 2rem);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.35rem, 4vw, 3rem);
  border: 2px solid var(--reset-cream);
  border-radius: 24px;
  color: var(--reset-tile-ink);
  background-color: var(--reset-sun);
  /* The shared `--reset-dot` flips light in dark mode; this tile is sun in
     both themes, so its texture is stated rather than inherited. */
  background-image: radial-gradient(rgba(36, 29, 20, .11) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: 10px 10px 0 var(--reset-shadow);
  text-align: center;
}

.store-v2-page .sv-final__copy {
  display: flex;
  max-width: 34rem;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

.store-v2-page .sv-final__inner :is(h2, p, .store-eyebrow) {
  color: var(--reset-tile-ink) !important;
}

.store-v2-page .sv-final__copy .sv-title--sec {
  max-width: 20ch;
  font-size: var(--fs-2xl);
}

.store-v2-page .sv-final__copy .sv-lead {
  padding-left: 0;
  background-image: none;
}

/* The eyebrow pill keeps its light plate here — a bordered pill filled with
   the same sun as the slab behind it would read as an outline with nothing
   in it. */
.store-v2-page .sv-final__copy .store-eyebrow {
  border-color: var(--reset-tile-ink);
  background: var(--reset-control-surface) !important;
}

.store-v2-page .sv-final__copy .store-eyebrow::before {
  border-color: var(--reset-tile-ink);
  background: var(--reset-coral) !important;
}

.store-v2-page .sv-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: center;
}

.store-v2-page .sv-final__actions .store-button {
  min-width: 15rem;
  border-color: var(--reset-tile-ink) !important;
  color: var(--reset-tile-ink) !important;
}

.store-v2-page .sv-final__actions .store-button--primary { background: var(--reset-control-surface) !important; }
.store-v2-page .sv-final__actions .store-button--secondary { background: transparent !important; }

.store-v2-page .sv-final__actions .store-button:hover {
  color: var(--reset-tile-ink) !important;
  background: var(--reset-coral) !important;
}

.store-v2-page .sv-final__actions .sv-note {
  flex-basis: 100%;
  justify-content: center;
  color: var(--reset-tile-ink);
}

.store-v2-page .sv-final__inner .sv-note i { color: var(--reset-tile-ink) !important; }

/* ==========================================================================
   12. PRODUCT TOUR DIALOG
   ========================================================================== */

.store-v2-page .sv-dialog {
  width: min(58rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 2px solid var(--reset-cream) !important;
  border-radius: 20px !important;
  color: var(--reset-cream) !important;
  background: var(--reset-panel) !important;
  box-shadow: 8px 8px 0 var(--reset-shadow) !important;
}

.store-v2-page .sv-dialog::backdrop { background: rgba(12, 13, 17, .58); }

.store-v2-page .sv-dialog__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.store-v2-page .sv-dialog__head h2 {
  margin: .35rem 0 0;
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.store-v2-page .sv-dialog__media {
  aspect-ratio: 16 / 9;
  border-block: 2px solid var(--reset-cream);
  background: #000;
}

.store-v2-page .sv-dialog__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-v2-page .sv-dialog__steps {
  display: grid;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.store-v2-page .sv-dialog__steps li {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .9rem 1rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 12px;
  background: var(--reset-surface);
}

.store-v2-page .sv-dialog__steps span {
  color: var(--reset-ink-sun);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
}

.store-v2-page .sv-dialog__steps p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

body.store-v2-page.store-dialog-open { overflow: hidden; }

@media (max-width: 720px) {
  .store-v2-page .sv-dialog__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   13. MOBILE STICKY CTA

   Phones only, and it retires as soon as the final CTA is on screen — two
   copies of the same action in view at once is one too many.
   ========================================================================== */

.store-v2-page .sv-mobile-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  padding: .7rem clamp(1rem, 4vw, 1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  border-top: 2px solid var(--reset-cream);
  background: var(--reset-panel-raised);
  transition: transform .25s ease, opacity .25s ease;
}

.store-v2-page .sv-mobile-bar .store-button { width: 100%; }

.store-v2-page .sv-mobile-bar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
}

@media (max-width: 820px) {
  .store-v2-page .sv-mobile-bar { display: block; }
  /* Room for the bar so it never covers the last line of the footer. */
  .store-v2-page site-chrome-footer { display: block; padding-bottom: 4.5rem; }
}

/* ==========================================================================
   14. MOTION

   Every hover here is the same gesture the buttons make — the card steps
   toward the pointer and its shadow shortens. Suppressed wholesale under
   `prefers-reduced-motion`, which the transform-based hovers above need
   because the movement is the effect, not a decoration on it.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .store-v2-page :is(.sv-cap__icon, .sv-choices label > span, .sv-faq details,
    .sv-result, .product-preview__play span) {
    transition: none !important;
  }
  .store-v2-page :is(.sv-cap:hover .sv-cap__icon, .sv-choices input:checked + span,
    .product-preview__play:hover span) {
    transform: none !important;
  }
}

.store-v2-page .sv-buyer-copy p { max-width:80ch; line-height:1.7; }
.store-v2-page .sv-buyer-copy ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 2rem; padding-left:1.25rem; }
.store-v2-page .sv-buyer-copy a { color:inherit; text-decoration:underline; text-underline-offset:.2em; }
@media(max-width:600px) { .store-v2-page .sv-buyer-copy ul { grid-template-columns:1fr; } }