/* =====================================================================
   design-brighter-rev3-02-page-styles.css — Design Brighter (rev3)
   Target: child theme stylesheet. NOT tokens.css.
   Depends on: tokens.css -> bnl-components.css -> this file.

   ⚠️ BRACE DISCIPLINE (HANDOFF-STANDARD §4 / BRI-324).
   Nested @media around the hero and reveal. Run the depth walk, not a
   bare count, after any edit:

       assert css.count('{') == css.count('}')
       d = 0
       for ch in css:
           d += (ch == '{') - (ch == '}')
           assert d >= 0, "stray closing brace"
       assert d == 0, "unclosed block"
===================================================================== */

/* ---------------------------------------------------------------
   HERO — action beside the promise, not below it
--------------------------------------------------------------- */
.bnl-page--design-brighter .bnl-hero {
  padding: var(--space-xl) var(--space-md);
  background:
    radial-gradient(80% 60% at 20% 20%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%),
    radial-gradient(70% 55% at 85% 70%, color-mix(in srgb, var(--color-pink) 12%, transparent), transparent 60%);
}
.bnl-page--design-brighter .bnl-hero__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  display: grid;
  gap: var(--space-lg);
}
.bnl-page--design-brighter .bnl-hero .bnl-checks { margin-bottom: var(--space-md); }

/* ---------------------------------------------------------------
   UPLOAD BLOCK — the money element
--------------------------------------------------------------- */
.bnl-page--design-brighter .bnl-upload {
  border: 1px solid color-mix(in srgb, var(--color-pink) 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
  padding: var(--space-lg);
  scroll-margin-top: 90px;
}
.bnl-page--design-brighter .bnl-upload__title {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-sm);
}
.bnl-page--design-brighter .bnl-upload__sub {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}
.bnl-page--design-brighter .bnl-upload__fine {
  margin: var(--space-md) 0 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.bnl-page--design-brighter .bnl-slot--form {
  aspect-ratio: auto;
  min-height: 230px;
}

/* ---------------------------------------------------------------
   THE REVEAL — CSS-only two-state, radio driven.
   JS adds a drag handle on top; this works without it.
--------------------------------------------------------------- */
.bnl-page--design-brighter .bnl-reveal { position: relative; }
.bnl-page--design-brighter .bnl-reveal__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bnl-page--design-brighter .bnl-reveal__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--color-pink) 40%, var(--color-border));
  box-shadow: var(--glow-ambient-teal), var(--glow-ambient-pink);
}
.bnl-page--design-brighter .bnl-reveal__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.bnl-page--design-brighter .bnl-reveal__layer > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bnl-page--design-brighter .bnl-reveal__layer .bnl-slot {
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.bnl-page--design-brighter #rv-photo:checked ~ .bnl-reveal__stage .bnl-reveal__layer--photo,
.bnl-page--design-brighter #rv-render:checked ~ .bnl-reveal__stage .bnl-reveal__layer--render { opacity: 1; }

.bnl-page--design-brighter .bnl-reveal__switch {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-md);
}
.bnl-page--design-brighter .bnl-reveal__opt {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-heading-proposed);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.bnl-page--design-brighter .bnl-reveal__opt:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.bnl-page--design-brighter #rv-photo:checked ~ .bnl-reveal__switch [for="rv-photo"],
.bnl-page--design-brighter #rv-render:checked ~ .bnl-reveal__switch [for="rv-render"] {
  color: var(--color-white);
  border-color: var(--color-pink);
  box-shadow: var(--glow-ambient-pink);
}
.bnl-page--design-brighter .bnl-reveal__radio:focus-visible + .bnl-reveal__radio + .bnl-reveal__stage,
.bnl-page--design-brighter .bnl-reveal__radio:focus-visible ~ .bnl-reveal__switch label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.bnl-page--design-brighter .bnl-reveal__cap {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   PRICING BOUNDARY
--------------------------------------------------------------- */
.bnl-page--design-brighter .bnl-boundary {
  display: grid;
  gap: var(--space-ml);
  margin-top: var(--space-lg);
}
.bnl-page--design-brighter .bnl-boundary__col {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-ml);
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
}
.bnl-page--design-brighter .bnl-boundary__col--yes {
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
}
.bnl-page--design-brighter .bnl-boundary__h {
  font-family: var(--font-heading-proposed);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-sm);
}
.bnl-page--design-brighter .bnl-boundary__col--yes .bnl-boundary__h { color: var(--color-primary); }
.bnl-page--design-brighter .bnl-boundary ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-text-muted);
}
.bnl-page--design-brighter .bnl-boundary li + li { margin-top: var(--space-xs); }

/* ---------------------------------------------------------------
   SYSTEM LIST — names, not links. Conversion endpoint: no exits.
--------------------------------------------------------------- */
.bnl-page--design-brighter .bnl-syslist {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.bnl-page--design-brighter .bnl-syslist li {
  font-family: var(--font-heading-proposed);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-small);
  letter-spacing: .02em;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bnl-page--design-brighter .bnl-syslist__soon {
  border-style: dashed;
  color: var(--color-text-muted);
}
.bnl-page--design-brighter .bnl-syslist__tag {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

/* ---------------------------------------------------------------
   BREAKPOINTS
--------------------------------------------------------------- */
@media (min-width: 760px) {
  .bnl-page--design-brighter .bnl-boundary { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .bnl-page--design-brighter .bnl-hero { padding: var(--space-2xl) var(--space-lg); }
  .bnl-page--design-brighter .bnl-hero__inner {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: var(--space-xl);
  }
  .bnl-page--design-brighter .bnl-reveal__stage { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------
   MOTION — gated ON, matching rev34 policy
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bnl-page--design-brighter .bnl-reveal__layer,
  .bnl-page--design-brighter .bnl-reveal__opt { transition: none; }
}