/* ============================================================================ * Fluente · /schools (white-label SaaS for language academies) tokens + layout * ============================================================================ * * Ported verbatim from the Aioras_65 design handoff at * project/sites/fluente-academy-2026-05-19/site/schools.html * * The /schools surface is the white-label pitch for language academies: * "Run your own language school." Demo tenant is Verbo at verbo.school. * Dark-default like dashboard + profile; the shared fluente-nav theme * toggle flips [data-theme] on and the light overrides live below. * Lives under /landing/ because /brand/ is reserved for brand-registry * generated tokens. * ============================================================================ */ /* ───────────────────────────────────────────────── /schools · White-label sales page Reuses styles.css palette, fonts, eyebrow + buttons. Adds its own layout for the hero, onboarding mock, revenue-share diagram, and MCP section. ───────────────────────────────────────────────── */ /* ───── DARK defaults (the page's default mode) ───── The schools page sets by default. These :root tokens give the dark canvas its ink/surface palette so var(--bone) is the cream text colour rather than picking up the wrong default from fluente-extras.css (which fell back to the page background and rendered dark-on-dark). The [data-theme="light"] block below overrides these when the nav theme toggle flips to light. */ :root { --navy: #0D1B2A; --navy-rich: #0A1422; --navy-card: #11253A; --navy-soft: #15293F; --navy-line: #1F3550; --navy-line-2: #294460; --navy-deep: #08111B; --bone: #FDFBF7; --bone-dim: #C9C3B3; --bone-mute: #8E8979; --bone-faint: rgb(253 251 247 / 0.20); --coral: #E8704A; --coral-bright:#FF8463; --coral-soft: rgb(232 112 74 / 0.16); --coral-line: rgb(232 112 74 / 0.32); --moss: #6B7F4A; --warm: #C5A059; --gold: #C5A059; /* Inverted "parchment" palette — fixed across both nav themes. Used by the .s-numbers band which is deliberately theme-stable (cream surface + navy ink) so it interrupts the dark canvas consistently regardless of whether the page is in dark or light mode. These tokens are NOT overridden in the [data-theme="light"] block below. */ --inv-surface: #FDFBF7; --inv-ink: #0D1B2A; --inv-dim: #3D4A5C; /* Darker coral than the dark-canvas --coral (#E8704A) so the sup accents on the cream surface hit WCAG AA-Large comfortably (4.15:1 vs cream, where the bright coral is only 3.19:1 — fine for large text per spec but tight). #D85A33 is the same coral the file's [data-theme="light"] block already uses on cream, so this stays brand-consistent. */ --inv-accent: #D85A33; --inv-line: rgb(13 27 42 / 0.12); --inv-line-faint: rgb(13 27 42 / 0.08); } /* ───── LIGHT theme overrides ───── Mirrors dashboard's pattern: parchment surfaces, navy ink, coral preserved. Activates when is set by the shared theme toggle. */ [data-theme="light"] { --navy: #FDFBF7; --navy-rich: #F4EFE6; --navy-card: #FFFFFF; --navy-soft: #F8F4EA; --navy-line: #E4DDCB; --navy-line-2: #D0C7B0; --navy-deep: #EDE6D5; --bone: #0D1B2A; --bone-dim: #3D4A5C; --bone-mute: #6B7280; --bone-faint: rgb(13 27 42 / 0.20); --coral: #D85A33; --coral-bright:#E8704A; --coral-soft: rgb(216 90 51 / 0.10); --coral-line: rgb(216 90 51 / 0.32); --moss: #5C6B3F; --warm: #B0884A; --gold: #B0884A; } [data-theme="light"] body { background: var(--navy-rich); color: var(--bone); } [data-theme="light"] .btn-primary { color: #FDFBF7; } [data-theme="light"] .s-hero::before { background: radial-gradient(900px 500px at 88% 12%, rgba(216,90,51,0.08), transparent 60%), radial-gradient(700px 400px at 8% 78%, rgba(176,136,74,0.06), transparent 60%); } /* Anchor jumps land below the fixed nav. */ html { scroll-padding-top: 88px; } main { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* ───────── HERO ───────── */ .s-hero { position: relative; padding: 130px 0 110px; border-bottom: 1px solid var(--navy-line); overflow: hidden; } .s-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 88% 12%, rgba(232,112,74,0.13), transparent 60%), radial-gradient(700px 400px at 8% 78%, rgba(197,160,89,0.08), transparent 60%); pointer-events: none; } .s-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .s-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 6.6vw, 92px); line-height: 1.08; letter-spacing: -0.025em; margin: 18px 0 32px; color: var(--bone); text-wrap: pretty; } .s-hero h1 em { font-style: italic; color: var(--coral); font-weight: 500; } .s-hero h1 .smaller { font-size: 0.62em; line-height: 1.2; display: block; margin-top: 10px; color: var(--bone-dim); font-style: italic; letter-spacing: -0.01em; } .s-hero-lede { font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--bone-dim); max-width: 540px; margin-bottom: 36px; } .s-hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 4px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; border: 0; cursor: pointer; transition: var(--t-fast); text-decoration: none; } .btn-primary { background: var(--coral); color: var(--bone); } .btn-primary:hover { background: var(--coral-bright); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--navy-line-2); } .btn-ghost:hover { border-color: var(--coral-line); color: var(--coral); } .s-hero-foot { display: flex; gap: 28px; margin-top: 28px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--bone-mute); text-transform: uppercase; } .s-hero-foot span { display: inline-flex; align-items: center; gap: 8px; } .s-hero-foot span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); } /* Hero right: faux Verbo school browser preview */ .verbo-preview { position: relative; background: var(--navy-card); border: 1px solid var(--navy-line); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55), 0 1px 0 rgba(253, 251, 247, 0.04) inset; } .vp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--navy-line); background: var(--navy-rich); } .vp-bar .dots { display: flex; gap: 6px; } .vp-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--navy-line-2); } .vp-bar .dots span:first-child { background: #E8704A; } .vp-bar .dots span:nth-child(2) { background: #C5A059; } .vp-bar .dots span:nth-child(3) { background: #6B7F4A; } .vp-bar .url { flex: 1; height: 26px; background: var(--navy-soft); border-radius: 4px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-family: var(--mono); font-size: 11.5px; color: var(--bone-dim); letter-spacing: 0.02em; } .vp-bar .url::before { content: "🔒"; font-size: 9px; filter: grayscale(1) opacity(0.6); } .vp-bar .url em { color: var(--bone); font-style: normal; font-weight: 500; } .vp-body { padding: 32px 30px 36px; background: radial-gradient(600px 280px at 70% 0%, rgba(124, 95, 178, 0.18), transparent 60%), var(--navy-card); position: relative; } .vp-school-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--navy-line); } .vp-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; } .vp-logo .glyph { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #9C7BD4, #5B4185); display: grid; place-items: center; color: var(--bone); font-family: var(--serif); font-style: italic; font-size: 14px; font-weight: 600; } .vp-school-nav .vp-links { display: flex; gap: 22px; font-family: var(--sans); font-size: 12px; color: var(--bone-dim); letter-spacing: 0.01em; } .vp-school-nav .vp-links span:first-child { color: var(--bone); border-bottom: 1px solid #9C7BD4; padding-bottom: 3px; } .vp-school-nav .vp-cta { background: #9C7BD4; color: var(--navy-rich); font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 3px; letter-spacing: 0.02em; } .vp-headline { font-family: var(--serif); font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); margin-bottom: 12px; text-wrap: pretty; } .vp-headline em { font-style: italic; color: #9C7BD4; } .vp-sub { font-family: var(--serif); font-size: 14.5px; color: var(--bone-dim); margin-bottom: 22px; max-width: 380px; } .vp-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .vp-langs span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--bone-dim); padding: 4px 9px; border: 1px solid var(--navy-line-2); border-radius: 999px; } .vp-langs span.on { color: var(--bone); border-color: #9C7BD4; background: rgba(156, 123, 212, 0.10); } .vp-pricing { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-mute); text-transform: uppercase; } .vp-pricing strong { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--bone); font-weight: 500; letter-spacing: -0.01em; text-transform: none; } .vp-stamp { position: absolute; bottom: 14px; right: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--bone-mute); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .vp-stamp::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); } /* ───────── BIG NUMBERS BAR ───────── Inverted "parchment" band: cream surface + navy ink against the surrounding dark canvas. Breaks up the otherwise-mono dark page and gives the four headline numerals proper contrast (they were invisible cream-on-dark when this section inherited the page palette). Coral accents (the % and min sups) are preserved as the brand voice marker. Width is the same content-column as the rest of
(max 1240px via main's own padding). We deliberately do NOT use a 100vw-bleed pattern here — on platforms with non-overlay vertical scrollbars (Windows / many Linux setups) the scrollbar gutter is included in 100vw and a full-bleed section produces a small horizontal scroll/jump on the long /schools page (Codex P2). Slight horizontal padding + the cream surface + rounded corners give the same "section interrupt" effect without that risk. */ .s-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--inv-surface); color: var(--inv-ink); margin: 56px 0; padding: 64px 48px; border-radius: 8px; border: 1px solid var(--inv-line-faint); } .s-num { padding: 0 32px; border-right: 1px solid var(--inv-line); } .s-num:last-child { border-right: 0; } .s-num .v { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1; font-weight: 500; color: var(--inv-ink); letter-spacing: -0.025em; } .s-num .v sup { font-size: 0.4em; font-style: normal; vertical-align: top; color: var(--inv-accent); margin-left: 4px; font-weight: 500; letter-spacing: 0.02em; } .s-num .label { margin-top: 14px; font-family: var(--sans); font-size: 13px; color: var(--inv-dim); line-height: 1.5; max-width: 240px; } /* ───────── SECTION HEAD ───────── */ .section { padding: 110px 0; border-bottom: 1px solid var(--navy-line); } .section-head { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.7fr); grid-template-areas: "eyebrow title" "lede title"; column-gap: 64px; row-gap: 22px; align-items: start; margin-bottom: 64px; } .section-head .eyebrow { grid-area: eyebrow; align-self: start; } .section-head h2 { grid-area: title; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--bone); text-wrap: pretty; max-width: 16ch; } .section-head h2 em { font-style: italic; color: var(--coral); font-weight: 500; } .section-head p { grid-area: lede; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--bone-dim); margin: 0; max-width: 38ch; } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "lede"; row-gap: 18px; } } /* ───────── ONBOARDING MOCK ───────── */ .onboard { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } .ob-steps { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 110px; } .ob-step { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 14px; padding: 14px 12px; border-radius: 4px; cursor: pointer; border-left: 2px solid transparent; transition: var(--t-fast); background: transparent; text-align: left; font-family: inherit; color: inherit; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; } .ob-step:hover { background: rgba(253, 251, 247, 0.03); } .ob-step.active { background: rgba(232, 112, 74, 0.08); border-left-color: var(--coral); } .ob-step .num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--navy-line-2); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--bone-mute); margin-top: 2px; } .ob-step.active .num { border-color: var(--coral); color: var(--coral); background: rgba(232, 112, 74, 0.10); } .ob-step.done .num { border-color: var(--coral); background: var(--coral); color: var(--navy-rich); } .ob-step .meta { display: flex; flex-direction: column; gap: 4px; } .ob-step .ttl { font-family: var(--serif); font-size: 17px; color: var(--bone); letter-spacing: -0.01em; } .ob-step .sub { font-family: var(--sans); font-size: 11.5px; color: var(--bone-mute); letter-spacing: 0.02em; } .ob-stage { background: var(--navy-card); border: 1px solid var(--navy-line); border-radius: 6px; padding: 36px 40px 40px; min-height: 540px; position: relative; } .ob-stage-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--navy-line); } .ob-stage-head .who { font-family: var(--mono); font-size: 10.5px; color: var(--bone-mute); letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; } .ob-stage-head .who::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .ob-stage-head .auto { font-family: var(--mono); font-size: 10.5px; color: var(--bone-mute); letter-spacing: 0.06em; } .ob-pane { display: none; } .ob-pane.on { display: block; } .ob-pane h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--bone); } .ob-pane h3 em { font-style: italic; color: var(--coral); } .ob-pane .pane-sub { font-family: var(--serif); font-size: 16px; color: var(--bone-dim); margin-bottom: 26px; max-width: 520px; } /* Pane 1: Brand */ .brand-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--bone-mute); text-transform: uppercase; } .field input, .field select { background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: 4px; padding: 12px 14px; font-family: var(--sans); font-size: 14px; color: var(--bone); } .field input:focus, .field select:focus { border-color: var(--coral); outline: 0; } .field input.brand-name { font-family: var(--serif); font-size: 22px; font-style: italic; font-weight: 500; letter-spacing: -0.01em; } .field .help { font-family: var(--sans); font-size: 11.5px; color: var(--bone-mute); } .field .help em { font-style: italic; color: var(--coral); } .color-row { display: flex; gap: 10px; align-items: center; } .swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--navy-line-2); cursor: pointer; transition: var(--t-fast); } .swatch.on { outline: 2px solid var(--bone); outline-offset: 2px; } .makeover-pitch { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--navy-rich); border: 1px dashed var(--coral-line); border-radius: 6px; padding: 18px 22px; margin-top: 12px; } .makeover-pitch .mp-amt { font-family: var(--serif); font-style: italic; font-size: 28px; letter-spacing: -0.02em; color: var(--brass); font-weight: 500; white-space: nowrap; } .makeover-pitch .mp-amt small { font-family: var(--sans); font-size: 11px; color: var(--bone-mute); font-style: normal; letter-spacing: 0.06em; margin-left: 4px; text-transform: uppercase; } .makeover-pitch .mp-body strong { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--bone); font-weight: 500; display: block; margin-bottom: 4px; } .makeover-pitch .mp-body p { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--bone-dim); margin: 0; } .makeover-pitch .mp-btn { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; background: transparent; color: var(--brass); border: 1px solid var(--brass); border-radius: 3px; padding: 9px 14px; cursor: pointer; transition: var(--t-fast); white-space: nowrap; } .makeover-pitch .mp-btn:hover { background: var(--brass); color: var(--navy-rich); } .makeover-pitch .mp-btn.added { background: var(--brass); color: var(--navy-rich); } @media (max-width: 700px) { .makeover-pitch { grid-template-columns: 1fr; gap: 14px; text-align: left; } } /* Pane 2: Languages */ .lang-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .lang-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; background: var(--navy-soft); border: 1px solid var(--navy-line); font-family: var(--sans); font-size: 12.5px; color: var(--bone-dim); cursor: pointer; transition: var(--t-fast); text-align: left; } .lang-chip:hover { border-color: var(--coral-line); } .lang-chip.on { background: rgba(232, 112, 74, 0.10); border-color: var(--coral); color: var(--bone); } .lang-chip .flag { width: 14px; height: 14px; border-radius: 2px; background: var(--navy-line-2); } .lang-chip .check { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--navy-line-2); display: grid; place-items: center; font-size: 9px; color: transparent; } .lang-chip.on .check { background: var(--coral); border-color: var(--coral); color: var(--navy-rich); } .lang-chip.on .check::after { content: "✓"; font-size: 9px; } .lang-board-foot { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-mute); text-transform: uppercase; } .lang-board-foot strong { color: var(--coral); font-family: var(--mono); } /* Pane 3: Exams */ .exam-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .exam-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 4px; background: var(--navy-soft); border: 1px solid var(--navy-line); cursor: pointer; transition: var(--t-fast); text-align: left; } .exam-row:hover { border-color: var(--coral-line); } .exam-row.on { background: rgba(232, 112, 74, 0.06); border-color: var(--coral); } .exam-row .badge { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--coral); letter-spacing: -0.02em; font-weight: 500; } .exam-row .exam-meta { display: flex; flex-direction: column; gap: 2px; } .exam-row .exam-name { font-family: var(--serif); font-size: 16px; color: var(--bone); letter-spacing: -0.01em; } .exam-row .exam-sub { font-family: var(--sans); font-size: 11.5px; color: var(--bone-mute); } .exam-row .toggle { width: 30px; height: 18px; border-radius: 999px; background: var(--navy-line-2); position: relative; transition: var(--t-fast); } .exam-row .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); transition: var(--t-fast); } .exam-row.on .toggle { background: var(--coral); } .exam-row.on .toggle::after { left: 14px; } /* Pane 4: Pricing */ .pricing-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .pb-form { display: flex; flex-direction: column; gap: 20px; } .pb-tier { background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: 4px; padding: 18px 20px; } .pb-tier-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pb-tier-head input { background: transparent; border: 0; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--bone); font-weight: 500; width: 60%; } .pb-tier-head input:focus { outline: 0; color: var(--coral); } .pb-tier-head .price-input { display: flex; align-items: baseline; gap: 4px; } .pb-tier-head .price-input span { font-family: var(--mono); font-size: 13px; color: var(--bone-mute); } .pb-tier-head .price-input input { width: 60px; text-align: right; font-family: var(--serif); font-size: 22px; color: var(--coral); font-style: italic; font-weight: 500; } .pb-tier-feat { font-family: var(--sans); font-size: 12px; color: var(--bone-dim); line-height: 1.6; } .pb-preview { background: var(--navy-rich); border: 1px solid var(--navy-line); border-radius: 6px; padding: 24px; } .pb-preview .head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--bone-mute); text-transform: uppercase; margin-bottom: 18px; } .pb-card { border-top: 1px solid var(--navy-line); padding: 18px 0; } .pb-card:first-of-type { border-top: 0; padding-top: 0; } .pb-card .name { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--bone); margin-bottom: 6px; } .pb-card .pp { font-family: var(--serif); font-size: 28px; color: var(--coral); font-style: italic; letter-spacing: -0.01em; font-weight: 500; } .pb-card .pp small { font-family: var(--sans); font-size: 11px; color: var(--bone-mute); font-style: normal; letter-spacing: 0.04em; } .pb-card .feat { font-family: var(--sans); font-size: 12px; color: var(--bone-dim); margin-top: 6px; } /* Pane 5: Launch */ .launch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .launch-url { background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: 4px; padding: 16px 20px; font-family: var(--mono); font-size: 13px; color: var(--bone); letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; } .launch-url::before { content: "🔗"; filter: grayscale(1); } .launch-url em { color: var(--coral); font-style: normal; font-weight: 600; } .launch-checks { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .launch-check { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 13px; color: var(--bone-dim); } .launch-check::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: var(--navy-rich); display: grid; place-items: center; font-size: 11px; font-weight: 600; } .launch-receipt { background: var(--navy-rich); border: 1px solid var(--coral-line); border-radius: 6px; padding: 28px; position: relative; overflow: hidden; } .launch-receipt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 80% 0%, rgba(232,112,74,0.12), transparent 60%); pointer-events: none; } .launch-receipt .stamp { position: relative; font-family: var(--mono); font-size: 10.5px; color: var(--coral); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } .launch-receipt h4 { position: relative; font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 14px; } .launch-receipt h4 em { font-style: italic; color: var(--coral); } .launch-receipt p { position: relative; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--bone-dim); margin: 0 0 18px; } .launch-receipt .ts { position: relative; font-family: var(--mono); font-size: 10.5px; color: var(--bone-mute); letter-spacing: 0.06em; display: flex; justify-content: space-between; border-top: 1px solid var(--navy-line); padding-top: 12px; } /* ───────── INCLUDED GRID ───────── */ .inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .inc-cell { background: var(--navy-card); border: 1px solid var(--navy-line); border-radius: 6px; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; position: relative; overflow: hidden; } .inc-cell .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--coral); text-transform: uppercase; } .inc-cell h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); margin: 6px 0 0; line-height: 1.2; } .inc-cell h3 em { font-style: italic; color: var(--coral); } .inc-cell p { font-family: var(--serif); font-size: 15px; color: var(--bone-dim); line-height: 1.5; margin: 0; } .inc-cell .visual { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-mute); } .inc-cell .visual .row { display: flex; gap: 8px; flex-wrap: wrap; } .inc-cell .visual .row span { padding: 3px 8px; border: 1px solid var(--navy-line-2); border-radius: 999px; } .inc-cell.wide { grid-column: span 2; } /* ───────── REVENUE SHARE DIAGRAM ───────── */ .commit-wrap { margin-bottom: 24px; } .commit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; } .commit-card.optional { background: var(--navy-rich); border-style: dashed; border-color: var(--coral-line); } .commit-card.optional .commit-amt { color: var(--brass); } .commit-card.optional .commit-name { color: var(--brass); } .commit-card { background: var(--navy-card); border: 1px solid var(--navy-line); border-radius: 6px; padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 6px; } .commit-card .commit-amt { font-family: var(--serif); font-style: italic; font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -0.025em; color: var(--coral); } .commit-card .commit-amt small { font-family: var(--sans); font-size: 14px; color: var(--bone-mute); font-style: normal; letter-spacing: 0.04em; margin-left: 4px; } .commit-card .commit-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--bone); text-transform: uppercase; margin-top: 6px; } .commit-card p { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--bone-dim); margin: 8px 0 16px; } .commit-card .commit-foot { margin-top: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--bone-mute); text-transform: uppercase; padding-top: 12px; border-top: 1px solid var(--navy-line); } .commit-example { background: var(--navy-rich); border: 1px solid var(--coral-line); border-radius: 6px; padding: 28px 32px 30px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; } .commit-example::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 250px at 100% 0%, rgba(232,112,74,0.10), transparent 60%); pointer-events: none; } .commit-example .ce-head { position: relative; grid-column: 1 / -1; margin-bottom: 4px; } .ce-rows { position: relative; display: flex; flex-direction: column; } .ce-row { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--navy-line); } .ce-row:first-child { border-top: 0; } .ce-row .ce-label { font-family: var(--sans); font-size: 13.5px; color: var(--bone-dim); } .ce-row .ce-val { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--bone); letter-spacing: -0.01em; font-weight: 500; } .ce-row.total { border-top: 1px solid var(--coral-line); margin-top: 4px; padding-top: 16px; } .ce-row.total .ce-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--coral); text-transform: uppercase; } .ce-row.total .ce-val em { font-style: italic; color: var(--coral); font-size: 32px; } .ce-after { position: relative; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--bone-dim); } .ce-after strong { color: var(--coral); font-weight: 500; font-style: italic; } /* Step-by-step "then what" */ .ce-then { position: relative; display: flex; flex-direction: column; gap: 16px; } .ce-then-step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; } .ce-then-num { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--coral-line); background: rgba(232,112,74,0.08); color: var(--coral); font-family: var(--mono); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 2px; flex-shrink: 0; } .ce-then-body { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--bone-dim); } .ce-then-body strong { color: var(--bone); font-weight: 500; } .commit-example .ce-after { grid-column: 1 / -1; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--navy-line); } /* Cashflow chart */ .cashflow-wrap { margin-top: 64px; background: var(--navy-deep); border: 1px solid var(--navy-line); border-radius: 6px; padding: 36px 40px 32px; position: relative; overflow: hidden; } .cashflow-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 0% 100%, rgba(232,112,74,0.08), transparent 60%); pointer-events: none; } .cashflow-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; } .cashflow-head h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 0; color: var(--bone); max-width: 560px; } .cashflow-head h3 em { color: var(--coral); font-style: italic; font-weight: 500; } .cashflow-assumptions { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bone-dim); text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; text-align: right; } .cashflow-assumptions span { color: var(--coral); } .cashflow-chart { position: relative; width: 100%; height: 360px; } .cashflow-chart svg { width: 100%; height: 100%; display: block; overflow: visible; } .cashflow-chart .grid line { stroke: var(--navy-line); stroke-width: 1; } .cashflow-chart .axis text { font-family: var(--mono); font-size: 10.5px; fill: var(--bone-dim); letter-spacing: 0.04em; } .cashflow-chart .zero-line { stroke: var(--navy-line); stroke-width: 1; stroke-dasharray: 3 4; } .cashflow-chart .zero-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--bone-dim); } .cashflow-chart .area-fluente { fill: rgba(232,112,74,0.10); } .cashflow-chart .line-fluente { stroke: var(--coral); stroke-width: 2.5; fill: none; } .cashflow-chart .line-trad { stroke: var(--bone-dim); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0.6; } .cashflow-chart .pt-fluente { fill: var(--coral); stroke: var(--navy-deep); stroke-width: 2; } .cashflow-chart .pt-label { font-family: var(--mono); font-size: 10px; fill: var(--bone); letter-spacing: 0.04em; } .cashflow-chart .pt-amt { font-family: var(--serif); font-size: 14px; font-style: italic; fill: var(--coral); } .cashflow-chart .threshold-line { stroke: rgba(197,160,89,0.5); stroke-width: 1; stroke-dasharray: 2 5; } .cashflow-chart .threshold-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; fill: var(--gold); } .cashflow-legend { position: relative; display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--navy-line); font-family: var(--sans); font-size: 13px; color: var(--bone-dim); } .cashflow-legend .lg { display: flex; align-items: center; gap: 10px; } .cashflow-legend .swatch { width: 22px; height: 3px; border-radius: 2px; background: var(--coral); } .cashflow-legend .swatch.dashed { background: transparent; border-top: 2px dashed var(--bone-dim); height: 0; width: 22px; opacity: 0.7; } .cashflow-takeaway { position: relative; margin-top: 24px; padding: 20px 24px; background: var(--navy-rich); border-left: 2px solid var(--coral); border-radius: 0 4px 4px 0; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--bone-dim); font-style: italic; } .cashflow-takeaway strong { font-style: normal; color: var(--coral); font-family: var(--serif); font-weight: 500; } .rev-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .rev-diagram { position: relative; padding: 12px 0; } .rev-bar { position: relative; height: 76px; border-radius: 6px; overflow: hidden; display: flex; background: var(--navy-soft); border: 1px solid var(--navy-line); } .rev-bar .seg { display: flex; align-items: center; padding: 0 22px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--bone); letter-spacing: -0.01em; border-right: 1px solid rgba(13, 27, 42, 0.4); } .rev-bar .seg:last-child { border-right: 0; } .rev-bar .seg.school { flex: 7; background: linear-gradient(90deg, rgba(232,112,74,0.18), rgba(232,112,74,0.32)), var(--navy-card); } .rev-bar .seg.school em { color: var(--coral); font-style: italic; font-weight: 500; font-size: 28px; margin-right: 12px; letter-spacing: -0.02em; } .rev-bar .seg.fl { flex: 3; background: var(--navy-rich); color: var(--bone-dim); } .rev-bar .seg.fl em { color: var(--brass); font-style: italic; font-weight: 500; font-size: 24px; margin-right: 10px; } .rev-flow { margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--bone-mute); letter-spacing: 0.06em; display: flex; justify-content: space-between; text-transform: uppercase; } .rev-flow span:first-child { color: var(--coral); } .rev-callout h3 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--bone); } .rev-callout h3 em { font-style: italic; color: var(--coral); } .rev-callout p { font-family: var(--serif); font-size: 17px; color: var(--bone-dim); line-height: 1.55; margin: 0 0 16px; } .rev-callout ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; } .rev-callout li { font-family: var(--sans); font-size: 13.5px; color: var(--bone-dim); display: flex; align-items: flex-start; gap: 10px; } .rev-callout li::before { content: "→"; color: var(--coral); font-family: var(--serif); font-style: italic; } /* ───────── MCP SECTION ───────── */ .mcp { background: var(--navy-rich); border-top: 1px solid var(--navy-line); } .mcp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .mcp-grid h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 22px; color: var(--bone); text-wrap: pretty; } .mcp-grid h2 em { font-style: italic; color: var(--coral); } .mcp-grid p { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--bone-dim); margin: 0 0 14px; } .mcp-grid p code { font-family: var(--mono); font-size: 15px; background: rgba(232, 112, 74, 0.10); color: var(--coral); padding: 2px 8px; border-radius: 3px; letter-spacing: 0.01em; } .mcp-grid ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--sans); font-size: 13.5px; color: var(--bone-dim); } .mcp-grid li { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 10px 0; border-top: 1px solid var(--navy-line); } .mcp-grid li:first-child { border-top: 0; padding-top: 0; } .mcp-grid li .lvl { font-family: var(--mono); font-size: 10.5px; color: var(--coral); letter-spacing: 0.12em; text-transform: uppercase; } .mcp-block { background: #050B14; border: 1px solid var(--navy-line); border-radius: 6px; padding: 26px 28px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--bone-dim); letter-spacing: 0.01em; position: relative; } .mcp-block::before { content: "MCP · stdio"; position: absolute; top: -10px; left: 18px; background: var(--navy-rich); padding: 0 10px; font-size: 10.5px; color: var(--coral); letter-spacing: 0.14em; text-transform: uppercase; } .mcp-block .key { color: var(--brass); } .mcp-block .str { color: #9CC580; } .mcp-block .com { color: var(--bone-mute); font-style: italic; } .mcp-block .em { color: var(--coral); } /* ───────── CTA ───────── */ .s-cta { padding: 130px 0; text-align: center; position: relative; } .s-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 50% 50%, rgba(232,112,74,0.12), transparent 70%); pointer-events: none; } .s-cta-inner { position: relative; max-width: 720px; margin: 0 auto; } .s-cta h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.6vw, 80px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 22px; color: var(--bone); text-wrap: pretty; } .s-cta h2 em { font-style: italic; color: var(--coral); } .s-cta p { font-family: var(--serif); font-size: 19px; color: var(--bone-dim); margin: 0 0 36px; line-height: 1.55; } .s-cta-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; } .s-cta-form input { flex: 1; background: var(--navy-card); border: 1px solid var(--navy-line-2); border-radius: 4px; padding: 0 18px; height: 52px; font-family: var(--sans); font-size: 14.5px; color: var(--bone); outline: 0; } .s-cta-form input:focus { border-color: var(--coral); } .s-cta-form button { height: 52px; padding: 0 26px; background: var(--coral); color: var(--bone); border: 0; border-radius: 4px; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.01em; cursor: pointer; transition: var(--t-fast); } .s-cta-form button:hover { background: var(--coral-bright); } .s-cta-foot { margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bone-mute); text-transform: uppercase; } /* ───────── FOOTER ───────── */ .s-foot { border-top: 1px solid var(--navy-line); padding: 40px 32px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bone-mute); text-transform: uppercase; } .s-foot a { color: var(--bone-dim); margin: 0 12px; } .s-foot a:hover { color: var(--coral); } /* ───────── RESPONSIVE ───────── */ @media (max-width: 980px) { .s-hero-grid { grid-template-columns: 1fr; gap: 48px; } .s-numbers { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; } /* Borders use the same scoped --inv-line as the desktop band above so the parchment palette stays consistent under both nav theme toggles (the .s-numbers band is intentionally fixed-palette). */ .s-num { padding: 16px 24px; border-bottom: 1px solid var(--inv-line); border-right: 1px solid var(--inv-line); } .s-num:nth-child(2n) { border-right: 0; } .s-num:nth-last-child(-n+2) { border-bottom: 0; } .onboard { grid-template-columns: 1fr; } .ob-steps { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 8px; } .ob-step { min-width: 220px; } .pricing-builder, .launch-grid, .rev-wrap, .mcp-grid { grid-template-columns: 1fr; gap: 32px; } .commit-grid { grid-template-columns: 1fr 1fr; } .commit-example { grid-template-columns: 1fr; gap: 24px; } .inc-grid { grid-template-columns: 1fr 1fr; } .inc-cell.wide { grid-column: auto; } .exam-list { grid-template-columns: 1fr; } .brand-form { grid-template-columns: 1fr; } } @media (max-width: 600px) { main { padding: 0 20px; } .s-hero { padding: 90px 0 70px; } .commit-grid { grid-template-columns: 1fr; } .section { padding: 70px 0; } .inc-grid { grid-template-columns: 1fr; } .s-cta-form { flex-direction: column; } } /* Screen-reader-only label utility (visually hidden, still announced). * Used to provide accessible