/* Hallmark · pre-emit critique: P3 H4 E5 S3 R4 V3 · weakest: S and V, the page stays the approved two-band layout; this pass only removes the AI-looking layer around it (eyebrows, dots, tracked caps) */
/* Hallmark · waive 7b · white bands, the nav bar and the phone bezel use pure white and pure black, guard: the join page is a black and white band layout · brand rule, true black and white are locked by Braydon for Zero BS */
/* Hallmark · waive 38iii · the red accent word appears once in the hero headline, once in the offer heading and once in the waitlist heading, guard: the theme names the red word as the signature · the join page keeps the Zero BS red headline word, spot and list, on those closing calls only */
/* Hallmark · waive 24b · spacing steps were set screen by screen against the approved mock · changing them would reshape sections */
/* Hallmark · waive 26b · pressed state not added, buttons already change on hover and focus · this pass keeps the approved look */
/* /join: the Founders and waitlist page. Plain HTML, CSS and one script (no framework, no login). Tokens follow www.zerobscoaching.com.au:
   Anton + Archivo, near-black #050505 with bone text, red 8px buttons with an arrow, dark and white sections, 14px cards. Fonts are our own files
   (the page's security policy allows nothing from other sites). Every colour and font lives in the :root block below. */
@font-face { font-family: Anton; src: url(fonts/anton-400.v1.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/archivo-var.v1.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #050505; --fg: #edebe6; --muted: #b9b6ae; --dim: #8d8a83; --red: #d00000; --hot: #ff1a1a;
  --card1: #171717; --card2: #121212; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.18);
  --win: #22c55e; --done: #15803d; --amber: #fbbf24;
  --black: #000; --white: #fff; --charcoal: #0a0a0a; --red-top: #e81212; --red-deep: #a80000; --red-white: #c11; --red-em-white: #c61a12;
  --nav-bg: rgba(0,0,0,.82); --glow: rgba(255,26,26,.7); --glow-btn: rgba(255,26,26,.6); --hero-glow: rgba(217,0,0,.28);
  --tint: rgba(255,255,255,.04); --tint-edge: rgba(255,255,255,.28); --tint-hair: rgba(255,255,255,.06); --tint-top: rgba(255,255,255,.05);
  --silver: #cfcbc2; --soft: #dcd8cf; --stone: #b5b2ab; --track: #333; --ph: #777;
  --disabled-bg: #2a2a2a; --disabled-fg: #a3a3a3; --cur: #8a8a8a; --off: #6f6d68;
  --ink-1: #33312d; --ink-2: #4a4741; --ink-3: #444; --ink-4: #555;
  --paper: #f4f2ee; --paper-line: #e5e2db; --input-line: #c9c6c0;
  --err: #ff6b6b; --err-white: #b3261e;
  --bezel-a: #808088; --bezel-b: #1b1b1f; --bezel-c: #5c5c63; --btn-side: #2b2b30; --btn-side-2: #222226; --screen: #101010; --phone: #0a0a0c;
  --shadow-card: 0 10px 30px rgba(0,0,0,.35);
  --shadow-phone: 0 30px 60px -12px rgba(0,0,0,.9), 0 12px 28px rgba(0,0,0,.55);
  --shadow-phone-light: 0 28px 50px -14px rgba(0,0,0,.45), 0 10px 22px rgba(0,0,0,.25);
  --body: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --anton: Anton, Impact, 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
body { overflow-x: clip; }
html { color-scheme: dark; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--hot); }
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.white a:focus-visible, .white input:focus-visible, .feat.light a:focus-visible, .white .btn:focus-visible, .feat.light .btn:focus-visible { outline-color: var(--charcoal); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.nav { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 2px solid var(--red); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav img { height: 40px; width: auto; display: block; }
.nav .links { display: none; gap: 30px; font: 600 15px var(--body); }
.nav .links a { color: var(--silver); text-decoration: none; }
.nav .links a:hover { color: var(--white); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border: 0; border-radius: 8px; background: linear-gradient(var(--red-top), var(--red-deep)); color: var(--white); font: 800 14px var(--body); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 var(--tint-edge), 0 12px 32px -10px var(--glow-btn); }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible, input:focus-visible, .tick input:focus-visible + .box { outline: 3px solid var(--white); outline-offset: 3px; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 12px; }
.btn.ghost { background: transparent; border: 2px solid var(--line2); box-shadow: none; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { background: var(--disabled-bg); color: var(--disabled-fg); box-shadow: none; cursor: not-allowed; filter: none; border: 2px dashed var(--line2); }

.label { margin: 0; font: 600 15px/1.3 var(--body); color: var(--muted); }
h1, h2 { margin: 0; font: 400 clamp(46px, 13vw, 64px)/.95 var(--anton); text-transform: uppercase; }
h2 { font-size: clamp(38px, 10vw, 46px); margin: 10px 0 12px; line-height: .98; }
h2 em, h1 em { font-style: normal; color: inherit; }
.hero h1 em, #offer h2 em, #waitlist h2 em { color: var(--hot); }
h1, h2 { text-wrap: balance; }
.lead { margin: 0; color: var(--soft); max-width: 560px; }
.lead b { color: var(--white); }
.meta { display: flex; flex-direction: column; gap: 2px; font: 500 14px/1.4 var(--body); color: var(--dim); }
@media (min-width: 900px) { .meta { flex-direction: row; flex-wrap: wrap; row-gap: 4px; } .meta span + span { border-left: 1px solid var(--line2); margin-left: 12px; padding-left: 12px; } }

.hero { position: relative; padding: 34px 0 40px; background: radial-gradient(900px 420px at 80% 0, var(--hero-glow), transparent 60%), var(--bg); }
.hero .wrap { display: flex; flex-direction: column; gap: 18px; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line2); background: var(--tint); border-radius: 14px; padding: 8px 14px; font: 600 14px/1.35 var(--body); }
.sub { font: 400 24px/1 var(--anton); letter-spacing: .5px; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px var(--silver); }
.hero .sub { margin: 6px 0 -10px; }
.hero .slab { margin-top: -8px; }
.slab { display: inline-block; align-self: flex-start; background: var(--red-deep); transform: skewX(-8deg); padding: 6px 18px; font: 400 clamp(38px, 11vw, 52px)/1 var(--anton); text-transform: uppercase; border-radius: 3px; }
.cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

section { padding: 64px 0; }
.white { background: var(--white); color: var(--charcoal); }
.white .label { color: var(--ink-4); }
.white h2 em { color: var(--red-em-white); }
.white .lead { color: var(--track); }
.g4 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
.card { border-radius: 14px; background: linear-gradient(var(--card1), var(--card2)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--tint-top), var(--shadow-card); padding: 20px; }
.white .card.light { background: var(--paper); border-color: var(--paper-line); box-shadow: none; color: var(--charcoal); }
.why i { font: 700 14px var(--body); font-style: normal; color: var(--hot); }
.why b { display: block; font: 400 26px/1 var(--anton); text-transform: uppercase; margin: 10px 0 6px; }
.why span { color: var(--muted); font-size: 15px; }
.white .why span { color: var(--ink-3); }
/* Approved shared iPhone frame (F:\ZBS HUB\Content Ideas\_shared\iphone-frame.css, v2, 27 Oct 2026), copied in and scoped to .pair so it cannot clash with page classes. Two phones: dark in front, light behind. The frame's blur on the screen picture is switched off because these are real, readable screens. */
.iph { position: relative; width: 100%; aspect-ratio: .474; box-sizing: border-box; container-type: size; border-radius: 17% / 8.26%; background: var(--phone); box-shadow: inset 0 0 0 1.5px var(--bezel-a), inset 0 0 0 3.5px var(--bezel-b), 0 0 0 1px var(--black), var(--shadow-phone); }
.iph .scr { --b: 2.4cqw; position: absolute; inset: var(--b); border-radius: calc(17cqw - var(--b)); overflow: hidden; clip-path: inset(0 round calc(17cqw - var(--b))); background: var(--screen); }
.iph .di { position: absolute; top: 5.6cqw; left: 50%; transform: translateX(-50%); width: 25cqw; height: 7.2cqw; border-radius: 99px; background: var(--black); box-shadow: 0 0 0 1px var(--tint-hair); }
.iph .b { position: absolute; width: .9cqw; background: var(--btn-side); box-shadow: inset 1px 0 0 var(--bezel-c); }
.iph .b.a, .iph .b.v1, .iph .b.v2 { left: -.9cqw; border-radius: 2px 0 0 2px; }
.iph .b.p, .iph .b.cc { right: -.9cqw; border-radius: 0 2px 2px 0; box-shadow: inset -1px 0 0 var(--bezel-c); }
.iph .b.a { top: 17%; height: 4%; } .iph .b.v1 { top: 24.5%; height: 7.2%; } .iph .b.v2 { top: 33.2%; height: 7.2%; }
.iph .b.p { top: 27%; height: 10.5%; } .iph .b.cc { top: 56%; height: 6.5%; background: var(--btn-side-2); }
/* Board pair: these two pictures already include the phone, so they are plain pictures */

.offer { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
.price { display: flex; align-items: flex-end; gap: 10px; }
.price .cur { font: 400 40px var(--anton); color: var(--cur); font-variant-numeric: tabular-nums; }
.price .num { font: 400 clamp(84px, 24vw, 120px)/.85 var(--anton); font-variant-numeric: tabular-nums; }
.price .per { font: 600 15px var(--body); color: var(--dim); padding-bottom: 8px; }
.list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 500; font-size: 15px; line-height: 1.4; }
.list li::before { content: ''; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.count { display: flex; align-items: center; gap: 14px; }
.count b { font: 400 clamp(40px, 12vw, 56px)/1 var(--anton); color: var(--win); white-space: nowrap; }
.count span { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--muted); }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 12px; }
.dots i { height: 10px; border-radius: 5px; background: var(--track); }
.dots i.t { background: var(--win); }
/* The next open spot breathes gently ("Next spot", Braydon 26 Oct); still for reduced motion. */
.dots i.n, .legend s.n { background: var(--fg); animation: spot-next 2.4s ease-in-out infinite; }
@keyframes spot-next { 0%, 100% { opacity: .2; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .dots i.n, .legend s.n { animation: none; opacity: .45; } }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font: 600 14px var(--body); color: var(--dim); }
.legend s { display: inline-block; width: 9px; height: 9px; border-radius: 5px; margin-right: 5px; text-decoration: none; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 18px; }
.fld label, .fld .lbl { display: block; font: 600 14px var(--body); color: var(--dim); margin-bottom: 6px; }
.fld input { width: 100%; height: 52px; border-radius: 8px; border: 1.5px solid var(--line2); background: var(--charcoal); color: var(--fg); padding: 0 14px; font: 600 16px var(--body); }
.fld input::placeholder { color: var(--ph); font-weight: 500; }
.white .fld input { background: var(--white); color: var(--charcoal); border-color: var(--input-line); }
.white .fld label { color: var(--ink-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tick { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 500; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.tick { position: relative; }
.tick .box { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--line2); display: grid; place-items: center; }
.white .tick .box { border-color: var(--stone); }
.tick input:checked + .box { background: var(--done); border-color: var(--done); }
.tick input:checked + .box::after { content: ''; width: 6px; height: 12px; border: solid var(--white); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.msg { min-height: 20px; font-size: 14px; font-weight: 600; }
.msg.err { color: var(--err); } .white .msg.err { color: var(--err-white); }
.small { font-size: 12.5px; color: var(--dim); text-align: center; }
.note { border-radius: 10px; border: 1.5px solid var(--win); padding: 12px 14px; font-weight: 600; font-size: 14.5px; line-height: 1.4; margin-top: 14px; }
.note b { color: var(--win); }
.full { border-radius: 10px; border: 1.5px solid var(--line2); padding: 14px; font-weight: 600; margin-top: 14px; }
.steps { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.st { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.st i { width: 34px; height: 34px; border-radius: 50%; background: var(--done); display: grid; place-items: center; font: 400 17px var(--anton); font-style: normal; }
.st b { display: block; font-size: 16px; } .st span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.share { display: flex; gap: 8px; margin-top: 12px; }
.share input { flex: 1; min-width: 0; }
.foot { border-top: 1px solid var(--line); padding: 22px 0 28px; font: 500 14px/1.6 var(--body); color: var(--dim); }
.foot .wrap { display: flex; flex-direction: column; gap: 2px; }
.foot a { color: var(--dim); }

@media (min-width: 900px) {
  .wrap { padding: 0 64px; }
  .nav .links { display: flex; }
  h1 { font-size: 104px; } h2 { font-size: 64px; }
  .hero { padding: 64px 0 56px; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 40px; align-items: center; }
  .cta { flex-direction: row; align-items: center; }
  .slab { font-size: 84px; }
  .lead { font-size: 19px; }
  section { padding: 104px 0; }
  .g4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  /* Five feature cards: two wide on top, three under (no card left alone on a row). */
  .offer { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Founder terms page */
.terms h3 { font: 700 17px/1.3 var(--body); margin: 26px 0 8px; }
.terms ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.terms li { margin-bottom: 6px; }
.terms p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.terms a { color: var(--hot); }
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.white a:focus-visible, .white input:focus-visible, .feat.light a:focus-visible, .white .btn:focus-visible, .feat.light .btn:focus-visible { outline-color: var(--charcoal); }

/* Friends and challenges (Braydon 26 Oct): words beside the Board phone, stacked on phones */
.mates { border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.mlist { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mlist li { padding-left: 0; }
.mlist b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 400 22px/1.1 var(--anton); text-transform: uppercase; }
.mlist span { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }
.soon { font: 700 14px/1 var(--body); font-style: normal; color: var(--charcoal); background: var(--amber); border-radius: 999px; padding: 6px 10px; }
.mframe { display: flex; justify-content: center; }
.mframe { width: min(320px, 86vw); margin: 0 auto; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .mframe { width: 400px; }
}

/* "What you're getting today" (Braydon 26 Oct): the plain disclosure above the founder form. */
.today { border-radius: 10px; border: 1.5px solid var(--line2); padding: 12px 14px; margin-top: 12px; font-size: 14.5px; line-height: 1.45; }
.white .today { border-color: var(--stone); }
.today h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.today ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* /join, two ways in (27 Oct, mock redesign-new-join3): a Founders card (invite only, a code) and a Start now card, one calm counter each: no timers, no flashing, no urgency. */
.two { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 22px; align-items: start; }
.ocard { border-radius: 14px; background: linear-gradient(var(--card1), var(--card2)); border: 1px solid var(--line); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.olab { font: 600 15px/1.3 var(--body); color: var(--muted); }
.ofirm { font-weight: 700; font-size: 15px; color: var(--fg); }
.oline { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ocount { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ocount b { font-weight: 700; font-size: 14px; color: var(--fg); }
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--win); }
.ofull { font-weight: 700; color: var(--dim); }
.ocard.off { opacity: .62; border-style: dashed; border-color: var(--line2); }
.ocard.off .price .num, .ocard.off .price .cur { color: var(--off); }
/* A note inside a card is a rule above plain text, not a second box */
.ocard .note { border: 0; border-top: 1.5px solid var(--win); border-radius: 0; padding: 12px 0 0; }
.ocard .form { margin-top: 6px; max-width: none; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }
/* One offer per page (a1-008, 27 Oct: the public page = Start now, the private founder page = Founders): one card, not stretched. */
.two.one { max-width: 480px; }
@media (min-width: 760px) { .two.one { grid-template-columns: 1fr; } }
.ocard .price .num { font-size: clamp(56px, 15vw, 76px); line-height: .9; font-variant-numeric: tabular-nums; }
.ocard .price .cur { font-size: 28px; font-variant-numeric: tabular-nums; }
.ocard .price { align-items: flex-end; }
.ohow { font-size: 13px; color: var(--dim); }

/* Hero: the new-look player pair in the shared frame; a short coming-soon block instead of the mates section */
.terms-line { margin: 4px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
#s-small, #f-small { text-align: left; }

/* Coming at launch strip (28 Oct): 3 phones, stacked under 600px */

/* Join photos (28 Oct): one FULL phone per section, current app screens, never tilted, overlapped or cut off. Dark and light screens alternate down the page. */
.iph .scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ph { width: min(270px, 72vw); margin: 0 auto; }
.heroph { display: flex; justify-content: center; margin-top: 8px; }
.heroph .ph { width: min(250px, 66vw); }
.feat { border-top: 1px solid var(--line); }
.feat .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.feat .ftext { display: flex; flex-direction: column; gap: 14px; }
.feat h2 { margin: 6px 0 0; }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { padding-left: 0; font-size: 16px; line-height: 1.45; color: var(--soft); }
.feat .steps { margin-top: 8px; }
.feat .st span { font-size: 16px; }
@media (min-width: 900px) {
  .feat .wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 88px; }
  .feat.flip .wrap { grid-template-columns: 340px minmax(0, 1fr); }
  .feat.flip .ph { order: -1; }
  .ph { width: 340px; }
  .heroph .ph { width: 300px; }
}

/* Desktop offer (Braydon 28 Oct): the Start now and founders section is centred and the card is bigger. Phones are unchanged. */
@media (min-width: 900px) {
  #offer .wrap { text-align: center; }
  #offer h2 { font-size: 80px; margin: 14px 0 18px; }
  #offer .note { max-width: 1040px; margin-left: auto; margin-right: auto; text-align: left; }
  #offer .two.one { max-width: 1040px; margin: 28px auto 0; }
  #offer .ocard { padding: 44px 48px; gap: 14px; text-align: left; align-items: stretch; }
  #offer .ocard .price { justify-content: center; }
  #offer .ocard .price .num { font-size: 168px; font-variant-numeric: tabular-nums; }
  #offer .ocard .price .cur { font-size: 60px; font-variant-numeric: tabular-nums; }
  #offer .ocard .price .per { font-size: 14px; }
  #offer .ocard .olab, #offer .ocard .ofirm, #offer .ocard .ohow, #offer .ocard .oline { text-align: center; }
  #offer .ocard .olab { font-size: 16px; }
  #offer .ocard .ofirm { font-size: 18px; }
  #offer .ocard .oline { font-size: 17px; max-width: 640px; margin: 0 auto; }
  #offer .ocard .ocount { max-width: 640px; width: 100%; margin: 6px auto 0; text-align: center; }
  #offer .ocard .btn.block { height: 64px; font-size: 16px; }
  #offer .ocard .fld input { height: 60px; }
}

/* Desktop phone sections (Braydon 28 Oct): every section the same, one centred column: heading and text, then the full phone at one size. */
@media (min-width: 900px) {
  .feat .wrap, .feat.flip .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: center; text-align: center; }
  .feat .ftext { align-items: center; max-width: 720px; }
  .feat .lead { margin-left: auto; margin-right: auto; }
  .feat.flip .ph { order: 0; }
  .feat .ph { width: 340px; }
  .feat .ticks, .feat .steps { text-align: left; max-width: 560px; width: 100%; }
}

/* Black and white bands (Braydon 28 Oct), matching the main website: black hero, then white, black, white and so on. White bands use #fff, dark text, red accents,
   the same Anton headings and the thin red bar along the top edge, with the website's section spacing. The offer card section stays black. */
.feat { padding: clamp(72px, 9vw, 120px) 0; }
.feat.light { position: relative; background: var(--white); color: var(--charcoal); border-top: 0; }
.feat.light::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--hot) 40%, transparent 85%); }
.feat.light h2 { color: var(--charcoal); }
.feat.light .label { color: var(--ink-2); }
.feat.light .lead { color: var(--ink-2); }
.feat.light .ticks li { color: var(--ink-1); }
.feat.light .st b { color: var(--charcoal); }
.feat.light .st span { color: var(--ink-2); }
.feat.light .iph { box-shadow: inset 0 0 0 1.5px var(--bezel-a), inset 0 0 0 3.5px var(--bezel-b), 0 0 0 1px var(--black), var(--shadow-phone-light); }
#offer { border-top: 1px solid var(--line); }

/* Hero 4-tile strip (Braydon 28 Oct): training, food, friends, challenges. 2x2 on phones, one row of 4 on desktop. */
.hero .wrap.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.tile { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line2); border-radius: 14px; background: var(--tint); padding: 16px 14px; }
.tile svg { width: 28px; height: 28px; fill: none; stroke: var(--hot); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tile span { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--fg); }
@media (min-width: 900px) { .hero .wrap.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; display: grid; } .tile { padding: 22px 20px; } .tile span { font-size: 17px; } .hero .wrap.tiles .tile svg { width: 34px; height: 34px; } }
.feat .soon { align-self: flex-start; }
@media (min-width: 900px) { .feat .soon { align-self: center; } }
.hero .wrap.tiles { align-items: stretch; }
@media (min-width: 900px) { .hero h1 { font-size: 78px; line-height: .98; } }

/* Founders page secret feel (Braydon 28 Oct): a small lock on the pill, the word found in the red slash, and a line by the code box. */
.pill .lock { width: 15px; height: 15px; fill: none; stroke: var(--hot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1 .hl { display: inline-block; background: var(--red-deep); transform: skewX(-8deg); padding: .03em .16em .01em; border-radius: 3px; }
h1 .hl > span { display: inline-block; font-style: normal; }
.gate-line { font-weight: 700; color: var(--fg); font-size: 16px; }
@media (min-width: 900px) { .hero h1 .hl { margin: 0 .04em; } .gate-line { font-size: 19px; } }

/* Nutrition tick-row (Braydon 28 Oct): foods are checked so nothing is mislogged. */
.tickrow { list-style: none; margin: 6px auto 0; padding: 0; max-width: 560px; text-align: left; }
.tickrow li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--fg); }
.tickrow li::before { content: ''; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.feat.light .tickrow li { color: var(--charcoal); }

/* First and last name side by side (29 Oct: every sign-up asks for both) */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair .fld{min-width:0}
/* Monthly or Yearly (28 Oct): a two-way switch on the offer card, Monthly picked by default. Real radio buttons (keyboard and screen
   reader friendly), 48px tall tap targets, the picked one in the action red. */
.plan { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line2); border-radius: 10px; background: #0c0c0c; }
.plan label { position: relative; display: block; cursor: pointer; }
.plan input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.plan span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 7px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plan input:checked + span { background: var(--red); color: #fff; }
.plan input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.osave { font-weight: 700; font-size: 15px; color: var(--fg); }
.osave:empty { display: none; }
@media (min-width: 900px) {
  #offer .ocard .plan { width: 100%; max-width: 420px; margin: 0 auto; }
  #offer .ocard .osave { text-align: center; font-size: 18px; }
}
.ofix:empty{display:none}