/* =========================================================================
   BRITE LOUNGE BASE STYLES
   Version 1.0, 12 August 2026.

   Built against src/styles/tokens.css. Read the colour rules there before
   changing anything here. The short version:

     --green       never carries white text
     --green-light and --neutral never carry text, they are fills
     Jost does display, nav, buttons, labels. Inter does body and numbers.
     One easing, no scroll-triggered fades, no gradients, no glass.
   ========================================================================= */

@import url('tokens.css');

/* -------------------------------------------------------------------------
   RESET AND FUNDAMENTALS
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
}

/* height:auto stops the width/height attributes acting as a fixed height once
   CSS sets the width. Without it every tile photograph renders 1400px tall. */
img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-color: var(--green); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--green-deep); }

:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green-light); color: var(--ink); }

/* Every number on this site is a price, a quantity or a spec.
   Tabular figures, always, so columns line up in the portal. */
body { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.section { padding-block: var(--s-7); }
.section-tight { padding-block: var(--s-6); }

.measure { max-width: var(--measure); }

/* -------------------------------------------------------------------------
   TYPE
   Display is Jost, light to regular, sentence case. Never bold, never
   uppercase (the eyebrow is the one uppercase voice). If a heading looks
   bold, it is wrong.
   ------------------------------------------------------------------------- */
h1, h2, h3, .t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

.t-hero { font-size: var(--t-hero); letter-spacing: var(--tracking-hero); }
h1, .t-h1 { font-size: var(--t-h1); letter-spacing: var(--tracking-hero); }
h2, .t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); font-weight: var(--w-regular); }

p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.t-small { font-size: var(--t-small); }

/* The eyebrow. Small, uppercase, wide tracking, green. The 2022 signature.
   Set in --green-deep, not --green: --green reads 2.55:1 on white, which
   the owner could not see. --green-deep reads 4.71:1 and passes AA. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 var(--s-2);
}

/* -------------------------------------------------------------------------
   THE SPARKLE
   The one shape that carries the brand. Inline SVG, path from tokens.css.
   Three structural sizes: a bullet, an accent, background geometry.
   ------------------------------------------------------------------------- */
.sparkle { fill: var(--green); flex: none; }
.sparkle-sm { width: 0.75rem;  height: 0.75rem; }
.sparkle-md { width: 2.5rem;   height: 2.5rem; }
.sparkle-bg { width: clamp(14rem, 28vw, 22rem); height: auto; opacity: 0.35; }
.sparkle-white { fill: var(--white); }

/* Sparkle bullet list. The marker is the brand mark, not a disc. */
.sparkle-list {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0;
  max-width: var(--measure);
}
.sparkle-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--s-2);
}
.sparkle-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------------------------
   BUTTONS
   Full pills, Jost, small, uppercase, letter-spaced. The 2022 mockup put
   white text on --green; that fails AA and is not copied. Primary is
   --green-deep, the only green that may carry white text.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 0.9rem 1.9rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn-primary { background: var(--green-deep); color: var(--white); }
.btn-primary:hover { background: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--green); }
.btn-ghost:hover { border-color: var(--green-deep); color: var(--green-deep); }

/* For the dark nav and footer: a white pill with ink text. The ink border
   keeps it legible if it ever lands on a white surface. */
.btn-reverse { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-reverse:hover { background: var(--green-light); color: var(--ink); }

/* -------------------------------------------------------------------------
   NAV
   Centred on the logo: links left, lockup dead centre, links right, one
   pill far right. Chrome is the 2022 warm grey; white on it reads 5.42:1.
   ------------------------------------------------------------------------- */
.site-nav {
  background: var(--surface-dark);
  color: var(--white);
}
.site-nav .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  min-height: 5.5rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links-left  { justify-content: flex-end; }
.nav-links-right { justify-content: flex-start; }
.nav-links a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  position: relative;
  padding-left: 1.1rem;
}
/* The hover indicator is the sparkle, not an underline. */
.nav-links a:not(.btn)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 0.55rem;
  height: 0.55rem;
  background-color: var(--green-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-links a:not(.btn):hover::before,
.nav-links a:not(.btn)[aria-current="page"]::before { opacity: 1; }

/* The nav pill keeps its button ink even though it sits in .nav-links. */
.nav-links a.btn { text-decoration: none; }

.nav-logo img, .nav-logo svg { height: 4.25rem; width: auto; }
.nav-cta { margin-left: var(--s-2); }

/* Small screens: logo on top, links wrap beneath. No hamburger JS needed
   for six links. */
@media (max-width: 860px) {
  .site-nav .nav-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-block: var(--s-2);
    row-gap: var(--s-2);
  }
  .nav-logo { order: -1; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
  .nav-cta { justify-self: center; }
}

/* -------------------------------------------------------------------------
   HERO
   Split and asymmetric: the photograph sits on a green-light panel, the
   words sit on white. Text never sits on --green-light; that is why the
   2022 arrangement (copy inside the green panel) is not reproduced.
   ------------------------------------------------------------------------- */
.hero { padding-block: var(--s-7); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-6);
  align-items: center;
}
.hero-media {
  position: relative;
  background: var(--green-light);
  border-radius: var(--r-card);
  padding: var(--s-3);
  overflow: hidden;
}
/* Product renders arrive on white. The white becomes a deliberate rounded
   card on the green panel rather than an accidental box. Big, on purpose. */
.hero-media img {
  position: relative;
  margin-inline: auto;
  max-height: 38rem;
  width: auto;
  max-width: 100%;
  background: var(--white);
  border-radius: calc(var(--r-card) - 10px);
  padding: var(--s-2);
}

/* Photo variant: a real photograph fills the whole rounded panel, and a
   small product card overlaps its corner for depth. */
.hero-media-photo { padding: 0; min-height: 26rem; }
.hero-media-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: none;
}
.hero-overlap {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  width: clamp(7rem, 11vw, 10rem);
  border: 4px solid var(--white);
  border-radius: calc(var(--r-card) - 12px);
  overflow: hidden;
}
.hero-overlap img { display: block; width: 100%; }
.hero-media .sparkle-bg {
  position: absolute;
  right: -12%;
  bottom: -18%;
}
.hero-copy .btn { margin-top: var(--s-2); }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   CONTENT CARD WITH THE GREEN CORNER SWOOSH
   White card, large radius. A curved green sweep crosses the top corner
   with a white sparkle in it; price and duration reverse out of the
   DEEP green layer, never the mid green.
   ------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  padding: var(--s-4);
}

.card-swoosh {
  position: relative;
  overflow: hidden;
  padding-top: var(--s-6);
}
.card-swoosh .swoosh {
  position: absolute;
  top: 0;
  right: 0;
  width: min(70%, 17rem);
  height: auto;
  pointer-events: none;
}
.card-swoosh .swoosh-meta {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  text-align: right;
  color: var(--white);
  line-height: 1.3;
}
.card-swoosh .swoosh-price {
  display: block;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: var(--w-semi);
}
.card-swoosh .swoosh-duration {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card h3 { margin-bottom: var(--s-1); }
.card .card-subtitle {
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: var(--s-2);
}

/* -------------------------------------------------------------------------
   BANDS AND THE CURVED SECTION DIVIDER
   A green band that ends in a shallow white arc. The arc is one SVG,
   full-bleed, no gradient, no clip-path hacks.
   ------------------------------------------------------------------------- */
.band { background: var(--green-light); position: relative; overflow: hidden; }
.band .band-inner { padding-block: var(--s-7); position: relative; }
.band .sparkle-bg { position: absolute; top: -20%; right: 4%; }
.band-curve {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 6vw, 5rem);
}
.band-curve path { fill: var(--white); }

/* -------------------------------------------------------------------------
   SPEC LIST
   Inter, tabular figures, hairline rules in --green. The quiet furniture
   of a machine page. Formlabs grammar, Brite Lounge dress.
   ------------------------------------------------------------------------- */
.spec-list {
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.spec-list .spec-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 2fr;
  gap: var(--s-3);
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--neutral);
  margin: 0;
}
.spec-list .spec-row:first-child { border-top: 1px solid var(--neutral); }
.spec-list dt {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  align-self: baseline;
}
.spec-list dd { margin: 0; font-size: var(--t-small); align-self: baseline; }

/* -------------------------------------------------------------------------
   FOOTER
   Same chrome as the nav. One contact channel. No phone number, ever.
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--white);
  padding-block: var(--s-6);
  margin-top: var(--s-8);
}
.site-footer a { color: var(--white); text-decoration-color: var(--green-light); }
/* Centred footer: lockup, one contact line, one row of links. */
.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.site-footer .footer-logo img { height: 5.5rem; width: auto; margin-inline: auto; }
.site-footer p { font-size: var(--t-small); margin-bottom: 0; max-width: none; }
.site-footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}
.site-footer .footer-links a {
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-footer .footer-links a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   PAGE FURNITURE
   ------------------------------------------------------------------------- */
.grid-2, .grid-3 {
  display: grid;
  gap: var(--s-4);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* A price is Inter, always. The tier note beneath it is Jost. */
.price {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: var(--w-semi);
  color: var(--ink);
}
.price-note {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-top: 0.2rem;
}

/* Product tiles. Five of them on the homepage, each drilling into a
   product page. The whole tile is the link; the photo does the talking. */
.grid-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1080px) { .grid-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-tiles { grid-template-columns: 1fr; } }

.tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover { border-color: var(--green); transform: translateY(-3px); }
/* contain, not cover: the full framing shows, lockup and all. Each tile
   carries its photo's own backdrop colour inline so nothing letterboxes. */
.tile img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--white); }
.tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--s-2) var(--s-3) var(--s-3);
  flex: 1;
}
.tile-body h3 { margin: 0; }
.tile-body .tile-line { font-size: var(--t-small); margin: 0; }
.tile-body .price { font-size: 1.2rem; margin-top: auto; padding-top: 0.5rem; }

.badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green-deep);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
}

/* Product page gallery: hero photo plus optional second shot. Tall
   shots stay contained instead of towering over the copy. */
.gallery { display: grid; gap: var(--s-3); }
.gallery img {
  border-radius: var(--r-card);
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  background: var(--white);
}
.gallery-2 { grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 860px) { .gallery-2 { grid-template-columns: 1fr; } }

/* The results strip. One designed collage, centred. */
.results { text-align: center; }
.results h2, .results .eyebrow { text-align: center; }
.results-collage {
  border-radius: var(--r-card);
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}

/* The certification tile carries a brand graphic, not a photo. */
.tile-cert-media {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--s-3);
  text-align: center;
  background: var(--white);
  border-bottom: 1px solid var(--neutral);
}
.tile-cert-media .cert-brand {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.tile-cert-media .cert-title {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  max-width: 12ch;
}
.tile-cert-media .cert-mark {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}
.tile-cert-media .cert-sub {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* Back link at the top of every product page. */
.back-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-deep);
  margin-top: var(--s-3);
}
.back-link:hover { color: var(--ink); }

/* Stat highlights: the selling numbers, big and plain. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--s-3);
  margin-block: var(--s-3);
  max-width: 44rem;
}
.stat .stat-n {
  display: block;
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: var(--w-semi);
  color: var(--ink);
}
.stat .stat-l {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-top: 0.2rem;
}

/* Cross-links to the rest of the range at the bottom of product pages. */
.product-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* "Goes with" mini product cards: a photo, a name, a one-liner. */
.mini-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3);
  max-width: 52rem;
}
.mini-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.mini-tile:hover { border-color: var(--green); }
.mini-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mini-tile .mini-body { padding: 0 var(--s-2) var(--s-2); }
.mini-tile h4 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
}
.mini-tile p { font-size: 0.8rem; margin: 0; opacity: 0.85; }

/* The standards strip: the factory credentials that blanket every product.
   Same wording everywhere, quiet and identical, like a hallmark. */
.standards {
  background: var(--white);
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.standards h2, .standards h3 { margin-bottom: var(--s-2); }
.standards .sparkle-list { margin-bottom: 0; }

/* Application success panel. */
.success-panel {
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: var(--r-card);
  padding: var(--s-4);
  max-width: 30rem;
}
.success-panel h3 { margin-bottom: var(--s-1); }
.success-panel .sparkle { margin-bottom: var(--s-2); }

/* Centred call-to-action block used above the footer on every page. */
.cta-block { text-align: center; padding-block: var(--s-7); }
.cta-block h2, .cta-block p { margin-inline: auto; }
.cta-block .btn { margin-top: var(--s-3); }

/* -------------------------------------------------------------------------
   FORMS (the account page, the waitlist)
   ------------------------------------------------------------------------- */
.field { margin-bottom: var(--s-3); max-width: 26rem; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--neutral);
  border-radius: var(--r-input);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green-deep);
}
.field .hint { font-size: var(--t-small); color: var(--ink); opacity: 0.75; margin-top: 0.35rem; }

/* =========================================================================
   HOMEPAGE COMPOSITION
   The homepage runs a fixed narrative order: hero statement, proof, who it
   is for, the range, results, how it works, the training, standards, close.
   These rules are scoped so the product pages keep the layout they have.
   ========================================================================= */

/* Section heads. One rhythm everywhere: eyebrow, heading, air. */
.section-head { margin-bottom: var(--s-5); max-width: 44ch; }
.section-head h2 { text-wrap: balance; }
.section-head h2 { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   HERO, HOMEPAGE VARIANT
   Words lead, photograph follows. No price and no product card over the
   photograph: the hero says who Brite Lounge is and asks for one thing.
   ------------------------------------------------------------------------- */
.hero-lead { padding-block: var(--s-7) var(--s-6); }
.hero-lead .hero-inner {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-6);
  align-items: center;
}
.hero-lead .hero-copy .eyebrow { margin-bottom: var(--s-3); }
.hero-lead .hero-copy h1 { margin-bottom: var(--s-3); text-wrap: balance; }
.hero-lead .hero-lede {
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: var(--s-4);
}
.hero-lead .hero-copy .btn { margin-top: 0; }

.hero-lead .hero-media {
  padding: 0;
  aspect-ratio: 4 / 5;
  max-height: 34rem;
  margin-left: auto;
  width: 100%;
}
.hero-lead .hero-media img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  max-height: none;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
}

@media (max-width: 860px) {
  .hero-lead { padding-block: var(--s-5) var(--s-4); }
  .hero-lead .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .hero-lead .hero-media { aspect-ratio: 4 / 3; max-height: 22rem; }
}

/* -------------------------------------------------------------------------
   PROOF STRIP
   The factory paper trail, sitting directly under the hero. No competitor
   found in the research publishes any of it, so it goes above the fold.
   ------------------------------------------------------------------------- */
.proof { border-block: 1px solid var(--neutral); padding-block: var(--s-4); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.proof-grid li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 30ch;
}
.proof-grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C53 30 70 47 100 50 C70 53 53 70 50 100 C47 70 30 53 0 50 C30 47 47 30 50 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 980px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   SPLIT SECTIONS
   Copy one side, one photograph the other. The photograph carries a large
   radius and never a caption; the copy carries the eyebrow and heading.
   ------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-6);
  align-items: center;
}
.split-media img {
  width: 100%;
  border-radius: var(--r-card);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.split-reverse .split-copy { order: 2; }
.split-reverse .split-media { order: 1; }
.split-reverse .split-media img { aspect-ratio: 3 / 2; }
.split-copy .btn { margin-top: var(--s-2); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .split-reverse .split-copy { order: 1; }
  .split-reverse .split-media { order: 2; }
  .split-media img { aspect-ratio: 4 / 3; }
}

/* Who it is for: four venue types, two up. */
.audience-list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
}
.audience-list h3 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--neutral);
}
.audience-list p { margin: 0; }
@media (max-width: 560px) { .audience-list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   HOW IT WORKS
   Three numbered steps inside the one colour band on the page.
   ------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.steps li { position: relative; }
.steps .step-n {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  color: var(--green-deep);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--green);
}
.steps h3 { margin-bottom: var(--s-1); }
.steps p { margin: 0; }
/* --green-light is a fill and never carries text, so the steps ride on a
   white panel inside the band rather than straight on the green. */
.band-panel {
  background: var(--white);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.band .section-head { max-width: 30ch; }
@media (max-width: 560px) { .band-panel { padding: var(--s-4); } }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--s-4); } }

/* -------------------------------------------------------------------------
   RESULTS
   ------------------------------------------------------------------------- */
.results { text-align: left; }
.results h2, .results .eyebrow { text-align: left; }
.results .section-head { margin-inline: 0; }

/* Three clients, before over after, cropped to one frame so the eye compares
   the teeth and not the photography. */
.results-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.result {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--neutral);
  display: grid;
  gap: 2px;
  background: var(--neutral);
}
.result-shot { position: relative; background: var(--white); }
.result-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.result-label {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.75rem;
}
.result-label-after { background: var(--green-deep); color: var(--white); }
.results-note {
  font-size: var(--t-small);
  color: var(--ink);
  opacity: 0.72;
  margin-top: var(--s-3);
  max-width: 60ch;
}
@media (max-width: 860px) { .results-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   STANDARDS
   ------------------------------------------------------------------------- */
.standards { padding: var(--s-6); }
.standards .measure { margin-bottom: var(--s-4); }
.standards-list {
  max-width: none;
  columns: 2;
  column-gap: var(--s-6);
}
.standards-list li { break-inside: avoid; }
@media (max-width: 760px) {
  .standards { padding: var(--s-4); }
  .standards-list { columns: 1; }
}

/* -------------------------------------------------------------------------
   TILES, HOMEPAGE RANGE
   Every tile photograph is built to the same frame by scripts/img/tiles.cjs,
   so the tile only has to hold them still.
   ------------------------------------------------------------------------- */
.grid-tiles .tile { position: relative; }
.grid-tiles .tile img { background: #eaf2ea; }
/* The flagship badge rides on the photograph, so every tile heading in the
   row still starts on the same line. */
.grid-tiles .tile .badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
}
.tile-body { gap: 0.45rem; padding: var(--s-3); }
.tile-body h3 { font-size: 1.25rem; }
.tile-body .price { font-size: 1.15rem; padding-top: var(--s-2); }

/* -------------------------------------------------------------------------
   DISTRIBUTORS
   Two marks of different shapes. Each sits inside a fixed box and is fitted,
   never scaled to equal width, so neither one shouts over the other. Both the
   mark and the name link out to them.
   ------------------------------------------------------------------------- */
.distributors {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 52rem;
}
.distributors li {
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  padding: var(--s-4);
  transition: border-color var(--dur) var(--ease);
}
.distributors li:hover { border-color: var(--green); }
.distributor-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--neutral);
}
.distributor-mark img {
  max-height: 100%;
  width: auto;
  max-width: 82%;
  object-fit: contain;
}
.distributors h3 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.distributors h3 a { text-decoration-color: var(--green); }
.distributors p { margin: 0; }
@media (max-width: 560px) { .distributors { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   VIDEO. One rule, and it is about not paying for what you do not watch.

   The frame keeps the player at 16:9 on every width so the page does not jump
   when the poster loads, and the radius matches the product tiles so a video
   sitting between two of them looks like it belongs.
   -------------------------------------------------------------------------- */
.video-frame {
  margin-top: var(--s-3);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-note {
  margin-top: var(--s-2);
  color: var(--ink-3, #6b726d);
}


/* --------------------------------------------------------------------------
   THE CERTIFICATION COURSE.

   A lesson is read, not scanned, so the measure is tighter than the rest of the
   site and the line height is looser. Everything else on this page is furniture
   around that one column of text.
   -------------------------------------------------------------------------- */
.lesson { max-width: 46rem; }
.lesson-crumb { font-size: .85rem; margin-bottom: var(--s-2); }
.lesson-lead { font-size: 1.2rem; color: var(--ink-2, #4e5551); margin-top: var(--s-2); }

.lesson-learn {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-card);
  background: var(--green-soft, #e3f0e8);
}
.lesson-learn h2 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .6rem;
}
.lesson-learn ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .35rem; }

.lesson-body { margin-top: var(--s-4); }
.lesson-body h3 { margin: var(--s-4) 0 var(--s-1); }
.lesson-body h3:first-child { margin-top: 0; }
.lesson-body p { margin: 0 0 var(--s-2); line-height: 1.75; }

.lesson-list, .lesson-steps {
  margin: 0 0 var(--s-3); padding-left: 1.3rem;
  display: flex; flex-direction: column; gap: .55rem; line-height: 1.65;
}
.lesson-steps { counter-reset: none; }

/* A two column term list that stacks on a phone, for the comparisons. */
.lesson-table { margin: 0 0 var(--s-3); display: flex; flex-direction: column; }
.lesson-table > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule, #e4e2db);
}
.lesson-table > div:last-child { border-bottom: 0; }
.lesson-table dt { font-weight: 600; margin: 0; }
.lesson-table dd { margin: 0; color: var(--ink-2, #4e5551); }

.lesson-note {
  margin: var(--s-3) 0; padding: var(--s-3);
  border-left: 3px solid var(--green, #0b6b3a);
  background: var(--card-2, #f2f1ec); border-radius: 0 var(--r-card) var(--r-card) 0;
}
.lesson-note p { margin: 0; }

.lesson-exam {
  margin-top: var(--s-4); padding: var(--s-3);
  border: 1px dashed var(--rule-2, #cfccc3); border-radius: var(--r-card);
  font-size: .95rem;
}
.lesson-exam p { margin: 0; }

.lesson-nav {
  margin-top: var(--s-5); display: flex; gap: .8rem; flex-wrap: wrap;
  padding-top: var(--s-3); border-top: 1px solid var(--rule, #e4e2db);
}

/* The course index. */
.course-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.course-list li { border-bottom: 1px solid var(--rule, #e4e2db); }
.course-list li:last-child { border-bottom: 0; }
.course-list a {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start;
  padding: 1.1rem 0; text-decoration: none; color: inherit;
}
.course-list a:hover .course-t b { text-decoration: underline; }
.course-n {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-soft, #e3f0e8); color: var(--green, #0b6b3a);
  font-weight: 600;
}
.course-t { display: flex; flex-direction: column; gap: .2rem; }
.course-t span { color: var(--ink-2, #4e5551); font-size: .95rem; }

.exam-list {
  margin: 0; padding-left: 1.4rem;
  display: flex; flex-direction: column; gap: .9rem; line-height: 1.6;
}

@media (max-width: 640px) {
  .lesson-table > div { grid-template-columns: 1fr; gap: .2rem; }
  .lesson-nav .btn { flex: 1 1 100%; text-align: center; }
}

/* A phone-shot film is taller than it is wide. Cropping it to 16:9 would cut the
   operator's hands out of the top and bottom, so this frame keeps the whole shot and
   caps the height instead. */
.video-frame-portrait {
  aspect-ratio: 9 / 16;
  max-width: 24rem;
  margin-inline: auto;
}
.video-frame-portrait video { object-fit: contain; }