/* ==========================================================================
KoalaFix — single source of truth
Editorial-cream × app-indigo. Centralized styling for all pages.
========================================================================== */
/* ----- Tokens ----- */
:root{
/* Ink (foregrounds) */
--ink:#0B0D12; --ink-2:#14171F; --ink-3:#1E222D;
/* Paper (cream backgrounds) */
--paper:#F6F2E8; --paper-2:#EFEADE; --paper-3:#E6DFCE;
/* Lines & muted */
--line:#D8D0B9; --line-soft:#E4DDCA;
--mute:#6B6A60; --mute-2:#8A897D;
/* Accent (Australian orange — used sparingly) */
--accent:#FF5A1F; --accent-2:#E54610; --accent-soft:#FFE4D6;
/* App indigo (primary CTA color) */
--app:#5C5CF0; --app-2:#4444CC; --app-3:#78A7FF;
--app-soft:rgba(92,92,240,0.12);
--app-glow:rgba(92,92,240,0.30);
--app-grad:linear-gradient(135deg,#454CF6 0%,#78A7FF 100%);
/* App dark surface (mockup only) */
--app-bg:#0F0F16; --app-bg2:#14141E; --app-bg3:#1A1A28; --app-bg4:#212136;
--app-border:#222232; --app-border2:#2A2A40;
--app-text:#E2E2EE; --app-text2:#9EA5C5; --app-text3:#6B7294;
--app-green:#27AE60;
/* Status */
--good:#2E7D32; --warn:#B06A00; --bad:#B0241C;
/* Type stacks — two families, no mono. */
--serif:"Fraunces","Times New Roman",Georgia,serif;
--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--app-sans:"Segoe UI Variable","Segoe UI","Inter",-apple-system,system-ui,sans-serif;
/* Layout */
--maxw:1180px; --gutter:28px;
/* Radii — consolidated to 3 + pill */
--r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
/* Shadows */
--shadow-1:0 1px 0 rgba(11,13,18,.06),0 1px 2px rgba(11,13,18,.04);
--shadow-2:0 10px 30px rgba(11,13,18,.08),0 2px 6px rgba(11,13,18,.04);
--shadow-3:0 24px 60px rgba(11,13,18,.18);
--shell:0 30px 80px rgba(10,12,28,.45),0 4px 16px rgba(10,12,28,.18);
}
/* ----- Reset ----- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--sans);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
font-feature-settings:"ss01","cv11";
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0}
/* ----- Utilities ----- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.025em}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.small-caps{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
/* Heading defaults — Fraunces ROMAN by default. Italic is opt-in. */
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:500;font-style:normal;letter-spacing:-.015em}
/* ----- Scroll reveal ----- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 600ms cubic-bezier(.22,1,.36,1),transform 600ms cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity 550ms cubic-bezier(.22,1,.36,1),transform 550ms cubic-bezier(.22,1,.36,1)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal,.reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
}
/* ==========================================================================
NAV
========================================================================== */
.nav{
position:sticky;top:0;z-index:50;
background:rgba(246,242,232,.82);
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid var(--line-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand .mark{width:30px;height:30px;border-radius:var(--r-sm);display:block;overflow:hidden}
.brand .mark img{width:100%;height:100%;display:block;object-fit:contain}
.brand .wordmark{font-size:17px;font-family:var(--sans)}
.brand .wordmark em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--ink-2)}
.nav-links a:hover{color:var(--app)}
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
border:1px solid transparent;
transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--app);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px var(--app-glow)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-app{background:var(--app-grad);color:#fff;box-shadow:0 6px 16px var(--app-glow)}
.btn-app:hover{transform:translateY(-1px);box-shadow:0 12px 28px var(--app-glow)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-2);transform:translateY(-1px)}
.nav-toggle{display:none;width:40px;height:40px;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.nav-toggle:hover{background:var(--paper-2)}
/* All three bars are 18×2 px; the 6px gap (even) keeps every bar on the same
pixel-row parity so they render with identical anti-aliasing on all DPRs. */
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-cta-mobile{display:none}
@media (max-width:820px){
.nav-toggle{display:inline-flex}
.nav-inner > div:last-child{display:none}
.nav-links{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line-soft);padding:8px 24px 20px;box-shadow:0 12px 24px rgba(0,0,0,.06);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease;z-index:50}
.nav.is-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}
.nav-links a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
.nav-links a.nav-cta-mobile{display:block !important;margin-top:14px;padding:14px 18px !important;background:var(--app-grad);color:#fff !important;text-align:center;border-radius:var(--r-md);font-weight:600;border-bottom:0 !important;box-shadow:0 6px 16px var(--app-glow)}
}
/* ==========================================================================
HERO (home + page mastheads share patterns)
========================================================================== */
.hero{padding:96px 0 56px;position:relative}
@media (max-width:820px){.hero{padding:48px 0 32px}}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.25}
.hero-bg .orb.a{width:380px;height:380px;background:var(--app-soft);top:-120px;right:-80px}
.hero-bg .orb.b{display:none} /* second orb removed — calmer hero */
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow,
.masthead .eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
color:var(--mute);text-transform:uppercase;margin-bottom:24px;
}
.hero .eyebrow{padding:6px 14px;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-pill)}
.hero h1,
.masthead h1{
/* Fraunces ROMAN by default — italic only on the .serif-italic span */
font-family:var(--serif);font-style:normal;font-weight:400;
font-size:clamp(44px,7vw,84px);line-height:1.02;letter-spacing:-.025em;
margin:0 0 24px;max-width:18ch;
font-optical-sizing:auto;
}
.hero h1 .sans,
.masthead h1 .sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.03em}
.hero h1 .serif-italic,
.masthead h1 .serif-italic{font-family:var(--serif);font-style:italic;font-weight:400}
.hero h1 .underline{background-image:linear-gradient(transparent 64%,rgba(92,92,240,.20) 64%);padding:0 4px}
.hero .lede,
.masthead .lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:0 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-actions .secondary-note{font-size:13px;color:var(--mute);font-family:var(--sans);letter-spacing:.02em;margin-left:4px}
.hero-sig{display:flex;gap:36px;align-items:center;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--mute)}
.hero-sig b{color:var(--ink);font-weight:600}
/* ==========================================================================
SECTIONS
Default rhythm — you should not need to think about this:
.section → 80px top + bottom (52px on mobile).
Two CSS rules make the default correct so authors don't reach for overrides:
1. ".section + .section" collapses the SECOND section's top padding
when two sections stack. Without this, defaults double (80 + 80 = 160px)
between every pair of sections, which is too much and tempts inline
style overrides.
2. ".section-card-bridge" + ":has(+ .section-card-bridge)" handles the
"card sitting between two major sections" case (e.g. the scorecard
tease on the home page). One class on ONE section — the bridge section
itself — gives the card 24px on both sides AND collapses the preceding
section's bottom padding so the framing is symmetric.
Variants and explicit overrides:
.section.alt → same rhythm, alt-color background band.
.section.section-card-bridge → 24px top + bottom (20px mobile). Wraps a
bridge card; also collapses preceding
section's padding-bottom. Use this for
scorecard-tease, security-teaser, etc.
.section.section-flush-top → 0px top. Use only when the previous element
is NOT a .section (e.g. first section after
the sticky nav). For .section + .section
the sibling rule already collapses top — no
modifier needed.
.section.section-flush-bottom→ 0px bottom. Symmetric. Rare.
Never use inline style="padding-top:..." — if the default + bridge pattern
don't fit your case, add a NEW named modifier here and use that instead.
PAGE-SPECIFIC section classes (e.g. .mission-section, .next-steps,
.faq-section, .scorecard-tease) should ALWAYS be paired with .section in
the HTML so they participate in the sibling-collapse rhythm. Their CSS
should only own *content* styling (borders, fonts, layout) — never
padding. The padding is .section's job.
========================================================================== */
.section{padding:80px 0;position:relative}
.section.alt{background:var(--paper-2)}
/* Stacked-section collapse — keeps inter-section gap at one padding (80px),
not doubled (160px). Modifiers below win on specificity. */
.section + .section{padding-top:0}
/* Card-bridge pattern — symmetric framing around a card. The :has() rule
collapses the previous section's bottom padding. Supported in all modern
browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
.section.section-card-bridge{padding-top:24px;padding-bottom:24px}
.section:has(+ .section-card-bridge){padding-bottom:0}
/* Explicit-flush overrides — rare. Used when the previous element isn't a
.section, so the sibling-collapse rule doesn't fire. */
.section.section-flush-top{padding-top:0}
.section.section-flush-bottom{padding-bottom:0}
/* ==========================================================================
LINK + BUTTON UTILITIES
Brand-color inline links:
.link-app → color:var(--app), weight 500. The default inline brand
link in unscoped contexts (homepage prose, mastheads,
policy contact lines). Mirrors the scoped .page-body a
/ .faq a / section.chunk a treatment.
.link-app-bold → same, weight 600. Use when the link is the action in a
callout-style sentence ("Email support", "Take the
scorecard"). Mirrors .dpa-callout a / .calendly-fallback a.
.link-accent → color:var(--accent-2), weight 600. Reserved for the
coral accent — currently only the about-us investor
contact line.
Dark-background CTA:
.btn-ghost.btn-ghost-inverse → swap the ghost button's ink border + text
for paper, for use on a dark band (e.g. .cta-band on
pricing). Distinct from .closer .btn-ghost, which uses
a softer translucent border for the brand "closer" feel.
Never use inline style="color:var(--app)" / style="color:var(--accent-2)"
on , and never style="border-color:var(--paper);color:var(--paper)" on a
button — add or reuse a class here instead so the palette stays grep-able.
========================================================================== */
.link-app{color:var(--app);font-weight:500}
.link-app-bold{color:var(--app);font-weight:600}
.link-accent{color:var(--accent-2);font-weight:600}
.btn-ghost.btn-ghost-inverse{border-color:var(--paper);color:var(--paper)}
.section-head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;margin-bottom:48px;align-items:end}
.section-head h2{
font-family:var(--serif);font-style:normal;font-weight:500;
font-size:clamp(32px,4.6vw,48px);line-height:1.08;letter-spacing:-.02em;margin:0;
font-optical-sizing:auto;
}
.section-head h2 .serif-italic{font-style:italic;font-weight:400}
.section-head h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.section-head p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0;max-width:52ch}
@media (max-width:820px){
.section{padding:52px 0}
.section.section-card-bridge{padding-top:20px;padding-bottom:20px}
.section-head{grid-template-columns:1fr;gap:14px;margin-bottom:32px}
.section-head p{font-size:15.5px}
}
/* ==========================================================================
HOME — PROBLEM BAND
========================================================================== */
.problem-band{background:var(--paper-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.problem-cell{padding:40px 36px;border-right:1px solid var(--line-soft)}
@media (max-width:820px){.problem-cell{padding:28px 24px}}
.problem-cell:last-child{border-right:0}
.problem-cell .num{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.problem-cell h3{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.2;margin:0 0 10px;letter-spacing:-.015em;color:var(--ink)}
.problem-cell p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
@media (max-width:820px){.problem-grid{grid-template-columns:1fr}.problem-cell{border-right:0;border-bottom:1px solid var(--line-soft)}.problem-cell:last-child{border-bottom:0}}
/* ==========================================================================
HOME — STEPS (how it works)
========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:stepCount}
.step{
background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:24px 22px;
display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
/* Step number — small label, not giant decorative italic */
.step::before{
counter-increment:stepCount;content:counter(stepCount,decimal-leading-zero);
position:absolute;top:18px;right:22px;
font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;
color:var(--mute);line-height:1;
}
.step h3{margin:0;font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.01em}
.step .sub{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app);margin:0}
.step p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
/* ==========================================================================
HOME — INTEGRATIONS
========================================================================== */
.integrations{
display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
}
.integrations .tile{
padding:28px 22px;
border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
background:transparent;transition:background .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
position:relative;
}
.integrations .tile:nth-child(4n){border-right:0}
.integrations .tile:nth-last-child(-n+4){border-bottom:0}
.integrations .tile:hover{background:rgba(92,92,240,.04);transform:translateY(-2px)}
/* Tile logo — Inter bold, not italic serif */
.integrations .tile .logo{
width:36px;height:36px;border-radius:var(--r-sm);background:var(--ink);color:var(--paper);
display:grid;place-items:center;
font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.02em;
transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.integrations .tile:hover .logo{background:var(--app-grad);color:#fff;transform:rotate(-3deg) scale(1.06)}
.integrations .tile h4{margin:6px 0 0;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em}
.integrations .tile p{margin:0;font-size:13px;color:var(--mute);line-height:1.45}
@media (max-width:820px){
.integrations{grid-template-columns:repeat(2,1fr)}
.integrations .tile:nth-child(4n){border-right:1px solid var(--line-soft)}
.integrations .tile:nth-child(2n){border-right:0}
.integrations .tile:nth-last-child(-n+4){border-bottom:1px solid var(--line-soft)}
.integrations .tile:nth-last-child(-n+2){border-bottom:0}
}
.integrations-note{
margin-top:20px;padding:18px 22px;border:1px dashed var(--line);border-radius:var(--r-md);
background:var(--paper-2);font-size:14px;color:var(--ink-2);display:flex;gap:12px;align-items:flex-start;
}
.integrations-note .dot{width:8px;height:8px;border-radius:50%;background:var(--app);margin-top:7px;flex-shrink:0;box-shadow:0 0 0 4px var(--app-soft)}
/* ==========================================================================
HOME — APP MOCKUP (dark surface — its own world)
========================================================================== */
/* .app-section padding removed — section now uses .section default rhythm */
.app-shell{
background:var(--app-bg);color:var(--app-text);
border-radius:var(--r-lg);padding:0;box-shadow:var(--shell);overflow:hidden;
font-family:var(--app-sans);position:relative;
}
.app-shell::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(50% 60% at 0% 0%,rgba(92,92,240,.15),transparent 60%),radial-gradient(40% 40% at 100% 100%,rgba(120,167,255,.08),transparent 60%);
}
.app-titlebar{
height:40px;display:flex;align-items:center;gap:14px;padding:0 16px;
background:#111118;border-bottom:1px solid var(--app-border);position:relative;z-index:1;
}
.app-titlebar .traffic{display:flex;gap:6px}
.app-titlebar .traffic span{width:11px;height:11px;border-radius:50%;background:#444}
.app-titlebar .traffic span:nth-child(1){background:#FF5F57}
.app-titlebar .traffic span:nth-child(2){background:#FEBC2E}
.app-titlebar .traffic span:nth-child(3){background:#28C840}
.app-titlebar .title{font-size:12px;color:var(--app-text2);letter-spacing:.04em}
.app-titlebar .right{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--app-text3);letter-spacing:.08em}
.app-titlebar .right .live{color:var(--app-green);display:flex;align-items:center;gap:5px}
.app-titlebar .right .live .dot{width:6px;height:6px;border-radius:50%;background:var(--app-green);animation:pulseDot 2s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(39,174,96,.55)}70%{box-shadow:0 0 0 8px rgba(39,174,96,0)}100%{box-shadow:0 0 0 0 rgba(39,174,96,0)}}
.app-preview-frame{padding:0;overflow:hidden}
.app-preview-frame img{width:100%;height:auto;display:block}
/* ==========================================================================
PRICING — PLANS
========================================================================== */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{
background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:40px 28px 32px;
display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--app)}
.plan.featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.featured::before{
content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 0%,rgba(92,92,240,.3),transparent 60%);pointer-events:none;
}
.plan .plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;position:relative;z-index:1}
/* Plan name — Fraunces ROMAN, not italic */
.plan .name{font-family:var(--serif);font-style:normal;font-weight:500;font-size:28px;letter-spacing:-.015em}
.plan .badge,
.plan.featured .badge{
font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
padding:4px 10px;border-radius:var(--r-pill);background:var(--app-grad);color:#fff;
}
.plan .price{display:flex;align-items:baseline;gap:6px;position:relative;z-index:1}
/* Price amount — Fraunces ROMAN */
.plan .price .amount{font-family:var(--serif);font-style:normal;font-weight:500;font-size:56px;line-height:1;letter-spacing:-.025em}
.plan .price .per{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--mute);letter-spacing:.04em}
.plan.featured .price .per{color:var(--mute-2)}
.plan .seats{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--mute);position:relative;z-index:1}
.plan.featured .seats{color:#C9C7BD}
.plan .per-seat{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--mute-2);position:relative;z-index:1;margin-top:-8px}
.plan.featured .per-seat{color:#8A897D}
.plan .tagline{font-size:14px;color:var(--ink-2);line-height:1.55;position:relative;z-index:1;margin:4px 0 0}
.plan.featured .tagline{color:#C9C7BD}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.plan li{font-size:14px;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.plan li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--app-soft);border:1px solid var(--app);flex-shrink:0;margin-top:4px}
.plan.featured li::before{background:rgba(92,92,240,.25);border-color:var(--app-3)}
.plan .cta{margin-top:auto;position:relative;z-index:1}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}
/* Pricing — "More than 50 seats?" custom-pricing note below the plan grid. */
.pricing-note{text-align:center;margin:28px 0 0;font-size:15px;color:var(--ink-2);line-height:1.6}
.pricing-note .link-app{text-decoration:underline}
/* Pricing fine print strip */
.fine-strip{
display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
padding:20px 24px;margin-top:28px;
background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;
}
.fine-strip b{color:var(--ink);font-weight:600}
/* Pricing — comparison table */
.compare-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
box-shadow:var(--shadow-1);
}
.compare{width:100%;border-collapse:collapse;font-size:14.5px}
.compare thead th{
padding:22px 20px;text-align:left;background:var(--paper-2);
font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
border-bottom:1px solid var(--line-soft);
}
.compare thead th.col-plan{
font-family:var(--serif);font-style:normal;font-weight:500;font-size:20px;letter-spacing:-.01em;
color:var(--ink);text-transform:none;text-align:center;
}
.compare thead th.col-plan.featured{background:var(--ink);color:var(--paper)}
.compare tbody td{padding:16px 20px;border-top:1px solid var(--line-soft);vertical-align:top}
.compare tbody td.col-label{font-weight:500;color:var(--ink-2)}
.compare tbody td.col-val{text-align:center;color:var(--ink-2)}
.compare tbody td.col-val.featured{background:rgba(92,92,240,.04)}
.compare tbody td .check{
display:inline-block;width:16px;height:16px;border-radius:50%;
background:var(--app-soft);border:1px solid var(--app);vertical-align:middle;
}
.compare tbody td .dash{color:var(--mute-2);font-family:var(--sans)}
.compare tbody tr.group-head td{
background:var(--paper-2);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute);padding:14px 20px;
}
/* Hint above the comparison table on tablet widths where it scrolls horizontally.
On mobile the table reflows to a card list, so the hint is hidden there. */
.mobile-note{
margin-top:14px;padding:0 4px;text-align:center;
font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;
color:var(--mute);text-transform:uppercase;
}
@media (max-width:820px){.mobile-note{display:none}}
@media (max-width:820px){
.compare-wrap{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
.compare,.compare tbody,.compare tr,.compare td{display:block;width:100%}
.compare thead{display:none}
.compare tbody tr.group-head{margin:24px 0 8px;background:transparent}
.compare tbody tr.group-head td{background:transparent;padding:0;border:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app)}
.compare tbody tr:not(.group-head){background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);margin:10px 0;padding:14px 16px;box-shadow:var(--shadow-1)}
.compare tbody tr:not(.group-head) td{border:0;padding:0}
.compare tbody tr:not(.group-head) td.col-label{font-weight:600;color:var(--ink);font-size:14px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px dashed var(--line-soft)}
.compare tbody tr:not(.group-head) td.col-val{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:5px 0;font-size:13.5px;background:transparent}
.compare tbody tr:not(.group-head) td.col-val::before{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.compare tbody tr:not(.group-head) td.col-val:nth-of-type(2)::before{content:"Starter"}
.compare tbody tr:not(.group-head) td.col-val:nth-of-type(3)::before{content:"Growth"}
.compare tbody tr:not(.group-head) td.col-val:nth-of-type(4)::before{content:"Enterprise"}
.compare tbody tr:not(.group-head) td.col-val.featured{font-weight:600;color:var(--ink)}
.compare tbody tr:not(.group-head) td.col-val.featured::before{color:var(--app)}
}
/* ==========================================================================
FAQ (pricing + thank-you)
========================================================================== */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.faq details{
background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);
padding:18px 22px;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:var(--app);box-shadow:var(--shadow-1)}
.faq summary{
cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";font-family:var(--sans);font-weight:400;font-size:22px;line-height:1;color:var(--app);
transition:transform .2s ease;
}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:14px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.faq a{color:var(--app);font-weight:500}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
/* .faq-section padding now governed by .section system. Border-top kept for visual rule. */
.faq-section{border-top:1px solid var(--line-soft)}
.faq-section h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 36px;text-align:center}
.faq-section h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.faq-section .faq{max-width:1040px;margin:0 auto}
/* ==========================================================================
CTA BAND (pricing)
========================================================================== */
.cta-band{
background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:56px 48px;
display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;
}
.cta-band::before{
content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 0% 0%,rgba(92,92,240,.18),transparent 60%);pointer-events:none;
}
.cta-band h3{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;position:relative;z-index:1}
.cta-band p{margin:0 0 22px;color:#C9C7BD;font-size:16px;line-height:1.6;max-width:48ch;position:relative;z-index:1}
.cta-band .cta-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band .right{position:relative;z-index:1;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.08em;color:#8A897D;text-transform:uppercase;display:grid;gap:14px}
.cta-band .right b{color:var(--paper);font-weight:600;font-family:var(--sans);font-size:14px;letter-spacing:-.01em;text-transform:none}
@media (max-width:820px){.cta-band{grid-template-columns:1fr;padding:40px 28px;gap:24px}}
/* ==========================================================================
HOME — SCORECARD TEASE
========================================================================== */
.scorecard-tease{
background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);
padding:48px 44px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
position:relative;overflow:hidden;
}
.scorecard-tease::before{
content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 100% 0%,rgba(92,92,240,.10),transparent 60%);pointer-events:none;
}
.scorecard-tease h3{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(26px,3.2vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;position:relative;z-index:1}
.scorecard-tease h3 .sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.025em}
.scorecard-tease p{margin:0 0 22px;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:48ch;position:relative;z-index:1}
.scorecard-tease .stat-strip{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.scorecard-tease .stat-strip .stat{padding:18px 20px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper)}
.scorecard-tease .stat-strip .stat .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app);margin-bottom:6px}
.scorecard-tease .stat-strip .stat .v{font-family:var(--serif);font-style:normal;font-weight:500;font-size:22px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.scorecard-tease .btn-app{position:relative;z-index:1}
@media (max-width:820px){.scorecard-tease{grid-template-columns:1fr;padding:36px 28px}}
/* ==========================================================================
HOME — SECURITY TEASER
========================================================================== */
.security-teaser{
background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:56px 48px;
display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;
}
.security-teaser::before{
content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 0% 0%,rgba(92,92,240,.18),transparent 60%);pointer-events:none;
}
.security-teaser h3{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(28px,3.8vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;position:relative;z-index:1}
.security-teaser p{margin:0 0 22px;color:#D8D3C3;font-size:16px;line-height:1.55;max-width:48ch;position:relative;z-index:1}
.security-teaser .teaser-stats{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.security-teaser .stat{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);background:rgba(255,255,255,.03)}
.security-teaser .stat .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app-3);margin-bottom:6px}
.security-teaser .stat .v{font-family:var(--serif);font-style:normal;font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.security-teaser .btn-app{margin-top:8px;position:relative;z-index:1}
@media (max-width:820px){.security-teaser{grid-template-columns:1fr;padding:40px 28px}}
/* ==========================================================================
ABOUT-US
========================================================================== */
.hero-photo{padding:32px 0 0}
.hero-frame{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3);isolation:isolate}
.hero-frame img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.hero-frame figcaption{
position:absolute;left:0;right:0;bottom:0;
padding:36px 36px 32px;
display:flex;flex-direction:column;gap:8px;color:#fff;
background:linear-gradient(180deg, transparent 0%, rgba(11,13,18,.05) 30%, rgba(11,13,18,.75) 100%);
}
.hero-frame .cap-mono{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.88}
/* Hero caption serif — Fraunces ROMAN, not italic */
.hero-frame .cap-serif{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:-.025em}
.team-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}
@media (max-width:820px){.team-grid{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.card .portrait{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.card .portrait img{width:100%;height:100%;object-fit:cover}
.card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
/* Team name — Fraunces ROMAN, not italic */
.card .body h3{margin:0;font-family:var(--serif);font-style:normal;font-weight:500;font-size:28px;letter-spacing:-.02em;line-height:1.05}
.card .body .role{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-top:2px}
.card .body p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.card .body .bits{font-family:var(--sans);font-size:12px;color:var(--mute);margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-soft);letter-spacing:.01em;line-height:1.7}
.card .body .bits b{color:var(--ink);font-weight:600}
.principles{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px}
@media (max-width:820px){.principles{grid-template-columns:1fr}}
.principle{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:10px}
/* Principle number — Inter, not italic serif */
.principle .num{font-family:var(--sans);font-weight:500;font-size:28px;color:var(--accent);line-height:1;letter-spacing:-.02em}
.principle h4{margin:0;font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.01em}
.principle p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.65}
/* .mission-section padding now governed by .section system. */
.mission{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px;text-align:left}
.mission-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
/* Mission quote — Fraunces with italic on key span via .serif-italic */
.mission-quote{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin:0}
.mission-quote .serif-italic{font-style:italic;font-weight:400}
.facts{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
@media (max-width:820px){.facts{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:540px){.facts{grid-template-columns:1fr}}
.fact .label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:8px}
.fact .value{font-family:var(--serif);font-style:normal;font-weight:500;font-size:26px;letter-spacing:-.02em;line-height:1.2}
.fact .value .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.fact .note{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:6px}
.closer{padding:120px 0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.closer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 70% 30%, rgba(255,90,31,.15), transparent 70%)}
.closer-inner{position:relative;max-width:780px}
.closer h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(34px,5.6vw,60px);line-height:1.05;letter-spacing:-.025em;margin:0 0 24px}
.closer h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.closer h2 .serif-italic{font-style:italic;font-weight:400}
.closer p{font-size:17px;line-height:1.6;color:rgba(246,242,232,.85);margin:0 0 28px;max-width:52ch}
.closer .btn-ghost{border-color:rgba(246,242,232,.4);color:var(--paper)}
.closer .btn-ghost:hover{background:var(--paper);color:var(--ink)}
/* Giant wordmark (about/security closer) — keep italic Fraunces here as a brand moment */
.wordmark-big{padding:40px 0 12px;overflow:hidden;text-align:center;background:var(--ink);color:var(--paper);line-height:.82}
.wordmark-big .word{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(100px, 22vw, 280px);letter-spacing:-.04em;background:linear-gradient(180deg, var(--paper) 40%, rgba(246,242,232,.15));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ==========================================================================
POLICY / DOC PAGES — masthead + TOC + chunks (security, privacy, tos, dpa)
========================================================================== */
.masthead{padding:96px 0 40px}
.masthead.center{text-align:center}
.masthead.center .lede{margin-left:auto;margin-right:auto}
.masthead h1{max-width:18ch}
.masthead.center h1{max-width:none}
.masthead .contact{font-size:14px;line-height:1.6;color:var(--mute);max-width:62ch;margin:14px 0 0;font-family:var(--sans);letter-spacing:.02em}
.masthead .badge{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--good);text-transform:uppercase;
background:rgba(46,125,50,.1);border:1px solid rgba(46,125,50,.25);
padding:7px 14px;border-radius:var(--r-pill);margin-bottom:22px;
}
.masthead .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
.sec-body{display:grid;grid-template-columns:220px 1fr;gap:64px;padding:48px 0 96px}
/* The content column is the 1fr grid child. Default min-width:auto lets a wide
breakout child (.tiers) force the track to grow, which overflowed the page.
min-width:0 caps the track at its fr share so breakouts can't blow out the grid. */
.sec-body>div{min-width:0}
@media (max-width:900px){.sec-body{grid-template-columns:1fr;gap:32px}.toc{display:none}}
.toc{position:sticky;top:88px;align-self:start;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;max-height:calc(100vh - 100px);overflow-y:auto}
.toc a{display:block;padding:7px 0;color:var(--mute);border-left:2px solid transparent;padding-left:14px;margin-left:-14px;transition:color .2s ease,border-color .2s ease;line-height:1.35}
.toc a:hover,.toc a.active{color:var(--ink);border-color:var(--app)}
section.chunk{padding:44px 0;border-top:1px solid var(--line-soft)}
section.chunk:first-child{padding-top:0;border-top:0}
section.chunk h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(26px,3.6vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0 0 18px}
section.chunk h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
section.chunk h2 .serif-italic{font-style:italic;font-weight:400}
section.chunk h3{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:20px 0 8px;color:var(--ink)}
section.chunk p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
section.chunk p strong{color:var(--ink);font-weight:600}
section.chunk ul{padding-left:22px;margin:8px 0 16px;max-width:66ch}
section.chunk ul li{font-size:15px;line-height:1.65;color:var(--ink-2);margin-bottom:6px}
section.chunk ul li strong{color:var(--ink);font-weight:600}
section.chunk a{color:var(--app);font-weight:500}
section.chunk a:hover{text-decoration:underline}
section.chunk code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;background:var(--paper-2);border:1px solid var(--line-soft);padding:2px 6px;border-radius:5px}
/* Security — labeled list variant (overrides default ul for security only) */
section.chunk ul.tag-list{padding-left:0;list-style:none;margin:12px 0 18px;display:flex;flex-direction:column;gap:12px;max-width:66ch}
section.chunk ul.tag-list li{padding:14px 16px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);font-size:15px;line-height:1.55;color:var(--ink-2);margin-bottom:0}
section.chunk ul.tag-list li b.scope{color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;margin-right:6px;padding:2px 7px;background:var(--paper);border:1px solid var(--line-soft);border-radius:5px;display:inline-block;margin-bottom:4px}
/* Security tier cards — break out of the content column into the TOC gutter so the
three-column grid uses the full wrap width on desktop. position:relative + z-index
keep the opaque cards above the sticky TOC, avoiding the earlier overlap. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 24px;max-width:none;margin-left:calc(-220px - 64px);width:calc(100% + 220px + 64px);position:relative;z-index:1}
@media (max-width:900px){.tiers{margin-left:0;width:100%}}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{
background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:22px;
display:flex;flex-direction:column;gap:10px;
/* min-width:0 lets each 1fr column shrink to an equal share so a card with longer
copy can't blow its track out and skew the three cards uneven. */
min-width:0;overflow-wrap:break-word;
}
.tier .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tier.blocked{border-top:3px solid var(--bad)}
.tier.blocked .label{color:var(--bad)}
.tier.confirm{border-top:3px solid var(--warn)}
.tier.confirm .label{color:var(--warn)}
.tier.safe{border-top:3px solid var(--good)}
.tier.safe .label{color:var(--good)}
.tier h3{margin:0;font-family:var(--serif);font-style:normal;font-weight:500;font-size:22px;letter-spacing:-.015em;line-height:1.1}
.tier .desc{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tier ul li{background:transparent;border:0;padding:0;font-size:13px;color:var(--ink-2);font-family:var(--sans);letter-spacing:.01em;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.tier ul li::before{content:"·";color:var(--mute);flex-shrink:0}
/* Security callout */
.callout{background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:28px;margin:24px 0;max-width:66ch}
.callout .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app-3);margin-bottom:10px}
section.chunk .callout p{color:rgba(246,242,232,.9);margin:0}
/* DPA inline callout */
.dpa-callout{margin-top:20px;padding:18px 22px;background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--app);border-radius:var(--r-sm);font-size:15px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.dpa-callout a{color:var(--app);font-weight:600}
/* Subprocessors table + changelog */
.page-body{padding:40px 0 96px;max-width:900px;margin:0 auto}
.sub-table{width:100%;border-collapse:collapse;margin:18px 0 40px;font-size:14.5px}
.sub-table th,.sub-table td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.sub-table th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:var(--paper-2);border-bottom:1px solid var(--line)}
.sub-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.sub-table td{color:var(--ink-2);line-height:1.5}
@media (max-width:680px){.sub-table{font-size:13px}.sub-table th,.sub-table td{padding:10px 8px}}
h2.section-heading{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(24px,3.2vw,32px);line-height:1.2;letter-spacing:-.02em;margin:48px 0 14px}
h2.section-heading .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.page-body p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.page-body a{color:var(--app);font-weight:500}
.page-body a:hover{text-decoration:underline}
.changelog{list-style:none;padding:0;margin:0;max-width:66ch}
.changelog li{padding:14px 18px;border-left:2px solid var(--line-soft);margin-bottom:10px;background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.changelog .date{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.changelog .entry{font-size:15px;color:var(--ink-2);line-height:1.55}
/* ==========================================================================
BOOK page
========================================================================== */
.booking-wrap{padding:32px 0 80px}
.booking-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start;max-width:1100px;margin:0 auto}
@media (max-width:900px){.booking-grid{grid-template-columns:1fr;gap:32px}}
.calendly-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:10px;overflow:hidden;min-height:720px}
.calendly-inline-widget{min-width:320px;width:100%;height:700px;border-radius:var(--r-sm);overflow:hidden}
.calendly-fallback{text-align:center;padding:14px;font-size:14px;color:var(--mute)}
.calendly-fallback a{color:var(--app);font-weight:600}
.cover{padding:8px 0}
.cover .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.cover h2{font-family:var(--sans);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.2;margin:0 0 24px;color:var(--ink)}
.cover-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px}
.cover-list li{padding-left:0}
.cover-list h3{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.cover-list p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:52ch}
.aside-box{margin-top:36px;background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--app);border-radius:var(--r-sm);padding:18px 20px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.aside-box strong{color:var(--ink);font-weight:600}
/* ==========================================================================
QUIZ page
========================================================================== */
.masthead-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.trust-line{margin:0;font-size:13px;color:var(--mute);font-family:var(--sans);letter-spacing:.02em}
.quiz-frame-wrap{padding:24px 0 96px}
.quiz-frame{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:8px;max-width:860px;margin:0 auto;overflow:hidden}
.quiz-frame iframe{display:block;width:100%;border:0;min-height:0;background:var(--paper);border-radius:var(--r-sm);transition:height .25s ease}
.quiz-fallback{text-align:center;padding:14px 24px 4px;font-size:14px;color:var(--mute)}
.quiz-fallback a{color:var(--app);font-weight:600}
/* ==========================================================================
CHECK-INBOX + THANK-YOU
========================================================================== */
/* .next-steps padding now governed by .section system. */
.next-steps h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0 0 36px;text-align:center}
.next-steps h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.next-steps .steps{max-width:1040px;margin:0 auto;list-style:none;padding:0}
.next-steps .steps li{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.next-steps .steps li::before{display:none} /* override .step counter for list-based steps */
.next-steps .steps .num{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--app);position:static}
.next-steps .steps h3{margin:0;font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.next-steps .steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.next-steps .steps p a{color:var(--app);font-weight:500}
/* Centered masthead with subtle orb (check-inbox / thank-you celebrate moments) */
.masthead.center.with-orb{position:relative;overflow:hidden;padding:96px 0 80px}
.masthead.center.with-orb::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:700px;height:340px;background:var(--app-soft);filter:blur(120px);pointer-events:none;border-radius:50%;opacity:.6}
.masthead.center.with-orb .inner{position:relative;z-index:1}
/* Larger celebration h1 */
.masthead.center.with-orb h1{font-size:clamp(60px,10vw,128px);line-height:.98;letter-spacing:-.035em;max-width:none}
/* ==========================================================================
404
========================================================================== */
.hero-404{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 0;position:relative}
.hero-404 .orb{position:absolute;pointer-events:none;border-radius:50%;filter:blur(100px);opacity:.25}
.hero-404 .orb.a{width:380px;height:380px;background:var(--app-soft);top:-80px;right:-120px}
.hero-404 .orb.b{display:none}
.hero-404 .inner{text-align:center;max-width:600px;position:relative;z-index:1}
.hero-404 .code{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;margin-bottom:20px}
.hero-404 h1{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(72px,12vw,140px);line-height:1;letter-spacing:-.035em;margin:0 0 12px;color:var(--ink)}
.hero-404 h1 .sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.04em}
.hero-404 h1 .serif-italic{font-style:italic;font-weight:400}
.hero-404 p{font-size:19px;line-height:1.55;color:var(--ink-2);margin:0 auto 36px;max-width:50ch}
.hero-404 .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ==========================================================================
FOOTER
========================================================================== */
.footer{background:var(--ink);color:var(--paper);padding:0 0 40px;margin-top:88px}
.footer-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:40px 0 48px;border-top:1px solid rgba(246,242,232,.12)}
@media (max-width:680px){.footer-inner{grid-template-columns:1fr;gap:28px}}
.footer-col h5{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,232,.55);margin:0 0 14px}
.footer-col p,.footer-col a{display:block;font-size:14px;color:rgba(246,242,232,.82);line-height:1.7;margin:0 0 6px}
.footer-col a:hover{color:var(--app)}
.footer-col .addr{font-size:13px;color:rgba(246,242,232,.6);margin-top:12px;line-height:1.6}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(246,242,232,.08);font-family:var(--sans);font-size:12px;font-weight:500;color:rgba(246,242,232,.5);letter-spacing:.04em}
.footer-bottom a:hover{color:var(--app)}
/* 404 has a compact single-line footer */
.footer.compact{padding:28px 0;margin-top:0;font-family:var(--sans);font-size:12px;color:rgba(246,242,232,.5);letter-spacing:.04em}
.footer.compact .footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:0;padding:0}
.footer.compact .footer-inner a{color:rgba(246,242,232,.5)}
.footer.compact .footer-inner a:hover{color:var(--app)}