/* ============================================================
Kindlewood — v4 "Editorial" layer
Loaded AFTER kindlewood.css on every page. Re-skins the shared
components (tokens, type, nav, buttons, cards, page heroes,
footer) and adds the homepage `.x-*` sections.
Remove this to roll back to the v3 look.
============================================================ */
:root {
--ink: #0B1633;
--ink-2: #3B4460;
--ink-3: #6B7288;
--navy: #1E3A8A;
--navy-700: #172E6E;
--navy-900: #0B1633;
--accent: #E07B39;
--accent-strong: #C8621F;
--accent-soft: rgba(224,123,57,.12);
--paper: #F5F1E8;
--paper-2: #EDE6D6;
--bone: #EDE6D6;
--surface: #FFFDF8;
--mist: #DCE4F5;
--line: rgba(11,22,51,.10);
--line-2: rgba(11,22,51,.18);
--shadow-sm: 0 1px 2px rgba(11,22,51,.04), 0 4px 14px rgba(11,22,51,.05);
--shadow-md: 0 2px 4px rgba(11,22,51,.04), 0 14px 34px rgba(11,22,51,.08);
--shadow-lg: 0 4px 8px rgba(11,22,51,.05), 0 30px 70px rgba(11,22,51,.14);
--shadow-navy: 0 14px 34px rgba(11,22,51,.22);
--radius: 16px;
--radius-lg: 22px;
--radius-xl: 32px;
--container: 1240px;
--font-display: 'Instrument Serif', 'Times New Roman', serif;
--font-head: 'Geist', system-ui, -apple-system, sans-serif;
--font-body: 'Geist', system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-io: cubic-bezier(.65,0,.35,1);
}
/* ── Base ──────────────────────────────────────────────────── */
html { font-synthesis: none; }
body {
background: var(--paper);
color: var(--ink-2);
font-size: 16.5px;
letter-spacing: -.005em;
font-feature-settings: "ss01", "cv11";
}
/* film-grain over everything — kills the flat "generated" look */
body::after {
content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: .07; mix-blend-mode: multiply;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; font-weight: 550; }
::selection { background: var(--accent); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--container); padding: 0 clamp(1.15rem, 3vw, 2rem); }
/* serif display headings everywhere (single weight → never faux-bold) */
.h-title, .hero h1, .page-hero h1, .cta-band h2, .x-title, .sc-title, .vt-title {
font-family: var(--font-display) !important; font-weight: 400 !important;
letter-spacing: -.02em; line-height: 1.02;
}
.h-title { font-size: clamp(2.4rem, 4.6vw, 3.7rem); }
.h-title em, .page-hero h1 em, .x-title em { font-style: italic; color: var(--accent); }
.lede { color: var(--ink-2); font-size: 1.1rem; line-height: 1.65; }
/* eyebrows → quiet mono labels (all old colour-pill variants) */
.eyebrow, .eyebrow.pill, .eyebrow.pill.green, .eyebrow.pill.violet, .eyebrow.pill.coral,
.eyebrow.pill.amber, .eyebrow.pill.pink, .page-hero .eyebrow:not(.pill) {
background: none !important; padding: 0 !important; border-radius: 0 !important;
font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3) !important;
gap: .6rem;
}
.eyebrow::before, .eyebrow.pill::before, .page-hero .eyebrow:not(.pill)::before {
display: inline-block !important; content: ""; width: 7px; height: 7px; border-radius: 1px;
background: var(--accent); transform: rotate(45deg);
}
/* section tints: rainbow → two quiet paper tones */
.tint-blue, .tint-mint, .tint-amber { background: var(--paper); }
.tint-lav, .tint-peach { background: var(--bone); }
.edge-top { border-top-color: var(--line); }
.edge-bottom { border-bottom-color: var(--line); }
/* retire the playful decorations site-wide */
.sparkle, .spk-inline, .blob, .play-chip, .page-hero::before, .page-hero::after,
.page-hero-mascot, .hero-glow, .reels-mascot { display: none !important; }
/* ── Buttons ───────────────────────────────────────────────── */
.btn {
font-family: var(--font-head); font-weight: 500; letter-spacing: -.01em;
position: relative; overflow: hidden; isolation: isolate;
transition: transform .5s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .3s;
}
.btn-primary { background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px rgba(11,22,51,.18); }
.btn-primary:hover { background: var(--navy); transform: none; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 16px 34px rgba(30,58,138,.28); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); transform: none; }
.btn-white { color: var(--ink); }
/* shine sweep */
.btn-primary::after, .btn-accent::after, .btn-white::after, .x-btn::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn-primary:hover::after, .btn-accent:hover::after, .btn-white:hover::after, .x-btn:hover::after { transform: translateX(120%); }
.fx-mag { transition: transform .5s var(--ease-out), background .25s, color .25s, box-shadow .3s !important; }
/* ── Navigation: floating glass pill ───────────────────────── */
.navbar {
background: transparent !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none; -webkit-backdrop-filter: none;
padding: 14px clamp(.75rem, 2vw, 1.25rem) 0;
}
.nav-container {
height: 64px; max-width: 1240px; padding: 0 .55rem 0 1.25rem;
background: rgba(255,253,248,.72);
backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
border: 1px solid rgba(11,22,51,.08); border-radius: 999px;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 30px rgba(11,22,51,.06);
transition: box-shadow .3s, background-color .3s;
}
.navbar.scrolled .nav-container {
height: 56px; max-width: 1120px; background: rgba(255,253,248,.86);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 40px rgba(11,22,51,.12);
}
.nav-logo svg { width: 34px; height: 34px; border-radius: 10px; }
.nav-logo-text { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.02em; }
.nav-logo-text em { font-style: italic; color: var(--ink-3); }
.nav-links { position: relative; }
.nav-links > a, .nav-calc-btn {
position: relative; z-index: 1; font-family: var(--font-head); font-size: .9rem; font-weight: 450;
color: var(--ink-2); border-radius: 999px; padding: .5rem .8rem;
}
.nav-links > a:hover, .nav-calc-btn:hover { background: transparent; color: var(--ink); }
.nav-links > a.active { color: var(--ink); font-weight: 550; }
.nav-links > a.active::after {
content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
border-radius: 50%; background: var(--accent);
}
.fx-nav-pill {
position: absolute; left: 0; top: 50%; height: 34px; margin-top: -17px; z-index: 0;
border-radius: 999px; background: rgba(11,22,51,.06); opacity: 0; pointer-events: none;
transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s;
}
.fx-nav-pill.on { opacity: 1; }
.nav-calc-dropdown, .lang-dropdown {
background: rgba(255,253,248,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-color: var(--line); border-radius: 18px; padding: .45rem; box-shadow: var(--shadow-lg);
}
.nav-calc-dropdown a:hover, .lang-dropdown button:hover { background: rgba(11,22,51,.05); color: var(--ink); }
.lang-btn { border-color: transparent; border-radius: 999px; font-family: var(--font-head); }
.lang-btn:hover { border-color: var(--line-2); color: var(--ink); }
.nav-actions .btn-primary { padding: .7rem 1.2rem; font-size: .88rem; box-shadow: none; }
.mobile-menu-btn { border-radius: 999px; border-color: var(--line-2); }
.mobile-menu {
margin: .5rem 0 0; border-radius: 24px; border: 1px solid var(--line);
background: rgba(255,253,248,.97); box-shadow: var(--shadow-lg);
}
.mobile-menu > a, .mobile-submenu-link { font-family: var(--font-head); }
.mobile-menu > a { font-family: var(--font-display); font-size: 1.5rem; padding: .35rem .5rem; letter-spacing: -.01em; }
.fx-progress {
position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none;
background: linear-gradient(90deg, var(--navy), var(--accent));
transform-origin: 0 50%; transform: scaleX(0);
}
/* ── Cards (shared) ────────────────────────────────────────── */
.card, .feature-card, .step, .subject-card, .testi, .stat-card, .reward-card {
background-color: var(--surface); border-color: var(--line); border-radius: var(--radius-lg);
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.card:hover, .feature-card:hover, .step:hover, .subject-card:hover, .testi:hover, .stat-card:hover {
transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2);
}
.pop-top::before { display: none; }
.fx-spot {
background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(224,123,57,.09), transparent 45%);
}
.tag { background: transparent; border-color: var(--line-2); color: var(--ink-2); font-size: .8rem; }
.subject-kicker, .x-cell-k { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; font-size: .7rem; color: var(--ink-3); }
.step-num, .steps .step:nth-child(n) .step-num {
background: transparent !important; color: var(--accent) !important; width: auto; height: auto;
font-family: var(--font-mono); font-weight: 500; font-size: .85rem; letter-spacing: .1em; justify-content: start;
}
.stats { border: 0; background: transparent; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.stat { background: transparent; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-num, .stats.playful .stat:nth-child(n) .stat-num, .stat-card .n, .reward-amount {
font-family: var(--font-display); font-weight: 400; color: var(--ink) !important; letter-spacing: -.02em;
}
.stat-num { font-size: clamp(2.6rem, 4.5vw, 3.6rem); }
.stat-num .suffix { color: var(--accent) !important; opacity: 1 !important; }
.testi .stars, .hero-rating .stars, .proof-stars { color: var(--accent); }
.testi blockquote { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.testi-avatar { background: var(--bone); color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: .75rem; }
.compare-col.us { background: var(--ink); border-color: var(--ink); }
.cta-band {
background: var(--ink); border-radius: var(--radius-xl);
background-image: radial-gradient(60% 90% at 90% 0%, rgba(224,123,57,.28), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(30,58,138,.6), transparent 60%);
}
.cta-band::before { display: none; }
.cta-band h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.feature-band { background: var(--bone); }
/* forms */
input, select, textarea { font-family: var(--font-body) !important; }
.form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="tel"], select, textarea {
border-radius: 12px; border-color: var(--line-2); background-color: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(11,22,51,.07) !important; outline: none; }
/* marquee band used on inner pages */
.marquee-band { background: transparent; }
.subject-pill { background: transparent; border-color: var(--line-2); font-family: var(--font-head); }
.subject-pill::before, .subject-pill:nth-child(n)::before { background: var(--accent) !important; }
/* ── Inner-page hero ───────────────────────────────────────── */
.page-hero {
background: var(--paper); border-bottom: 1px solid var(--line);
padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5rem);
margin-top: -78px; padding-top: calc(78px + clamp(3.5rem, 7vw, 6rem));
}
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .98; margin: 1.1rem auto 1.2rem; max-width: 16ch; }
.page-hero .lede { font-size: 1.12rem; max-width: 54ch; }
/* ── Split-word rise (JS adds .fx-split / .fx-in) ──────────── */
.fx-split .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.fx-split .fx-wi { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 80ms); }
.fx-split.fx-in .fx-wi { transform: none; }
.fx-scrub .fx-w { overflow: visible; }
.fx-scrub .fx-wi { transform: none !important; transition: opacity .15s linear; }
/* stronger reveal */
.js .reveal { transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.js .reveal.visible { filter: none; }
/* ── Footer: dark, with an oversized wordmark ──────────────── */
.site-footer {
position: relative; overflow: hidden; margin-top: 0;
background: var(--ink); color: rgba(255,255,255,.66); border-top: 0;
padding: clamp(4rem, 8vw, 6rem) 0 0;
}
.site-footer::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(50% 60% at 85% 0%, rgba(224,123,57,.16), transparent 70%), radial-gradient(40% 50% at 0% 30%, rgba(30,58,138,.5), transparent 70%);
}
.site-footer > * { position: relative; }
.footer-grid { max-width: var(--container); }
.footer-brand-text { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; color: #fff; letter-spacing: -.02em; }
.footer-brand-text em { font-style: italic; color: rgba(255,255,255,.5); }
.site-footer .footer-desc, .site-footer p, .site-footer p a, .footer-links a, .footer-links li { color: rgba(255,255,255,.62) !important; }
.footer-links a { position: relative; transition: color .2s; }
.footer-links a:hover { color: #fff !important; }
.footer-heading { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .16em; color: rgba(255,255,255,.4); }
.footer-social a { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); border-radius: 999px; }
.footer-social a:hover { border-color: #fff; color: #fff; }
.footer-bottom { border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: .82rem; }
.footer-bottom p { color: rgba(255,255,255,.4) !important; }
.site-footer::after {
content: "Kindlewood"; display: block; position: relative;
font-family: var(--font-display); font-size: clamp(5rem, 22vw, 21rem); line-height: .78; letter-spacing: -.045em;
text-align: center; margin: clamp(2rem, 5vw, 4rem) 0 -.06em; white-space: nowrap;
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 85%); -webkit-background-clip: text; background-clip: text;
}
.wa-float { width: 52px; height: 52px; box-shadow: 0 10px 26px rgba(11,22,51,.22); }
/* ════════════════════════════════════════════════════════════
HOMEPAGE (.x-*)
════════════════════════════════════════════════════════════ */
.x-label {
display: inline-flex; align-items: center; gap: .6rem; margin: 0;
font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.x-label span:not(.x-num) { color: var(--accent); }
.x-label i { font-style: normal; color: var(--ink-3); opacity: .6; }
.x-num { color: var(--accent); }
.x-num::after { content: " —"; color: var(--ink-3); opacity: .6; }
.x-label-light { color: rgba(255,255,255,.6); }
.x-title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); color: var(--ink); margin: 1.1rem 0 0; }
.x-section { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.x-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.x-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.x-head-aside { max-width: 30ch; color: var(--ink-2); }
.x-btn {
position: relative; overflow: hidden; isolation: isolate;
display: inline-flex; align-items: center; gap: .9rem;
padding: .45rem .45rem .45rem 1.5rem; border-radius: 999px;
font-family: var(--font-head); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap;
transition: transform .5s var(--ease-out), background .25s, color .25s, box-shadow .3s;
}
.x-btn-ic {
width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
background: var(--accent); color: #fff;
}
.x-btn-ic svg { transition: transform .5s var(--ease-out); }
.x-btn:hover .x-btn-ic svg { animation: x-arrow .6s var(--ease-out); }
@keyframes x-arrow { 0% { transform: none; } 45% { transform: translateX(160%); } 46% { transform: translateX(-160%); } 100% { transform: none; } }
.x-btn-dark { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 28px rgba(11,22,51,.2); }
.x-btn-dark:hover { background: var(--navy); }
.x-btn-light { background: #fff; color: var(--ink); }
.x-btn-light:hover { background: var(--paper); }
.x-link {
display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 500; color: var(--ink);
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
transition: background-size .5s var(--ease-out);
}
.x-link:hover { background-size: 100% 1px; }
.x-link svg { transition: transform .4s var(--ease-out); }
.x-link:hover svg { transform: translate(3px, 0); }
.x-link-light { color: #fff; }
/* ── Hero ─────────────────────────────────────────────────── */
.x-hero { position: relative; margin-top: -78px; padding: calc(78px + clamp(2.5rem, 6vw, 5rem)) 0 clamp(4rem, 7vw, 6rem); overflow: clip; }
.x-hero::before {
content: ""; position: absolute; width: 60vw; height: 60vw; right: -20vw; top: -25vw; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(220,228,245,.9), transparent 65%);
}
.x-hero-inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.x-hero-title {
font-family: var(--font-display); font-weight: 400; color: var(--ink);
font-size: clamp(3.4rem, 7.2vw, 6.6rem); line-height: .92; letter-spacing: -.035em; margin: 1.4rem 0 1.6rem;
}
.x-hero-title .x-line { display: block; white-space: nowrap; }
.x-hero-title em { display: inline-block; }
.x-hero-title em { font-style: italic; color: var(--accent); padding-right: .06em; }
.x-roller {
display: inline-block; vertical-align: top; height: .98em; overflow: hidden; color: var(--navy);
transition: width .7s var(--ease-out); position: relative;
}
.x-roller-track { display: flex; flex-direction: column; transition: transform .8s var(--ease-io); }
.x-roller-track > span { display: block; height: .98em; line-height: .98; white-space: nowrap; }
.x-hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; max-width: 34rem; color: var(--ink-2); }
.x-hero-sub strong { color: var(--ink); font-weight: 550; }
.x-hero-cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.x-proof { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.x-proof div { margin: 0; }
.x-proof dt { font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.x-proof sup { font-size: .5em; color: var(--accent); vertical-align: .75em; margin-left: .08em; }
.x-proof dd { margin: .45rem 0 0; font-size: .85rem; color: var(--ink-3); }
.x-hero-media { position: relative; }
.x-hero-photo {
margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
box-shadow: var(--shadow-lg); background: #cdbb98;
}
.x-hero-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.x-hero-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border-radius: inherit; pointer-events: none; }
.x-badge { position: absolute; width: clamp(110px, 11vw, 150px); top: -38px; right: -34px; filter: drop-shadow(0 16px 30px rgba(11,22,51,.3)); }
.x-badge text { font-family: var(--font-mono); font-size: 13.2px; letter-spacing: 2.6px; fill: #fff; font-weight: 500; }
.x-badge { animation: x-spin 22s linear infinite; }
.x-badge-mark { animation: x-spin 22s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes x-spin { to { transform: rotate(360deg); } }
.x-note {
position: absolute; left: -14%; bottom: 9%; width: min(330px, 80%);
background: rgba(255,253,248,.82); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.9); border-radius: 20px; padding: 1.05rem 1.25rem 1.1rem;
box-shadow: 0 30px 60px rgba(11,22,51,.2);
}
.x-note-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.x-note-label span { color: var(--accent); }
.x-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.x-note li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 500; color: var(--ink); }
.x-note li.next { color: var(--ink-3); }
.x-note svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #0F9D6E; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.x-note li.next svg { stroke: var(--accent); }
/* load choreography */
.fx .x-load { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d) * 90ms + 200ms); }
.fx-ready .x-load { opacity: 1; transform: none; }
.fx .x-hero-photo { clip-path: inset(12% 10% 12% 10% round 28px); transition: clip-path 1.4s var(--ease-io) .15s; }
.fx-ready .x-hero-photo { clip-path: inset(0 0 0 0 round 28px); }
.fx .x-badge { opacity: 0; transition: opacity .8s .9s; }
.fx-ready .x-badge { opacity: 1; }
.fx .x-note { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .8s var(--ease-out) 1s, transform .8s var(--ease-out) 1s; }
.fx-ready .x-note { opacity: 1; transform: none; }
.fx .x-note li { opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(1.5s + var(--i) * .35s); }
.fx-ready .x-note li { opacity: 1; transform: none; }
.fx .x-note svg { stroke-dashoffset: 24; transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(1.65s + var(--i) * .35s); }
.fx-ready .x-note svg { stroke-dashoffset: 0; }
/* ── Marquee ──────────────────────────────────────────────── */
.x-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; overflow: hidden; background: var(--paper); }
.x-marquee-row { display: flex; width: max-content; transform: skewX(var(--skew, 0deg)); transition: transform .2s linear; }
.x-marquee-track { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; animation: scroll-x 60s linear infinite; }
.x-marquee:hover .x-marquee-track { animation-play-state: paused; }
.x-marquee span { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.4rem); color: var(--ink); white-space: nowrap; letter-spacing: -.02em; line-height: 1.1; }
.x-marquee em { font-style: italic; color: var(--ink-3); }
.x-marquee b { color: var(--accent); font-weight: 400; font-size: 1.4rem; }
/* ── 01 Statement ─────────────────────────────────────────── */
.x-statement { padding-bottom: clamp(3rem, 6vw, 5rem); }
.x-scrub {
font-family: var(--font-display); font-weight: 400; color: var(--ink);
font-size: clamp(2.1rem, 4.6vw, 4.1rem); line-height: 1.08; letter-spacing: -.022em; margin-top: 1.6rem; max-width: 22ch;
}
.x-scrub em { font-style: italic; color: var(--accent); }
.fx .x-scrub .fx-wi { opacity: .16; }
/* ── 02 Bento ─────────────────────────────────────────────── */
.x-bento {
display: grid; gap: 14px;
grid-template-columns: repeat(12, 1fr);
grid-template-areas:
"a a a a a a a b b b b b"
"a a a a a a a c c c c c"
"d d d e e e f f f f f f"; }
.x-a { grid-area: a; min-height: 460px; } .x-b { grid-area: b; } .x-c { grid-area: c; }
.x-d { grid-area: d; } .x-e { grid-area: e; } .x-f { grid-area: f; min-height: 300px; }
.x-cell {
position: relative; overflow: hidden; border-radius: 24px; padding: clamp(1.4rem, 2.4vw, 2rem);
background-color: var(--surface); border: 1px solid var(--line);
display: flex; flex-direction: column; gap: .6rem;
transition: transform .6s var(--ease-out), box-shadow .4s, border-color .4s;
}
.x-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.x-cell h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 550; color: var(--ink); letter-spacing: -.02em; }
.x-cell p { font-size: .96rem; line-height: 1.6; }
.x-big { font-family: var(--font-display); font-size: clamp(4.5rem, 8vw, 7rem) !important; line-height: .85 !important; color: var(--ink); letter-spacing: -.04em; margin: auto 0 .4rem; }
.x-big sup { font-size: .4em; color: var(--accent); vertical-align: 1.1em; }
.x-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 1px solid var(--line); margin-bottom: auto; }
.x-d .x-ic, .x-e .x-ic { margin-bottom: 1.2rem; }
.x-cell-photo { padding: 0; border: 0; justify-content: flex-end; color: #fff; }
.x-cell-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.x-cell-photo:hover img { transform: scale(1.05); }
.x-cell-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11,22,51,.82)); }
.x-cell-over { position: relative; z-index: 1; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.x-cell-over .x-cell-k { color: rgba(255,255,255,.7); }
.x-cell-over h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; margin-top: .5rem; max-width: 20ch; }
.x-cell-dark { background-color: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.75); }
.x-cell-dark .x-cell-k { color: rgba(255,255,255,.5); }
.x-cell-dark.fx-spot { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(224,123,57,.2), transparent 45%); }
.x-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); margin: .4rem 0 .6rem; align-self: flex-start; }
.x-switch button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 500 .85rem var(--font-head); color: rgba(255,255,255,.6); padding: .5rem 1rem; border-radius: 999px; transition: color .3s; }
.x-switch button[aria-selected="true"] { color: var(--ink); }
.x-switch-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; transition: transform .5s var(--ease-out); transform: translateX(100%); }
.x-switch[data-state="them"] .x-switch-pill { transform: translateX(0); }
.x-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.x-cmp li { position: relative; display: grid; padding: .75rem 0 .75rem 1.9rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .96rem; }
.x-cmp li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; transition: background .4s; background: #0F9D6E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.x-cmp[data-show="them"] li::before { background: rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat; }
.x-cmp span { grid-area: 1 / 1; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.x-cmp [data-them] { opacity: 0; transform: translateY(8px); color: rgba(255,255,255,.55); }
.x-cmp [data-us] { color: #fff; }
.x-cmp[data-show="them"] [data-them] { opacity: 1; transform: none; }
.x-cmp[data-show="them"] [data-us] { opacity: 0; transform: translateY(-8px); }
/* ── 03 How it works: sticky ──────────────────────────────── */
.x-how { background: var(--bone); }
.x-how-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.x-how-side { position: sticky; top: 130px; display: flex; flex-direction: column; align-items: flex-start; }
.x-how-side .x-btn { margin-top: 2rem; }
.x-how-meter { width: 100%; max-width: 360px; height: 2px; background: var(--line-2); margin-top: 2.2rem; border-radius: 2px; overflow: hidden; }
.x-how-meter span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.x-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.x-step {
display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
padding: clamp(1.8rem, 4vw, 3rem); border-radius: 26px; background: var(--surface); border: 1px solid var(--line);
min-height: 42vh; align-items: start;
opacity: .45; transform: scale(.97); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s;
}
.x-step.is-on { opacity: 1; transform: none; box-shadow: var(--shadow-md); }
.x-step-n { font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5.2rem); line-height: .8; color: var(--accent); letter-spacing: -.04em; }
.x-step h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; color: var(--ink); letter-spacing: -.02em; margin-bottom: .9rem; }
.x-step p { font-size: 1.02rem; max-width: 42ch; }
.x-step-tag { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .7rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
/* ── 04 Subjects: tabs ────────────────────────────────────── */
.x-tabs { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); flex-wrap: nowrap; }
.x-tabs button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 500 .92rem var(--font-head); color: var(--ink-2); padding: .65rem 1.15rem; border-radius: 999px; white-space: nowrap; transition: color .3s; }
.x-tabs button[aria-selected="true"] { color: #fff; }
.x-tabs-pill { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--ink); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
.x-panels { position: relative; }
.x-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: clamp(.8rem, 1.2vw, 1rem); }
.x-panel.is-entering .x-panel-img img { animation: x-zoom 1.1s var(--ease-out) both; }
.x-panel.is-entering .x-panel-copy > * { animation: x-rise .8s var(--ease-out) both; }
.x-panel.is-entering .x-panel-copy > *:nth-child(2) { animation-delay: .06s; }
.x-panel.is-entering .x-panel-copy > *:nth-child(3) { animation-delay: .12s; }
.x-panel.is-entering .x-panel-copy > *:nth-child(4) { animation-delay: .18s; }
.x-panel.is-entering .x-panel-copy > *:nth-child(5) { animation-delay: .24s; }
@keyframes x-zoom { from { transform: scale(1.14); filter: saturate(.6); } to { transform: none; filter: none; } }
@keyframes x-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.x-panel-img { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.6; }
.x-panel-img img { width: 100%; height: 100%; object-fit: cover; }
.x-panel-copy { padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 0; }
.x-panel-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 3.8vw, 3.3rem); line-height: 1; color: var(--ink); letter-spacing: -.025em; margin: .8rem 0 1rem; }
.x-panel-copy > p { font-size: 1.05rem; max-width: 46ch; }
.x-chips { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.x-chips li { font-size: .84rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.x-chips li:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.x-subgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.x-subgroups p { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.x-subgroups .x-chips { margin-top: .6rem; }
.x-panel-copy .x-link { margin-top: 1.8rem; }
.x-footnote { margin-top: 1.5rem; font-size: .92rem; color: var(--ink-3); text-align: center; }
.x-footnote a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
/* ── 05 Testimonials ──────────────────────────────────────── */
.x-voices { background: var(--bone); }
.x-voices-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.x-score { margin-top: 1.6rem; color: var(--ink-3); font-size: .95rem; }
.x-score span { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); }
.x-car-ctrl { display: flex; gap: .6rem; margin-top: 2rem; }
.x-car-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out); }
.x-car-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.x-car-btn:active { transform: scale(.92); }
.x-car { position: relative; display: grid; background: var(--surface); border-radius: 30px; padding: clamp(2rem, 5vw, 3.6rem); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 380px; }
.x-car::before { content: "“"; position: absolute; right: clamp(1.4rem, 3vw, 2.6rem); top: -.1em; font-family: var(--font-display); font-size: 11rem; line-height: 1; color: var(--accent); opacity: .18; pointer-events: none; }
.x-car-bars { display: flex; gap: 6px; margin-bottom: 2rem; }
.x-car-bars span { flex: 1; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; position: relative; }
.x-car-bars span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.x-car-bars span.done::after { transform: scaleX(1); }
.x-car-bars span.run::after { animation: x-bar var(--car-ms, 7000ms) linear forwards; }
.x-car:hover .x-car-bars span.run::after { animation-play-state: paused; }
@keyframes x-bar { to { transform: scaleX(1); } }
.x-quote { grid-area: 2 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s; }
.x-quote.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.x-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.18; letter-spacing: -.015em; color: var(--ink); }
.x-quote figcaption { display: flex; align-items: center; gap: .9rem; margin-top: 2rem; font-size: .9rem; color: var(--ink-3); }
.x-quote figcaption strong { display: block; color: var(--ink); font-weight: 550; font-size: 1rem; }
.x-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; flex-shrink: 0; }
/* ── 06 Reels (dark) ──────────────────────────────────────── */
.x-reels { background: var(--ink); color: rgba(255,255,255,.7); overflow: hidden; }
.x-reels .wrap { position: relative; }
.x-reels .x-title { color: #fff; }
.x-reels .x-label { color: rgba(255,255,255,.5); }
.x-reels .x-head-aside { color: rgba(255,255,255,.65); }
.x-reels-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1200px; }
.x-reel { border-radius: 22px !important; box-shadow: 0 30px 60px rgba(0,0,0,.35) !important; transition: transform .6s var(--ease-out), box-shadow .4s !important; transform-style: preserve-3d; }
.x-reels .reel-tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(11,22,51,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.x-reels .x-link { margin-top: 2.5rem; }
/* ── Referral ─────────────────────────────────────────────── */
.x-refer { padding: clamp(4rem, 8vw, 7rem) 0; }
.x-refer-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 4rem); border-radius: 32px; background-color: var(--surface); border: 1px solid var(--line); }
.x-refer-copy .x-title { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.x-refer-copy > p:not(.x-label) { margin: 1.1rem 0 2rem; font-size: 1.05rem; max-width: 42ch; }
.x-refer-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.x-refer-steps li { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); }
.x-refer-steps li:last-child { border-bottom: 1px solid var(--line); }
.x-refer-steps span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }
.x-refer-steps em { font-family: var(--font-display); font-size: 1.35em; color: var(--accent); }
/* ── Final CTA ────────────────────────────────────────────── */
.x-cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(7rem, 14vw, 12rem) 0; text-align: center; }
.x-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; opacity: .9; will-change: transform; }
.x-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,51,.2), rgba(11,22,51,.15) 40%, rgba(11,22,51,.85)); }
.x-cta-inner { position: relative; z-index: 1; }
.x-cta h2 { font-family: var(--font-display); font-weight: 400; color: #fff; font-size: clamp(3rem, 7.5vw, 6.8rem); line-height: .95; letter-spacing: -.035em; max-width: 13ch; margin: 1.3rem auto 1.4rem; }
.x-cta h2 em { font-style: italic; color: #F4A46E; }
.x-cta p:not(.x-label) { color: rgba(255,255,255,.8); max-width: 44ch; margin: 0 auto; font-size: 1.1rem; }
.x-cta .x-hero-cta { justify-content: center; }
/* the section already sits on dark, so the footer continues straight on */
.x-cta + * {}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1080px) {
.x-bento { grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a a a a a" "b b b c c c" "d d d c c c" "e e e f f f"; }
.x-note { left: -4%; }
}
@media (max-width: 980px) {
.x-hero-inner { grid-template-columns: 1fr; }
.x-hero-media { max-width: 560px; margin: 1rem auto 0; width: 100%; }
.x-how-inner, .x-voices-inner, .x-refer-card { grid-template-columns: 1fr; }
.x-how-side { position: static; }
.x-step { min-height: 0; opacity: 1; transform: none; }
.x-panel { grid-template-columns: 1fr; }
.x-panel-img { aspect-ratio: 16 / 10; }
.x-panel-copy { padding: .5rem 1rem 1.5rem; }
.x-reels-row { grid-template-columns: repeat(4, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin: 0 calc(-1 * clamp(1.15rem, 3vw, 2rem)); padding-left: clamp(1.15rem, 3vw, 2rem); padding-right: clamp(1.15rem, 3vw, 2rem); scrollbar-width: none; }
.x-reels-row::-webkit-scrollbar { display: none; }
.x-reel { scroll-snap-align: center; }
.x-reels-row { grid-template-columns: repeat(4, minmax(220px, 42%)); }
}
@media (max-width: 820px) {
.navbar { padding-top: 10px; }
.nav-container { height: 58px; }
.x-tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.x-head-row { align-items: flex-start; }
}
@media (max-width: 640px) {
.x-hero-title { font-size: clamp(3rem, 14vw, 4.2rem); }
.x-proof { gap: 1.2rem; justify-content: space-between; }
.x-proof dd { font-size: .74rem; }
.x-badge { right: -8px; top: -30px; width: 96px; }
.x-note { left: 12px; right: 12px; width: auto; bottom: 14px; }
.x-bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
.x-a { min-height: 380px; }
.x-subgroups { grid-template-columns: 1fr; }
.x-tabs button { padding: .6rem .85rem; font-size: .86rem; }
.x-reels-row { grid-template-columns: repeat(4, 70%); }
.stat { border-right: 0; border-bottom: 1px solid var(--line); }
.site-footer::after { font-size: 26vw; }
}
@media (prefers-reduced-motion: reduce) {
.x-badge, .x-badge-mark, .x-marquee-track { animation: none !important; }
.fx .x-load, .fx .x-note, .fx .x-note li, .fx .x-hero-photo { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.js .reveal { filter: none; }
}
/* ── fixes ── */
.x-panel[hidden] { display: none !important; }
.x-cell-k { text-transform: uppercase; }
.x-f img { object-position: 70% 70%; filter: saturate(.85) brightness(.9); }
.x-f::after { background: linear-gradient(100deg, rgba(11,22,51,.92) 0%, rgba(11,22,51,.7) 45%, rgba(11,22,51,.15) 100%); }
.x-f .x-cell-over { max-width: 70%; }
/* ── Retire emoji + rainbow icon tiles (all pages) ─────────── */
.icon-card { background-color: var(--surface); border-color: var(--line); border-radius: var(--radius-lg); counter-increment: kw-card; position: relative; }
*:has(> .icon-card) { counter-reset: kw-card; }
.icon-card .emoji { display: none; }
.icon-card::before {
content: counter(kw-card, decimal-leading-zero); display: block; margin-bottom: 1.4rem;
font-family: var(--font-display); font-size: 2.6rem; line-height: .8; color: var(--accent); letter-spacing: -.03em;
}
.icon-card h3, .feature-card h3 { font-weight: 550; letter-spacing: -.02em; }
.feature-icon, .x-ic, .hp-ic, [class*="ic-"]:is(.feature-icon, .hp-ic, .dot, .ic) {
background: var(--paper) !important; border: 1px solid var(--line); color: var(--ink) !important;
}
.feature-icon svg, .hp-ic svg { stroke: var(--ink) !important; }
.ic-green, .ic-blue, .ic-violet, .ic-coral, .ic-amber, .ic-pink, .ic-teal { background: var(--paper) !important; color: var(--ink) !important; }
/* ── Pricing / packages / FAQ polish (all pages) ───────────── */
.price-toggle { background: var(--surface); }
.price-toggle-btn.active { background: var(--ink); color: #fff; box-shadow: none; }
.price-card { background-color: var(--surface); border-color: var(--line); border-radius: 26px; padding: 2.1rem; }
.price-card.featured { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.price-card.featured::before { background: var(--accent); font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .64rem; padding: .35rem .8rem; }
.price-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: -.02em; }
.price-amount, .package-hours, .price-row .v { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: -.03em; }
.price-amount { font-size: 3.6rem; line-height: 1; }
.package-hours { font-size: 3rem; }
.price-row .v { font-size: 1.6rem; }
.price-range { color: var(--accent-strong); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
.checklist .check { color: var(--accent); }
.price-table { border-radius: 22px; }
.price-table-head { background: var(--ink); font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }
.package-card { background-color: var(--surface); border-radius: 22px; }
.package-card.featured { border-color: var(--ink); }
.package-badge { background: var(--ink); font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
.faq-item:first-child { border-top: 1px solid var(--line-2); }
.faq-q { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(1.25rem, 2vw, 1.55rem) !important; color: var(--ink); padding: 1.4rem 0 !important; letter-spacing: -.01em; }
.faq-a { padding-left: 0 !important; padding-right: 0 !important; font-size: 1rem; max-width: 70ch; }
.faq-chevron { width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .5s var(--ease-out), background .3s, color .3s; }
.faq-item.open .faq-chevron { background: var(--ink); color: #fff; border-color: var(--ink); }
.notice-strip { background: var(--bone); border-color: var(--line); }
/* ── Inner-page photo band ────────────────────────────────── */
.x-band { position: relative; padding: 0 0 clamp(1rem, 3vw, 2rem); background: linear-gradient(180deg, var(--paper) 50%, transparent 50%); }
.page-hero + .x-band { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); }
.page-hero:has(+ .x-band) { padding-bottom: clamp(5rem, 9vw, 7.5rem); border-bottom: 0; }
.x-band-fig { position: relative; margin: 0; height: clamp(260px, 42vw, 560px); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bone); }
.x-band-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.x-band-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,22,51,.6)); pointer-events: none; }
.x-band-fig figcaption { position: absolute; z-index: 1; left: clamp(1.2rem, 3vw, 2.2rem); bottom: clamp(1.1rem, 2.6vw, 1.9rem); color: #fff; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.x-band-fig figcaption::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.fx .x-band-fig { clip-path: inset(6% 4% 6% 4% round 28px); transition: clip-path 1.3s var(--ease-io) .2s; }
.fx-ready .x-band-fig { clip-path: inset(0 round 28px); }
@media (max-width: 640px) {
.x-hero .x-label { font-size: .6rem; letter-spacing: .1em; white-space: nowrap; gap: .4rem; }
.x-hero-cta { gap: 1.1rem; }
.x-step { padding: 1.5rem; gap: 1rem; }
.x-step-n { font-size: 2.6rem; }
.x-car { min-height: 0; padding: 1.6rem; }
.x-car::before { font-size: 7rem; }
}
@media (max-width: 1200px) and (min-width: 821px) {
.nav-links > a, .nav-calc-btn { padding: .45rem .55rem; font-size: .85rem; }
#lang-label { display: none; }
.nav-logo-text em { display: none; }
.nav-actions .btn-primary { padding: .65rem 1rem; font-size: .84rem; }
}
/* keep nav icons from being flex-squeezed when the pill shrinks on scroll */
.nav-container svg { flex-shrink: 0; }
.nav-calc-btn .chevron, .lang-btn .chevron { min-width: 14px; }
.lang-btn > svg:first-child { min-width: 16px; }
.navbar.scrolled .nav-container { max-width: 1180px; }
@media (max-width: 640px) { .x-badge { right: auto; left: -8px; top: -30px; } }
/* ════════════════════════════════════════════════════════════
v4.1 — READABILITY PASS + SITE-WIDE COMPONENTS
════════════════════════════════════════════════════════════ */
/* ── Readability: stronger contrast, larger small text ─────── */
:root { --ink-2: #333C57; --ink-3: #565E75; }
body { font-size: 17px; line-height: 1.7; }
.lede { font-size: 1.15rem; line-height: 1.65; }
.x-label, .eyebrow, .eyebrow.pill, .eyebrow.pill.green, .eyebrow.pill.violet, .eyebrow.pill.coral,
.eyebrow.pill.amber, .eyebrow.pill.pink, .page-hero .eyebrow:not(.pill) {
font-size: .78rem; letter-spacing: .12em; color: var(--ink-2) !important;
}
.x-cell-k, .subject-kicker, .x-step-tag, .x-subgroups p, .x-note-label, .price-range, .footer-heading { font-size: .76rem; letter-spacing: .1em; }
.x-cell p, .x-panel-copy > p, .x-step p, .card p, .feature-card p, .icon-card p, .vt-card-p, .note-card .desc, .step p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.x-proof dd { font-size: .9rem; color: var(--ink-2); }
.x-step { opacity: .62; }
.x-step.is-on { opacity: 1; }
.fx .x-scrub .fx-wi { opacity: .3; }
.x-reels .x-head-aside, .x-cta p:not(.x-label) { color: rgba(255,255,255,.86); }
.site-footer .footer-desc, .site-footer p, .site-footer p a, .footer-links a, .footer-links li { color: rgba(255,255,255,.74) !important; }
.checklist li { font-size: .98rem; color: var(--ink-2); }
/* keep the split-word rise quick so headings are never waiting to be read */
.fx-split .fx-wi { transition-duration: .8s; transition-delay: calc(var(--i) * 35ms + 40ms); }
/* ── Numbered labels (JS adds .x-num to each section eyebrow) ── */
.eyebrow .x-num { color: var(--accent); margin-right: .1rem; }
.eyebrow::before, .eyebrow.pill::before { display: none !important; }
.eyebrow:not(.fx-numbered)::before { display: inline-block !important; }
.cta-band .eyebrow { color: rgba(255,255,255,.75) !important; }
/* ── Inner-page hero: editorial split (title left, intro right) ── */
@media (min-width: 900px) {
.page-hero .wrap {
display: grid; grid-template-columns: 1.2fr .8fr; column-gap: clamp(2rem, 5vw, 5rem);
align-items: end; text-align: left;
}
.page-hero .wrap > .eyebrow { grid-column: 1 / -1; justify-self: start; }
.page-hero .wrap > h1 { grid-column: 1; grid-row: 2; margin: 1.1rem 0 0; max-width: 14ch; }
.page-hero .wrap > .fx-hero-aside { grid-column: 2; grid-row: 2; padding-bottom: .6rem; }
.page-hero .lede, .page-hero .lede.center { margin: 0 !important; max-width: 40ch; text-align: left; }
.page-hero .hero-cta { justify-content: flex-start !important; margin-top: 1.5rem !important; }
}
.page-hero { text-align: left; }
.page-hero h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: .94; letter-spacing: -.035em; }
.page-hero .eyebrow.center-line { justify-content: flex-start; }
@media (max-width: 899px) {
.page-hero .wrap { text-align: left; }
.page-hero h1 { margin-left: 0; }
.page-hero .lede, .page-hero .lede.center { margin-left: 0 !important; text-align: left; }
.page-hero .hero-cta { justify-content: flex-start !important; }
}
/* ── Section headers: left-aligned, editorial ─────────────── */
main .section .wrap > .center, main .section-tight .wrap > .center { text-align: left; }
main .section .center-line { justify-content: flex-start; }
main .section .wrap > .h-title, main .section .wrap > .center > .h-title { max-width: 20ch; }
main .section .lede.center, main .section .center .lede { margin-left: 0 !important; margin-right: auto; }
.h-title { font-size: clamp(2.5rem, 4.8vw, 3.9rem); margin: 1rem 0 1rem; }
main .section p.center { text-align: left; }
.sc-cta { text-align: left; }
.sc-cta-btns { justify-content: flex-start; }
/* long-form article pages keep a comfortable reading measure */
main .section .wrap > p:not([class]) { max-width: 68ch; font-size: 1.06rem; }
/* ── Staggered card entrance ──────────────────────────────── */
.fx-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--si, 0) * 90ms); }
.fx-stagger.fx-stagger-in > * { opacity: 1; transform: none; }
/* ── Cards: shared hover + link-card arrow ────────────────── */
.card { padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: 22px; }
.card-pop::after { background: var(--accent) !important; height: 2px !important; }
.vt-card-h { font-family: var(--font-head); font-weight: 550; letter-spacing: -.02em; font-size: 1.18rem; color: var(--ink); }
.vt-ic { background: var(--paper) !important; border: 1px solid var(--line); color: var(--ink) !important; border-radius: 14px; }
.vt-card-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-family: var(--font-head); font-weight: 550; color: var(--ink); }
.vt-link-card { transition: transform .5s var(--ease-out), box-shadow .4s, border-color .4s, background-color .4s; }
.vt-link-card:hover { background-color: var(--ink) !important; border-color: var(--ink); }
.vt-link-card:hover .vt-card-h, .vt-link-card:hover .vt-card-go { color: #fff; }
.vt-link-card:hover .vt-card-p { color: rgba(255,255,255,.78); }
.feature-card { padding: 1.8rem; gap: 1.3rem; }
.feature-icon { border-radius: 14px; width: 52px; height: 52px; }
/* ── Stat cards: big serif numbers ────────────────────────── */
.stat-card { text-align: left; padding: 1.8rem 1.6rem; }
.stat-card .n { font-size: clamp(3rem, 5vw, 4.2rem); line-height: .9; font-variant-numeric: tabular-nums; }
.stat-card .n .s { color: var(--accent); font-size: .5em; vertical-align: .7em; }
.stat-card .l { font-size: .95rem; color: var(--ink-2); margin-top: .7rem; }
/* ── Step lists → scroll-lit timelines ────────────────────── */
.fx-timeline { position: relative; }
.sc-steps.fx-timeline { padding-left: 0; margin: 2rem 0; display: grid; gap: .8rem; }
.sc-steps.fx-timeline::before, .sc-steps.fx-timeline::after {
content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px;
}
.sc-steps.fx-timeline::before { background: var(--line-2); }
.sc-steps.fx-timeline::after { background: var(--accent); transform-origin: 0 0; transform: scaleY(var(--tp, 0)); transition: transform .15s linear; }
.sc-steps.fx-timeline li {
position: relative; z-index: 1; display: flex; gap: 1.4rem; align-items: flex-start;
padding: 1.35rem 1.5rem 1.35rem 0; border: 0 !important; font-size: 1.04rem; line-height: 1.65; color: var(--ink-2);
opacity: .55; transition: opacity .5s var(--ease-out);
}
.sc-steps.fx-timeline li.is-on { opacity: 1; }
.sc-steps.fx-timeline li strong { color: var(--ink); font-weight: 600; }
.sc-steps .sc-step-n {
width: 56px !important; height: 56px !important; flex: 0 0 56px; border-radius: 50% !important;
background: var(--paper) !important; border: 2px solid var(--line-2); color: var(--ink-3) !important;
font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 1.7rem !important;
display: grid; place-items: center; transition: background .5s, color .5s, border-color .5s, transform .5s var(--ease-out);
}
.sc-steps li.is-on .sc-step-n { background: var(--ink) !important; color: #fff !important; border-color: var(--ink); transform: scale(1.04); }
.tint-lav .sc-steps .sc-step-n, .tint-peach .sc-steps .sc-step-n { background: var(--bone) !important; }
.tint-lav .sc-steps li.is-on .sc-step-n, .tint-peach .sc-steps li.is-on .sc-step-n { background: var(--ink) !important; }
/* .steps (card version) → big numerals + connecting line */
.steps.fx-timeline { gap: 1rem; }
.steps.fx-timeline .step { padding: 2rem; opacity: .6; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s; }
.steps.fx-timeline .step.is-on { opacity: 1; box-shadow: var(--shadow-md); }
.steps .step-num { font-family: var(--font-display) !important; font-size: 3.4rem !important; line-height: .8; letter-spacing: -.03em; margin-bottom: 1.4rem; }
.steps .step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.02em; margin-bottom: .7rem; }
/* ── FAQ: two-column editorial layout (JS builds .fx-faq) ─── */
.fx-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fx-faq-head { position: sticky; top: 120px; }
.fx-faq-head > .center { text-align: left; }
.fx-faq-head .h-title { max-width: 12ch; }
.fx-faq-more { margin-top: 1.4rem; color: var(--ink-2); font-size: 1rem; max-width: 30ch; }
.fx-faq-more a { color: var(--ink); font-weight: 550; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.fx-faq-body > * { margin-top: 0 !important; max-width: none !important; }
.faq-q { font-family: var(--font-head) !important; font-weight: 550 !important; font-size: clamp(1.05rem, 1.5vw, 1.18rem) !important; letter-spacing: -.01em; line-height: 1.4; }
.faq-a { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.faq-item.open .faq-a { padding-bottom: 1.5rem !important; }
@media (max-width: 900px) { .fx-faq { grid-template-columns: 1fr; gap: 1.5rem; } .fx-faq-head { position: static; } }
/* ── Closing CTA band → full-bleed skyline, like the homepage ── */
.cta-band {
position: relative; overflow: hidden; isolation: isolate; text-align: left;
padding: clamp(4rem, 9vw, 7.5rem) clamp(1.5rem, 6vw, 5rem) !important; border-radius: 32px;
background: var(--ink) url("images/photos/skyline.jpg") center 72% / cover no-repeat !important;
}
.cta-band h2 { font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important; line-height: .98; max-width: 14ch; margin-bottom: 1.2rem; text-align: left; }
.cta-band p { margin: 0 0 2rem !important; max-width: 46ch; text-align: left; color: rgba(255,255,255,.86) !important; }
.cta-band .hero-cta { justify-content: flex-start !important; }
.cta-band .btn-white { background: #fff; color: var(--ink); }
.cta-band .btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.1) !important; }
.cta-band .eyebrow { justify-content: flex-start; }
/* ── Data tables (calculators, scaling, aggregate) ─────────── */
.sc-table { border-radius: 18px; overflow: hidden; font-size: .98rem; }
.sc-table thead th { background: var(--ink) !important; font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; padding-top: 1rem; padding-bottom: 1rem; }
.sc-table tbody tr { transition: background .2s; }
.sc-table tbody tr:hover { background: rgba(224,123,57,.07) !important; }
.sc-search input { border-radius: 999px !important; border-color: var(--line-2) !important; background: var(--surface) !important; padding-top: .85rem !important; padding-bottom: .85rem !important; }
.sc-note { border-radius: 16px; }
/* ── Notes shop cards ─────────────────────────────────────── */
.note-card { border-radius: 26px; padding: 1.6rem; background-color: var(--surface); }
.note-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.05; }
.note-price { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: var(--ink); letter-spacing: -.02em; }
.note-badge { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; }
/* ── Calculator result panels ─────────────────────────────── */
.atar-result, .score-result, [class*="result-card"] { border-radius: 26px !important; }
/* ── Testimonial quote card (single) for service pages ────── */
.x-quote-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; padding: clamp(2rem, 4vw, 3.2rem); border-radius: 30px; background-color: var(--surface); border: 1px solid var(--line); }
.x-quote-card .x-qm { font-family: var(--font-display); font-size: 7rem; line-height: .7; color: var(--accent); }
.x-quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.x-quote-card figcaption { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; color: var(--ink-2); font-size: .95rem; }
.x-quote-card figcaption strong { display: block; color: var(--ink); }
/* inner-page testimonial section reuses the homepage carousel */
.x-voices.x-inner { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
@media (max-width: 640px) { .x-quote-card { grid-template-columns: 1fr; } .x-quote-card .x-qm { font-size: 4.5rem; } }
main .section .wrap > [class*="grid-"][style*="auto"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.step .step-num { font-family: var(--font-display) !important; font-size: 2.8rem !important; line-height: .8; letter-spacing: -.03em; margin-bottom: 1.1rem; }
.x-statement .x-scrub { max-width: 24ch; }
@media (max-width: 560px) {
.footer-grid > div:first-child { grid-column: 1 / -1; }
.site-footer .nav-logo { flex-wrap: nowrap; }
.grid-4 > .card, .grid-4 > .icon-card { padding: 1.15rem; }
.grid-4 .vt-card-h { font-size: 1.02rem; }
.grid-4 .vt-card-p, .grid-4 .icon-card p { font-size: .94rem; }
.page-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
}
@media (max-width: 400px) { .grid-4 { grid-template-columns: 1fr !important; } }
/* ════════════════════════════════════════════════════════════
v4.2 — MORE MOTION FOR EVERY PAGE
════════════════════════════════════════════════════════════ */
/* ── Photo band stage: image + spinning badge + floating facts card ── */
.x-band-stage { position: relative; }
.x-band-fig img { animation: x-kb 22s ease-in-out infinite alternate; }
@keyframes x-kb { from { scale: 1; } to { scale: 1.07; } }
.x-band-stage .x-badge { top: -34px; right: -24px; width: clamp(104px, 10vw, 140px); z-index: 2; }
.x-bnote {
position: absolute; z-index: 2; right: clamp(1rem, 4vw, 3rem); bottom: -2.4rem; width: min(340px, 80%);
background: rgba(255,253,248,.88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,.9); border-radius: 20px; padding: 1.1rem 1.3rem 1.15rem;
box-shadow: 0 30px 60px rgba(11,22,51,.2);
}
.x-bnote p { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .7rem; }
.x-bnote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.x-bnote li { display: flex; align-items: center; gap: .6rem; font-size: .97rem; font-weight: 500; color: var(--ink); line-height: 1.35; }
.x-bnote li.next { color: var(--ink-2); }
.x-bnote svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #0F9D6E; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
.x-bnote li.next svg { stroke: var(--accent); }
.x-band { padding-bottom: clamp(3rem, 5vw, 4rem); }
/* choreography — plays when the band scrolls into view */
.fx .x-band-stage .x-badge { opacity: 0; transform: scale(.6) rotate(-40deg); transition: opacity .8s .4s, transform 1.2s var(--ease-out) .4s; animation: none; }
.fx .x-band-stage.is-in .x-badge { opacity: 1; transform: none; animation: x-spin 22s linear 1.6s infinite; }
.fx .x-bnote { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .8s var(--ease-out) .7s, transform .8s var(--ease-out) .7s; }
.fx .x-band-stage.is-in .x-bnote { opacity: 1; transform: none; }
.fx .x-bnote li { opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(1.1s + var(--i) * .3s); }
.fx .x-band-stage.is-in .x-bnote li { opacity: 1; transform: none; }
.fx .x-bnote svg { stroke-dashoffset: 24; transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(1.25s + var(--i) * .3s); }
.fx .x-band-stage.is-in .x-bnote svg { stroke-dashoffset: 0; }
.fx .x-band-fig { clip-path: inset(6% 4% 6% 4% round 28px); transition: clip-path 1.3s var(--ease-io) .1s; }
.fx .x-band-stage.is-in .x-band-fig { clip-path: inset(0 round 28px); }
.fx-ready .x-band-fig { clip-path: inset(6% 4% 6% 4% round 28px); }
.fx-ready .x-band-stage.is-in .x-band-fig { clip-path: inset(0 round 28px); }
@media (max-width: 640px) {
.x-bnote { left: 12px; right: 12px; width: auto; bottom: -3rem; }
.x-band-stage .x-badge { right: -6px; top: -26px; width: 88px; }
.x-band { padding-bottom: 4rem; }
}
/* ── Hero proof counters on service pages ─────────────────── */
.fx-hero-aside .x-proof { margin-top: 1.8rem; padding-top: 1.2rem; gap: clamp(1.2rem, 3vw, 2.2rem); }
.fx-hero-aside .x-proof dt { font-size: clamp(2rem, 3vw, 2.6rem); }
/* ── Section headings: last word in accent italic (JS adds em.fx-accent) ── */
.h-title em.fx-accent, .cta-band h2 em.fx-accent { font-style: italic; color: var(--accent); padding-right: .04em; }
.cta-band h2 em.fx-accent { color: #F4A46E; }
/* ── Hairline that draws in above untinted sections ───────── */
main > .section:not(.tint):not(.edge-top):not(.x-section) { position: relative; }
main > .section:not(.tint):not(.edge-top):not(.x-section)::before {
content: ""; position: absolute; top: 0; height: 1px; background: var(--line-2);
left: max(1.15rem, calc((100% - 1240px) / 2 + 2rem)); right: max(1.15rem, calc((100% - 1240px) / 2 + 2rem));
transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-io);
}
main > .section.is-in::before { transform: scaleX(1) !important; }
.fx-reduce main > .section::before { transform: none !important; }
/* ── Featured cards: slowly rotating gradient border ──────── */
@property --kw-ang { syntax: ''; initial-value: 0deg; inherits: false; }
.price-card.featured, .note-card.featured, .package-card.featured {
border: 2px solid transparent !important;
background: linear-gradient(var(--surface), var(--surface)) padding-box,
conic-gradient(from var(--kw-ang), var(--accent), var(--navy) 30%, var(--ink) 55%, var(--accent) 80%, var(--accent)) border-box !important;
animation: kw-ang 7s linear infinite;
}
@keyframes kw-ang { to { --kw-ang: 360deg; } }
/* ── Table rows cascade in ────────────────────────────────── */
.fx-rows tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--ri, 0) * 28ms); }
.fx-rows.fx-rows-in tbody tr { opacity: 1; transform: none; }
/* ── Notes covers tilt; link cards lift their arrow ───────── */
.note-media { transition: transform .6s var(--ease-out); transform-style: preserve-3d; }
.vt-card-go { transition: gap .4s var(--ease-out); }
.vt-link-card:hover .vt-card-go { gap: .9rem; }
/* ── Marquee variants (inner pages) ───────────────────────── */
.x-marquee.x-marquee-sm span { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.x-marquee.x-marquee-sm { padding: 1.1rem 0; }
.x-marquee .x-up { color: #0F9D6E; font-family: var(--font-mono); font-size: .45em; letter-spacing: .02em; vertical-align: .55em; margin-left: .3em; font-style: normal; }
.x-marquee .x-down { color: #B4442A; font-family: var(--font-mono); font-size: .45em; vertical-align: .55em; margin-left: .3em; font-style: normal; }
.x-marquee.x-rev .x-marquee-track { animation-direction: reverse; }
/* ── Per-page CTA photo ───────────────────────────────────── */
.cta-band { background-image: var(--cta-img, url("images/photos/skyline.jpg")) !important; background-color: var(--ink) !important; background-position: center 60% !important; background-size: cover !important; }
.cta-band { background-repeat: no-repeat !important; }
/* ════════════════════════════════════════════════════════════
v4.3 — FEWER PHOTOS, MORE DESIGN
════════════════════════════════════════════════════════════ */
/* ── Designed panel (replaces photo bands on most inner pages) ── */
.x-fxpanel {
position: relative; overflow: hidden; isolation: isolate;
min-height: clamp(240px, 28vw, 360px); border-radius: 28px;
background-color: var(--ink); color: #fff;
display: flex; align-items: center;
padding: clamp(2rem, 5vw, 4rem);
box-shadow: var(--shadow-lg);
}
@keyframes kw-drift-a { to { transform: translate(18%, 12%) scale(1.15); } }
@keyframes kw-drift-b { to { transform: translate(-22%, -14%) scale(.9); } }
@keyframes kw-drift-c { to { transform: translate(-10%, 25%) scale(1.2); } }
.x-fxpanel.fx-spot { background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(255,255,255,.08), transparent 45%); }
.x-fx-key { position: relative; max-width: 30rem; }
.x-fx-num { font-family: var(--font-display); font-size: clamp(5rem, 13vw, 10.5rem); line-height: .82; letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.x-fx-num em { font-style: italic; color: #F4A46E; font-size: .45em; letter-spacing: -.02em; margin-left: .06em; }
.x-fx-label { margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.5; color: rgba(255,255,255,.82); max-width: 32ch; }
/* panel reveal: rises and un-blurs instead of the photo clip-path */
.fx .x-band-fx .x-fxpanel { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity 1s var(--ease-out) .1s, transform 1.2s var(--ease-out) .1s; }
.fx .x-band-fx .x-band-stage.is-in .x-fxpanel { opacity: 1; transform: none; }
@media (max-width: 640px) { .x-fxpanel { min-height: 300px; align-items: flex-start; padding-bottom: 7rem; } }
@media (prefers-reduced-motion: reduce) { }
/* ── Closing CTA: animated glow instead of a photo (homepage keeps its skyline) ── */
.cta-band { background-image: var(--cta-img, none) !important; }
.cta-band::before {
content: "" !important; display: block !important; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
background:
radial-gradient(30% 40% at 18% 28%, rgba(37,70,170,.95), transparent 70%),
radial-gradient(28% 38% at 82% 72%, rgba(224,123,57,.5), transparent 70%),
radial-gradient(25% 35% at 64% 18%, rgba(120,150,230,.35), transparent 70%);
filter: blur(30px); animation: kw-mesh 18s ease-in-out infinite alternate;
}
@keyframes kw-mesh { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(5%,-4%) rotate(10deg); } 100% { transform: translate(-4%,5%) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .cta-band::before { animation: none !important; } }
/* ── Homepage bento: animated "this week's plan" card (replaces the essay photo) ── */
.x-cell-plan { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.x-cell-plan h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.02; letter-spacing: -.02em; margin-top: .5rem; }
.x-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: pl; }
.x-plan li { position: relative; display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; color: var(--ink); font-size: .98rem; }
.x-plan .x-plan-box { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background .4s, border-color .4s; transition-delay: calc(.5s + var(--i) * .45s); }
.x-plan .x-plan-box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s var(--ease-out); transition-delay: calc(.65s + var(--i) * .45s); }
.x-cell-plan.visible .x-plan-box { background: #0F9D6E; border-color: #0F9D6E; }
.x-cell-plan.visible .x-plan-box svg { stroke-dashoffset: 0; }
.x-plan li::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); transition-delay: calc(.5s + var(--i) * .45s); }
.x-cell-plan.visible .x-plan li::after { transform: scaleX(1); }
.x-cell-plan.visible .x-plan li:last-child::after { transform: scaleX(0); }
.x-plan li.now { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224,123,57,.1); }
@media (max-width: 1080px) { .x-cell-plan { grid-template-columns: 1fr; } }
.x-plan li.now .x-plan-box { border-color: var(--accent); background: transparent !important; position: relative; }
.x-plan li.now .x-plan-box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: kw-pulse 1.6s ease-in-out infinite; }
@keyframes kw-pulse { 0%,100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.2); opacity: 1; } }
.cta-band::before {
inset: -10% !important; filter: blur(50px) !important;
background:
radial-gradient(45% 65% at 12% 30%, rgba(46,86,205,1), transparent 70%),
radial-gradient(40% 60% at 88% 78%, rgba(224,123,57,.8), transparent 70%),
radial-gradient(35% 50% at 62% 10%, rgba(120,150,235,.55), transparent 70%),
radial-gradient(30% 45% at 40% 95%, rgba(46,86,205,.6), transparent 70%) !important;
}
.cta-band::before { width: auto !important; height: auto !important; border-radius: 0 !important; top: -10% !important; right: -10% !important; bottom: -10% !important; left: -10% !important; }
@media (max-width: 640px) { .x-band-stage .x-badge { left: auto !important; right: -6px !important; top: -30px !important; } }
/* ── v4.4: calmer statements + no grid lines at the top of pages ── */
.x-scrub { font-size: clamp(1.7rem, 3.1vw, 2.7rem) !important; line-height: 1.22 !important; letter-spacing: -.015em; max-width: 30ch !important; color: var(--ink); }
.x-statement { padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
/* rolling word: room for descenders (g, y, p) */
.x-roller { height: 1.16em !important; margin-bottom: -.18em; }
.x-roller-track > span { height: 1.16em !important; line-height: .98 !important; }
.x-roller { margin-bottom: 0 !important; vertical-align: top; }
.x-hero-title .x-line .fx-w:has(.x-roller) { padding-bottom: .3em; margin-bottom: -.3em; }
/* ════════════════════════════════════════════════════════════
v4.5 — BOLD, STANDARD HEADINGS (no tall serif / italics)
+ photo background on the phone landing screen
════════════════════════════════════════════════════════════ */
:root { --font-display: 'Geist', system-ui, -apple-system, sans-serif; }
/* headings: bold, tight, upright */
.h-title, .hero h1, .page-hero h1, .cta-band h2, .x-title, .x-hero-title, .x-cta h2,
.x-step h3, .x-panel-copy h3, .x-cell-over h3, .x-cell-plan h3, .steps .step h3, .price-card h3, .note-card h3 {
font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.04 !important;
}
/* big numbers */
.stat-num, .stats.playful .stat:nth-child(n) .stat-num, .stat-card .n, .reward-amount, .x-proof dt, .x-big, .x-step-n,
.price-amount, .package-hours, .price-row .v, .note-price, .x-fx-num, .x-score span, .icon-card::before,
.steps .step-num, .step .step-num, .sc-steps .sc-step-n {
font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.045em !important;
}
/* quotes read better in the text face */
.testi blockquote, .x-quote blockquote, .x-quote-card blockquote {
font-family: var(--font-body) !important; font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.4 !important;
}
/* every accent word: keep the orange, drop the italics */
em, .x-hero-title em, .h-title em, .x-title em, .page-hero h1 em, .x-cta h2 em, .fx-accent, .x-fx-num em,
.x-scrub em, .x-refer-steps em, .footer-brand-text em, .nav-logo-text em, .x-marquee em { font-style: normal !important; }
.prose-narrow em, main p em:not(.fx-accent) { font-weight: 600; }
/* sizes retuned for a wider, bolder face */
.x-hero-title { font-size: clamp(2.6rem, 5.6vw, 5.1rem) !important; line-height: 1 !important; letter-spacing: -.045em !important; }
.h-title { font-size: clamp(2rem, 3.6vw, 3.05rem) !important; }
.x-title { font-size: clamp(2.1rem, 3.9vw, 3.3rem) !important; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem) !important; line-height: 1 !important; max-width: 16ch; }
.cta-band h2 { font-size: clamp(2rem, 4.2vw, 3.4rem) !important; }
.x-cta h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem) !important; max-width: 16ch; }
.x-scrub { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important; line-height: 1.3 !important; letter-spacing: -.025em !important; max-width: 34ch !important; }
.x-step h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important; }
.x-panel-copy h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; }
.x-cell-over h3 { font-size: clamp(1.3rem, 2vw, 1.8rem) !important; }
.x-cell-plan h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important; }
.steps .step h3 { font-size: 1.35rem !important; }
.price-card h3 { font-size: 1.5rem !important; }
.note-card h3 { font-size: 1.4rem !important; }
.x-proof dt { font-size: clamp(1.9rem, 2.8vw, 2.4rem) !important; }
.x-big { font-size: clamp(3.6rem, 6vw, 5.4rem) !important; }
.x-step-n { font-size: clamp(2.4rem, 4vw, 3.6rem) !important; }
.price-amount { font-size: 2.8rem !important; }
.package-hours { font-size: 2.4rem !important; }
.note-price { font-size: 1.9rem !important; }
.x-fx-num { font-size: clamp(3.8rem, 9vw, 7.4rem) !important; line-height: .9 !important; }
.x-fx-num em { font-size: .4em; margin-left: .1em; }
.stat-num { font-size: clamp(2.2rem, 3.6vw, 3rem) !important; }
.stat-card .n { font-size: clamp(2.4rem, 4vw, 3.4rem) !important; }
.icon-card::before { font-size: 2rem !important; }
.steps .step-num { font-size: 2.6rem !important; }
.step .step-num { font-size: 2.2rem !important; }
.sc-steps .sc-step-n { font-size: 1.3rem !important; }
.x-score span { font-size: 1.6rem !important; }
.x-quote blockquote { font-size: clamp(1.25rem, 2vw, 1.65rem) !important; }
.x-quote-card blockquote { font-size: clamp(1.2rem, 1.9vw, 1.55rem) !important; }
.testi blockquote { font-size: 1.08rem !important; }
.x-car::before, .x-quote-card .x-qm { font-family: var(--font-display) !important; font-weight: 800; }
.x-car::before { font-size: 8rem; top: .05em; }
.x-quote-card .x-qm { font-size: 4.5rem; line-height: .8; }
.x-marquee span { font-family: var(--font-display) !important; font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -.035em; }
.x-marquee.x-marquee-sm span { font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.x-marquee em { color: var(--ink-3); font-weight: 500; }
.x-refer-steps em { font-family: var(--font-body); font-size: 1em; font-weight: 700; }
/* wordmark: bold name, lighter "Tutoring" */
.nav-logo-text, .footer-brand-text { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
.nav-logo-text { font-size: 1.12rem !important; }
.nav-logo-text em, .footer-brand-text em { font-weight: 400; }
.footer-brand-text { font-size: 1.3rem !important; }
.site-footer::after { font-family: var(--font-display); font-weight: 800; letter-spacing: -.06em; font-size: clamp(4rem, 17vw, 16rem); }
.mobile-menu > a { font-family: var(--font-display) !important; font-weight: 600; font-size: 1.2rem !important; letter-spacing: -.02em; }
@media (max-width: 640px) {
.x-hero-title { font-size: clamp(2.3rem, 10.5vw, 3.1rem) !important; }
.page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem) !important; }
.x-fx-num { font-size: clamp(3.4rem, 17vw, 4.6rem) !important; }
}
/* ── Phone/tablet landing: the hero photo becomes the background ── */
@media (max-width: 980px) {
.x-hero {
min-height: 100svh; display: flex; align-items: center;
background:
linear-gradient(180deg, rgba(11,22,51,.55) 0%, rgba(11,22,51,.66) 40%, rgba(11,22,51,.9) 100%),
url("images/photos/hero.jpg") center 35% / cover no-repeat;
padding-bottom: 3rem;
}
.x-hero::before, .x-hero-media { display: none !important; }
.x-hero-inner { width: 100%; }
.x-hero .x-label { color: rgba(255,255,255,.78) !important; }
.x-hero .x-label span, .x-hero .x-label i { color: #F4A46E; opacity: 1; }
.x-hero-title { color: #fff !important; }
.x-hero-title .x-roller { color: #AFC3FF; }
.x-hero-title em { color: #F4A46E; }
.x-hero-sub { color: rgba(255,255,255,.88); }
.x-hero-sub strong { color: #fff; }
.x-hero .x-btn-dark { background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.x-hero .x-link { color: #fff; }
.x-hero .x-proof { border-top-color: rgba(255,255,255,.22); }
.x-hero .x-proof dt { color: #fff !important; }
.x-hero .x-proof dd { color: rgba(255,255,255,.75); }
.x-hero .x-proof sup { color: #F4A46E; }
}
.x-hero-title .x-line .fx-w:has(.x-roller) { padding-bottom: .12em !important; margin-bottom: -.12em !important; }
.x-roller { height: 1.08em !important; }
.x-roller-track > span { height: 1.08em !important; line-height: 1 !important; }
.x-hero-title em { display: inline-block; margin-top: .02em; }
.x-roller-track > span { width: max-content; padding-right: .04em; }
.x-label.x-label-light, .x-cta .x-label, .x-reels .x-label { color: rgba(255,255,255,.78) !important; }
/* ════════════════════════════════════════════════════════════
v4.6 — TASTE / REDESIGN AUDIT
════════════════════════════════════════════════════════════ */
/* ── 1. One gray family: cool neutrals to match the navy greys ── */
:root {
--paper: #F4F5F8;
--paper-2: #EAEDF3;
--bone: #EAEDF3;
--surface: #FFFFFF;
--mist: #DDE4F3;
--radius-card: 24px;
--radius-inner: 16px;
}
body { background: var(--paper); }
.tint-blue, .tint-mint, .tint-amber { background: var(--paper) !important; }
.tint-lav, .tint-peach { background: var(--bone) !important; }
body::after { opacity: .05; }
/* ── 2. Eyebrow restraint: labels only in heroes + closing CTA ── */
main section:not(.page-hero):not(.x-hero):not(.x-cta) .eyebrow,
main section:not(.page-hero):not(.x-hero):not(.x-cta) .x-label { display: none !important; }
.x-title, .h-title { margin-top: 0 !important; }
.eyebrow .x-num, .x-num { display: none !important; }
/* ── 3. Inner-page hero: stacked, not split (headline, then intro) ── */
@media (min-width: 900px) {
.page-hero .wrap { display: block !important; }
.page-hero .wrap > h1 { margin: 1.1rem 0 1.2rem !important; max-width: 18ch; }
.page-hero .fx-hero-aside, .page-hero .lede { max-width: 60ch; }
}
.page-hero { padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; }
.page-hero:has(+ .x-band) { padding-bottom: clamp(5rem, 9vw, 7rem) !important; }
/* ── 4. No captions overlaid on photos ── */
.x-band-fig figcaption { display: none !important; }
.x-band-fig::after { background: none !important; }
/* ── 5. Proof strip under the homepage hero ── */
.x-proofstrip { padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.x-proofstrip .x-proof { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1.5rem; max-width: 860px; }
.x-proofstrip dt { color: var(--ink) !important; }
.x-proofstrip dd { color: var(--ink-2) !important; }
@media (max-width: 640px) { .x-proofstrip .x-proof { grid-template-columns: repeat(3, 1fr); gap: .8rem; } .x-proofstrip dd { font-size: .78rem !important; } }
.x-hero { min-height: auto; }
@media (max-width: 980px) { .x-hero { min-height: 88svh !important; } }
/* ── 6. Page theme lock: reels section light, like the rest of the page ── */
.x-reels { background: var(--bone) !important; color: var(--ink-2) !important; }
.x-reels .x-title { color: var(--ink) !important; }
.x-reels .x-head-aside { color: var(--ink-2) !important; }
.x-reels .x-link { color: var(--ink) !important; }
.x-reel { box-shadow: 0 18px 40px rgba(11,22,51,.18) !important; }
/* split-header ban: stack headline + explainer where there is no interactive element */
.x-head-row:has(.x-head-aside) { flex-direction: column; align-items: flex-start; gap: .9rem; }
.x-head-aside { max-width: 52ch; }
/* ── 7. One shape system: pill = interactive, 24px = containers, 16px = inner media ── */
.card, .feature-card, .step, .subject-card, .testi, .stat-card, .reward-card, .icon-card, .price-card, .note-card,
.package-card, .x-cell, .x-step, .x-panel, .x-car, .x-refer-card, .x-quote-card, .x-fxpanel, .cta-band,
.x-hero-photo, .x-band-fig, .price-table, .sc-table, .faq-item.card, .x-note, .x-bnote { border-radius: var(--radius-card) !important; }
.x-panel-img, .note-media img, .x-reel, .x-plan li, .x-ic, .vt-ic, .feature-icon, .form-input, .form-select, .form-textarea, .sc-note { border-radius: var(--radius-inner) !important; }
.fx .x-hero-photo, .fx-ready .x-hero-photo { clip-path: none !important; }
.fx .x-band-fig { clip-path: none !important; opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.fx .x-band-stage.is-in .x-band-fig { opacity: 1; transform: none; }
/* ── 8. Cards only where elevation means something: info columns lose the box ── */
.grid-3 > .card:not(.vt-link-card):not(a), .grid-4 > .card:not(.vt-link-card):not(a) {
background: transparent !important; border: 0 !important; box-shadow: none !important;
border-top: 2px solid var(--ink) !important; border-radius: 0 !important; padding: 1.4rem 0 0 !important;
}
.grid-3 > .card:not(.vt-link-card):not(a):hover, .grid-4 > .card:not(.vt-link-card):not(a):hover { transform: none !important; }
.grid-3 > .card:not(.vt-link-card):not(a)::after, .grid-4 > .card:not(.vt-link-card):not(a)::after { display: none !important; }
/* ── 9. Typography polish ── */
h1, h2, h3, .x-title, .h-title { text-wrap: balance; }
p, li, blockquote, dd { text-wrap: pretty; }
.lede, .x-hero-sub, main .section .wrap > p:not([class]) { max-width: 65ch; }
/* ── 10. Tactile feedback on press ── */
.btn:active, .x-btn:active, .x-car-btn:active, .x-tabs button:active, .price-toggle-btn:active { transform: scale(.98) !important; transition-duration: .1s !important; }
.x-link:active, .footer-links a:active { opacity: .7; }
/* ── 11. FAQ: clean + / − instead of a chevron ── */
.faq-chevron { stroke: none !important; transform: none !important;
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1633' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat !important; }
.faq-chevron polyline { display: none; }
.faq-item.open .faq-chevron { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat !important; }
/* ── 12. Hamburger morphs to an X; menu links stagger in ── */
#menu-icon line { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s var(--ease-out), opacity .25s; }
#mobile-toggle[aria-expanded="true"] #menu-icon line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
#mobile-toggle[aria-expanded="true"] #menu-icon line:nth-child(2) { opacity: 0; }
#mobile-toggle[aria-expanded="true"] #menu-icon line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
.mobile-menu.open > * { animation: kw-menu-in .55s var(--ease-out) both; animation-delay: calc(var(--mi, 0) * 35ms); }
@keyframes kw-menu-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* ── 13. Scroll-driven effects in CSS (no scroll listeners) ── */
.fx-progress { display: none; }
@supports (animation-timeline: scroll()) {
.fx-progress { display: block; animation: kw-progress linear both; animation-timeline: scroll(root block); }
@keyframes kw-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.x-hero-photo img, .x-band-fig img, .x-cta-bg { animation: kw-parallax linear both; animation-timeline: view(); animation-range: cover; }
@keyframes kw-parallax { from { transform: translate3d(0,-4%,0) scale(1.1); } to { transform: translate3d(0,4%,0) scale(1.1); } }
}
.x-marquee-row { transform: none !important; }
.sc-steps.fx-timeline::after { transition: transform .6s var(--ease-out) !important; }
.x-how-meter span { transition: transform .6s var(--ease-out) !important; }
/* ── 14. Contact form inline error ── */
.form-error-box { margin: .25rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; background: #FBEDEA; color: #8A2E1C; border: 1px solid #F0C9BF; font-size: .96rem; }
.form-error-box:focus { outline: 2px solid #8A2E1C; outline-offset: 2px; }
/* ── 15. 404 page ── */
.x-404-links { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.x-404-links a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 500; }
.x-404-links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.fx-progress, .x-hero-photo img, .x-band-fig img, .x-cta-bg { animation: none !important; }
.mobile-menu.open > * { animation: none !important; }
}
/* nav pill keeps its width when scrolled so the CTA never pokes out */
.navbar.scrolled .nav-container { max-width: 1240px !important; }
@media (max-width: 1320px) and (min-width: 821px) { .nav-actions .btn-primary { padding: .62rem .95rem !important; font-size: .84rem !important; } }
@media (max-width: 1500px) and (min-width: 821px) { .nav-links > a, .nav-calc-btn { padding-left: .62rem; padding-right: .62rem; } .nav-container { gap: .75rem; } }
@media (max-width: 1100px) and (min-width: 821px) {
.nav-links { margin-left: 0; }
.nav-links > a, .nav-calc-btn { padding: .45rem .42rem !important; font-size: .82rem !important; }
.lang-btn { padding: .45rem .4rem; }
.nav-actions { gap: .25rem; }
.nav-actions .btn-primary { padding: .6rem .85rem !important; font-size: .8rem !important; }
}
@media (min-width: 1501px) { .nav-links > a, .nav-calc-btn { padding-left: .62rem; padding-right: .62rem; } .nav-container { gap: .75rem; } }
/* small tablets in landscape: use the hamburger menu (the full nav cannot fit).
Raised from 960px to 1060px when the Essay Marker link joined the nav. */
@media (max-width: 1060px) and (min-width: 821px) {
.nav-links, .lang-selector { display: none !important; }
.nav-actions > .btn { display: none !important; }
.mobile-menu-btn { display: inline-flex !important; }
}
/* ════════════════════════════════════════════════════════════
v4.7 — REMOVE THE AI TELLS (client checklist)
════════════════════════════════════════════════════════════ */
/* No grain, no gradients, no purple-blue */
body::after { display: none !important; }
.fx-progress { background: var(--accent) !important; }
.x-hero::before, .page-hero .hero-bg, .site-footer::before, .x-fx-mesh, .x-fx-grid, .cta-band::before { display: none !important; background: none !important; }
.cta-band, .x-fxpanel { background: var(--ink) !important; background-image: none !important; }
.cta-band::after { display: none !important; }
.x-fxpanel.fx-spot { background-image: none !important; }
@media (max-width: 980px) { .x-hero-title .x-roller { color: #A8D1FF !important; } }
/* No gradient text: footer wordmark is a plain outline */
.site-footer::after { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.18); }
/* No glassmorphism: solid surfaces */
.nav-container, .navbar.scrolled .nav-container { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav-calc-dropdown, .lang-dropdown, .mobile-menu { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.x-note, .x-bnote { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--line) !important; box-shadow: 0 18px 40px rgba(11,22,51,.14) !important; }
.reel-tag, .x-reels .reel-tag { background: var(--ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; }
/* No coloured left-border cards */
.callout-line { border-left: 0 !important; border-radius: var(--radius-inner) !important; background: var(--paper-2) !important; }
/* No badge / label above headlines */
.eyebrow, .x-label { display: none !important; }
.page-hero .wrap > h1, .page-hero h1 { margin-top: 0 !important; }
.x-hero-title { margin-top: 0 !important; }
.x-cta h2 { margin-top: 0 !important; }
/* No icon boxes on top of columns */
.vt-ic, .x-ic, .feature-icon { display: none !important; }
.feature-card { gap: 0 !important; }
/* No cursor beams / spotlights */
.fx-spot { background-image: none !important; }
/* Buttons: no shine sweep, no fades. Solid colour change + press. */
.btn-primary::after, .btn-accent::after, .btn-white::after, .x-btn::after { display: none !important; }
/* No fading-in as you scroll: everything is simply there */
.js .reveal, .js .fade-up, .js .reveal.visible { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.fx .x-load { opacity: 1 !important; transform: none !important; transition: none !important; }
.fx .x-note, .fx .x-bnote, .fx .x-note li, .fx .x-bnote li, .fx .x-band-fig, .fx .x-band-fx .x-fxpanel { opacity: 1 !important; transform: none !important; }
.fx .x-note li, .fx .x-bnote li { transition: none !important; }
.fx-split .fx-wi { transform: none !important; transition: none !important; }
.fx-stagger > * { opacity: 1 !important; transform: none !important; }
.fx-rows tbody tr { opacity: 1 !important; transform: none !important; }
.sc-steps.fx-timeline li, .steps.fx-timeline .step, .x-step { opacity: 1 !important; transform: none !important; }
/* Footer contrast */
.footer-heading { color: rgba(255,255,255,.66) !important; }
.footer-bottom, .footer-bottom p { color: rgba(255,255,255,.62) !important; }
/* One spacing scale */
:root { --sec: clamp(4.5rem, 8vw, 7rem); --sec-tight: clamp(3rem, 5vw, 4.5rem); }
main .section, main .x-section, .x-voices.x-inner, .x-refer, .x-statement { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
main .section-tight { padding-top: var(--sec-tight) !important; padding-bottom: var(--sec-tight) !important; }
.x-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem) !important; }
main .section .wrap > .center + [class*="grid-"], main .section .wrap > .center + .steps, main .section .wrap > .center + .reveal { margin-top: clamp(2.25rem, 4vw, 3.25rem) !important; }
/* ── Phosphor icon system (bold weight everywhere) ── */
.x-note svg, .x-bnote svg { fill: currentColor !important; stroke: none !important; color: #0F9D6E; stroke-dasharray: none !important; }
.x-note li.next svg, .x-bnote li.next svg { color: var(--accent); }
.x-plan .x-plan-box svg { fill: #fff !important; stroke: none !important; transform: scale(0); transition: transform .4s var(--ease-out); transition-delay: calc(.6s + var(--i) * .45s); }
.x-cell-plan.visible .x-plan-box svg, .js .x-cell-plan .x-plan-box svg { transform: scale(1); }
.x-cmp li::before { background: #0F9D6E url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22white%22%3E%3Cpath d=%22M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z%22/%3E%3C/svg%3E") center/11px no-repeat !important; }
.x-cmp[data-show="them"] li::before { background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22white%22%3E%3Cpath d=%22M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z%22/%3E%3C/svg%3E") center/10px no-repeat !important; }
.faq-chevron path { display: none; }
.faq-chevron { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22%230B1633%22%3E%3Cpath d=%22M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z%22/%3E%3C/svg%3E") center/14px no-repeat !important; }
.faq-item.open .faq-chevron { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22white%22%3E%3Cpath d=%22M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z%22/%3E%3C/svg%3E") center/14px no-repeat !important; }
.checklist .check, .compare-list svg { color: var(--accent); }
/* hamburger morph works on every page, not just the homepage */
#mobile-toggle svg line { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s var(--ease-out), opacity .25s; }
#mobile-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
#mobile-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
#mobile-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
/* last gradients out: solid fills and solid borders only */
.note-media { background: var(--paper-2) !important; background-image: none !important; }
.atar-results-panel { background: var(--ink) !important; background-image: none !important; }
.x-band { background: transparent !important; background-image: none !important; }
.price-card.featured, .note-card.featured, .package-card.featured {
animation: none !important; background: var(--surface) !important; background-image: none !important;
border: 2px solid var(--ink) !important;
}
/* form controls and buttons use the site font (browsers default them to Arial) */
button, input, select, textarea, optgroup { font-family: inherit; }
/* ── v4.8: homepage comparison (replaces the text statement) ─────────── */
.x-statement .x-title { max-width: 22ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.x-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.x-vs-col { border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.25rem); }
.x-vs-col h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1.25rem; }
.x-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.x-vs-col li { display: flex; align-items: flex-start; gap: .8rem; font-size: 1.02rem; line-height: 1.45; }
.x-vs-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: -1px; }
.x-vs-ic svg { width: 14px; height: 14px; }
.x-vs-them { background: #fff; border: 1px solid var(--line); }
.x-vs-them h3 { color: var(--ink-2); }
.x-vs-them li { color: var(--ink-2); }
.x-vs-them .x-vs-ic { background: #FDECEC; color: #D23B3B; }
.x-vs-us { background: var(--ink); color: #fff; }
.x-vs-us h3 { color: #fff; }
.x-vs-us li { color: #fff; font-weight: 500; }
.x-vs-us .x-vs-ic { background: #1F9D5C; color: #fff; }
@media (max-width: 760px) {
.x-vs { grid-template-columns: 1fr; }
.x-vs-col li { font-size: .98rem; }
}
.x-cell-consult { display: flex; flex-direction: column; gap: .75rem; }
.x-cell-consult h3 { color: #fff; }
.x-cell-consult p:not(.x-cell-k) { color: rgba(255,255,255,.82); }
.x-cell-consult .x-btn { margin-top: auto; align-self: flex-start; }
/* ══ v4.9: audit fixes ═══════════════════════════════════════════════════
Orange split into roles: on light surfaces the accent is deepened so it
reads (large text ≥3:1, small text and button labels ≥4.5:1); the original
bright orange is kept for dark surfaces, where it measures 6:1. */
:root {
--accent: #C9611F; /* large text + marks on light surfaces */
--accent-strong: #A84E14;
--accent-ink: #A84E14; /* small text on light surfaces */
--accent-fill: #B8561A; /* button fills under white labels */
--accent-bright: #E07B39; /* dark surfaces only */
--accent-soft: rgba(201,97,31,.10);
--green-ink: #0B7A55;
}
.x-cell-dark, .x-cta, .site-footer, .x-vs-us, .compare-col.us,
.cta-band, .x-fxpanel, .x-cell-photo .x-cell-over {
--accent: var(--accent-bright);
}
@media (max-width: 980px) { .x-hero { --accent: var(--accent-bright); } }
.btn-accent { background: var(--accent-fill) !important; box-shadow: 0 10px 24px rgba(184,86,26,.24); }
.btn-accent:hover { background: var(--accent-strong) !important; }
/* small accent text */
.package-save, .note-badge.save, .snp-sub, .card-sub-hl { color: var(--accent-ink) !important; }
.x-marquee .x-up { color: var(--green-ink); }
/* ── Type floor: nothing functional below 12px; labels are labels, not mono costume ── */
.reel-tag, .note-badge, .note-included, .package-badge, .package-save, .subject-kicker,
.x-step-tag, .price-table-head, .x-bnote p, .sc-table th, .x-cell-k, .x-note-label,
.price-range, .x-subgroups p, .footer-heading, .snp-sub {
font-family: var(--font-body) !important; text-transform: none !important;
letter-spacing: 0 !important; font-size: max(.8rem, 12.5px) !important; font-weight: 600 !important;
}
.x-marquee .x-up, .x-marquee .x-down { font-family: var(--font-body); font-size: .62em; font-weight: 600; }
.card-sub { margin: .2rem 0 .75rem; font-size: .95rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.card-sub-hl { font-weight: 700; }
.x-cell-sub { margin: -.35rem 0 .9rem; font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.x-cell-over .x-cell-sub { margin: .55rem 0 0; color: rgba(255,255,255,.86); }
/* ── Comfortable measure ── */
.sc-note { max-width: 64ch; }
main p.center { margin-left: auto; margin-right: auto; }
.atar-wrap > p, .calc-intro, main section > .wrap > p.reveal { max-width: 72ch; }
/* ── Motion: no animated layout properties ── */
.nav-container, .navbar.scrolled .nav-container { height: 60px; transition: box-shadow .3s, background-color .3s; }
.nav-container { border: 0 !important; box-shadow: 0 1px 2px rgba(11,22,51,.06), 0 6px 14px rgba(11,22,51,.07) !important; }
.navbar.scrolled .nav-container { box-shadow: 0 1px 2px rgba(11,22,51,.08), 0 8px 16px rgba(11,22,51,.1) !important; }
@media (max-width: 820px) { .nav-container, .navbar.scrolled .nav-container { height: 58px; } }
.faq-a { max-height: none !important; transition: none !important; }
.faq-item:not(.open) .faq-a { display: none; }
.faq-item.open .faq-a { animation: kw-faq-in .35s var(--ease-out) both; }
@keyframes kw-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.x-plan li.now .x-plan-box::after { animation: none; transform: none; opacity: 1; }
/* shadows have no job on dark surfaces */
.x-cell-dark, .x-cell-dark .x-btn, .x-cta .x-btn { box-shadow: none !important; }
/* ── Touch: 44px targets on phones ── */
@media (max-width: 820px) {
#mobile-toggle { width: 44px !important; height: 44px !important; }
.footer-social a, .social-links a, .site-footer a[aria-label] { min-width: 44px; min-height: 44px; }
.x-tabs [role="tab"], .price-toggle-btn, .x-switch button { min-height: 44px; }
.atar-row-remove { min-width: 44px !important; min-height: 44px !important; }
.x-link { min-height: 44px; display: inline-flex; align-items: center; }
main div > a[href^="tel:"], main div > a[href^="mailto:"] { display: inline-block; padding-block: .7rem; }
.nav-logo { min-height: 44px; display: inline-flex; align-items: center; }
}
/* ── Phone-sized backgrounds (WebP with JPEG fallback) ── */
@media (max-width: 980px) {
.x-hero {
background:
linear-gradient(180deg, rgba(11,22,51,.55) 0%, rgba(11,22,51,.66) 40%, rgba(11,22,51,.9) 100%),
image-set(url("images/photos/hero-800.webp") type("image/webp"), url("images/photos/hero-800.jpg") type("image/jpeg")) center 35% / cover no-repeat;
}
}
.cta-band { --cta-img: image-set(url("images/photos/skyline.webp") type("image/webp"), url("images/photos/skyline.jpg") type("image/jpeg")); }
@media (max-width: 820px) {
.cta-band { --cta-img: image-set(url("images/photos/skyline-800.webp") type("image/webp"), url("images/photos/skyline-800.jpg") type("image/jpeg")); }
}
/* ── Browser surfaces carry the palette ── */
::selection { background: var(--ink); color: #fff; }
input, textarea, select { caret-color: var(--accent-ink); accent-color: var(--ink); }
main p a:not([class]), main li a:not([class]) { text-underline-offset: .2em; text-decoration-thickness: 1px; }
html { scrollbar-color: rgba(11,22,51,.35) transparent; }
/* v4.9 follow-ups from the re-scan */
.x-refer-steps em, .x-scrub em, main li em, main p em { color: var(--accent-ink); }
.x-cell-dark em, .x-cta em, .site-footer em, .x-vs-us em, .x-cell-over em, .x-fxpanel em, .cta-band em, .compare-col.us em { color: var(--accent-bright); }
@media (max-width: 980px) { .x-hero em { color: var(--accent-bright); } }
.note-badge.ready { color: var(--green-ink) !important; }
.note-card.featured a.payhip-buy-button.btn-primary { background: var(--accent-fill) !important; box-shadow: 0 10px 24px rgba(184,86,26,.24) !important; }
main p[style*="max-width:760px"], main p[style*="max-width:860px"] { max-width: 64ch !important; }
@media (max-width: 820px) {
.btn, select { min-height: 44px; }
.vt-card-go a { display: inline-block; padding-block: .65rem; }
.site-footer li a { display: inline-block; padding-block: .55rem; min-width: 44px; }
.site-footer ul { gap: 0 !important; }
}
.loc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.loc-name { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
/* all-caps labels → sentence case */
.subject-nav-label, .atar-panel-label, .atar-section-label { text-transform: none !important; letter-spacing: 0 !important; }
::placeholder { color: #666C78; opacity: 1; }
/* lighter depth on bordered surfaces */
.x-note, .x-bnote { box-shadow: 0 2px 4px rgba(11,22,51,.06), 0 10px 14px rgba(11,22,51,.08) !important; }
.x-step.is-on { box-shadow: 0 2px 4px rgba(11,22,51,.05), 0 8px 14px rgba(11,22,51,.07) !important; }
.btn-primary, .btn-accent { border-color: transparent !important; border-width: 0 !important; }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 14px rgba(11,22,51,.18) !important; }
.btn-accent { box-shadow: 0 6px 14px rgba(184,86,26,.24) !important; }
.mobile-menu-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; }
.price-card.featured::before { text-transform: none !important; letter-spacing: 0 !important; }
.nav-calc-dropdown, .lang-dropdown, .mobile-menu { box-shadow: 0 2px 4px rgba(11,22,51,.06), 0 10px 14px rgba(11,22,51,.1) !important; }
main p.lede { max-width: 62ch; }
main p.lede.center, main .center > p.lede { margin-left: auto; margin-right: auto; }
/* ATAR calculator rows: the score box had stretched to full width, collapsing the slider to 0px */
.atar-row-score .atar-score-input, .atar-score-input { width: 68px !important; flex: none !important; }
.atar-row-score .atar-slider, .atar-score-slider { flex: 1 1 auto; min-width: 70px; }
.atar-row .atar-year-wrap { width: 100px; }
.atar-year-select { padding-right: 1.7rem !important; }
.price-card.featured::before { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: max(.8rem, 12.5px) !important; }
.x-refer-steps li > p { margin: 0; }
.price-card.featured::before { background: var(--accent-fill) !important; color: #fff !important; }
@media (max-width: 480px) {
.atar-row .atar-subject-combo { flex: 1 1 0; }
.atar-row-score { width: calc(100% - 44px - .65rem) !important; }
}
/* measure: aim for 65–75 characters per line */
main p.center, main p.lede { max-width: 34em !important; }
.prose-narrow > p, .prose-narrow p { max-width: 35em; }
.sc-note { max-width: 36em; }
.callout-line { max-width: 35em; }
.ss-warn .msg, span.msg { max-width: 35em; }
.agg-tool { box-shadow: 0 2px 4px rgba(11,22,51,.04), 0 10px 14px rgba(11,22,51,.06) !important; }
@media (max-width: 820px) { .atar-slider, .atar-score-slider, main input[type="range"] { height: 44px !important; background: transparent; } }
/* ── Enquiry form: suburb + availability (2026-10-09) ───────── */
.form-group[hidden] { display: none !important; }
.form-hint { font-size: .84rem; color: var(--ink-3); margin: .35rem 0 0; }
fieldset.form-avail { border: 0; padding: 0; margin: 0; min-width: 0; display: block; }
.form-avail legend { padding: 0; margin-bottom: 0; }
.form-avail-row { display: grid; gap: .45rem; margin-top: 1rem; }
.form-avail-k { font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.form-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.form-chip { position: relative; cursor: pointer; }
.form-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.form-chip span { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .94rem; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.form-chip small { font-size: .82rem; color: var(--ink-3); }
.form-chip:hover span { border-color: var(--ink); }
.form-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.form-chip input:checked + span small { color: rgba(255,255,255,.75); }
.form-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-avail.is-invalid .form-chip input:not(:checked) + span { border-color: #DC2626; }
.form-avail-notes { display: block; margin-top: 1.1rem; }
.form-chips.is-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.form-chips.is-days .form-chip span { width: 100%; justify-content: center; padding: 0; }
/* Essay Marker nav link with a small "Free" pill (all pages) */
.nav-links > a.nav-new { display: inline-flex; align-items: center; gap: .35rem; }
.nav-pill { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; padding: .22rem .38rem; border-radius: 99px; background: var(--accent); color: #fff; }
.mobile-menu .nav-pill { margin-left: .35rem; vertical-align: 2px; }
/* Make room for the extra nav link at mid widths: drop the pill and the
"Language" word (the globe icon stays; the button keeps its aria label). */
@media (max-width: 1440px) and (min-width: 821px) { #lang-label { display: none; } }
@media (max-width: 1360px) and (min-width: 821px) { .nav-links > a.nav-new .nav-pill { display: none; } }