/* =========================================================================
   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: var(--tracking-label);
  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-medium);
  letter-spacing: var(--tracking-label);
  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); }

/* The account button is a quieter outline on the dark bar. Solid white made it
   shout louder than the lockup, which is the wrong way round: the company name
   leads and the button follows. */
.site-nav .nav-cta .btn {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  padding-inline: var(--s-3);
}
.site-nav .nav-cta .btn:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* The menu. A checkbox and a label, no script, so a phone with JavaScript
   blocked still opens it. Hidden entirely on a wide screen. */
.nav-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }

/* Small screens: one bar. The lockup alone in the middle at readable size, the
   menu button on the left, everything else behind it.

   Set 8 September 2026. Before this the header was 255px tall on a 375px phone,
   SIGN IN sat orphaned on its own line, and the account pill was the biggest
   thing on the screen. */
@media (max-width: 860px) {
  .site-nav .nav-inner {
    grid-template-columns: 3rem 1fr 3rem;
    justify-items: center;
    align-items: center;
    min-height: 4.5rem;
    padding-block: var(--s-2);
    row-gap: 0;
    column-gap: 0;
  }
  .nav-toggle {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -0.6rem;
    cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 1.35rem;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav-toggle span { position: relative; }
  .nav-toggle span::before,
  .nav-toggle span::after { content: ''; position: absolute; left: 0; }
  .nav-toggle span::before { top: -0.42rem; }
  .nav-toggle span::after  { top: 0.42rem; }

  .nav-check:checked ~ .nav-inner .nav-toggle span { background: transparent; }
  .nav-check:checked ~ .nav-inner .nav-toggle span::before { transform: translateY(0.42rem) rotate(45deg); }
  .nav-check:checked ~ .nav-inner .nav-toggle span::after  { transform: translateY(-0.42rem) rotate(-45deg); }

  .nav-logo { grid-row: 1; grid-column: 2; justify-self: center; }
  .nav-logo img, .nav-logo svg { height: 3.4rem; }

  .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
                padding-block var(--dur) var(--ease);
  }
  .nav-links-left  { grid-row: 2; }
  .nav-links-right { grid-row: 3; }
  .nav-links a:not(.btn) { padding-left: 0; }
  .nav-links a:not(.btn)::before { display: none; }

  .nav-check:checked ~ .nav-inner .nav-links-left  { max-height: 14rem; opacity: 1; padding-top: var(--s-3); }
  .nav-check:checked ~ .nav-inner .nav-links-right { max-height: 14rem; opacity: 1; padding-bottom: var(--s-2); }
  .nav-cta { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   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: var(--tracking-label);
  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; }

/* -------------------------------------------------------------------------
   THE GATE

   Where the rest of a lesson used to be. It is not a wall and it must not read
   like one: it is a contents list for the half that is held back, and the form
   under it costs a name and an email. Light, on the paper, same card language
   as the rest of the lesson.
   ------------------------------------------------------------------------- */
.locked {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule, #e4e2db);
  border-top: 3px solid var(--green-deep, #0b6b3a);
  border-radius: var(--r-card);
  background: var(--card-2, #f2f1ec);
}
.locked-eyebrow {
  margin: 0 0 var(--s-2);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-deep, #0b6b3a);
}
.locked-list {
  margin: 0 0 var(--s-3); padding-left: 1.15rem;
  display: flex; flex-direction: column; gap: .5rem; line-height: 1.6;
}
.locked-say { margin: 0 0 var(--s-3); }
.locked-form { margin: 0; }
.locked-form .field { max-width: 22rem; margin-bottom: var(--s-2); }
.locked-form button { margin-top: var(--s-2); }
.locked-msg:empty { display: none; }
.locked-msg { margin: var(--s-2) 0 0; color: var(--green-deep, #0b6b3a); font-weight: 600; }


.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; }


/* -------------------------------------------------------------------------
   CENTRED ON A PHONE

   The owner's instruction, 8 September 2026, after opening the site on his
   own phone: the heading was centred, everything around it was hard left, and
   the page read as unfinished. On a phone the column is narrow enough that a
   centre line is the strongest thing on the screen, so everything sits on it.

   Two exceptions, and they are readability not laziness. A teaching list and a
   numbered protocol keep their text left inside a centred block, because a
   wrapped bullet centred line by line cannot be scanned. Short label lists are
   centred outright.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  main { text-align: center; }

  main p,
  main .measure,
  .lesson-lead,
  .hero-lede { margin-left: auto; margin-right: auto; }

  /* A block that is centred as a block, with its own text left. */
  .lesson-list,
  .lesson-steps,
  .exam-list,
  .locked-list,
  .lesson-learn ul {
    display: inline-block;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
  .lesson-learn { text-align: center; }
  .lesson-note, .locked { text-align: center; }
  .lesson-note p { margin-inline: auto; }

  /* Short label lists centre outright: the factory standards strip, the
     audience rows and the spec tables. */
  .proof-grid, .audience-list, .distributors { justify-items: center; }
  .proof-grid li, .audience-list > * { text-align: center; }
  /* A spec row stacks on a phone: the label above, the words below, both
     centred and full width. Two columns at 375px squeezed long answers into a
     skinny centred column that read like a poem. */
  .spec-list .spec-row { grid-template-columns: 1fr; gap: .25rem; justify-items: center; text-align: center; }
  .spec-list .spec-row dd { max-width: 30rem; }
  .lesson-table > div { grid-template-columns: 1fr; text-align: center; gap: 0.2rem; }

  /* The course rows keep their number beside the title, but the block centres. */
  .course-list { text-align: left; }

  /* Forms centre with their labels. */
  .field { margin-inline: auto; }
  .field label { text-align: center; }
  .locked-form { text-align: center; }
  .locked-form .field { text-align: left; }

  .lesson-nav, .footer-links { justify-content: center; }
}

/* -------------------------------------------------------------------------
   RHYTHM ON A PHONE
   One step between blocks, so the page breathes the same the whole way down
   instead of reading as separate pieces stacked up.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .section, .section-tight, .cta-block { padding-block: var(--s-5); }
  h1 { margin-bottom: var(--s-2); }
  h2 { margin-bottom: var(--s-2); }
  .eyebrow { margin-bottom: var(--s-1); }
  .btn { margin-top: var(--s-1); }
}

/* -------------------------------------------------------------------------
   CENTRED ON A WIDE SCREEN TOO

   The owner asked for the site to read as centred, not only on a phone. On a
   wide screen a long paragraph set centre line by line is hard to read, so the
   rule is: the head of every section centres, and the body of it keeps its own
   shape. Eyebrow, heading, the lead paragraph under it and the button that
   follows sit on the centre line; tables, lists and split layouts do not move.

   The hero stays a split, photograph on one side and words on the other. That
   is a designed layout, not a stray alignment, and centring it would throw the
   picture out of the composition.
   ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .section > .eyebrow,
  .section > h2,
  .section-tight > .eyebrow,
  .section-tight > h2,
  .section > p.measure,
  .section-tight > p.measure {
    text-align: center;
    margin-inline: auto;
  }
  .cta-block { text-align: center; }
  .cta-block .measure { margin-inline: auto; }
}

/* -------------------------------------------------------------------------
   QUESTIONS, ANSWERED IN A LINE
   The block an answer engine lifts from. Question as a heading, answer as one
   short paragraph directly under it, nothing between them. Plain, left, quiet.
   ------------------------------------------------------------------------- */
.faq-list { margin: var(--s-4) 0 0; max-width: 46rem; }
.faq-item { padding: var(--s-3) 0; border-top: 1px solid var(--rule, #e4e2db); }
.faq-item:last-child { border-bottom: 1px solid var(--rule, #e4e2db); }
.faq-item dt h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.faq-item dd { margin: 0; }
.faq-item dd p { margin: 0; line-height: 1.7; color: var(--ink-2, #4e5551); }
@media (min-width: 641px) {
  .faq > .eyebrow, .faq > h2, .faq > p.measure { text-align: center; margin-inline: auto; }
  .faq-list { margin-inline: auto; }
}
@media (max-width: 640px) {
  .faq-item { text-align: left; }
}

/* -------------------------------------------------------------------------
   CITY PAGES (scripts/cities.cjs)
   A regulator's words set apart, the city list on the course page, and the
   one italic line under the close.
   ------------------------------------------------------------------------- */
.city-quote {
  margin: var(--s-3) auto;
  padding: var(--s-2) var(--s-4);
  border-left: 3px solid var(--green);
}
.city-quote p { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.city-aside { margin-top: var(--s-4); opacity: 0.8; }
.city-list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.city-list li::before { content: ''; }
.city-list a { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: 0.04em; }
/* Two before and after pairs on a city page, side by side, no empty third column. */
.results-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
@media (max-width: 860px) { .results-two { grid-template-columns: 1fr; } }

/* Round three, 20 September 2026: the city page is drawn from the home page's
   own pieces. These lines only settle the few places where a piece is used
   in a way the home page does not use it. */
.hero-lead .hero-copy .stat-row { margin-block: var(--s-3) var(--s-4); }
.hero-lead .hero-copy h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.band-panel > p { max-width: var(--measure); margin-bottom: var(--s-3); }
.band-panel .steps { margin-block: var(--s-4); }
.band-panel .steps p { font-size: 1rem; }
.city-card > p, .city-card .city-quote { max-width: var(--measure); }
.city-card .city-quote { margin: var(--s-3) 0; }
.city-pairs { max-width: none; columns: 2; column-gap: var(--s-6); margin-top: var(--s-3); }
.city-pairs .spec-row { break-inside: avoid; grid-template-columns: 1fr; gap: 0.35rem; }
.city-pairs .spec-row:first-child { border-top: 0; }
.city-pairs dd { font-size: 1rem; }
@media (max-width: 760px) { .city-pairs { columns: 1; } }
.grid-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid-tiles-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid-tiles-4 { grid-template-columns: 1fr; } }
.tile .tile-line strong { color: var(--ink); }
.city-after-tiles { margin-top: var(--s-4); }
.distributors-one { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
.split-copy .stat-row { margin-top: var(--s-4); }
.city-tiles .tile-body { padding-top: var(--s-3); }
.city-tiles .tile-body .eyebrow { margin-bottom: 0.2rem; }
.split-copy .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; }
.split-media img.city-cert { aspect-ratio: 1; object-fit: cover; }
.split + .distributors { margin-top: var(--s-4); }
.band-panel .sparkle-list { max-width: var(--measure); margin-bottom: var(--s-3); }

/* WHAT A YEAR LOOKS LIKE (scripts/cities.cjs, 29 September 2026).
   Three cards, the middle one picked out, and the aftercare line under them. */
.year-grid { margin-top: var(--s-4); }
.year-card {
  border: 1px solid var(--neutral);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.year-card-mid { background: #f4f8f4; border-color: var(--green); }
.year-n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: var(--w-light);
  color: var(--ink);
  line-height: 1.1;
}
.year-l {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0.4rem 0 var(--s-2);
}
.year-card p { margin: 0; }
.year-note { margin-top: var(--s-4); font-size: var(--t-small); opacity: 0.8; }
.year-upsell {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: #f4f8f4;
  border-left: 4px solid var(--green);
  border-radius: var(--r-input);
}
.year-upsell .eyebrow { margin-bottom: 0.3rem; }
.year-upsell p { margin: 0; }
@media (min-width: 641px) {
  .year-note, .year-upsell { margin-inline: auto; }
  .year-upsell .measure { margin-inline: auto; }
}

/* -------------------------------------------------------------------------
   CITY PAGES, CENTRED. Added 29 Sep 2026. He said the city pages sat on the
   left with nothing in the middle. Every section head on a city page now sits
   on the centre line, and the money panel, the year notes and the film follow.
   The split sections (your city, the training) stay splits.
   ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .city-page .section-head,
  .city-page .band .section-head,
  .city-page .results .section-head { max-width: 40ch; margin-inline: auto; text-align: center; }
  .city-page .results h2, .city-page .results .eyebrow { text-align: center; }
  .city-page .band-panel { text-align: center; }
  .city-page .band-panel > p,
  .city-page .band-panel .sparkle-list { margin-inline: auto; }
  .city-page .band-panel .sparkle-list { text-align: left; display: table; }
  .city-page .band-panel .steps { text-align: left; }
  .city-page .year-note { text-align: center; }
  .city-page .year-upsell { max-width: 46rem; }
  .city-page .year-upsell .measure { margin-inline: 0; }
  .city-page .results-note { text-align: center; margin-inline: auto; }
  .city-page .city-after-tiles { text-align: center; margin-inline: auto; }
  .city-page .city-card > h2, .city-page .city-card > .eyebrow { text-align: left; }
}
.city-film { max-width: 60rem; margin: var(--s-6) auto 0; }
.city-film .video-note { text-align: center; margin-top: var(--s-2); }
@media (min-width: 641px) {
  .city-page .section-head h2 { max-width: none; margin-inline: auto; }
  .city-page .city-film p.video-note { text-align: center; max-width: none; }
}
@media (min-width: 641px) {
  .city-page .section-head,
  .city-page .band .section-head,
  .city-page .results .section-head { max-width: 52rem; }
}
.city-film-top { margin-top: 0; }
/* Laura's words above the before and afters, and customers' words under an
   answer in "What usually stops people". Added 30 Sep 2026. */
.city-testimonial { max-width: 46rem; margin: 0 auto var(--s-5); text-align: center; }
.city-testimonial blockquote { margin: 0; }
.city-testimonial p { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.5; margin: 0 0 var(--s-2); }
.city-testimonial figcaption { font-size: var(--t-small); letter-spacing: 0.04em; }
.city-said { margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: 3px solid var(--green); }
.city-said p { margin: 0; font-style: italic; }
.city-said footer { font-size: var(--t-small); margin-top: 0.3rem; opacity: 0.85; }
.city-page .results-two { margin-inline: auto; }
.city-testimonial p.city-testimonial-lead { font-family: inherit; font-size: 1rem; margin: 0 0 var(--s-2); }
/* City tiles on the certification page carry a photo, cropped the same on every tile. */
.city-tiles .tile img { aspect-ratio: 4 / 3; object-fit: cover; background: none; }


/* -------------------------------------------------------------------------
   US SITE, CODER-BRIEF part 1, 1 October 2026.
   The main button is bigger than the rest but wears the house green, same as
   britelounge.ca. Owner's call, 2 Oct 2026: the orange did not fit the site.
   The header sticks, so the ask is on every screen.
   ------------------------------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 50; }
.btn-loud {
  background: var(--green-deep); color: var(--white); border: 2px solid var(--green-deep);
  font-size: 1.05rem; padding: 1rem 2rem;
}
.btn-loud:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* Second hero, the money. Its own block under the master hero, on the soft green band,
   photo on the left and words on the right so it reads as a new screen, not a repeat. */
.hero-money { background: var(--green-light); padding-block: var(--s-7); }
.hero-money-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: center; }
.hero-money-media img { width: 100%; height: 34rem; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-card); display: block; }
.hero-money .hero-price { font-size: clamp(2.75rem, 6vw, 5.75rem); line-height: 1.04; margin-bottom: var(--s-3); text-wrap: balance; }
@media (min-width: 900px) { .hero-money .hero-price { font-size: max(64px, 4.6vw); } }
.hero-money .hero-lede { font-size: 1.25rem; max-width: 30rem; margin-bottom: var(--s-4); }
@media (max-width: 899px) {
  .hero-money-inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-money-media { order: 2; }
  .hero-money-media img { height: 22rem; }
}
.proof-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
@media (max-width: 760px) { .proof-four { grid-template-columns: 1fr 1fr; } }
.chair-sums dd { font-variant-numeric: tabular-nums; }