/* =========================================================
   rev.css — REV component layer  ·  bridge v0.1  ·  2026-10-15
   Reads tokens.css only. Every downstream page links tokens.css
   then rev.css. No color or font is defined here.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4,p{margin:0}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-text{max-width:var(--container-text)}
.section{padding-block:var(--section-y)}
.surface-tint{background:var(--tint)}
.surface-tint-2{background:var(--tint-2)}
.on-dark,.on-accent{background:var(--paper);color:var(--ink)}

/* --- type --- */
.display{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--track-display)}
.h1{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:-0.015em}
.h2{font-family:var(--font-display);font-weight:var(--w-head);font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:-0.01em}
.h3{font-family:var(--font-display);font-weight:var(--w-sub);font-size:var(--t-h3);line-height:1.25}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:60ch}
.body{max-width:70ch}
.small{font-size:var(--t-small);color:var(--ink-2)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-size:.8125rem}

/* --- 01 kicker + section head --- */
.kicker{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-size:var(--t-kicker);font-weight:var(--w-sub);letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-5)}
.kicker::before{content:"";width:24px;height:2px;background:currentColor}
.kicker .num{font-variant-numeric:tabular-nums}
.kicker .num::after{content:"\2009\2014\2009"}
.kicker.trace::before{background:var(--trace)}
.section-head{display:grid;gap:var(--s-4);margin-bottom:var(--s-7)}
.section-head .lead{margin-top:var(--s-2)}

/* --- 02 stat row / band --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6) var(--s-5)}
.stat .n{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-stat);line-height:1;letter-spacing:-0.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .l{margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-2);max-width:22ch;line-height:1.35}
.on-accent .stat .n,.on-dark .stat .n{color:var(--ink)}
.on-accent .stat .l{color:var(--ink-2)}
.stat-band{position:relative;padding-block:calc(var(--section-y) + 24px) var(--section-y);clip-path:polygon(0 0,100% 40px,100% 100%,0 100%)}
.stat-band.flat{clip-path:none;padding-top:var(--section-y)}
.stat-badge{width:132px;height:132px;border-radius:50%;border:2px solid var(--accent);display:grid;place-content:center;text-align:center;color:var(--accent)}
.stat-badge .n{font-family:var(--font-display);font-weight:var(--w-display);font-size:1.9rem;line-height:1;letter-spacing:-0.02em}
.stat-badge .l{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;font-weight:600}

/* --- 03 thin-rule numbered list --- */
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.rule-list li{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.rule-list li:last-child{border-bottom:1px solid var(--rule-strong)}
.rule-list .num{font-family:var(--font-display);font-weight:var(--w-sub);color:var(--accent);font-size:var(--t-small);letter-spacing:.06em;padding-top:.35rem;font-variant-numeric:tabular-nums}
.rule-list .t{font-family:var(--font-display);font-weight:var(--w-sub);font-size:var(--t-h3);line-height:1.25}
.rule-list .b{margin-top:var(--s-2);color:var(--ink-2);max-width:60ch}
.rule-list.compact li{padding:var(--s-4) 0}
.rule-list.compact .t{font-size:1.0625rem}

/* --- 04 diagonal crop --- */
.slant-media{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.slant-media .media{position:relative;aspect-ratio:4/3;overflow:hidden;clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%)}
.slant-media .media img{width:100%;height:100%;object-fit:cover}
.slant-media.flip .media{order:-1;clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
.slant-media .copy .lead{margin-top:var(--s-4)}
.slant-media .copy .btn{margin-top:var(--s-6)}
.slant-panel{position:relative;isolation:isolate}
.slant-panel::before{content:"";position:absolute;inset:0 0 0 auto;width:min(52%,680px);background:var(--tint-2);clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);z-index:-1}

/* tiles (site pattern, rebuilt) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.tile{border-radius:var(--radius-lg);overflow:hidden;background:var(--tint-2);box-shadow:var(--shadow-card)}
.tile img{aspect-ratio:4/3;width:100%;object-fit:cover}
.tile .bar{background:var(--accent);color:var(--accent-ink);padding:var(--s-4) var(--s-5);font-family:var(--font-display);font-weight:var(--w-sub)}
.tile .bar small{display:block;font-weight:400;opacity:.85;font-size:var(--t-small);margin-top:2px}

/* --- 05 buttons --- */
/* Buttons. The six decisions from the CTA research (josephlapin.com, 2026-09-29):
   48px tall, 24px sides · 17px semibold sentence-case label · label >= 4.5:1, edges >= 3:1 ·
   light from above, shadow falls down · radius = height / 2, one arrow 10px from the label ·
   feedback in 100ms. Hierarchy: one filled primary per view; secondary = same geometry, outlined; tertiary = .link-arrow. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;height:48px;padding:0 24px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--w-sub);font-size:1.0625rem;line-height:1;border:1.5px solid transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 100ms ease-out,box-shadow 100ms ease-out,background 100ms ease-out,filter 100ms ease-out,color 100ms ease-out}
.btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.14) 100%),var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 2px rgba(20,20,20,.25),0 6px 14px -4px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-primary:hover{color:var(--accent-ink);transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),0 2px 3px rgba(20,20,20,.22),0 10px 20px -6px color-mix(in srgb,var(--accent) 65%,transparent)}
.btn-primary:active{transform:translateY(1px) scale(.98);filter:brightness(.96);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink);height:44px;padding:0 20px;font-size:1rem}
.btn-secondary:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:0 2px 3px rgba(20,20,20,.12),0 8px 16px -8px rgba(20,20,20,.35)}
.btn-secondary:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(20,20,20,.16)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:default;transform:none;filter:none}
.btn-sm{height:40px;padding:0 18px;font-size:.9375rem}
.btn .arrow{width:16px;height:16px;flex:none;transition:transform 100ms ease-out}
.btn:hover .arrow{transform:translateX(3px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:var(--w-sub);color:var(--accent)}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}

/* --- 06 lead form --- */
.form{display:grid;gap:var(--s-5);max-width:720px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-display);font-weight:var(--w-sub);font-size:var(--t-small);color:var(--ink)}
.field .hint{font-size:.8125rem;color:var(--ink-3);margin-top:-2px}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--radius);padding:13px 14px;width:100%;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,99,220,.15)}
.field input::placeholder{color:var(--ink-3)}
.field .with-unit{display:grid;grid-template-columns:1fr auto;gap:8px}
.unit-toggle{display:inline-flex;border:1.5px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.unit-toggle label{margin:0;padding:0 12px;display:grid;place-content:center;font-size:.8125rem;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.unit-toggle input{position:absolute;opacity:0;width:0;height:0}
.unit-toggle input:checked + label{background:var(--accent);color:var(--accent-ink)}
.unit-toggle input:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}
.form .legend{font-family:var(--font-display);font-weight:var(--w-sub);font-size:var(--t-h3);display:flex;align-items:baseline;gap:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--rule-strong)}
.form .legend .num{color:var(--accent);font-size:var(--t-small);letter-spacing:.06em}
.form .foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}
.form .foot .small{max-width:42ch}
.form-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:clamp(24px,4vw,48px);box-shadow:var(--shadow-card)}

/* --- conversion layer --- */
.proof-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center;font-size:var(--t-small);color:var(--ink-2);font-weight:var(--w-medium)}
.proof-row li{list-style:none;display:flex;align-items:center;gap:.3em}
.proof-row{padding:0;margin:0}
.proof-row li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:var(--s-4);flex:none}
.proof-row b{color:var(--ink);font-weight:var(--w-head)}
.objections{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.objection{background:var(--paper);border-radius:var(--radius-lg);padding:var(--s-6);border:1px solid var(--rule)}
.objection .q{font-family:var(--font-display);font-weight:var(--w-sub);font-size:var(--t-h3);line-height:1.25}
.objection .a{margin-top:var(--s-3);color:var(--ink-2)}
.objection .a b{color:var(--accent);font-weight:var(--w-head)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;background:var(--paper);border-top:1px solid var(--rule);padding:12px var(--gutter);box-shadow:0 -8px 24px rgba(20,20,20,.08);align-items:center;gap:12px;justify-content:space-between}
.sticky-cta .small{line-height:1.25}
.sticky-cta.demo{position:static;display:flex;max-width:420px;border:1px solid var(--rule);border-radius:var(--radius-lg)}
@media (max-width:767px){.sticky-cta{display:flex}body.form-in-view .sticky-cta:not(.demo){display:none}}
.footer{padding:var(--s-8) 0 var(--s-7);border-top:1px solid var(--rule)}
.footer .row{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;align-items:center}
.footer .wordmark{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:.12em;font-size:.8125rem;color:var(--ink)}
.footer .wordmark .dot{color:var(--accent)}
.footer .legal{font-size:.8125rem;color:var(--ink-3)}

/* --- logo & nav --- */
.logo{display:block;height:var(--logo-h);aspect-ratio:var(--logo-ratio);background:var(--logo-url) center/contain no-repeat;position:relative}
[data-logo="none"] .logo{aspect-ratio:auto;width:0;min-width:0}
.logo .word{display:none}
[data-logo="none"] .logo .word{display:inline-flex;align-items:center;height:100%;font-family:var(--font-display);font-weight:var(--w-display);font-size:1.5rem;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
[data-logo="none"] .logo{width:auto}
.logo.footer{height:var(--logo-h-footer);padding:0;border:0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:14px 0}
.nav ul{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:0}
.nav ul a{color:var(--ink);font-family:var(--font-display);font-weight:var(--w-medium);font-size:.9375rem}
.nav ul a:hover{color:var(--accent)}
.nav .cta{display:flex;align-items:center;gap:var(--s-5)}
@media (max-width:900px){.nav ul{display:none}}

/* --- hero --- */
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,13,16,.82) 0%,rgba(11,13,16,.55) 55%,rgba(11,13,16,.2) 100%)}
.hero .inner{padding-block:clamp(72px,10vw,150px) clamp(56px,8vw,110px);max-width:720px}
.hero .kicker{color:#fff}
.hero .kicker::before{background:var(--accent)}
.hero .display{color:#fff}
.hero .lead{color:rgba(255,255,255,.86);margin-top:var(--s-5)}
.hero .btn-row{margin-top:var(--s-7)}
.hero .link-arrow{color:#fff}
.hero .proof{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.25)}
.hero .proof-row{color:rgba(255,255,255,.8)}
.hero .proof-row b{color:#fff}
.hero .wedge{position:absolute;right:0;top:0;bottom:0;width:min(42%,560px);background:var(--accent);opacity:.85;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);z-index:-1;mix-blend-mode:multiply}
.hero-shell{border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr}
  .objections{grid-template-columns:1fr}
  .slant-media{grid-template-columns:1fr}
  .slant-media.flip .media{order:0}
}
@media (max-width:640px){
  .nav .cta .link-arrow{display:none}
  .form .row{grid-template-columns:1fr}
  .hero .wedge{display:none}
  .rule-list li{grid-template-columns:2.5rem 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}.btn:hover,.btn:active,.btn:hover .arrow{transform:none}}