/*
  Biiidr — pre-launch landing page.
  Palette and radii are the app's own tokens (src/constants/theme.ts, "Biiidr UI Standards v1").
  Nothing here is invented: greens, gold, beige/cream and the two gradients are copied verbatim.
*/

/*
  Metric-matched fallbacks for Fraunces, so a slow or blocked webfont doesn't reflow the page.
  Without these the H1 wrapped to 4 lines instead of 3 during swap and pushed the CTA below
  the fold — the largest element on the page moving, on a page aimed at agents on mobile data.

  Measured in Chrome at 100px with the H1's own letter-spacing, not guessed:
    Fraunces opsz 144 = 1485.6   opsz 48 = 1793.1
    Times New Roman   = 1661.2   Georgia = 2012.0
  Georgia and Times differ by 21%, so one shared size-adjust cannot serve both. Each local
  face therefore gets its own tuned family, tried in stack order. Times first: Times-metric
  serifs are the default on Android and Linux (Tinos / Liberation Serif) where Georgia does
  not exist at all — and Android is half the audience this page is aimed at.
  (Instrument Sans needs no equivalent: it measures within 1% of Arial/Helvetica.)
*/
@font-face {
  font-family: "Fraunces FB Times";      /* 1485.6 / 1661.2 */
  src: local("Times New Roman"), local("Tinos"), local("Liberation Serif");
  size-adjust: 89.4%;
  ascent-override: 109.6%;
  descent-override: 29.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces FB Georgia";    /* 1485.6 / 2012.0 */
  src: local("Georgia");
  size-adjust: 73.8%;
  ascent-override: 132.8%;
  descent-override: 35.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces FB Times Text"; /* 1793.1 / 1661.2 */
  src: local("Times New Roman"), local("Tinos"), local("Liberation Serif");
  size-adjust: 107.9%;
  ascent-override: 90.8%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces FB Georgia Text"; /* 1793.1 / 2012.0 */
  src: local("Georgia");
  size-adjust: 89.1%;
  ascent-override: 110%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

:root {
  /* Brand — theme.ts colors */
  --green: #028C1D;
  --green-dark: #1E5E2B;
  --forest: #1B4028;
  --deep: #0C2313;
  --ink-green: #0F2A18;
  --sage: #A9CBB2;
  --gold: #E2B857;
  --gold-lo: #E7C457;
  --gold-hi: #C6982F;
  --beige: #FBE1AF;
  --beige-dark: #F5D69C;
  --cream: #F3E8D2;
  --near-black: #1F1F1F;

  /* theme.ts gradients */
  --surface-deep: linear-gradient(158deg, #1B4028, #0C2313);
  --cta: linear-gradient(158deg, #E7C457, #C6982F);

  /* theme.ts radii */
  --r-card: 14px;
  --r-sheet: 26px;
  --r-pill: 100px;

  /* Display face at large optical sizes (opsz 144) vs smaller headings (opsz 48–72) — each
     gets the fallback tuned to that optical size. */
  --font-display: "Fraunces", "Fraunces FB Times", "Fraunces FB Georgia", Georgia, serif;
  --font-display-text: "Fraunces", "Fraunces FB Times Text", "Fraunces FB Georgia Text", Georgia, serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5.5vw, 64px);

  /* Grain — kills the flat-gradient look on the deep surfaces. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  position: relative;
  background: var(--deep);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }

.sprite { display: none; }

/* Every section — including the masthead and footer — lines its content up on this column. */
.wrap { max-width: var(--wrap); margin: 0 auto; }

/*
  Focus ring: a two-tone ring rather than `currentColor`. On the gold CTA, `currentColor` is
  #0C2313 against a #1A3823-ish surround — 1.29:1, well under the 3:1 WCAG 1.4.11 needs. The
  deep+cream pair always keeps one high-contrast edge whatever it sits on, and box-shadow
  follows each element's own border-radius (so the pill CTA stays a pill).
*/
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 5px var(--cream);
}

.skip {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--deep);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .18s ease;
}
.skip:focus { transform: none; }

/* ---------- shared type ---------- */

.eyebrow {
  margin-bottom: 20px;
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--dark { color: var(--green-dark); }

.section-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(2.1rem, 6.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--forest);
}
.section-title--light { color: var(--cream); }

.section-sub {
  margin-top: 20px;
  max-width: 34ch;
  color: rgba(15, 42, 24, .76);
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--sage);
  vertical-align: 1px;
}
.dot--gold { background: var(--gold); }

.glyph { width: 1.15em; height: 1.15em; flex: none; }
.glyph--phone { width: .78em; height: 1.22em; }

/* ---------- masthead ---------- */

.masthead {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 3.4vw, 34px) var(--gutter);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Negative margin keeps the visual position while giving the link a ~46px tap target. */
.masthead__brand {
  display: inline-flex;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--cream);
}

.wordmark {
  display: block;
  height: 26px;
  width: auto;
  color: var(--cream);
  --wm-accent: var(--gold);
}
@media (min-width: 700px) { .wordmark { height: 31px; } }

.masthead__status {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px 7px 13px;
  border: 1px solid rgba(169, 203, 178, .28);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(104px, 16vh, 156px) var(--gutter) clamp(64px, 10vw, 116px);
  background-image:
    radial-gradient(58% 46% at 84% 26%, rgba(226, 184, 87, .17), transparent 68%),
    radial-gradient(48% 40% at 4% 90%, rgba(2, 140, 29, .16), transparent 70%),
    var(--surface-deep);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .045;
  pointer-events: none;
}

.hero__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 8vw, 76px);
}

.hero__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(2.6rem, 10.4vw, 5.2rem);
  line-height: .97;
  letter-spacing: -.026em;
  color: var(--cream);
}
.hero__title em { color: var(--gold); }

.lede {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 2.4vw, 1.16rem);
  color: rgba(243, 232, 210, .84);
}

.platforms { margin-top: 32px; }
.platforms__pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 19px;
  border: 1px solid rgba(226, 184, 87, .42);
  border-radius: var(--r-pill);
  background: rgba(226, 184, 87, .08);
  color: var(--gold);
  font-weight: 600;
  font-size: clamp(.875rem, 2.1vw, .95rem);
  letter-spacing: .005em;
}

.hero__note {
  margin-top: 18px;
  max-width: 42ch;
  font-size: .875rem;
  color: rgba(169, 203, 178, .82);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  background: var(--cta);
  color: var(--deep);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 7px 18px rgba(150, 110, 20, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(150, 110, 20, .38); }
/* Declared after :hover so the ring survives hover+focus, and keeps the CTA's own drop shadow. */
.btn:focus-visible {
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 5px var(--cream), 0 7px 18px rgba(150, 110, 20, .3);
}
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 17px; height: 17px; transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateY(3px); }

/* ---------- hero capture panel ---------- */

.hero__visual { position: relative; padding-bottom: 26px; }

.capture {
  margin: 0;
  padding: clamp(20px, 4.4vw, 30px);
  border: 1px solid rgba(169, 203, 178, .18);
  border-radius: var(--r-sheet);
  background:
    linear-gradient(158deg, rgba(169, 203, 178, .1), rgba(12, 35, 19, .35));
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
  max-width: 420px;
}

.capture__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.capture__space { font-weight: 600; color: var(--cream); }
.capture__live { display: inline-flex; align-items: center; color: var(--sage); }

.dial { display: block; width: 100%; height: auto; margin: 12px auto 4px; max-width: 300px; }
.dial__field { fill: rgba(255, 255, 255, .022); stroke: rgba(169, 203, 178, .12); stroke-width: 1; }
.dial__track { fill: none; stroke: rgba(169, 203, 178, .3); stroke-width: 1.4; stroke-dasharray: 1 7; stroke-linecap: round; }
.dial__ticks path { stroke: rgba(169, 203, 178, .45); stroke-width: 1.6; stroke-linecap: round; }
.dial__wall { fill: none; stroke-width: 9; stroke-linecap: round; }
.dial__wall.is-done { stroke: var(--gold); }
.dial__wall.is-next { stroke: rgba(169, 203, 178, .55); stroke-dasharray: 2 11; }
.dial__needle {
  transform-box: view-box;
  transform-origin: 120px 120px;
  transform: rotate(-90deg);
}
.dial__needle-inner {
  transform-box: view-box;
  transform-origin: 120px 120px;
  animation: sway 5.5s ease-in-out infinite;
}
.dial__needle path { fill: var(--cream); }
.dial__needle .dial__needle-tail { fill: rgba(169, 203, 178, .45); }
.dial__hub { fill: var(--gold); }
.dial__card {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-anchor: middle;
  fill: rgba(169, 203, 178, .85);
}
.dial__card.is-next { fill: var(--gold); }

@keyframes sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}

.capture__status {
  margin-top: 10px;
  text-align: center;
  font-size: .875rem;
  color: rgba(169, 203, 178, .88);
}
.capture__status strong {
  display: block;
  font-family: var(--font-display-text);
  font-variation-settings: "opsz" 60, "WONK" 1;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--cream);
}

.capture__walls {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}
.capture__walls li {
  flex: 1;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 600;
}
.capture__walls .is-done {
  border: 1px solid rgba(226, 184, 87, .5);
  background: rgba(226, 184, 87, .14);
  color: var(--gold);
}
.capture__walls .is-next {
  border: 1px dashed rgba(169, 203, 178, .45);
  color: rgba(169, 203, 178, .8);
}

.capture__chip {
  position: absolute;
  left: clamp(4px, 3vw, 22px);
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--forest);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
  transform: rotate(-1.6deg);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
  }
  .capture { margin-left: auto; transform: rotate(1.2deg); }
  .capture__chip { left: -8px; bottom: 14px; }
}

/* ---------- what happens in the room ---------- */

.room {
  padding: clamp(64px, 11vw, 128px) var(--gutter);
  background: var(--cream);
  color: var(--ink-green);
}

.room__grid { max-width: var(--wrap); margin: 0 auto; display: grid; gap: clamp(40px, 6vw, 72px); }

/* Single column on phones so step text keeps the same left rag as every other text block. */
.step {
  display: grid;
  grid-template-columns: 1fr;
  padding: 26px 0;
  border-top: 1px solid rgba(27, 64, 40, .18);
}
.step:last-child { border-bottom: 1px solid rgba(27, 64, 40, .18); }

.step__num {
  margin-bottom: 6px;
  font-family: var(--font-display-text);
  font-variation-settings: "opsz" 72, "WONK" 1;
  font-style: italic;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--green-dark);
}

.step__title {
  font-family: var(--font-display-text);
  font-variation-settings: "opsz" 48, "WONK" 1;
  font-size: clamp(1.22rem, 3.4vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--forest);
}
.step p { margin-top: 11px; max-width: 58ch; color: rgba(15, 42, 24, .78); }

/* Quoted app copy, set in the display italic — Instrument Sans has no italic in the subset,
   so this avoids a synthesised oblique. */
.step em {
  font-family: var(--font-display-text);
  font-variation-settings: "opsz" 48, "WONK" 1;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--green-dark);
}

/* Two classes deep on purpose: `.step p` (0,1,1) would otherwise win on margin and colour. */
.step .step__chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 8px 16px 8px 14px;
  border: 1px solid rgba(27, 64, 40, .18);
  border-radius: var(--r-pill);
  background: rgba(27, 64, 40, .045);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--forest);
}
.wave { width: 84px; height: 18px; display: block; }
.wave rect { fill: rgba(27, 64, 40, .45); }
.wave rect.is-loud { fill: var(--gold-hi); }

@media (min-width: 640px) {
  .step { grid-template-columns: 84px 1fr; gap: 0 12px; padding: 32px 0; }
  .step__num { margin-bottom: 0; padding-top: 4px; }
  .step__body { grid-column: 2; }
}

@media (min-width: 1024px) {
  .room__grid { grid-template-columns: .82fr 1.18fr; }
  .room__intro { position: sticky; top: 56px; align-self: start; }
}

/* ---------- what you leave with ---------- */

.output {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 11vw, 122px) var(--gutter);
  background-image:
    radial-gradient(50% 46% at 88% 4%, rgba(2, 140, 29, .16), transparent 70%),
    linear-gradient(158deg, #0F2A18, #0C2313);
}
.output::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .04;
  pointer-events: none;
}

.output__head { max-width: var(--wrap); margin: 0 auto; }

.output__list {
  max-width: var(--wrap);
  margin: clamp(38px, 6vw, 62px) auto 0;
  display: grid;
  gap: clamp(34px, 4.6vw, 44px);
}

.out { padding-top: 24px; border-top: 1px solid rgba(226, 184, 87, .36); }

/* Small concrete artefacts, drawn in the compass dial's hairline language. */
.out__art { display: block; width: 84px; height: 62px; }
.out__art .ln { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.out__art .ln-soft { fill: none; stroke: rgba(169, 203, 178, .5); stroke-width: 1.6; stroke-linecap: round; }
.out__art .fill-gold { fill: var(--gold); }
.out__art .fill-soft { fill: rgba(169, 203, 178, .5); }

.out__title {
  margin-top: 20px;
  font-family: var(--font-display-text);
  font-variation-settings: "opsz" 48, "WONK" 1;
  font-size: clamp(1.22rem, 3.2vw, 1.44rem);
  letter-spacing: -.012em;
  color: var(--cream);
}
.out p { margin-top: 10px; color: rgba(169, 203, 178, .84); font-size: .95rem; }

@media (min-width: 860px) {
  .output__list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* ---------- coming soon ---------- */

.soon {
  padding: clamp(66px, 12vw, 132px) var(--gutter);
  background: linear-gradient(158deg, var(--beige), var(--beige-dark));
  color: var(--near-black);
}

.soon__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: clamp(44px, 7vw, 72px);
  align-items: center;
}

.soon__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(2.4rem, 8.6vw, 4.6rem);
  line-height: .99;
  letter-spacing: -.026em;
  color: var(--deep);
}
.soon__title em { color: var(--green-dark); }

.soon__body {
  margin-top: 26px;
  max-width: 50ch;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
  color: rgba(31, 31, 31, .82);
}

/* Flat text, not pills — these are statements of intent, not tappable store badges.
   No `text-transform: uppercase` either: it would render "iOS" as "IOS". */
.soon__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 28px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--forest);
}
.soon__platforms li + li::before {
  content: "·";
  margin-right: 16px;
  color: rgba(27, 64, 40, .5);
}

/* Closing dial — the hero's compass again, but all four walls captured. */
.soon__dial { justify-self: center; width: min(100%, 340px); }
.closing { display: block; width: 100%; height: auto; }
.closing__track { fill: none; stroke: rgba(27, 64, 40, .3); stroke-width: 1.4; stroke-dasharray: 1 7; stroke-linecap: round; }
.closing__wall { fill: none; stroke: var(--green-dark); stroke-width: 9; stroke-linecap: round; }
.closing__pip { fill: var(--gold-hi); }
.closing__mark { color: var(--forest); }
.closing__card {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-anchor: middle;
  fill: rgba(27, 64, 40, .55);
}

@media (min-width: 900px) {
  .soon__inner { grid-template-columns: 1.04fr .96fr; }
}

/* ---------- footer ---------- */

.foot {
  padding: clamp(34px, 5vw, 46px) var(--gutter);
  background: var(--deep);
  border-top: 1px solid rgba(169, 203, 178, .14);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.wordmark--foot { height: 22px; }
.foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: .8rem;
  color: rgba(169, 203, 178, .72);
}

/* ---------- reveal ---------- */

/* `.is-out` is only ever added by main.js — see the note at the top of that file. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.22, .7, .3, 1); }
  .reveal.is-out { opacity: 0; transform: translateY(20px); }
  .step.reveal:nth-child(2) { transition-delay: .07s; }
  .step.reveal:nth-child(3) { transition-delay: .14s; }
  .step.reveal:nth-child(4) { transition-delay: .21s; }
  .out.reveal:nth-child(2) { transition-delay: .09s; }
  .out.reveal:nth-child(3) { transition-delay: .18s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}