@layer page {
/* ============================================================
   LANDING
   Styles for the rich product landing page (splits variant).
   Full-viewport hero, alternating split sections with
   visual compositions, numbers band, and CTA.
   ============================================================ */

/* --- Hero (full viewport) --- */
.landing-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 65% at 50% 40%, oklch(0.14 0.06 260 / 0.6) 0%, transparent 60%),
      radial-gradient(ellipse 50% 45% at 20% 65%, oklch(0.12 0.08 350 / 0.3) 0%, transparent 50%),
      radial-gradient(ellipse 50% 45% at 80% 55%, oklch(0.12 0.07 145 / 0.3) 0%, transparent 50%);
    pointer-events: none;
  }
}

/* Compact variant: keeps the big title but drops the full-viewport
   height so the content below sits within view. For hub pages that are
   not the homepage. */
.landing-hero.compact {
  min-height: 0;
  justify-content: flex-start;
  padding-block: calc(var(--nav-h) + var(--space-16)) var(--space-12);
}

.landing-hero-content {
  position: relative;
}
.landing-hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-2);
  margin-bottom: var(--space-8);

  /* Breadcrumb-style links: each segment ahead of the current page
     is a real <a>. Same visual rhythm as the original kicker, plus
     a hover affordance. */
  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast);

    &:hover { color: var(--text-0); }
  }
}
.landing-hero-title {
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 100;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-0);
  margin-bottom: clamp(1.5rem, 3vh, 3rem);

  em {
    font-style: normal;
    font-weight: 600;
    background: linear-gradient(135deg,
      oklch(0.78 0.28 350),
      oklch(0.82 0.26 55),
      oklch(0.80 0.26 145),
      oklch(0.75 0.28 260));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.landing-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 300;
  color: var(--text-2);
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 4vh, 4rem);
  text-wrap: balance;
}

/* Spectrum bar */
.landing-spectrum {
  display: flex;
  height: 3px;
  gap: 1px;
  margin-top: clamp(4rem, 8vh, 8rem);
  width: min(70%, 32rem);
  margin-inline: auto;

  span {
    flex: 1;
    border-radius: 2px;
  }
}

/* --- Split sections --- */
.landing-split {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 12rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;

  &.reverse {
    .landing-split-text { order: 2; }
    .landing-split-visual { order: 1; }
  }
}

.landing-split-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}
.landing-split-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 200;
  color: var(--text-0);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);

  strong { font-weight: 600; }
}
.landing-split-desc {
  color: var(--text-1);
  max-width: 30rem;
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

/* Visual side glow */
.landing-split-visual {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: -3rem;
    background: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      oklch(from var(--accent) 0.12 0.06 h / 0.55) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  > * { position: relative; z-index: 1; }
}

/* --- Checklist --- */
.landing-checklist {
  list-style: none;
  margin-bottom: var(--space-8);

  li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-1);
  }
}
.landing-check {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: oklch(from var(--accent) l c h / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-text);
  font-size: 0.65rem;
}

/* --- Code float --- */
.landing-code {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 300;
  line-height: 2.2;
  color: var(--text-1);
  padding: var(--space-8) var(--space-6);
  background: oklch(from var(--accent) 0.07 0.006 h);
  border-radius: var(--radius-lg);
}

/* --- Color wheel (animated ring) --- */
.landing-wheel {
  width: clamp(280px, 100%, 400px);
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto;
}
.landing-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    oklch(0.75 0.28 0), oklch(0.80 0.26 30), oklch(0.85 0.24 60),
    oklch(0.88 0.22 90), oklch(0.85 0.26 120), oklch(0.80 0.28 150),
    oklch(0.75 0.26 180), oklch(0.70 0.24 210), oklch(0.65 0.26 240),
    oklch(0.62 0.28 270), oklch(0.65 0.26 300), oklch(0.72 0.28 330),
    oklch(0.75 0.28 360));
  mask-image: radial-gradient(circle, transparent 58%, black 60%, black 84%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, black 60%, black 84%, transparent 86%);
  animation: landing-wheel-spin 30s linear infinite;
}
@keyframes landing-wheel-spin { to { transform: rotate(360deg); } }
.landing-wheel-center {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  letter-spacing: 0.05em;
}
.landing-wheel-dots {
  position: absolute;
  inset: 0;
  animation: landing-dots-spin 20s linear infinite reverse;
}
@keyframes landing-dots-spin { to { transform: rotate(360deg); } }
.landing-wheel-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  box-shadow: 0 0 12px currentColor;
}

/* --- Palette strips --- */
.landing-palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.landing-palette-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.landing-palette-strip {
  display: flex;
  gap: 2px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;

  span {
    flex: 1;
    transition: flex var(--duration-normal) var(--ease-out-expo);
  }
  &:hover span:nth-child(odd) { flex: 1.8; }
}

/* --- Contrast bars --- */
.landing-contrast {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.landing-contrast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);

  .sample {
    font-size: var(--text-xl);
    font-weight: 400;
  }
  .score {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: var(--space-2);

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }
}

/* --- Color mosaic --- */
.landing-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
}
.landing-mosaic-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-out-expo);

  &:hover { transform: scale(1.2); z-index: 1; }
  &.wide { grid-column: span 2; aspect-ratio: 2/1; }
  &.tall { grid-row: span 2; aspect-ratio: auto; }
}

/* --- Feature icons --- */
.landing-feat-icons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.landing-feat-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 72px;

  span {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-2);
    text-align: center;
  }
}

/* --- Numbers band --- */
.landing-numbers {
  padding: clamp(3rem, 6vh, 5rem) var(--gutter);
  display: flex;
  justify-content: center;
  gap: clamp(3rem, 8vw, 10rem);
  flex-wrap: wrap;
}
.landing-num { text-align: center; }
.landing-num-value {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.landing-num-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-top: var(--space-2);
}

/* --- CTA (full viewport) --- */
.landing-cta {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 14rem) var(--gutter);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, oklch(0.10 0.05 145 / 0.4) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 30% 60%, oklch(0.08 0.06 260 / 0.25) 0%, transparent 50%);
    pointer-events: none;
  }

  h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 100;
    color: var(--text-0);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);

    strong { font-weight: 600; }
  }
  p {
    font-size: var(--text-lg);
    color: var(--text-2);
    margin-bottom: clamp(2rem, 4vh, 4rem);
    text-wrap: balance;
  }
}
.landing-cta-content { position: relative; }

/* --- Responsive --- */
@media (width <= 900px) {
  .landing-split { grid-template-columns: 1fr; gap: var(--space-12); }
  .landing-split.reverse .landing-split-text { order: 0; }
  .landing-split.reverse .landing-split-visual { order: 0; }
}
@media (width <= 600px) {
  .landing-numbers { gap: var(--space-8); }
  .landing-feat-icons { gap: var(--space-3); }
}
}
@layer page {
/* ============================================================
   ABOUT PAGE
   Landing-style composition: full-viewport hero (.landing-hero
   shared with /gradients etc.), split "why" section with a
   conic hue dial, borderless principles, compact CTA.

   All borders, accent surfaces, and card chrome are avoided by
   design -- the page leans on whitespace, typography weight
   contrast, and one single coloured element (the dial).
   ============================================================ */

.sec-hero.large > .about-hero-title {
  max-width: none;
  white-space: nowrap;
}

@media (width <= 600px) {
  .sec-hero.large > .about-hero-title {
    font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl));
  }
}

.part-about main > .sec-hero.large:has(+ :is(.landing-split, .sec-features, .about-principles)) {
  min-height: 0;
  padding-block-end: 0;
}

.part-about main > .sec-hero.large + :is(.landing-split, .sec-features, .about-principles) {
  padding-block-start: var(--space-12);
}

.part-about .sec-split > div:first-child {
  display: grid;
  gap: var(--space-5);
}


/* ── Split visual: OKLCH hue dial ──────────────────────────── */

.part-about .landing-split {
  overflow: clip;
  padding-block: clamp(7rem, 14vh, 10rem) var(--space-16);
}

.part-about .landing-split-visual::before { display: none; }

.about-hue-dial {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
}

.about-hue-dial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    oklch(0.72 0.26   0),
    oklch(0.72 0.26  45),
    oklch(0.82 0.22  85),
    oklch(0.78 0.22 130),
    oklch(0.76 0.20 175),
    oklch(0.72 0.22 220),
    oklch(0.70 0.26 260),
    oklch(0.70 0.28 300),
    oklch(0.72 0.26 340),
    oklch(0.72 0.26 360));
  animation: about-dial-spin 60s linear infinite;
}

.about-hue-dial::after {
  content: '';
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: var(--surface-0);
}

.about-hue-dial-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-2);
  z-index: 1;
}

@keyframes about-dial-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hue-dial::before { animation: none; }
}


/* ── Principles: borderless numbered list ──────────────────── */

.about-principles {
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--space-16) var(--gutter) clamp(4rem, 10vh, 10rem);
}

.about-principles-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto clamp(3rem, 6vh, 5rem);

  .eyebrow { margin-bottom: var(--space-4); }
  h2 { text-wrap: balance; }
}

.about-principle-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: 0;
  margin: 0;

  h3 {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-0);
    margin: 0;
  }

  p {
    font-size: var(--text-base);
    font-weight: 300;
    color: var(--text-1);
    line-height: 1.7;
    margin: 0;
    max-width: 32ch;
  }
}


/* ── Responsive ────────────────────────────────────────────── */

@media (width <= 800px) {
  .about-principle-list { grid-template-columns: 1fr; gap: var(--space-10); }
}
}
@layer page {
/* ============================================================
   SPONSORS
   Three-tier card row + sponsor logo roster. Per-tier hue
   (--tier-hue) tints only the tier name and the trailing CTA.
   ============================================================ */

.sponsors-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.sponsor-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast);

  &:hover { background: var(--surface-2); }
}

.sponsor-tier__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sponsor-tier__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.80 0.18 var(--tier-hue, var(--hue-brand)));
}
.sponsor-tier__price {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 200;
  color: var(--text-0);
  margin: 0;
  line-height: 1;
}
.sponsor-tier__cadence {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-weight: 400;
  margin-left: var(--space-1);
}

.sponsor-tier__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  li {
    font-size: var(--text-sm);
    color: var(--text-1);
    padding-left: var(--space-5);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.5em;
      width: 12px;
      height: 1px;
      background: oklch(0.80 0.18 var(--tier-hue, var(--hue-brand)));
    }
  }
}

.sponsor-tier__cta {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: oklch(0.80 0.18 var(--tier-hue, var(--hue-brand)));
  text-decoration: none;

  &:hover { color: oklch(0.88 0.20 var(--tier-hue, var(--hue-brand))); }
}


/* Logo roster: placeholder slots until real logos are wired. */
.sponsors-roster {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.sponsor-slot {
  width: 96px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
}