/* =========================================================
   VIBERY.IS landing. Design port S433 (2026-08-27) from the
   approved direction mock-up (build/vibery-site-mockup):
   Bright Future-Noir system, one 8/12/16/24/32/48/64/96 spacing
   scale, Anton display / Inter body / JetBrains Mono readouts.
   Colour has a job: cyan = workflow, flamingo = creative punch,
   violet = the team, lime = action, amber = founder trust.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");

:root {
  --ink-950: #080912;
  --ink-900: #0d0f1a;
  --ink-850: #111420;
  --ink-800: #171a29;
  --line: #2a2e43;
  --line-soft: rgba(175, 180, 198, .14);
  --paper: #f4f1e9;
  --mist: #afb4c6;
  --dim: #858b9f;
  --cyan: #4fe8f7;
  --flamingo: #ff4fd8;
  --lime: #c7ff4a;
  --violet: #9b7bff;
  --violet-deep: #5e17eb; /* S466: the role numerals' circle, from Jono's mock */
  --amber: #ffb45e;
  --coral: #ff7078;
  --display: "Anton", Impact, sans-serif;
  --body: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --content: 1200px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --section-space: clamp(72px, 8vw, 104px);
  --layout-gap: clamp(40px, 5vw, 64px);
  --ease: cubic-bezier(.2, .75, .2, 1);
}

/* ------------------ Base ------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
::selection { background: var(--lime); color: var(--ink-950); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.wrap {
  width: min(var(--content), calc(100% - 48px));
  margin-inline: auto;
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section {
  position: relative;
  padding: var(--section-space) 0;
  border-top: 1px solid var(--line-soft);
}
.section-kicker {
  margin: 0 0 var(--space-3);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.section-title {
  max-width: 850px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.3rem, 7vw, 7rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .92;
  text-transform: uppercase;
  text-wrap: balance;
}
.section-intro {
  max-width: 650px;
  margin: var(--space-4) 0 0;
  color: var(--mist);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
}
.image-caption { margin: var(--space-2) 0 0; color: var(--dim); }

/* ------------------ Header ------------------ */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 72px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 18, .91);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1360px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
}
.wordmark {
  display: inline-block;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
}
.wordmark span { color: var(--cyan); }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a, .more-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.main-nav a:hover, .more-toggle:hover { color: var(--paper); }
.apply-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 18px;
  background: var(--lime);
  color: var(--ink-950) !important;
}
.apply-link:hover { background: #d6ff75; }
.more-menu { position: relative; }
.more-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.more-toggle .chev { font-size: 10px; transition: transform 180ms ease; }
.more-menu.is-open .more-toggle .chev { transform: rotate(180deg); }
.more-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  min-width: 200px;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--ink-900);
  padding: var(--space-1) 0;
}
.more-menu.is-open .more-list { display: flex; }
.more-list a {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-3);
}
.more-list a:hover { background: var(--ink-850); }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--paper);
  transition: transform 180ms ease, opacity 180ms ease;
}
.main-nav.is-open ~ .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.main-nav.is-open ~ .menu-toggle span:nth-child(2) { opacity: 0; }
.main-nav.is-open ~ .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------ Buttons ------------------ */
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease;
}
.button:hover { transform: translateY(-2px); border-color: var(--cyan); }
.button.primary { border-color: var(--lime); background: var(--lime); color: var(--ink-950); }
.button.primary:hover { background: #d6ff75; border-color: #d6ff75; }
.button-arrow { font-size: 16px; }

/* ------------------ Hero ------------------ */
.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
}
.hero::before {
  position: absolute;
  inset: -20% -10% auto 42%;
  width: 80%;
  height: 100%;
  transform: rotate(-8deg);
  background: linear-gradient(110deg, transparent 38%, rgba(79, 232, 247, .08) 49%, rgba(79, 232, 247, .025) 57%, transparent 70%);
  content: "";
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  gap: var(--layout-gap);
  align-items: center;
}
/* S438 (Jono): the board itself is the hero image, on the right where the demo
 * card was; a click opens it at twice the size so every tile can be read. */
.hero-board {
  position: relative;
  margin: 0;
  border: 1px solid #353a50;
  background: #0b0d15;
  box-shadow: 24px 32px 0 rgba(155, 123, 255, .07);
  scroll-margin-top: 96px;
}
.hero-board::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 84px;
  height: 3px;
  background: var(--violet);
  content: "";
}
.hero-board img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-board figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--mist);
  font-size: 12px;
  letter-spacing: .04em;
}

.hero-board-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.hero-board-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 9px;
  background: rgba(8, 9, 18, .86);
  border: 1px solid var(--line);
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.board-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 8, .94);
  cursor: zoom-out;
}
.board-zoom[hidden] { display: none; }
.board-zoom img {
  display: block;
  width: min(calc(2 * var(--board-w, 600px)), 96vw);
  max-height: 92vh;
  height: auto;
  object-fit: contain;
  border: 1px solid #353a50;
  background: #0b0d15;
}
.board-zoom-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  color: var(--mist);
}
.availability i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(79, 232, 247, .75);
}
.hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5.2rem, 9vw, 9rem);   /* S481: 9.6rem let 'NEEDS DOING.' run into the hero figure */
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .84;
  text-transform: uppercase;
}
.hero h1 span { display: block; }
.hero h1 em, .section-title em {
  font-style: normal;
}
/* S438 (Jono): the second Your in 'Your coffee. Your call.' wears a palette colour. */
.section-title em.lime { color: var(--lime); text-shadow: 0 0 28px rgba(199, 255, 74, .25); }
.section-title em.cyan { color: var(--cyan); text-shadow: 0 0 28px rgba(79, 232, 247, .25); }
.section-title em.violet { color: var(--violet); text-shadow: 0 0 28px rgba(155, 123, 255, .28); }
.section-title em.flamingo { color: var(--flamingo); text-shadow: 0 0 28px rgba(255, 79, 216, .27); }
.section-title em.amber { color: var(--amber); text-shadow: 0 0 28px rgba(255, 180, 94, .28); }
/* S481, Jono: 'the word FOUNDER in the heading can be the same colour as my shirt': the median yellow of the shirt in founder-message-poster.jpg */
.section-title em.shirt { color: #dcd026; text-shadow: 0 0 28px rgba(220, 208, 38, .3); }
.hero h1 em {
  color: var(--flamingo);
  text-shadow: 0 0 28px rgba(255, 79, 216, .27);
}
.hero-copy {
  max-width: 610px;
  margin-top: var(--space-4);
  color: var(--mist);
  font-size: clamp(1.07rem, 1.6vw, 1.28rem);
}
.hero-copy strong { color: var(--paper); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hero-note { margin: var(--space-2) 0 0; color: var(--dim); }

/* The approval board demo */
.board-shell {
  position: relative;
  border: 1px solid #353a50;
  background: #0b0d15;
  box-shadow: 24px 32px 0 rgba(155, 123, 255, .07);
  scroll-margin-top: 96px;
}
.board-shell::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 84px;
  height: 3px;
  background: var(--violet);
  content: "";
}
.board-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 49px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-850);
}
.board-status { display: flex; align-items: center; gap: 7px; color: var(--cyan); }
.board-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.board-body { display: grid; grid-template-columns: 44% 56%; min-height: 430px; }
.board-preview { position: relative; overflow: hidden; border-right: 1px solid var(--line); background: #05060a; }
.board-preview img { width: 100%; height: 100%; object-fit: cover; }
.board-preview::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 10, .9), transparent 35%);
  content: "";
}
.format-tag {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  padding: 5px 8px;
  background: rgba(8, 9, 18, .86);
  color: var(--cyan);
}
.board-decision { display: flex; min-width: 0; flex-direction: column; padding: 24px; }
.queue-index { color: var(--mist); }
.board-decision h2 {
  margin: 15px 0 8px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .94;
  text-transform: uppercase;
}
.board-decision > p { margin: 0; color: var(--mist); font-size: 14px; line-height: 1.5; }
.decision-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--amber);
}
.decision-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.board-actions { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 7px; margin-top: auto; padding-top: 18px; }
.board-actions button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mist);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.board-actions button:hover { border-color: var(--paper); color: var(--paper); }
.board-actions .approve { border-color: rgba(199, 255, 74, .55); color: var(--lime); }
.fix-note { display: none; gap: 7px; margin-top: 10px; }
.fix-note.is-visible { display: flex; }
.fix-note input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  background: var(--ink-950);
  color: var(--paper);
  padding: 10px;
  font-size: 13px;
}
.fix-note button {
  min-height: 44px;
  border: 0;
  background: var(--cyan);
  color: var(--ink-950);
  cursor: pointer;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reset-demo {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #777e92;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.board-shell.is-approved { border-color: rgba(199, 255, 74, .55); }
.board-shell.is-approved .decision-state { color: var(--lime); }
.board-shell.is-fix .decision-state { color: var(--cyan); }
.board-shell.is-held .decision-state { color: var(--coral); }

.control-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.control-item { min-width: 0; padding: var(--space-4); border-left: 1px solid var(--line); }
.control-item:first-child { border-left: 0; padding-left: 0; }
.control-item b { display: block; margin-bottom: 3px; font-size: 14px; }
.control-item span { color: var(--mist); font-size: 13px; }
.control-item .signal { color: var(--lime); }

/* ------------------ The board (story) ------------------ */
.board-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(500px, 1.3fr);
  gap: var(--layout-gap);
  align-items: center;
}
.board-story-copy h2 { color: var(--paper); }
.board-story-copy > p { max-width: 500px; margin-top: var(--space-4); color: var(--mist); }
.morning-list { margin: var(--space-5) 0 0; padding: 0; list-style: none; counter-reset: moment; }
.morning-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  color: var(--mist);
}
.morning-list li::before {
  counter-increment: moment;
  content: "0" counter(moment);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}
.board-screenshot { position: relative; padding: var(--space-4) 0 0 var(--space-4); }
.board-screenshot::before {
  position: absolute;
  inset: 0 var(--space-4) auto 0;
  height: calc(100% - var(--space-4) - 30px);
  border: 1px solid var(--violet);
  content: "";
  opacity: .5;
}
.board-media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-900);
  aspect-ratio: 16 / 9;
}
.board-media video { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.board-media video:fullscreen, .board-media video:-webkit-full-screen { object-fit: contain; background: #000; }
.board-screenshot .image-caption { position: relative; z-index: 1; }
/* S466 (Jono): the walkthrough opens at twice its size, like the hero board (S438). */
.board-media-open {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: rgba(8, 9, 18, .86);
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: zoom-in;
  transition: background 180ms ease, color 180ms ease;
}
.board-media-open:hover, .board-media-open:focus-visible { background: var(--lime); color: var(--ink-950); border-color: var(--lime); }
.board-zoom video {
  display: block;
  width: min(calc(2 * var(--board-w, 600px)), 96vw, calc(92vh * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  border: 1px solid #353a50;
  background: #0b0d15;
  cursor: default;
}

/* Sound pill shared by the board walkthrough and the founder video */
.sound-toggle {
  position: absolute;
  z-index: 4;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(8, 9, 18, .78);
  color: var(--paper);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: soundFlash 1.4s ease-in-out infinite;
  transition: background 180ms ease, color 180ms ease;
}
@keyframes soundFlash {
  0%, 100% { background: rgba(8, 9, 18, .78); color: var(--paper); border-color: rgba(255, 255, 255, .22); }
  50% { background: var(--lime); color: var(--ink-950); border-color: var(--lime); }
}
.sound-toggle:hover { animation: none; background: var(--cyan); color: var(--ink-950); border-color: var(--cyan); }
.sound-toggle .icon-unmuted { display: none; }
.unmuted .sound-toggle { animation: none; }
.unmuted .sound-toggle .icon-muted { display: none; }
.unmuted .sound-toggle .icon-unmuted { display: block; }
.unmuted .sound-toggle .label { display: none; }

/* ------------------ The team ------------------ */
.team-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--layout-gap);
  align-items: start;
}
.team-title em { color: var(--violet); }
.team-roles { border-top: 1px solid var(--line); }
.role-row {
  display: grid;
  grid-template-columns: 104px 1fr minmax(180px, .65fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
/* S466 (Jono's mock): the role number is a big white numeral in a filled circle. */
.role-row .role-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--violet-deep);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.03em;
}
.role-row h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.role-row p { margin: 0; color: var(--mist); font-size: 14px; }

/* ------------------ Examples in native chrome ------------------ */
.examples { overflow: hidden; }
.examples-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.examples-header .button { flex: 0 0 auto; }
.examples .section-title span { display: block; }
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-6);
}
.social-post {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2f3336;
  background: #000;
  color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
}
.social-post svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.social-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4fd8, #9b7bff 50%, #4fe8f7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.social-account { min-width: 0; }
.social-name { display: flex; align-items: center; gap: 4px; font-weight: 650; line-height: 1.2; }
.social-handle { overflow: hidden; color: #a8a8a8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.verified-badge {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: #1d9bf0;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.native-demo-note { color: #8b98a5; font-size: 11px; }

.instagram-post { border-color: #262626; }
.ig-header {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-2);
}
.ig-avatar-ring {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(#d300c5, #ff3040, #ffdc80, #d300c5);
}
.ig-avatar-ring .social-avatar { width: 32px; height: 32px; border: 2px solid #000; }
.ig-menu { margin-left: auto; font-size: 20px; letter-spacing: 2px; }
.ig-media { margin: 0; border-block: 1px solid #262626; background: #111; }
.ig-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* S465: the Instagram frame is a carousel (the Animal Coffee pairings). Native
   scroll-snap, the counter pill and the dots follow the scroll (script.js). */
.ig-carousel-wrap { position: relative; }
.ig-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ig-carousel::-webkit-scrollbar { display: none; }
.ig-carousel img { flex: 0 0 100%; scroll-snap-align: start; }
.ig-count { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; line-height: 1; }
.ig-dots { position: absolute; right: 0; bottom: 10px; left: 0; display: flex; justify-content: center; gap: 5px; }
.ig-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ig-dots i.active { background: #fff; }
.ig-actions { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-1); }
.ig-actions .ig-save { margin-left: auto; }
.ig-caption { padding: 0 var(--space-3) var(--space-3); }
.ig-caption p { margin: 0 0 6px; }
.ig-caption strong { margin-right: 5px; }
.ig-caption .native-demo-note { display: block; margin-top: var(--space-1); text-transform: uppercase; }

.x-post { padding: var(--space-3); border-radius: 14px; }
.x-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-1); align-items: start; }
.x-header .social-avatar { width: 40px; height: 40px; }
.x-mark { font-size: 19px; line-height: 1; }
.x-copy { margin: var(--space-2) 0 var(--space-3) 48px; }
.x-media { margin: 0 0 var(--space-2) 48px; overflow: hidden; border: 1px solid #2f3336; border-radius: 14px; }
.x-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.x-media.portrait img { aspect-ratio: 3 / 4; }
.reel-post .tt-top { justify-content: center; }
.x-actions { display: flex; justify-content: space-between; margin-left: 48px; color: #71767b; }
.x-actions span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.x-actions svg { width: 18px; height: 18px; }
.x-meta { margin: var(--space-2) 0 0 48px; color: #71767b; font-size: 12px; }
.x-meta a { display: inline-flex; align-items: center; min-height: 44px; color: #1d9bf0; }

.tiktok-post {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: center;
  border-color: #252525;
  border-radius: 12px;
  aspect-ratio: 9 / 16;
  background: #111;
}
.tiktok-post::after {
  position: absolute;
  z-index: 1;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .82));
  content: "";
  pointer-events: none;
}
.tiktok-post > img, .tiktok-post > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tiktok-post > video { opacity: 0; transition: opacity 200ms ease; }
.tiktok-post.is-playing > video { opacity: 1; }
.tt-top {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  font-size: 13px;
  font-weight: 650;
  text-shadow: 0 1px 4px #000;
}
.tt-top .active::after { display: block; width: 18px; height: 2px; margin: 5px auto 0; background: #fff; content: ""; }
.tt-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tt-play svg { width: 26px; height: 26px; margin-left: 3px; fill: #fff; stroke: none; }
.tiktok-post.is-playing .tt-play { opacity: 0; }
.tiktok-post.is-playing .tt-play:hover, .tiktok-post.is-playing .tt-play:focus-visible { opacity: 1; }
.tt-actions {
  position: absolute;
  z-index: 3;
  right: var(--space-2);
  bottom: 84px;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  pointer-events: none;
}
.tt-actions > span { display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 650; text-shadow: 0 1px 4px #000; }
.tt-actions i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.tt-actions .social-avatar { width: 42px; height: 42px; border: 1px solid #fff; }
.tt-copy { position: absolute; z-index: 3; left: var(--space-3); right: 66px; bottom: var(--space-3); text-shadow: 0 1px 4px #000; pointer-events: none; }
.tt-copy strong { display: block; margin-bottom: 7px; }
.tt-copy p { margin: 0 0 var(--space-1); }
.tt-sound { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------ The loop ------------------ */
.loop { background: var(--ink-900); }
.loop-title em { color: var(--cyan); }
/* S438 (Jono): "Approved work out" needs to be on the second line. */
.loop-title span { display: block; }
/* S466 (Jono's mock): the four steps sit on the line as big numerals in
   filled circles, each with its name in the display face beside it. */
.loop-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-6);
}
.loop-track::before {
  position: absolute;
  top: 36px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--cyan);
  content: "";
}
.loop-step { position: relative; padding: 0 var(--space-4) 0 0; }
.loop-head { display: flex; align-items: flex-end; gap: 14px; }
.loop-num {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--violet-deep);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.03em;
}
.loop-name {
  padding-bottom: 18px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .01em;
}
.loop-step h3 { margin: 14px 0 7px; font-size: 19px; }
.loop-step p { margin: 0; color: var(--mist); font-size: 14px; }

/* ------------------ Pricing ------------------ */
.price-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: var(--layout-gap);
  align-items: end;
}
.price-title em { color: var(--lime); }
.price-fine { margin: var(--space-4) 0 0; color: var(--dim); }
.price-branch { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.price-option { background: var(--ink-850); padding: var(--space-5); }
.price-option.featured { border-left: 4px solid var(--lime); }
.price-option .price {
  margin-top: 15px;
  font-family: var(--display);
  font-size: clamp(3.5rem, 6vw, 5.7rem);
  line-height: 1;
}
.price-option .price small { color: var(--mist); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.price-option h3 { margin: 12px 0 8px; font-size: 18px; }
.price-list { margin: 0; padding: 0; list-style: none; }
.price-list li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  color: var(--mist);
  font-size: 14px;
  line-height: 1.5;
}
.price-list li::before {
  position: absolute;
  left: 0;
  top: calc(var(--space-1) + .55em);
  width: 10px;
  height: 2px;
  background: var(--cyan);
  content: "";
}
.price-option.featured .price-list li::before { background: var(--lime); }
.price-option .button { width: 100%; margin-top: var(--space-4); }

/* ------------------ About (founder) ------------------ */
.founder { background: #0a0b12; }
.founder-grid {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
  gap: var(--layout-gap);
  align-items: center;
}
.founder-video-col { display: flex; flex-direction: column; align-items: center; }
.founder-video-col .image-caption { margin-top: var(--space-6); text-align: center; }
.founder-video {
  position: relative;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 9 / 16;
  box-shadow: 24px 32px 0 rgba(255, 180, 94, .08);
}
.founder-video video { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(8, 9, 18, .86);
  color: var(--amber);
}
.media-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* S467: the sound pill (shared base rule above, bottom-centre) collided
   with the founder video's burned-in captions once they went bigger --
   moved to the top-right corner here, pairing with the FOUNDER badge at
   top-left, so nothing sits over the caption band. Scoped to
   .founder-video because .sound-toggle is shared with the board
   walkthrough, which keeps the shared bottom-centre position.
   Round 2: a labelled badge + a labelled pill don't both fit this 360px
   top edge (measured: 187px + 162px > 360px). The badge keeps its words;
   the founder pill becomes icon-only (the universal muted-speaker
   affordance) at a 44x44 round touch target. Same background/border/
   icon colours as the shared base rule -- only shape, size and the
   visible label change here. */
.founder-video .sound-toggle {
  top: 16px;
  right: 16px;
  bottom: unset;
  left: unset;
  transform: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
/* sr-only: the label stays in the accessible tree (the toggle click
   handler also sets aria-label dynamically in script.js -- this is
   redundant with that, kept anyway per instruction) but is removed from
   the visual layout and clipped to nothing, rather than display:none
   which would drop it from the accessibility tree too. Scoped the same
   way -- the board walkthrough's pill keeps its visible label. */
.founder-video .sound-toggle .label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.video-replay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(8, 9, 18, .62);
  color: var(--paper);
  cursor: pointer;
  font-size: 12px;
}
.video-replay:hover { color: var(--lime); }
.founder-video.ended .video-replay { display: flex; }
.founder-video.ended .sound-toggle { display: none; }
.founder-copy .section-kicker { color: var(--amber); }
.founder-copy .section-title { font-size: clamp(3.2rem, 6vw, 6rem); }
.founder-copy p { max-width: 620px; margin-top: var(--space-4); color: var(--mist); }
.truth-line {
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--paper) !important;
  font-size: 15px;
}
.founder-copy .button { margin-top: var(--space-5); }
.founders-photo {
  position: relative;
  width: min(var(--content), calc(100% - 48px));
  margin: var(--space-7) auto 0;
}
.founders-photo img { width: 100%; height: auto; border: 1px solid var(--line); }

/* ------------------ FAQ ------------------ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.faq-item {
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}
.faq-item h3 { margin: 0 0 var(--space-1); font-size: 17px; }
.faq-item p { margin: 0; color: var(--mist); font-size: 14px; }

/* ------------------ Apply ------------------ */
.apply-section { background: var(--paper); color: var(--ink-950); }
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  gap: var(--layout-gap);
  align-items: start;
}
.apply-section .section-kicker { color: #116b75; }
.apply-section .section-title { font-size: clamp(4.2rem, 8vw, 8rem); }
.apply-section .section-title em { color: #b3138e; }
.apply-section .section-intro { color: #444957; }
.next-steps { margin: var(--space-5) 0 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0 12px;
  padding: var(--space-3) 0;
  border-top: 1px solid #d5d1c6;
}
.next-steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  grid-row: 1 / span 2;
  color: #116b75;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.8;
}
.next-steps b { font-size: 15px; font-weight: 600; }
.next-steps span { color: #444957; font-size: 14px; }
.apply-form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #b8b4aa;
  border-radius: 0;
  background: transparent;
  color: var(--ink-950);
  padding: var(--space-2) var(--space-3);
}
.field select { appearance: auto; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid #116b75;
  outline-offset: 0;
}
.field textarea { min-height: 110px; resize: vertical; }
.field ::placeholder { color: #8a8678; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.apply-form .button { width: 100%; border-color: var(--ink-950); background: var(--ink-950); color: var(--paper); cursor: pointer; }
.apply-form .button:hover { border-color: #1b1d28; background: #1b1d28; }
.apply-form .button:disabled { cursor: default; transform: none; opacity: .85; }
.apply-form .button.is-sent { background: #116b75; border-color: #116b75; }
.form-status { min-height: 20px; margin: 0; color: #116b75; }
.form-fine { margin: 0; color: #6b6f7c; text-align: center; }

/* ------------------ Footer ------------------ */
.site-footer { padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr .8fr; gap: var(--space-6); }
.footer-grid h3 { margin: 0 0 var(--space-3); color: var(--mist); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.footer-grid a { display: flex; align-items: center; min-height: 44px; margin: 0; color: var(--mist); font-size: 14px; }
.footer-grid a:hover { color: var(--paper); }
.footer-grid .footer-cta { color: var(--cyan); }
.footer-grid .wordmark { color: var(--paper); margin: 0; }
.footer-grid p { max-width: 360px; margin: var(--space-2) 0 0; color: var(--mist); font-size: 14px; }
.footer-meta { color: var(--dim); }

/* ------------------ Motion ------------------ */
.reveal { transform: translateY(24px); opacity: 0; transition: transform 620ms var(--ease), opacity 620ms var(--ease); }
.reveal.is-visible { transform: none; opacity: 1; }

/* ------------------ Responsive ------------------ */
@media (max-width: 1040px) {
  .loop-track::before { top: 30px; }
  .loop-num { width: 84px; height: 84px; font-size: 56px; }
  .loop-name { padding-bottom: 12px; font-size: 28px; }
  .main-nav { gap: 18px; }
  .hero-grid, .board-story-grid, .team-layout, .price-layout, .founder-grid, .apply-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: var(--space-7); }
  .hero h1 { max-width: 860px; }
  .board-shell { max-width: 680px; }
  .board-story-grid, .team-layout, .price-layout, .founder-grid, .apply-grid { gap: var(--space-6); }
  .board-screenshot { max-width: 800px; }
  .founder-video-col { align-items: flex-start; }
  .social-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: 1fr 1fr; }
}


/* S438 (Jono, phone/iPad pass): an iPad in either orientation is a touch
 * device, so it gets the burger menu with 48px rows rather than a row of
 * 11px desktop links on 18px targets. Same rules as the phone block below. */
@media (max-width: 1040px) {
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
    background: var(--ink-950);
    padding: 8px 16px 18px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav > a, .more-list a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid rgba(175, 180, 198, .12); }
  .more-menu { display: contents; }
  .more-toggle { display: none; }
  .more-list { position: static; display: flex; min-width: 0; border: 0; background: transparent; padding: 0; }
  .more-list a { padding: 0; }
  .main-nav .apply-link { margin-top: 8px; justify-content: center; border-bottom: 0; }
  .menu-toggle { display: block; }
  .hero { min-height: 0; padding-top: var(--space-6); }
  .hero-note, .hero-board-hint, .hero-board figcaption, .image-caption, .section-kicker, .availability, .queue-index, .sound-toggle { font-size: 12px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 80px; }
  .wrap, .header-inner, .founders-photo { width: min(100% - 32px, var(--content)); }
  .section { padding: var(--space-7) 0; }
  .site-header { height: 64px; }
  .main-nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
    background: var(--ink-950);
    padding: 8px 16px 18px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav > a, .more-list a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid rgba(175, 180, 198, .12); }
  .more-menu { display: contents; }
  .more-toggle { display: none; }
  .more-list { position: static; display: flex; min-width: 0; border: 0; background: transparent; padding: 0; }
  .more-list a { padding: 0; }
  .main-nav .apply-link { margin-top: 8px; justify-content: center; border-bottom: 0; }
  .menu-toggle { display: block; }
  .hero { min-height: 0; padding: var(--space-6) 0 var(--space-7); }
  .hero::before { inset: 0 -75% auto 10%; width: 150%; height: 70%; }
  .hero h1 { font-size: clamp(4rem, 18vw, 6rem); line-height: .88; }
  .hero-copy { margin-top: 24px; }
  .hero-actions .button { width: 100%; }
  .board-body { grid-template-columns: 1fr; }
  .board-preview { aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--line); }
  .board-decision { min-height: 340px; padding: 20px; }
  .board-shell { box-shadow: 12px 14px 0 rgba(155, 123, 255, .08); }
  .control-strip { grid-template-columns: 1fr; margin-top: var(--space-6); }
  .control-item, .control-item:first-child { padding: var(--space-3) 0; border-left: 0; border-top: 1px solid var(--line); }
  .control-item:first-child { border-top: 0; }
  .board-story-grid, .team-layout, .price-layout, .founder-grid, .apply-grid { grid-template-columns: minmax(0, 1fr); }
  .role-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .role-row .role-num { grid-row: 1 / 3; width: 64px; height: 64px; font-size: 42px; }
  .role-row p { grid-column: 2; }
  .examples-header { display: block; }
  .examples-header .button { margin-top: var(--space-4); }
  .social-feed-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .instagram-post, .tiktok-post, .x-post { grid-column: auto; grid-row: auto; }
  .instagram-post, .x-post { width: min(100%, 560px); margin-inline: auto; }
  .loop-track { grid-template-columns: 1fr; margin-left: 31px; border-left: 2px solid var(--cyan); }
  .loop-track::before { display: none; }
  .loop-step { padding: 0 0 var(--space-5) var(--space-4); }
  .loop-head { align-items: center; }
  .loop-num { width: 64px; height: 64px; margin-left: calc(-1 * var(--space-4) - 33px); font-size: 42px; }
  .loop-name { padding-bottom: 0; font-size: 28px; }
  .loop-step h3 { margin-top: 10px; }
  .founder-video { box-shadow: 12px 14px 0 rgba(255, 180, 94, .08); }
  .founder-video-col .image-caption { margin-top: var(--space-5); text-align: left; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}


/* S438 (Jono): "make the image clickable to double in size so you can see
 * everything" holds on a phone too: the zoom is twice the tile and pans,
 * instead of being squeezed back into the viewport. */
@media (max-width: 760px) {
  .board-zoom {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 76px 16px 24px;
  }
  .board-zoom img {
    width: calc(2 * var(--board-w, 358px));
    max-width: none;
    max-height: none;
  }
  /* A video cannot be watched while panning: on a phone it fills the width
   * and the native controls carry the true full-screen. */
  .board-zoom.board-zoom-video {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 76px 0 24px;
  }
  .board-zoom video { width: 100vw; max-width: none; }
  .hero-note, .hero-board-hint, .hero-board figcaption, .image-caption, .section-kicker, .availability, .queue-index {
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(3.8rem, 15vw, 4.7rem); line-height: .87; }
  .hero-copy { font-size: 1rem; }
  .examples .section-title { font-size: clamp(2.65rem, 12vw, 3rem); }
}

@media (max-width: 440px) {
  .hero h1 { font-size: clamp(3.55rem, 18vw, 4.7rem); }
  .section-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .apply-section .section-title { font-size: clamp(3.4rem, 16vw, 4.6rem); }
  .board-actions { grid-template-columns: 1fr; }
  .board-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { transform: none; opacity: 1; }
  .sound-toggle { animation: none; background: var(--lime); color: var(--ink-950); border-color: var(--lime); }
}

/* =========================================================
   S481 (2026-09-08): package-offer rewrite — scoped styles.
   Added for the new hero price/tagline, compact hero visual,
   how-it-works steps, package cards and the founder photo.
   ========================================================= */

/* Hero price, tagline and the compact work selection */
.hero-price {
  margin-top: var(--space-4);
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
}
.hero-tagline {
  margin-top: var(--space-2);
  color: var(--lime);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 0 28px rgba(199, 255, 74, .22);
}
.hero-visual { margin: 0; }
/* S481, Jono: the 'Your business needs you' figure beside the headline, "the
   same height as the Headline". script.js measures the h1 and sets the
   figure's height and top offset on load and resize; this is the fallback
   (four lines at line-height .84 of the h1's clamp). */
.hero-figure { justify-self: end; align-self: start; margin-left: var(--space-6); height: calc(3.36 * clamp(5.2rem, 9vw, 9rem)); }
.hero-figure img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: cover; object-position: center top; border: 1px solid var(--line); }
/* S481, Jono: his three lines 'Directly UNDER the headline and the picture',
   'a Sub Heading', 'in the electric vibery blue'. */
.hero-story { max-width: none; margin: var(--space-7) 0 0; }   /* S481, Jono: 'Justified and stretches right across from left to right' */
.hero-story p { text-align: justify; text-align-last: left; margin: 0 0 .55em; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.95rem); line-height: 1.2; letter-spacing: .01em; color: var(--cyan); text-shadow: 0 0 28px rgba(79, 232, 247, .22); }
.hero-story p:last-child { margin-bottom: 0; }
/* S481 (Jono's mockup, 20:4x): under the headline and the picture comes the
   story, then the body copy, price, tagline and buttons, all full width. */
.hero-below { max-width: 1100px; margin-top: var(--space-6); }
.hero-below .hero-copy { max-width: 960px; margin-top: 0; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.45; }
.hero-shot-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.hero-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 3 / 4;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-shot-video img,
.hero-shot-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-shot-video > video { opacity: 0; transition: opacity 200ms ease; }
.hero-shot-video.is-playing > video { opacity: 1; }
.hero-shot-video.is-playing .tt-play { opacity: 0; }
.hero-shot-video.is-playing .tt-play:hover,
.hero-shot-video.is-playing .tt-play:focus-visible { opacity: 1; }
.hero-shot-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 6px 9px;
  background: rgba(8, 9, 18, .86);
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .06em;
}
.hero-visual figcaption { margin-top: var(--space-2); color: var(--dim); }
.hero-visual figcaption a { color: var(--cyan); }
.hero-visual figcaption a:hover { color: var(--paper); }

/* How it works */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: var(--layout-gap);
  align-items: center;
}
.how-steps {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.how-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0 12px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.how-steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  grid-row: 1 / span 2;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.8;
}
.how-steps h3 { margin: 0; font-size: 16px; }
.how-steps p { margin: 2px 0 0; color: var(--mist); font-size: 14px; }
.managed-callout {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--flamingo);
  background: var(--ink-850);
}
.managed-callout h3 { margin: 0; font-size: 17px; }
.managed-callout p { margin: var(--space-1) 0 0; color: var(--mist); font-size: 14px; }

/* Packages */
.packages-head .section-title { font-size: clamp(3rem, 6vw, 5.4rem); }
.packages-head .price-fine { margin-top: var(--space-3); }
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  align-items: stretch;
}
.package-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--ink-850);
  padding: var(--space-5);
}
.package-card:first-child { border-top: 4px solid var(--lime); }
.package-name {
  margin: 0;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.package-price {
  margin-top: var(--space-3);
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.4vw, 3.7rem);
  font-weight: 400;
  line-height: 1;
}
.package-price small { color: var(--mist); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.package-tag { margin: var(--space-3) 0 0; color: var(--paper); font-size: 16px; }
.package-card .price-list { margin: var(--space-3) 0 0; flex: 1 0 auto; }
.package-card .button { width: 100%; margin-top: var(--space-5); }
.packages-note { margin-top: var(--space-4); color: var(--dim); }

/* Founder photo (replaces the retired founder video) */
.founder-photo-col { display: flex; flex-direction: column; align-items: center; }
.founder-photo-col .image-caption { margin-top: var(--space-6); text-align: center; }
.founder-photo {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 9 / 16;
  box-shadow: 24px 32px 0 rgba(255, 180, 94, .08);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Responsive for the new layouts */
@media (max-width: 1040px) {
  /* the hero figure stacks under the buttons, left, natural size (S481) */
  .hero-figure { justify-self: start; height: auto; margin-top: 0 !important; }
  .hero-figure img { width: min(100%, 360px); height: auto; }
  .how-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .packages-grid { grid-template-columns: 1fr; gap: var(--space-4); max-width: 560px; margin-inline: auto; }
  .founder-photo-col { align-items: flex-start; }
  .founder-photo-col .image-caption { margin-top: var(--space-5); text-align: left; }
}
@media (max-width: 560px) {
  .hero-shot-stack { gap: var(--space-2); }
}