/* ========================================================================
KYCEasy (kyceasy.com) - complete stylesheet
GENERATED FILE. Do not edit by hand.
Built by build-css.py from, in this order:
1. brand.css (umbrella, shared across all Actual Reports properties)
2. blocks.css (umbrella, surface system and content blocks)
3. src/page.css (this site only)
Edit src/page.css for anything KYCEasy specific, or the umbrella sources
in the product-landing-page skill for anything that should reach every
property, then re-run:
python3 build-css.py
House rule: plain ASCII hyphens in comments throughout. Unicode
box-drawing characters have broken the CSS parser here before.
======================================================================== */
/* ========================================================================
SOURCE: brand.css
Umbrella tokens: colour, type scale, spacing, buttons, nav, footer.
======================================================================== */
/* ============================================================
Actual Reports -- Shared Stylesheet
brand.css
============================================================ */
/* -- RESET ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
/* -- TOKENS ---------------------------------------- */
:root{
/* Surfaces */
--paper:#ffffff;
--paper-2:#f4f6fd;
--paper-3:#e2e7f7;
/* Text */
--ink:#282828;
--ink-2:#4a4f62;
--ink-3:#8a8fa8;
--ink-4:#b8bbca;
/* Brand */
--blue:#2F4AC7;
--blue-2:#4560d4;
--blue-pale:#eaedfa;
/* Heading */
--heading:#101942;
/* Accent colours */
--forest:#1a6647;
--forest-pale:#ddf0e8;
--teal:#0d7c8f;
--teal-pale:#d9f2f5;
--amber:#a05c00;
--amber-pale:#fef3e2;
/* Dark */
--night:#0b0f24;
/* Type */
--serif:'Playfair Display',Georgia,serif;
--sans:'Inter',system-ui,sans-serif;
--mono:'Courier New',Courier,monospace;
/* Layout */
--max:1160px;
--prose:720px;
--r:4px;
--r-lg:10px;
}
/* -- BASE ---------------------------------------- */
body{
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
font-weight:400;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
/* -- TYPOGRAPHY UTILITIES ---------------------------------------- */
.display{
font-family:var(--serif);
font-weight:900;
line-height:1.0;
letter-spacing:-0.02em;
color:var(--heading);
font-variant-ligatures:no-common-ligatures;
-webkit-font-feature-settings:"liga" 0,"clig" 0;
font-feature-settings:"liga" 0,"clig" 0;
}
.label{
font-size:0.7rem;
font-weight:500;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.label-accent{color:var(--blue)}
/* -- LAYOUT ---------------------------------------- */
.inner{max-width:var(--max);margin:0 auto;padding:0 2.5rem}
.section{padding:6rem 0}
/* -- BUTTONS ---------------------------------------- */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--sans);
font-weight:500;
font-size:0.875rem;
padding:13px 26px;
border-radius:var(--r);
cursor:pointer;
transition:all 0.18s ease;
border:1px solid transparent;
letter-spacing:0.01em;
text-decoration:none;
}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-2);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--paper-3)}
.btn-outline:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,0.3)}
.btn-outline-white:hover{border-color:#fff;transform:translateY(-1px)}
.btn-ghost-light{background:transparent;color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.2)}
.btn-ghost-light:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.btn-white{background:#fff;color:var(--blue);border-color:#fff}
.btn-white:hover{background:rgba(255,255,255,0.92)}
.btn-arrow::after{content:' →'}
.btn-lg{font-size:1rem;padding:15px 32px}
/* -- NAV ---------------------------------------- */
nav{
position:sticky;
top:0;
z-index:200;
background:var(--paper);
border-bottom:1px solid var(--paper-3);
backdrop-filter:blur(8px);
}
.nav-inner{
max-width:var(--max);
margin:0 auto;
padding:0 2.5rem;
display:flex;
align-items:center;
justify-content:space-between;
height:60px;
}
.nav-logo{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink);letter-spacing:-0.01em}
.nav-logo span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none}
.nav-links a{font-size:0.85rem;color:var(--ink-2);transition:color 0.15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--blue);font-weight:500}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--ink)}
/* -- BREADCRUMB ---------------------------------------- */
.breadcrumb{border-bottom:1px solid var(--paper-3);padding:0.9rem 0}
.breadcrumb-inner{
max-width:var(--max);
margin:0 auto;
padding:0 2.5rem;
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.8rem;
color:var(--ink-3);
}
.breadcrumb-inner a{color:var(--ink-3);transition:color 0.15s}
.breadcrumb-inner a:hover{color:var(--blue)}
.breadcrumb-inner .sep{color:var(--ink-4)}
.breadcrumb-inner .current{color:var(--ink-2);max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* -- PROBLEM SECTION (dark, used across product & solution pages) */
.problem{background:var(--night);padding:6rem 0}
.problem .display{color:#ffffff}
.problem-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.problem-left h2{font-size:clamp(2rem,3vw,2.8rem);color:#ffffff;margin-bottom:1.25rem}
.problem-left h2 em{font-style:italic;color:var(--blue-2)}
.problem-intro{font-size:1rem;color:rgba(255,255,255,0.65);line-height:1.8;margin-bottom:2rem}
.problem-cards{display:flex;flex-direction:column;gap:12px}
.problem-card{border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-lg);padding:1.75rem 2rem;background:rgba(255,255,255,0.04);transition:background 0.2s}
.problem-card:hover{background:rgba(255,255,255,0.07)}
.problem-card-num{font-family:var(--serif);font-size:2rem;font-weight:900;color:rgba(255,255,255,0.18);line-height:1;margin-bottom:0.75rem}
.problem-card-title{font-size:0.9rem;font-weight:600;color:#fff;margin-bottom:0.5rem}
.problem-card-body{font-size:0.83rem;color:rgba(255,255,255,0.60);line-height:1.75}
/* -- HOW WE WORK STEPS (shared across product & solution pages) */
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-3);border-radius:var(--r-lg);overflow:hidden}
.how-step{background:var(--paper);padding:2.5rem 2rem}
.how-step-num{font-family:var(--serif);font-size:2.5rem;font-weight:900;color:var(--blue-pale);line-height:1;margin-bottom:1.25rem}
.how-step-title{font-size:0.9rem;font-weight:600;color:var(--heading);margin-bottom:0.6rem}
.how-step-body{font-size:0.82rem;color:var(--ink-2);line-height:1.7}
/* -- FEATURE CARDS (shared grid pattern) ---------------------------------------- */
.feature-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feature-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.feature-card{
background:var(--paper-2);
border:1px solid var(--paper-3);
border-radius:var(--r-lg);
padding:2rem;
transition:all 0.2s;
}
.feature-card:hover{background:var(--paper);border-color:var(--blue);box-shadow:0 6px 24px rgba(47,74,199,0.07)}
.feature-card-icon{width:44px;height:44px;border-radius:var(--r);background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.25rem}
.feature-card h3{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--heading);margin-bottom:0.6rem}
.feature-card p{font-size:0.85rem;color:var(--ink-2);line-height:1.7}
/* -- FAQ ---------------------------------------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem}
.faq-item{border-top:1px solid var(--paper-3);padding:1.5rem 0}
.faq-q{font-size:0.9rem;font-weight:600;color:var(--heading);cursor:pointer;display:flex;justify-content:space-between;align-items:start;gap:1rem;user-select:none}
.faq-q::after{content:'+';font-size:1.1rem;color:var(--ink-3);flex-shrink:0;transition:transform 0.2s;margin-top:-1px}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{font-size:0.85rem;color:var(--ink-2);line-height:1.75;max-height:0;overflow:hidden;transition:max-height 0.3s ease,margin 0.2s}
.faq-item.open .faq-a{max-height:300px;margin-top:0.6rem}
/* -- CTA SECTION (dark, used as page-end CTA) ---------------------------------------- */
.cta-section{
background:var(--night);
padding:6rem 0;
text-align:center;
position:relative;
overflow:hidden;
}
.cta-section::before{
content:'';
position:absolute;
bottom:-120px;
left:-120px;
width:600px;
height:600px;
border-radius:50%;
background:rgba(47,74,199,0.12);
pointer-events:none;
}
.cta-section .display{color:#ffffff}
.cta-label{color:rgba(255,255,255,0.4);margin-bottom:1.5rem}
.cta-headline{font-size:clamp(2.2rem,4vw,3.8rem);color:#fff;max-width:680px;margin:0 auto 1.25rem}
.cta-headline em{font-style:italic;color:var(--blue-2)}
.cta-sub{font-size:1rem;color:rgba(255,255,255,0.55);max-width:480px;margin:0 auto 2.5rem;line-height:1.8}
.cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;position:relative;z-index:1}
.cta-note{margin-top:1.5rem;font-size:0.78rem;color:rgba(255,255,255,0.25)}
/* -- FOOTER ---------------------------------------- */
footer{
background:var(--night);
color:rgba(247,244,239,0.35);
padding:4rem 0 2rem;
border-top:1px solid rgba(255,255,255,0.06);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.footer-brand-name{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:rgba(255,255,255,0.9);margin-bottom:0.75rem}
.footer-brand-desc{font-size:0.82rem;color:rgba(247,244,239,0.3);line-height:1.75;max-width:260px;margin-bottom:1.5rem}
.footer-trust{display:flex;flex-direction:column;gap:6px}
.footer-trust span{font-size:0.75rem;color:rgba(247,244,239,0.25)}
.footer-col-title{font-size:0.7rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(247,244,239,0.25);margin-bottom:1.25rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.75rem}
.footer-links a{font-size:0.82rem;color:rgba(247,244,239,0.4);transition:color 0.15s}
.footer-links a:hover{color:rgba(247,244,239,0.8)}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.06);
padding-top:2rem;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:1rem;
}
.footer-copy{font-size:0.75rem;color:rgba(247,244,239,0.25)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:0.75rem;color:rgba(247,244,239,0.25);transition:color 0.15s}
.footer-bottom-links a:hover{color:rgba(247,244,239,0.5)}
/* -- STANDARD FOOTER HTML (reference) ----------------------------------------
All pages use this footer structure. Copy verbatim.
---------------------------------------- */
/* -- STANDARD NAV HTML (reference) ----------------------------------------
All pages use this nav. Set class="active" on current section.
---------------------------------------- */
/* -- ANIMATIONS ---------------------------------------- */
@keyframes riseIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
/* -- SHARED JS (reference) ----------------------------------------
Include this script block on every page.
---------------------------------------- */
/* -- RESPONSIVE ---------------------------------------- */
@media(max-width:900px){
.inner,.nav-inner,.breadcrumb-inner{padding:0 1.5rem}
.nav-links{display:none}
.nav-menu-btn{display:block}
.problem-layout{grid-template-columns:1fr;gap:2.5rem}
.how-steps{grid-template-columns:1fr 1fr}
.feature-grid-3{grid-template-columns:1fr 1fr}
.faq-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:600px){
.section{padding:4rem 0}
.feature-grid-3,.feature-grid-2,.how-steps{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
}
/* ========================================================================
SOURCE: blocks.css
Surface system and the shared content blocks.
======================================================================== */
/* ========================================================================
Actual Reports - Umbrella Content Blocks
blocks.css
Load order: brand.css -> blocks.css -> page.css
brand.css owns the tokens, nav, footer, buttons, and the components that
already shipped. This file owns the reusable landing page blocks: the
hero, customer feedback, image plus text splits, and product
screenshots. page.css is for genuinely per-page overrides only.
Copied verbatim per page, same as brand.css. Do not edit it for one
page: if a block needs to change, it changes here for every property.
----------------------------------------------------------------
THE SURFACE SYSTEM
----------------------------------------------------------------
Every block below is written once and takes its palette from a
surface class on the section wrapper:
... ... ...
The alternative was a -light and a -dark copy of each block, which
doubles the CSS and drifts the moment someone fixes a bug in one copy
and forgets the other. Remapping custom properties keeps one
definition per block, so a block is correct on every surface by
construction.
:root defaults to the light palette on purpose. A section that forgets
its surface class degrades to dark text on white, which is readable,
rather than to invisible white on white. The validator flags the
missing class.
House rule: plain ASCII hyphens in comments. Unicode box-drawing
characters have broken the CSS parser here before.
======================================================================== */
:root{
/* Light surface is the default. See note above. */
--s-bg:var(--paper);
--s-heading:var(--heading);
--s-text:var(--ink-2);
--s-muted:var(--ink-3);
--s-faint:var(--ink-4);
--s-border:var(--paper-3);
--s-border-soft:var(--paper-3);
--s-card:var(--paper-2);
--s-card-hover:var(--paper);
--s-em:var(--blue);
--s-accent:var(--blue);
--s-shadow:0 6px 24px rgba(47,74,199,0.07);
--s-shadow-lg:0 18px 48px rgba(16,25,66,0.12);
/* Surface-aware button pair, for blocks that carry their own CTA */
--s-btn-solid-bg:var(--blue);
--s-btn-solid-fg:#fff;
--s-btn-line-fg:var(--ink);
--s-btn-line-border:var(--paper-3);
--s-btn-line-border-hover:var(--ink-3);
/* Brand identity accent. Set these two per brand, on :root or on , and
the nav mark plus separator dot follow. Dark values are lightened because
the base accents fall to 2.6-3.9:1 against --night. See brand-mark.md. */
--brand-accent:var(--blue);
--brand-accent-dark:var(--blue-2);
}
.surface-light{
--s-bg:var(--paper);
--s-card:var(--paper-2);
--s-card-hover:var(--paper);
background:var(--s-bg);
}
.surface-alt{
--s-bg:var(--paper-2);
/* Cards go white on the tinted surface, the inverse of surface-light,
or they disappear into the background. */
--s-card:var(--paper);
--s-card-hover:var(--paper);
--s-shadow:0 6px 24px rgba(16,25,66,0.06);
background:var(--s-bg);
}
.surface-dark{
--s-bg:var(--night);
--s-heading:#ffffff;
--s-text:rgba(255,255,255,0.65);
--s-muted:rgba(255,255,255,0.40);
--s-faint:rgba(255,255,255,0.25);
--s-border:rgba(255,255,255,0.10);
--s-border-soft:rgba(255,255,255,0.06);
--s-card:rgba(255,255,255,0.04);
--s-card-hover:rgba(255,255,255,0.07);
--s-em:var(--blue-2);
--s-accent:var(--blue-2);
--s-shadow:0 6px 24px rgba(0,0,0,0.25);
--s-shadow-lg:0 24px 60px rgba(0,0,0,0.45);
--s-btn-solid-bg:#fff;
--s-btn-solid-fg:var(--blue);
--s-btn-line-fg:rgba(255,255,255,0.8);
--s-btn-line-border:rgba(255,255,255,0.25);
--s-btn-line-border-hover:rgba(255,255,255,0.6);
background:var(--s-bg);
color:var(--s-text);
}
/* Surface-aware buttons. Use these inside reusable blocks so the block
works on any surface. Hand-placed CTAs can still use the explicit
brand.css variants where the surface is known and fixed. */
.btn-solid{background:var(--s-btn-solid-bg);color:var(--s-btn-solid-fg);border-color:var(--s-btn-solid-bg)}
.btn-solid:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-line{background:transparent;color:var(--s-btn-line-fg);border-color:var(--s-btn-line-border)}
.btn-line:hover{border-color:var(--s-btn-line-border-hover);transform:translateY(-1px)}
/* ---------------------------------------------------------------
SECTION HEADERS - surface aware
--------------------------------------------------------------- */
.section-header{text-align:center;max-width:640px;margin:0 auto 4rem}
.section-header.align-left{text-align:left;margin-left:0}
.section-header .label{color:var(--s-muted)}
.section-header .label-accent{color:var(--s-accent)}
.section-header h2{font-size:clamp(2rem,3vw,2.8rem);margin-bottom:1rem;color:var(--s-heading)}
.section-header h2 em{font-style:italic;color:var(--s-em)}
.section-header p{font-size:1rem;color:var(--s-text);line-height:1.8}
/* ========================================================================
HERO / HEADER - light or dark
Add surface-dark or surface-light to the section. Dark is the usual
choice for a product launch, light suits documentation-adjacent pages
and anything that should feel quieter.
======================================================================== */
.hero{padding:5.5rem 0 0;overflow:hidden;position:relative;background:var(--s-bg)}
.hero.surface-dark::before{
content:'';position:absolute;top:-180px;right:-140px;
width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(47,74,199,0.18) 0%,rgba(47,74,199,0) 70%);
pointer-events:none;
}
.hero.surface-light::before,.hero.surface-alt::before{
content:'';position:absolute;top:-200px;right:-160px;
width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle,rgba(47,74,199,0.07) 0%,rgba(47,74,199,0) 70%);
pointer-events:none;
}
.hero-inner{
max-width:var(--max);margin:0 auto;padding:0 2.5rem;
display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
position:relative;z-index:1;
}
.hero-left{padding-bottom:4rem}
.hero-single{grid-template-columns:1fr;max-width:820px;text-align:center}
.hero-single .hero-sub{max-width:none}
.hero-single .hero-actions,.hero-single .hero-stats{justify-content:center}
.hero-badge{
display:inline-flex;align-items:center;gap:8px;border-radius:999px;
padding:5px 14px;font-size:0.72rem;font-weight:500;letter-spacing:0.04em;
margin-bottom:1.5rem;
opacity:0;animation:riseIn 0.5s ease 0.05s forwards;
}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--s-accent)}
.surface-dark .hero-badge{background:rgba(47,74,199,0.25);border:1px solid rgba(47,74,199,0.4);color:rgba(255,255,255,0.8)}
.surface-light .hero-badge,.surface-alt .hero-badge{background:var(--blue-pale);border:1px solid rgba(47,74,199,0.18);color:var(--blue)}
.hero h1{
font-size:clamp(2.8rem,4.5vw,4.8rem);color:var(--s-heading);margin-bottom:1.5rem;
opacity:0;animation:riseIn 0.6s ease 0.15s forwards;
}
.hero h1 em{font-style:italic;color:var(--s-em)}
.hero-sub{
font-size:1.05rem;color:var(--s-text);line-height:1.8;
max-width:460px;margin-bottom:2rem;
opacity:0;animation:riseIn 0.6s ease 0.25s forwards;
}
.hero-actions{
display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem;
opacity:0;animation:riseIn 0.6s ease 0.35s forwards;
}
.hero-stats{
display:flex;gap:2.5rem;padding-top:2rem;flex-wrap:wrap;
border-top:1px solid var(--s-border);
opacity:0;animation:riseIn 0.6s ease 0.45s forwards;
}
.hero-stat-num{font-family:var(--serif);font-size:1.75rem;font-weight:900;color:var(--s-heading);line-height:1}
.hero-stat-label{font-size:0.75rem;color:var(--s-muted);margin-top:3px}
/* ---------------------------------------------------------------
HERO SVG VISUAL - surface aware
Every animated element must carry a class starting with "hv-anim".
That convention is what lets the pause and reduced-motion rules
work without enumerating every element.
--------------------------------------------------------------- */
.hero-visual{
position:relative;display:flex;align-items:center;justify-content:center;
padding:1rem 0 4rem 0;
opacity:0;animation:riseIn 0.7s ease 0.2s forwards;
}
.hero-svg{width:100%;max-width:560px;height:auto;overflow:visible}
.hero-svg .hv-surface{fill:var(--s-card);stroke:var(--s-border)}
.hero-svg .hv-line{stroke:var(--s-border);fill:none}
.hero-svg .hv-text{fill:var(--s-muted);font-family:var(--mono);font-size:9px}
.hero-svg .hv-label{fill:var(--s-text);font-family:var(--sans);font-size:10px;font-weight:500}
.hero-svg .hv-fill{fill:var(--s-text)}
.hero-svg .hv-fill-soft{fill:var(--s-muted)}
.hero-svg .hv-live{stroke:var(--s-accent)}
.hero-svg .hv-dot{fill:var(--s-accent)}
.hero-svg .hv-plate{fill:var(--s-bg)}
/* Off-screen pausing applies ONLY to the looping animations, to keep a
backgrounded tab from burning CPU on an infinite spin.
One-shot entrance animations are deliberately NOT paused. Pausing them was a
real bug: a visitor who scrolled past the hero before the roughly 3 second
stagger finished, then scrolled back, found the graphic frozen part-drawn at
low opacity, and it stayed that way until they lingered long enough for the
resumed animation to finish. An entrance should play once and stay done. */
.hero-svg .hv-anim-ring,
.hero-svg .hv-anim-flow-a,
.hero-svg .hv-anim-flow-b,
.hero-svg .hv-anim-pulse,
.hero-svg .hv-anim-halo,
.hero-svg .hv-anim-ride,
.hero-svg .hv-anim-carry{animation-play-state:paused}
.hero-svg.hv-run .hv-anim-ring,
.hero-svg.hv-run .hv-anim-flow-a,
.hero-svg.hv-run .hv-anim-flow-b,
.hero-svg.hv-run .hv-anim-pulse,
.hero-svg.hv-run .hv-anim-halo,
.hero-svg.hv-run .hv-anim-ride,
.hero-svg.hv-run .hv-anim-carry{animation-play-state:running}
/* Shared SVG keyframes */
@keyframes hvFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes hvRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes hvOut{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes hvDraw{to{stroke-dashoffset:0}}
@keyframes hvSpin{to{transform:rotate(360deg)}}
@keyframes hvPulse{0%,100%{opacity:.35}50%{opacity:1}}
.hv-anim-fade{opacity:0;animation:hvFade .6s ease forwards}
.hv-anim-row{opacity:0;animation:hvRow .4s ease forwards}
.hv-anim-out{opacity:0;animation:hvOut .45s ease forwards}
.hv-anim-pulse{animation:hvPulse 2.4s ease-in-out infinite}
/* Pattern A - data pipeline. Packets use transform, not cx, so they stay
on the compositor. */
@keyframes hvFlowA{
0%{opacity:0;transform:translate(0,0)}
10%{opacity:1}
55%{opacity:1;transform:translate(68px,10px)}
100%{opacity:0;transform:translate(68px,83px)}
}
@keyframes hvFlowB{
0%{opacity:0;transform:translate(0,0)}
10%{opacity:1}
55%{opacity:1;transform:translate(68px,-10px)}
100%{opacity:0;transform:translate(68px,-39px)}
}
/* transform-origin in user units: SVG defaults to the viewport origin, not
the element centre, so an omitted origin sends the ring off-canvas. */
.hv-anim-ring{transform-origin:249px 191px;animation:hvSpin 6s linear infinite}
.hv-anim-flow-a{opacity:0;animation:hvFlowA 2.2s ease-in-out 1.3s infinite}
.hv-anim-flow-b{opacity:0;animation:hvFlowB 2.2s ease-in-out 1.6s infinite}
/* Pattern B - verification flow */
@keyframes hvCheck{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes hvSealIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.hv-anim-check{opacity:0;animation:hvCheck .45s ease forwards}
.hv-anim-sign{stroke-dasharray:420;stroke-dashoffset:420;animation:hvDraw 1.8s ease-out 1.8s forwards}
.hv-anim-seal{opacity:0;transform-origin:404px 190px;animation:hvSealIn .5s ease 2.4s forwards}
.hv-anim-arc{animation:hvDraw 1.1s ease-out 2.7s forwards}
.hv-anim-seal-tick{animation:hvDraw .5s ease-out 3.6s forwards}
/* Pattern C - integration constellation.
transform-box:fill-box makes transform-origin:center mean the element's
own centre. Without it nodes scale from the canvas corner. */
@keyframes hvNode{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes hvHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes hvRide{
0%{offset-distance:0%;opacity:0}
12%{opacity:1}
88%{opacity:1}
100%{offset-distance:100%;opacity:0}
}
.hv-anim-node{opacity:0;animation:hvNode .5s ease forwards;transform-box:fill-box;transform-origin:center}
.hv-anim-halo{transform-box:fill-box;transform-origin:center;animation:hvHalo 3.5s ease-in-out infinite}
.hv-anim-ride{opacity:0;animation:hvRide 2.6s linear infinite}
/* Pattern D - lifecycle timeline */
@keyframes hvStage{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes hvCarry{
0%{transform:translateX(0);opacity:0}
6%{opacity:1}
94%{opacity:1}
100%{transform:translateX(410px);opacity:0}
}
.hv-anim-stage{opacity:0;animation:hvStage .55s ease forwards}
.hv-anim-track{animation:hvDraw 3.4s ease-out .3s forwards}
.hv-anim-carry{opacity:0;animation:hvCarry 3.4s ease-out .3s infinite}
/* ---------------------------------------------------------------
PROOF STRIP - sits inside the hero section, inherits its surface
--------------------------------------------------------------- */
.proof-strip{
background:rgba(127,127,127,0.04);
border-top:1px solid var(--s-border-soft);
border-bottom:1px solid var(--s-border-soft);
padding:1.25rem 0;
}
.proof-strip-inner{
max-width:var(--max);margin:0 auto;padding:0 2.5rem;
display:flex;align-items:center;gap:3rem;flex-wrap:wrap;
}
.proof-item{font-size:0.8rem;color:var(--s-muted);display:flex;align-items:center;gap:8px}
.proof-item strong{color:var(--s-text);font-weight:500}
.proof-sep{color:var(--s-faint);font-size:1rem}
/* ========================================================================
BLOCK: CUSTOMER FEEDBACK
Three forms. Pick by how much evidence you actually have.
.quote-feature one strong named quote, maximum weight
.quote-grid two or three quotes, breadth over depth
.quote-metric a quote paired with a number, case study style
An unattributed quote is worth nothing. If there is no name, role, and
company, cut the block rather than shipping "a happy customer".
======================================================================== */
/* Shared attribution row */
.quote-by{display:flex;align-items:center;gap:12px}
.quote-avatar{
width:40px;height:40px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-weight:700;font-size:0.85rem;
background:var(--blue-pale);color:var(--blue);
object-fit:cover;
}
.surface-dark .quote-avatar{background:rgba(69,96,212,0.25);color:#fff}
.quote-name{font-size:0.85rem;font-weight:600;color:var(--s-heading);line-height:1.4}
.quote-role{font-size:0.78rem;color:var(--s-muted);line-height:1.4}
/* Single feature quote */
.quote-feature{max-width:var(--prose);margin:0 auto;text-align:center}
.quote-feature blockquote{
font-family:var(--serif);font-weight:700;font-style:italic;
font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.5;
color:var(--s-heading);margin-bottom:2rem;
}
.quote-feature blockquote::before{content:'\201C'}
.quote-feature blockquote::after{content:'\201D'}
.quote-feature .quote-by{justify-content:center}
.quote-feature .quote-name,.quote-feature .quote-role{text-align:left}
/* Quote grid */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.quote-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}
.quote-card{
background:var(--s-card);border:1px solid var(--s-border);
border-radius:var(--r-lg);padding:2rem;
display:flex;flex-direction:column;gap:1.5rem;
transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;
}
.quote-card:hover{background:var(--s-card-hover);box-shadow:var(--s-shadow)}
.quote-card blockquote{
font-size:0.9rem;line-height:1.75;color:var(--s-text);flex-grow:1;
}
.quote-card blockquote::before{content:'\201C'}
.quote-card blockquote::after{content:'\201D'}
.quote-logo{height:22px;width:auto;opacity:0.7;margin-bottom:0.25rem}
.surface-dark .quote-logo{filter:brightness(0) invert(1);opacity:0.55}
/* Quote plus metric */
.quote-metric{
display:grid;grid-template-columns:auto 1fr;gap:3.5rem;align-items:center;
background:var(--s-card);border:1px solid var(--s-border);
border-radius:var(--r-lg);padding:3rem;
}
.quote-metric-num{
font-family:var(--serif);font-weight:900;font-size:clamp(2.8rem,5vw,4rem);
color:var(--s-em);line-height:0.95;white-space:nowrap;
}
.quote-metric-label{font-size:0.8rem;color:var(--s-muted);margin-top:0.5rem;max-width:180px}
.quote-metric blockquote{
font-family:var(--serif);font-style:italic;font-weight:700;
font-size:1.15rem;line-height:1.55;color:var(--s-heading);margin-bottom:1.5rem;
}
/* ========================================================================
BLOCK: IMAGE PLUS TEXT (split)
Media one side, copy the other. Add .split-reverse to flip. Alternate
direction down the page so a run of splits does not read as a list.
The media column takes an , a .shot frame, or an inline SVG.
======================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.split.media-wide{grid-template-columns:1.25fr 1fr}
.split.copy-wide{grid-template-columns:1fr 1.25fr}
/* Source order stays copy-first for screen readers and mobile. Only the
visual order flips, which is what order does. */
.split-reverse .split-media{order:-1}
.split-body .label{color:var(--s-accent);margin-bottom:1rem;display:block}
.split-body h2,.split-body h3{
font-family:var(--serif);font-weight:900;letter-spacing:-0.02em;line-height:1.05;
font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--s-heading);margin-bottom:1.1rem;
}
.split-body h2 em,.split-body h3 em{font-style:italic;color:var(--s-em)}
.split-body p{font-size:0.95rem;color:var(--s-text);line-height:1.8;margin-bottom:1.25rem}
.split-body p:last-child{margin-bottom:0}
.split-list{list-style:none;display:flex;flex-direction:column;gap:0.85rem;margin:1.5rem 0}
.split-list li{
font-size:0.88rem;color:var(--s-text);line-height:1.65;
padding-left:1.6rem;position:relative;
}
.split-list li::before{
content:'';position:absolute;left:0;top:0.45rem;
width:9px;height:9px;border-radius:50%;
background:var(--s-bg);border:2px solid var(--s-accent);
}
.split-list li strong{color:var(--s-heading);font-weight:600}
.split-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}
.split-media{position:relative}
.split-media img,.split-media svg{
width:100%;height:auto;display:block;border-radius:var(--r-lg);
}
.split-media img{border:1px solid var(--s-border)}
.split-caption{font-size:0.78rem;color:var(--s-muted);margin-top:0.9rem;line-height:1.6}
/* Stack of splits with breathing room */
.split-stack{display:flex;flex-direction:column;gap:6rem}
/* ========================================================================
BLOCK: PRODUCT SCREENSHOTS
.shot wraps a screenshot in a frame so a flat PNG reads as software
rather than as a stray image. Three arrangements:
.shot inside a .split-media, beside copy
.shot-wide full content width under a centred header
.shot-stack two overlapping frames for before and after
Chrome is optional: add .shot-browser for a URL bar, .shot-app for a
plain title bar, or neither for a bare frame.
======================================================================== */
.shot{
border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--s-border);
background:var(--s-card);
box-shadow:var(--s-shadow-lg);
position:relative;
}
.shot img{width:100%;height:auto;display:block;border:0;border-radius:0}
.shot svg{width:100%;height:auto;display:block}
.shot-bar{
display:flex;align-items:center;gap:6px;
padding:10px 14px;
background:rgba(127,127,127,0.06);
border-bottom:1px solid var(--s-border-soft);
}
.surface-dark .shot-bar{background:rgba(255,255,255,0.04)}
.shot-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.shot-dot-r{background:#ff5f57}.shot-dot-y{background:#febc2e}.shot-dot-g{background:#28c840}
.shot-url{
flex-grow:1;margin-left:10px;padding:3px 10px;border-radius:999px;
background:var(--s-bg);border:1px solid var(--s-border-soft);
font-family:var(--mono);font-size:0.68rem;color:var(--s-muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot-title{
margin-left:10px;font-size:0.72rem;color:var(--s-muted);
font-family:var(--sans);font-weight:500;
}
.shot-wide{max-width:var(--max);margin:0 auto}
.shot-caption{font-size:0.78rem;color:var(--s-muted);margin-top:1rem;text-align:center;line-height:1.6}
/* Overlapping pair. The back frame is offset and dimmed so the front one
is unambiguously the subject. */
.shot-stack{position:relative;padding:0 0 3rem 3rem}
.shot-stack .shot-back{
position:absolute;top:0;right:0;width:72%;
opacity:0.55;transform:scale(0.96);transform-origin:top right;
}
.shot-stack .shot-front{position:relative;width:82%;margin-top:3rem;z-index:1}
/* Bleed variant: screenshot runs off the right edge of the content column,
which suggests there is more product than fits. Only use inside a
section with overflow hidden. */
.shot-bleed{width:calc(100% + ((100vw - var(--max)) / 2));max-width:none;border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:0}
/* Placeholder skeleton, for use before a real screenshot exists. Swap the
whole