/* ===========================================================================
   Per-brand layouts.

   Four storefronts share one codebase, so without deliberate structural
   difference they read as four skins of one company - which defeats the point
   of running separate brands. Each layout therefore differs in hero
   composition, section rhythm and how pricing is presented, not only in
   colour.

   Scoped by a data-layout attribute on <body>, so rules here can never bleed
   between brands.

     beacon     centred, type-led, full-width pricing band
     editorial  left-aligned, asymmetric, pricing as a list
     drift      animated gradient, device mockup, stacked cards
     tide       split hero, illustration right, comparison table
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Shared hero scaffolding
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-note { margin-top: var(--space-5); }

/* A soft radial wash. Pure CSS rather than an image, so it costs nothing and
   scales to any viewport. */
.hero::before {
  content: "";
  position: absolute; inset: -40% -20% auto -20%; height: 140%;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--primary) 22%, transparent) 0%,
    transparent 62%
  );
  z-index: -1;
  pointer-events: none;
}

.hero-visual {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
}

/* A <video> in this slot replaces an <img>, and an img carries its
   intrinsic size while a video does not lay out the same way. Without these
   the hero is 300x150 - the default video box - until the metadata lands,
   and the page jumps when it does. */
video.hero-visual {
  display: block;
  width: 100%;
  height: auto;
  /* No aspect-ratio here on purpose. It used to be a hard-coded 4/3, which
     was right for the one video that existed and wrong the moment a 16:9
     one arrived - `object-fit: cover` then cropped a third of the frame
     away, subject included. Every call site passes width and height, so the
     element already has an intrinsic ratio and the space is reserved
     correctly before a byte of video has arrived. */
}

/* ---------------------------------------------------------------------------
   Scroll-driven video.

   The stage is deliberately taller than the frame: the frame sticks while
   the stage scrolls past behind it, and that travel is what the animation
   is mapped onto. Height is in viewport units because the mapping is
   against the viewport, so a short window gets a short scroll rather than
   the same scroll at a different speed.
   --------------------------------------------------------------------------- */
.scroll-stage {
  position: relative;
  height: 220vh;
}

.scroll-stage__frame {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  gap: var(--space-8);
  padding-block: var(--space-12);
}

.scroll-stage video {
  display: block;
  width: min(100%, 620px);
  height: auto;
  /* Ratio comes from the element's own width/height attributes, as with
     the hero. See the note on video.hero-visual. */
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

/* Sticky positioning plus a tall parent is the whole mechanism, and it is
   the one thing here that cannot degrade gracefully: without sticky the
   frame scrolls away while the stage keeps going and leaves a screen and a
   half of empty page. Collapse the stage to its content instead. */
@supports not (position: sticky) {
  .scroll-stage { height: auto; }
  .scroll-stage__frame { min-height: 0; }
}

/* Someone who asked for no motion gets no 220vh of scroll to travel
   through either - the video is wound to its final frame and shown once,
   at normal size. */
@media (prefers-reduced-motion: reduce) {
  .scroll-stage { height: auto; }
  .scroll-stage__frame { position: static; min-height: 0; }
}

/* ===========================================================================
   BEACON  -  Peremoha.  Centred and type-led; the headline is the hero.
   =========================================================================== */
[data-layout="beacon"] .hero { padding-block: var(--space-24) var(--space-20); text-align: center; }
[data-layout="beacon"] .hero h1 { font-size: var(--text-5xl); max-width: 16ch; margin-inline: auto; }
[data-layout="beacon"] .hero .lede { margin-inline: auto; text-align: center; }
[data-layout="beacon"] .hero-actions { justify-content: center; }
[data-layout="beacon"] .hero-visual { margin: var(--space-16) auto 0; max-width: 860px; }

/* A single accent rule under the headline - the "beacon". */
[data-layout="beacon"] .hero h1::after {
  content: ""; display: block;
  width: 72px; height: 4px; margin: var(--space-6) auto 0;
  background: var(--accent); border-radius: var(--radius-pill);
}

[data-layout="beacon"] .section-head { text-align: center; }
[data-layout="beacon"] .section-head p { margin-inline: auto; }

/* Plans span the full viewport width as a distinct band. */
[data-layout="beacon"] .pricing-band {
  background: var(--bg-deep);
  border-block: 1px solid var(--border);
}
[data-layout="beacon"] .checkout-panel {
  grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto;
  text-align: center; background: var(--bg-elevated);
}
[data-layout="beacon"] .plan-facts li { justify-content: center; text-align: left; }

/* ===========================================================================
   EDITORIAL  -  On The Rocks.  Asymmetric, left-aligned, magazine-like.
   =========================================================================== */
[data-layout="editorial"] .hero { padding-block: var(--space-20); }
[data-layout="editorial"] .hero-inner {
  display: grid; gap: var(--space-12);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
[data-layout="editorial"] .hero h1 { font-size: var(--text-4xl); max-width: 14ch; }
/* A film instead of the portrait photograph: one column, full width, and
   capped so it does not outgrow the measure of the text above it. */
[data-layout="editorial"] .hero-inner--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}
[data-layout="editorial"] .hero-inner--stacked h1 { max-width: 20ch; }
[data-layout="editorial"] .hero-inner--stacked .hero-visual { max-width: 980px; }
[data-layout="editorial"] .hero::before { inset: -30% -40% auto 30%; }

/* Numbered rules between sections, like a printed contents page. */
[data-layout="editorial"] .section-head {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  display: grid; gap: var(--space-4);
  grid-template-columns: 4rem 1fr;
  align-items: start;
}
[data-layout="editorial"] .section-head .eyebrow { margin: 0; color: var(--text-muted); }
[data-layout="editorial"] .section-head > div { grid-column: 2; }

/* Plans as ruled copy rather than a boxed panel - the page has no other
   cards at this width, and a box here would break the column. */
[data-layout="editorial"] .checkout-panel {
  background: transparent; border: 0; border-radius: 0;
  padding-inline: 0; padding-block: var(--space-6) 0;
  align-items: start; gap: var(--space-10);
}
[data-layout="editorial"] .plan-facts li { border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
[data-layout="editorial"] .plan-facts li:last-child { border-bottom: 0; }
[data-layout="editorial"] .checkout-action { text-align: left; }

@media (max-width: 860px) {
  [data-layout="editorial"] .hero-inner { grid-template-columns: 1fr; }
  [data-layout="editorial"] .section-head { grid-template-columns: 1fr; }
  [data-layout="editorial"] .section-head > div { grid-column: 1; }
  [data-layout="editorial"] .checkout-panel { gap: var(--space-6); }
}

/* ===========================================================================
   DRIFT  -  Meduza.  Slow moving gradient, device mockup, stacked cards.
   =========================================================================== */
[data-layout="drift"] .hero { padding-block: var(--space-24) 0; text-align: center; }
[data-layout="drift"] .hero h1 { font-size: var(--text-5xl); max-width: 15ch; margin-inline: auto; }
[data-layout="drift"] .hero .lede { margin-inline: auto; }
[data-layout="drift"] .hero-actions { justify-content: center; }

/* The drift. Honours prefers-reduced-motion via the global rule, and the
   gradient is still correct when the animation is disabled. */
[data-layout="drift"] .hero::before {
  inset: -60% -30% auto -30%; height: 180%;
  background:
    radial-gradient(ellipse at 30% 10%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 26%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 52%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Mockup bleeds off the bottom of the hero into the next section. */
[data-layout="drift"] .hero-visual {
  margin: var(--space-16) auto -8%; max-width: 760px;
  border-bottom: 0;
  border-end-start-radius: 0; border-end-end-radius: 0;
}

[data-layout="drift"] .section-head { text-align: center; }
[data-layout="drift"] .section-head p { margin-inline: auto; }

/* Feature cards offset vertically so the row is not a flat line. */
[data-layout="drift"] .features .card:nth-child(even) { transform: translateY(var(--space-8)); }
@media (max-width: 900px) {
  [data-layout="drift"] .features .card:nth-child(even) { transform: none; }
}

[data-layout="drift"] .checkout-panel {
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated));
}

/* ===========================================================================
   TIDE  -  More.  Split hero with an illustration, plans as a table of what
   is included.
   =========================================================================== */
[data-layout="tide"] .hero { padding-block: var(--space-20); }
[data-layout="tide"] .hero-inner {
  display: grid; gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
[data-layout="tide"] .hero h1 { font-size: var(--text-4xl); max-width: 13ch; }
[data-layout="tide"] .hero::before { inset: -40% -30% auto 20%; }

/* A horizon line under the hero. */
[data-layout="tide"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
}

[data-layout="tide"] .compare {
  width: 100%; border-collapse: collapse; margin-top: var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
[data-layout="tide"] .compare th,
[data-layout="tide"] .compare td {
  padding: var(--space-4) var(--space-5); text-align: left;
  border-bottom: 1px solid var(--border);
}
[data-layout="tide"] .compare thead th {
  background: var(--bg-deep); font-family: var(--font-heading);
  font-size: var(--text-base);
}
[data-layout="tide"] .compare tbody th { font-weight: 600; color: var(--text-muted); }
[data-layout="tide"] .compare td { text-align: center; }
[data-layout="tide"] .compare tr:last-child th,
[data-layout="tide"] .compare tr:last-child td { border-bottom: 0; }
[data-layout="tide"] .compare .tick { color: var(--success); font-weight: 700; }
/* Two columns, so the answer column carries the weight rather than being one
   of three equal-width cells. */
[data-layout="tide"] .compare-facts td { width: 34%; font-weight: 600; }
[data-layout="tide"] .checkout-action { margin-top: var(--space-8); }

/* A wide table is the wrong shape on a phone; let it scroll rather than
   crushing the labels. */
@media (max-width: 760px) {
  [data-layout="tide"] .hero-inner { grid-template-columns: 1fr; }
  [data-layout="tide"] .compare-wrap { overflow-x: auto; }
  [data-layout="tide"] .compare { min-width: 420px; }
}