/* ============================================================
   Bina — the marketing site's stylesheet.

   Lifted verbatim out of index.html on 2026-09-26, when the single long page
   became six. Nothing was rewritten in the move: every rule here is one that
   was already shipping, so a regression in this file is a regression I
   introduced by hand, not by extraction.

   Loaded by index, binafit, binalaga, binaraket, tour and pricing. The four
   legal/help pages (faq, guide, privacy, terms) keep their own smaller sheet
   -- they define .wrap and header.top differently and merging them would be a
   redesign, not a refactor.
   ============================================================ */


  /* ---------- tokens: layout ---------- */
  :root {
    --space-xs: 0.25rem;  --space-s: 0.375rem; --space-sm: 0.5rem;
    --space-m:  0.75rem;  --space-l: 1.125rem; --space-xl: 1.5rem;
    --section-s: 2rem;  --section-sm: 2.5rem; --section-m: 3.75rem;
    --section-l: 5rem;  --section-xl: 7.5rem;

    --ground:      #0d0b09;
    --panel:       #17130f;
    --panel-2:     #1e1812;
    --line:        rgba(243,237,228,0.10);
    --line-strong: rgba(243,237,228,0.22);
    --ink:         #f3ede4;
    --ink-dim:     #a89e92;
    --ink-faint:   #6f665c;
    --accent:      #c9a24a;
    --accent-ink:  #1a1310;
    --binafit:     #c65d2e;
    --binalaga:    #9c3a30;
    --binaraket:   #4f8a6b;

    --font-ui:   'Sora', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --dur-state: 150ms; --dur-ui: 250ms; --dur-enter: 400ms; --dur-hero: 800ms;
    --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
    --dist: 16px;
  }
  @media (min-width: 768px) {
    :root {
      --space-s: 0.5rem;  --space-sm: 0.625rem; --space-m: 0.875rem;
      --space-l: 1.125rem; --space-xl: 1.625rem;
      --section-s: 2.25rem; --section-sm: 3.125rem; --section-m: 4.375rem;
      --section-l: 6.25rem; --section-xl: 9.375rem;
    }
  }
  @media (min-width: 1024px) {
    :root {
      --space-s: 0.5rem;  --space-sm: 0.75rem; --space-m: 1rem;
      --space-l: 1.25rem; --space-xl: 1.75rem;
      --section-s: 2.5rem; --section-sm: 3.75rem; --section-m: 5rem;
      --section-l: 7.5rem; --section-xl: 11.25rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img, svg { max-width: 100%; display: block; }

  .wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
  @media (min-width: 768px) { .wrap { padding-left: var(--section-s); padding-right: var(--section-s); } }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  @media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, 1fr); } }

  .mono { font-family: var(--font-mono); }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }


  /* ---------- 21:12 — the film ----------
     The hero's clock is the page's spine: each section is stamped with the
     hour it happens in, so the page reads as one week rather than a feature
     list. This is the section that has to land, so it gets the widest
     measure and the only moving image on the page. */
  .reel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .reel-inner {
    display: grid; grid-template-columns: 1fr; gap: var(--section-s);
    padding-top: var(--section-l); padding-bottom: var(--section-l);
    align-items: center;
  }
  @media (min-width: 900px) { .reel-inner { grid-template-columns: 1fr 0.82fr; gap: var(--section-m); } }
  .reel-copy { max-width: 34ch; }
  .reel-copy .clock { color: var(--binafit); }
  .reel-head {
    font-weight: 600; font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 0.94; letter-spacing: -0.03em; margin: var(--space-m) 0 var(--space-l);
    text-wrap: balance;
  }
  .reel-head em { font-style: normal; color: var(--ink-faint); }
  .reel-body { color: var(--ink-dim); font-size: 1.0625rem; line-height: 1.55; margin-bottom: var(--space-l); }
  .reel-body + .reel-body { margin-bottom: 0; }
  .reel-body b { color: var(--ink); font-weight: 500; }
  .reel-video {
    width: 100%; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--ground); display: block;
  }
  .reel-cap {
    display: flex; align-items: center; gap: var(--space-sm);
    margin-top: var(--space-m); font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  }

  /* ---------- both sides of the same minute ----------
     Two columns that share a row: the same event, what it does for each of
     them. A feature list says what the software has; this says who it helps,
     which is the thing a trainer is actually deciding about. */
  .sides { display: grid; gap: 0; margin-top: var(--section-s); }
  .sides-head {
    display: none; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
    padding-bottom: var(--space-m); border-bottom: 1px solid var(--line-strong);
  }
  @media (min-width: 820px) {
    .sides-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-xl); }
    .sides-head .you { color: var(--binafit); }
  }
  .side-row {
    display: grid; grid-template-columns: 1fr; gap: var(--space-m);
    padding: var(--space-xl) 0; border-bottom: 1px solid var(--line);
  }
  @media (min-width: 820px) {
    .side-row { grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-xl); align-items: start; padding: var(--section-s) 0; }
  }
  .side-when {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
    color: var(--ink-dim); margin-bottom: var(--space-s);
  }
  .side-what { font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
  .side-cell { color: var(--ink-dim); font-size: 0.9375rem; line-height: 1.5; }
  .side-cell b { color: var(--ink); font-weight: 500; }
  .side-cell .who {
    display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-s);
  }
  @media (min-width: 820px) { .side-cell .who { display: none; } }
  .side-cell.you b { color: var(--binafit); }

  /* ---------- what the new screens actually look like ---------- */
  .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); margin-top: var(--section-s); }
  @media (min-width: 900px) { .shots { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); } }
  .shot { min-width: 0; }
  .shot .phone-frame { aspect-ratio: 390 / 560; }
  .shot figcaption {
    margin-top: var(--space-m); font-size: 0.875rem; color: var(--ink-dim); line-height: 1.4;
  }
  .shot figcaption b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }

  /* ---------- the note ---------- */
  .note-band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .note-inner { max-width: 46rem; margin-left: auto; margin-right: auto; padding-top: var(--section-l); padding-bottom: var(--section-l); }
  .note-body { font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.6; color: var(--ink-dim); margin-bottom: var(--space-l); }
  .note-body b { color: var(--ink); font-weight: 500; }
  .note-body:first-of-type { color: var(--ink); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35; letter-spacing: -0.015em; }
  .note-sign {
    margin-top: var(--section-s); padding-top: var(--space-l); border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .note-sign b { display: block; color: var(--ink); font-family: var(--font-ui); font-size: 1rem;
    letter-spacing: -0.01em; text-transform: none; margin-bottom: 2px; }

  /* ---------- top bar ---------- */
  header.top {
    position: sticky; top: 0; z-index: 20;
    background: rgba(13,11,9,0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  main section { scroll-margin-top: 88px; }
  .top-row {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-l); padding-bottom: var(--space-l);
  }
  .brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
  .brand-word { font-weight: inherit; }
  .brand span { color: var(--accent); }
  .top-cta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    white-space: nowrap;
  }

  /* ---------- opening: the app itself, the clock ticks — frame break #1 ----
     The second column is the real BinaFit app in a phone frame, not the mark:
     a trainer deciding in eight seconds wants to see the thing, and the
     animated B moved to the top bar so the signature move still fires on
     load. Below 900px the headline needs the full measure and the phone
     stacks underneath. */
  .hero { padding-top: var(--section-m); padding-bottom: var(--section-l); }
  .hero .eyebrow { margin-bottom: var(--space-l); }
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--section-s); align-items: center; }
  @media (min-width: 900px) {
    .hero-inner { grid-template-columns: 1fr 22rem; gap: var(--section-m); }
  }
  .hero-demo { width: 100%; max-width: 22rem; justify-self: center; }
  .hero-demo .screen-cap { margin-top: var(--space-m); }
  .hero-demo .screen-cap .eyebrow { margin-bottom: 0; }
  /* The Malay line: the one place on the page the house language is spoken,
     not translated. Mono, like every other label, so it reads as a caption
     to the English rather than a second headline competing with it. */
  .hero-my {
    font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.02em;
    color: var(--accent); margin: var(--space-l) 0 0 0;
  }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l) var(--space-xl); margin-top: var(--section-s); }
  .btn {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    background: var(--accent); color: var(--accent-ink); text-decoration: none;
    border-radius: 4px; font-weight: 600; font-size: 0.9375rem;
    padding: 0 var(--space-xl); height: 3rem;
    transition: opacity var(--dur-state) var(--ease);
  }
  .btn:hover { opacity: 0.85; }
  .btn .arrow { transition: transform var(--dur-ui) var(--ease); }
  .btn:hover .arrow { transform: translateX(3px); }
  .hero-link {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  }
  h1.wall {
    font-weight: 700;
    /* Smaller than the old type wall: this headline is longer and now shares
       the row with a 290px mark. */
    font-size: clamp(2.5rem, 7.4vw, 5.25rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0;
  }
  h1.wall span { display: block; }
  h1.wall em { font-style: normal; color: var(--accent); }
  .hero-sub {
    max-width: 46rem;
    margin-top: var(--section-s);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-dim);
  }

  /* the clock — the second move, sequenced after the mark settles */
  .clock { color: var(--ink); }
  .clock .min { display: inline-block; }
  @keyframes tickOut { to { opacity: 0; transform: translateY(-7px); } }
  @keyframes tickIn  { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .clock .min.out { animation: tickOut 180ms var(--ease) both; }
  .clock .min.in  { animation: tickIn 260ms var(--ease-out) both; }

  /* ---- signature move: seven blocks assembling into the letter ----
     Spine drops, bowls slide in behind it, then the counters and mortar joints
     are cut out of the solid. One curve, settles at 800ms = --dur-hero. Now
     lives in the top bar at 22px, so the travel distances are scaled to the
     glyph rather than the old 290px hero size. */
  .build { width: 22px; height: auto; flex: 0 0 auto; }
  @keyframes bDrop  { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes bSlide { from { transform: translateX(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes bCut   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bJoint { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .build rect {
    animation-duration: 420ms;
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
  }
  .build .b-spine    { animation-name: bDrop;  animation-delay: 40ms; }
  .build .b-bowl-top { animation-name: bSlide; animation-delay: 110ms; }
  .build .b-bowl-bot { animation-name: bSlide; animation-delay: 180ms; }
  .build .b-cut      { animation-name: bCut;   animation-duration: 260ms; }
  .build .b-cut-top  { animation-delay: 340ms; }
  .build .b-cut-bot  { animation-delay: 390ms; }
  .build .b-joint    { animation-name: bJoint; animation-duration: 300ms;
                       transform-box: fill-box; transform-origin: left center; }
  .build .b-joint-top { animation-delay: 470ms; }
  .build .b-joint-bot { animation-delay: 520ms; }

  /* Hero text uses CSS animation, not the .reveal IntersectionObserver below —
     it is above the fold, so there is nothing to observe it entering. */
  @keyframes lineUp { from { opacity: 0; transform: translateY(var(--dist)); } to { opacity: 1; transform: none; } }
  .hero .clock, .wall span, .hero-sub, .hero-my, .hero-actions, .hero-demo {
    animation: lineUp var(--dur-enter) var(--ease) both;
  }
  .hero .clock { animation-delay: 0ms; }
  .wall span:nth-child(1) { animation-delay: 60ms; }
  .wall span:nth-child(2) { animation-delay: 150ms; }
  .hero-sub { animation-delay: 260ms; }
  .hero-my { animation-delay: 320ms; }
  .hero-actions { animation-delay: 380ms; }
  .hero-demo { animation-delay: 300ms; }
  .hero-sub b { color: var(--ink); font-weight: 600; }

  /* ---------- how it starts: three steps, a real sequence ----------
     Numbered because it is one — message, set-up, send links — not decoration.
     The "not for" row underneath rules things out instead of describing, the
     same contrast-not-adjectives rule the rest of the copy already follows. */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .steps li { display: flex; flex-direction: column; gap: var(--space-m); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-dim); }
  .steps li b { color: var(--ink); font-weight: 600; display: block; font-size: 1.0625rem; line-height: 1.3; }
  .step-n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); }
  .notfor {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-sm) var(--space-l);
    margin-top: var(--section-s);
    font-size: 0.9375rem; color: var(--ink-dim);
  }
  .notfor .dot { width: 4px; height: 4px; background: var(--line-strong); transform: rotate(45deg); flex: 0 0 auto; }

  /* ---------- proof line under pricing: honest, dated, no invented quote ---- */
  .proof { margin-top: var(--space-l); font-size: 0.875rem; color: var(--ink-faint); max-width: 34rem; }
  .proof b { color: var(--ink-dim); font-weight: 500; }

  /* ---------- seam mark: the signature divider ---------- */
  .seam {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-m);
    max-width: 22rem;
    margin: 0 auto;
  }
  .seam-l, .seam-r { flex: 1 1 auto; height: 1px; background: var(--line-strong); }
  .seam-l { transform-origin: left; }
  .seam-r { transform-origin: right; }
  .seam-dot { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: 0 0 auto; }
  .seam-wrap { padding-top: var(--section-m); padding-bottom: var(--section-m); }

  /* ---------- inset panel frame ---------- */
  section.panelled { padding-top: var(--section-m); padding-bottom: var(--section-m); }
  .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: var(--section-s);
  }
  .panel.deep { background: var(--panel-2); }

  h2.section-head em, h1.section-head em { font-style: normal; color: var(--binafit); }
  h2.section-head,
  h1.section-head {
    font-weight: 600;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: var(--space-m) 0 0 0;
    text-align: center;
  }
  .section-head-wrap { text-align: center; margin-bottom: var(--section-s); }
  .section-sub {
    max-width: 46ch; margin: var(--space-l) auto 0; color: var(--ink-dim);
    font-size: 1.0625rem; line-height: 1.5; text-align: center;
  }

  /* 404: two ways back, centred under the head */
  .notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-top: var(--space-xl); }

  /* ---------- product cards ---------- */
  .products { gap: 12px; }
  .product-card {
    grid-column: span 4;
    display: flex; flex-direction: column;
    border-top: 3px solid var(--brand-color, var(--accent));
  }
  @media (min-width: 1024px) {
    .product-card.fit { grid-column: span 4; }
    .product-card.laga { grid-column: span 4; }
    .product-card.raket { grid-column: span 4; }
  }
  .product-name { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; margin: 0; }
  .product-role { color: var(--ink-dim); margin: var(--space-sm) 0 0 0; font-size: 1rem; }
  .product-bullets { list-style: none; margin: var(--section-s) 0 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-l); }
  .product-bullets li { padding-left: var(--space-l); position: relative; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
  .product-bullets li::before {
    content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px;
    background: var(--brand-color, var(--accent)); border-radius: 1px;
  }
  .fit    { --brand-color: var(--binafit); }
  .laga   { --brand-color: var(--binalaga); }
  .raket  { --brand-color: var(--binaraket); }

  /* ---------- product screens (real UI, not a mockup) ----------
     Flexbox, not the .grid this used to share with everything else — two
     span-5 grid items in a 12-column grid auto-place into columns 1-10,
     stranding the 2 leftover columns on the right. justify-content:center
     can't fix that: every track is 1fr and already fills the row, so there's
     no grid-level slack left for it to act on. Flex centers the pair
     directly instead of fighting grid auto-placement for a two-item row. */
  .screens-video {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    scroll-margin-top: 88px;
  }
  /* Captions run to different lengths, and centring the cards on the cross
     axis pushed the three phone frames to three different heights. */
  @media (min-width: 640px) { .screens-video { align-items: flex-start; } }
  @media (min-width: 640px) { .screens-video { flex-direction: row; flex-wrap: wrap; justify-content: center; } }
  .screens-video .screen-card { width: 100%; max-width: 22rem; }
  .phone-frame {
    position: relative;
    aspect-ratio: 390 / 560;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }
  .phone-frame img, .phone-frame video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .demo-frame { width: 100%; height: 100%; border: none; display: block; }
  .screen-cap { margin-top: var(--space-l); }
  .screen-cap .eyebrow { color: var(--brand-color, var(--accent)); margin-bottom: var(--space-xs); display: flex; align-items: center; gap: 6px; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-color, var(--accent)); flex-shrink: 0; }
  .screen-cap p { margin: 0; font-size: 0.9375rem; color: var(--ink-dim); line-height: 1.5; }

  /* ---------- spec table (what it replaces / pricing) ---------- */
  .spec { border-top: 1px solid var(--line); }
  .spec-row {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-s);
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--line);
  }
  @media (min-width: 768px) {
    .spec-row { grid-template-columns: 1fr 1fr; align-items: baseline; gap: var(--space-xl); }
  }
  .spec-old { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
  .spec-new { font-size: 1.0625rem; color: var(--ink); }
  .spec-new b { color: var(--accent); font-weight: 600; }

  /* ---------- pill-grid: the client portal's cards ----------
     Deliberately rounder than anything else on the page (28px vs. the
     4px .panel / 2px button radius everywhere else) — the one section
     that gets its own shape instead of another straight-lined row. */
  .pill-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
  }
  @media (min-width: 640px) { .pill-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .pill-grid { grid-template-columns: repeat(3, 1fr); } }
  .pill-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 28px;
    padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-m);
    transition: border-color var(--dur-ui) var(--ease);
  }
  .pill-card:hover { border-color: var(--line-strong); }
  .pill-badge {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.35);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .pill-badge svg {
    width: 22px; height: 22px; fill: none; stroke: var(--accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .pill-old {
    font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--ink-faint);
    text-decoration: line-through; text-decoration-color: var(--ink-faint);
  }
  .pill-new { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink); }
  .pill-new b { color: var(--accent); font-weight: 600; }
  /* The push-notification note closes the grid without its own "was" line —
     it's plumbing behind the five features above, not a sixth pain point. */
  .pill-note { background: var(--panel-2); }
  .pill-note .pill-new { margin: auto 0; }
  .pill-note .pill-new { color: var(--ink-dim); }

  .price-row {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  @media (min-width: 768px) {
    .price-row { grid-template-columns: 10rem 1fr; gap: var(--space-xl); }
  }
  .price-tag { font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent); letter-spacing: -0.01em; }
  .price-per { font-size: 0.875rem; color: var(--ink-dim); font-weight: 400; }
  .price-desc { color: var(--ink-dim); font-size: 0.9375rem; }
  .price-desc b { color: var(--ink); font-weight: 600; }
  .price-foot { margin-top: var(--space-xl); font-size: 0.875rem; color: var(--ink-dim); max-width: 34rem; }

  /* ---------- about: left-aligned statement — frame break #3 ----------
     Every other section head on this page is centred; this one runs left and
     asymmetric on purpose, so the founder's-voice paragraph reads as a
     different kind of block rather than a third spec table. Section rhythm
     is deliberately unequal (--section-sm in, --section-l out) — uniform
     vertical padding is the strongest generic tell there is. */
  .about { padding-top: var(--section-sm); padding-bottom: var(--section-l); }
  /* Centred column, matching every other section's .section-head-wrap
     convention — capped at 44rem (the same width .about-body always read
     at) so it doesn't stretch the eyebrow/headline across the full .wrap on
     a wide monitor. Body copy stays left-aligned within that centred column:
     centring multi-sentence prose itself reads as a ragged mess, only the
     block as a whole needs to be centred. */
  .about-grid { max-width: 44rem; margin: 0 auto; text-align: center; }
  .about-statement {
    font-weight: 600;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: var(--space-m) auto var(--space-xl) auto;
    max-width: 26ch;
  }
  .about-statement em { font-style: normal; color: var(--accent); }
  .about-body { margin: 0; font-size: 1.0625rem; line-height: 1.62; color: var(--ink-dim); text-align: left; }
  .about-body + .about-body { margin-top: var(--space-l); }
  .about-body b { color: var(--ink); font-weight: 600; }

  /* ---------- order band (frame broken #2 — full-bleed accent) ---------- */
  .order-band { background: var(--accent); color: var(--accent-ink); padding: var(--section-m) 0; margin-top: var(--section-m); }
  .order-inner { text-align: center; }
  .order-head { font-weight: 700; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 var(--space-l) 0; }
  .order-sub { color: rgba(26,19,16,0.72); max-width: 34rem; margin: 0 auto var(--section-s) auto; font-size: 1rem; }
  .wa-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-l); }
  @media (min-width: 640px) { .wa-links { flex-direction: row; justify-content: center; } }
  .wa-link {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--accent-ink); text-decoration: none;
    border-bottom: 1px solid var(--accent-ink);
    padding-bottom: 3px;
    transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
  }
  .wa-link:hover { transform: translateX(3px); opacity: 0.7; }
  .wa-link .arrow { transition: transform var(--dur-ui) var(--ease); }
  .wa-link:hover .arrow { transform: translateX(3px); }

  /* ---------- email waitlist ---------- */
  .email-band { padding: var(--section-m) 0; text-align: center; }
  .email-eyebrow { margin-bottom: var(--space-m); }
  .email-form {
    display: flex; flex-direction: column; gap: var(--space-m);
    max-width: 28rem; margin: 0 auto;
  }
  @media (min-width: 560px) { .email-form { flex-direction: row; max-width: 36rem; } }
  .email-form input, .email-form select {
    flex: 1; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 4px;
    color: var(--ink); font-family: var(--font-ui); font-size: 0.9375rem;
    /* Height is fixed, so vertical padding is 0 — a native <select> with both
       a set height and vertical padding renders its label low and clips it. */
    padding: 0 var(--space-l); height: 3rem;
  }
  .email-form input:focus, .email-form select:focus { outline: none; border-color: var(--accent); }
  .email-form select { flex: 0 0 auto; min-width: 8.5rem; }
  .email-form button {
    background: var(--accent); color: var(--accent-ink); border: none; border-radius: 4px;
    font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600;
    padding: var(--space-m) var(--space-xl); height: 3rem; cursor: pointer;
    transition: opacity var(--dur-state) var(--ease);
    white-space: nowrap; flex: 0 0 auto;
  }
  .email-form button:hover { opacity: 0.85; }
  .email-form button:disabled { opacity: 0.5; cursor: default; }
  .email-note { margin-top: var(--space-l); font-size: 0.875rem; color: var(--ink-faint); min-height: 1.2em; }
  .email-note.ok { color: var(--accent); }
  .email-note.err { color: #d97757; }

  /* ---------- footer ---------- */
  footer {
    padding: var(--section-l) 0 var(--section-m) 0;
    text-align: center;
  }
  .foot-mark { display: block; width: 26px; height: auto; margin: 0 auto var(--space-l) auto; }
  .foot-brand { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: var(--space-sm); }
  .foot-tag { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

  /* contact row — same seam-dot separator already used between sections, at
     caption scale, so the footer reads as one more piece of the same system
     rather than a bolted-on template block */
  .foot-contact {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-sm) var(--space-l);
    margin-top: var(--section-s);
    font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em;
    color: var(--ink-dim);
  }
  .foot-contact a { color: var(--ink-dim); text-decoration: none; transition: color var(--dur-state) var(--ease); }
  .foot-contact a:hover { color: var(--accent); }
  .foot-contact .dot { width: 4px; height: 4px; background: var(--line-strong); transform: rotate(45deg); flex: 0 0 auto; }


  /* ---- the walkthrough: a screenshot with its parts marked ---- */
  .walk { margin: 0 0 var(--section-m); display: grid; gap: var(--section-s); }
  .walk:last-child { margin-bottom: 0; }
  .walk-shot { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
  .walk-shot img {
    display: block; width: 100%; height: auto; border-radius: 10px;
    border: 1px solid var(--line-strong); background: var(--ground);
  }
  /* Percentages, so a pin sits on the same control at any width. */
  .walk-pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--binafit); color: var(--ground);
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    line-height: 22px; text-align: center;
    box-shadow: 0 0 0 3px var(--ground);
  }
  .walk-title {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-l);
  }
  .walk-notes { margin: 0; padding: 0; list-style: none; counter-reset: walkstep; }
  .walk-notes li {
    position: relative; padding-left: 34px; margin-bottom: var(--space-l);
    font-size: 16px; line-height: 1.5; color: var(--ink-dim);
  }
  .walk-notes li::before {
    counter-increment: walkstep; content: counter(walkstep);
    position: absolute; left: 0; top: 1px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--binafit); color: var(--ground);
    font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  }
  .walk-notes li:last-child { margin-bottom: 0; }
  @media (min-width: 820px) {
    .walk { grid-template-columns: 340px 1fr; gap: var(--section-l); align-items: center; }
    .walk-shot { margin: 0; }
    .walk:nth-of-type(even) .walk-shot { order: 2; }
    .walk-notes li { font-size: 17px; }
  }


/* The UA gives <figure> 40px side margins. In a 165px column that leaves 85,
   which is what was breaking the captions under the screenshots one word to a
   line. */
figure { margin: 0; }

/* ---- the deck: six sections, one open at a time ----------------------
   The page was thirty-two phone screens and twenty of them were this. A
   segmented control rather than an accordion, because the point is choosing
   one, not opening several. */
.deck-tabs {
  /* Wrapping, not scrolling: a strip that runs off the edge hides half the
     choices from the person who was already finding this page long. */
  display: flex; flex-wrap: wrap; gap: 0 var(--space-s);
  border-bottom: 1px solid var(--line); margin-bottom: var(--section-s);
  position: sticky; top: 0; z-index: 4; background: var(--ground);
}
.deck-tabs button {
  flex: none; background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 500;
  color: var(--ink-dim); padding: var(--space-m) var(--space-sm); white-space: nowrap;
  transition: color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.deck-tabs button:hover { color: var(--ink); }
.deck-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.deck-panel[hidden] { display: none !important; }
.deck-panel > .wrap { padding-left: 0; padding-right: 0; }
.deck-panel .section-head-wrap { margin-top: 0; }
@media (min-width: 900px) { .deck-tabs { justify-content: flex-start; } }

  /* ---------- market switch ---------- */
  .mkt-row { display: flex; align-items: baseline; gap: var(--space-m); flex-wrap: wrap;
             margin-top: var(--space-xl); }
  .mkt-label {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em;
    /* --ink-faint measures 3.49:1 here, under AA for text this size. */
    text-transform: uppercase; color: var(--ink-dim);
  }
  .mkt { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .mkt-o {
    padding: 0.3rem 0.8rem; font-size: 0.78rem; color: var(--ink-dim);
    text-decoration: none; white-space: nowrap;
    transition: color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
  }
  .mkt-o + .mkt-o { border-left: 1px solid var(--line); }
  .mkt-o[aria-current] { background: var(--panel-2); color: var(--accent); }
  .mkt-o:hover { color: var(--ink); }

  /* ---------- market suggestion strip ---------- */
  .geo { display: none; }
  .geo.on {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--space-m); padding: var(--space-m) var(--space-xl);
    background: var(--panel-2); border-bottom: 1px solid var(--line);
    font-size: 0.85rem; color: var(--ink-dim);
  }
  .geo-copy { margin: 0; }
  .geo-copy b { color: var(--ink); font-weight: 600; }
  .geo-go { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .geo-go:hover { text-decoration: underline; }
  .geo-x {
    background: none; border: 0; cursor: pointer;
    /* ~40px of tap target on a phone, absorbed by an equal negative margin so
       the strip does not get taller to pay for it. */
    padding: var(--space-m); margin: calc(var(--space-m) * -1) 0;
    font-size: 1.1rem; line-height: 1; color: var(--ink-dim);
  }
  .geo-x:hover { color: var(--ink); }


/* ---------- the nav ---------- */
/* Six pages need a way between them. <details> rather than a scripted menu:
   it opens on click and on keyboard without a line of JS, and there is no
   open/closed state that can get out of step with the page. The header must
   not clip it, so nothing here sets overflow. */
.top-row { flex-wrap: wrap; row-gap: var(--space-m); }
.nav {
  display: flex; align-items: center; gap: var(--space-l);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  order: 3; width: 100%;
}
.nav > a, .nav summary {
  color: var(--ink-dim); text-decoration: none; cursor: pointer;
  padding: var(--space-s) 0; white-space: nowrap;
  transition: color var(--dur-ui) var(--ease);
}
.nav > a:hover, .nav summary:hover { color: var(--ink); }
.nav > a[aria-current] { color: var(--accent); }
.nav-drop { position: relative; }
.nav-drop summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-s); }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease);
}
.nav-drop[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-drop[data-on] summary { color: var(--accent); }
.nav-menu {
  position: absolute; top: calc(100% + var(--space-m)); left: calc(var(--space-l) * -1);
  display: flex; flex-direction: column; min-width: 15rem; z-index: 20;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: var(--space-s) 0; box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.nav-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-m) var(--space-l); color: var(--ink); text-decoration: none;
  transition: background var(--dur-state) var(--ease);
}
.nav-menu a i { font-style: normal; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.nav-menu a:hover { background: var(--panel); }
.nav-menu a[aria-current] { color: var(--accent); }
.nav-menu a[aria-current] i { color: var(--accent); opacity: 0.7; }

@media (min-width: 900px) {
  /* Wide enough for one row: the nav sits between the mark and the CTA. */
  .nav { order: 0; width: auto; margin-left: var(--space-xl); }
  .top-row { flex-wrap: nowrap; }
  .nav-menu { left: calc(var(--space-l) * -1); }
}

/* ---------- product pages ---------- */
/* One product per page, so the grid that held three now holds one and the
   card stops being a column in a set. */
.grid.one-up { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid.one-up { max-width: 46rem; } }
.product-hero .hero-text .eyebrow {
  font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
/* Each product's page carries its own ink, the way its app does. The umbrella
   gold stays on the home page and the footer mark. */
.product-hero.fit   { --accent: var(--fit-accent, #d2683a); }
.product-hero.laga  { --accent: var(--laga-accent, #d4635a); }
.product-hero.raket { --accent: var(--raket-accent, #63a07f); }

/* The three cards on the home page are now doors, not the whole story. */
.product-more {
  display: inline-flex; align-items: center; gap: var(--space-s);
  margin-top: var(--space-l); color: var(--accent); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.product-more:hover { text-decoration: underline; }
.product-card.fit .product-more   { color: var(--fit-accent, #d2683a); }
.product-card.laga .product-more  { color: var(--laga-accent, #d4635a); }
.product-card.raket .product-more { color: var(--raket-accent, #63a07f); }


/* ---------- each product's own ink ---------- */
/* The values the three apps use on a dark ground, not the raw brand accents:
   BinaLaga's oxblood measures 2.7:1 here and fails AA even for display type.
   These measure 5.0, 5.5 and 5.9. */
:root { --fit-accent: #d2683a; --laga-accent: #d4635a; --raket-accent: #63a07f; }

/* ---------- the hero explainer ---------- */
/* Bina means build and the mark is a B of stacked blocks, so the blocks do the
   explaining: they land, they become a phone, the phone shows each of the
   three real apps in that app's own ink. Everything below is a transition off
   one [data-beat] attribute — no keyframes, so a beat change never has to
   restart an animation, and no library. This is the page's signature move,
   which is why the clock tick that used to run beside it is gone: two timed
   moves on the first screen is noise, not choreography. */
.xp {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: var(--ground);
  --xp-ink: var(--accent);
  transition: opacity 520ms var(--ease);
}
.xp[data-beat="live"] { opacity: 0; pointer-events: none; }
.xp[data-beat="fit"]   { --xp-ink: var(--fit-accent); }
.xp[data-beat="laga"]  { --xp-ink: var(--laga-accent); }
.xp[data-beat="raket"] { --xp-ink: var(--raket-accent); }

.xp-mark {
  grid-area: 1 / 1; width: 34%; height: auto;
  transition: opacity 420ms var(--ease), transform 620ms var(--ease-out);
}
.xp-blk {
  opacity: 0; transform: translateY(-5px);
  transition: opacity 380ms var(--ease-out) var(--d), transform 520ms var(--ease-out) var(--d);
}
.xp[data-beat="build"] .xp-blk, .xp[data-beat="form"] .xp-blk { opacity: 1; transform: none; }

/* The mark does not fade out so much as open up into the frame it drew. */
.xp[data-beat="form"] .xp-mark { transform: scale(2.6); opacity: 0; }
.xp:not([data-beat="build"]):not([data-beat="form"]) .xp-mark { opacity: 0; transform: scale(2.6); }

.xp-screens {
  grid-area: 1 / 1; position: relative; width: 100%; height: 100%;
  opacity: 0; transform: scale(0.82);
  transition: opacity 460ms var(--ease), transform 620ms var(--ease-out);
}
.xp[data-beat="fit"] .xp-screens, .xp[data-beat="laga"] .xp-screens,
.xp[data-beat="raket"] .xp-screens, .xp[data-beat="all"] .xp-screens,
.xp[data-beat="live"] .xp-screens { opacity: 1; transform: none; }

.xp-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0; transition: opacity 420ms var(--ease);
}
.xp[data-beat="fit"]   .xp-shot[data-p="fit"],
.xp[data-beat="all"]   .xp-shot[data-p="fit"],
.xp[data-beat="live"]  .xp-shot[data-p="fit"],
.xp[data-beat="laga"]  .xp-shot[data-p="laga"],
.xp[data-beat="raket"] .xp-shot[data-p="raket"] { opacity: 1; }

/* The caption is three real links, so the sequence ends somewhere. */
.xp-cap {
  display: flex; flex-direction: column; gap: var(--space-s);
  margin-top: var(--space-l); min-height: 4.5rem;
}
.xp-line {
  display: flex; gap: var(--space-m); align-items: baseline;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  opacity: 0.25; transition: opacity 380ms var(--ease), color 380ms var(--ease);
}
.xp-line b { color: var(--ink-dim); font-weight: 600; transition: color 380ms var(--ease); }
.xp-line:hover { opacity: 1; }
.xp-line:hover b, .xp-line:focus-visible b { color: var(--ink); }
#xp-cap[data-beat="fit"]   .xp-line[data-p="fit"] b   { color: var(--fit-accent); }
#xp-cap[data-beat="laga"]  .xp-line[data-p="laga"] b  { color: var(--laga-accent); }
#xp-cap[data-beat="raket"] .xp-line[data-p="raket"] b { color: var(--raket-accent); }
#xp-cap[data-beat="fit"]   .xp-line[data-p="fit"],
#xp-cap[data-beat="laga"]  .xp-line[data-p="laga"],
#xp-cap[data-beat="raket"] .xp-line[data-p="raket"] { opacity: 1; }
#xp-cap[data-beat="all"] .xp-line, #xp-cap[data-beat="live"] .xp-line { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .xp, .xp-mark, .xp-blk, .xp-screens, .xp-shot, .xp-line { transition: none; }
}