/* ==========================================================================
   vivaocean-theme / demo page layout
   --------------------------------------------------------------------------
   THIS FILE IS NOT PART OF THE THEME. It is the demo site's own page
   layout: hero grids, feature rows, price cards, changelog entries, and the
   paint classes for the demo's illustrations. Nothing in shell/, scene/,
   components/ or tokens/ depends on it, and you would not copy it into your
   own project.

   It exists as a file rather than as a <style> block because the demo is
   nine pages. The fleet's single-page demos inline this; nine copies of the
   same block would be nine places to forget, and the first thing to drift
   would be the one page nobody re-checked.

   It declares no values of its own. Every color and every measurement is a
   var() reference to tokens.css, which is the same rule the theme's own
   files follow, and it is what lets CUSTOMIZE.md's re-skin move reach the
   demo's illustrations without touching this file.

   The bare numbers here are grid breakpoints in three media queries, which
   cannot be custom properties, and the 2px underline on the pricing
   toggle's selected state.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   PAGE FURNITURE
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-2);
  margin: 0 0 var(--vo-space-4);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-3);
  margin: var(--vo-space-6) 0 0;
}

.rule {
  margin: var(--vo-space-12) 0;
  border: 0;
  border-top: var(--vo-border-width) solid var(--vo-border);
}

/* --------------------------------------------------------------------------
   GRIDS
   One column until there is room for more. The breakpoints are on the
   window's width rather than the viewport's in spirit, but a container
   query would make the demo the only part of this repository that needs
   one, so these are viewport widths chosen to line up with the shell's own
   transform at 1023px.
   -------------------------------------------------------------------------- */
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--vo-space-4);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--vo-space-6) 0 0;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   FEATURE ROWS
   Illustration beside prose, alternating sides on wide screens, stacked
   below. The alternation is done with grid order rather than direction, so
   the reading order in the markup is always prose first.
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  gap: var(--vo-space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin: var(--vo-space-8) 0;
}

/* The row already carries the separation. Leaving the shared heading margin
   on as well stacked 48px of collapsed margin under 32px of heading margin
   and put a hole between every section. */
.feature .vo-h3 {
  margin-top: 0;
}

@media (min-width: 780px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .feature-flip .feature-art {
    order: -1;
  }
}

.feature-art {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   ILLUSTRATION PAINT
   The demo's drawings read the same tokens as everything else, which is why
   the re-skin move in CUSTOMIZE.md changes them without knowing they exist.
   Four classes and no more; a fifth would be a palette rather than a set of
   roles.
   -------------------------------------------------------------------------- */
.ill-plate {
  fill: var(--vo-surface-muted);
  stroke: var(--vo-border);
}

.ill-line {
  fill: none;
  stroke: var(--vo-ink);
}

.ill-quiet {
  fill: none;
  stroke: var(--vo-ink-muted);
}

.ill-mark {
  fill: var(--vo-accent);
  stroke: none;
}

.ill-deep {
  fill: var(--vo-water-deep);
  stroke: none;
}

/* --------------------------------------------------------------------------
   PRICING
   The plan cards, and the billing toggle.

   THE TOGGLE IS A RADIO GROUP AND HAS NO SCRIPT. Two real radios in a real
   fieldset, visually hidden, with their labels as the visible control and
   :checked driving which price is shown. That buys three things at once: it
   is operable and announced correctly with a keyboard and a screen reader
   for free, it works with JavaScript disabled, and it survives the shell's
   content swap, which replaces the window's markup and would have wiped out
   any state a script was holding.
   -------------------------------------------------------------------------- */
.billing {
  display: block;
  margin: 0 0 var(--vo-space-6);
  padding: 0;
  border: 0;
}

.billing legend {
  padding: 0;
  margin: 0 0 var(--vo-space-2);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-bold);
  color: var(--vo-ink);
}

.billing-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-2);
}

.billing input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.billing label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--vo-space-1) var(--vo-space-3);

  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-medium);
  color: var(--vo-ink-muted);
  background: var(--vo-surface);
  border: var(--vo-border-width) solid var(--vo-border-strong);
  border-radius: var(--vo-radius);
  cursor: pointer;
}

.billing input:checked + label {
  color: var(--vo-ink);
  font-weight: var(--vo-weight-bold);
  background: var(--vo-surface-muted);
  border-bottom-width: 2px;
  border-bottom-color: var(--vo-accent);
}

.billing input:focus-visible + label {
  outline: var(--vo-ring-width) solid var(--vo-accent);
  outline-offset: var(--vo-ring-offset);
}

/* Which price is showing. The default is monthly; checking the annual radio
   swaps every price on the page at once, including the comparison table's
   price row further down.

   :has() on the section is what lets the radios stay next to their labels
   inside the fieldset, where the markup wants them, instead of being hoisted
   out to become siblings of everything they affect. */
.price-annual {
  display: none;
}

.pricing:has(#bill-annual:checked) .price-monthly {
  display: none;
}

.pricing:has(#bill-annual:checked) .price-annual {
  display: inline;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--vo-space-3);
  padding: var(--vo-space-6);

  background: var(--vo-surface);
  border: var(--vo-border-width) solid var(--vo-border);
  border-radius: var(--vo-radius);
  box-shadow: var(--vo-shadow-sm);
}

.plan-featured {
  border-color: var(--vo-accent);
  box-shadow: var(--vo-shadow-raised);
}

.plan-name {
  margin: 0;
  font-size: var(--vo-text-h3);
  font-weight: var(--vo-weight-bold);
  letter-spacing: var(--vo-tracking-tight);
}

.plan-price {
  margin: 0;
  font-family: var(--vo-font-mono);
  font-size: var(--vo-text-h2);
  font-weight: var(--vo-weight-bold);
  color: var(--vo-ink);
}

.plan-price small {
  font-family: var(--vo-font-sans);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-body);
  color: var(--vo-ink-muted);
}

.plan-what {
  margin: 0;
  padding: 0 0 0 var(--vo-space-4);
  font-size: var(--vo-text-sm);
  color: var(--vo-ink-muted);
}

.plan-what li + li {
  margin-top: var(--vo-space-1);
}

.plan .vo-btn {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   CHANGELOG
   -------------------------------------------------------------------------- */
.entry {
  padding: var(--vo-space-6) 0;
  border-top: var(--vo-border-width) solid var(--vo-border);
}

.entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vo-space-3);
  margin: 0 0 var(--vo-space-2);
}

.entry-version {
  margin: 0;
  font-size: var(--vo-text-h3);
  font-weight: var(--vo-weight-bold);
  letter-spacing: var(--vo-tracking-tight);
}

.entry-date {
  font-family: var(--vo-font-mono);
  font-size: var(--vo-text-sm);
  color: var(--vo-ink-muted);
}

/* --------------------------------------------------------------------------
   DOCS
   -------------------------------------------------------------------------- */
.doc-nav {
  margin: var(--vo-space-6) 0 0;
  padding: var(--vo-space-4);
  background: var(--vo-surface-muted);
  border-radius: var(--vo-radius);
}

.doc-nav h2 {
  margin: 0 0 var(--vo-space-2);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-bold);
  letter-spacing: var(--vo-tracking-wide);
  text-transform: uppercase;
  color: var(--vo-ink-muted);
}

.doc-nav ul {
  margin: 0;
  padding: 0 0 0 var(--vo-space-4);
}

.doc-nav li + li {
  margin-top: var(--vo-space-1);
}

.doc-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-3);
  margin: var(--vo-space-12) 0 0;
  padding-top: var(--vo-space-6);
  border-top: var(--vo-border-width) solid var(--vo-border);
}

/* --------------------------------------------------------------------------
   THE CONTACT FORM
   A stack, so the fields are spaced by the layout rather than by empty
   elements between them.
   -------------------------------------------------------------------------- */
.form-stack {
  display: grid;
  gap: var(--vo-space-6);
  margin: var(--vo-space-6) 0 0;
}

/* --------------------------------------------------------------------------
   THE DISCLOSURE
   Every page carries it. It is the last thing in the window body and it is
   the only sentence on the site that is not in character.
   -------------------------------------------------------------------------- */
.disclosure {
  margin: var(--vo-space-16) 0 0;
  padding-top: var(--vo-space-4);
  border-top: var(--vo-border-width) solid var(--vo-border);
  font-size: var(--vo-text-sm);
  color: var(--vo-ink-muted);
}