/* ============================================================
* KLEPIFY LANDING — futuristic / honest / branded
*
* Design tokens mirror the extension's brand kit so the site
* and the product feel like the same product.
*
* Layout: single-column, mobile-first, max-width 1180.
* Motion: GPU-composited transforms only. Respects prefers-reduced-motion.
* Color: ink on paper, acid+coral as accents.
*
* ============================================================
* BREAKPOINT CONVENTION
* ============================================================
* CSS custom properties do not work inside @media query expressions
* (they are evaluated at element scope, not media-query scope), so
* the standard breakpoint values are kept inline. Any new rule must
* snap to one of these three values — adding a fourth value creates
* dead-zone transitions no other section makes.
*
* 720px — phone / narrow tablet (the dominant mobile breakpoint)
* 900px — tablet / narrow desktop
* 1200px — wide desktop tweaks (rare; use sparingly)
*
* The single 600px rule (.sound-toggle hide) is a hardware-touch
* threshold, not a layout breakpoint — leave it as-is.
* ============================================================ */
:root {
/* Brand colors */
--ink: #0E0E0C;
--paper: #F4EFE6;
--cream: #FAF5EB;
--acid: #D4FF3D;
--acid-deep: #BFE82D;
--coral: #FF6B47;
--muted: #6B6960;
--border: rgba(14, 14, 12, 0.10);
--border-strong: rgba(14, 14, 12, 0.22);
/* Fonts */
--font-sans: 'Familjen Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-display: 'Instrument Serif', 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, monospace;
/* Type scale */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-5xl: 96px;
--text-hero: clamp(56px, 11vw, 160px);
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Radii */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
/* Shared card system — keep these in sync across hero bezel,
section bezels, pricing tiles, and any other top-level card so the
page reads as one design system. Inner cards (nested INSIDE a
--radius-card frame) use --radius-card-inner so the eye reads a
clear outer/inner hierarchy. */
--radius-card: 22px;
--radius-card-inner: 16px;
/* Motion */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 180ms;
--dur-med: 360ms;
--dur-slow: 700ms;
--container: 1180px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: var(--acid); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: var(--ink); text-decoration: none; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* ============ Scroll progress bar ============ */
#scroll-progress {
position: fixed;
top: 0; left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--acid), var(--coral));
z-index: 100001;
transition: width 60ms linear;
box-shadow: 0 0 8px rgba(212, 255, 61, 0.6);
}
/* ============ Particle canvas (hero bg) ============ */
#particle-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
opacity: 0.55;
mix-blend-mode: multiply;
/* Match the mesh's bottom fade so the constellation lines don't
* compete with the marquee + stats below the headline. */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
}
/* Position relative on the hero so the canvas can be absolute-positioned inside */
/* ============ Grain overlay ============ */
#grain {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============ NAV ============ */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
background: rgba(244, 239, 230, 0.78);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom: 1px solid var(--border);
transition: padding var(--dur-fast) var(--ease-out);
}
.nav.scrolled { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.logo {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-xl);
letter-spacing: -0.02em;
color: var(--ink);
display: inline-flex;
align-items: baseline;
user-select: none;
/* No underline + subtle hover hint */
text-decoration: none;
}
.logo-word {
display: inline-flex;
align-items: baseline;
/* Smooth hover scale on the entire word — feels like a real logo */
transition: transform var(--dur-fast, 0.2s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.logo:hover .logo-word { transform: translateY(-1px); }
/* Composite "i" = a vertical ink stem with an acid diamond as the
* tittle (the dot), sitting directly above. The whole unit takes the
* place of a real "i" in the wordmark "klepify".
*
* Beautified v2:
* - Stem width bumped 3 → 4px to match the bold (700) stroke weight
* of surrounding letters (kl, ep, fy in Familjen Grotesk 700 @ 24px)
* - Stem height 12 → 13px to land on the same x-height as 'e' and 'p'
* - Diamond shrunk 7 → 6px so it reads as a tittle, not a chunk
* - Diamond switched coral → acid, matching the brand's primary accent
* (coral is reserved for the masthead "k" stem in editorial bursts)
* - Container width 5 → 6 so the dot is centered above the stem
* - Removed `top: 2px` — the baseline alignment now does the work
* - Added a wink animation on logo hover (dot rotates + nudges) */
.logo-i {
display: inline-block;
position: relative;
width: 6px;
height: 18px;
margin: 0 1.5px;
vertical-align: baseline;
}
.logo-stem {
position: absolute;
left: 1px;
bottom: 0;
width: 4px;
height: 13px;
background: var(--ink);
border-radius: 1.5px 1.5px 0.5px 0.5px;
}
.logo-spark {
position: absolute;
left: 50%;
top: 0;
width: 6px;
height: 6px;
background: var(--acid);
/* Slight ink outline so the acid dot reads on the cream nav bg */
box-shadow: inset 0 0 0 1px rgba(14, 14, 12, 0.85);
transform: translateX(-50%) rotate(45deg);
transition: transform var(--dur-mid, 0.35s) var(--ease-out, cubic-bezier(0.34, 1.56, 0.64, 1));
}
/* On hover, the dot spins 180° and the stem lifts a hair — small
* delight, instantly returns to rest. */
.logo:hover .logo-spark {
transform: translateX(-50%) rotate(225deg);
}
.nav-links {
display: flex;
gap: var(--space-5, 16px);
font-size: var(--text-sm);
font-weight: 500;
}
.nav-links a {
color: var(--muted);
/* Bigger touch targets — was 0 padding (text bounding box only).
Now hits ~44px tall on mobile, ~48px wide for typical short labels. */
display: inline-block;
padding: 8px 4px;
transition: color var(--dur-fast) var(--ease-out);
position: relative;
text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
content: '';
position: absolute;
left: 4px; bottom: 2px;
width: calc(100% - 8px); height: 2px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-med) var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
/* Active page (set via aria-current="page" on side pages) — show the
underline as a persistent state in coral, signaling "you are here". */
.nav-links a[aria-current="page"] {
color: var(--ink);
}
.nav-links a[aria-current="page"]::after {
background: var(--coral);
transform: scaleX(1);
}
/* Keyboard focus ring — visible only on keyboard nav, not on mouse click */
.nav-links a:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 4px;
border-radius: 4px;
}
/* Defensive: if anything still uses the legacy .nav-pill class
(e.g. an old page or a stale cache), make it behave like .nav-links
so we never regress to the "links jammed together" bug again. */
/* Mobile menu — CSS-only disclosure (the "checkbox hack"). Works with no JS,
so it functions on pages that don't load app.js (guides, graveyard). The
hidden checkbox sits before .nav-links so `:checked ~ .nav-links` can reveal
the dropdown. */
.nav-toggle-cb {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.nav-burger { display: none; }
@media (max-width: 720px) {
.nav-links, .nav-pill { display: none; }
.logo { order: 1; }
.nav-actions { order: 2; margin-left: auto; }
.nav-burger {
order: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
margin-left: 8px;
border: 1.5px solid var(--ink);
border-radius: 10px;
background: var(--cream);
color: var(--ink);
cursor: pointer;
}
/* Dropdown panel revealed when the hidden checkbox is checked */
.nav-links {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
gap: 2px;
padding: 10px 24px 16px;
background: var(--paper);
border-bottom: 1.5px solid var(--ink);
box-shadow: 0 14px 30px rgba(14, 14, 12, 0.14);
}
.nav-toggle-cb:checked ~ .nav-links { display: flex; }
.nav-links a { padding: 12px 0; font-size: var(--text-base); }
/* Keyboard focus indicator surfaced on the visible burger */
.nav-toggle-cb:focus-visible + .nav-burger {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
}
/* ============ BUTTONS ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 10px 18px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--ink);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
user-select: none;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn-acid {
background: var(--acid);
color: var(--ink);
border-color: var(--ink);
}
.btn-acid:hover {
background: var(--acid-deep);
box-shadow: 0 8px 24px rgba(212, 255, 61, 0.45), 0 2px 0 var(--ink);
}
.btn-ghost {
background: transparent;
color: var(--ink);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--paper);
}
.btn-lg {
padding: 14px 28px;
font-size: var(--text-base);
}
.btn-block {
width: 100%;
padding: 14px 18px;
}
/* Magnetic effect — JS attaches translate offset on mousemove */
.btn-magnetic { will-change: transform; }
/* ============ HERO ============ */
/* Mesh gradient entirely disabled — was producing a peach wash at the
* lower-right of the hero that competed with the headline. The hero
* now sits on clean paper with only the constellation particle network
* (still GPU-cheap) + the dotted grid mask for "engineered" texture.
*
* Keeping the rules + keyframes below dead-but-defined makes future
* re-enables a one-line change. */
.mesh { display: none; }
.mesh-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0; }
.mesh-blob-1, .mesh-blob-2, .mesh-blob-3 { display: none; }
@keyframes mesh-drift-1 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(8vw, 10vw) scale(1.15); }
}
@keyframes mesh-drift-2 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-10vw, -6vw) scale(0.9); }
}
@keyframes mesh-drift-3 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-8vw, 6vw) scale(1.2); }
}
/* Subtle grid lines for the "engineered" feel */
/* Floating Klep */
.klep-floater {
position: absolute;
right: 6vw;
top: 18vh;
width: 200px; height: 200px;
z-index: 2;
animation: klep-float 6s ease-in-out infinite;
will-change: transform;
}
@keyframes klep-float {
0%, 100% { transform: translate(0, 0) rotate(-2deg); }
50% { transform: translate(0, -18px) rotate(2deg); }
}
.klep-spark {
transform-origin: 0 0;
animation: spark-spin 4s linear infinite;
}
@keyframes spark-spin {
0% { transform: translate(180px, 50px) rotate(0deg); }
100% { transform: translate(180px, 50px) rotate(360deg); }
}
@media (max-width: 900px) {
.klep-floater {
position: relative;
right: auto; top: auto;
margin: 0 auto var(--space-5);
width: 140px; height: 140px;
}
}
/* Italic "Klepify" emphasis. Was previously a diagonal coral gradient
* that read as a stain to some viewers — replaced with clean italic in
* ink, with a subtle coral underline anchor that signals "brand word"
* without ambiguity. */
/* Dictionary-style verb definition. Subtle treatment — the brand isn't
* actually a dictionary, but this gives first-time visitors the meaning
* of "klepify" without resorting to an explainer paragraph. */
.hero-ctas {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-7);
}
/* Hero marquee */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Stats strip — centered under the hero copy */
.stat {
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-align: center;
}
.stat-num { margin-left: auto; margin-right: auto; }
.stat-num {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--space-2);
}
.stat-label {
font-size: var(--text-sm);
color: var(--muted);
line-height: 1.4;
}
.stat-label em { color: var(--coral); font-style: italic; font-weight: 600; }
.stat-label sup {
font-size: 9px;
color: var(--coral);
cursor: help;
margin-left: 2px;
}
@media (max-width: 720px) {
.hero-stats { grid-template-columns: 1fr; }
}
/* ============ Section eyebrow + headings ============ */
.section-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--coral);
margin-bottom: var(--space-3);
}
.section-h {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 80px);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.025em;
margin-bottom: var(--space-7);
max-width: 16ch;
}
.section-h em { font-style: italic; color: var(--coral); }
section { padding: var(--space-10) 0; position: relative; }
@media (max-width: 720px) {
section { padding: var(--space-9) 0; }
}
/* ============ PROBLEM ============
Section 2 now borrows the hero's editorial frame language:
- section background goes INK (the bezel)
- inner content sits on a PAPER "page" with rounded corners
- vertical tickers run up the bezel walls (reuses .hv4-side)
- a thin ACID band sits between the headline and the grid
The hero's atmosphere without copying the hero's choreography. */
/* The .problem-* class names are kept for backwards-compat but the
actual rules are now shared with .section-bezel — see below. The
.problem section just adds .section-bezel to its element. */
.problem,
.section-bezel {
background: var(--ink);
/* 14px equal-all-sides matches the hero's bezel exactly. Previously
the bottom was var(--space-8) (64px), which compounded with the
next section's top padding into ~80px of dead ink wall between
consecutive bezeled sections. */
padding: 14px;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* The cream "page" inside the bezel — matches .hv4-frame's geometry.
Capped to a max width so the cream pages don't sprawl edge-to-edge
on wide displays; centered with auto margins so the ink bezel walls
widen evenly on either side. Width tuned to roughly match the
container max-width plus a little breathing room on the cream page.
Padding is symmetric top/bottom — earlier asymmetry (96/64) made
one side look heavier than the other; equal padding reads cleaner. */
.problem-frame,
.section-bezel-frame {
background: var(--paper);
/* Shared with .hv4-frame and .pricing-card via the --radius-card token
so every top-level card on the page reads the same silhouette. */
border-radius: var(--radius-card);
padding: var(--space-7) 0;
max-width: 1240px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* Mobile parity: hero frame already softens 22→16 at ≤720px (see
.hv4-frame mobile rule). Mirror that here so section bezels track
the hero's corner radius instead of staying at the desktop 22px on
phones. Using 18 (rather than the hero's 16) because section frames
sit further from the viewport edge — they look better one notch
crisper than the hero. */
@media (max-width: 720px) {
.problem-frame,
.section-bezel-frame { border-radius: 18px; }
}
/* SVG section-dividers — pre-bezel artifact. With every section now
wearing its own ink bezel, these 80px curve transitions are dead
weight that ALSO created uneven gaps (some section pairs had them,
others didn't). Hide them universally; the bezel walls handle the
transition cleanly on their own. */
.section-divider { display: none; }
/* Thin neon band centred under the headline — echoes the hero's
.hv4-band acid stripe without dominating the section. */
.problem-band,
.section-bezel-band {
width: 120px;
height: 6px;
background: var(--acid);
border-radius: 3px;
margin: var(--space-5) auto var(--space-7);
box-shadow: 0 0 0 4px rgba(212, 255, 61, 0.18);
}
/* Punch up the section heading so it reads as display-weight, the
way KLEPIFY does in the hero. */
.problem .section-h,
.section-bezel .section-h {
font-size: clamp(2.5rem, 5vw, 4.25rem);
line-height: 1.05;
letter-spacing: -0.025em;
}
/* Problem section: headline + eyebrow centered so they stack neatly
over the centered acid band underneath. The two lines are split by
an explicit
in the markup ("Every other tool helps you spray.
/ We help you waste less time."), so no max-width is needed — the
container's 1180px cap is wide enough that neither line wraps. */
.problem .section-eyebrow {
text-align: center;
}
.problem .section-h {
text-align: center;
}
/* ----- Dark-section overrides -----
Two of the bezel-wrapped sections render with INK interior instead
of cream paper, creating a light→dark→light→dark→light rhythm
across sections 2-6. Without this alternation consecutive cream
sections (2-3-4) blur into one continuous block.
.receipts was authored as a dark editorial section originally;
.engine gets inverted here purely for visual rhythm. Both follow
the same pattern: ink frame, paper text, beefed-up band glow. */
.receipts .section-bezel-frame,
.engine .section-bezel-frame {
background: var(--ink);
color: var(--paper);
}
.receipts .section-bezel-band,
.engine .section-bezel-band {
box-shadow: 0 0 0 4px rgba(212, 255, 61, 0.28),
0 0 24px rgba(212, 255, 61, 0.35);
}
/* Engine-specific text re-coloring — the original engine section was
light-themed (deck text was 72% ink). Flipping to dark needs the
text colors flipped to cream and the eyebrow to acid to match the
dark-section visual system. The demo callouts, success states, and
SVG illustrations have their own contained color systems and survive
the bg flip unchanged. */
.engine {
color: var(--paper);
}
.engine .section-eyebrow {
color: var(--acid);
}
.engine .section-h {
color: var(--paper);
}
.engine .section-h em {
color: var(--acid);
}
.engine .engine-deck {
color: rgba(244, 239, 230, 0.72);
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.problem-col {
border-radius: var(--radius-lg);
padding: var(--space-7);
border: 1px solid var(--border-strong);
}
.problem-them {
background: var(--cream);
color: var(--muted);
}
.problem-us {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
position: relative;
overflow: hidden;
}
.problem-us::before {
content: '';
position: absolute;
top: -20%; right: -20%;
width: 60%; aspect-ratio: 1;
background: radial-gradient(circle, var(--acid) 0%, transparent 70%);
opacity: 0.15;
pointer-events: none;
}
.problem-h {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-5);
opacity: 0.85;
}
.problem-h-us { color: var(--acid); }
.problem-list { list-style: none; }
.problem-list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
font-size: var(--text-base);
border-bottom: 1px solid currentColor;
border-color: rgba(255, 255, 255, 0.1);
}
.problem-them .problem-list li { border-color: var(--border); }
.problem-list li:last-child { border-bottom: none; }
.problem-list .x { color: var(--coral); font-weight: 700; flex-shrink: 0; font-size: 18px; }
.problem-list .check { color: var(--acid); font-weight: 700; flex-shrink: 0; font-size: 18px; }
/* Snap to the project's standard tablet breakpoint (900px) so the
problem grid lines up with every other tablet-to-mobile transition.
The old 800px value was a one-off and created a no-other-section-acts
dead zone between 800 and 900. */
@media (max-width: 900px) {
.problem-grid { grid-template-columns: 1fr; }
}
/* ============ HONESTY RECEIPT ============
* The most distinctive section on the page — an editorial-style
* before/after that makes the "no invention" brand promise tactile.
*
* Layout: 3 columns at desktop, stacks vertically at mobile.
* Treatment: feels like a printed comparison from a magazine, not a
* SaaS marketing block. Coral highlights = "invented", acid highlights
* = "preserved from source".
*/
/* A subtle "filed evidence" stamp in the corner — adds editorial flavor */
@media (min-width: 1080px) {
.receipt::before { display: block; }
}
.receipt-sub {
font-size: var(--text-lg);
color: var(--muted);
margin-top: calc(var(--space-7) * -1);
margin-bottom: var(--space-6);
max-width: 60ch;
line-height: 1.45;
}
.receipt-sub strong {
color: var(--ink);
font-weight: 600;
}
/* Tab selector — sits like a row of file tabs */
.receipt-tab.active {
color: var(--ink);
background: var(--cream);
border-color: var(--border-strong);
border-bottom-color: var(--cream);
}
/* The three-column comparison grid */
.receipt-col {
background: var(--cream);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
position: relative;
min-height: 280px;
}
.receipt-col-source { background: var(--paper); }
.receipt-col-inflated { background: rgba(255, 107, 71, 0.04); }
.receipt-col-honest { background: rgba(212, 255, 61, 0.06); }
.receipt-col-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 700;
color: var(--muted);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
}
.receipt-col-eyebrow.receipt-warn {
color: var(--coral);
border-color: rgba(255, 107, 71, 0.3);
}
.receipt-col-eyebrow.receipt-honest {
color: var(--ink);
border-color: rgba(212, 255, 61, 0.6);
}
.receipt-col-eyebrow sup {
font-size: 8px;
margin-left: 2px;
color: inherit;
}
.receipt-col-source .receipt-bullet { border-left-color: var(--ink); }
.receipt-col-inflated .receipt-bullet { border-left-color: var(--coral); }
.receipt-col-honest .receipt-bullet { border-left-color: var(--acid-deep); }
/* The diff highlights.
*
* Previously used a `linear-gradient(... 60%, color 60%)` stop to fake a
* marker-pen highlight on the bottom 40% of each glyph. With italic serif
* type that has dramatic ascenders/descenders, the 60% line cut through
* letters in an inconsistent place — reading as fuzzy / mis-registered.
* Replaced with a solid soft-tint background that wraps the full word
* cleanly, using box-decoration-break so line-wrapped phrases still get
* clean rectangles on every line. */
.receipt-meta {
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--muted);
line-height: 1.5;
border-top: 1px dashed var(--border);
padding-top: var(--space-3);
margin-top: auto;
}
.receipt-meta em {
color: var(--ink);
font-style: italic;
font-weight: 600;
}
.receipt-meta.receipt-warn em { color: var(--coral); }
.receipt-meta.receipt-honest em { color: var(--ink); }
.receipt-footnotes {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
.receipt-footnotes sup {
color: var(--coral);
margin-right: 4px;
}
.receipt-footnotes a {
color: var(--ink);
border-bottom: 1px dotted var(--muted);
}
@media (max-width: 900px) {
.receipt-grid {
grid-template-columns: 1fr;
gap: 1px;
}
.receipt-bullet { font-size: 17px; }
}
/* ============ (Old per-feature sections removed in landing cleanup — see receipts/* in the post-cleanup block at the bottom) ============ */
/* ============ PRICING ============ */
.pricing { background: var(--cream); }
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
max-width: 880px;
margin: 0 auto;
}
.pricing-card {
background: var(--paper);
border: 1px solid var(--border-strong);
/* Use the shared --radius-card so pricing tiles match the section bezels
and the hero frame instead of being 2px tighter. */
border-radius: var(--radius-card);
padding: var(--space-7);
position: relative;
transition: transform var(--dur-med) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card-pro {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
transform: scale(1.02);
}
.pricing-card-pro:hover { transform: translateY(-4px) scale(1.02); }
.pricing-flag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--acid);
color: var(--ink);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--ink);
white-space: nowrap;
}
.pricing-tier {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: var(--space-3);
opacity: 0.85;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.pricing-amount {
font-family: var(--font-display);
font-size: clamp(48px, 7vw, 80px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1;
}
.pricing-period { font-size: var(--text-sm); opacity: 0.7; }
.pricing-blurb {
font-size: var(--text-base);
opacity: 0.85;
margin-bottom: var(--space-5);
}
.pricing-list {
list-style: none;
margin-bottom: var(--space-6);
}
.pricing-list li {
padding: var(--space-2) 0;
font-size: var(--text-sm);
border-bottom: 1px solid currentColor;
border-color: rgba(255, 255, 255, 0.08);
}
.pricing-card:not(.pricing-card-pro) .pricing-list li { border-color: var(--border); }
.pricing-list li.muted { opacity: 0.45; }
.pricing-list li strong { font-weight: 700; }
.pricing-card-pro .btn-acid { color: var(--ink); }
.pricing-card .btn-ghost { color: var(--ink); border-color: var(--ink); }
.pricing-card-pro .btn-ghost { color: var(--paper); border-color: var(--paper); }
.pricing-card-pro .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.pricing-foot {
text-align: center;
margin-top: var(--space-6);
font-size: var(--text-sm);
color: var(--muted);
}
.pricing-foot a { color: var(--ink); border-bottom: 1px dotted var(--muted); padding-bottom: 1px; }
@media (max-width: 720px) {
.pricing-grid { grid-template-columns: 1fr; }
.pricing-card-pro { transform: none; }
.pricing-card-pro:hover { transform: translateY(-4px); }
}
/* ============ FINAL CTA ============ */
@keyframes cta-pulse {
0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
100% { transform: translate(5%, -5%) rotate(8deg); opacity: 0.85; }
}
@keyframes spark-spin-cta {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ============ FOOTER ============ */
.footer {
background: var(--ink);
color: var(--paper);
padding: var(--space-8) 0 var(--space-5);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-7);
}
.footer-brand p { opacity: 0.65; font-size: var(--text-sm); margin-top: var(--space-2); max-width: 32ch; }
.footer-logo {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-xl);
letter-spacing: -0.02em;
color: var(--paper);
display: inline-flex;
align-items: baseline;
}
.footer-logo .logo-stem { background: var(--paper); }
.footer-h {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: var(--space-3);
opacity: 0.6;
}
.footer-col {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-col a {
color: var(--paper);
opacity: 0.85;
font-size: var(--text-sm);
transition: opacity var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { opacity: 1; }
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: var(--space-5);
border-top: 1px solid rgba(244, 239, 230, 0.08);
font-family: var(--font-mono);
font-size: var(--text-xs);
opacity: 0.55;
letter-spacing: 0.06em;
}
.footer-tag { font-style: italic; font-family: var(--font-display); font-size: var(--text-sm); opacity: 0.85; }
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-bottom { flex-direction: column; gap: var(--space-2); }
}
/* ============================================================
COMMUNITY WIDGETS — extracted to landing/community-widgets.css
============================================================
The full social-row widget styles (Discord, Reddit, YouTube,
TikTok, Instagram, LinkedIn, X) now live in their own file so
styles.css can stay focused. Loaded right after styles.css
from index.html.
============================================================ */
/* ============ REVEAL ANIMATIONS ============ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
will-change: opacity, transform;
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* ============ PAGES (privacy/terms/billing) ============ */
.page {
max-width: 760px;
margin: 0 auto;
padding: var(--space-9) var(--space-6) var(--space-10);
}
.page h1 {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 72px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--space-3);
}
.page-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--coral);
margin-bottom: var(--space-3);
}
.page h2 {
font-size: var(--text-xl);
font-weight: 600;
margin-top: var(--space-7);
margin-bottom: var(--space-3);
letter-spacing: -0.01em;
}
.page p, .page li { color: var(--ink); opacity: 0.85; font-size: var(--text-base); line-height: 1.65; margin-bottom: var(--space-3); }
.page ul, .page ol { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.page a { color: var(--ink); border-bottom: 1px dotted var(--muted); }
.page .last-updated {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-5);
}
/* Plain-English summary card at the top of legal pages — pulls the gist
* up above the lawyer section. Reinforces the brand's honest voice
* inside the most-likely-to-be-skimmed part of the site. */
.page-tldr {
background: var(--ink);
color: var(--paper);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-7);
font-size: var(--text-base);
line-height: 1.55;
border-left: 4px solid var(--acid);
}
.page-tldr strong {
font-family: var(--font-mono);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--acid);
display: block;
margin-bottom: var(--space-2);
}
/* Billing landing pages */
.billing-hero {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-7) var(--space-6);
}
.billing-card {
max-width: 540px;
background: var(--cream);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-7);
position: relative;
overflow: hidden;
}
.billing-card.success { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.billing-card.success::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(212, 255, 61, 0.18), transparent 60%);
pointer-events: none;
}
.billing-icon {
width: 64px; height: 64px;
margin: 0 auto var(--space-5);
border-radius: 50%;
background: var(--acid);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-family: var(--font-display);
border: 2px solid var(--ink);
animation: pop 700ms var(--ease-spring);
position: relative;
z-index: 1;
}
.billing-card.cancel .billing-icon { background: var(--coral); color: var(--paper); }
@keyframes pop {
0% { transform: scale(0); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.billing-card h1 {
position: relative;
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--space-4);
}
.billing-card h1 em { color: var(--acid); font-style: italic; }
.billing-card.cancel h1 em { color: var(--coral); }
.billing-card p {
position: relative;
font-size: var(--text-md);
margin-bottom: var(--space-5);
opacity: 0.85;
}
.billing-card .btn { position: relative; }
/* ============ LIVE ACTIVITY TICKER ============ */
@keyframes ticker-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.activity-dot {
width: 8px; height: 8px;
background: var(--acid);
border-radius: 50%;
box-shadow: 0 0 12px var(--acid);
flex-shrink: 0;
animation: activity-pulse 1.6s ease-in-out infinite;
}
@keyframes activity-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.6; }
}
.activity-label {
color: var(--muted);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.14em;
flex-shrink: 0;
}
.activity-text {
color: var(--paper);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 250ms var(--ease-out);
}
.activity-text.flipping { opacity: 0; }
.activity-time {
color: var(--muted);
font-size: var(--text-xs);
flex-shrink: 0;
}
/* ============ LIVE PRODUCT DEMO ============ */
.demo {
background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
position: relative;
overflow: hidden;
}
.demo::before {
content: '';
position: absolute;
top: 20%; right: -10%;
width: 50vw; aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 107, 71, 0.12), transparent 60%);
pointer-events: none;
z-index: 0;
}
.demo .container { position: relative; z-index: 1; }
.demo-sub {
font-size: var(--text-lg);
color: var(--muted);
margin-top: calc(var(--space-6) * -1);
margin-bottom: var(--space-7);
max-width: 56ch;
}
.demo-stage {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--space-7);
align-items: center;
position: relative;
min-height: 540px;
}
@media (max-width: 900px) {
.demo-stage { grid-template-columns: 1fr; }
}
.demo-lines {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
}
.demo-line {
fill: none;
stroke: var(--ink);
stroke-width: 1;
stroke-dasharray: 4 6;
opacity: 0.18;
animation: demo-line-flow 6s linear infinite;
}
@keyframes demo-line-flow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -200; }
}
.demo-callouts {
display: flex;
flex-direction: column;
gap: var(--space-4);
position: relative;
z-index: 1;
}
.demo-callout {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.demo-callout.active {
background: var(--paper);
border-color: var(--ink);
transform: translateX(8px);
box-shadow: 0 12px 32px rgba(14, 14, 12, 0.08);
}
.demo-callout-num {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 700;
background: var(--ink);
color: var(--acid);
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--dur-med) var(--ease-spring);
}
.demo-callout.active .demo-callout-num {
transform: scale(1.1);
background: var(--acid);
color: var(--ink);
}
.demo-callout-h {
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: var(--space-1);
letter-spacing: -0.01em;
}
.demo-callout-p {
font-size: var(--text-sm);
color: var(--muted);
line-height: 1.45;
}
.demo-panel {
background: var(--paper);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 20px 60px rgba(14, 14, 12, 0.12),
0 4px 16px rgba(14, 14, 12, 0.08),
0 0 0 1px rgba(212, 255, 61, 0.18);
position: relative;
z-index: 2;
height: 540px;
display: flex;
flex-direction: column;
perspective: 1200px;
}
.demo-panel-chrome {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--ink);
color: var(--paper);
}
.demo-panel-logo {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: -0.02em;
display: inline-flex;
align-items: baseline;
}
.demo-panel-logo .logo-stem { background: var(--paper); }
.demo-panel-dots {
display: flex; gap: 6px;
}
.demo-panel-dots span {
width: 7px; height: 7px;
background: rgba(244, 239, 230, 0.3);
border-radius: 50%;
}
.demo-panel-tabs {
display: flex;
background: var(--cream);
padding: 0 18px;
border-bottom: 1px solid var(--border);
}
.demo-tab {
padding: 12px 14px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--muted);
border-bottom: 2px solid transparent;
transition: color var(--dur-fast) var(--ease-out);
}
.demo-tab.active {
color: var(--ink);
border-bottom-color: var(--coral);
}
.demo-panel-body {
flex: 1;
padding: var(--space-5);
position: relative;
overflow: hidden;
}
.demo-state {
position: absolute;
inset: var(--space-5);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.demo-state.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* State 1: scanning */
.demo-scan-spinner {
width: 56px; height: 56px;
border: 3px solid var(--border);
border-top-color: var(--coral);
border-radius: 50%;
margin: 24px auto var(--space-5);
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.demo-scan-text {
text-align: center;
font-size: var(--text-base);
margin-bottom: var(--space-5);
color: var(--muted);
}
.demo-scan-steps {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.demo-scan-step {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--muted);
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--cream);
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: var(--space-2);
}
.demo-scan-step::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--border-strong);
flex-shrink: 0;
}
.demo-scan-step.active { color: var(--ink); border-color: var(--coral); }
.demo-scan-step.active::before { background: var(--coral); animation: activity-pulse 1.2s ease-in-out infinite; }
.demo-scan-step.done::before { background: var(--acid); }
.demo-scan-step.done { color: var(--muted); }
/* State 2: detected */
.demo-detected-h {
font-family: var(--font-display);
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 2px;
}
.demo-detected-co {
font-size: var(--text-sm);
color: var(--muted);
margin-bottom: var(--space-4);
}
.demo-fit-row {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding: var(--space-3);
background: var(--cream);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.demo-fit-ring {
width: 60px; height: 60px;
flex-shrink: 0;
}
.demo-fit-arc {
transition: stroke-dashoffset 800ms var(--ease-out);
}
.demo-fit-num {
font-family: var(--font-display);
font-size: 36px;
line-height: 1;
letter-spacing: -0.03em;
}
.demo-fit-num span { font-size: 16px; opacity: 0.6; }
.demo-fit-label {
font-size: var(--text-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 2px;
}
.demo-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: var(--space-4);
}
.demo-badge {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 10px;
border-radius: var(--radius-pill);
border: 1px solid currentColor;
}
.demo-badge-fresh { color: #2e7d32; background: rgba(46, 125, 50, 0.08); border-color: rgba(46, 125, 50, 0.3); }
.demo-badge-hot { color: var(--coral); background: rgba(255, 107, 71, 0.1); border-color: rgba(255, 107, 71, 0.35); }
.demo-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
background: var(--acid);
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: var(--radius-pill);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
width: 100%;
}
.demo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 255, 61, 0.5); }
/* State 3: klepifying */
.demo-stream-h {
font-size: var(--text-base);
font-weight: 600;
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-2);
}
.demo-stream-h::before {
content: '';
width: 8px; height: 8px;
background: var(--coral);
border-radius: 50%;
animation: activity-pulse 1s ease-in-out infinite;
}
.demo-stream-progress {
height: 4px;
background: var(--border);
border-radius: var(--radius-pill);
margin-bottom: var(--space-4);
overflow: hidden;
}
.demo-stream-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--acid), var(--coral));
border-radius: var(--radius-pill);
transition: width 200ms linear;
}
.demo-stream-lines {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.demo-stream-line {
padding: var(--space-3);
background: var(--cream);
border-radius: var(--radius-sm);
border-left: 3px solid var(--coral);
opacity: 0;
transform: translateY(8px);
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
font-size: var(--text-xs);
line-height: 1.45;
}
.demo-stream-line.shown { opacity: 1; transform: translateY(0); }
.demo-stream-tag {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--coral);
margin-right: 8px;
font-weight: 700;
}
.demo-stream-text {
color: var(--ink);
}
.demo-stream-text.typing::after {
content: '▎';
color: var(--coral);
animation: caret 0.7s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
/* State 4: success */
.demo-success-check {
width: 64px; height: 64px;
background: var(--acid);
color: var(--ink);
border-radius: 50%;
margin: var(--space-2) auto var(--space-4);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--ink);
animation: pop 700ms var(--ease-spring);
box-shadow: 0 8px 24px rgba(212, 255, 61, 0.5);
}
.demo-success-h {
font-family: var(--font-display);
font-size: 28px;
text-align: center;
margin-bottom: var(--space-4);
letter-spacing: -0.02em;
}
.demo-success-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.demo-success-stats > div {
text-align: center;
padding: var(--space-2);
background: var(--cream);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 2px;
}
.demo-success-num {
font-family: var(--font-display);
font-size: 22px;
line-height: 1;
letter-spacing: -0.02em;
}
.demo-success-stats > div span:last-child {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ============ 3D CARD TILT (feature + pricing) ============ */
.feature-card, .pricing-card {
transform-style: preserve-3d;
transition: transform 200ms var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
will-change: transform;
}
.feature-card .tilt-content, .pricing-card .tilt-content {
transform: translateZ(20px);
transform-style: preserve-3d;
}
/* Spotlight effect — radial gradient that follows the cursor inside the card */
.feature-card, .pricing-card {
position: relative;
}
.feature-card .card-spotlight, .pricing-card .card-spotlight {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle 280px at var(--mx, 50%) var(--my, 50%),
rgba(212, 255, 61, 0.18),
transparent 60%
);
opacity: 0;
transition: opacity 400ms var(--ease-out);
z-index: 0;
}
.feature-card:hover .card-spotlight,
.pricing-card:hover .card-spotlight { opacity: 1; }
.feature-card { isolation: isolate; }
.pricing-card { isolation: isolate; }
.feature-card > *:not(.card-spotlight),
.pricing-card > *:not(.card-spotlight) { position: relative; z-index: 1; }
/* ============ SOUND TOGGLE (in nav) ============ */
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.sound-toggle {
background: transparent;
border: 1.5px solid var(--border-strong);
color: var(--muted);
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.sound-toggle:hover { color: var(--ink); border-color: var(--ink); transform: scale(1.05); }
.sound-toggle .sound-on { display: none; }
.sound-toggle .sound-off { display: block; }
.sound-toggle.on .sound-on { display: block; color: var(--coral); }
.sound-toggle.on .sound-off { display: none; }
.sound-toggle.on { border-color: var(--coral); }
@media (max-width: 600px) { .sound-toggle { display: none; } }
/* ============ LIVE COUNTER ============ */
@keyframes counter-in {
from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
to { opacity: 1; transform: translateY(0) rotate(-1deg); }
}
@keyframes digit-flip {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(-6px) scale(1.08); color: var(--coral); }
100% { transform: translateY(0) scale(1); color: var(--ink); }
}
/* ============ SECTION DIVIDERS (animated SVG waves) ============ */
.section-divider {
height: 80px;
overflow: hidden;
margin: 0;
pointer-events: none;
}
.section-divider svg {
display: block;
width: 100%;
height: 100%;
}
.divider-path {
fill: var(--cream);
/* Animate the path's d via stroke-dashoffset feel — but for fill paths
* we use CSS transform-origin tricks. Simpler approach: keep the shape
* static, animate the section above to "flow" into the one below via
* the wave. This adds rhythm without jankiness. */
transition: d 1.6s var(--ease-out);
}
/* The "flip" divider points the wave the other direction visually */
.section-divider-flip svg { transform: rotate(180deg); }
/* Color the divider to match the section ABOVE (so the wave reads as the
* section above receding) — this gets per-section overrides below. */
.problem + .section-divider .divider-path { fill: var(--paper); }
.demo + .section-divider .divider-path { fill: var(--paper); }
.how + .section-divider .divider-path { fill: var(--paper); }
.features + .section-divider .divider-path { fill: var(--cream); }
.pricing + .section-divider .divider-path { fill: var(--paper); }
/* The hero divider transitions from hero (paper) to problem (paper) — neutral */
.hero + .section-divider .divider-path { fill: var(--paper); }
/* Subtle wave shimmer animation — repaints a gradient overlay */
.divider-path {
filter: drop-shadow(0 -2px 0 rgba(14, 14, 12, 0.04));
}
/* WebGL fire shader removed — was producing a smoky orange wash around
* the CTA card that competed with the headline. CTA now sits clean on
* the section's cream background. */
/* ============ KONAMI EASTER EGG ============ */
@keyframes konami-zoom {
0% { left: -200px; transform: translateY(-50%) rotate(0deg) scale(0.8); opacity: 0; }
8% { opacity: 1; }
50% { transform: translateY(-50%) rotate(180deg) scale(1.3); }
92% { opacity: 1; }
100% { left: calc(100% + 200px); transform: translateY(-50%) rotate(360deg) scale(0.8); opacity: 0; }
}
@keyframes konami-flash {
0% { opacity: 0; }
20% { opacity: 0.5; }
100% { opacity: 0; }
}
/* ============ HERO BLEED WORDMARK ============
* Giant outlined "klepify." set to bleed off the right edge of the hero.
* Pure typographic architecture — sits behind everything as decor.
* The text-stroke-only treatment keeps it from competing with the
* solid headline. */
@keyframes bleed-drift {
0% { transform: translate(0, 0); }
100% { transform: translate(-2vw, -1vw); }
}
/* ============================================================
POST-CLEANUP: ACCESSIBILITY + DESIGN-SYSTEM POLISH
============================================================
Quick wins from the design-critique + web-design-guidelines
audit. Applied across the whole page, layered AFTER the
per-section CSS so they win.
============================================================ */
/* Universal visible focus. Replaces any `outline: none` and
makes keyboard navigation legible across the brand palette. */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible { outline-color: var(--coral); outline-offset: 4px; }
.nav a:focus-visible, .nav-pill a:focus-visible { outline-color: var(--coral); }
/* Tabular numerals for everything that compares numbers. */
.stat-num, .stat-num span,
.r-mock-score-num, .r-mock-career-stat,
.receipts-marquee-stat,
.pricing-amount,
.demo-fit-num, .demo-success-num,
.atlas-stat .n {
font-variant-numeric: tabular-nums;
}
/* ============================================================
03 · THE ENGINE — How + Demo merged
============================================================ */
.engine {
/* background + padding now controlled by .section-bezel (the section
has both classes). Leaving this rule empty would be dead code, so
it's been preserved as a marker for the section without conflicting
properties. */
}
.engine-deck {
max-width: 56ch;
font-size: 1.05rem;
line-height: 1.65;
color: rgba(14, 14, 12, 0.72);
margin-bottom: var(--space-7);
}
.engine-steps {
list-style: none;
padding: 0;
margin: 0 0 var(--space-9);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.engine-steps { grid-template-columns: 1fr; }
}
.engine-step {
padding: 28px 24px 22px;
background: var(--cream);
border: 1px solid rgba(14, 14, 12, 0.08);
border-radius: 16px;
position: relative;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}
.engine-step:hover {
transform: translateY(-3px);
border-color: rgba(14, 14, 12, 0.2);
}
.engine-step-num {
font-family: var(--font-display);
font-style: italic;
font-size: 56px;
line-height: 1;
color: var(--coral);
margin-bottom: 14px;
}
.engine-step h3 {
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1.15;
font-weight: 400;
color: var(--ink);
margin: 0 0 8px;
}
.engine-step p {
font-size: 0.98rem;
line-height: 1.6;
color: rgba(14, 14, 12, 0.7);
margin: 0;
}
/* Engine wraps the existing .demo styles — no override needed. */
.engine-demo {
margin-top: var(--space-7);
/* Even 32px inset on all sides so the demo block doesn't butt
against the ink-frame edges (or the container side padding) of
the engine section. Acts like a self-contained editorial card. */
padding: var(--space-6);
}
/* ============================================================
05 · THE RECEIPTS — unified feature showcase
============================================================ */
.receipts {
/* background + padding now controlled by .section-bezel. color stays
because .receipts .section-bezel-frame is also ink (dark-section
override) and the cream text is what makes it readable. */
color: var(--paper);
position: relative;
}
.receipts::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(212, 255, 61, 0.07), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(255, 107, 71, 0.05), transparent 40%);
pointer-events: none;
}
.receipts .container { position: relative; z-index: 1; }
.receipts .section-eyebrow { color: var(--acid); }
.receipts .section-h { color: var(--paper); }
.receipts .section-h em { color: var(--acid); }
/* Live marquee at the top */
.receipts-marquee {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 18px;
background: rgba(244, 239, 230, 0.05);
border: 1px solid rgba(244, 239, 230, 0.12);
border-radius: 999px;
margin-bottom: 36px;
font-family: var(--font-mono);
font-size: 12px;
}
.receipts-marquee-tag {
background: var(--coral);
color: var(--paper);
padding: 3px 9px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.08em;
font-size: 10px;
}
.receipts-marquee-stat {
font-family: var(--font-display);
font-size: 22px;
color: var(--acid);
}
.receipts-marquee-label {
color: rgba(244, 239, 230, 0.6);
font-size: 12px;
}
.receipts-marquee-link {
margin-left: 6px;
color: var(--paper);
text-decoration: none;
border-bottom: 1px solid rgba(244, 239, 230, 0.25);
transition: color 0.2s, border-color 0.2s;
}
.receipts-marquee-link:hover {
color: var(--acid);
border-color: var(--acid);
}
.receipts-deck {
max-width: 64ch;
font-size: 1.05rem;
line-height: 1.65;
color: rgba(244, 239, 230, 0.75);
margin-bottom: var(--space-9);
}
.receipts-tier { margin-bottom: var(--space-9); }
.receipts-tier-h {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}
.receipts-tier-num {
font-family: var(--font-display);
font-style: italic;
font-size: 34px;
line-height: 1;
color: var(--coral);
}
.receipts-tier-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.65);
font-weight: 700;
}
/* Unified ladder for all three receipts grids:
- ≥901px: native column count (2-up / 3-up / 2-up)
- 720–900px: 2-up everywhere (single intermediate step)
- ≤720px: 1-up everywhere
Previously receipts-pro had an extra 600px breakpoint that the other
two didn't, so between 720–900px the section lurched (pro still 2-up
while free + public already 1-up). One ladder = one rhythm. */
.receipts-free-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 18px;
}
.receipts-pro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.receipts-public-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 900px) {
.receipts-pro-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.receipts-free-grid,
.receipts-pro-grid,
.receipts-public-grid { grid-template-columns: 1fr; }
}
/* ---- Receipt cards ---- */
.r-card {
padding: 26px 24px;
background: rgba(244, 239, 230, 0.05);
border: 1px solid rgba(244, 239, 230, 0.1);
/* Inner radius — these cards live INSIDE a 22px section-bezel-frame,
so they use the smaller --radius-card-inner to read as nested. */
border-radius: var(--radius-card-inner);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, background 0.3s;
position: relative;
}
.r-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 255, 61, 0.35);
background: rgba(244, 239, 230, 0.07);
}
.r-card-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--acid);
letter-spacing: 0.14em;
margin-bottom: 12px;
}
.r-card-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(244, 239, 230, 0.6);
padding: 4px 9px;
border-radius: 999px;
border: 1px solid rgba(244, 239, 230, 0.18);
margin-bottom: 14px;
}
.r-card-title {
font-family: var(--font-display);
font-size: 1.95rem;
line-height: 1.05;
color: var(--paper);
font-weight: 400;
margin: 0 0 10px;
}
.r-card-desc {
font-size: 0.95rem;
line-height: 1.55;
color: rgba(244, 239, 230, 0.72);
margin: 0 0 16px;
}
.r-card-desc em { font-style: italic; color: var(--paper); }
.r-card-desc strong { color: var(--acid); font-weight: 500; }
/* Cards in the free tier get a stronger highlight */
.r-card-ghost-score, .r-card-career {
background: rgba(244, 239, 230, 0.07);
border-color: rgba(212, 255, 61, 0.22);
}
.r-card-ghost-score::before, .r-card-career::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: var(--acid);
/* Match the parent .r-card's --radius-card-inner (16px) so the acid
stripe's top corners follow the card silhouette. */
border-radius: var(--radius-card-inner) var(--radius-card-inner) 0 0;
opacity: 0.5;
}
.r-card-ghost-score .r-card-title { font-size: 2.4rem; }
/* Card mocks */
.r-card-mock {
padding: 14px;
background: var(--ink);
border: 1px solid rgba(244, 239, 230, 0.1);
border-radius: 12px;
font-family: var(--font-mono);
font-size: 11.5px;
}
.r-mock-score { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.r-mock-score-num {
font-family: var(--font-display);
font-size: 2.8rem;
line-height: 1;
color: var(--coral);
}
.r-mock-score-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(244, 239, 230, 0.55);
margin-bottom: 4px;
}
.r-mock-score-verdict { color: var(--coral); font-weight: 700; }
.r-mock-score-cause {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--paper);
}
.r-mock-score-hint {
font-size: 9.5px;
color: rgba(244, 239, 230, 0.5);
letter-spacing: 0.04em;
text-transform: lowercase;
margin-top: 4px;
}
.r-mock-career-title {
font-family: var(--font-display);
font-size: 18px;
color: var(--paper);
margin-bottom: 6px;
}
.r-mock-career-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
color: rgba(244, 239, 230, 0.85);
}
.r-mock-career-stat { font-weight: 600; }
.r-mock-career-sep { opacity: 0.4; }
.r-mock-career-meta {
font-size: 10.5px;
color: rgba(244, 239, 230, 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.r-mock-acid { color: var(--acid); }
/* ---- Tile-links to Atlas + Graveyard ---- */
.r-tile {
display: block;
padding: 28px 26px;
background: rgba(244, 239, 230, 0.05);
border: 1px solid rgba(244, 239, 230, 0.1);
/* Same nested-card treatment as .r-card — both live inside the
receipts section bezel and should read as a single card family. */
border-radius: var(--radius-card-inner);
color: var(--paper);
text-decoration: none;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
position: relative;
overflow: hidden;
}
.r-tile:hover {
transform: translateY(-4px);
border-color: rgba(255, 107, 71, 0.4);
}
.r-tile-tag {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--coral);
margin-bottom: 12px;
font-weight: 700;
}
.r-tile-title {
font-family: var(--font-display);
font-size: 2.1rem;
line-height: 1.05;
color: var(--paper);
font-weight: 400;
margin: 0 0 10px;
}
.r-tile-desc {
font-size: 0.95rem;
line-height: 1.55;
color: rgba(244, 239, 230, 0.72);
margin: 0 0 18px;
}
.r-tile-cta {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--acid);
margin-top: 12px;
}
/* Mini-treemap inside the Atlas tile */
.r-tile-mini-treemap {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 3px;
width: 100%;
aspect-ratio: 7 / 5;
background: var(--paper);
padding: 3px;
border-radius: 8px;
margin: 8px 0 4px;
}
.r-tile-mini-treemap > div { border-radius: 3px; }
/* Headstone inside the Graveyard tile */
.r-tile-headstone {
padding: 18px 16px 14px;
background: rgba(14, 14, 12, 0.6);
border: 1px solid rgba(244, 239, 230, 0.1);
border-radius: 10px 10px 6px 6px;
text-align: center;
margin: 8px 0 4px;
position: relative;
}
.r-tile-headstone-co {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: rgba(244, 239, 230, 0.55);
margin-bottom: 6px;
}
.r-tile-headstone-title {
font-family: var(--font-display);
font-size: 18px;
color: var(--paper);
margin-bottom: 8px;
line-height: 1.15;
}
.r-tile-headstone-cause {
font-family: var(--font-mono);
font-size: 10px;
color: var(--coral);
margin-bottom: 10px;
}
.r-tile-headstone-rip {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: rgba(244, 239, 230, 0.4);
letter-spacing: 0.14em;
}
.receipts-foot {
text-align: center;
padding-top: var(--space-7);
border-top: 1px solid rgba(244, 239, 230, 0.1);
}
.receipts-foot .btn { margin-bottom: 18px; }
.receipts-foot-link {
display: block;
color: rgba(244, 239, 230, 0.7);
text-decoration: none;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
transition: color 0.2s;
}
.receipts-foot-link:hover { color: var(--acid); }
/* ============================================================
06 · THE CLOSER — pricing + FAQ in one section
============================================================ */
.closer {
/* background + padding now controlled by .section-bezel. */
}
/* Closer used to be a 2-column pricing+FAQ layout. FAQ removed —
now the grid is just a wrapper centering the pricing card pair. */
.closer-grid {
display: block;
margin-bottom: var(--space-7);
}
.closer-pricing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 880px;
margin: 0 auto;
}
@media (max-width: 720px) {
.closer-pricing { grid-template-columns: 1fr; gap: 18px; }
}
.closer-faq {
background: #fff;
border: 1px solid rgba(14, 14, 12, 0.1);
/* Inner card inside the closer section bezel — follow the same
nested-card radius as .r-card and .r-tile. */
border-radius: var(--radius-card-inner);
padding: 26px 26px 16px;
}
.closer-faq-h {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--coral);
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(14, 14, 12, 0.08);
}
.closer-foot {
text-align: center;
color: rgba(14, 14, 12, 0.65);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
.closer-foot a { color: var(--ink); border-bottom: 1px solid rgba(14, 14, 12, 0.3); }
.closer-foot a:hover { color: var(--coral); border-color: var(--coral); }
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ============================================================
HERO v4 — literal layout copy of the reference video's frame
============================================================
Black ink bezel around a white paper frame.
Massive KLEPIFY word bleeding off both side edges.
Acid-yellow band stretching edge-to-edge across ~70% of the
frame height. Klep dead-center on the band at ~30vw width.
Six chunky shape stamps clustered on the band, three per side.
Editorial mono micro-paragraphs pinned bottom-left + bottom-right.
Install pill under the left paragraph. Vertical mono tickers
running on both outer side walls.
============================================================ */
/* Hero sized to fit EXACTLY in the visible viewport, accounting for the
sticky nav. JS publishes --nav-h on :root (see app.js); we fall back
to 80px if JS hasn't run yet (FOUC-safe).
--hero-h and --hero-w are published here so child rules can size
interior elements proportionally to the actual hero box, not to the
raw viewport. That fixes the "Klep cut off on wide-but-short
viewports" bug — when the viewport is short, hero-h is small, and
Klep scales down with it. */
.hv4 {
--hero-h: calc(100vh - var(--nav-h, 80px));
--hero-w: 100vw;
position: relative;
padding: 14px;
background: var(--ink);
height: var(--hero-h);
/* Floor allows the hero to compact on short phones (≤540px tall)
instead of forcing a 540px box that pushes content below the fold
AND keeps Klep over-sized via the clamp ideals. clamp's middle
term tracks viewport height with a soft floor of 440px so the
headline + Klep still have room to breathe. */
min-height: clamp(440px, 78vh, 540px);
overflow: hidden;
display: flex;
align-items: stretch;
justify-content: stretch;
isolation: isolate;
box-sizing: border-box;
}
/* Side vertical tickers — running up the black bezel walls */
.hv4-side {
position: absolute;
top: 0;
bottom: 0;
width: 14px;
overflow: hidden;
z-index: 4;
pointer-events: none;
}
.hv4-side-l { left: 0; }
.hv4-side-r { right: 0; }
.hv4-side-track {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px 0;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 9px;
letter-spacing: 0.16em;
color: rgba(244, 239, 230, 0.55);
text-transform: uppercase;
white-space: nowrap;
writing-mode: vertical-rl;
animation: hv4-side-scroll 60s linear infinite;
}
.hv4-side-r .hv4-side-track {
animation-direction: reverse;
}
.hv4-side-track > span { flex-shrink: 0; }
@keyframes hv4-side-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
/* Inner white "paper" frame inside the black bezel.
Explicit min-height so the absolutely-positioned children's
percentage positions resolve to meaningful pixel values. Without
this, the frame collapses to its content height and the band/word
crash together at the top. */
.hv4-frame {
position: relative;
width: 100%;
height: 100%; /* Fill the .hv4 parent — no fixed min-height
that would push contents below the fold. */
background: var(--paper);
/* Shared with .section-bezel-frame / .problem-frame / .pricing-card
so every top-level card on the page reads the same silhouette. */
border-radius: var(--radius-card);
overflow: hidden;
display: block;
isolation: isolate;
}
/* THE COMPOSITION (v6 — flipped, "the résumés arrive" scene):
┌─────────────────────────────┐
│ │
│ ▓▓▓ K L E P I F Y ▓▓▓▓▓▓▓ │ <- Wordmark big at top on paper
│ │
│ 📄 📄 │ <- Résumés drop from mid-frame
│ 📄 📄 │ (translateY animation)
│ 📄 📄 │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ <- Acid band at the bottom
│ ░░░░░░░ ┌──────┐ ░░░░░░░░░░ │
│ ░░░░░░░ │ KLEP │ ░░░░░░░░░░ │ <- Klep at bottom-center on band
│ ░░░░░░░ └──────┘ ░░░░░░░░░░ │
│ [copy] [copy] │
└─────────────────────────────┘
Klep starts SAD; as résumés arrive, he cheers up. */
/* KLEPIFY wordmark — anchored to the top of the frame, bold ink-black
on paper. No band behind it — it carries weight on its own. */
.hv4-bleed {
position: absolute;
top: -9%; /* bleed off the top edge — pulls wordmark up
to reduce visual overlap with Klep's head */
left: -2%;
right: -2%;
/* HUGE wordmark — spans frame edge-to-edge and bleeds past the
sides. Scales with the smaller of (hero height %, viewport width %).
With 7 letters at letter-spacing -0.05em, font-size × 3.85 ≈
word width. Multipliers bumped (0.50→0.58, 0.28→0.32) to make
the word a little wider, and clamp ceiling raised (480→540) to
give it room to grow on tall viewports. */
--bleed-ideal: min(calc(0.58 * var(--hero-h)), calc(0.32 * var(--hero-w)));
/* Floors dropped from 120/140 → 56/64 so the wordmark actually
tracks the clamp ideal on narrow phones. Previously on a 360px-wide
phone the ideal would compute to ~115px and the 120px floor would
lock the wordmark at the floor instead of letting it shrink. */
font-size: clamp(56px, var(--bleed-ideal), 540px);
height: clamp(64px, calc(var(--bleed-ideal) * 1.05), 600px);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans, "Familjen Grotesk", sans-serif);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--ink);
white-space: nowrap;
pointer-events: none;
z-index: 3;
animation: hv4-bleed-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
text-shadow:
0 6px 18px rgba(14, 14, 12, 0.18),
0 0 32px rgba(212, 255, 61, 0.12);
}
@keyframes hv4-bleed-in {
from { opacity: 0; transform: scaleY(1.18); }
to { opacity: 1; transform: scaleY(1); }
}
/* Acid neon band — anchored to the BOTTOM. Klep stands on it. The
band grows in from below (scaleY instead of scaleX) so it feels like
ground rising up to receive him. */
.hv4-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48%;
background: var(--acid);
z-index: 2;
transform-origin: center bottom;
animation: hv4-band-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards,
hv4-neon-pulse 4.5s ease-in-out 0.8s infinite;
box-shadow:
0 0 80px 12px rgba(212, 255, 61, 0.42),
0 0 36px 6px rgba(212, 255, 61, 0.55),
inset 0 0 0 2px rgba(244, 239, 230, 0.18),
inset 0 0 24px rgba(255, 255, 255, 0.18);
}
@keyframes hv4-band-rise {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@keyframes hv4-neon-pulse {
0%, 100% {
box-shadow:
0 0 80px 12px rgba(212, 255, 61, 0.42),
0 0 36px 6px rgba(212, 255, 61, 0.55),
inset 0 0 0 2px rgba(244, 239, 230, 0.18),
inset 0 0 24px rgba(255, 255, 255, 0.18);
}
50% {
box-shadow:
0 0 100px 14px rgba(212, 255, 61, 0.55),
0 0 44px 8px rgba(212, 255, 61, 0.7),
inset 0 0 0 2px rgba(244, 239, 230, 0.22),
inset 0 0 30px rgba(255, 255, 255, 0.22);
}
}
/* Falling résumés — 6 paper rectangles that drop from mid-frame down
to scatter around Klep at the bottom. Each résumé:
- has a final position (top: %, left/right: %)
- starts with translateY(-180px) — well above its final position
- animates back to translateY(0) with a slight back-easing bounce
- has a staggered animation-delay so they don't all land at once
Their final positions cluster around Klep without overlapping his
center mass — three on each side, varying depths into the band. */
.hv4-shape {
position: absolute;
/* z-index 4 puts résumés in FRONT of the wordmark (z:3) so they
look like they're falling past the letters, but still BEHIND
Klep (z:5) so he stays the focal point. */
z-index: 4;
opacity: 0;
transform: translateY(-180px) rotate(-14deg);
animation: hv4-shape-fall 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
filter: drop-shadow(0 6px 14px rgba(14, 14, 12, 0.22));
}
@keyframes hv4-shape-fall {
0% { opacity: 0; transform: translateY(-180px) rotate(-18deg); }
20% { opacity: 1; }
80% { transform: translateY(10px) rotate(6deg); }
100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
/* Résumé positioning — strict "blank space" rules:
- The editorial copy at the bottom corners wraps to ~5 lines + an
install button = ~130px tall, occupying bottom 0% to ~16% of an
830px hero. Therefore all résumés must have `bottom > 22%` to
guarantee no overlap (with a 6% safety margin).
- The copy is ~13% wide horizontally (36ch on a 1824 frame).
Therefore all résumés' inner edge must be `left > 15%` (or
`right > 15%`) to clear the copy column.
- Klep's container spans x=35-65% when centered at 540px wide.
Therefore résumés must end before x=33% (left side) or start
after x=67% (right side).
- The KLEPIFY letters' bottom edge is at ~y=403 on 830px hero
(~bottom 51%). Therefore résumés' top edge must be below y=403,
which (given résumé heights up to ~170px) means `bottom < 36%`.
Combined: bottom 22-32%, left/right 15-30%. */
.hv4-s1 {
--r1: min(calc(0.13 * var(--hero-h)), calc(0.08 * var(--hero-w)));
width: clamp(52px, var(--r1), 130px);
height: clamp(71px, calc(var(--r1) * 1.375), 179px);
bottom: 23%;
left: 17%;
animation-delay: 0.5s;
}
.hv4-s2 {
--r2: min(calc(0.15 * var(--hero-h)), calc(0.09 * var(--hero-w)));
width: clamp(58px, var(--r2), 150px);
height: clamp(80px, calc(var(--r2) * 1.375), 207px);
bottom: 30%;
left: 22%;
animation-delay: 1.1s;
}
.hv4-s3 {
--r3: min(calc(0.11 * var(--hero-h)), calc(0.07 * var(--hero-w)));
width: clamp(44px, var(--r3), 110px);
height: clamp(60px, calc(var(--r3) * 1.375), 151px);
bottom: 31%;
left: 16%;
animation-delay: 1.7s;
}
/* RIGHT cluster — mirrored. */
.hv4-s4 {
--r4: min(calc(0.13 * var(--hero-h)), calc(0.08 * var(--hero-w)));
width: clamp(52px, var(--r4), 130px);
height: clamp(71px, calc(var(--r4) * 1.375), 179px);
bottom: 23%;
right: 17%;
animation-delay: 0.8s;
}
.hv4-s5 {
--r5: min(calc(0.15 * var(--hero-h)), calc(0.09 * var(--hero-w)));
width: clamp(58px, var(--r5), 150px);
height: clamp(80px, calc(var(--r5) * 1.375), 207px);
bottom: 30%;
right: 22%;
animation-delay: 1.4s;
}
.hv4-s6 {
--r6: min(calc(0.11 * var(--hero-h)), calc(0.07 * var(--hero-w)));
width: clamp(44px, var(--r6), 110px);
height: clamp(60px, calc(var(--r6) * 1.375), 151px);
bottom: 31%;
right: 16%;
animation-delay: 2.0s;
}
/* Klep — anchored to upper-middle of the frame, dead-center horizontally.
left:50% + translateX(-50%) is the standard centering trick for an
absolutely-positioned child. Every keyframe in the drop/breathe animations
has to carry that translateX(-50%) through, or he flies off to the right
the instant the animation starts overwriting his transform. */
/* Klep — anchored to the BOTTOM of the frame, dead-center horizontally,
sitting on the acid band. He rises up from below the band on load
(translateY positive → 0), then settles into idle breathing once
the cheer-up sequence finishes. Every keyframe must carry
translateX(-50%) or he slides sideways the moment that animation's
transform takes over. */
.hv4-klep {
position: absolute;
z-index: 5;
bottom: 0%; /* sit at the frame's bottom edge — adds more
separation from the KLEPIFY wordmark above */
left: 50%;
/* Klep dominates the lower 65% of the hero, extending UP from the
band into the wordmark zone (he's z-index 5, wordmark z-index 3,
so he sits in front). 0.65 × hero-h gives him the FORECASTS-rabbit
proportions from the reference; 0.38 × viewport-w prevents him
from getting absurdly wide on ultrawide displays. Floor lowered
to 120px so on a 360px-wide phone Klep actually tracks the clamp
ideal (~137px = 38% of viewport) instead of locking at 220px
(61% of viewport — crowded everything else off-screen). Ceiling
580px so he doesn't look ridiculous on 4K. */
--klep-ideal: min(calc(0.65 * var(--hero-h)), calc(0.38 * var(--hero-w)));
width: clamp(120px, var(--klep-ideal), 580px);
height: clamp(120px, var(--klep-ideal), 580px);
transform: translateX(-50%) translateY(120%);
/* Single-act choreography (the user wanted Klep to stay still):
- 0.0s–0.9s: rise from below the band, settle to position
- 0.9s+ : stay put, dead-center, forever
`forwards` keeps the final keyframe pinned so he doesn't snap
back to translateY(120%) after the animation ends. Face transition
(sad → happy) still happens via opacity, but his BODY doesn't
move once he's risen. */
animation: hv4-klep-rise 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
@keyframes hv4-klep-rise {
0% { transform: translateX(-50%) translateY(120%) rotate(-4deg); opacity: 0.4; }
100% { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; }
}
/* SAD ↔ HAPPY face transition.
On load: sad face visible, happy hidden.
At 2.6s (after several résumés have arrived), they cross-fade.
The face groups are siblings inside the SVG; we toggle their opacity
via animation rather than display:none so the transition is smooth. */
.hv4-klep .klep-face-sad {
opacity: 1;
animation: klep-face-sad-fade 0.5s ease 2.6s forwards;
}
.hv4-klep .klep-face-happy {
opacity: 0;
animation: klep-face-happy-fade 0.5s ease 2.6s forwards;
}
@keyframes klep-face-sad-fade {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes klep-face-happy-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Greeting speech bubble — anchored at Klep's BOTTOM-RIGHT region.
Bubble's LEFT edge sits at ~62% of Klep's width (just past his right
shoulder area). Grows rightward into the frame. Tail is on the
bubble's TOP-LEFT pointing UP-LEFT back at Klep's body. max-width
tuned so it doesn't extend past .hv4-frame's right edge (which has
overflow:hidden) on standard desktop/tablet viewports. */
.hv4-klep-bubble {
position: absolute;
bottom: 4%; /* near Klep's bottom edge */
left: 62%; /* right side of Klep */
z-index: 6;
padding: 12px 22px;
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 22px;
font-family: var(--font-sans, "Familjen Grotesk", sans-serif);
font-weight: 700;
font-size: clamp(13px, 1.4vw, 19px);
line-height: 1.3;
letter-spacing: -0.01em;
/* Tight enough to fit in the frame's right strip (~30-35% of frame
width on most viewports). Wraps the 40-char copy to ~3 lines. */
max-width: clamp(180px, 20vw, 280px);
text-align: left;
word-wrap: break-word;
pointer-events: none;
box-shadow: 4px 4px 0 0 var(--acid),
0 8px 18px rgba(14, 14, 12, 0.18);
opacity: 0;
transform: scale(0.6) translateY(8px);
/* Anchor the scale-in to the tail position so the pop feels like
Klep is "speaking" rather than the bubble parachuting in. */
transform-origin: top left;
animation: hv4-klep-bubble-show 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards;
}
/* Tail — small diamond on bubble's TOP-LEFT, pointing UP-LEFT at Klep */
.hv4-klep-bubble::after {
content: "";
position: absolute;
left: 14px;
top: -10px;
width: 18px;
height: 18px;
background: var(--paper);
border-top: 2px solid var(--ink);
border-left: 2px solid var(--ink);
transform: rotate(45deg);
border-top-left-radius: 4px;
}
@keyframes hv4-klep-bubble-show {
0% { opacity: 0; transform: scale(0.6) translateY(8px); }
60% { opacity: 1; transform: scale(1.08) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Editorial copy blocks pinned at the bottom-left + bottom-right */
.hv4-copy {
position: absolute;
z-index: 6;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.04em;
line-height: 1.55;
color: var(--ink);
text-transform: uppercase;
/* Was 36ch which forced an additional wrap on each
-segment.
Now 60ch so the explicit
s in the markup are the SOLE source
of line breaks. Result: copy renders on exactly the number of
lines the markup declares. */
max-width: 60ch;
opacity: 0;
animation: hv4-copy-fade 0.6s ease-out forwards;
}
/* Symmetric bottom-corner anchors. Width capped at 280px on each side
so on viewports where Klep's clamp ideal grows past the safe-zone
width (Klep centered, ~30% empty on each side at desktop), the copy
stays in its lane instead of stretching toward him. On phones the
mobile media query hides both blocks entirely. */
.hv4-copy-l {
bottom: 28px;
left: 28px;
max-width: 280px;
animation-delay: 1.2s;
}
.hv4-copy-r {
bottom: 28px;
right: 28px;
max-width: 280px;
text-align: right;
animation-delay: 1.3s;
}
.hv4-copy-text { margin-bottom: 14px; }
/* Editorial marker glyphs (+, •) — picked out in brand coral so they
read as small editorial flourishes rather than disappearing into the
ink text. Slightly larger + bolder than the surrounding mono so they
feel like graphical bookends, not punctuation.
Applied to two contexts: (a) the bottom-copy blocks where parens used
to live, and (b) the side-ticker tags where each tag now has a small
coral lead-in dot. Use `font-style: normal` to reset the tag's
default italics in the ticker context. */
.hv4-mark {
color: var(--coral);
font-weight: 800;
font-size: 1.2em;
font-style: normal;
line-height: 1;
/* Optical nudge — at this font size the glyphs sit a hair below
the baseline. */
vertical-align: -0.04em;
margin: 0 0.15em;
}
/* In the vertical-rl side tickers, characters are upright but the
"lead-in" mark needs a touch of breathing room BEFORE the tag word
(above the word in vertical reading order). */
.hv4-side-track .hv4-mark {
display: inline-block;
margin: 0 0 4px 0;
font-size: 1.4em;
}
@keyframes hv4-copy-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Install pill under the left copy block */
.hv4-install {
display: inline-block;
padding: 10px 22px;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-family: var(--font-sans, "Familjen Grotesk", sans-serif);
font-weight: 600;
font-size: 13px;
text-decoration: none;
letter-spacing: 0.01em;
transition: transform 0.2s, background 0.2s;
box-shadow: 0 6px 18px rgba(14, 14, 12, 0.18);
}
.hv4-install:hover {
transform: translateY(-2px);
background: var(--coral);
}
/* Reduced motion: kill all animations, render in final state.
Klep's transform also gets reset, but we need to preserve his
translateX(-50%) centering — so override transform explicitly
rather than wiping it. Reduced-motion users see Klep in his HAPPY
state (sad face hidden, happy face visible) and résumés already
landed in their final positions. Bubble stays hidden. */
@media (prefers-reduced-motion: reduce) {
.hv4-bleed, .hv4-band, .hv4-copy, .hv4-side-track, .hv4-shape {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.hv4-klep {
animation: none !important;
opacity: 1 !important;
transform: translateX(-50%) !important;
}
.hv4-klep .klep-face-sad {
animation: none !important;
opacity: 0 !important;
}
.hv4-klep .klep-face-happy {
animation: none !important;
opacity: 1 !important;
}
.hv4-klep-bubble {
animation: none !important;
opacity: 0 !important;
}
}
/* Responsive — the base rules already scale via --hero-h / --hero-w,
so mobile mostly just needs presentational tweaks (padding, hiding
non-essential décor, dropping back-cluster résumés to declutter
Klep). The dimensional clamps in the base CSS handle the rest. */
@media (max-width: 720px) {
.hv4 {
padding: 8px;
/* Cap the hero height so it isn't a ~850px void on phones, and
override --hero-h so the wordmark / Klep clamps track THIS box
instead of full 100vh (which produced a huge empty paper gap). */
--hero-h: min(82vh, 560px);
height: var(--hero-h);
min-height: 0;
}
.hv4-frame { border-radius: 16px; }
/* Wordmark fit: the width-bound clamp term rendered ~530px of glyph in
a ~414px frame, clipping the K and Y. 26vw keeps KLEPIFY at the
screen edges with only a hair of intentional bleed. */
.hv4-bleed {
top: 4%;
left: 0;
right: 0;
font-size: clamp(52px, 26vw, 130px);
height: auto;
}
/* Taller acid stage shrinks the empty paper gap above the band. */
.hv4-band { height: 56%; }
/* Klep sized to the shorter hero. */
.hv4-klep {
--klep-ideal: min(calc(0.58 * var(--hero-h)), calc(0.42 * var(--hero-w)));
}
/* Speech bubble: give it an explicit width so it escapes the sliver of
space inside Klep's narrow box (which forced one-word-per-line). */
.hv4-klep-bubble {
left: 38%;
width: 180px;
max-width: none;
font-size: 14px;
padding: 10px 16px;
}
/* Declutter: drop back-cluster résumés, editorial copy, side tickers. */
.hv4-s3, .hv4-s6 { display: none; }
.hv4-copy { display: none; }
.hv4-side { display: none; }
}
/* ============================================================
05 · VS THE FIELD — comparison table
============================================================
Section sits between receipts and pricing. Light-bg (no dark override
like engine/receipts) so it breaks up the 2-consecutive-dark middle
and eases the eye into the paper closer. All table cells inherit
ink-on-paper for max scanability on a long comparison matrix. */
.vs-deck {
max-width: 64ch;
font-size: 1.05rem;
line-height: 1.6;
color: rgba(14, 14, 12, 0.72);
margin: 0 0 var(--space-7);
}
/* Horizontal-scroll wrapper for narrow viewports. The table doesn't
collapse to cards because rank-the-rows-side-by-side IS the value
prop of a comparison table — stacking it would defeat the purpose.
Scroll-hint shadow at the right edge tells users there's more. */
.vs-table-wrap {
overflow-x: auto;
overflow-y: visible;
margin: 0 calc(var(--space-6) * -1); /* bleed slightly past container padding so scroll feels natural */
padding: 0 var(--space-6);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.vs-table-wrap:focus-visible {
outline: 2px solid var(--acid);
outline-offset: 4px;
border-radius: var(--radius-card-inner);
}
.vs-table {
width: 100%;
min-width: 760px; /* below this width: horizontal scroll */
border-collapse: separate;
border-spacing: 0;
font-family: var(--font-sans, "Familjen Grotesk", sans-serif);
font-size: 0.93rem;
line-height: 1.45;
color: var(--ink);
}
.vs-table-caption {
caption-side: bottom;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(14, 14, 12, 0.45);
padding-top: var(--space-4);
text-align: left;
}
/* Screen-reader-only utility for the empty top-left cell. Visible
"Capability" label would make the table feel chatty; sr-only keeps
it polite for screen readers without crowding the eye. */
.vs-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.vs-table thead th {
text-align: left;
padding: 14px 16px;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(14, 14, 12, 0.6);
border-bottom: 2px solid var(--ink);
vertical-align: bottom;
white-space: nowrap;
}
.vs-table thead th.vs-col-us {
color: var(--ink);
font-weight: 800;
}
.vs-table tbody th {
text-align: left;
padding: 14px 16px;
font-weight: 600;
color: var(--ink);
border-bottom: 1px solid rgba(14, 14, 12, 0.08);
background: rgba(14, 14, 12, 0.02);
white-space: nowrap;
}
.vs-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid rgba(14, 14, 12, 0.08);
color: rgba(14, 14, 12, 0.72);
vertical-align: top;
}
/* Klepify column — full-width vertical highlight strip so it reads
as "our column" without needing any "(this is us)" label. Uses
--acid at very low opacity for warmth, with a stronger right and
left edge to define the strip clearly. */
.vs-table tbody td.vs-col-us,
.vs-table thead th.vs-col-us {
background: rgba(212, 255, 61, 0.12);
color: var(--ink);
font-weight: 600;
border-left: 2px solid var(--acid);
border-right: 2px solid var(--acid);
}
.vs-table tbody tr:last-child td.vs-col-us {
border-bottom: 2px solid var(--acid);
}
.vs-table thead th.vs-col-us {
border-top: 2px solid var(--acid);
}
/* Cell-content tokens — semantic value chips for the table cells.
.vs-yes = green/acid-flavored "we do this"
.vs-no = faded ink "they don't"
.vs-meh = coral "partial / user-dependent"
.vs-na = light-gray "not applicable"
These read in 200ms — that's the whole point of a comparison row. */
.vs-yes {
color: var(--ink);
font-weight: 600;
}
.vs-no {
color: rgba(14, 14, 12, 0.4);
}
.vs-meh {
color: var(--coral, #FF6B4A);
font-weight: 500;
}
.vs-na {
color: rgba(14, 14, 12, 0.3);
font-style: italic;
}
.vs-footnote {
margin: var(--space-6) 0 0;
font-size: 0.88rem;
line-height: 1.55;
color: rgba(14, 14, 12, 0.55);
max-width: 72ch;
}
.vs-footnote a {
color: var(--ink);
border-bottom: 1px solid var(--acid);
text-decoration: none;
}
.vs-footnote a:hover { color: var(--ink); border-bottom-width: 2px; }
.vs-footnote sup { color: var(--coral, #FF6B4A); font-weight: 700; }
/* ============================================================
PRICING TRANSPARENCY BADGES (closer section)
============================================================
Two callouts, both reinforcing "flat monthly, no weekly billing tricks":
1. .pricing-flat-badge sits below the section as a punchy
one-liner immediately after the price.
2. .pricing-flat-chip sits inside the Pro pricing card under the
$9.99 amount so comparison shoppers who skipped the headline still
see it. */
.pricing-flat-badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin: var(--space-3) 0 var(--space-5);
padding: 8px 16px 8px 14px;
background: rgba(212, 255, 61, 0.18);
border: 1.5px solid var(--acid);
border-radius: 999px;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
}
.pricing-flat-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--acid);
box-shadow: 0 0 0 3px rgba(212, 255, 61, 0.3);
flex-shrink: 0;
}
.pricing-flat-chip {
display: block;
margin: 4px 0 var(--space-3);
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--paper);
opacity: 0.85;
}
/* On the non-Pro (Free) card the chip color flips — but the Free card
doesn't render it, this rule is here as a future-proof if we ever
add it to other tiers. */
.pricing-card:not(.pricing-card-pro) .pricing-flat-chip {
color: rgba(14, 14, 12, 0.62);
}
/* ============================================================
VS — mobile refinements
============================================================ */
@media (max-width: 720px) {
.vs-deck { font-size: 0.98rem; }
.vs-table { font-size: 0.88rem; }
.vs-table thead th,
.vs-table tbody th,
.vs-table tbody td { padding: 12px 12px; }
.pricing-flat-badge {
font-size: 10.5px;
padding: 7px 12px 7px 10px;
letter-spacing: 0.06em;
}
}
/* ============================================================
VS-TRY — bottom-of-funnel free-scorer CTA under the vs-table
============================================================
Visitors who scrolled to the comparison are decision-stage.
This block offers a try-without-installing path — the free
scorer at /scorer/ — without taking them off the page. Ink
inverted so it stands out against the paper section body. */
.vs-try {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-5);
align-items: center;
background: var(--ink);
color: var(--paper);
border-radius: var(--radius-card);
padding: var(--space-6) var(--space-7);
margin: var(--space-7) 0 0;
}
@media (max-width: 720px) {
.vs-try { grid-template-columns: 1fr; padding: var(--space-5); }
}
.vs-try-text { min-width: 0; }
.vs-try-eyebrow {
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--acid); margin-bottom: 6px;
}
.vs-try-h {
font-family: var(--font-display, "Instrument Serif", serif);
font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15;
margin: 0 0 8px; font-weight: 400;
}
.vs-try-h em { color: var(--acid); font-style: italic; }
.vs-try p {
margin: 0; font-size: 0.95rem; line-height: 1.55;
color: rgba(244, 239, 230, 0.78); max-width: 56ch;
}
.vs-try-btn {
display: inline-flex; align-items: center; gap: 8px;
background: var(--acid); color: var(--ink);
font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
padding: 12px 22px; border-radius: 999px;
text-decoration: none;
transition: transform 200ms ease, box-shadow 200ms ease;
white-space: nowrap;
}
.vs-try-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(212, 255, 61, 0.4);
}
/* ============================================================
VS-COL-LINK — Teal column header → /compare/teal
============================================================
Subtle but discoverable. Underline-on-hover with acid accent
so it reads as "more info" rather than just decorative. */
.vs-col-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed rgba(14, 14, 12, 0.3);
padding-bottom: 1px;
transition: border-color 200ms ease, color 200ms ease;
}
.vs-col-link:hover,
.vs-col-link:focus-visible {
color: var(--ink);
border-bottom-color: var(--acid);
border-bottom-style: solid;
}
/* ============================================================
RECEIPTS — flat-monthly micro-callouts
============================================================
Two variants for the receipts section:
1. .receipts-flat-chip — small inline chip beside the Pro tier
label "Klepify Pro · $9.99/mo flat · no weekly"
2. .receipts-flat-foot — text under the bottom-CTA button
Both live on the dark (ink) receipts background so they use
acid + paper tones rather than the closer's ink-on-acid.
*/
.receipts-flat-chip {
display: inline-block;
margin-left: 12px;
padding: 3px 9px;
background: rgba(212, 255, 61, 0.18);
border: 1px solid rgba(212, 255, 61, 0.55);
border-radius: 999px;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--acid);
vertical-align: middle;
}
.receipts-flat-foot {
display: block;
margin-top: var(--space-3);
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.55);
}
@media (max-width: 720px) {
.receipts-flat-chip {
display: inline-block;
margin-left: 0;
margin-top: 6px;
font-size: 9px;
letter-spacing: 0.06em;
}
.receipts-flat-foot {
font-size: 9.5px;
letter-spacing: 0.06em;
}
}