/* Public Clone Voice page: editorial, proof-led marketing surface. */ .screen-clone-landing { /* overflow-x: hidden removed - it was redundant with (and broke sticky because it differs from) the site-wide overflow-x: clip tokens.css already sets on / for exactly this horizontal-bleed guard. The two keywords look interchangeable but are not: CSS couples the overflow-x/overflow-y axes whenever one is set to a non-'visible' value - the other is forced off 'visible' too (to 'auto'), even under an explicit !important (verified in-browser). 'clip' is exempt from that coupling (it never creates a scroll container to couple), so the base rule was always safe; 'hidden' is not, so overflow-y here computed 'auto', which makes the scrolling ancestor for its sticky descendants - but itself never actually scrolls (/window does), so from .nav-dock's own reference frame nothing ever moved, and it scrolled away with the page instead of sticking. Measured at 375/1430/2190px: dropping this rule introduces zero horizontal overflow at any of them (the base 'clip' rule is still doing the real work) - this line was never protecting anything the base rule wasn't already covering. */ background: var(--canvas); } .screen-clone-landing .clone-public-hero { position: relative; min-height: min(720px, 82dvh); padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); border-bottom: var(--border-width) solid var(--line); background: radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--signal-bg) 38%, transparent), transparent 30%), radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--teal-bg) 24%, transparent), transparent 28%), var(--canvas); } .clone-public-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr); gap: clamp(var(--space-8), 9vw, var(--space-20)); align-items: center; } .clone-public-hero-copy { max-width: 650px; } /* Same recipe as .screen-landing .proof-kicker (screens.css) - this hero eyebrow is a plain .eyebrow, whose base rule (tokens.css) renders it in the muted UI-label color rather than brand green. */ .clone-public-hero-copy .eyebrow { color: var(--signal-text); } .clone-public-hero-copy h1 { /* Down from clamp(3.25rem, 7vw, 6.7rem) at max-width: 10ch, which put this headline on five lines and made the hero 890px tall, taller than the viewport it is meant to fit inside. */ max-width: 14ch; margin: 0 0 var(--space-5); font-size: var(--fluid-3xl); letter-spacing: var(--tracking-display); line-height: .9; text-wrap: balance; } .clone-public-lede { max-width: 48ch; margin: 0; color: var(--tx-muted); font-size: clamp(var(--text-md), 1.8vw, var(--text-lg)); line-height: var(--leading-body); } .clone-public-hero-note { max-width: 54ch; margin: var(--space-5) 0 0; color: var(--tx-faint); font-size: var(--text-xs); line-height: var(--leading-prose); } .clone-public-hero .hero-ctas { margin-top: var(--space-7); } .clone-public-hero .hero-ctas .btn:last-child { display: inline-flex; gap: var(--space-2); } /* The tilt and the offset shadow are kept: they were doing real work as a frame, and a frame around a photograph is more honest than a frame around invented product chrome. The padding drops so the image reads as a print in a frame rather than a screenshot in a card. */ .clone-public-hero-stage { position: relative; margin: 0; padding: var(--space-3); border: var(--border-width) solid var(--line-control); border-radius: var(--radius-card); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 88%, var(--signal-bg)), var(--surface-sunken)); box-shadow: 18px 18px 0 color-mix(in srgb, var(--signal-bg) 18%, transparent); transform: rotate(1.2deg); } .clone-public-hero-stage::before { position: absolute; top: 0; right: 12%; left: 12%; height: 2px; background: var(--signal); content: ""; } /* height: auto matters here: the width/height attributes on the tag are presentational hints, and leaving height specified makes aspect-ratio inert. Same fix as .pricing-hero-shot and .use-case-shot. */ .clone-hero-shot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 50%; border-radius: calc(var(--radius-card) - 4px); } .clone-public-hero-stage figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-2) var(--space-1); } .clone-public-hero-stage figcaption strong { color: var(--tx); font-size: var(--text-lg); letter-spacing: var(--tracking-heading); } .clone-public-hero-stage figcaption span { color: var(--tx-muted); font-size: var(--text-sm); } .clone-public-proof { border-bottom: var(--border-width) solid var(--line); background: var(--surface-sunken); } .clone-public-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .clone-proof-cell { display: grid; gap: var(--space-2); min-height: 142px; padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-8)); border-left: var(--border-width) solid var(--line); } .clone-proof-cell:first-child { border-left: 0; } .clone-proof-cell--accent { background: color-mix(in srgb, var(--signal-bg) 24%, transparent); } .clone-proof-cell span { color: var(--signal-text); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } .clone-proof-cell strong { color: var(--tx); font-size: var(--fluid-md); letter-spacing: var(--tracking-display); } .clone-proof-cell small { color: var(--tx-muted); font-size: var(--text-xs); } /* Base rhythm for every section on this page. The literal clamp here was a copy of the landing page's old uniform gap, kept in sync by hand; it reads the shared token now. The closing CTA below takes the major gap, which is what makes it the one section with air around it. */ .clone-public-section { padding: var(--section-gap) 0; border-bottom: var(--border-width) solid var(--line); } .clone-public-section-head { max-width: 720px; margin-bottom: clamp(var(--space-8), 8vw, var(--space-12)); } /* font-weight overrides tokens.css's var(--weight-medium) "panel title" recipe, which .clone-public-section h2 is on the exception list for (it also reaches the FAQ heading below) - every h2 on this page, FAQ included, is meant to read as the landing page's own 300-weight display type, not UI chrome. The 1.02 line-height from that same landing recipe is layered on separately per section below, since the FAQ heading keeps the smaller UI-weight recipe's default 1.08 instead. */ .clone-public-section h2 { max-width: 15ch; text-wrap: balance; font-size: var(--fluid-xl); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); } #clone-options h2 { line-height: 1.02; } /* Same recipe as .screen-landing .proof-kicker (screens.css) - this page carries its own screen class instead of screen-landing, so that rule's scope never reaches here and this kicker rendered unstyled. */ .screen-clone-landing .proof-kicker { margin: 0 0 var(--space-3); color: var(--signal-text); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } .clone-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .clone-option { display: flex; flex-direction: column; min-height: 470px; padding: clamp(var(--space-6), 5vw, var(--space-10)); border: var(--border-width) solid var(--line-control); background: var(--surface-raised); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .clone-option:hover { border-color: var(--signal); background: color-mix(in srgb, var(--signal-bg) 12%, var(--surface-raised)); transform: translateY(-3px); } .clone-option--studio { margin-top: var(--space-10); background: var(--surface-sunken); } .clone-option-mark { margin: 0 0 var(--space-2); color: var(--signal-text); font-size: var(--text-xs); font-weight: var(--weight-medium); } .clone-option h3 { margin: auto 0 var(--space-4); font-size: var(--fluid-2xl); letter-spacing: var(--tracking-display); line-height: .95; } .clone-option > p { max-width: 43ch; margin: 0; color: var(--tx-muted); line-height: var(--leading-prose); } .clone-option dl { display: grid; gap: var(--space-3); margin: var(--space-8) 0; } .clone-option dl > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--line); } .clone-option dt { color: var(--tx-muted); font-size: var(--text-xs); } .clone-option dd { margin: 0; color: var(--tx); font-family: var(--font-mono); font-size: var(--text-2xs); text-align: right; } .clone-option .text-link { margin-top: auto; } .clone-public-workflow { background: var(--surface-sunken); } .clone-workflow-intro { display: grid; grid-template-columns: 1fr minmax(240px, .55fr); gap: var(--space-10); align-items: end; margin-bottom: clamp(var(--space-8), 8vw, var(--space-12)); } .clone-workflow-intro .section-head { margin: 0; } #clone-workflow h2 { line-height: 1.02; } .clone-workflow-aside { max-width: 30ch; margin: 0; padding-top: var(--space-4); border-top: 2px solid var(--signal); color: var(--tx-muted); font-size: var(--text-sm); line-height: var(--leading-prose); } .clone-workflow-aside strong { display: block; margin-bottom: var(--space-2); color: var(--tx); font-size: var(--text-md); } .clone-workflow-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--line-control); border-bottom: var(--border-width) solid var(--line-control); } .clone-workflow-list li { min-height: 245px; padding: var(--space-5) var(--space-4); border-left: var(--border-width) solid var(--line-control); } .clone-workflow-list li:first-child { border-left: 0; } .clone-workflow-list span { color: var(--signal-text); font-family: var(--font-mono); font-size: var(--text-2xs); } .clone-workflow-list strong { display: block; margin-top: var(--space-12); color: var(--tx); font-size: var(--text-md); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); } .clone-workflow-list p { margin: var(--space-3) 0 0; color: var(--tx-muted); font-size: var(--text-xs); line-height: var(--leading-prose); } .clone-recording-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr); gap: clamp(var(--space-8), 10vw, var(--space-20)); align-items: center; } .clone-recording-copy h2 { max-width: 12ch; line-height: 1.02; } .clone-recording-copy .section-sub { max-width: 42ch; } .clone-recording-card { padding: clamp(var(--space-5), 4vw, var(--space-8)); border: var(--border-width) solid var(--line-control); background: var(--surface-raised); } .clone-recording-card h3 { margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--line); font-size: var(--text-md); } .clone-recording-card ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .clone-recording-card li { display: flex; gap: var(--space-3); color: var(--tx-muted); font-size: var(--text-sm); line-height: var(--leading-prose); } .clone-recording-card li span { flex: none; color: var(--teal-text); font-family: var(--font-mono); } .clone-public-use-cases { background: var(--surface-sunken); } .clone-public-use-cases h2 { line-height: 1.02; } .clone-use-case-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: var(--space-3); } .clone-use-case { display: flex; flex-direction: column; min-height: 220px; padding: clamp(var(--space-5), 4vw, var(--space-7)); border: var(--border-width) solid var(--line); background: var(--surface-raised); } .clone-use-case--feature { grid-row: span 2; min-height: 465px; border-color: var(--signal); background: color-mix(in srgb, var(--signal-bg) 20%, var(--surface-raised)); } .clone-use-case:nth-child(4) { grid-column: 2 / -1; } .clone-use-case h3 { max-width: 15ch; margin: auto 0 var(--space-3); font-size: var(--fluid-lg); letter-spacing: var(--tracking-display); line-height: 1; } .clone-use-case p { max-width: 38ch; margin: 0; color: var(--tx-muted); font-size: var(--text-sm); line-height: var(--leading-prose); } .clone-use-case .text-link { margin-top: var(--space-8); } .clone-public-trust { background: color-mix(in srgb, var(--teal-bg) 18%, var(--canvas)); } .clone-trust-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr); gap: clamp(var(--space-8), 10vw, var(--space-20)); } .clone-trust-lead h2 { max-width: 10ch; line-height: 1.02; } .clone-trust-list { border-top: var(--border-width) solid var(--line-control); } .clone-trust-list > div { display: grid; gap: var(--space-2); padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--line-control); } .clone-trust-list strong { color: var(--tx); font-size: var(--text-md); } .clone-trust-list span { max-width: 52ch; color: var(--tx-muted); font-size: var(--text-sm); line-height: var(--leading-prose); } .clone-public-faq { background: var(--canvas); } .clone-public-cta { padding: var(--section-gap-major) 0; background: var(--surface-band); } .clone-public-cta-inner { display: flex; justify-content: space-between; gap: var(--space-8); align-items: end; padding: clamp(var(--space-6), 6vw, var(--space-10)); border: var(--border-width) solid var(--signal); background: color-mix(in srgb, var(--signal-bg) 25%, var(--surface-raised)); } .clone-public-cta h2 { max-width: 12ch; margin: var(--space-3) 0 0; font-size: var(--fluid-3xl); letter-spacing: var(--tracking-display); line-height: .92; } .clone-public-cta .btn { flex: none; } .screen-clone-landing :is(a, button):focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; } @media (max-width: 960px) { .clone-public-hero-grid, .clone-recording-grid, .clone-trust-grid { grid-template-columns: 1fr; } .clone-public-hero-stage { max-width: 720px; margin-left: auto; } .clone-workflow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .clone-workflow-list li:nth-child(4) { border-left: 0; border-top: var(--border-width) solid var(--line-control); } .clone-workflow-list li:nth-child(5) { border-top: var(--border-width) solid var(--line-control); } .clone-use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clone-use-case--feature { grid-row: auto; min-height: 300px; } .clone-use-case:nth-child(4) { grid-column: auto; } } @media (max-width: 640px) { .clone-public-hero { min-height: auto; padding-top: 4rem; } .clone-public-hero-copy h1 { max-width: 11ch; font-size: clamp(2.4rem, 11vw, 3.4rem); } .clone-public-hero .hero-ctas { align-items: stretch; flex-direction: column; } .clone-public-hero .hero-ctas .btn { justify-content: center; } .clone-public-hero-stage { padding: var(--space-2); transform: none; } .clone-hero-shot { aspect-ratio: 16 / 9; } .clone-proof-cell { min-height: 0; border-left: 0; border-top: var(--border-width) solid var(--line); } .clone-proof-cell:first-child { border-top: 0; } .clone-option-grid, .clone-use-case-grid { grid-template-columns: 1fr; } .clone-option, .clone-option--studio { min-height: 0; margin-top: 0; } .clone-option h3 { margin-top: var(--space-12); } .clone-workflow-intro { grid-template-columns: 1fr; gap: var(--space-6); } .clone-workflow-list { grid-template-columns: 1fr; } .clone-workflow-list li, .clone-workflow-list li:nth-child(4), .clone-workflow-list li:nth-child(5) { min-height: 0; padding: var(--space-5) 0; border-top: var(--border-width) solid var(--line-control); border-left: 0; } .clone-workflow-list li:first-child { border-top: 0; } .clone-workflow-list strong { margin-top: var(--space-5); } .clone-recording-grid { gap: var(--space-8); } .clone-use-case--feature { min-height: 300px; } .clone-trust-grid { gap: var(--space-8); } .clone-public-cta-inner { align-items: flex-start; flex-direction: column; } .clone-public-cta .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .clone-public-hero-stage { transform: none; } .clone-option { transition: none; } }