/* ════════════════════════════════════════════════════════════════════════ PCM · VARIANT_G — THE BLEND The owner's read on the first two attempts: variant_e and variant_f are the two ends of a stick. E has the look we want and F has the structure we want. G is the middle: **variant_F's SKELETON rendered in variant_E's REGISTER.** SKELETON FROM F (the reference page's architecture): · every named thing — a Secret, a deliverable, an FAQ — opens with a BAR welded to a card. Bars are the page's spine. · the BUY CARD carries the full inclusion list, not just a price · one ASK MODULE repeated verbatim at all eight positions · the straddle proof panel over the hero seam; chevron beat separators · FAQ answers all OPEN — a readable column, not an accordion · the comparison flanks the PRODUCT with the two states either side · a closing recap that restates the whole offer for people who scrolled REGISTER FROM E (the cinematic dark system): · the band vocabulary — hero / deep / wine / lit / bone / close. Section separation is a BAND CHANGE, not stacked whitespace. · the argument lives in the dark, the evidence lives in the light: one bone room for the proof, one lit band for the guarantee. · **THE GOLD LAW, inherited intact.** Solid gold FILL exists on exactly TWO objects page-wide: the CTA pill (.c-cta) and the save chip (.pcm-i-save). Every other gold on this page is ink, a hairline, or a ≤7% tint. This is what F broke — its gold slabs, pills and highlight marks are why it reads as a louder, cheaper page. Reinstating the law is most of what makes G feel like E. · the .c-* primitive vocabulary from ../styles.css does the typography, cards, rules and CTA, so the surface IS E's, not an imitation of it. WHAT G DELIBERATELY DROPS FROM F: the gold header slabs (now lifted surfaces with a gold hairline tick), the gold pill chips (now .c-eyebrow), and the gold highlight marks behind heading phrases (now the .c-rule-gold under the head). All three were gold fills; all three broke the law. ISOLATION: every rule is scoped `.pcm-v1 .pcm-i`. SectionsG's root carries className="pcm-i", so control, variant_e and variant_f cannot be reached. G imports NOTHING from variant_e/ or variant_f/ — it reuses only the shared Rich / HeroVideo / StickyCta / Footer and the .c-* primitives. BANS carried over from E: no backdrop-filter on new surfaces, no new @keyframes, no position:fixed layer, no content-visibility. ════════════════════════════════════════════════════════════════════════ */ .pcm-v1 .pcm-i { /* G adds no palette of its own — it reads E's tokens from ../styles.css. The only new values are structural. */ --i-bar-face: rgba(255, 255, 255, 0.05); /* The floor used to be 1.15rem, which on a 320px screen spent 37px of a 298px container on card padding alone. 0.8rem at the bottom of the clamp gives the copy back ~11px a card without loosening anything at the sizes that can afford it. */ --i-unit-pad: clamp(0.8rem, 2.8vw, 1.6rem); --i-radius: 20px; /* ── THE BAND LADDER — one source of truth ───────────────────────── These were literals in two places: here, and as the DEEP/LIT/BONE constants SectionsG passes to . Which meant a band could be retoned and the ramp into it would keep landing on the old colour. SectionsG now passes var(--i-*), so drift is impossible. THE RUNGS HAVE TO BE FAR ENOUGH APART TO SEE. Measured at 1440 before this change: wine ended #0b0410 and deep began #0a0410 — a max channel delta of TWO out of 255, under a 5%-white hairline worth about five levels. "The band changed" was not something an eye could perceive, so five of the page's seven section seams did not exist visually and the whole dark half read as one continuous surface. Wine is now genuinely the lighter room and deep genuinely the darker one: every dark seam steps 16–28 instead of 2–13. Verified by contrast.mjs at 39/39 after. */ --i-wine-top: #1d0724; --i-wine-bot: #120619; --i-deep: #050109; --i-lit: #06030c; --i-bone: #f4f1ea; /* THE BREAK — a hard strip of the void between two argument bands. The separation is the absence of a band, not a line drawn over the join: that keeps the page full-bleed and square (no panel inset, no rounded corner, no card) while making the boundary unmissable at scroll speed. Costs 4 × 26px on a 12,170px page. */ --i-break: clamp(1rem, 2.2vw, 1.6rem); --i-void: #000; /* what the break exposes. Without this the gap falls through to --c-floor from the shared sheet, which is not the same black. */ background: var(--i-void); /* ── AUTHORED EMPHASIS (see Rich.tsx) ────────────────────────────── Bold has to be heavier than whatever it sits in. In Poppins body copy that is 700 — Poppins ships no 900, so asking for more would only give us faux-bold. Headings below raise it, because Inter and Inter Tight both load a real 900. */ --c-em-weight: 700; --c-em-red: #e26d6d; } /* THE HERO HEADLINE IS ONE UNIFORM WEIGHT. Read from the source doc: the whole line — including the [Insert Limitation] fill — is bold together; there is no partial emphasis in it. So the emphasised runs must MATCH the h1's 800, not sit under it (the original 700 bug) and not sit over it (my first fix, which made "Self-Sabotage" heavier than its own headline). */ .pcm-v1 .pcm-i .c-h1 { --c-em-weight: 800; } /* Elsewhere a bold run inside a heading should genuinely stand out. */ .pcm-v1 .pcm-i .c-h2, .pcm-v1 .pcm-i .c-h3, .pcm-v1 .pcm-i .pcm-i-bar__t, .pcm-v1 .pcm-i .pcm-i-offer__lead { --c-em-weight: 900; } /* Red emphasis has to survive the light room too. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone { --c-em-red: #b3261e; } /* ══ BANDS — E's vocabulary, G's own copies ═══════════════════════════ */ .pcm-v1 .pcm-i-band { position: relative; isolation: isolate; padding-block: var(--c-sec-pad); } .pcm-v1 .pcm-i-band--deep { background: var(--i-deep); } .pcm-v1 .pcm-i-band--wine { background: linear-gradient(180deg, var(--i-wine-top) 0%, var(--i-wine-bot) 100%); } /* ── THE BREAK ──────────────────────────────────────────────────────── Only `margin-top` carries it, never margin-block: two touching siblings would collapse their margins, so the gap would be right by accident and would silently double the day a band grew padding. One margin, one gap. The band lifts off the void on a 9% hairline and sets back down on a 5.5% one — the top edge catches more light than the bottom, so a band reads as a surface rather than a stripe. */ .pcm-v1 .pcm-i-band--deep, .pcm-v1 .pcm-i-band--wine { margin-top: var(--i-break); border-top: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 1px solid rgba(255, 255, 255, 0.055); } /* ── THE FOUR WELDS ─────────────────────────────────────────────────── Not every boundary is a section break, and a gap at one of these would be a bug. They are explicit modifiers rather than :has() — Safari is still untested on this page (see the tracker), and a mod named at the call site says WHY it is welded, which a sibling selector cannot. · flush — the press bar runs straight into Secrets, no seam at all · weldtop — the FAQ takes the ramp out of the light room; the ramp IS the transition, so a black strip under it would read as a rendering fault · weldbottom — the ticket hands off to the lit guarantee, which already draws its own gold top line. A white hairline above that is two rules stacked. The fourth weld needs no modifier: the close band is not deep or wine, so it has no margin-top, and the FAQ meets it exactly as it did before. */ .pcm-v1 .pcm-i-band--flush, .pcm-v1 .pcm-i-band--weldtop { margin-top: 0; border-top: 0; } .pcm-v1 .pcm-i-band--weldbottom { border-bottom: 0; } /* The single moment of light in the dark half — the guarantee. */ .pcm-v1 .pcm-i-band--lit { background: radial-gradient(120% 88% at 50% 0%, rgba(75, 11, 130, 0.34) 0%, rgba(39, 6, 38, 0.1) 48%, transparent 72%), var(--i-lit); box-shadow: inset 0 1px 0 rgba(208, 170, 68, 0.34), inset 0 -1px 0 rgba(208, 170, 68, 0.14); } .pcm-v1 .pcm-i-band--hero { background: radial-gradient(62% 46% at 50% -6%, rgba(75, 11, 130, 0.5) 0%, rgba(75, 11, 130, 0) 62%), radial-gradient(96% 62% at 50% -18%, rgba(39, 6, 38, 0.8) 0%, rgba(39, 6, 38, 0) 70%), #000; /* floor lowered 1.25 → 0.6rem for the same reason as the proof row's: below ~670px viewport width the floor is the value, and that is exactly where the hero has to fit a subhead it did not used to carry */ padding-top: clamp(0.6rem, 3vw, 2rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } .pcm-v1 .pcm-i-band--close { background: #000; padding-block: clamp(4rem, 9vw, 7rem); } .pcm-v1 .pcm-i-band--close::before { content: ''; position: absolute; left: 50%; bottom: -8%; z-index: -1; width: min(120vw, 1100px); height: 720px; translate: -50% 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(75, 11, 130, 0.3) 0%, rgba(75, 11, 130, 0) 70%); } /* ── The bone band — one light room, via a scoped token flip ─────────── */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone { background: var(--i-bone); color: var(--c-ink-body); --c-ink: #160d18; --c-ink-body: rgba(22, 13, 24, 0.76); --c-ink-mute: rgba(22, 13, 24, 0.55); --c-ink-faint: rgba(22, 13, 24, 0.4); --c-card: #ffffff; --c-card-lift: #ffffff; --c-line: rgba(22, 13, 24, 0.13); --c-line-soft: rgba(22, 13, 24, 0.08); --c-gold-soft: rgba(22, 13, 24, 0.13); } /* Bone escapes — the things tokens cannot reach. In the light room gold is a FILL or a SYMBOL, never text and never a rule. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .c-card::before { background: none; } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .c-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; border-color: rgba(22, 13, 24, 0.1); box-shadow: 0 1px 2px rgba(22, 13, 24, 0.04), 0 14px 30px -18px rgba(22, 13, 24, 0.22); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .c-eyebrow { color: var(--c-ink-mute); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .c-rule-gold { background: linear-gradient(90deg, rgba(22, 13, 24, 0.45), rgba(22, 13, 24, 0)); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-stars { color: #b0821f; } /* The shared .c-disclaimer rides --c-ink-faint, which the bone flip lands at 2.59:1 on paper. It is an income-claims disclaimer — the one paragraph on the page that has to be legible. Overridden inside G's scope only; the shared stylesheet is not touched. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .c-disclaimer { color: var(--c-ink-body); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-unit { background: #fff; border-color: rgba(22, 13, 24, 0.1); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-bar { background: rgba(22, 13, 24, 0.035); } /* ── Seams — E's soft ramps into and out of the light room ───────────── */ .pcm-v1 .pcm-i-ramp { height: clamp(2.5rem, 6vw, 3.5rem); background: linear-gradient(180deg, var(--pcm-i-from), var(--pcm-i-to)); } .pcm-v1 .pcm-i-edge { height: 1px; background: linear-gradient(90deg, transparent, rgba(208, 170, 68, 0.3), transparent); } /* ══ Measure ═════════════════════════════════════════════════════════ */ /* THE PAGE GUTTER IS THE REAL CONSTRAINT ON A SMALL PHONE, not card padding. Traced at 320: .c-wrap spends 20px of padding a side plus 11px of centring margin a side — 62px, nineteen percent of the screen — before a card has drawn anything. Stacked with the unit's own padding it left the secret bodies at 230px: twenty-five characters a line, four words. Overridden inside G's scope only (`.pcm-i .c-wrap` beats the shared `.c-wrap` on specificity), so control, variant_e and variant_f keep the gutter they were measured with. Worth ~26px to EVERY text column on the page at 320, not just this one section. THE NARROWED GUTTER IS A TOKEN, not a literal in a media query. The act rail has to start from the same number the text column starts from; when the override was a bare `0.85rem` here and the rail read `--c-gutter`, the two disagreed below 400px and the rail landed 2px off the copy instead of 10. Same class of bug as the ramps reading duplicated band hexes. One value, two readers. */ .pcm-v1 .pcm-i { --i-gutter: var(--c-gutter); } @media (max-width: 400px) { .pcm-v1 .pcm-i { --i-gutter: 0.85rem; } } .pcm-v1 .pcm-i .c-wrap { padding-inline: var(--i-gutter); } .pcm-v1 .pcm-i-col { max-width: 54rem; margin-inline: auto; } .pcm-v1 .pcm-i-col--w { max-width: 60rem; margin-inline: auto; } .pcm-v1 .pcm-i-col--wide{ max-width: 64rem; margin-inline: auto; } /* ══ THE UNIT — F's structural signature, E-legal. F opened every named thing with a SOLID GOLD SLAB. Here the bar keeps its job (it names the unit and welds to the card) but becomes a lifted surface with a gold hairline tick and a gold kicker — gold as ink and hairline, never as fill. ═══════════════════════════════════════════════════════ */ .pcm-v1 .pcm-i-units { display: grid; gap: clamp(0.9rem, 2.2vw, 1.25rem); } .pcm-v1 .pcm-i-unit { position: relative; border-radius: var(--i-radius); overflow: hidden; background: var(--c-card); border: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-bar { position: relative; padding: clamp(0.9rem, 2.2vw, 1.15rem) var(--i-unit-pad); background: var(--i-bar-face); border-bottom: 1px solid var(--c-line-soft); } /* the gold tick — E's .pcm-e-prod device, promoted to the bar's signature */ .pcm-v1 .pcm-i-bar::before { content: ''; position: absolute; top: 0; left: var(--i-unit-pad); width: 44px; height: 2px; background: linear-gradient(90deg, var(--c-gold), rgba(208, 170, 68, 0)); } /* The number is a NUMBER — a bordered chip, not a 0.66rem whisper above the title. Owner, 2026-08-10: "clearly a numbering thing, maybe some sort of light border to make it pop". Hairline + 7% tint, so it still obeys the gold law. Serves both "SECRET #1" and the value stack's "#1". */ .pcm-v1 .pcm-i-bar__k { display: inline-block; margin-bottom: 0.6rem; padding: 0.32rem 0.75rem 0.28rem; border: 1px solid rgba(208, 170, 68, 0.4); border-radius: 999px; background: rgba(208, 170, 68, 0.07); font-family: var(--dl-font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); font-variant-numeric: tabular-nums; } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-bar__k { border-color: rgba(176, 130, 31, 0.42); background: rgba(176, 130, 31, 0.08); color: #8a6516; } .pcm-v1 .pcm-i-bar__t { display: block; font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1.02rem, 2.4vw, 1.2rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--c-ink); } /* The value reads INLINE with the title, at title size — "Lifetime Recording Access – $97 Value", the way the doc writes it. It was a 0.66rem struck chip pinned to the far right of the bar: the owner could barely see it. */ .pcm-v1 .pcm-i-bar__v { color: var(--c-gold); white-space: nowrap; } .pcm-v1 .pcm-i-unit__body { padding: var(--i-unit-pad); } /* Unit body with the medallion alongside the copy. On a phone the icon runs ABOVE the copy rather than beside it: the card's own padding plus a 72px medallion left the text column at ~200px — six-word lines. Beside-the-copy resumes as soon as there is room for it. */ .pcm-v1 .pcm-i-unit__split { display: grid; gap: clamp(0.9rem, 2.5vw, 1.6rem); align-items: start; grid-template-columns: minmax(0, 1fr); justify-items: start; } /* …but the COPY still has to fill its track. `justify-items: start` is there to stop the medallion stretching to the column width; it was also shrinking the paragraph beside it to its shrink-to-fit width, which is why the secret bodies measured 219px inside a 261px track at 320 — 23 characters a line over seventeen lines. The image keeps the start alignment; the text spans. */ .pcm-v1 .pcm-i-unit__split > p { justify-self: stretch; width: 100%; } @media (min-width: 560px) { .pcm-v1 .pcm-i-unit__split { grid-template-columns: auto minmax(0, 1fr); } } .pcm-v1 .pcm-i-unit__art { width: 72px; height: 72px; flex: none; } @media (min-width: 768px) { .pcm-v1 .pcm-i-unit__art { width: 96px; height: 96px; } } @media (min-width: 1024px) { .pcm-v1 .pcm-i-unit__art { width: 112px; height: 112px; } } /* ══ SECTION HEAD — E's exactly: eyebrow, h2, gold rule ══════════════ */ .pcm-v1 .pcm-i-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; } .pcm-v1 .pcm-i-head .c-rule-gold { margin-top: 0.35rem; } /* ══ ACTS — the section-separation layer ═══════════════════════════════ TEMPORARY, gated on ?sep=. Everything below is inert unless a mode is set, so the default page is unchanged pixel-for-pixel. See in Bits.tsx for the diagnosis and 05-section-separation.md for what was already tried and rejected. The one shared idea, and the reason all three modes carry it: measured on the shipped page all EIGHT section headings render at 29.7px on a phone (44.8px at 1440) — the same size, with the same gold rule, over seventeen phone screens. The hero's own H1 is 27px, SMALLER than every heading beneath it. A page whose major turns and minor sub-points are typeset identically cannot be navigated, however visible its seams are. So an act opener is LOUD and an act continuation is QUIET, in every mode. The clamps carry a real REM minimum rather than growing on vw alone: a first cut used clamp(1.95rem, 1.15rem + 3.3vw, 3.5rem), which at 390px grew the opener by 1.6px — a change that measured as no change. EVERY rule here hangs off `.pcm-i-act[data-sep]`. renders no wrapper at all when the switch is absent, so this whole layer is inert on the default page. Written un-gated first, it retoned all eight headings with no ?sep= set and grew the desktop page 12,246 → 12,606px — caught by the other-arms pixel gate, which is what that gate is for. */ .pcm-v1 .pcm-i-act[data-sep] .pcm-i-head[data-actpos='open'] .c-h2 { font-size: clamp(2.35rem, 1.62rem + 3.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.018em; max-width: 19ch; } .pcm-v1 .pcm-i-act[data-sep] .pcm-i-head[data-actpos='open'] .c-rule-gold { width: 92px; height: 2px; } .pcm-v1 .pcm-i-act[data-sep] .pcm-i-head[data-actpos='cont'] .c-h2 { font-size: clamp(1.16rem, 0.95rem + 1vw, 1.62rem); line-height: 1.2; max-width: 28ch; } .pcm-v1 .pcm-i-act[data-sep] .pcm-i-head[data-actpos='cont'] .c-rule-gold { width: 34px; opacity: 0.85; } /* ── sep=chapter — the act opens on a full-bleed title card ────────────── The card carries the section's OWN heading, lifted out of the band. No word on it is new; nothing is duplicated (the band stops rendering its head in this mode — see SectionsG). */ .pcm-v1 .pcm-i-open { background: var(--i-void); padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid rgba(255, 255, 255, 0.09); } .pcm-v1 .pcm-i-open__tick { display: block; width: 56px; height: 2px; margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); background: linear-gradient(90deg, var(--c-gold), rgba(208, 170, 68, 0)); } .pcm-v1 .pcm-i-open__t { margin: 0; text-align: left; font-family: var(--dl-font-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.022em; color: var(--c-ink); font-size: clamp(2.6rem, 1.7rem + 4vw, 4.6rem); max-width: 17ch; } /* inside an act the sections sit tight; the space is spent at the act edge */ .pcm-v1 .pcm-i-act[data-sep='chapter'] > .pcm-i-band[data-actpos='cont'] { margin-top: 0; } .pcm-v1 .pcm-i-act[data-sep='chapter'] .pcm-i-head[data-actpos='cont'] { align-items: flex-start; text-align: left; gap: 0.55rem; } /* ── sep=spine — one hairline runs the length of the act ───────────────── The rail is a single element spanning the whole act rather than a border per section: the CONTINUITY is what says "these four sections are one thing", which is the owner's "a break can group SEVERAL sections". Gold as a hairline, never a fill — the gold law is intact. */ .pcm-v1 .pcm-i-act[data-sep='spine'] { position: relative; --rail-out: clamp(0.55rem, 2.6vw, 1rem); } .pcm-v1 .pcm-i-rail { position: absolute; z-index: 4; pointer-events: none; left: 0; right: 0; top: clamp(1.6rem, 4vw, 3rem); bottom: clamp(1.6rem, 4vw, 3rem); } /* mirrors .c-wrap exactly, so the rail tracks the text column at every width instead of being positioned with viewport arithmetic */ .pcm-v1 .pcm-i-rail > i { display: block; box-sizing: border-box; height: 100%; width: 100%; max-width: var(--c-content); margin-inline: auto; padding-inline: var(--i-gutter); } .pcm-v1 .pcm-i-rail > i::before { content: ''; display: block; height: 100%; width: 2px; margin-left: calc(-1 * var(--rail-out)); background: linear-gradient( 180deg, rgba(208, 170, 68, 0) 0%, rgba(208, 170, 68, 0.6) 4%, rgba(208, 170, 68, 0.6) 96%, rgba(208, 170, 68, 0) 100% ); } .pcm-v1 .pcm-i-act[data-sep='spine'] { margin-top: clamp(2.6rem, 6vw, 4.25rem); } /* the argument follows the press bar with no seam, exactly as `flush` says */ .pcm-v1 .pcm-i-act[data-sep='spine'][data-act='a2'] { margin-top: 0; } .pcm-v1 .pcm-i-act[data-sep='spine'] > .pcm-i-band { margin-top: 0; } .pcm-v1 .pcm-i-act[data-sep='spine'] > .pcm-i-band:not(:first-of-type) { border-top: 0; } .pcm-v1 .pcm-i-act[data-sep='spine'] .pcm-i-head[data-actpos] { align-items: flex-start; text-align: left; } .pcm-v1 .pcm-i-act[data-sep='spine'] .pcm-i-head[data-actpos='cont'] { position: relative; gap: 0.5rem; } /* the connector out to the rail — same token as the rail's own offset, so the two cannot drift apart */ .pcm-v1 .pcm-i-act[data-rail] .pcm-i-head[data-actpos='cont']::before { content: ''; position: absolute; top: 0.58em; right: 100%; width: var(--rail-out); height: 2px; background: linear-gradient(270deg, rgba(208, 170, 68, 0.22), rgba(208, 170, 68, 0.6)); } /* ══ sep=stage — THE BLACK STAGE ═══════════════════════════════════════ Owner, 2026-08-11: "we don't want to do that different color background. Let's just pretend that everything's going to be black. We need that cinematic feel like the other funnel, but again, a better way to break up the sections, make it easier on the eyes, help guide the eyes to the most important sections." The other funnel is get-power-code variant_d, and its register is the one THIS page's own styles.css already defines. Its art-direction brief (docs/campaign-strategy/build-research/get-power-code-redesign/reports/ 02-cinematic-dark.md) says two things that condemn the band ladder above: · "#000000 / #0a0a0a: base, 100% of backgrounds" · "#270626 / #4b0b82: gradient bloom, NEVER flat solid fills on large areas" The wine/deep alternation is exactly a flat solid fill on a large area, and the bone room is a second background colour. So `stage` deletes the whole ladder — wine, deep, lit, bone, the ramps between them and the black break strip — and puts the page back on the register's true-black floor. That REMOVES the page's only separation device, which is the point: with colour gone, separation has to come from the three things the owner actually listed. This mode uses all three at once. 1. LIGHT — the register's own "one moment of light rhythm: dark calm sections, then a beat of light", applied per ACT instead of once per page. Each act opens in a bloom and fades back to black, so the page reads as lit rooms joined by dark corridors. On a black stage you separate and prioritise with light, which is also the whole of "help guide the eyes to the most important sections". 2. CONTAINER — what each act is wrapped in. The argument sheds its cards and runs as type on the void; the offer keeps the glass, because the offer is the one act that is a THING you receive. Different rooms, different furniture. 3. TYPE — the act-opener/continuation hierarchy shared with the other three modes. NOT a rerun of variant_h. That put ONE fixed light behind the WHOLE page at 0.72–0.80 alpha, so nothing was differentiated and 0.0% of pixels changed. Here the light is per-act, over a true-black floor with nothing tinted on top of it, and every value below is measured. */ /* ── the floor. ONE black surface, on the page — and every band goes TRANSPARENT so the light beneath can reach it. Painting each band `var(--c-floor)` instead (the first cut) looks identical in isolation and is fatal: a solid band, however black, is an opaque lid over the bloom. Measured, the act openings read a background luminance of 0.0 with the light element present and correct in the DOM — variant_h's exact failure, one layer up. The floor belongs to the page; the bands are holes in nothing. */ .pcm-v1 .pcm-i[data-sep='stage'] { background: var(--c-floor); } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--wine, .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--deep, .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--bone, .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--close { background: transparent; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--lit { background: transparent; box-shadow: none; } /* the seams the ladder needed are meaningless on one continuous floor */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band { margin-top: 0; border-top: 0; border-bottom: 0; } /* the ramps existed to soften a hard dark→bone cut. There is no cut now. */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-ramp { display: none; } /* ── the light. One bloom per act, top-anchored, fading out well before the act ends — so the act OPENS lit and settles into the dark, and the corridor between two acts is genuinely black. Bloom, never a fill. ─────────────── */ .pcm-v1 .pcm-i-act[data-sep='stage'] { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); } /* …EXCEPT the argument, which the press bar runs straight into. `flush` says exactly this on the band itself — no seam between the featured-in bar and Secrets — and the act margin was re-opening it as a 48px strip of black floor under the bar (owner, 2026-08-11). The spine mode already carried this exception; stage was missing it. */ .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a2'] { margin-top: 0; } .pcm-v1 .pcm-i-act[data-sep='stage']::before { content: ''; position: absolute; z-index: 0; inset: 0 0 auto 0; height: min(1100px, 65%); pointer-events: none; background: radial-gradient(75% 100% at 50% 0%, rgba(75, 11, 130, 0.34) 0%, rgba(75, 11, 130, 0) 68%), radial-gradient(120% 70% at 50% -8%, rgba(39, 6, 38, 0.55) 0%, rgba(39, 6, 38, 0) 72%); } /* the bands are transparent now, so content has to be lifted over the bloom */ .pcm-v1 .pcm-i-act[data-sep='stage'] > .pcm-i-band { z-index: 1; } /* THE SECOND BEAT. One bloom per act leaves the argument — 6,400px of it — lit for its first 600px and then pure black for the remaining 5,800. Measured, the floor falls to 0.0 and stays there, which is a corridor, not a room, and unrelieved #000 for five phone screens is the opposite of "easier on the eyes". So each section INSIDE an act gets its own much fainter bloom, about half the act opener's. The register already works this way — gpc variant_d pairs its hero bloom with a `.c-bloom-foot` that "picks the eye back up" — this is that rhythm at two scales: a big beat of light on the act, a small one on each section within it. z-index -1 keeps it behind the band's own content; the band is an isolated stacking context, so it cannot fall behind the page. */ .pcm-v1 .pcm-i-act[data-sep='stage'] > .pcm-i-band[data-actpos='cont']::after { content: ''; position: absolute; z-index: -1; inset: 0 0 auto 0; height: min(560px, 55%); pointer-events: none; background: radial-gradient(72% 100% at 50% 0%, rgba(75, 11, 130, 0.17) 0%, rgba(75, 11, 130, 0) 70%); } /* the PROOF act is the page's evidence — it gets the brightest opening, which is what "guide the eyes to the most important sections" buys us */ .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a4']::before { background: radial-gradient(75% 100% at 50% 0%, rgba(75, 11, 130, 0.44) 0%, rgba(75, 11, 130, 0) 68%), radial-gradient(120% 70% at 50% -8%, rgba(39, 6, 38, 0.6) 0%, rgba(39, 6, 38, 0) 72%); } /* ── the containers. Each act is furnished differently. ─────────────────── */ /* THE ARGUMENT sheds its cards entirely: on a black stage a bordered box round every paragraph is what made four screens read as one texture. Type on the void, with the gold tick and the numbered chip left doing the naming. */ .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a2'] .pcm-i-unit { background: none; border: 0; border-radius: 0; overflow: visible; } .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a2'] .pcm-i-bar { background: none; border-bottom: 0; padding-inline: 0; padding-bottom: 0.35rem; } .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a2'] .pcm-i-unit__body { padding-inline: 0; } .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a2'] .pcm-i-units { gap: clamp(2.2rem, 5vw, 3.4rem); } /* THE OFFER keeps its glass — it is the one act that is a thing you receive, so its deliverables stay as objects you can count. */ .pcm-v1 .pcm-i-act[data-sep='stage'][data-act='a3'] .pcm-i-unit { background: var(--c-card); border-color: var(--c-line-soft); } /* ── the light room goes dark. Undo the bone token flip rather than re-declaring the dark values here — duplicating them is how the ramps drifted. `:not()` keeps every one of these rules off the stage. ───────── */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--bone { color: inherit; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--bone .pcm-i-quote, .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--bone .c-card { background: var(--c-card); border-color: var(--c-line-soft); box-shadow: none; } /* the two trust tiles are dark-on-light artwork and cannot survive a black floor unlit — they keep a light plate of their own, which is a PLATE for an image, not a section background */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-trusttile { background: #f4f1ea; border-radius: var(--i-radius); } /* ── THE FOLD, given room to breathe (owner: "on mobile everything seems so compact, and the spacing is off, at least at the top above the fold"). He is right, and it is a scar: the hero was re-costed to fit the CTA inside the fold, and the saving came out of the gaps. Measured, the top of the page ran a 10–12px pad, then an 8–10px gap between the rating row and the pre-headline. That is not spacing, that is what is left after a squeeze. The budget was never actually spent, though — the CTA lands at 539/586/564 against 568/640/660, so there is 29px of headroom at 320, 54px at 360 and 96px at 390. The air has to SCALE, because 320 has almost none of it: the generous half is gated at 350px, and small phones get only the cheap fixes. Every value below was set by measuring the fold afterwards, not by taste. */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--hero { padding-top: clamp(1.1rem, 4.6vw, 2.4rem); } /* the rating row to the pre-headline was the tightest gap on the page at 8–10px. NOTE this REPLACES the existing margin rather than adding to it — a first pass set it to 1.6vw and measured the gap SHRINKING to 6px, because whatever was already there was larger. Measured after: 12/13/14px. */ .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-proof { margin-bottom: clamp(0.7rem, 3.4vw, 1.2rem); } @media (min-width: 350px) { .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero { row-gap: clamp(1.5rem, 5.6vw, 2.4rem); } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-h1 { margin-top: clamp(1.6rem, 6vw, 2.4rem); } } /* ── THE PRE-HEADLINE BAR ON PHONES (owner, 2026-08-11: "I don't know why that line is two different lines… I don't know why on mobile it doesn't have that bar thing around it like we have on desktop"). Both true, and measured: on a phone variant_g strips the shared pill to bare text (border 0, padding 0) — an old fold-budget call, made back when the CTA had 27px of headroom. And the line needs 370px to sit on one row inside a 336px column, so it wraps. The bar is restored. The width for one line is bought by letting the bar sit NEARER THE SCREEN EDGE than the text column does — 8px instead of 27px a side. That is the difference between 13.3px type on one line and 11px type, which would be under the readability floor the mobile audit already flags. Which is also what he called it: a BAR, not a tight pill. 320px keeps two lines on purpose. It cannot fit one at any size that is still readable — it would need 11px — so `nowrap` starts at 350px and small phones wrap gracefully with the bar still on. */ @media (max-width: 767px) { .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-preheadline { border: 1px solid var(--c-gold-soft); border-left: 3px solid var(--c-gold); background: rgba(208, 170, 68, 0.12); border-radius: 12px; padding: 0.42rem 0.62rem; /* reach past the text column toward the screen edge — this is the width that makes one legible line possible */ margin-inline: -1.2rem; max-width: calc(100% + 2.4rem); font-size: clamp(0.8rem, 3.4vw, 0.95rem); letter-spacing: -0.008em; line-height: 1.35; } } @media (min-width: 350px) and (max-width: 767px) { .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-preheadline { white-space: nowrap; } } /* Under 350px the bar still wraps to two lines, so it costs a line-height the other phones do not pay — and 320 is the width with the least fold headroom on the page. With the bar's default padding the CTA landed at 565 against a 568 budget: passing, but 3px is not a margin, it is luck. Tightened here only; every phone that fits one line keeps the roomier bar. */ @media (max-width: 349px) { .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-preheadline { padding-block: 0.26rem; line-height: 1.28; margin-bottom: 0.42rem; } } /* ── THE DESKTOP FOLD (owner, 2026-08-12: "look at the fold on my MacBook Pro … the button is not above the fold"). He is right, and the gate could not have told us: fold320.mjs measured three PHONE widths and nothing else. Laptops are SHORT, not tall — his MacBook Pro is 1311×777 — and the hero CTA sat at 873px on every desktop width: 1280×720 → 153px below the fold 1311×777 → 96px below ← his machine 1440×800 → 73px below 1512×860 → 13px below Gated at all four now. The height comes back from four places, and the first is a genuine cleanup rather than a squeeze — "it still needs to look clean, even cleaner": 1. THE SPEC STRIP GOES. "2-HOUR MASTERCLASS · LIFETIME RECORDING · FULL TRANSCRIPT · WORKBOOK · VIDEO LESSON" sits two rows above an inclusion list that states every one of those items in full. It was already hidden under 480px for exactly this reason. On a short laptop it is 63px of duplication directly above the button. 2. The band's top padding and the hero's row rhythm tighten. 3. The headline steps down one size — still the largest thing on the page. Keyed on `max-height`, not width: a tall 27" monitor keeps the roomy hero, only short laptop viewports pay. Phones are untouched (min-width 1024). */ @media (min-width: 1024px) and (max-height: 900px) { .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-buycard .pcm-i-spec { display: none; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-band--hero { padding-top: 1.25rem; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero { row-gap: 1.4rem; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-h1 { font-size: clamp(2rem, 2.9vw, 2.6rem); margin-top: 1.35rem; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-hero__lede .c-preheadline { margin-bottom: 0.45rem; } .pcm-v1 .pcm-i[data-sep='stage'] .pcm-i-buycard { padding-block: 1.15rem; } } /* THE DISCLAIMER. The shared .c-disclaimer rides --c-ink-faint, which lands at 2.48:1 on true black — measured, and a FAIL. In the light room it was already overridden for exactly this reason; taking that room dark re-exposed the same problem on the same paragraph. It is the income-claims disclaimer: the one paragraph on the page that has to be legible. Same fix, same scope. */ .pcm-v1 .pcm-i[data-sep='stage'] .c-disclaimer { color: var(--c-ink-body); } /* ── sep=cadence — nothing added to the page ───────────────────────────── The page already owns both devices and runs both flat. This gives the BREAK the same two values the headings just got, and stops there. */ .pcm-v1 .pcm-i-act[data-sep='cadence'] > .pcm-i-band[data-actpos='cont'] { margin-top: 0.4rem; } .pcm-v1 .pcm-i-act[data-sep='cadence'] > .pcm-i-band[data-actpos='open'] { margin-top: clamp(2.6rem, 6vw, 4.25rem); } /* the two existing welds still win — a gap at either would be a rendering fault, not a section break (see THE FOUR WELDS above) */ .pcm-v1 .pcm-i-act[data-sep='cadence'] > .pcm-i-band--flush[data-actpos='open'], .pcm-v1 .pcm-i-act[data-sep='cadence'] > .pcm-i-band--weldtop[data-actpos='open'] { margin-top: 0; } /* ══ HERO ═══════════════════════════════════════════════════════════════ ONE ORDER AT EVERY WIDTH, and it is the source doc's: proof, pre-headline, claim, what the thing IS, then the ask. Mobile used to run lede → card → media → sub, which put the subhead AFTER the button and the product shot; the owner read it as out of whack and he was right. That order existed because the subhead costs 115–137px on a phone and the fold budget had 27–105px of headroom. The mistake was treating the budget as fixed. The reference page this was built from lands its CTA ~414px down on a ~440px phone — it fits everything because it spends less above the button, not because it has less to say. So the hero was re-costed instead of re-ordered (see the phone block below): 562/568 at 320, 614/640 at 360, 591/660 at 390 — all three PASS, with the doc's order. */ .pcm-v1 .pcm-i-hero { display: grid; row-gap: clamp(1rem, 2.5vw, 1.5rem); /* KEALA'S ORDER, 2026-08-12: "ultimately the video is going to go here, above this box, and then the rest can pretty much stay as is here on mobile." So the phone stack is claim → video → buy box, which is the standard VSL shape: the video is the pitch, the box is what you do after watching it. THIS COSTS THE FOLD ON A PHONE and that is not a side effect, it is the trade. A 16:9 player is ~188px at 390 and the hero CTA moves from 596 to ~800 against a 660 budget. What lands above the fold instead is proof → headline → the video itself, and the sticky CTA bar (opacity 0 at load) fades in as soon as the visitor scrolls. Desktop is unaffected — there the video sits BESIDE the box, so both are above the fold. */ /* `bens` — Keala's three benefit bullets (2026-08-31 Loom, 01:35–03:45: "here's the offer, here's the benefits of the offer, and then it gets into how it works"). Placed AFTER the card, not before the media: the phone fold is already spent (see the measured budget above — 591/660 at 390 with the CTA at ~800), and putting three more lines above the video would push the buy box down for a reader who has not been given a reason to want it yet. Under the card they are the first thing after the transaction, which is the order he described. */ grid-template-areas: 'lede' 'sub' 'media' 'card' 'bens' 'vouch'; } .pcm-v1 .pcm-i-hero > * { min-width: 0; } @media (min-width: 1024px) { .pcm-v1 .pcm-i-hero { /* The split is a variable so the media column can track the VIDEO'S SHAPE (SectionsI computes --pcm-i-media-fr from the aspect ratio). The fallbacks are the original literals, so anything without a hero video — and every landscape video, which is 100% of non-image traffic — resolves to exactly 1.08fr / 0.92fr and renders identically to before. */ grid-template-columns: minmax(0, var(--pcm-i-media-fr, 1.08fr)) minmax(0, var(--pcm-i-card-fr, 0.92fr)); column-gap: clamp(2rem, 4vw, 3.25rem); row-gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-areas: 'lede lede' 'sub sub' 'media card' 'bens card' 'vouch card'; align-items: start; } } /* Desktop composition (owner directive): the CLAIM owns the full width at the top — pre-headline, headline, then sub-headline — and only below it does the fold split into two, product left / transaction right. The earlier layout ran the card up the right-hand side alongside the headline, which read as two unrelated columns and left a dead gulf under the card. */ .pcm-v1 .pcm-i-hero__lede { grid-area: lede; text-align: center; } .pcm-v1 .pcm-i-hero__lede .c-h1 { font-size: clamp(1.6rem, 0.86rem + 3.4vw, 3.05rem); } /* THE SUBHEAD'S MEASURE HAS TO TRACK THE HEADLINE'S, not sit at a frozen 46rem. The h1 has no cap of its own, so it grows with the container while a fixed sub does not — and the wider the screen, the worse the mismatch gets: measured at 736px the sub was 66% of the headline's width at 1280, 58% at 1440 and 48% at 1920, breaking to three lines with a two-word orphan under a headline that had room for two. Backwards. `100%` in the min() is what keeps phones out of it — a percentage below the cap makes the column NARROWER than the container and pushed 360px to six lines. Now 2 lines at 1280/1440/1920, and phones render identically to before. */ .pcm-v1 .pcm-i-hero__sub { grid-area: sub; max-width: min(72rem, 100%); margin-inline: auto; text-align: center; } .pcm-v1 .pcm-i-hero__sub .c-body { font-size: clamp(0.92rem, 0.78rem + 0.6vw, 1.05rem); line-height: 1.55; /* never leave a stranded last line under a centred headline */ text-wrap: balance; } /* WIDTH IS EXPLICIT, and it has to be. `margin-inline: auto` on a grid item cancels the default stretch and makes it shrink-to-fit. That was harmless while the child was an with an intrinsic width — the moment the child became the Vidalytics box (a div at `width: 100%`, height from padding-top) fit-content resolved to ZERO and the player rendered 0×0 ON PHONES ONLY. Desktop was fine because the 1024 rule drops the auto margin. */ .pcm-v1 .pcm-i-hero__media { grid-area: media; width: 100%; max-width: 260px; margin-inline: auto; } @media (min-width: 640px) { .pcm-v1 .pcm-i-hero__media { max-width: 380px; } } @media (min-width: 1024px) { /* Top edges flush with the buy card: the row's first horizontal is where the eye lands, and a 45px stagger there reads as a mistake. */ .pcm-v1 .pcm-i-hero__media { max-width: none; margin-inline: 0; align-self: start; } } .pcm-v1 .pcm-i-hero__media img { border-radius: 14px; border: 1px solid var(--c-line-soft); width: 100%; } /* THE PLAYER OWNS ITS OWN style ATTRIBUTE. Vidalytics rewrites the embed div's inline style on init (it injects its colour vars), which silently discarded the poster, the radius and the clip that HeroVideo sets inline. Anything we need to survive the player booting has to live in CSS, and on the WRAPPER — not on the element the player owns. */ .pcm-v1 .pcm-i .c-hero-video { border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-hero__card { grid-area: card; } /* ══ THE VIDEO SIZES ITSELF FROM ITS CONTAINER — nothing copied from the embed. Owner, 2026-08-12: "we should really just be pulling out the video ID … all this sizing and formatting and dynamicness, all that should be on our side." It was not. Two inherited caps were squeezing it, and neither came from Vidalytics: · .c-hero-video carries `max-width: clamp(15rem, 74vw, 21.5rem)` — 344px, written for the 9:16 VERTICAL video on get-power-code. A 16:9 player inherited it, so the video sat at 344px inside a 587px column at 1311 and inside a 793px column at 1920, adrift on its auto margins. · .pcm-i-hero__media caps at 260/380px — sized for the small PRODUCT RENDER that used to live in that slot, not for a player. Both are correct for what they were written for, so neither is deleted: the media slot declares `--video` at the call site when content.video is set, and only that case is re-sized. If the video is ever pulled again, the product render gets its old caps back untouched. The aspect is declared HERE, in one place, rather than passed through config as a percentage copied out of the snippet. `padding-top` is zeroed with !important because Vidalytics rewrites the embed div's inline style when it boots and re-adds its own. */ .pcm-v1 .pcm-i-hero__media--video { max-width: none; width: 100%; } /* The guarantee badge + arrow that sits under the video and points at the buy box (Keala, 2026-08-12). Gold stays ink and hairline here — the badge is supplied artwork, not a gold fill we drew, so the gold law holds. */ .pcm-v1 .pcm-i-vguar { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 0.8rem); justify-content: center; margin-top: clamp(0.7rem, 2vw, 1rem); color: var(--c-gold); } .pcm-v1 .pcm-i-vguar img { width: clamp(38px, 9vw, 52px); height: auto; flex: none; } .pcm-v1 .pcm-i-vguar__txt { font-family: var(--dl-font-display); font-weight: 700; font-size: clamp(0.78rem, 2.2vw, 0.92rem); letter-spacing: 0.01em; line-height: 1.25; } .pcm-v1 .pcm-i-vguar__arrow { width: 1.5em; height: 1.5em; flex: none; rotate: 90deg; } /* side by side from 1024 — the box is to the RIGHT, so the arrow stops pointing down and points at it */ @media (min-width: 1024px) { .pcm-v1 .pcm-i-vguar { justify-content: flex-end; } .pcm-v1 .pcm-i-vguar__arrow { rotate: 0deg; } } .pcm-v1 .pcm-i-hero__media--video .c-hero-video { max-width: none; width: 100%; margin: 0; } /* THE SHAPE COMES FROM THE VIDEO, VIA A CUSTOM PROPERTY (2026-09-04). This was hard-coded `aspect-ratio: 16 / 9`, which was correct while the hero only ever held the landscape VSL. The concept videos are not landscape and are not all one shape either — 9:16 for concept 6, 4:5 for 0, 12 and 17 — so SectionsI now computes 100/paddingTop and passes it as --pcm-i-vid-ar. Any future ratio is then a config value, not a new CSS class. The `padding-top: 0 !important` stays: Vidalytics rewrites the embed div's inline style on boot, so the aspect has to be ours and has to outrank it. */ .pcm-v1 .pcm-i-hero__media--video [id^='vidalytics_embed_'] { padding-top: 0 !important; aspect-ratio: var(--pcm-i-vid-ar, 1.7778); height: auto; } /* Beside the buy card the video should not out-scale it; on a phone it is the full column. Capped at the hero column's own width, so it tracks the layout rather than a fixed number. */ @media (min-width: 1024px) { .pcm-v1 .pcm-i-hero__media--video { align-self: start; } } /* ══ THE PHONE HERO'S BUDGET ══════════════════════════════════════════ Measured cost of the old hero above the button at 320: proof 52 · eyebrow BOX 49 · headline 144 · spec strip 49(+13 pad) · price 32 · save 21. Adding the subhead where the doc puts it needed 126px back at 320, 87 at 360 and 26 at 390. Every reclaim below is content-neutral — nothing the owner wrote is removed, and nothing moves to a place he did not put it. */ @media (max-width: 1023px) { /* ── THE PILL IS BACK ON MOBILE (owner, 2026-09-03) ───────────────── "We shouldn't have stripped it. If you look at the Power Code page on rise, that mobile version still has the pill. The dynamic pill spacing should be the same way it works on this page." He is right, and get-power-code is the proof: measured live at 390/400/ 768/1440 it carries the pill at EVERY width — 1px border with a 3px gold left rule, rgba(208,170,68,0.12) fill, 8px/16.8px padding, 12px radius — because it never overrides `.c-preheadline` at all. The "dynamic" part is the shared rule's own clamp(0.9rem, 1.25vw, 1.02rem), which is why the type still shrinks to 14.4px on a phone without the box going away. So the fix is DELETION, not a new rule: PCM now inherits the same shared `.c-preheadline` that get-power-code does, and the two pages match by construction rather than by two lists of numbers kept in sync by hand. What was here before, and why it was wrong: an earlier pass stripped the border, background and padding below 1023px to buy back 13px of fold, arguing the source doc specifies plain text. That trade has not aged well. The hero has since gained a subhead, six faces, three benefit bullets and the 10,000+ line, so 13px is no longer the binding constraint — and the pre-headline is now CONCEPT-SPECIFIC, i.e. it carries the ad's promise and is the one line above the fold most worth boxing. */ /* The subhead is a supporting line on a phone, not a second paragraph. */ .pcm-v1 .pcm-i-hero__sub .c-body { font-size: 0.85rem; line-height: 1.45; } /* The hero's own rhythm tightens where every pixel is contested. The rest of the page keeps the full cadence. The band's top padding and the proof row's margin are tightened at their CLAMP FLOORS instead of here — both have base rules further down this file that would otherwise win on source order, and a clamp floor only ever bites on a phone anyway. */ .pcm-v1 .pcm-i-hero { row-gap: 0.7rem; } } /* The spec strip leaves the card on phones. At 320 it wraps to FOUR lines of 10.6px type — under the 13px floor the mobile audit flags, so it was not being read, it was only being paid for (62px with its rule). Every item on it is stated in full in the value stack. It returns at 480px, where it sits on one line and the card has the room. NOTE: the tracker records owner sign-off on the hero card carrying the full breakdown — this narrows that on phones only, and is the one place here where an approved element is conditioned rather than merely re-costed. */ @media (max-width: 479px) { .pcm-v1 .pcm-i-hero__card .pcm-i-spec { display: none; } } /* 320's own reclaims live in the existing `max-width: 359px` block at the foot of this file — there is already one, and a second competing block would be decided by source order rather than by intent. */ /* ── Proof precedes claim. CENTRED at every width (owner, 2026-08-10): it used to left-align above a centred headline on desktop and read as a stray fragment rather than the page's opening credential. ─────────── */ .pcm-v1 .pcm-i-proof { display: flex; align-items: center; justify-content: center; gap: 0.65rem; /* floor lowered 0.9 → 0.55rem: 2.4vw only exceeds it from ~600px up, so the floor IS the phone value, and the phone is where the hero budget is tight */ margin-bottom: clamp(0.55rem, 2.4vw, 1.15rem); } .pcm-v1 .pcm-i-proof__faces { display: flex; flex: none; } .pcm-v1 .pcm-i-proof__faces .c-avatar { width: 32px; height: 32px; } .pcm-v1 .pcm-i-proof__faces .c-avatar + .c-avatar { margin-left: -0.55rem; } .pcm-v1 .pcm-i-proof__line { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: center; } /* Below ~560 the rating text wraps under the stars, which left the avatars floating against a two-line block off to one side. Stack the cluster instead so it stays a centred unit. */ @media (max-width: 559px) { .pcm-v1 .pcm-i-proof { flex-direction: column; gap: 0.45rem; } } .pcm-v1 .pcm-i-proof__txt { font-family: var(--dl-font-body); font-size: 0.78rem; line-height: 1.3; color: var(--c-ink-mute); } .pcm-v1 .pcm-i-stars { color: var(--c-gold); font-size: 0.85rem; letter-spacing: 0.14em; } /* one voucher pinned under the hero — F's move, E's chrome */ .pcm-v1 .pcm-i-vouch { grid-area: vouch; display: flex; align-items: center; gap: 0.9rem; max-width: 40rem; margin: 0 auto; padding-top: clamp(1.1rem, 2.6vw, 1.5rem); border-top: 1px solid var(--c-line-soft); text-align: left; } @media (min-width: 1024px) { .pcm-v1 .pcm-i-vouch { margin-inline: 0; align-self: start; } } .pcm-v1 .pcm-i-vouch img { width: 44px; height: 44px; flex: none; } .pcm-v1 .pcm-i-vouch p { font-size: 0.86rem; line-height: 1.5; color: var(--c-ink-body); font-style: italic; margin: 0; } .pcm-v1 .pcm-i-vouch b { display: block; font-style: normal; color: var(--c-gold); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; margin-top: 0.3rem; } /* v13 — the results disclaimer under the hero testimonial (on for everyone). Not --c-ink-mute: that measures ~4.5:1 on the void, right at the floor; 0.58 white is ~6.9:1 while still reading quieter than the quote. */ .pcm-v1 .pcm-i-vouch__disc { display: block; margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.45; font-style: normal; color: rgba(255, 255, 255, 0.58); } /* v13 — copy-store `close_subheadline`, under the final "Secure Your Seat". Absent unless a set publishes one. --c-ink-body on #000 ≈ 9:1. */ .pcm-v1 .pcm-i-close__sub { max-width: 34rem; margin: 0.15rem 0 0; font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.5; color: var(--c-ink-body); } /* "(Save $70)" is its OWN LINE under the price in the doc, not a chip on the price baseline. Parens are his. Gold ink, not a gold fill — which also puts the page back inside the gold law (the chip had been fill #2 of 2, and the .c-cta pill is the one that earns it). */ .pcm-v1 .pcm-i-save { margin: 0.3rem 0 0; font-family: var(--dl-font-display); font-weight: 700; font-size: clamp(0.9rem, 2.3vw, 1.02rem); letter-spacing: 0.01em; color: var(--c-gold); } /* F's inclusion checklist, inside E's card */ /* ══ THE OFFER BLOCK — the doc's CTA, and only the doc's CTA: lead headline → $97/$27/(Save $70) → button → guarantee. ═════════════ */ /* ── THE OFFER BLOCK IS A RUNG ON THE PAGE ────────────────────────── Owner, 2026-08-10: the in-body asks blended into whatever band they sat on, so they neither popped nor separated anything. They are now a defined block — one consistent object that appears seven times down the page and reads as the beat between sections. Kept deliberately quiet so seven of them never shout: a gold hairline at 28%, a barely-lifted surface, and ONE soft gold bloom rising behind the button. The gold law still holds — the only solid gold fill on the page is the .c-cta pill inside it. The gold cap centred on the top edge is the same device the unit bars use (a short gold rule breaking the border), so the offer reads as part of the page's own vocabulary rather than a pasted-in widget. */ .pcm-v1 .pcm-i-offer { position: relative; isolation: isolate; max-width: 44rem; margin: clamp(2.75rem, 6vw, 4.25rem) auto 0; padding: clamp(1.9rem, 4vw, 2.6rem) clamp(1.25rem, 3.5vw, 2.25rem); text-align: center; border-radius: 20px; border: 1px solid rgba(208, 170, 68, 0.28); background: radial-gradient(125% 100% at 50% 100%, rgba(208, 170, 68, 0.08) 0%, rgba(208, 170, 68, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)); box-shadow: 0 26px 64px -36px rgba(208, 170, 68, 0.35); } /* the gold cap — a short rule breaking the top border, echoing the unit bars */ .pcm-v1 .pcm-i-offer::before { content: ''; position: absolute; top: -1px; left: 50%; translate: -50% 0; width: clamp(64px, 18vw, 92px); height: 2px; background: linear-gradient(90deg, rgba(208, 170, 68, 0), var(--c-gold), rgba(208, 170, 68, 0)); } /* In the light room the same block flips with the band's tokens. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-offer { border-color: rgba(22, 13, 24, 0.14); background: radial-gradient(125% 100% at 50% 100%, rgba(176, 130, 31, 0.07) 0%, rgba(176, 130, 31, 0) 62%), #fff; box-shadow: 0 1px 2px rgba(22, 13, 24, 0.04), 0 20px 44px -28px rgba(22, 13, 24, 0.3); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-offer::before { background: linear-gradient(90deg, rgba(176, 130, 31, 0), #b0821f, rgba(176, 130, 31, 0)); } .pcm-v1 .pcm-i-offer__lead { font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1.05rem, 2.7vw, 1.3rem); line-height: 1.24; letter-spacing: -0.02em; color: var(--c-ink); margin-bottom: 0.7rem; } /* badge + the guarantee line, under the button */ .pcm-v1 .pcm-i-offer__guar { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.9rem 0 0; text-align: left; font-size: 0.8rem; line-height: 1.35; font-weight: 600; color: var(--c-gold); } .pcm-v1 .pcm-i-offer__guar img { width: 42px; height: auto; flex: none; } /* ── The price breakdown: one baseline row, $97 struck → $27 Today → chip. The doc sets the two prices at comparable weight — the struck $97 is part of the argument, not a footnote. It was 1.15rem against a 2.5rem $27; it now lands between the two (owner, 2026-08-10). ─────────────────────────── */ .pcm-v1 .pcm-i-pricewrap { margin-top: 0.55rem; } .pcm-v1 .pcm-i-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 0.5rem; margin: 0; } /* "Only" opens his price line — it is his word, not a label we added. */ .pcm-v1 .pcm-i-price__only { font-family: var(--dl-font-display); font-weight: 600; font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--c-ink-mute); } .pcm-v1 .pcm-i-price__anchor { font-family: var(--dl-font-display); font-weight: 700; font-size: clamp(1.4rem, 3.6vw, 1.85rem); line-height: 1; color: var(--c-ink-mute); text-decoration: line-through; text-decoration-color: var(--c-ink-mute); font-variant-numeric: tabular-nums; } .pcm-v1 .pcm-i-price__now { font-family: var(--dl-font-display); font-weight: 800; font-size: clamp(2rem, 5.2vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-gold); font-variant-numeric: tabular-nums; } .pcm-v1 .pcm-i-price__today { font-family: var(--dl-font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink-mute); } /* ══ HERO BUY CARD — restored (owner, 2026-08-10). The full breakdown was right in the hero; only the in-body asks needed stripping to the doc's four lines. `--tight` still sheds the checklist below the desktop split so the button clears the mobile fold. ═══════════════════════════════ */ .pcm-v1 .pcm-i-buycard { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; border-radius: 22px; padding: clamp(1.1rem, 2.6vw, 1.6rem); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)); border: 1px solid rgba(208, 170, 68, 0.42); box-shadow: 0 30px 80px -34px rgba(208, 170, 68, 0.28); text-align: center; } @media (min-width: 1024px) { .pcm-v1 .pcm-i-hero__card .pcm-i-buycard { max-width: none; margin-inline: 0; } } .pcm-v1 .pcm-i-buycard__lead { font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--c-ink); margin-bottom: 0.75rem; } .pcm-v1 .pcm-i-spec { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; font-family: var(--dl-font-display); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink-mute); } .pcm-v1 .pcm-i-spec__item + .pcm-i-spec__item::before { content: '·'; margin-right: 0.5rem; color: var(--c-ink-faint); } /* The spec line must stay ONE line inside the hero card or it eats the fold — five items wrapped to three rows and cost 39px. The threshold is the CARD's width, not the viewport's: at 820 the viewport is wide but the hero card is still ~350px, so the hero card holds the short list until its own two-column layout arrives at 1024. Mid-page asks are full-width and take all five. */ .pcm-v1 .pcm-i-spec__item--wide { display: none; } @media (min-width: 640px) { .pcm-v1 .pcm-i-spec__item--wide { display: inline; } } @media (max-width: 1023px) { .pcm-v1 .pcm-i-hero__card .pcm-i-spec__item--wide { display: none; } } .pcm-v1 .pcm-i-buycard .pcm-i-spec { padding-bottom: 0.8rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-incl { list-style: none; margin: 1rem 0 0; padding: 0.95rem 0 0; border-top: 1px solid var(--c-line-soft); text-align: left; display: grid; gap: 0.5rem; } .pcm-v1 .pcm-i-incl li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; font-size: 0.86rem; line-height: 1.4; color: var(--c-ink-body); } .pcm-v1 .pcm-i-incl b { font-weight: 500; color: var(--c-ink); } .pcm-v1 .pcm-i-incl i { font-style: normal; font-family: var(--dl-font-display); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink-mute); white-space: nowrap; } .pcm-v1 .pcm-i-tick { color: var(--c-gold); font-weight: 800; font-size: 0.78rem; } /* The hero panel sheds its checklist AND its lead line below the desktop split — together they cost ~85px, which is the difference between the button clearing the Safari fold and not. Measured, not assumed: the same mistake cost variant_e 70px on its first attempt. Neither is lost content — the headline sits directly above the card, and the value stack states every inclusion in full further down. */ @media (max-width: 1023px) { .pcm-v1 .pcm-i-buycard--tight .pcm-i-incl, .pcm-v1 .pcm-i-buycard--tight .pcm-i-buycard__lead { display: none; } } /* The arrow. The copy ships a bare "→", which renders as whatever glyph the system font has and reads thin and stubby next to 800-weight display type. A stroked icon at the label's own size sits on the cap-height properly and scales with it. The character is stripped from the label at render time — the words are untouched. */ .pcm-v1 .pcm-i-cta__arrow { width: 1.05em; height: 1.05em; flex: none; transform: translateY(0.02em); } .pcm-v1 .pcm-i-cta__sub { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.78; } .pcm-v1 .pcm-i-assure { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 0.9rem; text-align: left; } .pcm-v1 .pcm-i-assure img { width: 46px; height: auto; flex: none; } .pcm-v1 .pcm-i-assure__txt { font-size: 0.74rem; line-height: 1.35; color: var(--c-ink-mute); } .pcm-v1 .pcm-i-assure__tag { font-style: italic; color: #e26d6d; } .pcm-v1 .pcm-i-next { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.7rem; font-family: var(--dl-font-display); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; /* --c-ink-faint measured 2.61:1 — too thin for the line that tells a buyer what happens after the click. */ color: var(--c-ink-mute); } .pcm-v1 .pcm-i-next svg { width: 12px; height: 12px; } /* the button — one line in the body asks; the hero adds a sub-label */ .pcm-v1 .pcm-i-cta { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 0.9rem 1.4rem; line-height: 1.15; text-transform: none; margin-top: 1rem; } /* A button carrying a sub-label has to STACK — label on top, sub beneath. Left as a row it prints "YES, SAVE MY SEAT →PICK YOUR CLASS TIME AT CHECKOUT" across one line, with the arrow pointing sideways at the sub. THIS USED TO BE SCOPED TO `.pcm-i-buycard`, i.e. the hero only — which was correct while the hero was the only button with a sub-label. The moment the sub-label went onto all eight (owner, 2026-08-12) the other seven fell back to the row and printed exactly that. Stacking now belongs to the BUTTON, not to the panel it happens to sit in. */ .pcm-v1 .pcm-i-cta { flex-direction: column; gap: 0.14rem; } .pcm-v1 .pcm-i-buycard .pcm-i-cta { min-height: 62px; padding: 0.85rem 1.4rem; } .pcm-v1 .pcm-i-cta__main { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--dl-font-display); font-weight: 800; font-size: clamp(0.98rem, 2.6vw, 1.08rem); letter-spacing: 0.03em; text-transform: uppercase; } /* ══ THE FEATURED-IN BAR — full-bleed, edge to edge, continuously running. Not a card and not a grid: a strip that crosses the whole viewport and never stops, hairlined top and bottom so it reads as a structural band between the hero and the argument. ═════════════════════════════════ */ /* No bottom hairline and no arrow beneath it: the bar runs straight into the section below with nothing between them (owner, 2026-08-10). The paired `--flush` modifier on the next band drops its top border to match. */ .pcm-v1 .pcm-i-marqbar { position: relative; z-index: 2; padding-block: clamp(1.15rem, 2.6vw, 1.6rem); background: rgba(255, 255, 255, 0.035); border-top: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-marqbar .c-featured-label { margin-bottom: clamp(0.85rem, 2vw, 1.1rem); } /* Invert + desaturate the press marks onto the dark strip, matching .c-logo, and hold them to one optical height so Forbes doesn't tower over Inc. HEIGHT MUST BE AN EXPLICIT LENGTH, never `auto` + max-height: 's imgs carry no width/height attributes, so `auto` gave them no intrinsic box, they collapsed to 0x0, and — being loading="lazy" — never entered the viewport, so they never loaded at all. The bar rendered completely empty. */ .pcm-v1 .pcm-i-marqbar .dl-marquee__logo { filter: grayscale(1) invert(1) brightness(1.1); opacity: 0.72; height: clamp(20px, 2.4vw, 27px); width: auto; } /* ══ REASONS ═════════════════════════════════════════════════════════ Owner, 2026-08-10: the numerals sat too close to the copy and were too dark to read. Both were true — they were absolutely positioned (so nothing guaranteed a gap) and set at 22% gold, which measured 1.44:1. Now a real two-column grid, so the numeral can never collide with the text at any width, and 72% gold — 5.1:1, legible, still clearly secondary to the white heading beside it. */ .pcm-v1 .pcm-i-reason { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 1.6rem); align-items: start; padding-block: clamp(1.4rem, 3vw, 1.75rem); border-top: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-reason:first-child { border-top: none; padding-top: 0.25rem; } /* The numeral runs ABOVE the copy on a phone, exactly as the secret medallion does and for the same measured reason: a 30px numeral plus a 16px gutter took a 320px screen's text column to 203px — twenty characters a line, four words. Beside-the-copy resumes as soon as there is room for it. */ @media (max-width: 559px) { .pcm-v1 .pcm-i-reason { grid-template-columns: minmax(0, 1fr); row-gap: 0.2rem; } .pcm-v1 .pcm-i-reason__num { font-size: 1.6rem; } } .pcm-v1 .pcm-i-reason__num { font-family: var(--dl-font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; color: rgba(208, 170, 68, 0.72); font-variant-numeric: tabular-nums; /* optically align the numeral's cap-height with the heading's */ margin-top: -0.12em; } .pcm-v1 .pcm-i-beat { font-family: var(--dl-font-display); font-weight: 600; font-size: clamp(1.08rem, 2.5vw, 1.22rem); line-height: 1.4; color: var(--c-gold); border-left: 2px solid var(--c-gold-soft); padding-left: 0.9rem; margin-block: 0.9rem; } /* ══ WORTH — question ladder + the dashed callout ════════════════════ */ .pcm-v1 .pcm-i-q { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.75rem; padding-block: 0.9rem; border-top: 1px solid var(--c-line-soft); font-size: clamp(1rem, 2.3vw, 1.1rem); line-height: 1.5; color: var(--c-ink); } .pcm-v1 .pcm-i-q:first-child { border-top: none; } .pcm-v1 .pcm-i-q__glyph { font-family: var(--dl-font-display); font-weight: 800; color: var(--c-gold); } .pcm-v1 .pcm-i-q__echo { display: block; margin-top: 0.3rem; color: var(--c-ink-mute); font-size: 0.94em; } .pcm-v1 .pcm-i-callout { max-width: 54rem; margin: 1.75rem auto 0; padding: clamp(1.35rem, 3.2vw, 1.9rem); text-align: center; border-radius: 16px; border: 1px dashed var(--c-gold-soft); background: rgba(208, 170, 68, 0.05); } .pcm-v1 .pcm-i-callout__line { font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.28rem); line-height: 1.4; color: var(--c-ink); } /* ══ COMPARISON — F's flanking composition: the two states either side of the product that moves you between them. E's check marks. ═════════ */ /* Wider than the other sections and weighted toward the middle: at 64rem with an even split the product sat at ~300px between two cramped columns, which undersold the one object the whole comparison is about. */ .pcm-v1 .pcm-i-vs { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; max-width: 1120px; margin-inline: auto; } /* TWO columns now, not three. The approved artwork (2026-08-12) replaces the product render that used to sit between them, so the two states meet across a hairline instead of around a third object. `align-items: start` — with the old `center` the shorter column floated and the two state labels sat on different baselines. */ .pcm-v1 .pcm-i-vs { align-items: start; } @media (min-width: 768px) { .pcm-v1 .pcm-i-vs { grid-template-columns: 1fr 1px 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); } /* the divider is drawn on the FIRST column's trailing edge via a grid track rather than a border, so it spans the taller of the two columns exactly */ .pcm-v1 .pcm-i-vs::before { content: ''; grid-column: 2; grid-row: 1; align-self: stretch; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--c-line-soft) 12%, var(--c-line-soft) 88%, rgba(255,255,255,0) 100%); } .pcm-v1 .pcm-i-vs > [data-testid='comparison-without'] { grid-column: 1; grid-row: 1; } .pcm-v1 .pcm-i-vs > [data-testid='comparison-with'] { grid-column: 3; grid-row: 1; } } .pcm-v1 .pcm-i-vscol { display: flex; flex-direction: column; } /* THE FIGURES. Supplied at 450×470 and 460×470 — different widths, same height — so they are normalised on HEIGHT, not width, or the two state labels below them would sit 10px out of line. Transparent PNGs on purpose: the section carries the act bloom behind it and a flat black plate would show a seam. */ .pcm-v1 .pcm-i-vsfig { display: block; height: clamp(9.5rem, 26vw, 15rem); width: auto; max-width: 100%; margin: 0 auto clamp(0.9rem, 2.2vw, 1.35rem); object-fit: contain; } .pcm-v1 .pcm-i-colhead { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.85rem; margin-bottom: 1rem; border-bottom: 1px solid var(--c-line-soft); text-align: center; } .pcm-v1 .pcm-i-checks { display: grid; row-gap: 0.8rem; margin: 0; padding: 0; list-style: none; } .pcm-v1 .pcm-i-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 0.7rem; align-items: start; font-size: 0.96rem; line-height: 1.55; color: var(--c-ink-body); } .pcm-v1 .pcm-i-check__mark { width: 20px; height: 20px; margin-top: 0.12rem; border-radius: 9999px; display: grid; place-items: center; background: rgba(208, 170, 68, 0.14); color: var(--c-gold); font-size: 0.7rem; font-weight: 800; } .pcm-v1 .pcm-i-check--no .pcm-i-check__mark { background: rgba(226, 109, 109, 0.14); color: #e26d6d; } .pcm-v1 .pcm-i-check--no { color: var(--c-ink-mute); } /* ══ TOTAL VALUE — sits directly above the price breakdown inside the closing offer block, which is where the doc puts it. ════════════════ */ .pcm-v1 .pcm-i-total { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-total__l { font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.2rem); letter-spacing: -0.01em; color: var(--c-ink); } .pcm-v1 .pcm-i-total__v { font-family: var(--dl-font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1; color: var(--c-gold); font-variant-numeric: tabular-nums; } /* ══ GUARANTEE — the band contains it; no card chrome ════════════════ */ .pcm-v1 .pcm-i-guar { display: grid; gap: 1.75rem; justify-items: center; text-align: center; max-width: 62rem; margin-inline: auto; } @media (min-width: 768px) { .pcm-v1 .pcm-i-guar { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; column-gap: 2.5rem; } } .pcm-v1 .pcm-i-guar__badge { width: 150px; height: auto; flex: none; } @media (min-width: 768px) { .pcm-v1 .pcm-i-guar__badge { width: 190px; } } .pcm-v1 .pcm-i-guar__tag { font-weight: 600; font-style: italic; color: #e26d6d; } /* ══ PROOF ROOM (bone) ═══════════════════════════════════════════════ */ .pcm-v1 .pcm-i-quotegrid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .pcm-v1 .pcm-i-quotegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .pcm-v1 .pcm-i-quotegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pcm-v1 .pcm-i-quote { display: flex; flex-direction: column; padding: clamp(1.2rem, 2.6vw, 1.5rem); } .pcm-v1 .pcm-i-quote__hd { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; } .pcm-v1 .pcm-i-quote__who { display: block; font-family: var(--dl-font-heading); font-weight: 700; font-size: 0.86rem; color: var(--c-ink); line-height: 1.2; } .pcm-v1 .pcm-i-subhead { font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(1.02rem, 2.4vw, 1.18rem); letter-spacing: -0.02em; line-height: 1.3; color: var(--c-ink); text-align: center; margin-bottom: 1.1rem; } .pcm-v1 .pcm-i-trustrow { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 44rem; margin-inline: auto; } .pcm-v1 .pcm-i-trusttile { flex: 1 1 260px; display: flex; align-items: center; justify-content: center; padding: 1.4rem 1.6rem; border-radius: 14px; background: #fff; border: 1px solid rgba(22, 13, 24, 0.1); box-shadow: 0 1px 2px rgba(22, 13, 24, 0.04), 0 14px 30px -18px rgba(22, 13, 24, 0.22); } .pcm-v1 .pcm-i-trusttile img { width: 100%; height: auto; max-width: 300px; } /* ══ FAQ — collapsible rows (owner, 2026-08-10). Nine open answers ran ~1,700px and pushed the close off the end of the page; as dropdowns the whole section is nine lines.
/, so zero JS. ═══════ */ .pcm-v1 .pcm-i-faq { max-width: 54rem; margin-inline: auto; } .pcm-v1 .pcm-i-faqitem { border-top: 1px solid var(--c-line-soft); } .pcm-v1 .pcm-i-faqitem:first-child { border-top: none; } .pcm-v1 .pcm-i-faqq { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) 1.25rem; column-gap: 0.7rem; align-items: baseline; list-style: none; cursor: pointer; padding-block: clamp(0.95rem, 2.4vw, 1.2rem); min-height: 46px; font-family: var(--dl-font-heading); font-weight: 700; font-size: clamp(0.98rem, 2.3vw, 1.08rem); line-height: 1.35; color: var(--c-ink); } .pcm-v1 .pcm-i-faqq::-webkit-details-marker { display: none; } .pcm-v1 .pcm-i-faqq__g { font-family: var(--dl-font-display); font-weight: 800; color: var(--c-gold); } .pcm-v1 .pcm-i-faqq__x { justify-self: end; color: var(--c-gold); font-family: var(--dl-font-display); font-weight: 800; font-size: 1.15rem; line-height: 1; transition: transform 160ms var(--c-ease-out, ease-out); } .pcm-v1 .pcm-i-faqitem[open] .pcm-i-faqq__x { transform: rotate(45deg); } .pcm-v1 .pcm-i-faqa { padding: 0 1.95rem clamp(1rem, 2.6vw, 1.3rem) 2.05rem; } .pcm-v1 .pcm-i-faqa p + p { margin-top: 0.7rem; } @media (prefers-reduced-motion: reduce) { .pcm-v1 .pcm-i-faqq__x { transition: none; } } /* ══ SMALL PHONES (≤359px) ═══════════════════════════════════════════ iPhone SE and the small-Android tail are still a real slice of cold FB mobile. At 320 every elastic line in the hero broke to an extra row — proof +16, headline +52, spec +19, price +31, CTA sub +18 — and the buy button landed at 644 against a ~568 viewport. Nothing here is a new design; it is the same hero one step down so the transaction still clears the first screen. Measured at 320x568, not assumed. */ @media (max-width: 359px) { .pcm-v1 .pcm-i-band--hero { padding-top: 0.6rem; } /* margin 0.7 → 0.45 and h1 1.42 → 1.32rem: 320 is now also carrying the subhead above the button, which the doc's order requires and the old mobile order avoided. Measured 562 against a 568 budget. */ .pcm-v1 .pcm-i-proof { gap: 0.5rem; margin-bottom: 0.45rem; } .pcm-v1 .pcm-i-proof__faces .c-avatar { width: 26px; height: 26px; } .pcm-v1 .pcm-i-proof__txt { font-size: 0.68rem; } .pcm-v1 .pcm-i-stars { font-size: 0.74rem; letter-spacing: 0.1em; } /* The pre-headline keeps the shared pill at 320 too (owner, 2026-09-03) — get-power-code does, and these two pages should not disagree about the same element. The old note here warned that "re-adding padding put the border back at 320 only"; that inconsistency existed because the ≤1023 block was stripping it everywhere else. With that strip gone the pill is now uniform at every width, so there is nothing left to special-case. The font-size override is dropped with it: it forced 0.78rem (12.48px), under the shared clamp's own 0.9rem floor, so 320 rendered SMALLER type than 360 for no stated reason. It now floors at 14.4px like every other phone width — and like get-power-code. Only the tighter bottom margin is kept, which is spacing rather than the box. */ .pcm-v1 .pcm-i .c-preheadline { margin-bottom: 0.5rem; } .pcm-v1 .pcm-i-hero__lede .c-h1 { font-size: 1.32rem; line-height: 1.1; } .pcm-v1 .pcm-i-hero__card .pcm-i-buycard { padding: 0.9rem; } .pcm-v1 .pcm-i-offer { padding: 1.25rem 1rem; } .pcm-v1 .pcm-i-offer__lead { font-size: 1rem; } .pcm-v1 .pcm-i-price__now { font-size: 1.85rem; } .pcm-v1 .pcm-i-price__anchor { font-size: 1.35rem; } .pcm-v1 .pcm-i-price { gap: 0.3rem 0.5rem; } .pcm-v1 .pcm-i-save { padding: 0.2rem 0.55rem; font-size: 0.62rem; } .pcm-v1 .pcm-i-cta { min-height: 54px; padding: 0.7rem 0.9rem; } .pcm-v1 .pcm-i-cta__main { font-size: 0.96rem; letter-spacing: 0.02em; } } /* ══ Utility ═════════════════════════════════════════════════════════ */ .pcm-v1 .pcm-i-mt { margin-top: clamp(1.75rem, 4vw, 2.5rem); } .pcm-v1 .pcm-i-mt-s { margin-top: clamp(1rem, 2.6vw, 1.5rem); } .pcm-v1 .pcm-i-mt-l { margin-top: clamp(2.25rem, 5vw, 3.25rem); } /* ══ variant_i ADDITIONS — Keala's 2026-08-29 call ══════════════════════ Everything above this line is variant_g's stylesheet, rescoped `.pcm-i`. Everything below is new to variant_i and exists nowhere else. ══ */ /* THE NO-UPSELL LINE — under the buy-card CTA. Deliberately QUIET. It is reassurance, not another claim competing with the button it sits under; the gold law also allows exactly two solid-gold objects page-wide and both are already spent (the CTA pill and the save chip). Sits above the guarantee badge so the reading order is price → button → "no upsells" → guarantee. */ /* THE NO-UPSELL REASSURANCE. Owner, 2026-08-29: "right now it's so subtle." It was 0.78rem at 72% white — which reads as a disclaimer, and a disclaimer is the one thing this must not be. It exists to REMOVE a hesitation at the button, so it has to be seen before it is read. Two moves: body-copy size at near-full opacity, and the price clause in the brand gold so the eye catches "$27 is the whole price" without parsing the sentence. All three placements (hero card, value-stack close, final close) sit on dark bands — wine, deep, and the hero — so a light treatment is safe at every one of them. Verified before choosing the colour, because a light line on the `lit` guarantee band would have been invisible. */ .pcm-v1 .pcm-i-noupsell { margin-top: 0.7rem; text-align: center; font-size: 0.9rem; line-height: 1.5; /* TOKEN, never a literal. A hardcoded rgba(255,255,255,.9) here shipped white text on the bone band's white card — invisible — because this line moved from three placements to all eight and `cta_testimonials` lives in the one light room on the page. The token flips with the band (see .pcm-i-band--bone), so a future band cannot reintroduce the bug. */ color: var(--c-ink); text-wrap: balance; } .pcm-v1 .pcm-i-noupsell b { color: var(--c-gold, #d0aa44); font-weight: 700; } /* Bone escape. The light room flips the ink tokens but NOT gold, and this band's own rule is that gold there is "a FILL or a SYMBOL, never text and never a rule". Following it literally: the accent carries on WEIGHT alone in the light room, not colour. The deeper #b0821f the stars use was tried first and measured 3.47:1 on bone — under AA for 14.4px text, and stars are a symbol, which is exactly the distinction the band's rule is drawing. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-noupsell b { color: var(--c-ink); } /* THE VALUE-STACK HEADER IMAGE — the existing product-suite comp, which had been rendering nowhere since the VSL took the hero slot it was gated on. Below the fold and lazy, so it is outside the LCP path. The aspect-ratio is pinned to the intrinsic 1000×494 so the lazy load cannot shift the section (CLS budget is 0.05). */ .pcm-v1 .pcm-i-vshero { display: flex; justify-content: center; } .pcm-v1 .pcm-i-vshero img { width: 100%; max-width: 40rem; height: auto; aspect-ratio: 1000 / 494; border-radius: var(--i-radius); } /* PER-DELIVERABLE MOCKUPS inside a Unit card. No image is authored yet (the artwork is in production; item 1 is blocked on Sam's whiteboard stills), so this rule matches nothing today — the slot is wired, not filled. */ .pcm-v1 .pcm-i-unit__shot { display: block; width: 100%; height: auto; margin-bottom: 0.9rem; border-radius: calc(var(--i-radius) - 8px); background: var(--i-bar-face); } /* ════════════════════════════════════════════════════════════════════════ KEALA'S 2026-08-31 LOOM — ROUND 2 ════════════════════════════════════════════════════════════════════════ */ /* ══ RED / GREEN — the two new accents ═══════════════════════════════ KEALA, 03:11–03:45 + 16:46: "this image blends. This image is intended to stand out… it doesn't pop… all this outline should be in red — folks doing it on their own — and then this should be a green. Red bad stop, green good go." And at 17:05, "and this here too" — the ✓ checkmarks in the empowered list, which were the same gold as the rest of the page. Same-gold IS the blending mechanism he was pointing at. ⚠️ THE EXACT GREEN IS STILL HIS CALL — this is the measured recommendation, not a decision, and it is ONE TOKEN so switching it is one line. Contrast on the deep band (#050109), which is the darkest ground either colour lands on: #39ff88 (neon) 15.60:1 ← 66% more luminous than the buy button #00e676 12.40:1 #22c55e 9.08:1 ← chosen. The gold CTA pill is 9.38:1. #16a34a 6.28:1 ← measured muddy against the wine band 9.08 sits the green a hair UNDER the CTA rather than over it, which is what keeps the page's stated law intact (styles.css:190 / the header of this file): gold is the single warm light source and the button is the brightest object on the page. A neon green would have made the comparison figure the brightest thing on a $27 checkout page. */ .pcm-v1 .pcm-i { --i-vs-red: #ff4d4d; /* 6.33:1 on deep */ --i-vs-green: #22c55e; /* 9.08:1 on deep */ } /* Bone escape — the light room, added BEFORE anything can drift into it. Neither dark-room accent survives paper: #22c55e on #f4f1ea is 2.20:1 and #ff4d4d is 2.83:1, both illegible. Same shape as the band's existing --c-em-red flip at line 110, and the bone red is literally that value. Measured on #f4f1ea: #166534 = 6.32:1, #b3261e = 6.29:1. */ .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone { --i-vs-red: #b3261e; --i-vs-green: #166534; } /* ══ THE TWO FIGURES, RECOLOURED IN CSS ══════════════════════════════ The artwork is NOT re-exported: both PNGs are consumed by _sections/ SectionsG.tsx as well, and variant_g carries 100% of live paid traffic. WHY A MASK IS AN EXACT RECOLOUR HERE, and not an approximation. Both files were pixel-probed: every fully-opaque pixel in each is ONE colour (figure-scattered #c9c4d2, figure-empowered #e0bc63 — a single distinct RGB at a=255, zero luminance spread), and across all 239 alpha levels the RGB is a pure function of alpha, worst-case spread 1/255. The artwork's entire information content IS the alpha channel. So `mask` + `background` keeps 100% of the structure. It is also slightly CLEANER than the it replaces: the PNGs bake a grey /olive plate into their low-alpha pixels, so today's render carries a halo of up to 24/255 at the antialiased edges. Masking drops it. ⚠️ `filter: hue-rotate()` was the obvious idea and it is the wrong tool twice over: figure-scattered is desaturated (mean HSV S = 0.064), so a hue rotation on it is a literal no-op; figure-empowered IS saturated gold (S = 0.558) but hue-rotate preserves saturation and luma and drags the plate halo with it, so it cannot land on a chosen hex. ⚠️ THE BOX HAS TO BE RE-DECLARED. The old rule leaned on `width: auto` + `object-fit: contain`, which only produce a box on a REPLACED element. On a `width:auto` collapses to zero. The two figures are 450×470 and 460×470 — DIFFERENT widths at the same height, deliberately (see the comment at .pcm-i-vsfig) — so they get their own aspect-ratio each, or the two state labels below them sit ~10px out of line. */ .pcm-v1 .pcm-i-vsfig--no, .pcm-v1 .pcm-i-vsfig--yes { display: block; height: clamp(9.5rem, 26vw, 15rem); max-width: 100%; margin: 0 auto clamp(0.9rem, 2.2vw, 1.35rem); /* .pcm-i-vscol is a COLUMN FLEX container, so a block child with `width:auto` stretches to the column and `aspect-ratio` never gets to size it. The old was immune (a replaced element sizes from its intrinsic 450×470). `align-self: center` opts out of the stretch so the ratio below is what resolves the width — stated outright rather than left to the auto-margin rule that happens to do the same thing. */ align-self: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .pcm-v1 .pcm-i-vsfig--no { aspect-ratio: 450 / 470; background: var(--i-vs-red); -webkit-mask-image: url('/funnels/power-code-masterclass/images/figure-scattered.png'); mask-image: url('/funnels/power-code-masterclass/images/figure-scattered.png'); } .pcm-v1 .pcm-i-vsfig--yes { aspect-ratio: 460 / 470; background: var(--i-vs-green); -webkit-mask-image: url('/funnels/power-code-masterclass/images/figure-empowered.png'); mask-image: url('/funnels/power-code-masterclass/images/figure-empowered.png'); } /* The two state labels. "SCATTERED & DISTRACTED" was already red, but as an inline style={{ color: '#e26d6d' }} on the element — a hardcoded hex that could not follow the band into the light room. It is a class now, on the same token as its figure. "INSPIRED & EMPOWERED" was .c-gold-ink; it keeps that treatment's bloom, retuned to the new accent. ⚠️ THE EXTRA `.pcm-i` IS LOAD-BEARING, not tidiness. `.c-label` in the shared styles.css sets `color: var(--c-ink-mute)` at (0,2,0); a bare `.pcm-v1 .pcm-i-vsstate--yes` ties it and would be decided by which stylesheet the browser happened to put first — and this sheet is a injected next to Next's route CSS, so that order is not ours to guarantee. Every cross-file override in this file WINS ON SPECIFICITY for the same reason (see the bone escapes at 213-232). */ .pcm-v1 .pcm-i .pcm-i-vsstate--no { color: var(--i-vs-red); } .pcm-v1 .pcm-i .pcm-i-vsstate--yes { color: var(--i-vs-green); text-shadow: 0 0 28px rgba(34, 197, 94, 0.28); } .pcm-v1 .pcm-i:not([data-sep='stage']) .pcm-i-band--bone .pcm-i-vsstate--yes { text-shadow: none; } /* ══ THE CHECK MARKS ═════════════════════════════════════════════════ Keala, 17:05: "and this here too" — the ✓ marks, gold until now. The ✗ side was already red but on the literal #e26d6d rather than the accent, so both sides now ride the same two tokens and the light room re-tints both at once. Only the two MODIFIERS move. The bare .pcm-i-check__mark stays gold so a future list that wants the page's default accent still gets it. */ .pcm-v1 .pcm-i-check--yes .pcm-i-check__mark { background: color-mix(in srgb, var(--i-vs-green) 16%, transparent); color: var(--i-vs-green); } .pcm-v1 .pcm-i-check--no .pcm-i-check__mark { background: color-mix(in srgb, var(--i-vs-red) 16%, transparent); color: var(--i-vs-red); } /* ══ WORTH — the "?" ladder becomes a bullet ladder ═══════════════════ KEALA, 04:14 + 13:35: "not a big fan of these questions… this question mark thing here, because it looks like a FAQ… I would just put a bullet — there's a good little green bullet up here." The bullet he is pointing at is the comparison column's check mark, so the markup IS that component; only its optical alignment differs, because it now sits against a 1.5rem grid track sized for a display-face glyph rather than a 20px disc. .pcm-i-q's first line box is font-size clamp(1rem,2.3vw,1.1rem) at line-height 1.5 — 24 to 26.4px — so a 20px disc centres on it at ~0.2rem rather than the 0.12rem the comparison rows use against 0.96rem/1.55. */ .pcm-v1 .pcm-i-q__mark { margin-top: 0.22rem; background: color-mix(in srgb, var(--i-vs-green) 16%, transparent); color: var(--i-vs-green); } /* ══ THE THREE HERO BENEFITS ═════════════════════════════════════════ KEALA, 01:35–03:45: "here's the offer, here's the benefits of the offer, and then it gets into how it works… I would probably include like three elements here of the benefits." No new list component — this is .pcm-i-checks, the same one the comparison columns use, so the green bullet above the fold and the green bullet in the argument are the same object. All this rule does is place and measure it. shrink-to-fit + auto margins rather than text-align, because the hero lede is centred and a full-width left-aligned list under a centred card reads as a layout escape. fit-content keeps the BLOCK centred while the LINES stay left, which is what makes three ragged benefit lines scan as a list. */ .pcm-v1 .pcm-i-herobens { grid-area: bens; width: fit-content; max-width: 100%; margin-inline: auto; row-gap: 0.6rem; } .pcm-v1 .pcm-i-herobens .pcm-i-check { font-size: 0.95rem; line-height: 1.45; color: var(--c-ink); } @media (min-width: 1024px) { /* Desktop puts it in the left column under the video, so it tracks the media rather than floating between two columns. */ .pcm-v1 .pcm-i-herobens { margin-inline: 0; } } @media (max-width: 359px) { .pcm-v1 .pcm-i-herobens .pcm-i-check { font-size: 0.88rem; } .pcm-v1 .pcm-i-herobens { row-gap: 0.5rem; } } /* ══ THE VERTICAL (CONCEPT) HERO VIDEO ═══════════════════════════════ KEALA, 16:21: "I still think that we should test here soon getting rid of this video and just putting the concept video here." The concept videos are shot 9:16; the hero box is hard-coded 16:9 at .pcm-i-hero__media--video [id^='vidalytics_embed_'] above, which also zeroes the embed's inline padding-top with !important. So the config's `paddingTop` cannot reach the layout — by design, owner 2026-08-12: "all this sizing and formatting and dynamicness, all that should be on our side." The SHAPE therefore arrives as a class the renderer derives from that same paddingTop, and the box is ours. ⚠️ THE WIDTH CAP IS THE WHOLE POINT. Uncapped, .pcm-i-hero__media--video is full column: 342.8px inner at a 400px viewport, so a 9:16 player is 609px tall — 417px MORE than the 16:9 it replaces, on a hero whose measured phone budget was already 591 of 660 with the CTA at ~800. Desktop is worse: a ~652px media column would make it ~1159px tall. get-power-code solved exactly this and its numbers are reused verbatim — clamp(15rem,74vw,21.5rem) mobile (gpc styles.css:303) and 23rem desktop (gpc styles.css:370) — which lands ~523px on a phone and ~654px at 1440. Double-class selectors so this beats the --video rules regardless of source order; both classes are always present together. ⏸ 523px is still tall, and whether that trade is worth it is Keala's call — which is why this ships wired but INERT on the default URL: it renders only under ?concept=6 / ?concept=17. */ /* --tall (was --vertical) applies ONLY the width clamp, never the aspect — the aspect now comes from --pcm-i-vid-ar above and is exact per video. Renamed because "vertical" was a boolean the moment 4:5 arrived: 125% is vertical too, but it does NOT need clamping. 4:5 at the full 344px column is 430px tall, which the hero can carry; 9:16 at the same width is 611px, which it cannot. So the clamp is gated on genuinely tall (>150%), and get-power- code's own numbers are reused (styles.css:303 / :370) rather than invented. */ /* ══ VIDEO SIZE: CAP THE HEIGHT, LET THE RATIO DERIVE THE WIDTH ══════ This replaces the two hand-tuned per-shape width caps that used to live here (--portrait 26rem, --tall 23rem, chosen by thresholds on paddingTop). WHY THE OLD SHAPE WAS WRONG, not just verbose: · The constraint we actually care about is HEIGHT — "do not let the video tower over the buy card". Capping WIDTH to control height is indirect, so every new aspect ratio needed a fresh number and a threshold to pick it. Measured on live: 9:16 rendered 368x653 against a 528px card — 125px taller than the card while wasting 424px of its own column. · A fixed rem width does not respond to the viewport at all. 9:16 measured 653px tall at 1024, 1280, 1440 AND 1728 — identical at every width. · The bucket boundary (>150% = tall, >100% = portrait) is a guess that a future ratio has to be re-litigated against. Capping height instead makes the whole thing fall out of the ratio we already compute, so ANY future shape needs zero CSS: 16:9 -> height 446 at 793 wide (max-width:100% binds first; unchanged) 4:5 -> 34rem tall -> 435 wide 9:16 -> 34rem tall -> 306 wide and the video is height-matched to the card instead of overshooting it. ⚠️ NO NEGATION SELECTOR, and that is not stylistic. The previous attempt gated on `:not(--tall)`, which silently also matched the LANDSCAPE base VSL — what 100% of non-image traffic sees — and capped it to 416px inside a 652px column. That shipped and stood for two days. This rule is unguarded on purpose: it applies to every shape, and `max-width: 100%` means landscape simply never reaches its height cap, so landscape is untouched by construction rather than by a selector that has to remember to exclude it. The --portrait / --tall classes are still emitted. Nothing sizes off them any more; they are kept as QA hooks so scripts/qa-variant-i.mjs can assert which shape it is looking at. */ .pcm-v1 .pcm-i-hero__media--video .c-hero-video { max-height: var(--pcm-i-vid-maxh, 32rem); max-width: 100%; /* `width: auto` is what lets the height cap drive the width through the aspect-ratio. The --video rule above sets `width: 100%`; this overrides it only where a cap is in play, and max-width:100% keeps it inside the column. */ width: auto; /* Centred. A capped video in an uncapped column leaves slack somewhere; splitting it reads as framing, and it keeps the guarantee badge — which centres on this same container — directly under the video instead of stranded in an empty half. `--video` sets `margin: 0`, so say it here. */ margin-inline: auto; } /* The height budget, by breakpoint. Phones get the most generous cap because a vertical video on a vertical screen SHOULD be tall — 32rem reproduces the old `clamp(15rem, 74vw, 21.5rem)` result exactly at 390px (288x512), so mobile is unchanged. Desktop's 34rem (544px) is chosen to sit just above the buy card's measured height (528px at 1728), so the two read as one row. */ .pcm-v1 .pcm-i-hero { --pcm-i-vid-maxh: 32rem; } /* Tablet gets the TALLEST budget, and the non-monotonic step is deliberate. Between 640 and 1023 the hero is still stacked — the video has the full column and no card beside it — so height is free and a 9:16 should use it. 38rem lands a 9:16 at 342px wide, which is what the old `clamp(15rem, 74vw, 21.5rem)` produced at its 344px ceiling, so tablet keeps today's rendering. */ @media (min-width: 640px) { .pcm-v1 .pcm-i-hero { --pcm-i-vid-maxh: 38rem; } } /* At 1024 the row splits and the video sits BESIDE the buy card, so the budget drops back to just above the card's measured height. This is the number that stops a 9:16 standing 125px taller than the thing it is meant to sell. */ @media (min-width: 1024px) { .pcm-v1 .pcm-i-hero { --pcm-i-vid-maxh: 34rem; } } /* The aspect itself is applied to the PLAYER box (see the [id^='vidalytics_embed_'] rule above, which also zeroes Vidalytics' inline padding-top). The wrapper needs it too, or `width:auto` has no ratio to resolve against and collapses to zero. */ .pcm-v1 .pcm-i-hero__media--video .c-hero-video { aspect-ratio: var(--pcm-i-vid-ar, 1.7778); } /* ══ HERO TRUST-BAR COUNT ════════════════════════════════════════════ KEALA, 2026-08-31 (00:00): "it says trusted by over 3,000 entrepreneurs. Ours should say 10,000." An ADDITION beside the Trustpilot line, which he explicitly kept ("we can keep that part"). It reads as a caption, not a headline: the hero already carries the H1, the pre-headline and the rating, and a fourth loud element in the same 120px would compete with all three. Same muted ink and letter-spacing as the rating line so the cluster still reads as ONE credential block rather than two stacked claims. Below 560px .pcm-i-proof turns into a column, so this simply becomes a third centred row — no layout branch needed. Measured cost at 400px: one 15px line. */ .pcm-v1 .pcm-i-proof__count { font-family: var(--dl-font-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.2; color: var(--c-ink-mute); white-space: nowrap; } @media (max-width: 359px) { .pcm-v1 .pcm-i-proof__count { font-size: 0.66rem; } } /* ══ ABOUT YOUR HOST (Keala, 2026-10-14) ═══════════════════════════════ On the page only where the copy store's section_order lists "host". A dark band like its neighbours (its tone is re-derived by position). Photo over text on a phone; photo beside text from 768px. The image is sized by its width/height attributes, so the lazy load cannot shift the page (CLS). */ .pcm-v1 .pcm-i-host { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; } @media (min-width: 768px) { .pcm-v1 .pcm-i-host { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } .pcm-v1 .pcm-i-host__photo { display: block; width: 100%; max-width: 22rem; height: auto; margin-inline: auto; border-radius: 1rem; box-shadow: 0 0 0 1px rgba(208, 170, 68, 0.28), 0 18px 48px rgba(0, 0, 0, 0.45); } .pcm-v1 .pcm-i-host__text > p + p { margin-top: 0.9rem; } .pcm-v1 .pcm-i-host__creds { display: grid; gap: 0.55rem; margin: 1.15rem 0 0; padding: 0; list-style: none; } .pcm-v1 .pcm-i-host__creds li { position: relative; padding-left: 1.5rem; } .pcm-v1 .pcm-i-host__creds li::before { content: '✦'; content: '✦' / ''; /* decorative: not read aloud (browsers without alt text keep the line above) */ position: absolute; left: 0; top: 0; color: var(--c-gold); }