/* Fewer Zeros landing, round 3 — port of tonyrobbins.com (structure, rhythm, motion). Measurements in tokens.css; colours ours. */
@import url(/fonts.css);
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.landing { margin: 0; background: var(--canvas); color: var(--ink-on-dark); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
body.landing.nav-open, body.landing.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, .h2, .h3 { font-family: var(--font-sans); font-weight: var(--fw-medium); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: var(--wrap-narrow); }
.hp { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fine { font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }
.h2 { font-size: var(--fs-xxl); line-height: var(--lh-heading); letter-spacing: var(--track-display); max-width: 22ch; margin-bottom: var(--stack); }
.lead { font-size: var(--fs-md); max-width: 60ch; color: var(--muted); margin: 0 0 calc(var(--stack) * 2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 1px; }

/* Pills: the reference's one button. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--pill-gap); padding: var(--pill-pad); min-height: var(--pill-h); border-radius: var(--r-pill); border: 1px solid var(--btn-fill); background: var(--btn-fill); color: var(--btn-ink); font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: var(--track-wide); text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); white-space: nowrap; }
.pill:hover { background: var(--btn-fill-hover); border-color: transparent; }
.pill-large { padding: var(--pill-pad-lg); min-height: var(--pill-h-lg); }
.pill-small { padding: var(--pill-pad-sm); min-height: var(--pill-h-sm); }
.pill-glass { background: var(--glass); border-color: transparent; color: #fff; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.pill-glass:hover { background: var(--glass-hover); }
.band-light .pill { background: var(--ink-on-light); border-color: var(--ink-on-light); color: #fff; }
.band-light .pill:hover { background: rgba(11,10,10,.8); }
.play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* Announcement bar, header, language select: public/chrome.css (shared with every page since 2026-09-27). */

/* Hero: inset rounded frame, viewport minus nav and bar, photo, shade, headline + one line + one button bottom-left, video card bottom-right. */
.hero { position: relative; padding: 0 var(--gutter-wide) var(--gutter-wide); }
.hero-frame { position: relative; height: calc(100dvh - var(--nav-h) - var(--announce-h, 0px)); min-height: 560px; border-radius: var(--r-frame); overflow: hidden; background: var(--canvas-1); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--accent-deep) 0%, rgba(43,18,64,.55) 22%, rgba(43,18,64,0) 52%); }
.hero-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(11,10,10,.9) 0%, rgba(11,10,10,.5) 28%, rgba(11,10,10,0) 55%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter-lg) var(--gutter-lg); max-width: 880px; }
.hero h1 { font-size: var(--fs-xxxl); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: 19ch; }
.hero-support { margin-top: 16px; max-width: 60ch; font-family: var(--font-sans); font-size: var(--fs-md); color: rgba(255,255,255,.9); }
@media (min-width: 768px) { .hero-support span { display: block; } }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.hero-card { position: absolute; right: calc(var(--gutter-wide) + var(--gutter-lg)); bottom: calc(var(--gutter-wide) + var(--gutter-lg)); width: var(--video-card-w); display: none; }
.card-kicker { font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; margin-bottom: var(--stack-sm); color: #fff; }
.card-media { position: relative; aspect-ratio: var(--video-card-aspect); border-radius: var(--r-media); overflow: hidden; background: var(--glass); }
.card-media img, .card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform var(--dur) var(--ease); }
.card-media:hover img, .card-media:hover video { transform: scale(var(--hover-scale)); }
.card-media .pill-glass { position: absolute; right: var(--video-card-pad); bottom: var(--video-card-pad); }
.card-placeholder { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, rgba(181,110,217,.35), transparent 60%), linear-gradient(160deg, #241a2c, #0b0a0a); }
@media (min-width: 1024px) { .hero-card { display: block; } .hero-copy { max-width: calc(100% - var(--video-card-w) - var(--gutter-lg) * 3); } }
@media (max-width: 1023px) { .hero-card { display: block; position: static; width: auto; margin: var(--gutter-wide) 0 0; } .hero-card .card-media { border-radius: var(--r-frame); } }
@media (max-width: 767px) {
  .hero-frame { min-height: 0; }
  .hero-photo img { object-position: 58% 22%; }
  .hero-copy { padding: 0 var(--gutter) 28px; text-align: center; max-width: none; }
  .hero h1 { max-width: none; margin-inline: auto; }
  .hero-support { margin: 10px auto 0; max-width: 36ch; font-size: var(--fs-sm); }
  .hero-actions { justify-content: center; }
  .hero-shade::after { background: linear-gradient(to top, rgba(11,10,10,.9) 0%, rgba(11,10,10,.4) 30%, rgba(11,10,10,0) 58%); }
}

/* Bands */
.band { padding-block: var(--band-y); }
.cta-row { margin-top: calc(var(--stack) * 2); }

/* Business models: the reference's pillars, one dominant photo beside a text list. */
.pillars { display: grid; grid-template-columns: 1fr; gap: calc(var(--stack) * 2); align-items: stretch; }
.pillar-photo { border-radius: var(--r-frame); overflow: hidden; background: var(--surface); aspect-ratio: 2 / 3; max-height: 640px; }
.pillar-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-fast) var(--ease); }
.pillar-list { display: grid; grid-template-columns: 1fr; }
.pillar-item { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 14px 0; font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: var(--track-tight); color: var(--muted); cursor: pointer; transition: color var(--dur) var(--ease); }
.pillar-item:hover, .pillar-item.is-active { color: var(--fg); }

@media (min-width: 900px) { .pillars { grid-template-columns: 1fr 1.1fr; gap: calc(var(--stack) * 4); } .pillar-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

.buy-box { background: var(--glass); border: 1px solid var(--hairline-dark); border-radius: var(--r-frame); padding: 32px; display: grid; gap: 16px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.buy-price { font-family: var(--font-sans); font-size: var(--fs-xxl); font-weight: var(--fw-medium); letter-spacing: var(--track-display); line-height: 1; }
.buy-box label { display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.buy-box input[type=email] { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--hairline-dark); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: var(--fs-base); }
.buy-box input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.buy-box .pill { width: 100%; }


/* Block 2, the card row, measured on the reference 2026-09-20: h2 30px/500/-1.5px with a 16px link beside it, arrows 40px right; cards 300x450, radius 16, gap 10, black under a to-top black/80 gradient; a centred title block at 55% height (160px wide on the reference's logos), a 16px descriptor at 70% opacity under it; 8px dots under the row. */
.cards { padding-block: var(--band-y); background: var(--canvas); color: #fff; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--stack); margin-bottom: 24px; }
.row-title { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.row-title h2 { font-size: 30px; font-weight: var(--fw-medium); letter-spacing: -.05em; line-height: 36px; }
.row-link { font-family: var(--font-sans); font-size: 16px; text-decoration: none; opacity: .9; }
.row-link:hover { opacity: .7; }
.row-arrows { display: none; gap: 8px; }
.arrow { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--canvas-2); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.arrow:hover { background: rgba(255,255,255,.2); }
.card-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.card-track::-webkit-scrollbar { display: none; }
.model-card { position: relative; flex: 0 0 260px; aspect-ratio: 2 / 3; border-radius: var(--r-frame); overflow: hidden; scroll-snap-align: start; background: #000; text-decoration: none; color: #fff; isolation: isolate; }
.model-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); transition: transform var(--dur) var(--ease); }
.model-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); }
.model-card:hover img { transform: scale(var(--hover-scale)); }
.model-card-copy { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; display: grid; justify-items: center; gap: 14px; padding: 0 30px; text-align: center; }
.model-card-brand { font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .22em; text-transform: uppercase; margin-bottom: -6px; }
.model-card-title { font-family: var(--font-sans); font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; max-width: 210px; }
/* Twelve title lockups, one face and treatment each, like the reference's twelve program logos. */
.lockup-1 { font-family: 'Tanker', var(--font-sans); font-weight: 400; font-size: 44px; letter-spacing: .01em; line-height: .88; }
.lockup-2 { font-family: 'Switzer'; font-weight: 900; font-size: 36px; letter-spacing: -.04em; }
.lockup-3 { font-family: 'Boska', serif; font-weight: 700; font-size: 40px; letter-spacing: .02em; line-height: .95; }
.lockup-4 { font-family: 'Panchang', var(--font-sans); font-weight: 800; font-size: 19px; letter-spacing: .04em; line-height: 1.1; }
.lockup-5 { font-family: 'Clash Display', var(--font-sans); font-weight: 700; font-size: 46px; letter-spacing: -.01em; }
.lockup-6 { font-family: 'Melodrama', serif; font-weight: 700; font-size: 38px; text-transform: none; letter-spacing: 0; line-height: 1; }
.lockup-7 { font-family: 'Sharpie', cursive; font-weight: 700; font-size: 40px; text-transform: none; letter-spacing: 0; line-height: .95; }
.lockup-8 { font-family: 'Switzer'; font-weight: 500; font-size: 22px; letter-spacing: .28em; line-height: 1.3; }
.lockup-9 { font-family: 'Clash Display', var(--font-sans); font-weight: 700; font-size: 34px; letter-spacing: .02em; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 8px 0; }
.lockup-10 { font-family: 'Boska', serif; font-weight: 700; font-size: 44px; text-transform: none; letter-spacing: -.01em; line-height: .95; }
.lockup-11 { font-family: 'Tanker', var(--font-sans); font-weight: 400; font-size: 60px; letter-spacing: .02em; line-height: .85; }
.lockup-12 { font-family: var(--font-mono); font-weight: 500; font-size: 26px; letter-spacing: .06em; line-height: 1.1; }
.model-card-line { font-family: var(--font-sans); font-size: 16px; line-height: 24px; opacity: .7; max-width: 220px; }
.row-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.dot-i { width: 8px; height: 8px; border-radius: 50%; background: var(--canvas-2); transition: background-color var(--dur) var(--ease); }
.dot-i.is-on { background: #fff; }
@media (min-width: 768px) { .cards { padding-block: var(--band-y-lg); } .row-arrows { display: flex; } .card-track { padding-inline: var(--gutter-lg); scroll-padding-inline: var(--gutter-lg); } .model-card { flex-basis: 300px; } }
@media (min-width: 1200px) { .card-track { padding-inline: max(var(--gutter-lg), calc((100% - var(--wrap-max)) / 2 + var(--gutter-lg))); scroll-padding-inline: max(var(--gutter-lg), calc((100% - var(--wrap-max)) / 2 + var(--gutter-lg))); } }

/* Block 3, the reel: a 13 s loop of nine people smiling at the camera (Pexels, media/stock/band1-manifest.json), a light black scrim, centred line + pill. Reference: 701 px at 1440 (padding 224), h2 60.8 px. */
.video-band { position: relative; display: grid; place-items: center; text-align: center; min-height: 560px; padding: var(--band-y-big) var(--gutter); background: var(--canvas); color: #fff; isolation: isolate; overflow: hidden; }
.video-band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; z-index: -2; }
.video-band::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22); z-index: -1; }
.video-band-copy { max-width: 768px; }
.video-band h2 { font-size: var(--fs-xxl); line-height: var(--lh-heading); letter-spacing: var(--track-display); margin-bottom: 20px; }
.video-band p { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; max-width: 60ch; margin: 0 auto 32px; }
@media (min-width: 768px) { .video-band { min-height: max(701px, 34vw); padding-block: var(--band-y-big-lg); } }

/* Block 4, the word list, measured on the reference at 1440: words 60.8 px / 500 / -0.05em in black, 63 px row pitch, "Explore" 16 px appears beside the hovered word; a 660 x 660 photo with 12 px corners, 40 px from the list, fading between photos on hover; each word is a link. */
.parts-h { margin-bottom: calc(var(--stack) * 2); }
.parts .pillars { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.big-words { display: block; }
.big-words li { border: 0; }
.big-words .pillar-item { display: flex; align-items: center; gap: 24px; width: 100%; padding: 4px 0; border: 0; background: none; text-decoration: none; color: var(--ink-on-light); cursor: pointer; transition: opacity 500ms var(--ease); }
.big-words:hover .pillar-item { opacity: .5; }
.big-words .pillar-item:hover, .big-words .pillar-item:focus-visible { opacity: 1; }
.pillar-word { font-family: var(--font-sans); font-size: var(--fs-xxl); font-weight: var(--fw-medium); letter-spacing: var(--track-display); line-height: .9; }
.pillar-explore { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-medium); line-height: 24px; padding: 12px 24px; border-radius: var(--r-pill); background: #f3f4f6; color: var(--ink-on-light); opacity: 0; transition: opacity 500ms var(--ease); }
.pillar-explore::after { content: "›"; font-size: 20px; line-height: 1; transition: transform 500ms var(--ease); }
.pillar-item:hover .pillar-explore::after { transform: translateX(4px); }
.pillar-item:hover .pillar-explore, .pillar-item:focus-visible .pillar-explore { opacity: 1; }
.parts .pillar-photo { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--canvas-1); max-height: none; }
.parts .pillar-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease); }
.parts .pillar-photo img.is-on { opacity: 1; }
@media (min-width: 900px) { .parts .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) { .pillar-explore { display: none; } }

/* Block 5, the rotating quotes, the reference's band: the person fills the left 42% of the wrap, the quote and the faces sit in the right 58% (his quote is 820 px wide at 1440), vertically centred; the faces 40 px under the quote; one slide on at a time, 6 s. Widths come from the wrap, never from the viewport, so wide screens keep the column. */
.quotes { position: relative; min-height: 640px; background: var(--canvas); color: #fff; isolation: isolate; }
.quote-slide { position: absolute; inset: 0; background: var(--quote-photo) 8% 20% / cover no-repeat; opacity: 0; transition: opacity 900ms var(--ease); }
.quote-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,10,10,0) 40%, rgba(11,10,10,.75) 100%); }
.quote-slide.is-on { opacity: 1; }
.quote-grid { position: relative; display: grid; grid-template-columns: 1fr; align-items: end; min-height: 640px; padding-bottom: 40px; }
.quote-col { grid-column: 1; }
.quote-slide blockquote { margin: 0; }
.quote-slide p { font-family: var(--font-sans); font-size: var(--fs-xl); line-height: var(--lh-heading); letter-spacing: var(--track-display); font-weight: var(--fw-medium); max-width: 20ch; }
.quote-slide .quote-sub { font-size: var(--fs-base); line-height: 1.5; letter-spacing: 0; font-weight: var(--fw-regular); margin-top: 16px; max-width: 46ch; color: rgba(255,255,255,.85); }
.quote-faces { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.quote-face { width: 72px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .45; display: grid; justify-items: center; gap: 8px; color: #fff; transition: opacity var(--dur) var(--ease); }
.quote-face img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 12% 40%; border: 2px solid transparent; transition: border-color var(--dur) var(--ease); }
.quote-face-label { font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-medium); line-height: 1.2; text-align: center; }
.quote-face.is-on { opacity: 1; }
.quote-face.is-on img { border-color: #fff; }
@media (min-width: 1024px) {
  .quotes { min-height: 860px; }
  .quote-grid { grid-template-columns: 42fr 58fr; align-items: center; min-height: 860px; padding-bottom: 0; }
  .quote-col { grid-column: 2; }
  .quote-slide p { max-width: none; }
  .quote-faces { gap: 36px; margin-top: 40px; }
  .quote-face { width: 120px; }
  .quote-face img { width: 64px; height: 64px; }
  .quote-face-label { font-size: 14px; }
}

/* Block 6, the joined shape, built exactly like the reference (read from its DOM 2026-09-20): row 1 = a 2/3 column holding the 16:9 box (all corners 16 px) and, centred on the box's bottom-right corner, an 80 px square in the box colour with two 80 px white circles offset (+40,-40) and (-40,+40); row 2 = a 2/3 column (their logo row, our line) and a 1/3 column with the clip card (all corners 16 px), painted after the square so its rounded corner nests in the colour. The join holds at every width because both rows share the same 2/3 + 1/3 split. */
.question-h { max-width: 896px; margin-bottom: 40px; }
.join-row { display: flex; flex-direction: column; }
.join-boxcol { position: relative; width: 100%; }
.join-box { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-frame); overflow: hidden; background: #612989; }
.join-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.join-box::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, #612989 0%, rgba(97,41,137,.85) 30%, rgba(97,41,137,0) 100%); pointer-events: none; }
.join-knot { display: none; }
.join-textcol { padding: 24px 0 0; }
.join-textcol p { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; margin-bottom: 24px; }
.band-light .join-textcol .pill { background: #f3f4f6; border-color: #f3f4f6; color: var(--ink-on-light); }
.band-light .join-textcol .pill:hover { background: #e5e7eb; }
.join-row-2 { margin-top: 24px; gap: 24px; }
.join-linecol { width: 100%; }
/* the reference's grey press-logo row, ours with keywords set like logos in four faces (no label, no real brands) */
.logo-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 32px; color: #bdbdbd; margin: 0; }
.logo-word { line-height: 1; white-space: nowrap; }
.logo-word-1 { font-family: 'Boska', serif; font-weight: 700; font-size: 40px; letter-spacing: -.01em; }
.logo-word-2 { font-family: 'Tanker', var(--font-sans); font-size: 38px; text-transform: uppercase; letter-spacing: .04em; }
.logo-word-3 { font-family: 'Clash Display', var(--font-sans); font-weight: 700; font-size: 36px; letter-spacing: -.02em; }
.logo-word-4 { font-family: 'Panchang', var(--font-sans); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 359px) { .logo-word-4 { font-size: 19px; letter-spacing: .06em; } } /* 'CONTABILIDADE' (pt) fits at 320 (2026-09-27) */
.join-clipcol { width: 100%; }
.join-clip { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-frame); overflow: hidden; background: #000; }
.join-clip img, .join-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
/* the box colour flows over the clip's top-left corner, a diagonal fade, exactly as on the reference (measured at 1:1) */
.join-clip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #612989 0%, rgba(97,41,137,.7) 14%, rgba(97,41,137,0) 42%); z-index: 1; pointer-events: none; }
.join-clip .pill { z-index: 2; }
.join-clip .pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@media (min-width: 768px) {
  .join-row { flex-direction: row; align-items: stretch; }
  .join-boxcol { width: 66.6667%; display: flex; align-items: flex-end; }
  .join-box { width: 100%; aspect-ratio: 16 / 9; position: relative; z-index: 1; }
  .join-knot { display: block; position: absolute; right: 0; bottom: 0; width: 80px; height: 80px; transform: translate(50%, 50%); background: #612989; z-index: 0; }
  .join-knot-a, .join-knot-b { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--paper); }
  .join-knot-a { transform: translate(50%, -50%); }
  .join-knot-b { transform: translate(-50%, 50%); }
  .join-textcol { width: 33.3333%; display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 40px 80px; }
  .join-row-2 { margin-top: 0; gap: 0; }
  .join-linecol { width: 66.6667%; padding: 74px 80px 0 0; }
  .join-clipcol { width: 33.3333%; position: relative; z-index: 1; }
}
@media (min-width: 1200px) { .join-textcol { padding-right: 80px; } }

/* Block 8, the buy card: centred heading and line, then one big rounded card in the reference's shape: bright photo, gradient at the bottom only, title + one line + one button bottom-left. No form on the page; checkout asks for the email. */
#buy { scroll-margin-top: calc(var(--nav-h) + 16px); }
.buy-h { text-align: center; max-width: none; margin-inline: auto; margin-bottom: 12px; }
.buy-sub { font-family: var(--font-sans); font-size: var(--fs-base); text-align: center; max-width: 48ch; margin: 0 auto calc(var(--stack) * 2); }
.buy-card { position: relative; display: flex; align-items: flex-end; min-height: 520px; border-radius: var(--r-frame); overflow: hidden; background: var(--canvas) var(--buy-photo) center top / cover no-repeat; color: #fff; padding: var(--gutter); isolation: isolate; border: 0; margin: 0; }
.buy-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 70%); z-index: -1; }
.buy-card-copy { max-width: 640px; display: grid; gap: 12px; justify-items: start; }
.buy-card-title { font-family: var(--font-sans); font-size: var(--fs-xxl); font-weight: var(--fw-medium); letter-spacing: var(--track-display); line-height: 1; max-width: 15ch; }
.buy-card-sub { font-family: var(--font-sans); font-size: var(--fs-base); max-width: 40ch; }
.buy-card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 12px; }
.buy-meta { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.buy-meta dt { font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.buy-meta dd { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-medium); margin: 0; }
.buy-tile { position: absolute; right: var(--gutter); bottom: var(--gutter); width: 160px; aspect-ratio: 1 / 1; border-radius: 12px; background: #000; color: #fff; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.buy-tile-brand { font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .22em; text-transform: uppercase; }
.buy-tile-name { font-family: 'Tanker', var(--font-sans); font-size: 40px; text-transform: uppercase; line-height: .9; }
.buy-card .pill, .band-light .buy-card .pill { background: #fff; border-color: #fff; color: var(--ink-on-light); }
.band-light .buy-card .pill:hover { background: var(--btn-fill-hover); }
@media (max-width: 767px) { .buy-card { background-position: 85% top; } }
.buy-card .fine { color: rgba(255,255,255,.55); }
@media (min-width: 768px) { .buy-card { min-height: 640px; padding: var(--gutter-lg); } .buy-tile { right: var(--gutter-lg); bottom: var(--gutter-lg); } }
@media (max-width: 767px) { .buy-tile { display: none; } }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-md); position: relative; letter-spacing: var(--track-tight); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.4em; transition: transform var(--dur-accordion) var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 65ch; color: var(--muted); }

/* The close: the reference's last band (764 px @1440, padding 224; 128 on phone). Full-width photo under a to-top black gradient, centred headline + one line + one pill, running straight into the footer. */
.close-band { position: relative; display: grid; place-items: center; text-align: center; min-height: 560px; padding: var(--band-y-big) var(--gutter); background: var(--canvas) var(--close-photo) 64% 8% / cover no-repeat; color: #fff; isolation: isolate; }
.close-band::before { content: ""; position: absolute; inset: 0 0 -1px; background: linear-gradient(to top, #0b0a0a 0%, rgba(11,10,10,.65) 50%, rgba(11,10,10,.4) 100%); z-index: -1; }
.close-copy { max-width: 768px; margin-inline: auto; }
.close-band h2 { font-size: var(--fs-xxl); line-height: var(--lh-heading); letter-spacing: var(--track-display); margin-bottom: 20px; max-width: 15ch; margin-inline: auto; }
.close-band p { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; margin-bottom: 40px; max-width: 44ch; margin-inline: auto; }
@media (min-width: 768px) { .close-band { min-height: 764px; padding-block: 200px 120px; place-items: end center; } }
@media (max-width: 767px) { .close-band { min-height: 640px; place-items: end center; padding-bottom: 56px; background-position: 64% 12%; } }

/* Footer: public/chrome.css (one footer everywhere, 2026-09-27). */

/* Video modal */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: var(--gutter); }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(100%, 1100px); aspect-ratio: 16 / 9; border-radius: var(--r-frame); overflow: hidden; background: #000; box-shadow: var(--shadow-modal); }
.modal-box video { width: 100%; height: 100%; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: var(--glass); color: #fff; font-size: 24px; cursor: pointer; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* The real product in the existing slots (audit item 33, 2026-09-27): the hero card shows a lesson page, the question
   block's card shows a file, the buy card's tile shows the library. Same frames, same glass pill; screenshots sit top-left. */
.card-media .card-shot { position: absolute; inset: 0; display: block; }
.card-media .card-shot img { object-position: 0 0; }
.join-clip img[src^="/img/product/"] { object-position: 0 0; }
.buy-tile-shot { padding: 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.buy-tile-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* On a white screenshot the glass pill disappears: the site's dark pill for light surfaces instead. */
.card-shot .pill, .join-clip img[src^="/img/product/"] ~ .pill { background: var(--ink-on-light); border-color: var(--ink-on-light); color: #fff; }