/* ==========================================================================
   Bunvi — bunvi.app
   --------------------------------------------------------------------------
   Every colour, radius and type decision below is lifted from the app's own
   design system (Bunvi/Bunvi/Design/Theme.swift). The site is not "on brand";
   it is drawn from the same tokens the phone is, so the two cannot drift.

   Each token is a light/dark pair, exactly as in Theme.swift, where the
   comment reads: "dark mode is not a second stylesheet — it is the same
   stylesheet asked a different question."

   No framework, no build step, no webfont. The app's face is SF Rounded; on
   Apple hardware `ui-rounded` IS that face, which is most of why the page
   feels like the product. Elsewhere it degrades to the platform's own UI font
   rather than to a download that blocks the first paint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Ground — warm cream easing into a cool pale lilac. */
  --cream:      #FDF7F3;
  --lilac:      #F2F0F9;

  /* Ink */
  --ink:        #0A0A0D;
  --ink-muted:  #6B6B75;
  /* The app's own faint ink is #A8A8B2, and on a phone held at arm's length
     it is fine. On a web page it measures 2.2:1 against this ground, which is
     below the 4.5:1 a 12px label needs — and eyebrows, captions and small
     print are all drawn in it. Measured against cream, lilac, white and the
     sunken panel, #6B6B75 is the lightest value that clears 4.5:1 on all
     four, so that is what the third tier is here. The hierarchy is carried by
     size, weight and letter-spacing instead, which it mostly was anyway. */
  --ink-faint:  #6B6B75;

  /* Surfaces */
  --surface:    #FFFFFF;
  --sunken:     #F4F2F7;
  --separator:  #EDEDF1;
  --hairline:   #E4E4EA;

  /* Accent — deep electric indigo */
  --accent:     #4A1FE0;
  --accent-ink: #4A1FE0;
  --accent-wash: rgba(74, 31, 224, 0.08);
  --accent-edge: rgba(74, 31, 224, 0.16);

  /* Semantic — the flame is always warm; a green fire reads as wrong. */
  --flame:      #F97A1F;
  --carbs:      #F2455E;
  --protein:    #F5A524;
  --fat:        #C13BE0;
  --water:      #2E7DF7;
  --success:    #1FA855;

  /* Elevation */
  --shadow-card: 0 6px 18px rgba(26, 26, 46, 0.06);
  --shadow-lift: 0 14px 44px rgba(26, 26, 46, 0.10);
  --shadow-deep: 0 34px 90px rgba(26, 26, 46, 0.16);
  --shadow-btn:  0 10px 26px rgba(74, 31, 224, 0.26);

  /* Radii — cardRadius 22, sheetRadius 30, scaled for a larger canvas */
  --r-sm:   12px;
  --r-md:   18px;
  --r-card: 24px;
  --r-lg:   32px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* Rhythm */
  --shell:  1180px;
  --narrow: 780px;
  --gutter: clamp(20px, 5vw, 44px);
  --band:   clamp(84px, 10.5vw, 160px);

  /* Type */
  --face: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.72, 0.28, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:      #0C0B10;
    --lilac:      #141119;
    --ink:        #F7F7FA;
    --ink-muted:  #9C9CA6;
    --ink-faint:  #9C9CA6;   /* see the note in the light block */
    --surface:    #1B1A21;
    --sunken:     #121118;
    --separator:  #2B2A33;
    --hairline:   #33323C;
    --accent:     #7A5AF8;
    --accent-ink: #A48BFF;
    --accent-wash: rgba(122, 90, 248, 0.12);
    --accent-edge: rgba(122, 90, 248, 0.24);
    --flame:      #FF9440;
    --carbs:      #FF6A80;
    --protein:    #FFC04D;
    --fat:        #DA6BF5;
    --water:      #5C9CFF;
    --success:    #4ADE80;
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.34);
    --shadow-lift: 0 14px 44px rgba(0, 0, 0, 0.44);
    --shadow-deep: 0 34px 90px rgba(0, 0, 0, 0.58);
    --shadow-btn:  0 10px 26px rgba(122, 90, 248, 0.28);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--face);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The page's ground: the app's own gradient, fixed so it does not scroll
   away, plus a faint paper grain. The grain is almost invisible on purpose —
   it is there so a very large flat area does not band on an OLED panel. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(176deg, var(--cream) 0%, var(--cream) 24%, var(--lilac) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: 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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

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

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

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-weight: 700;
  transition: top 0.18s var(--ease);
}
.skip:focus { top: 12px; text-decoration: none; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}

.t-hero {
  font-size: clamp(2.75rem, 7.4vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.97;
}
.t-section {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: -0.034em;
  line-height: 1.03;
}
.t-sub {
  font-size: clamp(1.32rem, 2.3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.18;
}
.t-lede {
  font-size: clamp(1.09rem, 1.45vw, 1.3rem);
  line-height: 1.56;
  color: var(--ink-muted);
  font-weight: 450;
  text-wrap: pretty;
  margin: 0;
}
.t-body { margin: 0; color: var(--ink-muted); text-wrap: pretty; }
.t-body + .t-body { margin-top: 1em; }

/* Sections do not carry a kicker above the heading. The heading is large and
   heavy enough to open a section on its own, and a small tracked-out line in
   front of it was competing with it rather than introducing it.

   `.label` is what survived: it names the panel directly beneath it — a block
   of typed input, a list of sources — and it is set as a quiet small heading
   rather than a rule with words after it. */
.label {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink-muted);
}

strong, b { font-weight: 700; color: var(--ink); }
.accent { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--narrow); }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: calc(var(--band) * 0.62); }

/* A hairline between bands, fading out at both ends so it reads as a seam
   rather than a rule drawn across the page. */
.band--seam::before {
  content: "";
  position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%,
                              var(--hairline) 82%, transparent);
}

.grid { display: grid; gap: clamp(24px, 3.4vw, 46px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
}
/* For a row whose picture is much taller than its prose. Centring there
   leaves the text stranded halfway down a phone. */
.grid--split.is-top { align-items: start; }
.grid--split-r { direction: rtl; }
.grid--split-r > * { direction: ltr; }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split, .grid--split-r { grid-template-columns: minmax(0, 1fr); direction: ltr; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 18px); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -0.012em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.975); }

.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(74,31,224,0.3); }

.btn--ghost {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn--quiet {
  background: transparent; color: var(--ink-muted);
  padding-inline: 4px;
}
.btn--quiet:hover { color: var(--ink); }

.btn[aria-disabled="true"] {
  cursor: default; opacity: 1;
  background: var(--sunken); color: var(--ink-muted); box-shadow: none;
}
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}

/* The download button. The Apple mark sits slightly high in its own box, so
   it is nudged down rather than baseline-aligned with the label. */
.btn--store svg {
  width: 19px; height: 19px; margin-top: 1px; flex: 0 0 auto;
}

/* A note under the buttons, the size the App Store prints its own small print */
.fineprint {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   6. Chrome — the bar and the footer
   -------------------------------------------------------------------------- */

.bar {
  position: sticky; top: 0; z-index: 60;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
.bar.is-stuck {
  background: color-mix(in srgb, var(--cream) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--hairline);
}
.bar__in {
  display: flex; align-items: center; gap: 18px;
  height: 74px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -0.035em;
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 34px; height: 34px; border-radius: 10px; }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* :not(.btn) matters. `.nav a` outweighs `.btn--primary` on specificity, so
   without it the one button in the bar loses its white label and draws muted
   grey on indigo — unreadable, and on the page's main call to action. */
.nav a:not(.btn) {
  padding: 9px 14px; border-radius: var(--r-pill);
  color: var(--ink-muted); font-weight: 600; font-size: 0.96rem;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--accent-wash); text-decoration: none; }
.nav .btn { margin-left: 8px; padding: 11px 20px; font-size: 0.97rem; }

@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
}

.foot {
  padding-block: clamp(56px, 7vw, 88px) 44px;
  border-top: 1px solid var(--hairline);
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 860px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot__top { grid-template-columns: minmax(0, 1fr); } }

.foot h3 {
  font-size: 0.765rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: 11px; }
.foot li a { color: var(--ink-muted); font-weight: 550; }
.foot li a:hover { color: var(--ink); }

.foot__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  color: var(--ink-faint); font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   7. Surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 2.6vw, 32px);
}
.card--edge { box-shadow: none; border: 1px solid var(--hairline); }
.card--sunken { background: var(--sunken); box-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 0.83rem; font-weight: 700; letter-spacing: -0.005em;
}
.chip--quiet { background: var(--sunken); color: var(--ink-muted); }

.icon {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent-wash); color: var(--accent-ink);
}
.icon svg { width: 21px; height: 21px; }
.icon--flame   { background: color-mix(in srgb, var(--flame) 13%, transparent);   color: var(--flame); }
.icon--water   { background: color-mix(in srgb, var(--water) 13%, transparent);   color: var(--water); }
.icon--carbs   { background: color-mix(in srgb, var(--carbs) 13%, transparent);   color: var(--carbs); }
.icon--protein { background: color-mix(in srgb, var(--protein) 15%, transparent); color: var(--protein); }
.icon--fat     { background: color-mix(in srgb, var(--fat) 13%, transparent);     color: var(--fat); }
.icon--success { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }

/* A feature tile: icon, title, one paragraph. Never more. */
.tile { display: flex; flex-direction: column; gap: 14px; }
.tile h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.02em; }
.tile p { margin: 0; color: var(--ink-muted); font-size: 0.995rem; line-height: 1.56; }

/* --------------------------------------------------------------------------
   8. Screenshots
   --------------------------------------------------------------------------
   One component for two states. `.shot` holds a real capture; `.shot--todo`
   draws a labelled placeholder at exactly the same size, so swapping one for
   the other is a one-line change and the layout never moves.
   -------------------------------------------------------------------------- */

.shot {
  position: relative;
  /* A phone is about 7 cm across. Drawn 520 px wide next to a paragraph it
     stops reading as a device and starts reading as a poster, and it drags
     every split layout out of balance because the column beside it is a
     third of its height. Capped and centred in whatever cell it lands in. */
  width: 100%;
  max-width: 372px;
  margin-inline: auto;
  border-radius: clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  background: var(--sunken);
  box-shadow: var(--shadow-deep),
              0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  aspect-ratio: 1320 / 2868;
  isolation: isolate;
}
.shot picture { display: contents; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Cropped to the top of the screen, for a row where the full phone would
   force the section to be three thousand pixels tall. */
.shot--crop { aspect-ratio: 1320 / 1600; max-width: 400px; }
.shot--crop img { object-position: top; }

/* A device on a home or lock screen is a different shape from an app capture. */
.shot--device { aspect-ratio: 603 / 1311; max-width: 264px; }

.shot--todo {
  display: grid; place-items: center;
  padding: 28px;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--ink) 3%, transparent) 14px 15px),
    var(--sunken);
  box-shadow: none;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.shot__todo {
  text-align: center; max-width: 30ch;
}
.shot__todo b {
  display: block;
  font-size: 0.95rem; font-weight: 700; color: var(--ink-muted);
  letter-spacing: -0.01em;
}
.shot__todo code {
  display: inline-block; margin-top: 10px; max-width: 100%;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5;
  color: var(--ink-faint);
  background: var(--surface);
  padding: 4px 9px; border-radius: 7px;
  /* break-all split "…detail.png" across the dot, which reads as a typo.
     anywhere still breaks a long path, but prefers the slashes. */
  overflow-wrap: anywhere;
}
.shot__todo span {
  display: block; margin-top: 12px;
  font-size: 0.8rem; color: var(--ink-faint); line-height: 1.45;
}

.shot-cap {
  margin: 16px 2px 0;
  font-size: 0.875rem; color: var(--ink-faint); text-align: center;
}

/* Two phones, the second lifted and overlapping, for a section that needs to
   show a flow rather than a screen. */
.shot-pair {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}
.shot-pair > :nth-child(2) { margin-top: clamp(26px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   9. The typed line
   --------------------------------------------------------------------------
   What somebody actually writes into Bunvi, set in mono and typed out once
   when it scrolls into view. Real text rather than a picture of text, so it
   stays sharp, reads to a screen reader and can be selected and copied.
   -------------------------------------------------------------------------- */

/* A typed line, for the "you just write it" beat. */
.typeline {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.typeline .caret {
  display: inline-block; width: 2px; height: 1.05em;
  vertical-align: text-bottom; margin-left: 1px;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typeline .caret { animation: none; } }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(34px, 5vw, 76px) clamp(56px, 7vw, 104px); }

.hero__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
}
/* No width cap on this column. `ch` resolves against the element's own font
   size, and this block inherits body copy — so a cap written for the headline
   measured about 200px and put one word on each line. The grid column is the
   constraint; nothing else needs to be. */
.hero__words .t-lede { max-width: 44ch; }

@media (max-width: 940px) {
  /* The sentence is what has to land on a small screen, so the video goes
     under it rather than beside it. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__words { max-width: none; text-align: center; }
  .hero__words .t-lede { max-width: 54ch; margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
  .hero .fineprint { text-align: center; }
}

/* The video. It is a decorative loop of the product, so it carries no audio
   track, no controls chrome by default, and an explicit label. */
.reel {
  position: relative;
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  background: var(--sunken);
  box-shadow: var(--shadow-deep),
              0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
@media (max-width: 940px) {
  .reel { margin-top: clamp(34px, 5vw, 56px); max-width: 460px; margin-inline: auto; }
}

.reel video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Shown when no video file is present, when it fails to load, or when the
   visitor has asked for reduced motion and there is no poster to fall back
   on. Same box, same radius: the layout does not move either way. */
.reel__todo {
  position: absolute; inset: 0;
  display: none; place-items: center;
  padding: 32px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 16px,
      color-mix(in srgb, var(--ink) 3%, transparent) 16px 17px),
    var(--sunken);
}
.reel.is-missing .reel__todo { display: grid; }
.reel.is-missing video { visibility: hidden; }
.reel__todo b {
  display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink-muted);
}
.reel__todo code {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint);
  background: var(--surface);
  padding: 5px 11px; border-radius: 8px;
}
.reel__todo span {
  display: block; margin-top: 14px; max-width: 46ch;
  font-size: 0.85rem; color: var(--ink-faint); line-height: 1.5;
}

/* One control, bottom right. It appears only once a video is actually
   playing, because a pause button over a still frame is a lie. */
.reel__toggle {
  position: absolute; right: 16px; bottom: 16px;
  display: none; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, #0A0A0D 54%, transparent);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.reel.is-live .reel__toggle { display: grid; }
.reel__toggle:hover { transform: scale(1.06); background: color-mix(in srgb, #0A0A0D 70%, transparent); }
.reel__toggle svg { width: 17px; height: 17px; }
.reel__toggle .i-pause { display: block; }
.reel__toggle .i-play  { display: none; }
.reel.is-paused .reel__toggle .i-pause { display: none; }
.reel.is-paused .reel__toggle .i-play  { display: block; }

/* --------------------------------------------------------------------------
   11. Sourcing
   -------------------------------------------------------------------------- */

.tiers { counter-reset: tier; display: grid; gap: 14px; }
.tier {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.tier::before {
  counter-increment: tier;
  content: counter(tier);
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-weight: 800; font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.tier h3 { font-size: 1.03rem; font-weight: 700; letter-spacing: -0.018em; }
.tier p { margin: 6px 0 0; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; }
.tier .chip--quiet { margin-top: 10px; }

/* The source row, drawn the way the app's Source card is. */
.source {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-weight: 650;
}
.source + .source { margin-top: 10px; }
.source__dot {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-ink);
}
.source__dot svg { width: 15px; height: 15px; }
.source small { margin-left: auto; color: var(--ink-faint); font-weight: 600; font-size: 0.8rem; }

/* The confidence readout. */
.confidence {
  display: flex; align-items: center; gap: 18px;
}
.confidence__ring { width: 68px; height: 68px; flex: 0 0 auto; }
.confidence__ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.confidence__ring .track { stroke: var(--separator); }
.confidence__ring .fill  { stroke: var(--success); transform: rotate(-90deg); transform-origin: 50% 50%; }
.confidence__n {
  font-size: 1.12rem; font-weight: 800; fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.confidence b { display: block; font-size: 1.02rem; }
.confidence span { display: block; color: var(--ink-muted); font-size: 0.93rem; margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. Measured vs calculated
   -------------------------------------------------------------------------- */

.ledger { display: grid; gap: 10px; }
.ledger__row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 18px; border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.ledger__row dt { flex: 1 1 auto; color: var(--ink-muted); font-size: 0.95rem; margin: 0; }
.ledger__row dd {
  margin: 0; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.ledger__tag {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.ledger__tag--stated {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: color-mix(in srgb, var(--success) 45%, var(--ink));
}
.ledger__tag--calc {
  background: var(--accent-wash); color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   13. Pull quote
   -------------------------------------------------------------------------- */

.pull {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.16;
  text-wrap: balance;
}
.pull cite {
  display: block; margin-top: 22px;
  font-size: 0.95rem; font-style: normal; font-weight: 600;
  color: var(--ink-faint); letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   14. Founder
   -------------------------------------------------------------------------- */

.founder__mark {
  width: min(230px, 62vw); height: auto; aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-lift);
  padding: clamp(18px, 2.4vw, 28px);
}

/* --------------------------------------------------------------------------
   15. Journey
   -------------------------------------------------------------------------- */

.reelcard {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
a.reelcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); text-decoration: none; }
.reelcard__thumb {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--ink) 3%, transparent) 14px 15px),
    var(--sunken);
  color: var(--ink-faint);
  position: relative;
}
.reelcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.reelcard__play {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--accent-ink);
}
.reelcard__play svg { width: 18px; height: 18px; margin-left: 2px; }
.reelcard__body { padding: 20px 22px 22px; }
.reelcard__body b { display: block; font-weight: 700; letter-spacing: -0.018em; }
.reelcard__body span { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 0.92rem; }
.reelcard__thumb code {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  background: var(--surface);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. Price
   -------------------------------------------------------------------------- */

.plans { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan {
  padding: 26px 28px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.plan--best { box-shadow: var(--shadow-lift), 0 0 0 2px var(--accent-edge); }
.plan__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-faint);
}
.plan__name .chip {
  padding: 4px 10px; font-size: 0.68rem;
  letter-spacing: 0.06em; white-space: nowrap;
}
.plan__price {
  margin: 14px 0 4px;
  font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.plan__price small { font-size: 0.42em; font-weight: 700; color: var(--ink-faint); letter-spacing: -0.01em; }
.plan p { margin: 0; color: var(--ink-muted); font-size: 0.93rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-muted); }
.ticks svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--success); }
.ticks b { color: var(--ink); }

/* --------------------------------------------------------------------------
   17. Closing call
   -------------------------------------------------------------------------- */

.call {
  border-radius: var(--r-xl);
  padding: clamp(42px, 6vw, 82px) var(--gutter);
  text-align: center;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
.call::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-wash), transparent 70%);
  pointer-events: none;
}
.call > * { position: relative; }
.call .btn-row { justify-content: center; margin-top: 30px; }

/* --------------------------------------------------------------------------
   18. Motion
   --------------------------------------------------------------------------
   One effect, used everywhere, so nothing on the page moves in a way nothing
   else does. Elements are visible by default and only hidden once the script
   confirms it can reveal them — a page with JavaScript off shows everything.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Printing, and any context that does not run the observer, gets the page
   as written rather than a stack of blank sections. */
@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bar, .reel__toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, a.reelcard:hover { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */

.center { text-align: center; }
.center .t-lede { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: clamp(34px, 4vw, 54px); }
.dim { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }