/* Fonts are loaded via <link> in index.html so they do not block on this file. */

:root {
  /* Colour */
  --charcoal: #1E1E1E;
  --charcoal-deep: #171717;
  --charcoal-hero: #141414;
  --charcoal-footer: #121212;
  --champagne-gold: #C5A059;
  --champagne-gold-hi: #D8B673;
  --white: #FFFFFF;
  --text: #D4D1CC;
  --text-soft: #A8A5A0;
  --text-muted: #9A9A9A;
  --hairline: rgba(255, 255, 255, 0.07);
  --gold-line: rgba(197, 160, 89, 0.55);

  /* Spacing scale (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(80px, 10vh, 128px);

  /* Type scale */
  --h1: clamp(30px, 3.9vw, 56px);
  --h2: clamp(30px, 3.4vw, 46px);
  --h3: 21px;
  --body: 17px;
  --small: 14.5px;
  --micro: 11.5px;
  --track: 0.18em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must win even over elements styled display: flex,
   e.g. the affiliate section while the partner accounts await approval. */
[hidden] { display: none !important; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: var(--white);
  background-color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Cinzel', serif; font-weight: 400; }

a { color: var(--champagne-gold); text-decoration: none; }
a:hover { color: var(--champagne-gold-hi); }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 17px 40px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-outline {
  color: var(--champagne-gold);
  background: transparent;
  border: 1px solid var(--gold-line);
}

.btn-outline:hover {
  background: rgba(197, 160, 89, 0.12);
  border-color: var(--champagne-gold);
  color: var(--champagne-gold);
}

.btn-sm { font-size: 12px; letter-spacing: var(--track); padding: 11px 22px; }

/* ---------- Shared section furniture ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--champagne-gold);
}

.eyebrow-center { justify-content: center; }

.rule { width: 34px; height: 1px; background: var(--champagne-gold); display: block; }

.section-head {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.section-title {
  font-size: var(--h2);
  line-height: 1.15;
  max-width: 20ch;
  text-wrap: pretty;
}

.section-sub {
  font-size: var(--body);
  line-height: 1.7;
  max-width: 60ch;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* ---------- Persistent header ---------- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(22px, 3.5vw, 44px);
  padding: 15px var(--gutter);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(20, 20, 20, 0.62) 62%, rgba(20, 20, 20, 0));
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand img { width: 24px; height: auto; }

.brand-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne-gold);
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); }

.site-nav a {
  font-size: 12px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: #C6C3BE;
}

.site-nav a:hover { color: var(--champagne-gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  /* svh, not dvh: the dynamic unit tracks the mobile URL bar, so it grows the
     moment the bar retracts and shunts everything below it — the page appears
     to jump a beat after you stop scrolling. The small unit is the viewport
     with the chrome showing, and it never changes. */
  height: 100svh;
  min-height: 560px;
  /* Symmetric top and bottom so the lockup lands on the true viewport
     centre; the header this used to clear is invisible at scroll 0 anyway. */
  padding: 88px 5%;
  background: var(--charcoal-hero);
}

.hero-inner { height: 100%; }

/* Nothing left in the opening view but the lockup, so it simply centres. */
.hero-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform, opacity;
}

.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo { width: clamp(120px, 13vw, 172px); height: auto; margin-bottom: clamp(30px, 3.4vw, 48px); }

.hero-wordmark {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1;
  letter-spacing: 0.34em;
  /* letter-spacing adds a trailing gap; indent by the same amount to
     keep the centred wordmark optically centred. */
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-3);
}

/* ---------- Scroll cue ---------- */
/* The opening view is a lockup on empty ground with nothing clipped at the
   fold, which is exactly the "false bottom" that convinces people a page has
   ended. This is the affordance that says otherwise.

   Opacity lives on the anchor so the scroll handler can drive it, while the
   entrance and drift animate the svg inside — a running animation outranks
   inline styles in the cascade, so the two must not share a property. */
.scroll-cue {
  position: absolute;
  bottom: clamp(24px, 4.5vh, 42px);
  left: 0;
  right: 0;
  width: 46px;
  height: 46px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne-gold);
  transition: opacity 0.45s ease;
}

.scroll-cue svg {
  width: 26px;
  height: auto;
  /* Visible by default: the reduced-motion block strips the animation, and a
     zero-opacity base would leave nothing on screen for those users. */
  opacity: 0.62;
  animation:
    cueIn 2.6s ease-in-out 1.8s both,
    cueDrift 3.2s ease-in-out 4.4s infinite;
}

.scroll-cue:hover { color: var(--champagne-gold-hi); }
.scroll-cue:hover svg { opacity: 1; }

@keyframes cueIn {
  from { opacity: 0; }
  to { opacity: 0.62; }
}

/* A slow downward drift rather than a blink — the direction of travel is
   itself the instruction, and a hard on/off pulse would fight the restraint
   of the rest of the page. */
@keyframes cueDrift {
  0%, 100% { transform: translateY(0); opacity: 0.48; }
  50% { transform: translateY(7px); opacity: 0.95; }
}

/* ---------- How it works ---------- */
.how {
  background: var(--charcoal);
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 6vh, 76px);
}

.steps {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.step { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

.step-shot {
  width: 100%;
  max-width: 250px;
  border-radius: 30px;
  border: 2px solid var(--champagne-gold);
  overflow: hidden;
  background: #161616;
  box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.18), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.step-shot img { width: 100%; height: auto; }

.step-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 34ch;
}

.step-num { font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: 0.2em; color: var(--champagne-gold); }
.step-title { font-size: var(--h3); }
.step-copy p { font-size: 15px; line-height: 1.7; color: var(--text-soft); text-wrap: pretty; }

/* ---------- Technology ---------- */
.technology {
  position: relative;
  /* A floor, not a fixed height — this section's copy is long enough to
     overflow a short viewport, and clipping it would lose the CTA. */
  min-height: 100vh;
  min-height: 100svh;   /* stable on mobile; see the note on .hero */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 88px 5% 64px;
  background-image: url('images/measure-bg.webp');
  background-size: cover;
  background-position: center left;
}

/* The tape roll occupies the left of the photograph, so the copy sits right
   and the scrim deepens in that direction. */
.technology::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.15) 40%, rgba(20, 20, 20, 0.68) 100%);
}

/* The section above is a flat --charcoal-hero and the one below a flat
   --charcoal. Fading the photograph into those exact values at each edge
   removes the seam entirely. Colours are hard-coded as rgb here because a
   gradient to `transparent` interpolates through transparent black and
   greys out the midpoint in some engines.

   The stops trace an ease-out curve rather than a straight two-stop ramp: a
   linear alpha fade reaches zero abruptly and that shoulder reads as a faint
   line, which is the edge that was visible before. */
.technology::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgb(20, 20, 20) 0%,
      rgba(20, 20, 20, 0.94) 4%,
      rgba(20, 20, 20, 0.78) 9%,
      rgba(20, 20, 20, 0.54) 15%,
      rgba(20, 20, 20, 0.28) 21%,
      rgba(20, 20, 20, 0.1) 26%,
      rgba(20, 20, 20, 0) 32%),
    linear-gradient(0deg,
      rgb(30, 30, 30) 0%,
      rgba(30, 30, 30, 0.92) 3%,
      rgba(30, 30, 30, 0.72) 7%,
      rgba(30, 30, 30, 0.45) 12%,
      rgba(30, 30, 30, 0.2) 17%,
      rgba(30, 30, 30, 0) 23%);
}

.technology-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.technology .section-title { max-width: none; text-align: left; }

.lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  max-width: 52ch;
  color: var(--text);
  text-wrap: pretty;
}

.stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.2vw, 34px); padding: 14px 0 4px; }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-value { font-family: 'Cinzel', serif; font-size: 30px; color: var(--champagne-gold); }
.stat-value span { font-size: 16px; }

.stat-label {
  font-size: var(--micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Curated edit ---------- */
.curated-edit {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-deep);
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(44px, 5vh, 68px);
}

/* The ring photograph returns here as atmosphere rather than subject.
   Inset overscan hides the soft edges blur would otherwise pull inward,
   and the low opacity keeps the cards the thing you actually read. */
.curated-edit::before {
  content: '';
  position: absolute;
  inset: -6%;
  background-image: url('images/accuracy-bg.webp');
  background-size: cover;
  background-position: center right;
  filter: blur(18px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Darkens the right side, where the ring sits brightest, so card borders
   and caption text keep their contrast. */
.curated-edit::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(30, 30, 30) 0%,
      rgba(30, 30, 30, 0.9) 3%,
      rgba(30, 30, 30, 0.65) 7%,
      rgba(30, 30, 30, 0.35) 12%,
      rgba(30, 30, 30, 0.12) 17%,
      rgba(30, 30, 30, 0) 22%),
    linear-gradient(0deg,
      rgb(18, 18, 18) 0%,
      rgba(18, 18, 18, 0.88) 3%,
      rgba(18, 18, 18, 0.6) 7%,
      rgba(18, 18, 18, 0.3) 12%,
      rgba(18, 18, 18, 0) 18%),
    linear-gradient(90deg, rgba(23, 23, 23, 0.62) 0%, rgba(23, 23, 23, 0.4) 45%, rgba(23, 23, 23, 0.66) 100%);
  z-index: 0;
  pointer-events: none;
}

.curated-edit > * { position: relative; z-index: 1; }

.edit-grid {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 34px);
}

.edit-card {
  display: flex;
  flex-direction: column;
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.edit-card:hover { border-color: rgba(197, 160, 89, 0.5); transform: translateY(-4px); }

.edit-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.edit-caption { display: flex; flex-direction: column; gap: 9px; padding: var(--space-3) 26px 28px; }
.edit-caption h3 { font-size: 18px; color: var(--champagne-gold); }
.edit-caption p { font-size: var(--small); line-height: 1.6; color: var(--text-muted); }

.edit-cta {
  font-size: 11px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: #7E7B77;
  padding-top: 6px;
}

.affiliate-note {
  font-size: 13px;
  line-height: 1.6;
  color: #8A8A8A;
  text-align: center;
  max-width: 60ch;
}

/* ---------- Footer ---------- */
footer {
  background: var(--charcoal-footer);
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 7vh, 84px) var(--gutter) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}

.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-brand img { width: 64px; height: auto; opacity: 0.55; }
.footer-brand .brand-name { font-size: 13px; color: #C6C3BE; }

.footer-links {
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(20px, 4vw, 48px);
}

.footer-links a {
  font-size: var(--micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-links a:hover { color: var(--champagne-gold); }
.footer-links a:nth-child(1) { justify-self: start; }
.footer-links a:nth-child(2) { justify-self: center; }
.footer-links a:nth-child(3) { justify-self: end; }

.footer-legal {
  width: 100%;
  max-width: 820px;
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer-legal p { font-size: 12.5px; line-height: 1.65; color: #8A8A8A; text-wrap: pretty; }

/* ---------- QR dialog ---------- */
#qr-dialog {
  background: var(--charcoal);
  border: 1px solid rgba(197, 160, 89, 0.22);
  border-radius: 10px;
  padding: clamp(36px, 5vw, 60px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  color: var(--white);
  max-width: min(90vw, 420px);
  text-align: center;
  /* A modal dialog is centred by the UA stylesheet with
     position: fixed; inset: 0; margin: auto. Overriding position to
     relative dropped it into normal flow at the top of the document, which
     put it in the corner and made showModal() scroll the page up to reach
     it. Restated explicitly here so it does not depend on UA defaults, and
     fixed still gives .dialog-close its containing block. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

#qr-dialog::backdrop { background: rgba(20, 20, 20, 0.88); backdrop-filter: blur(10px); }

#qr-dialog .qr { width: 220px; height: 220px; margin: 0 auto var(--space-3); }
#qr-dialog h2 { font-size: var(--h3); margin-bottom: var(--space-2); }
#qr-dialog p { font-size: var(--small); line-height: 1.65; max-width: 30ch; margin: 0 auto; color: var(--text-soft); }

.dialog-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  transition: color 0.3s ease;
}

.dialog-close:hover { color: var(--champagne-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .technology::before {
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.1) 0%, rgba(20, 20, 20, 0.45) 35%, rgba(20, 20, 20, 0.8) 100%);
  }
}

@media (max-width: 768px) {
  .hero { justify-content: center; padding: 96px 6% 56px; }

  .technology {
    justify-content: center;
    padding: 96px 6% 56px;
    background-position: center left;
  }

  .technology::before {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0.72) 100%);
  }

  .technology-content { align-items: center; }
  .technology .section-title { text-align: center; }
  /* Three metrics across a phone wrap two-then-one, which reads as a broken
     grid. Stacked, each becomes a single line — the gold figure, then the
     site's own middot, then its label — so the three read as a list and the
     numbers stay the thing the eye lands on. */
  .technology .stats {
    display: grid;
    /* Two tracks rather than three centred rows, so the figures end on a
       common edge and the middots fall into a column. justify-content
       centres the pair of tracks, not each line inside them. */
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: baseline;
    column-gap: 11px;
    row-gap: var(--space-2);
  }
  /* The wrapper is presentational; dropping its box lets the dt and dd of
     every metric become cells of the one grid. dl > dt/dd is unchanged. */
  .technology .stat { display: contents; }
  .technology .stat-value { text-align: end; }
  .technology .stat-label { text-align: start; }
  .technology .stat-label::before {
    content: "\00B7";
    margin-inline-end: 11px;
    color: var(--text-muted);
  }

  .site-nav { gap: 16px; }
  .site-nav a { display: none; }

  .footer-links {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--space-2);
  }

  .footer-links a:nth-child(1),
  .footer-links a:nth-child(2),
  .footer-links a:nth-child(3) { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(96px, 12vh, 150px) var(--gutter) var(--space-6);
}

.legal-page .brand { justify-content: center; margin: 0 0 var(--space-5); }
.legal-page h1 { font-size: var(--h2); line-height: 1.15; margin-bottom: var(--space-2); }

.legal-updated {
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.legal-page h2 {
  font-size: var(--h3);
  color: var(--champagne-gold);
  margin: var(--space-5) 0 var(--space-2);
}

.legal-page p,
.legal-page li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-soft);
  text-wrap: pretty;
}

.legal-page p { margin-bottom: var(--space-2); }
.legal-page ul { margin: 0 0 var(--space-2) var(--space-3); }
.legal-page li { margin-bottom: 8px; }
.legal-page p a,
.legal-page li a { text-decoration: underline; text-underline-offset: 3px; }

.legal-back {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Marks text that still needs the owner's input before launch. */
.legal-todo {
  display: block;
  border-left: 2px solid var(--champagne-gold);
  background: rgba(197, 160, 89, 0.07);
  padding: 14px 18px;
  margin-bottom: var(--space-2);
  font-size: 14px;
  color: var(--text);
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}

.legal-page th,
.legal-page td {
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.legal-page th {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne-gold);
}

.legal-page strong { color: var(--text); font-weight: 500; }
.legal-page hr { border: none; border-top: 1px solid var(--hairline); margin: var(--space-5) 0; }

/* ---------- language switcher ---------- */
/* Matches the other two sites: no panel, no border — the options sit
   directly on the page, right-aligned under the trigger. */
.lang { position: relative; }
.lang-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: #C6C3BE;
  cursor: pointer;
}
.lang-trigger:hover { color: var(--champagne-gold); }

.lang-menu {
  position: absolute;
  top: calc(100% + 16px);
  inset-inline-end: 0;
  min-width: 130px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  z-index: 60;
}
.lang-menu li {
  padding: 6px 0;
  text-align: end;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #8F8B85;
  cursor: pointer;
}
.lang-menu li:hover { color: #C6C3BE; }
.lang-menu li[aria-selected="true"] { color: var(--champagne-gold); }