/* ten — Creator Studio landing page
* Visual contract: os/memory/library/apps/creator-studio/DESIGN.md
* Aesthetic: "quiet money" — calm, precise, substantial. Anti-hype.
* Grotesque display + serif body + mono labels. Alternating ink/paper bands.
*/
:root {
--ink: #0B0C0E; /* cool charcoal ground */
--paper: #F4F2ED; /* warm off-white band */
--fg: #ECEEF1; /* text on ink */
--fg-ink: #16181C; /* text on paper */
--mute: #8A9099; /* cool gray, on ink */
--mute-ink: #5B616B; /* cool gray, on paper */
--accent: #2E7D5B; /* deep, calm money-green — used sparingly */
--accent-soft: #3E9E73;
--rule: #1E2126; /* hairline on ink */
--rule-ink: #DEDAD0; /* hairline on paper */
--font-display: 'Inter Tight', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
--font-body: 'Newsreader', Charter, Georgia, 'Times New Roman', serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
--col: 660px;
--wide: 1080px;
--pad-x: 32px;
--measure: 62ch; /* comfortable reading measure for body prose (not statement lines) */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--ink);
color: var(--fg);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ---- bands: alternating ink / paper chapters ---- */
.band { width: 100%; padding: 104px var(--pad-x); }
.band--ink { background: var(--ink); color: var(--fg); }
.band--paper { background: var(--paper); color: var(--fg-ink); }
.band--accent-edge { border-top: 1px solid var(--accent); }
@media (max-width: 720px) { .band { padding: 64px var(--pad-x); } }
/* Body-text variant: lighter on paper for supporting prose (was hardcoded var(--mute) which is ink-mode). */
.band--paper .lede-soft { color: var(--mute-ink); }
.band--ink .lede-soft { color: var(--mute); }
.col { max-width: var(--col); margin: 0 auto; }
/* Component-bearing sections (grids, tables, cards) breathe wider than prose.
Prose INSIDE them still caps at --measure / its own max-width, so the page
gets a width rhythm: narrow prose, wider structure. Keeps the editorial calm
while killing the "thin ribbon in a void" feel on desktop. */
.col--mid { max-width: 880px; margin: 0 auto; }
.wide { max-width: var(--wide); margin: 0 auto; }
@media (max-width: 920px) { .col--mid { max-width: var(--col); } }
/* ---- shared type ---- */
.eyebrow {
font-family: var(--font-mono);
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute);
margin: 0 0 28px;
}
.band--paper .eyebrow { color: var(--mute-ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 640; letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 28px; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p, li {
font-family: var(--font-body);
font-size: 1.22rem;
line-height: 1.62;
margin: 0 0 1.1rem;
}
@media (max-width: 720px) { p, li { font-size: 1.12rem; } }
.lede { font-size: 1.5rem; line-height: 1.45; color: var(--fg); }
.band--paper .lede { color: var(--fg-ink); }
@media (max-width: 720px) { .lede { font-size: 1.28rem; } }
em { font-style: italic; }
.hl { color: var(--accent); font-style: normal; }
.band--ink .hl { color: var(--accent-soft); }
/* ---- hero ----
* min-height uses small-viewport units (svh) on mobile to avoid the jump when
* Safari's toolbar collapses. Older browsers fall back to vh. On desktop we
* keep 92vh because the toolbar behavior doesn't apply there.
*/
/* Hero sits lower in the first screen (anchored, not floating dead-center) so the
top void above the H1 is gone. Content lands at a natural reading height with
comfortable breathing room below before the fold. */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: max(128px, env(safe-area-inset-top, 0px) + 96px); padding-bottom: clamp(72px, 12vh, 140px); }
.hero .col { max-width: 920px; }
.hero h1 { max-width: 22ch; }
/* Hidden break helper: on wider screens the span forces a line break (acting
* like the original
). On narrow screens (< 540px) it collapses to a
* normal space, letting the H1 wrap naturally rather than awkwardly breaking
* "We build the recurring revenue." mid-sentence. */
.h1-break { display: block; width: 0; height: 0; overflow: hidden; font-size: 0; }
@media (max-width: 540px) { .h1-break { display: inline; width: auto; height: auto; font-size: inherit; } }
.hero .lede { margin-top: 24px; max-width: 46ch; color: var(--mute); }
.hero .lede strong { color: var(--fg); font-weight: 400; }
.hero .cta-row { margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* ---- home page: Kajabi-energy display type (Space Grotesk stands in for Haffer) ---- */
.home { --font-display: 'Space Grotesk', 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif; }
/* Space Grotesk reads a touch lighter + wider than Inter Tight, so the home H1/H2
want a heavier weight and tighter tracking to land with the same authority. */
.home h1, .home h2, .home h3 { font-weight: 700; letter-spacing: -0.03em; }
/* ---- split hero: copy left, cycling phone right (Kajabi-energy, our type system) ----
* Lives on a paper band so the page opens bright. The phone is a real device frame
* holding a cross-fading stack of demo screenshots we built for creators.
* Sized to fit within one viewport: the grid is vertically centered in 100svh. */
.hero--split {
min-height: 100vh; min-height: 100svh;
display: flex; flex-direction: column; justify-content: center;
padding-top: max(112px, env(safe-area-inset-top, 0px) + 88px);
padding-bottom: clamp(48px, 7vh, 88px);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(40px, 6vw, 88px);
align-items: center;
width: 100%;
}
@media (max-width: 920px) {
.hero--split { min-height: auto; justify-content: flex-start; padding-top: max(108px, env(safe-area-inset-top, 0px) + 84px); padding-bottom: 56px; }
.hero-grid { grid-template-columns: 1fr; gap: 40px; max-width: 620px; }
}
.hero-copy { max-width: 100%; }
/* H1 is capped here (not by the global clamp) so it fits ~4 lines, not 6. */
.hero--split h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; max-width: 14ch; }
.hero--split .lede { margin-top: 22px; max-width: 40ch; color: var(--mute-ink); font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.hero--split .lede strong { color: var(--fg-ink); font-weight: 700; }
.hero--split .cta-row { margin-top: 32px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* secondary CTA on a paper band */
.hero--split .cta-secondary { color: var(--mute-ink); border-bottom-color: var(--rule-ink); }
.hero--split .cta-secondary:hover { color: var(--fg-ink); border-bottom-color: var(--accent); }
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-visual-caption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); margin: 0; text-align: center; }
/* Fanned trio: a front phone in focus with two phones slanted out behind it,
* left and right (three screens of the SAME app). The trio is sized off the front
* phone; the side phones are positioned relative to it and tilted outward. The
* wrapper reserves room for their spread so nothing clips. */
.phone-trio {
position: relative;
width: min(clamp(210px, 24vw, 278px), calc((100svh - 320px) * (780 / 1688)));
aspect-ratio: 780 / 1688;
margin: clamp(34px, 5vh, 64px) clamp(78px, 11vw, 150px) clamp(10px, 2vh, 28px);
}
@media (max-width: 920px) {
.phone-trio { width: clamp(210px, 50vw, 270px); margin: clamp(40px, 9vw, 70px) clamp(72px, 18vw, 130px) 12px; }
}
/* Phone frame: a quiet matte-black device. */
.phone {
position: absolute; inset: 0;
aspect-ratio: 780 / 1688;
background: #0B0C0E;
border-radius: 40px;
padding: 11px;
box-shadow: 0 2px 2px rgba(22,24,28,0.04), 0 26px 56px -26px rgba(22,24,28,0.42), inset 0 0 0 2px rgba(255,255,255,0.05);
}
/* Side phones: pushed out + up, tilted away from center, smaller + softened so
* they read as depth. transform-origin bottom-center pivots them off the base. */
.phone--side { z-index: 0; filter: saturate(0.9) brightness(0.96); }
.phone--side::after {
content: ""; position: absolute; inset: 0; border-radius: 40px;
background: linear-gradient(180deg, rgba(244,242,237,0.12), rgba(244,242,237,0.22));
pointer-events: none;
}
.phone--left { transform-origin: bottom right; transform: translate(calc(-1 * clamp(58px, 8vw, 116px)), calc(-1 * clamp(14px, 2vh, 30px))) rotate(-9deg) scale(0.84); }
.phone--right { transform-origin: bottom left; transform: translate(clamp(58px, 8vw, 116px), calc(-1 * clamp(14px, 2vh, 30px))) rotate(9deg) scale(0.84); }
.phone--front { z-index: 1; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #0B0C0E; }
/* Two stacked layers per screen. Both are absolutely positioned and cover the
* screen; only the .is-on layer is opaque. A swap fades the incoming layer in and
* the outgoing one out at the same time → a true cross-dissolve, no pop, no jump. */
.phone-screen .layer {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
opacity: 0;
transition: opacity 900ms var(--ease);
will-change: opacity;
}
.phone-screen .layer.is-on { opacity: 1; }
/* The first sentence is held in its own block so the rotor's width changes only
* ripple within line 1 — "Give them the tool…" (lines 2–3) stays stationary. */
.lede-rotline { display: block; }
/* Rolling rotor: a single-line slot whose width animates to fit the current word
* (JS measures each phrase). Inherits the lede's font; only color + roll differ.
* The clip box is tall enough (with vertical padding) that descenders — g, y, p —
* are never cut, and the inner word is nudged up so it still sits on the baseline. */
.rotor {
display: inline-block;
position: relative;
vertical-align: bottom;
overflow: hidden;
height: 1.5em; /* roomy enough to clear descenders top + bottom */
line-height: inherit;
white-space: nowrap;
transition: width 420ms var(--ease); /* slot eases to fit the new word — no gap */
}
.rotor .rotor-word {
display: inline-block;
color: var(--accent);
transform: translateY(0);
transition: transform 420ms var(--ease), opacity 320ms var(--ease);
}
/* Roll out: word lifts a full slot-height up and fades. New word is dropped below
* (by JS) and rolls back to 0. Uses the slot height so the glyph fully clears. */
.rotor.is-rolling .rotor-word { transform: translateY(-1.1em); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.phone-screen .layer, .rotor .rotor-word { transition: none; }
}
/* ---- the gap / agitate ---- */
.stat-line {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
letter-spacing: -0.02em;
line-height: 1.18;
max-width: 20ch;
}
.stat-line + .stat-line { margin-top: 1.1rem; }
/* ---- proof cards (click to expand) ---- */
.cards { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.card { background: #FFFDF8; border: 1px solid var(--rule-ink); border-radius: 8px; overflow: hidden; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.card[open] { border-color: var(--accent); box-shadow: 0 1px 0 var(--rule-ink), 0 12px 30px -18px rgba(46,125,91,0.25); }
/* On paper bands, the cream card needs a slightly darker rule + a hint of shadow so it doesn't melt into the paper. */
.band--paper .card { background: #FFFFFF; border-color: #C9C4B7; box-shadow: 0 1px 0 rgba(22,24,28,0.04); }
.band--paper .card[open] { border-color: var(--accent); box-shadow: 0 1px 0 #C9C4B7, 0 12px 30px -18px rgba(46,125,91,0.30); }
.card summary {
list-style: none;
cursor: pointer;
padding: 26px 28px;
display: grid;
grid-template-columns: minmax(160px, 200px) 1fr auto;
align-items: center;
gap: 24px;
}
.card summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
.card summary { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px; }
}
.card-num {
font-family: var(--font-display);
font-weight: 680;
font-size: clamp(2rem, 4.4vw, 2.8rem);
letter-spacing: -0.03em;
color: var(--accent);
line-height: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.card-unit { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); font-weight: 300; }
.card-headline {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.05rem, 2vw, 1.25rem);
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--fg-ink);
}
.card-more { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); white-space: nowrap; transition: color 140ms var(--ease); }
.card summary:hover .card-more { color: var(--accent); }
.card[open] .card-more { color: var(--accent); }
.card[open] .card-more::before { content: "Close · "; }
.card[open] .card-more span { display: none; }
.card-body { padding: 0 28px 30px; border-top: 1px solid var(--rule-ink); }
.card-body p { font-size: 1.08rem; line-height: 1.6; color: var(--fg-ink); margin: 18px 0 0; }
.card-body .card-who { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); margin: 22px 0 0; }
.card-body .card-quote { font-style: italic; color: var(--mute-ink); border-left: 2px solid var(--accent); padding-left: 16px; margin-top: 18px; }
@media (max-width: 720px) { .card-body { padding: 0 22px 24px; } }
/* ---- how it works: 3 OR 5 steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 16px; }
.steps-5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 980px) { .steps-5 { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 720px) { .steps, .steps-5 { grid-template-columns: 1fr; gap: 32px; } }
.step .step-n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent-soft); margin: 0 0 12px; }
.step h3 { margin: 0 0 10px; font-size: 1.18rem; }
.step p { font-size: 1rem; line-height: 1.55; color: var(--mute); margin: 0; }
.band--paper .step p { color: var(--mute-ink); }
/* ---- deal stage table ----
* Defaults are paper-correct (this table lives on a paper band). Ink overrides
* below keep it readable if it's ever placed on an ink band. */
.deal-table { border: 1px solid var(--rule-ink); border-radius: 8px; padding: 28px 30px; }
.deal-table-head, .deal-row {
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
}
.deal-table-head {
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--mute-ink); padding-bottom: 18px; border-bottom: 1px solid var(--rule-ink);
}
.deal-row { padding: 22px 0; border-bottom: 1px solid var(--rule-ink); font-family: var(--font-body); font-size: 1.08rem; color: var(--fg-ink); }
.deal-row:last-of-type { border-bottom: none; }
.deal-row-sub { display: block; font-family: var(--font-body); font-style: italic; font-size: 0.88rem; color: var(--mute-ink); margin-top: 3px; font-weight: 400; }
.deal-row .hl {
font-family: var(--font-display); font-weight: 680; font-size: 1.4rem;
letter-spacing: -0.02em; color: var(--accent); white-space: nowrap;
}
.deal-note { font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: var(--mute-ink); margin: 18px 0 0; line-height: 1.55; }
/* Ink-band overrides (table on a dark background) */
.band--ink .deal-table { border-color: var(--rule); }
.band--ink .deal-table-head { color: var(--mute); border-bottom-color: var(--rule); }
.band--ink .deal-row { color: var(--fg); border-bottom-color: var(--rule); }
.band--ink .deal-row-sub { color: var(--mute); }
.band--ink .deal-row .hl { color: var(--accent-soft); }
.band--ink .deal-note { color: var(--mute); }
@media (max-width: 720px) {
.deal-table { padding: 22px 22px; }
.deal-row { grid-template-columns: 1fr; gap: 8px; }
.deal-row .hl { font-size: 1.5rem; }
}
/* ---- founder bios ---- */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 32px 0 8px; }
@media (max-width: 720px) { .founders { grid-template-columns: 1fr; gap: 24px; } }
.founder { padding: 26px 28px; border: 1px solid var(--rule-ink); border-radius: 8px; background: #FFFDF8; }
/* Headshot: a real photo when team/.jpg exists; otherwise the initials
avatar underneath shows through (the img is removed on error). Both share the
same circular footprint so the layout is identical either way. */
.founder-head { position: relative; width: 64px; height: 64px; margin: 0 0 18px; }
.founder-avatar {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(46,125,91,0.12);
color: var(--accent);
font-family: var(--font-display); font-weight: 680; font-size: 1.3rem; letter-spacing: -0.01em;
}
.founder-photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
border-radius: 50%; object-fit: cover;
border: 1px solid var(--rule-ink);
}
.founder-name { font-family: var(--font-display); font-weight: 640; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--fg-ink); margin: 0 0 4px; }
.founder-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.founder-bio { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--fg-ink); margin: 0; }
.founder-link {
display: inline-block;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mute-ink);
text-decoration: none;
border-bottom: 1px solid var(--rule-ink);
padding: 8px 0;
transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease);
}
.founder-link:hover, .founder-link:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ---- form: checkbox row (multi-platform) ---- */
.field-hint { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; color: var(--mute); text-transform: none; margin-left: 8px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; font-size: 0.98rem; color: var(--fg); user-select: none; transition: border-color 140ms var(--ease), background 140ms var(--ease); }
.check:hover { border-color: var(--mute); }
.check input { accent-color: var(--accent-soft); margin: 0; cursor: pointer; }
.check:has(input:checked) { border-color: var(--accent-soft); background: rgba(46,125,91,0.10); }
/* ---- you vs us split (signature) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-ink); border-radius: 4px; overflow: hidden; margin-top: 8px; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split-col { padding: 40px 36px; }
.split-col + .split-col { border-left: 1px solid var(--rule-ink); }
@media (max-width: 720px) { .split-col + .split-col { border-left: none; border-top: 1px solid var(--rule-ink); } }
.split-us { background: rgba(46,125,91,0.05); }
.split-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-ink); margin: 0 0 24px; }
.split ul { list-style: none; padding: 0; margin: 0; }
.split-you li { font-size: 1.35rem; line-height: 1.5; margin: 0 0 0.6rem; color: var(--fg-ink); }
.split-us li { font-size: 1.02rem; line-height: 1.5; margin: 0 0 0.5rem; padding-left: 1.3rem; position: relative; color: var(--fg-ink); }
.split-us li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.split-foot { font-family: var(--font-body); font-style: italic; color: var(--mute-ink); font-size: 1rem; margin: 18px 0 0; }
/* ---- deal: two modes ---- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
@media (max-width: 720px) { .modes { grid-template-columns: 1fr; } }
.mode { border: 1px solid var(--rule); border-radius: 6px; padding: 30px 28px; }
.mode h3 { color: var(--accent-soft); font-family: var(--font-mono); font-weight: 300; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; }
.mode p { font-size: 1.08rem; color: var(--fg); margin: 0 0 10px; }
.mode .for { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--mute); margin: 16px 0 0; }
/* ---- boundaries: "the fine print, up front" (ink-native, lives in the
how-we're-different chapter). Two quiet columns inside a hairline-topped block. ---- */
.boundaries { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.boundaries-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 26px; }
.boundaries-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .boundaries-grid { grid-template-columns: 1fr; gap: 24px; } }
.boundaries-col { border: 1px solid var(--rule); border-radius: 8px; padding: 26px 28px; }
.boundaries-col:last-child { border-color: rgba(62,158,115,0.4); background: rgba(46,125,91,0.06); }
.boundaries-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; }
.boundaries-col:last-child .boundaries-label { color: var(--accent-soft); }
.boundaries ul { list-style: none; padding: 0; margin: 0; }
.boundaries li { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.5; color: var(--fg); margin: 0 0 0.7rem; padding-left: 1.4rem; position: relative; }
.boundaries li:last-child { margin-bottom: 0; }
.boundaries-col:first-child li::before { content: "×"; position: absolute; left: 0; color: var(--mute); font-weight: 600; }
.boundaries-col:last-child li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-soft); }
/* Paper-band overrides for the comparison section (modes + boundaries were
* authored ink-native; these keep them readable when the band is paper). */
.band--paper .mode { border-color: var(--rule-ink); }
.band--paper .mode h3 { color: var(--accent); }
.band--paper .mode p { color: var(--fg-ink); }
.band--paper .mode .for { color: var(--mute-ink); }
.band--paper .boundaries { border-top-color: var(--rule-ink); }
.band--paper .boundaries-eyebrow { color: var(--mute-ink); }
.band--paper .boundaries-col { border-color: var(--rule-ink); }
.band--paper .boundaries-col:last-child { border-color: rgba(46,125,91,0.45); background: rgba(46,125,91,0.05); }
.band--paper .boundaries-label { color: var(--mute-ink); }
.band--paper .boundaries-col:last-child .boundaries-label { color: var(--accent); }
.band--paper .boundaries li { color: var(--fg-ink); }
.band--paper .boundaries-col:first-child li::before { color: var(--mute-ink); }
.band--paper .boundaries-col:last-child li::before { color: var(--accent); }
.band--paper .boundaries-foot { color: var(--mute-ink); }
.boundaries-foot { font-family: var(--font-body); font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--mute); margin: 22px 0 0; max-width: 52ch; }
/* ---- ROI calculator: "Scale your recurring income" ----
* Two panels: a green result panel (the payoff) + a controls panel (two sliders).
* Mirrors the Mighty/Kajabi calculator energy but tuned to our model: subscription
* only, no one-time fees, and THEIR 70% share is the hero number. */
.calc {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--rule-ink);
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
}
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
.calc-result {
background: linear-gradient(155deg, var(--accent-soft), var(--accent));
color: #06120D;
padding: 44px 40px;
display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 720px) { .calc-result { padding: 34px 26px; } }
.calc-result-label { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 6px; color: #0A1A12; }
.calc-hero {
font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; margin: 4px 0 10px; color: #06120D;
font-variant-numeric: tabular-nums;
}
.calc-result-sub { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; color: #123524; opacity: 0.85; }
.calc-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 28px; border-top: 1px solid rgba(6,18,13,0.16); }
.calc-mini--single { grid-template-columns: 1fr; }
.calc-mini-cell { padding: 18px 0 0; }
.calc-mini-cell + .calc-mini-cell { padding-left: 22px; border-left: 1px solid rgba(6,18,13,0.16); }
.calc-mini-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #123524; opacity: 0.8; margin: 0 0 6px; }
.calc-mini-val { font-family: var(--font-display); font-weight: 680; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; color: #06120D; font-variant-numeric: tabular-nums; }
.calc-mini-val span { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; opacity: 0.7; margin-left: 2px; }
.calc-controls { padding: 44px 40px; display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 720px) { .calc-controls { padding: 30px 26px; } }
.calc-field label {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mute-ink); margin: 0 0 14px;
}
.calc-field output {
font-family: var(--font-display); font-weight: 680; font-size: 1.15rem; letter-spacing: -0.01em;
text-transform: none; color: var(--fg-ink); font-variant-numeric: tabular-nums;
}
/* Range slider — themed to the money-green, paper-band correct. */
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #DDD8CC; outline: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(46,125,91,0.5); cursor: pointer; transition: transform 120ms var(--ease); }
.calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
.calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #FFFFFF; box-shadow: 0 2px 8px -2px rgba(46,125,91,0.5); cursor: pointer; }
/* The "you keep 70%" line sits inside the controls panel as a reassuring note. */
.calc-keep { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5; color: var(--mute-ink); margin: 0; }
/* The illustrative-figures disclaimer: small, centered, just below the whole box. */
.calc-fine { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--mute-ink); text-align: center; margin: 18px 0 0; }
/* ---- zero-risk grid: four reassurance cards led by a big number/glyph ---- */
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 920px) { .risk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .risk-grid { grid-template-columns: 1fr; } }
.risk-card { border: 1px solid var(--rule); border-radius: 12px; padding: 28px 26px; background: #0F1115; }
.risk-card-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1; color: var(--accent-soft); margin: 0 0 16px; }
.risk-card h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--fg); }
.risk-card p { font-size: 1rem; line-height: 1.55; color: var(--mute); margin: 0; }
/* ---- risk reversal ---- */
.risk { max-width: 24ch; }
.risk .big { font-family: var(--font-display); font-weight: 640; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.12; }
.risk p { margin-top: 1.2rem; color: var(--mute); }
/* ---- faq ---- */
.faq details { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.band--paper .faq details { border-bottom-color: var(--rule-ink); }
.faq summary { font-family: var(--font-display); font-weight: 560; font-size: 1.22rem; letter-spacing: -0.01em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-soft); font-family: var(--font-mono); font-weight: 300; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 16px 0 0; color: var(--mute); font-size: 1.1rem; }
.band--paper .faq details p { color: var(--mute-ink); }
/* ---- apply: two-column lede + form-well (the conversion chapter) ----
* Layout intent: the H2 reads as the headline of a chapter on the left; the form sits
* in a quietly contained "well" on the right. Together they cue: "this is the action."
* On mobile the two columns stack; the well remains the visual anchor.
*/
.apply h2 { max-width: 16ch; }
.apply-sub { color: var(--mute); max-width: 34ch; }
.apply-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 72px;
align-items: start;
}
.apply-lede { padding-top: 8px; }
@media (max-width: 980px) {
.apply-grid { grid-template-columns: 1fr; gap: 40px; max-width: 620px; }
}
/* The well: a quiet bordered container that gives the form physical weight without
* tipping into SaaS-card territory. Single hairline, faint inner ground shift, generous
* internal padding. No drop shadow on ink (that's a SaaS tell). */
.apply-well {
background: #0F1115;
border: 1px solid var(--rule);
border-radius: 10px;
padding: 40px 40px 36px;
}
@media (max-width: 720px) {
.apply-well { padding: 30px 26px 28px; border-radius: 8px; }
}
/* Form fields: promoted from underline-only to fully bordered, since the underlined
* version against the dark ground had ~1.5:1 contrast (failed WCAG 3:1 for UI). */
.form { margin: 0; max-width: 100%; }
.field { margin: 0 0 18px; }
.field label {
display: block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
margin: 0 0 10px;
}
.field input, .field select {
width: 100%;
background: var(--ink);
color: var(--fg);
border: 1px solid var(--rule);
border-radius: 6px;
font-family: var(--font-body);
font-size: 1.12rem;
padding: 14px 16px;
transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.field input::placeholder { color: #6A707A; }
.field input:hover, .field select:hover { border-color: #2A2E36; }
.field input:focus, .field select:focus {
outline: none;
border-color: var(--accent-soft);
background: #0B0C0E;
}
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--ink); color: var(--fg); }
.btn {
font-family: var(--font-mono); font-weight: 400; font-size: 0.82rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: #06120D; background: var(--accent-soft);
border: none; border-radius: 6px; padding: 16px 34px; cursor: pointer;
text-decoration: none; display: inline-block;
transition: transform 140ms var(--ease), background 140ms var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); background: var(--accent); color: var(--fg); }
.btn--full { width: 100%; padding: 18px 28px; margin-top: 6px; }
.cta-secondary { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.cta-secondary:hover { color: var(--fg); border-bottom-color: var(--accent-soft); }
.form-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--mute); margin: 18px 0 0; line-height: 1.6; text-align: center; }
.form-success { display: none; }
.form-success.show { display: block; }
.form-success .big { font-family: var(--font-display); font-weight: 640; font-size: 1.8rem; letter-spacing: -0.02em; color: var(--accent-soft); margin: 0 0 12px; }
.form.hide { display: none; }
/* ---- nav + footer ---- */
.nav { position: absolute; top: max(28px, env(safe-area-inset-top, 0px) + 16px); left: 0; right: 0; padding: 0 max(var(--pad-x), env(safe-area-inset-left, 0px) + 16px) 0 max(var(--pad-x), env(safe-area-inset-right, 0px) + 16px); display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.nav .mark { font-family: var(--font-display); font-weight: 680; letter-spacing: -0.02em; font-size: 1.1rem; color: var(--fg); text-decoration: none; }
.nav .by { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); text-decoration: none; transition: color 140ms var(--ease); }
.nav-link:hover, .nav-link:focus-visible { color: var(--fg); }
/* Home page leads on a paper (light) hero, so its nav needs dark text. Scoped to
* .nav--on-paper so the ink-led sub-pages (articles, about) keep light-on-dark. */
.nav--on-paper .mark { color: var(--fg-ink); }
.nav--on-paper .by { color: var(--mute-ink); }
.nav--on-paper .nav-link { color: var(--mute-ink); }
.nav--on-paper .nav-link:hover, .nav--on-paper .nav-link:focus-visible { color: var(--fg-ink); }
.nav-cta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--accent-soft); text-decoration: none; padding: 9px 16px; border-radius: 6px; transition: background 140ms var(--ease), transform 140ms var(--ease); }
.nav-cta:hover, .nav-cta:focus-visible { background: var(--accent); color: var(--fg); transform: translateY(-1px); }
@media (max-width: 540px) { .nav-link { display: none; } }
/* article meta line (date · read time) + back-to-all link */
.article-back { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); text-decoration: none; display: inline-block; margin-bottom: 24px; transition: color 140ms var(--ease); }
.article-back:hover, .article-back:focus-visible { color: var(--fg); }
.article-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-top: 22px; }
/* articles hub list */
.article-list { list-style: none; padding: 0; margin: 0; }
.article-item { border-bottom: 1px solid var(--rule-ink); }
.article-item:first-child { border-top: 1px solid var(--rule-ink); }
.article-item a { display: block; text-decoration: none; padding: 32px 0; transition: opacity 140ms var(--ease); }
.article-item a:hover, .article-item a:focus-visible { opacity: 0.72; }
.article-item-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-ink); margin: 0 0 12px; }
.article-item-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; color: var(--fg-ink); max-width: 28ch; }
.article-item-sum { font-family: var(--font-body); font-size: 1.12rem; line-height: 1.55; color: var(--mute-ink); margin: 0; max-width: var(--measure); }
.foot { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--mute); text-align: center; padding: 48px var(--pad-x); border-top: 1px solid var(--rule); line-height: 2; }
.foot a { color: var(--mute); text-decoration: none; border-bottom: 1px solid transparent; transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--fg); border-bottom-color: var(--rule); }
/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Lift-in: stronger entrance for the eyebrow + H2 of each section.
* Gives the page a section-by-section "rising in" feel as you scroll,
* without going full snap-scroll. Reuses the .reveal IntersectionObserver. */
.reveal.lift-in { transform: translateY(32px); transition: opacity 680ms var(--ease), transform 680ms var(--ease); }
.reveal.lift-in.in { transform: none; }
/* Subtle stagger: an H2 that follows an eyebrow lifts in 120ms later, so the
* eyebrow lands first, then the headline. Cumulative effect feels orchestrated. */
.reveal.lift-in.lift-stagger { transition-delay: 120ms; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .reveal.lift-in { opacity: 1; transform: none; transition: none; }
* { animation-duration: 0ms !important; }
}
/* ---- mobile safety pass ----
* Surgical fixes for iPhone Safari: safe-area handling, tap-target floors,
* iOS zoom prevention on form inputs, link tap targets, layout polish at the
* narrowest viewports (375px and below).
*/
/* Safe-area: pad the side rails of every band so content never sits under the
* iPhone's curved corners or Dynamic Island side margins in landscape. */
@supports (padding: max(0px)) {
.band {
padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}
.foot {
padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
padding-bottom: max(48px, env(safe-area-inset-bottom, 0px) + 24px);
}
}
/* iOS Safari auto-zooms when a focused input has font-size < 16px. Our inputs
* are 1.12rem (~17.9px) so this is safe, but we lock the floor explicitly to
* survive future tweaks. Also disable the iOS-typical magnification glyphs. */
.field input, .field select, .field textarea {
font-size: max(16px, 1.12rem);
}
.check { font-size: max(16px, 0.98rem); padding: 11px 14px; min-height: 44px; }
/* Card source link (the "Read the story" link in the expanded proof cards) —
* promoted from inline-style soup to a proper class with a 44pt tap target. */
.card-source-link {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mute-ink);
text-decoration: none;
border-bottom: 1px solid var(--rule-ink);
padding: 10px 0;
min-height: 44px;
line-height: 1.6;
transition: color 140ms var(--ease), border-bottom-color 140ms var(--ease);
}
.card-source-link:hover, .card-source-link:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Footer links: bump tap area to ~44pt on mobile without changing the visual
* weight on desktop. The mid-dot separators get a touch more breathing room. */
.foot a {
display: inline-block;
padding: 10px 4px;
min-height: 44px;
line-height: 1.6;
}
/* CTA secondary in the hero: ensure 44pt tap target. */
.cta-secondary { display: inline-block; padding: 12px 0; min-height: 44px; line-height: 1.6; }
/* Form button: already 18px vertical padding on btn--full (~52px tall) — safe.
* Form labels are above the field — single column — already correct. */
/* Deal-row stacked mode: when the value drops below the label on mobile, give
* the value a faint label so it doesn't feel orphaned. */
@media (max-width: 720px) {
.deal-row { padding: 18px 0; }
.deal-row .hl { display: inline-block; margin-top: 2px; }
.deal-table { padding: 22px 18px; }
}
/* Narrowest target: iPhone SE (375px) and below. Tighten band padding so the
* deal table, founder cards, and apply-well don't feel pinched, and let the
* H1 breathe. */
@media (max-width: 380px) {
:root { --pad-x: 22px; }
h1 { font-size: clamp(2.2rem, 9vw, 2.6rem); letter-spacing: -0.025em; }
.hero .lede { font-size: 1.2rem; }
.card summary { padding: 20px 18px; }
.card-body { padding: 0 18px 22px; }
.founder { padding: 22px 20px; }
.apply-well { padding: 26px 20px 24px; border-radius: 8px; }
.deal-table { padding: 20px 16px; }
}
/* Prevent any element from forcing horizontal scroll. The nuclear option, but
* cheap insurance against a long word or pasted URL on a narrow screen. */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
/* Tap highlight: kill the gray flash, keep keyboard focus visible. */
a, button, summary, .check { -webkit-tap-highlight-color: rgba(46, 125, 91, 0.12); }
/* ---- responsive content toggles ---- */
.mobile-only { display: none; }
.desktop-only { display: inline; }
@media (max-width: 720px) {
.mobile-only { display: inline; }
.desktop-only { display: none; }
}