/* ============================================================
   Ossly — marketing site
   Editorial, agency-grade: paper white, off-black ink, red accent
   (the red bar of a black belt). Hairlines over cards, squared
   corners, mono micro-labels, restrained but constant motion.
   ============================================================ */

:root {
  --paper: #fafaf7;
  --paper-2: #f2f1ec;
  --ink: #12110f;
  --ink-2: #55534e;
  --ink-3: #8d8a82;
  --line: #e2e0d8;
  --red: #b8232f;
  --red-dark: #9a1c27;
  --white: #ffffff;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--red); color: var(--white); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after { content: ''; height: 1px; width: 56px; background: var(--line); }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.02; font-weight: 700; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  max-width: 32em;
}

/* ---------- buttons: squared, mono, directional arrow ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
    transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* sliding fill layer */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }

.btn-red { background: var(--red); color: var(--white); }
.btn-red::before { background: var(--ink); }
.btn-red:hover::before { transform: translateX(0); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink::before { background: var(--red); }
.btn-ink:hover::before { transform: translateX(0); }

.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); }
.btn-ghost:hover::before { transform: translateX(0); }

.btn-white { background: var(--paper); color: var(--ink); }
.btn-white::before { background: var(--red); }
.btn-white:hover { color: var(--white); }
.btn-white:hover::before { transform: translateX(0); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250, 250, 247, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
/* ---------- wordmark ----------
   OSSLY set in the mono, OSS heavy and LY light, so the name reads as the
   greeting the mat already knows plus the suffix that turns it into software.
   On hover — and once on load — a caret backspaces over LY and types the hand
   in its place: OSSLY → OSS 🤙🏻.  Every piece is one mono advance wide and
   collapses to zero, so the letters delete in sequence instead of fading.
   States: .armed shows the caret, .oss runs the transform. */
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}
/* The mark's moving parts are not tied to .logo: the hero headline wears the
   same animation on its own word, with the state classes on the <h1>. */
.mk { display: inline-flex; align-items: center; white-space: nowrap; }
.logo .mk-a { font-weight: 800; }
.logo .mk-l,
.logo .mk-y { font-weight: 300; }

.mk-l,
.mk-y,
.mk-hand,
.mk-dot {
  display: inline-block;
  overflow: hidden;
  transition: max-width 0.15s steps(1), margin-left 0.15s steps(1);
}
/* the collapse needs overflow:hidden, which also clips vertically — and an
   emoji glyph is taller than the 1em line box the rest of the mark sits in,
   so the hand loses its top and bottom unless its own box is given room */
.mk-hand { line-height: 1.5; }
/* resting state = OSSLY, and the delays that play the transform backwards */
.mk-l { max-width: 0.64em; transition-delay: 0.34s; }
.mk-y { max-width: 0.64em; transition-delay: 0.52s; }
.mk-hand { max-width: 0; margin-left: 0; transition-delay: 0.16s; }
.mk-dot { max-width: 0; transition-delay: 0s; }

/* transformed state = OSS 🤙🏻. — delete Y, delete L, type the hand, full stop */
.oss .mk-y { max-width: 0; transition-delay: 0.16s; }
.oss .mk-l { max-width: 0; transition-delay: 0.34s; }
.oss .mk-hand { max-width: 1.25em; margin-left: 0.12em; transition-delay: 0.52s; }
.oss .mk-dot { max-width: 0.6em; transition-delay: 0.72s; }

.mk-caret {
  display: inline-block;
  width: 0.5em;
  height: 0.92em;
  margin-left: 0.1em;
  background: var(--red);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.armed .mk-caret { opacity: 1; animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* the sign-off above the closing CTA, same mark at headline size */
.logo-xl {
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  margin-bottom: 30px;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn):not(.lang a) {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s;
}
.nav-links > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 1.5px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--ink); }
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .btn { padding: 12px 20px; }

/* language switcher: dropdown, scales to more languages */
.lang {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.lang-current {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 9px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.25s;
}
.lang-current:hover { border-color: var(--ink); }
.lang-current .chev { font-size: 8px; color: var(--ink-3); transition: transform 0.25s var(--ease); }
.lang.open .lang-current .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 16px 32px -16px rgba(18, 17, 15, 0.25);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 20;
}
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink-2);
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.lang-menu button:hover { background: var(--paper-2); color: var(--ink); }
.lang-menu button.on { color: var(--ink); font-weight: 600; }

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

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 130px 0 60px;
  overflow: hidden;
}
.hero-video-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video-layer video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.68;
}
.hero-video-layer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(250,250,247,0.93) 0%, rgba(250,250,247,0.72) 40%, rgba(250,250,247,0.2) 100%),
    linear-gradient(0deg, var(--paper) 2%, transparent 30%);
}
.hero-shaka-bg {
  position: absolute;
  right: -4vw; bottom: -10vh;
  font-size: clamp(280px, 34vw, 520px);
  line-height: 1;
  opacity: 0.05;
  transform: rotate(-12deg);
  z-index: 0;
  user-select: none;
  pointer-events: none;
  animation: shakaDrift 14s ease-in-out infinite alternate;
}
@keyframes shakaDrift {
  from { transform: rotate(-14deg) translateY(0); }
  to { transform: rotate(-8deg) translateY(-26px); }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-copy h1 em { font-style: normal; color: var(--red); }
.hero-copy h1 .mk-caret { width: 0.14em; height: 0.78em; margin-left: 0.05em; }
.hero-copy .lede { margin-bottom: 38px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-proof {
  margin-top: 54px;
  display: flex;
  border-top: 1px solid var(--line);
}
.hero-proof div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 32px 0 0;
}
.hero-proof div + div { border-left: 1px solid var(--line); padding-left: 32px; }
.hero-proof strong { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.hero-proof span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- iPhone frame ----------
   The shell is a real device photo (assets/iphone-frame.webp, transparent
   where the display is) laid OVER the screenshot: rail, buttons and Dynamic
   Island all come from the image, so nothing is faked in CSS. The element box
   is the image box, and the screen window inside it was measured off the file:
   left 4.18%, top 1.84%, 91.57% x 96.33%. The screenshot is set a hair larger
   than that window so it tucks under the frame's black inner edge and never
   leaves a seam. Every measure derives from --w: to resize a frame, override
   --w, never `width`. */

.iphone {
  --w: min(300px, 74vw);
  --screen-r: calc(var(--w) * 0.158);
  position: relative;
  width: var(--w);
  aspect-ratio: 1317 / 2722;
  transform-style: preserve-3d;
  will-change: transform;
}
/* The shadow can't live on .iphone: an outer box-shadow is clipped to the
   element box, and the rail sits ~0.7% inside that box (the buttons are what
   reach the edge), so the strip in between got no shadow at all and read as a
   pale outline around the phone. This caster is inset into the rail instead,
   which puts the shadow's hard edge under the frame where it belongs. */
.iphone::before {
  content: '';
  position: absolute;
  left: 1.1%; right: 1.1%; top: 0.5%; bottom: 0.5%;
  border-radius: calc(var(--w) * 0.175);
  box-shadow:
    0 30px 60px -18px rgba(18, 17, 15, 0.42),
    0 80px 120px -40px rgba(18, 17, 15, 0.26);
  z-index: 0;
}
.iphone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(assets/iphone-frame.webp) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 5;
}
.iphone img, .iphone .screen {
  position: absolute;
  left: 3.8%; top: 1.5%;
  width: 92.35%; height: 97%;
  /* `contain`, not `cover`: the browser-captured shots are a full display and
     the window is now a real display, so the fake status-bar strip below has
     nowhere to come from — covering would crop the bottom nav off. Fitting
     leaves ~2% of dark either side, invisible against these dark screens. */
  object-fit: contain;
  object-position: top;
  border-radius: var(--screen-r);
  background: #0c0b0d;
  padding-top: 2%;                   /* clears the Dynamic Island */
  box-sizing: border-box;
  overflow: hidden;
}

/* the sheen over the display — it drifts with the tilt, see script.js */
.iphone .glass {
  position: absolute;
  left: 3.8%; top: 1.5%;
  width: 92.35%; height: 97%;
  border-radius: var(--screen-r);
  pointer-events: none;
  z-index: 4;
  background-image: linear-gradient(118deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 14%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.025) 88%,
    rgba(255, 255, 255, 0.06) 100%);
  background-size: 200% 200%;
  background-position: calc(30% + var(--gx, 0%)) calc(24% + var(--gy, 0%));
}
.iphone .home-label {
  position: absolute;
  bottom: -46px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Real device screenshots carry their own status bar, so they need none of the
   fake gap the browser-captured shots in assets/shots/ get. Two layers stacked
   and cross-faded. */
.iphone .screen.demo-reel { padding: 0; background: #000; overflow: hidden; }
.demo-reel img {
  padding: 0;
  position: absolute;
  inset: 0;
  /* the box is set a hair above the real window so it tucks under the bezel;
     these are true display captures, so give that hair back or the status bar
     rides too high against the island */
  top: 0.35%;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--screen-r);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.demo-reel img.on { opacity: 1; }

.hero-phone { display: flex; justify-content: center; perspective: 1200px; }
.hero-phone .iphone { transform: rotate(3deg); animation: phoneFloat 7s ease-in-out infinite; }
@keyframes phoneFloat {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-14px); }
}

/* ---------- marquee (seamless: two identical groups, -50% loop) ---------- */

.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 17px 0;
  white-space: nowrap;
  user-select: none;
}
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee .mq {
  display: flex;
  gap: 48px;
  padding-right: 48px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- sections ---------- */

section { padding: 110px 0; }
.sec-head { margin-bottom: 60px; max-width: 640px; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { color: var(--ink-2); font-size: 1.1rem; }

/* The headline and the belts share a row: stacked, each left a wide empty half
   beside it and the section read as three quarters of nothing. */
.bjj-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding-bottom: 96px;   /* the kids card hangs below the belts into this */
}
.bjj-top .sec-head { margin-bottom: 0; max-width: none; }

/* belts strip — stripes start from the left of the rank bar, like the app */
.belts-wrap { position: relative; margin: 0; }
.belts { display: flex; flex-direction: column; gap: 8px; }
.belt {
  height: 24px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform-origin: left center;
}
/* kids belts floating card */
.kids-card {
  /* hangs off the bottom-left of the belt stack, clear of the rank bars */
  position: absolute;
  left: -84px;
  top: calc(100% - 34px);
  transform: rotate(-3deg);
  --rot: -3deg;
  width: 196px;
  z-index: 2;
}
.kids-card .kid-belt {
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 5px;
}
.kids-card small {
  display: block;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .kids-card { position: static; transform: none; width: 100%; margin-top: 18px; }
}
.belt .bar {
  position: absolute;
  right: 12%; top: 0; bottom: 0;
  width: 19%;
  background: #12110f;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding-left: 10px;
}
.belt .bar i { display: block; width: 4px; height: 62%; background: #fff; }
.belt-white { background: #f4f2ec; }
.belt-blue { background: #1e4fd6; }
.belt-purple { background: #6b3fa0; }
.belt-brown { background: #6f4a2f; }
.belt-black { background: #171717; }
.belt-black .bar { background: var(--red); }
/* staggered slide-in */
.reveal.belts .belt { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.belts.in .belt { opacity: 1; transform: none; }
.reveal.belts.in .belt:nth-child(2) { transition-delay: 0.08s; }
.reveal.belts.in .belt:nth-child(3) { transition-delay: 0.16s; }
.reveal.belts.in .belt:nth-child(4) { transition-delay: 0.24s; }
.reveal.belts.in .belt:nth-child(5) { transition-delay: 0.32s; }

/* zigzag feature rows */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  padding: 72px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
/* zigzag: media on the left, copy on the right */
.feature-row.flip .feature-copy { order: 2; }


.feature-copy .eyebrow { margin-bottom: 20px; }
.feature-copy h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 16px; }
.feature-copy > p { color: var(--ink-2); margin-bottom: 24px; max-width: 28em; }

.checks { display: flex; flex-direction: column; }
.checks li {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  color: var(--ink-2);
  /* the bullet is absolute so a tail that wraps lines up under the lead-in
     instead of collapsing into a second ragged column */
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--line);
}
.checks li::before {
  content: '🤙🏻';
  position: absolute;
  left: 0; top: 13px;
  font-size: 0.85rem;
}
.checks li strong { color: var(--ink); font-weight: 600; }

/* payment logos */
.pay-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pay-row img {
  height: 24px;
  width: auto;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
/* optical size compensation: wordmarks drawn inside square viewboxes */
.pay-row img[alt="Apple Pay"], .pay-row img[alt="Google Pay"] { height: 34px; }
.pay-row img[alt="Visa"] { height: 30px; }
.pay-row img[alt="Stripe"] { height: 20px; }
.pay-row img:hover { opacity: 1; transform: translateY(-2px); }
.pay-row .pay-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-basis: 100%;
}

/* ---------- iOS home screen mock (white label) ---------- */

.homescreen {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(184, 35, 47, 0.28), transparent 55%),
    radial-gradient(120% 100% at 90% 100%, rgba(211, 169, 79, 0.18), transparent 60%),
    linear-gradient(165deg, #2b2723 0%, #171512 55%, #0e0d0b 100%);
  padding: 14px 15px 12px !important;
}
.hs-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px 0 22px;
  margin-bottom: 26px;
}
.hs-clock {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-display);
}
.hs-status-icons { display: inline-flex; align-items: center; gap: 5px; }
.hs-search {
  align-self: center;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  padding: 5px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  justify-items: center;
}
.hs-app { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hs-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.hs-icon svg { width: 22px; height: 22px; }
.hs-app span {
  color: rgba(255,255,255,0.85);
  font-size: 9.5px;
  letter-spacing: 0.01em;
  font-family: var(--font-display);
}
.hs-app.academy { position: relative; }
.hs-app.academy .hs-icon {
  background: var(--academy-bg, #12110f);
  border: 1px solid var(--academy-ring, rgba(211, 169, 79, 0.5));
  color: var(--academy-fg, #d3a94f);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  animation: academyPop 4s var(--ease) infinite;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* flip while the brand swaps */
.hs-app.academy.swap .hs-icon { animation: academySwap 0.6s var(--ease); }
.hs-app.academy.swap span#academy-name { animation: nameFade 0.6s var(--ease); }
@keyframes academySwap {
  0% { transform: scale(1) rotateY(0); }
  45% { transform: scale(0.7) rotateY(90deg); }
  100% { transform: scale(1) rotateY(0); }
}
@keyframes nameFade {
  0%, 45% { opacity: 0; }
  100% { opacity: 1; }
}
.hs-app.academy span { color: #fff; font-weight: 600; }
@keyframes academyPop {
  0%, 78%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
  84% { transform: scale(1.14); box-shadow: 0 6px 18px rgba(211,169,79,0.35); }
  92% { transform: scale(1); }
}
.hs-callout {
  position: absolute;
  top: -38px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.hs-callout::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--red);
}
.hs-dock {
  margin-top: auto;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 9px;
  display: flex;
  justify-content: space-around;
}
.hs-dock .hs-icon { width: 44px; height: 44px; }

/* ---------- referral flow ---------- */

.ref-flow {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  margin-top: 28px;
}
.ref-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
}
.ref-step + .ref-step { border-top: 1px solid var(--line); }
.ref-step .n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  width: 22px;
  flex-shrink: 0;
}
.ref-step .what { flex: 1; }
.ref-step .what strong { display: block; font-weight: 600; letter-spacing: -0.01em; }
.ref-step .what small { color: var(--ink-2); font-size: 0.88rem; }
.ref-chip {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: #d3a94f;
  padding: 8px 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ref-days {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
  flex-shrink: 0;
  animation: daysPop 3.2s var(--ease) infinite;
}
@keyframes daysPop {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(1.25); }
  86% { transform: scale(1); }
}
.ref-total {
  padding: 16px 22px;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}
.ref-total strong { color: var(--red); }

/* ---------- floating UI cards (MAAT-style compositions) ---------- */

.ui-card {
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(18, 17, 15, 0.06),
    0 18px 44px -18px rgba(18, 17, 15, 0.3);
  border: 1px solid rgba(18, 17, 15, 0.05);
  padding: 18px 20px;
  font-family: var(--font-display);
}
.ui-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ui-card .tag.ok { background: #e3f4e4; color: #22803a; }
.ui-card .tag.warn { background: #fdeeda; color: #b0620e; }
.ui-card .tag.red { background: #f9e2e4; color: var(--red); }

/* generic floating scene */
.float-scene { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; width: 100%; }
.float-scene .fl { position: absolute; }
.float-scene .drift { animation: cardDrift 7s ease-in-out infinite alternate; }
.float-scene .drift.d2 { animation-duration: 9s; animation-delay: 1s; }
.float-scene .drift.d3 { animation-duration: 8s; animation-delay: 2s; }
@keyframes cardDrift {
  from { transform: translateY(0) rotate(var(--rot, 0deg)); }
  to { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}

/* Stripe-style checkout mock */
.checkout {
  width: min(360px, 88vw);
  border-radius: 16px;
  padding: 26px 26px 20px;
  position: relative;
  z-index: 1;
}
.checkout .co-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.checkout .co-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #12110f;
  color: #d3a94f;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700; font-size: 15px;
}
.checkout .co-head strong { display: block; font-size: 0.98rem; letter-spacing: -0.01em; }
.checkout .co-head small { color: var(--ink-3); font-size: 0.82rem; }
.checkout .co-price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.checkout .co-price small { font-size: 0.85rem; color: var(--ink-3); font-weight: 500; }
.checkout .co-applepay {
  background: #000; color: #fff;
  border-radius: 8px;
  height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.95rem; font-weight: 600;
  margin-bottom: 14px;
}
.checkout .co-applepay img { height: 34px; filter: invert(1); }
.checkout .co-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-3); font-size: 0.78rem;
  margin-bottom: 14px;
}
.checkout .co-or::before, .checkout .co-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.checkout .co-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 0.9rem;
  color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.checkout .co-field .brands { display: flex; gap: 6px; }
.checkout .co-field .brands img { height: 14px; opacity: 0.6; }
.checkout .co-row { display: flex; gap: 10px; }
.checkout .co-row .co-field { flex: 1; }
.checkout .co-pay {
  background: var(--red); color: #fff;
  border-radius: 8px;
  height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  margin: 6px 0 14px;
  position: relative;
  overflow: hidden;
}
.checkout .co-pay::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 40%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: payShimmer 3.2s ease-in-out infinite;
}
@keyframes payShimmer { 0% { left: -60%; } 55%, 100% { left: 120%; } }
.checkout .co-foot {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.checkout .co-foot img.co-stripe { height: 17px; opacity: 0.55; transform: translateY(1px); }

/* small cards floating around the checkout */
.co-side { width: 230px; }
.co-side .line1 { font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; }
.co-side .line2 { color: var(--ink-2); font-size: 0.82rem; margin-top: 2px; }
/* payment events pop up at rotating spots around the checkout, live for a
   few seconds, then vanish while the next one appears somewhere else */
.pay-scene .co-side { z-index: 2; opacity: 0; pointer-events: none; }
.pay-scene .co-side.pos-1 { left: calc(50% - 385px); top: 12px; --rot: -4deg; transform: rotate(-4deg); }
/* offset from the scene's own right edge, not from its centre: measured from
   the centre these reached past the viewport and scrolled the page sideways */
.pay-scene .co-side.pos-2 { right: -20px; bottom: 30px; --rot: 3deg; transform: rotate(3deg); }
.pay-scene .co-side.pos-3 { right: 10px; top: 48px; --rot: 2.5deg; transform: rotate(2.5deg); }
.pay-scene .co-side.pos-4 { left: calc(50% - 360px); bottom: 70px; --rot: -3deg; transform: rotate(-3deg); }
.co-side.on { animation: coIn 0.55s var(--ease) forwards; }
.co-side.out { animation: coOut 0.5s var(--ease) forwards; }
@keyframes coIn {
  0% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.7) translateY(16px); }
  60% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1.06); }
  100% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
}
@keyframes coOut {
  from { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
  to { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.85) translateY(-12px); }
}

/* ranking scene: phone + overflowing cards */
.rank-scene { position: relative; display: flex; justify-content: center; perspective: 1200px; }
.rank-scene .iphone { --w: min(280px, 70vw); }
.rank-scene .rank-card { position: absolute; left: calc(50% - 295px); bottom: 44px; --rot: -3deg; transform: rotate(-3deg); z-index: 2; }
.rank-scene .kpi-card { position: absolute; right: calc(50% - 280px); top: 26px; --rot: 2.5deg; transform: rotate(2.5deg); z-index: 2; }
.rank-card { width: 240px; }
.podium-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.podium-row + .podium-row { border-top: 1px solid var(--paper-2); }
.podium-row .pos { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); width: 18px; }
.podium-row .av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.podium-row strong { flex: 1; font-size: 0.88rem; font-weight: 600; }
.podium-row .sc { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.podium-row .medal { font-size: 0.9rem; }
.price-talk { font-size: 2.3rem; }

.rank-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--paper-2);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.kpi-card { width: 190px; text-align: left; }
.kpi-card .big { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-card .big em { font-style: normal; color: #22803a; font-size: 0.8rem; vertical-align: middle; margin-left: 4px; }
.kpi-card .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 12px; }
.mini-bars i { flex: 1; background: var(--ink); border-radius: 2px 2px 0 0; opacity: 0.85; }
.mini-bars i.hot { background: var(--red); opacity: 1; }

/* white label scene: the settings that produce the icon, floating around the
   phone that ends up carrying it */
.wl-scene { perspective: 1200px; }
.wl-scene .iphone { --w: min(270px, 70vw); }
.wl-scene .wl-brand {
  width: 240px;
  left: calc(50% - 330px); top: 18px;
  --rot: -3deg; transform: rotate(-3deg);
  z-index: 2;
}
.wl-scene .wl-installed {
  width: 218px;
  right: calc(50% - 296px); bottom: 56px;
  --rot: 2.5deg; transform: rotate(2.5deg);
  z-index: 2;
}
.wl-logo-row { display: flex; align-items: center; gap: 12px; }
.wl-logo {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
}
.wl-logo.sm { width: 38px; height: 38px; border-radius: 10px; font-size: 0.75rem; }
.wl-logo-copy { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wl-logo-copy strong { font-size: 0.83rem; font-weight: 600; }
.wl-upload {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-2);
}
.wl-input { display: block; margin-top: 12px; }
.wl-input small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.wl-input > span {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 0.85rem;
  background: var(--paper);
}
.wl-cover img { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; }
.wl-cover em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-inst-row { display: flex; align-items: center; gap: 11px; }
.wl-inst-row strong { display: block; font-size: 0.86rem; font-weight: 600; }
.wl-inst-row small {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- white label: real iPhone screenshot + overlaid academy app ---------- */

.iphone .screen.hs-real { padding: 0; overflow: hidden; }
/* The screenshot is narrower than the frame's screen, so `cover` crops it and
   percentages against the frame no longer line up with the iOS grid. This inner
   box is exactly the rendered image, so every % below is a % of the screenshot. */
.hs-real-inner {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 780 / 1691;
  container-type: inline-size;
}
.iphone .hs-real img {
  padding: 0;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  border-radius: 0;
  box-shadow: none;
}
.hs-real-app {
  /* The empty slot in column 2, row 4. Measured off homescreen.png (780×1691):
     icons are 128px wide, column 2 starts at x=237, the Music row starts at
     y=549 and the grid pitch is 196px — so row 4 starts at y=745. */
  position: absolute;
  left: 30.38%;
  top: 44.06%;
  width: 16.41%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8cqw;
}
.hs-real-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: academyPop 4s var(--ease) infinite;
  transition: background 0.4s var(--ease);
}
.hs-real-icon svg { width: 100%; height: 100%; display: block; }
.hs-real-name {
  color: #fff;
  font-size: 10.5px;
  font-size: 3.2cqw;   /* ≈ the 25px iOS label on the 780px-wide screenshot */
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.hs-real-app .hs-callout { top: auto; bottom: -36px; }
.hs-real-app .hs-callout::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--red);
}
.hs-real-app.swap .hs-real-icon { animation: academySwap 0.6s var(--ease); }
.hs-real-app.swap .hs-real-name { animation: nameFade 0.6s var(--ease); }

/* ---------- belt system: the certificate and the history, no phone around them ---------- */

/* Two cards in a row that overlap by a fixed slice of their own width, so the
   composition holds from a 1440px screen down to where the row stacks. */
.cert-scene { min-height: 0; align-items: flex-start; }
.cert-card {
  width: min(330px, 58%);
  order: 2;
  --rot: 2deg;
  transform: rotate(2deg);
  padding: 16px;
}
.cert-doc { background: var(--paper); border: 1px solid var(--line); padding: 16px 16px 14px; }
.cert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cert-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #d3a94f;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
}
.cert-head strong { display: block; font-size: 0.8rem; letter-spacing: 0.04em; }
.cert-head small {
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.cert-belt { height: 15px; margin-bottom: 14px; }
.cert-line { font-size: 0.76rem; color: var(--ink-2); text-align: center; }
.cert-line strong { color: var(--ink); font-weight: 600; }
.cert-name {
  font-size: 1.02rem; font-weight: 700; text-align: center;
  border-bottom: 1px solid var(--ink);
  width: 84%; margin: 5px auto 8px;
  padding-bottom: 5px;
}
.cert-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.cert-sign {
  font-family: var(--font-display);
  font-size: 0.7rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 3px;
}
.cert-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cert-btn {
  text-align: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.cert-btn.gold { border-color: #d3a94f; color: #9a7526; }

.promo-hist { width: min(252px, 45%); }
.cert-scene .promo-hist {
  order: 1;
  margin: 96px -5% 0 0;
  --rot: -3deg;
  transform: rotate(-3deg);
  z-index: 2;
}
.ph-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ph-row + .ph-row { border-top: 1px solid var(--paper-2); }
/* the rank itself is the belt, exactly as the app draws it in the history */
.ph-row .belt { height: 14px; flex: 1; }
.ph-row .belt .bar { width: 27%; padding-left: 5px; gap: 3px; }
.ph-row .belt .bar i { width: 2.5px; }
.ph-cert { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.ph-date {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--ink-2);
  width: 72px; text-align: right;
}

/* ---------- techniques: the one dark section, two students studying ---------- */

.techniques {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.techniques::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/technique-studying.jpg') center 38% / cover no-repeat;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.5;
}
.techniques::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 17, 15, 0.95) 0%, rgba(18, 17, 15, 0.72) 52%, rgba(18, 17, 15, 0.3) 100%),
    linear-gradient(0deg, rgba(18, 17, 15, 0.92) 0%, transparent 46%);
}
.techniques .wrap { position: relative; z-index: 1; }
.techniques .eyebrow,
.techniques .home-label { color: rgba(250, 250, 247, 0.55); }
.techniques .sec-head p,
.techniques .feature-copy > p,
.techniques .checks li { color: rgba(250, 250, 247, 0.72); }
.techniques .checks li { border-top-color: rgba(250, 250, 247, 0.16); }
.techniques .checks li strong { color: var(--paper); }
/* the cards stay paper-on-ink, so they take the page's ink colour back */
.techniques .ui-card {
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 40px 80px -24px rgba(0, 0, 0, 0.7);
}

.tec-scene { min-height: 0; align-items: flex-start; }
.tec-card {
  width: min(370px, 92%);
  padding: 20px 20px 0;
  --rot: 1.5deg;
  transform: rotate(1.5deg);
  /* the list runs out under a fade rather than at a hard edge: there are more
     categories than fit, and that is the point */
  max-height: 430px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
}
.tec-head { margin-bottom: 14px; }
.tec-head .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9a7526;
  margin-bottom: 6px;
}
.tec-head h4 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.tec-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.tec-seg span {
  text-align: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.tec-seg span.on { background: #d3a94f; border-color: #d3a94f; color: var(--ink); font-weight: 600; }
.tec-group {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 2px 0 8px;
}
.tec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tec-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
}
.tec-tile .ic { display: block; font-size: 1rem; margin-bottom: 8px; }
.tec-tile strong { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
.tec-tile small {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

.tec-video {
  width: 236px;
  margin: 336px -13% 0 0;   /* low enough to cross the fade, not a tile */
  order: -1;
  z-index: 2;
  --rot: -3.5deg;
  transform: rotate(-3.5deg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.tec-video .play {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  padding-left: 2px;
}
.tec-video strong { display: block; font-size: 0.9rem; font-weight: 600; }
.tec-video small {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- referral: animated subscription bar ---------- */

/* the growth card floats above the animated bar, clear of its day counter */
.ref-scene { min-height: 420px; align-items: flex-end; }
.ref-scene .ref-growth {
  top: 0;
  right: 6px;
  --rot: 3deg;
  transform: rotate(3deg);
  z-index: 2;
}
.ref-growth .lbl { text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; line-height: 1.45; }
.ref-anim { width: min(430px, 92vw); padding: 24px; }
.ref-anim .ra-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ref-anim .ra-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: #1e4fd6; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.ref-anim .ra-head strong { display: block; letter-spacing: -0.01em; }
.ref-anim .ra-head small { color: var(--ink-3); font-size: 0.82rem; }
.ref-anim .ra-days {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.ref-anim .ra-days small { font-size: 0.7rem; color: var(--ink-3); font-weight: 500; letter-spacing: 0.1em; }
.ra-bar {
  height: 30px;
  background: var(--paper-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  margin-bottom: 16px;
}
.ra-bar .base {
  width: 62%;
  background: #12110f;
  border-radius: 8px 0 0 8px;
  display: flex; align-items: center;
  padding-left: 12px;
  color: #d3a94f;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ra-bar .bonus {
  width: 0;
  background: var(--red);
  transition: width 0.9s var(--ease);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}
.ra-feed { min-height: 58px; position: relative; }
.ra-event {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--paper);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.ra-event.show { opacity: 1; transform: none; }
.ra-event .ev-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: #6b3fa0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  flex-shrink: 0;
}
.ra-event span { font-size: 0.86rem; color: var(--ink-2); }
.ra-event span strong { color: var(--ink); }
.ra-event .plus {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--red);
  white-space: nowrap;
}

/* ---------- everything: horizontal auto-scrolling carousel ---------- */

.carousel {
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carousel-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: carousel 46s linear infinite;
  padding: 10px 0 26px;
}
.carousel:hover .carousel-track { animation-play-state: paused; }
@keyframes carousel { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .carousel-track { animation: none; } .carousel { overflow-x: auto; } }

.c-card {
  width: 272px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.c-card:hover { transform: translateY(-6px); }
.c-card .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.c-card h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.c-mock { margin-top: auto; }
.c-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.c-row + .c-row { border-top: 1px solid var(--paper-2); }
.c-row .t { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.c-row .chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2.5px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-2);
}
.c-row .chip.gold { background: #12110f; color: #d3a94f; border-color: #12110f; }
.c-row .play {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.c-row .ok { color: #22803a; font-weight: 700; }
.c-flag { font-size: 1rem; }
.c-langs { display: flex; gap: 8px; }
.c-langs .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 6px 10px; }
/* capacity bar in the timetable card */
.cap-bar {
  display: inline-block;
  width: 64px;
  height: 6px;
  background: var(--paper-2);
  border-radius: 3px;
  overflow: hidden;
}
.cap-bar i { display: block; height: 100%; background: var(--red); border-radius: 3px; }
/* sparring timer card */
.c-timer { display: flex; gap: 10px; margin-bottom: 6px; }
.ct-block {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.ct-block small {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.ct-block span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.ct-block.on { border-color: var(--red); }
.ct-block.on span { color: var(--red); animation: timerBlink 1.4s steps(1) infinite; }
@keyframes timerBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* birthday + shop cards */
.c-cake { font-size: 1.8rem; margin-bottom: 6px; animation: cakeBob 3s ease-in-out infinite; display: inline-block; }
@keyframes cakeBob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.c-shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.c-shop-item + .c-shop-item { border-top: 1px solid var(--paper-2); }
.c-shop-ph {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.c-shop-item strong { display: block; font-size: 0.86rem; font-weight: 600; }
.c-shop-item small { color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; }

/* ---------- everything-else grid ---------- */

.more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.more-cell {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 26px;
  transition: background 0.3s var(--ease);
  overflow: hidden;
}
.more-cell::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.more-cell:hover { background: var(--white); }
.more-cell:hover::after { transform: scaleX(1); }
.more-cell .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 12px;
}
.more-cell h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.more-cell p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- use case: JJS Ticino ---------- */

.usecase {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.usecase::before {
  /* the team photo, washed into the paper background */
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/jjs/team.jpg') center 30% / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.32;
}
.usecase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242,241,236,0.9) 0%, rgba(242,241,236,0.55) 55%, rgba(242,241,236,0.25) 100%),
    linear-gradient(0deg, rgba(242,241,236,0.9) 0%, transparent 45%);
}
.usecase .wrap { position: relative; z-index: 1; }
.usecase-grid {
  display: grid;
  grid-template-columns: auto 1.1fr 0.75fr;
  gap: clamp(28px, 4.5vw, 70px);
  align-items: start;
}
.usecase-photo { width: clamp(180px, 18vw, 250px); }
.usecase-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1) contrast(1.05);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -20px rgba(18, 17, 15, 0.35);
}
.usecase-photo figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.usecase-photo figcaption strong { color: var(--ink); display: block; }
.usecase blockquote {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  position: relative;
  padding-top: 40px;
}
.usecase blockquote::before {
  content: '“';
  position: absolute;
  top: -14px; left: -6px;
  font-size: 5.5rem;
  color: var(--red);
  font-family: Georgia, serif;
  line-height: 1;
}
.usecase .who {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.usecase .who strong { color: var(--ink); }
.usecase-side { display: flex; flex-direction: column; }
.usecase-side .uc-stat {
  padding: 18px 0;
  border-top: 1px solid rgba(18, 17, 15, 0.15);
}
.usecase-side .uc-stat .big {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.usecase-side .uc-stat .big span { font-size: 1rem; color: var(--ink-2); font-weight: 500; }
.usecase-side .uc-stat .lbl { color: var(--ink-2); font-size: 0.92rem; }
.usecase-side .btn { align-self: flex-start; margin-top: 26px; }

/* ---------- pricing ---------- */

.pricing { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.pricing .sec-head p { color: #b6b3ab; }
.pricing .eyebrow::after { background: #33322e; }
.pricing-shaka {
  position: absolute;
  left: -6vw; top: -8vh;
  font-size: clamp(240px, 26vw, 420px);
  opacity: 0.05;
  transform: rotate(14deg);
  pointer-events: none;
  user-select: none;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #2c2b28;
  position: relative;
  z-index: 1;
}
.plan {
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.3s var(--ease);
}
.plan + .plan { border-left: 1px solid #2c2b28; }
.plan:hover { background: rgba(255, 255, 255, 0.025); }
/* belt-coloured top edge: black → coral (black/red alternating) → red */
.plan::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.plan-blackbelt::before { background: #050505; }
.plan-coral::before {
  background: repeating-linear-gradient(90deg, #050505 0 40px, var(--red) 40px 80px);
}
.plan-red::before { background: var(--red); }

/* the platform fee, stated where you can't miss it */
.plan .fee {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #efece4;
  border: 1px dashed #45443f;
  border-radius: 2px;
  padding: 8px 10px;
  margin-bottom: 26px;
}
.plan .fee strong { color: var(--red); font-weight: 700; }
.plan h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plan .cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d8a82;
  margin-bottom: 28px;
}
.plan .price { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { font-size: 1rem; font-weight: 500; color: #8d8a82; letter-spacing: 0; }
.plan .per { font-size: 0.85rem; color: #8d8a82; margin: 8px 0 28px; }
.plan ul { display: flex; flex-direction: column; margin-bottom: 34px; }
.plan ul li {
  font-size: 0.92rem;
  color: #cfccc4;
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid #26251f;
}
.plan ul li::before { content: '·'; color: var(--red); font-weight: 800; }
.plan .btn { margin-top: auto; justify-content: center; }
.pricing-note {
  margin-top: 32px;
  font-size: 1rem;
  color: #cfccc4;
  position: relative;
  z-index: 1;
  max-width: 46em;
}
.pricing-note strong { color: #fff; }

/* ---------- blog: editorial rows ---------- */

.blog-rows { border-top: 1px solid var(--ink); }
.blog-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  padding: 30px 8px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.blog-row:hover { background: var(--white); padding-left: 20px; }
.blog-row .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.blog-row h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.02em; margin-bottom: 6px; }
.blog-row p { font-size: 0.95rem; color: var(--ink-2); max-width: 44em; }
.blog-row .read {
  font-size: 1.6rem;
  transition: transform 0.35s var(--ease), color 0.3s;
  color: var(--ink-3);
}
.blog-row:hover .read { transform: translateX(8px); color: var(--red); }

/* article pages */
.article { max-width: 720px; margin: 0 auto; padding: 150px 24px 100px; }
.article .eyebrow { margin-bottom: 24px; }
.article h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 20px; }
.article .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 48px;
}
.article h2 { font-size: 1.6rem; margin: 48px 0 16px; }
.article p, .article li { color: #3d3b36; margin-bottom: 18px; font-size: 1.05rem; }
.article ul { list-style: disc; padding-left: 22px; }
.article ul li { margin-bottom: 8px; }
.article strong { color: var(--ink); }
.article .article-cta {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--ink);
  background: var(--white);
  text-align: center;
}
.article .article-cta p { margin-bottom: 20px; }

/* ---------- final CTA ---------- */

.cta-final { text-align: center; padding: 140px 0; position: relative; overflow: hidden; }
.cta-video-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-video-layer video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.5;
}
.cta-video-layer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(242,241,236,0.92) 0%, rgba(242,241,236,0.6) 55%, rgba(242,241,236,0.85) 100%);
}
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final h2 { margin-bottom: 18px; }
.cta-final p { color: var(--ink-2); margin-bottom: 40px; font-size: 1.1rem; max-width: 36em; margin-left: auto; margin-right: auto; }
.cta-final .hero-ctas { justify-content: center; }

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

footer { border-top: 1px solid var(--line); padding: 56px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-inner .logo { font-size: 1.1rem; }
.footer-links {
  display: flex;
  /* six links outgrow a 375px phone — without the wrap they widen the layout
     viewport and the whole page shrinks with a gutter on the right */
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.footer-links a:hover { color: var(--ink); }
.footer-note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

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

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-phone .iphone, .hs-app.academy .hs-icon, .ref-days, .hero-shaka-bg { animation: none; }
  /* the wordmark still resolves to OSS 🤙🏻. where it should — it just gets
     there in one frame, with no caret blinking */
  .mk-l, .mk-y, .mk-hand, .mk-dot { transition: none; }
  .armed .mk-caret { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  section { padding: 80px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero { padding-top: 120px; min-height: auto; }
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 44px; padding: 56px 0; }
  /* stacked, the pitch always comes before the picture */
  .feature-row.flip .feature-copy { order: 1; }
  /* stacked, the kids card is back in normal flow and needs no room reserved */
  .bjj-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 0; }
  .bjj-top .sec-head { margin-bottom: 0; }
  .more-grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid #2c2b28; }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-photo { width: min(240px, 60vw); }
  .float-scene { min-height: 0; flex-direction: column; gap: 18px; }
  .float-scene .fl { position: static; --rot: 0deg; transform: none !important; }
  .float-scene .drift { animation: none; }
  /* stacked, one feed card sits in normal flow and script.js keeps playing the
     story inside it — the other slots would land off screen. Only the opacity
     half of coIn/coOut survives here, .fl having pinned the transform. */
  .pay-scene .co-side { width: 100%; max-width: 360px; }
  .pay-scene [data-pay-slot] ~ [data-pay-slot] { display: none; }
  .rank-scene { flex-direction: column; align-items: center; gap: 18px; }
  .rank-scene .fl { position: static !important; transform: none !important; animation: none; }
  /* the certificate and the growth card are the centred child, not .fl */
  .cert-scene .cert-card, .ref-scene .ref-anim { transform: none; }
  .cert-scene .promo-hist { order: 2; margin: 0; transform: none; }
  .cert-scene .cert-card { order: 1; width: min(330px, 100%); }
  .cert-scene, .ref-scene, .tec-scene { min-height: 0; }
  .promo-hist, .ref-growth { width: min(330px, 100%); }
  .tec-card { width: min(370px, 100%); transform: none; }
  .tec-video { order: 2; margin: 0; transform: none; width: min(330px, 100%); }
  .blog-row { grid-template-columns: 1fr auto; }
  .blog-row .k { grid-column: 1 / -1; }
  .hero-proof { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  /* the header has to fit logo + language + CTA on a 375px phone: everything
     in it loses a size, and the CTA drops its arrow */
  .wrap { padding: 0 20px; }
  .nav-inner { height: 62px; }
  .logo { font-size: 1.05rem; }
  .nav-links { gap: 10px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links .lang { display: flex; }
  .lang-current { padding: 8px 9px; gap: 5px; }
  .nav-links .btn { padding: 10px 13px; font-size: 10.5px; letter-spacing: 0.08em; }
  .nav-links .btn .arr { display: none; }
  .hero { padding-top: 104px; }

  /* mono micro-labels are the first thing to overflow at this width. As a flex
     row the "01 ·" prefix gets squeezed onto its own line, so they lay out as
     plain text here and give up the trailing hairline. */
  .eyebrow { display: block; font-size: 10.5px; letter-spacing: 0.16em; }
  .eyebrow::after { display: none; }
  .btn { font-size: 11.5px; letter-spacing: 0.1em; padding: 15px 20px; }

  /* at this width even a short tail wraps, so the row reads as inline text —
     the source spacing is already right, the flex gap is what has to go */
  .checks li { display: block; }

  .more-grid { grid-template-columns: 1fr; }
  /* wrapped onto their own lines, the vertical rules read as stray indents */
  .hero-proof { flex-direction: column; }
  .hero-proof div { padding: 14px 0 0; }
  .hero-proof div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .hero-proof strong { font-size: 1.2rem; }
}

/* ============================================================
   /start — the signup form, and /thanks
   Squared inputs on paper, hairline borders, mono labels: the
   same vocabulary as the rest of the page, nothing rounded.
   ============================================================ */

.start-sec { padding: 150px 0 110px; }
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: start;
}
.start-main .sec-head { margin-bottom: 38px; }
.start-main h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); margin-bottom: 16px; }

/* ---------- the form ---------- */

.form { display: flex; flex-direction: column; gap: 22px; max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.field label,
.field legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0;
}
.field .opt { color: var(--ink-3); letter-spacing: 0.14em; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 15px;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  /* the native arrow is the one rounded thing on the page */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(18, 17, 15, 0.07);
}
.field input.bad,
.field select.bad { border-color: var(--red); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

.field .hint { font-size: 0.86rem; color: var(--ink-3); line-height: 1.45; }

/* the honeypot: present for a bot reading the DOM, gone for everyone else */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- billing switch ---------- */

/* Every rule here is scoped under .billing on purpose: these are <label>s
   inside a .field, so a bare .seg-opt loses to `.field label` and the whole
   control collapses to the height of its text. */
.billing .seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.billing .seg-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 17px 14px;
  cursor: pointer;
  background: var(--white);
  font-family: var(--font-mono);
  color: var(--ink-2);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.billing .seg-opt + .seg-opt { border-left: 1px solid var(--line); }
.billing .seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.billing .seg-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.billing .seg-sub {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink-3);
  text-transform: none;
  display: flex;
  gap: 7px;
}
.billing .seg-save { color: var(--red); }
.billing .seg-opt:hover { background: var(--paper-2); }
.billing .seg-opt:has(input:checked) { background: var(--ink); color: var(--white); }
.billing .seg-opt:has(input:checked) .seg-sub { color: #9b9790; }
.billing .seg-opt:has(input:checked) .seg-save { color: #f0a0a6; }
.billing .seg-opt:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: -2px; }

/* ---------- running total ---------- */

.summary {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.summary-plan {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.summary-price { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.summary-note { font-size: 0.86rem; color: var(--ink-3); }

.form .btn { align-self: flex-start; }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.form-fine { font-size: 0.84rem; color: var(--ink-3); }

.form-error {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--red);
  border-left: 2px solid var(--red);
  padding-left: 12px;
}
.form-error a { text-decoration: underline; }
.form-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border-left: 2px solid var(--ink-3);
  padding-left: 12px;
  margin-bottom: 26px;
}
.form-note a { text-decoration: underline; }

/* ---------- the rail ---------- */

.start-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 26px; }
.aside-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px; padding: 30px 28px; }
.aside-card .eyebrow { margin-bottom: 22px; }
/* the global reset only silences ul, and this ol brings its own numbers */
.steps { counter-reset: step; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.steps li { position: relative; padding-left: 34px; counter-increment: step; }
.steps li::before {
  content: '0' counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
}
.steps h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.steps p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }

.aside-facts { display: flex; flex-direction: column; gap: 10px; }
.aside-facts li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.aside-facts li::before { content: '·'; position: absolute; left: 6px; color: var(--red); font-weight: 700; }

/* ---------- /thanks ---------- */

.thanks-sec { padding: 190px 0 140px; text-align: center; }
/* ---------- contact ---------- */
.contact-wrap { max-width: 34rem; }
.contact-wrap .sec-head { margin-bottom: 40px; }
.contact-wrap h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 16px; }
.contact-done h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }

/* ---------- imprint ---------- */
.imprint dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 30px;
}
.imprint dd { margin-top: 8px; line-height: 1.65; color: var(--ink-2); }
.imprint dd a { text-decoration: underline; }
.contact-done .lede { margin-bottom: 26px; }

.thanks-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.thanks-wrap h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.thanks-wrap .lede { margin: 0 auto; }
.thanks-wrap .hero-ctas { justify-content: center; margin-top: 14px; }

@media (max-width: 980px) {
  .start-grid { grid-template-columns: 1fr; gap: 48px; }
  .start-aside { position: static; }
}

@media (max-width: 720px) {
  .start-sec { padding: 120px 0 80px; }
  .field-row { grid-template-columns: 1fr; gap: 22px; }
  .form .btn { align-self: stretch; justify-content: center; }
  .thanks-sec { padding: 140px 0 100px; }
}