/* =========================================================================
   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);
}

img, svg { display: block; max-width: 100%; }

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.
   NOTE: --green on white reads 2.55:1. tokens.css and WEB-03 both assign
   eyebrows to --green; swap to --green-deep (4.71:1) if AA is wanted here. */
.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);
  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);
}
.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: 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.8rem;
  border-bottom: 1px solid var(--green);
  margin: 0;
}
.spec-list .spec-row:first-child { border-top: 1px solid var(--green); }
.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); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center bottom; }
.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. */
.gallery { display: grid; gap: var(--s-3); }
.gallery img { border-radius: var(--r-card); width: 100%; }
.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: var(--s-2);
  background: var(--white);
  border-bottom: 1px solid var(--neutral);
}
.tile-cert-media .cert-mark {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ink);
}

/* 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(10rem, 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); }

/* 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; }