/* ===========================================================================
RUObuilt offer page, variant 2.
---------------------------------------------------------------------------
A second page, not an edit of the first. /funnel/offer/ is untouched and
still served at :8899, so this can be judged next to it rather than instead
of it.
Structure follows jlucreative.com, which is the closest peer to what this
business is: an agency selling done-for-you storefronts, whose own portfolio
is research-compound brands. Four things are borrowed, all of them form:
1. A huge tight sans headline with the payoff word set in serif italic.
2. A soft watercolour ground bleeding in from the edges of white.
3. Work shown as objects in a real setting, not as flat screenshots.
4. Almost no navigation. A wordmark and one control.
What is NOT borrowed is their subhead, which is a guarantee ("Live in 12
days, or you don't pay"). This business does not offer guarantees, on
purpose, so the serif-italic line carries something true instead: the thing
the client actually ends up owning.
Colours are RUObuilt's own, not the reference's mint. The wash is built from
the house accent so it reads as this brand rather than as that one.
=========================================================================== */
:root{
/* THE ACCENT IS ONE LINE. Change --accent and --accent-soft together and the
whole page follows: the serif italic, the eyebrow dots, the ticks, the
button hover, the tile grounds.
The teal (#0E6E60) went because every reference in this category is already
cool-green or blue: JLU mint #14E1C1, Amino Club #2563EB, Bluum powder blue.
Sitting in the middle of them is the one thing a positioning colour must
not do. Deep indigo keeps the clinical register and reads as a different
company at a glance.
Ready alternates, same job, swap both lines:
oxblood #7C2D3A / rgba(124,45,58,.08) warmer, apothecary
brass #8A6212 / rgba(138,98,18,.08) warmest, least like anyone else
graphite #2A2F36 / rgba(42,47,54,.08) no colour at all, type carries it */
--bg:#FFFFFF;
--ink:#0F1113;
--ink-70:rgba(15,17,19,.70);
--ink-45:#475264;
/* Muted text keeps contrast on both white and tinted grounds beneath grain. */
--ink-on-muted:#475264;
--line:rgba(15,17,19,.10);
--wash:#F4F6F9;
--accent:#243B7A;
--accent-soft:rgba(36,59,122,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
background:var(--bg);color:var(--ink);
font-family:'Switzer',system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;line-height:1.5;
overflow-x:clip; /* Keep horizontal clipping without trapping the sticky hero. */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
.narrow{max-width:960px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
/* The serif italic that carries the payoff word. Fraunces at an optical size
this large keeps its contrast; a text-grade italic goes weedy next to an
800-weight sans. */
.em{
font-family:'Fraunces',Georgia,serif;
font-style:italic;font-weight:400;
color:var(--accent);
letter-spacing:-.005em;
}
/* ---- watercolour ground --------------------------------------------------
Four heavily blurred blobs in the house accent, not an image. It weighs
nothing, scales to any viewport, and recolours with the token, which an
exported texture would not. `pointer-events:none` because it sits over the
page's top edge and would otherwise eat the first click. */
.wash{
/* Stays INSIDE the viewport and clips its own blobs. Sized -10% on each
side it was 120% wide, so the page scrolled sideways at every width even
though the blobs themselves were clipped: the container was the overflow,
not its contents. */
position:absolute;inset:0 0 auto 0;height:min(1100px,120vh);
pointer-events:none;z-index:0;overflow:hidden;
}
/* The generated watercolour sits UNDER the CSS blobs rather than replacing
them: the image gives real pigment granulation and paper bleed that gradients
cannot fake, and the blobs keep the ground tied to the accent token so it
still recolours with the brand. */
.wash::before{
content:"";position:absolute;inset:0;
background:url("/funnel/offer-v2/assets/wash-hero.jpg") center top/cover no-repeat;
opacity:.30;mix-blend-mode:multiply;
}
.wash i{
position:absolute;display:block;border-radius:50%;
filter:blur(86px);opacity:.6;
}
.wash i:nth-child(1){width:52vw;height:44vw;left:-8vw;top:-6vw;
background:radial-gradient(circle at 40% 40%,rgba(36,59,122,.30),transparent 66%)}
.wash i:nth-child(2){width:46vw;height:40vw;right:-10vw;top:-10vw;
background:radial-gradient(circle at 60% 40%,rgba(36,59,122,.24),transparent 64%)}
.wash i:nth-child(3){width:40vw;height:34vw;left:18vw;top:12vw;
background:radial-gradient(circle at 50% 50%,rgba(36,59,122,.16),transparent 68%)}
.wash i:nth-child(4){width:34vw;height:30vw;right:6vw;top:20vw;
background:radial-gradient(circle at 50% 50%,rgba(150,168,214,.36),transparent 68%)}
/* ---- nav ---- */
nav{position:relative;z-index:5}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{font-size:20px;font-weight:800;letter-spacing:-.02em}
.logo .em{font-size:21px}
.logo b{font-weight:800}
.nav-plus{
width:44px;height:44px;display:grid;place-items:center;
border:0;background:transparent;cursor:pointer;color:var(--ink);
}
.nav-plus svg{width:26px;height:26px}
/* ---- hero ---- */
.hero{position:relative;text-align:center;padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,88px)}
.hero-in{position:relative;z-index:3}
.hero h1{
font-size:clamp(38px,7.4vw,92px);
font-weight:800;letter-spacing:-.035em;line-height:1.02;
max-width:13ch;margin:0 auto;text-wrap:balance;
}
.hero .sub{
margin-top:clamp(16px,2vw,26px);
font-size:clamp(19px,2.5vw,32px);
line-height:1.3;
}
.hero .sub .em{font-size:1.06em}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,40px)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
border-radius:999px;font-weight:650;font-size:15.5px;
padding:17px 34px;transition:opacity .22s,transform .22s;cursor:pointer;border:0;
font-family:inherit;min-height:52px;
}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--accent)}
.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.btn.ghost:hover{border-color:var(--ink)}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--ink-45)}
/* ---- section furniture ---- */
.eyebrow{
display:inline-flex;align-items:center;gap:9px;
border:1px solid var(--line);background:#fff;
border-radius:999px;padding:8px 16px;
font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-45);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sec{padding:clamp(64px,8vw,120px) 0;position:relative}
.sec h2{
font-size:clamp(30px,5vw,62px);
font-weight:800;letter-spacing:-.032em;line-height:1.06;
margin-top:22px;max-width:18ch;
}
.sec .lede{margin-top:16px;font-size:17px;line-height:1.62;color:var(--ink-70);max-width:56ch}
/* ---- work grid: the reference's strongest idea ---------------------------
Mockups in a real setting with the name and an arrow laid over the image,
rather than a flat browser frame. Asymmetric on purpose: a even grid of
equal tiles reads as a template, which is the wrong thing for this business
to look like. */
.work{display:grid;grid-template-columns:.92fr 1fr;gap:16px;margin-top:44px}
.work-col{display:flex;flex-direction:column;gap:16px}
.tile{
position:relative;border-radius:20px;overflow:hidden;background:var(--wash);
border:1px solid var(--line);
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
/* No scrim. A gradient dark enough to carry white text over a near-white
dashboard also dims the bottom third of the picture into mud, which is what
it did to the storefront tile. The label carries its own chip instead:
legible on any image, and it costs the image nothing. */
/* This slot went through three sources before it worked, so the constraint is
worth stating: it has to fill the tile, show the storefront at the same
density as the backend tiles beside it, and not be cropped mid-element.
The phone capture could not do that. At 420x945 it was a 4:9 sliver: contain
left tile ground down both sides so it read as a thumbnail on a card, and
cover fixed the bleed by scaling a 420px-wide image into a 570px tile, a 1.4x
upscale that looked zoomed and soft next to screenshots at natural density.
No CSS solves an undersized source. The fix was the capture, not the rule:
a desktop shot of the same demo storefront at 1200x1800, exactly the tile's
2:3, so it fills edge to edge, crops nothing, and DOWNscales 0.47x into
place. Keep any replacement at 2:3 and at least 1140px wide (2x the rendered
570) or this regresses to blurry. */
.tile.tall img{aspect-ratio:2/3;object-fit:cover;object-position:top center}
.tile.wide img{aspect-ratio:16/10}
.tile.short img{aspect-ratio:16/9}
.tile-label{
z-index:2;position:absolute;left:18px;bottom:16px;right:18px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tile-label > span:first-child{
background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.tile-arrow{
width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);
display:grid;place-items:center;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.tile-arrow svg{width:16px;height:16px}
/* ---- proof strip ---- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:clamp(34px,4vw,54px) 0}
.proof-item b{display:block;font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.03em}
.proof-item span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-45);line-height:1.45}
/* ---- close ---- */
.close{text-align:center;padding:clamp(72px,9vw,132px) 0}
.close h2{margin-left:auto;margin-right:auto;max-width:16ch}
.close .lede{margin-left:auto;margin-right:auto;text-align:center}
footer{border-top:1px solid var(--line);padding:36px 0;font-size:13.5px;color:var(--ink-45)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:860px){
.hero h1{max-width:none}
.work{grid-template-columns:1fr}
.proof-in{grid-template-columns:1fr 1fr;gap:28px 20px}
.wash i{filter:blur(64px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- content sections ------------------------------------------------------
The first pass was a skeleton: a hero, one work grid and a stat strip. The
original page carries fourteen sections and every one of them is load-bearing
copy, including the two that do the most work in this category: what the
build actually includes, and what we explicitly do NOT do.
Ported here rather than rewritten. Only the presentation changes. */
/* problem grid */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.prob-card{
border:1px solid var(--line);border-radius:18px;padding:28px 26px;
background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
}
.prob-card h3{font-size:18px;font-weight:750;letter-spacing:-.015em;margin-bottom:10px}
.prob-card p{font-size:15px;line-height:1.6;color:var(--ink-70)}
.prob-n{
display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:26px;color:var(--accent);line-height:1;margin-bottom:12px;
}
/* two-column comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.vs-col{border:1px solid var(--line);border-radius:18px;padding:30px 28px;background:#fff}
.vs-col.good{background:var(--wash);border-color:rgba(36,59,122,.16)}
.vs-col h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-45);margin-bottom:16px}
.vs-col.good h3{color:var(--accent)}
.vs-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.vs-col li{font-size:15.5px;line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.vs-col li::before{content:"·";color:var(--ink-45);flex:none}
.vs-col.good li::before{content:"✓";color:var(--accent);font-weight:700}
.vs-note{margin-top:16px;font-size:14px;color:var(--ink-45);line-height:1.55}
/* included: page chips + numbered list */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{
border:1px solid var(--line);border-radius:999px;padding:9px 16px;
font-size:13.5px;font-weight:600;background:#fff;
}
.inc-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}
.inc-item{border-top:1px solid var(--line);padding-top:20px}
.inc-item b{
display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:20px;color:var(--accent);margin-bottom:8px;font-weight:400;
}
.inc-item h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.inc-item p{font-size:15px;line-height:1.6;color:var(--ink-70)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.step{border-top:2px solid var(--ink);padding-top:20px}
.step .n{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-45);text-transform:uppercase}
.step h3{font-size:19px;font-weight:750;letter-spacing:-.015em;margin:10px 0 9px}
.step p{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
/* pricing */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;align-items:stretch}
.tier{border:1px solid var(--line);border-radius:22px;padding:34px 32px;background:#fff;display:flex;flex-direction:column}
.tier.feature{border-color:var(--accent);box-shadow:0 30px 70px -50px rgba(36,59,122,.55)}
.tier h3{font-size:26px;font-weight:800;letter-spacing:-.025em}
.tier .tier-sub{margin-top:8px;font-size:14.5px;color:var(--ink-45);line-height:1.55}
.tier ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.tier li{font-size:15px;line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.tier li::before{content:"✓";color:var(--accent);font-weight:700;flex:none}
.tier .btn{margin-top:auto;width:100%}
/* what we don't do */
.honest{background:var(--ink);color:#fff}
.honest .eyebrow{background:transparent;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6)}
.honest h2{color:#fff}
.honest .em{color:#9FB3E8}
.no-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.no-item{border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
.no-item h3{font-size:17.5px;font-weight:700;letter-spacing:-.012em;margin-bottom:8px}
.no-item p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.honest-close{
margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
font-size:17px;line-height:1.6;color:rgba(255,255,255,.8);max-width:64ch;
}
/* faq */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
padding:22px 0;font-size:18px;font-weight:650;letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:300;color:var(--ink-45)}
.faq details[open] summary::after{content:"\2212";color:var(--accent)}
.faq p{padding:0 0 24px;font-size:15.5px;line-height:1.68;color:var(--ink-70);max-width:78ch}
@media (max-width:900px){
.prob-grid{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr}
.inc-list,.no-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
.prob-grid,.steps,.vs,.tiers{grid-template-columns:1fr}
.faq summary{font-size:16.5px}
}
/* nav links: the first pass had none, following the reference's near-empty bar.
With nine sections the page needs them, so they sit centred and disappear
under 900 where the bar would otherwise crowd. */
.nav-links{display:flex;gap:4px;margin-left:auto;margin-right:auto}
.nav-links a{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;
color:var(--ink-70);transition:none}
.nav-links a:hover{background:var(--accent-soft);color:var(--accent)}
.nav-cta{padding:11px 22px;font-size:14px;min-height:44px}
@media (max-width:900px){ .nav-links{display:none} }
/* ---- the polish layer ------------------------------------------------------
A teardown of the reference showed its "professional" feel is not many
effects. It is ONE reveal primitive applied to every block, one accent used
with discipline, and one layered shadow recipe. Their version rides
framer-motion; this is the same motion in CSS with a five-line observer,
because a static page does not need a 141KB animation runtime to fade
something in.
Sections remain visible and rise 16px when they enter the viewport. */
.rev{opacity:1;transform:translateY(16px);transition:transform 600ms cubic-bezier(.23,1,.32,1)}
.rev.in{opacity:1;transform:none;filter:none}
/* Stagger siblings inside a group so a grid arrives as a wave, not a slab. */
.rev-g > *{transition-delay:calc(var(--i,0) * 40ms)}
/* Content must never depend on JS to be visible. If the observer never runs,
or the visitor prefers reduced motion, everything is simply already there. */
@media (prefers-reduced-motion:reduce){
.rev{opacity:1;transform:none;filter:none;transition:none}
}
.no-js .rev{opacity:1;transform:none;filter:none}
/* Their card shadow, lifted verbatim from the shipped stylesheet. Three stacked
ambient layers plus a 1px inset white top highlight: that highlight is what
makes a white card read as raised rather than as a rectangle with a border. */
.depth{
box-shadow:
0 1px 1px rgba(15,23,23,.04),
0 4px 10px -2px rgba(15,23,23,.05),
0 18px 40px -12px rgba(15,23,23,.08),
inset 0 1px rgba(255,255,255,.9);
border:1px solid rgba(15,23,23,.05);
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.depth:hover{
transform:translateY(-3px);
box-shadow:
0 2px 3px rgba(15,23,23,.05),
0 8px 18px -4px rgba(15,23,23,.07),
0 30px 60px -18px rgba(15,23,23,.12),
inset 0 1px rgba(255,255,255,.95);
}
/* The reference's portfolio hover: a slow zoom, not a snap. 0.8s is the whole
difference between "expensive" and "a CSS hover". */
.tile img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
/* ---- hero furniture -------------------------------------------------------
A first screen that is only a headline and two buttons makes a visitor scroll
to find out whether they are even the right person. These two blocks answer
that above the fold: who it is for, and four numbers that are checkable
further down the same page. */
.hero-kicker{
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-45);margin-bottom:clamp(14px,2vw,22px);
}
.hero-facts{
list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
gap:18px;max-width:820px;margin:clamp(30px,4vw,44px) auto 0;
padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line);
}
.hero-facts b{
display:block;font-size:clamp(24px,2.6vw,32px);font-weight:800;
letter-spacing:-.03em;line-height:1;
}
.hero-facts span{
display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--ink-45);
}
@media (max-width:680px){
.hero-facts{grid-template-columns:1fr 1fr;gap:22px 16px;text-align:left}
}
/* ---- motion ----------------------------------------------------------------
The reveal primitive was one note played on every block, which is why the
page read as static despite technically animating: everything arrived the
same way, so nothing arrived. Five different behaviours now, each doing a
job the others cannot.
All of it is CSS or a few lines of observer. Nothing here needs a runtime,
and every effect is switched off wholesale under prefers-reduced-motion at
the bottom of this block. */
/* 1 ---- HERO CHOREOGRAPHY --------------------------------------------------
Pure CSS on a delay ladder, deliberately NOT the scroll observer. The hero is
the LCP element; gating it behind JS means the first thing a visitor sees is
an empty screen while a script decides whether to show it. */
@keyframes rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.hero-kicker,
.hero h1,
.hero .sub,
.hero .hero-cta,
.hero .hero-note,
.hero-facts {
opacity: 0;
animation:rise 500ms cubic-bezier(.23,1,.32,1) both;animation-play-state:paused;
}
.hero-kicker { animation-delay: 0ms }
.hero h1 { animation-delay: .05s }
.hero .sub { animation-delay: .10s }
.hero .hero-cta{ animation-delay: .15s }
.hero .hero-note{animation-delay: .20s }
.hero-facts { animation-delay: .25s }
/* The store is the biggest element in the hero and was the one thing that popped
in while everything above it rose. It now lifts and settles a beat after the
numbers, with transform only so the LCP image is always visible. */
@keyframes riseScale {from{transform:translateY(16px) scale(.985)}to{transform:none}}
.hero-anchor{opacity:1;animation:riseScale 700ms cubic-bezier(.23,1,.32,1) 900ms both;animation-play-state:paused}
/* The wash breathes, very slowly. A completely still ground is the single
biggest reason a page feels like a screenshot of itself. */
@keyframes drift {
0%,100% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(1.5%, 1.2%, 0) scale(1.06); }
}
.wash i:nth-child(1){ animation: drift 26s ease-in-out infinite }
.wash i:nth-child(2){ animation: drift 31s ease-in-out infinite reverse }
.wash i:nth-child(3){ animation: drift 24s ease-in-out infinite -8s }
.wash i:nth-child(4){ animation: drift 34s ease-in-out infinite reverse -5s }
/* 2 ---- HEADLINE WORD STAGGER ----------------------------------------------
Section headings arrive word by word rather than as a slab. The words are
wrapped at runtime, so the markup stays plain text and a visitor with no JS
reads a normal heading. */
.w { display:inline-block; opacity:.35; transform:translateY(.5em);
transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.in .w { opacity:1; transform:none }
/* 3 ---- SHOWPIECE PARALLAX -------------------------------------------------
The store lifts and settles as it enters. Driven by one observer-set custom
property rather than a scroll handler, so it costs nothing while off-screen. */
/* 4 ---- NAV ON SCROLL ------------------------------------------------------
The bar earns a ground and a hairline once the page moves. Without it the nav
floats over the wash with nothing separating it from the hero. */
nav .nav-in { transition: none }
.nav-solid {
position:fixed; top:0; left:0; right:0; z-index:60;
background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.nav-solid.show { transform:none }
/* 5 ---- NUMBERS THAT COUNT -------------------------------------------------
Tabular figures so a counting number does not reflow the layout under itself
while it ticks. This is the one effect people actually watch. */
.hero-facts b, .proof-item b { font-variant-numeric: tabular-nums }
/* Interactive polish */
.btn.primary { position:relative; overflow:hidden }
.btn.primary::after{
content:""; position:absolute; inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
transform:translateX(-120%);
}
.btn.primary:hover::after{ transform:translateX(120%); transition:transform .8s ease}
.eyebrow .dot{ animation: pulse 2.6s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }
.tile-arrow{ transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tile:hover .tile-arrow{ transform: translate(3px,-3px) }
.faq summary::after{ transition:transform .35s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{ transform: rotate(180deg) }
.step{ transition:none}
.step:hover{ border-color: var(--accent) }
/* Everything above, off. Not reduced: off. Someone who asks for less motion is
usually asking because motion makes them ill, and a "gentler" version of an
effect is still the effect. */
@media (prefers-reduced-motion: reduce) {
.hero-kicker,.hero h1,.hero .sub,.hero .hero-cta,.hero .hero-note,
.hero-facts,.hero-anchor,
.wash i{ animation:none }
.w{ opacity:1; transform:none; transition:none }
.btn.primary::after,.eyebrow .dot,
.tile-arrow,.faq summary::after{ animation:none; transition:none; transform:none }
}
/* ---- process timeline ------------------------------------------------------
The four steps were four cards with a rule on top: correct information,
no sense of sequence. A process section has to LOOK like a process, and the
thing that does that is a rail the eye can follow.
The rail carries three signals at once, which is the whole reason to build it
rather than restyle the cards:
- order, because the nodes sit on one line
- DURATION, because each segment is as wide as the days it takes, so a
reader can see that "we build" is most of the twenty and the two steps
they are involved in are short
- progress, because the fill sweeps as the section enters
Duration is the part that earns its place. "About 20 business days" is an
abstraction; a segment that is visibly two thirds of the bar is not. */
.tl { margin-top: clamp(34px, 4vw, 52px) }
/* The rail itself. A single grid whose columns are the step weights, so the
segment widths and the cards below stay locked to the same track sizes and
cannot drift apart. */
.tl-rail {
display: grid;
grid-template-columns: var(--tl-cols);
align-items: center;
position: relative;
height: 46px;
}
/* the groove */
.tl-rail::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%;
height: 3px; transform: translateY(-50%);
background: var(--line); border-radius: 999px;
}
/* the fill, swept by the observer */
.tl-rail::after {
content: ""; position: absolute; left: 0; top: 50%;
height:3px;width:100%;transform:translateY(-50%) scaleX(0);transform-origin:left;
background: var(--accent); border-radius: 999px;
transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
.tl.in .tl-rail::after{transform:translateY(-50%) scaleX(1)}
.tl-seg { position: relative; height: 100% }
/* Node sits at the START of its segment, so the first node is the first day. */
.tl-node {
position: absolute; left: 0; top: 50%;
width: 14px; height: 14px; margin-left: -1px;
transform: translateY(-50%) scale(.4); opacity: 0;
border-radius: 50%; background: var(--bg);
border: 3px solid var(--accent); z-index: 2;
transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s;
}
.tl.in .tl-node { transform: translateY(-50%) scale(1); opacity: 1 }
/* Staggered to land as the fill passes each one, so the bar looks like it is
switching the nodes on rather than the two animating independently. */
.tl.in .tl-seg:nth-child(1) .tl-node { transition-delay: .10s }
.tl.in .tl-seg:nth-child(2) .tl-node { transition-delay: .52s }
.tl.in .tl-seg:nth-child(3) .tl-node { transition-delay: .86s }
.tl.in .tl-seg:nth-child(4) .tl-node { transition-delay: 1.34s }
/* the day label above each segment */
.tl-days {
position: absolute; left: 0; top: -4px;
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-45); white-space: nowrap;
opacity: 0; transform: translateY(4px);
transition:opacity .5s ease,transform .5s ease;
}
.tl.in .tl-days { opacity: 1; transform: none; transition-delay: .5s }
/* The cards are EQUAL width, not duration-weighted.
Locking them to the same track as the rail was the tidier idea and it made
the section unreadable: at 1fr / 2fr / 14fr / 3fr, "Apply & talk" wrapped
into a thin ribbon while "We build" sat in a mostly empty field. The rail
carries duration because a bar is a quantity; the cards carry text, and text
wants even measure. */
.tl-steps {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px; margin-top: 22px;
}
.tl-step { padding-right: 8px }
.tl-step .n {
font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent);
}
.tl-step h3 { font-size: 19px; font-weight: 750; letter-spacing: -.015em; margin: 9px 0 8px }
.tl-step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-70) }
.tl-who {
display: inline-block; margin-top: 12px; padding: 5px 11px;
border-radius: 999px; font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
}
.tl-who.you { background: var(--accent-soft); color: var(--accent) }
.tl-who.us { background: rgba(15,17,19,.06); color: var(--ink-on-muted) }
/* Below 820 a proportional horizontal rail stops being readable: the widest
segment is still only a phone wide, and the labels collide. It becomes a
vertical spine, which loses the duration comparison but keeps the sequence,
and sequence is the part that has to survive. */
@media (max-width: 820px) {
.tl-rail { display: none }
.tl-steps {
grid-template-columns: 1fr; gap: 0;
border-left: 3px solid var(--line); margin-left: 7px;
}
.tl-step {
position: relative; padding: 0 0 30px 26px;
}
.tl-step:last-child { padding-bottom: 0 }
.tl-step::before {
content: ""; position: absolute; left: -9px; top: 4px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--bg); border: 3px solid var(--accent);
}
.tl-step .tl-m-days {
display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-45); margin-bottom: 6px;
}
}
.tl-m-days { display: none }
@media (prefers-reduced-motion: reduce) {
.tl-rail::after { width: 100%; transition: none }
.tl-node { opacity: 1; transform: translateY(-50%) scale(1); transition: none }
.tl-days { opacity: 1; transform: none; transition: none }
}
/* ---- the inventory ---------------------------------------------------------
The strongest proof device available to a business with no clients to name:
enumerate the work precisely. Nobody who has not built these stores can list
what is in one, and a reader who has tried to build one recognises every row.
ShipFast's version counts HOURS SAVED. This one counts THINGS SHIPPED,
deliberately. Hours saved is a claim about the buyer's alternative and I have
no way to check it; a count of what is in the build is a fact, and every
number in this table can be verified by opening the demo and counting. That
distinction is the whole reason this section is credible rather than
decorative. */
.inv { margin-top: clamp(32px, 4vw, 46px); border-top: 1px solid var(--ink) }
.inv-row {
display: grid; grid-template-columns: 1fr auto;
gap: 24px; align-items: baseline;
padding: 24px 0; border-bottom: 1px solid var(--line);
}
.inv-row h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.inv-row p { font-size: 16px; line-height: 1.5; color: var(--ink-45); margin-top: 8px;
max-width: 68ch }
.inv-n {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; font-weight: 600; white-space: nowrap;
background: var(--accent-soft); color: var(--accent);
border-radius: 999px; padding: 7px 14px;
}
/* The last row is the sum, and it should read as one. */
.inv-row.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px }
.inv-row.total h3 { font-size: 19px }
.inv-row.total .inv-n {
background: var(--ink); color: #fff; font-size: 14px; padding: 9px 16px;
}
@media (max-width: 560px) {
.inv-row { grid-template-columns: 1fr; gap: 10px }
.inv-n { justify-self: start }
}
/* ---- fit / not fit ---------------------------------------------------------
The "what we don't do" list was a wall of refusals on a dark ground. Refusals
are the right content and the wrong frame: the same lines read as confidence
when they are half of a qualification device rather than a disclaimer.
Turning people away is itself a trust signal, which a disclaimer never is. */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(30px,4vw,44px) }
.fit-col { border-radius: 20px; padding: 30px 28px }
.fit-col.yes { background: var(--accent-soft); border: 1px solid rgba(36,59,122,.18) }
.fit-col.no { background: rgba(15,17,19,.035); border: 1px solid var(--line) }
.fit-col h3 {
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
margin-bottom: 18px;
}
.fit-col.yes h3 { color: var(--accent) }
.fit-col.no h3 { color: var(--ink-45) }
.fit-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px }
.fit-col li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5 }
.fit-col li::before {
position: absolute; left: 0; top: 0; font-weight: 700;
}
.fit-col.yes li::before { content: "✓"; color: var(--accent) }
.fit-col.no li::before { content: "✕"; color: var(--ink-45) }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr } }
/* ---- capability marquee ----------------------------------------------------
Where a page with clients runs a logo carousel. This runs the deliverables
instead, which is the honest substitute and says more: a logo tells you
someone bought, a list of what ships tells you what you get. */
.mq {
overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 20px 0; background: var(--wash);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track { display: flex; width:auto; animation:none;flex-wrap:wrap;justify-content:center }
.mq:hover .mq-track { animation-play-state: paused }
.mq-track span {
padding: 0 26px; font-size: 14.5px; font-weight: 600; color: var(--ink-45);
white-space: nowrap; display: inline-flex; align-items: center; gap: 26px;
}
.mq-track span::after { content: "•"; color: var(--accent); opacity: .5 }
/* ---- 1. accordion, animated properly ---------------------------------------
Height cannot be transitioned from auto, which is why most accordions either
snap open or need JS to measure. The grid trick avoids both: animate the ROW
from 0fr to 1fr and the browser interpolates the intrinsic height for you.
No measuring, no library, and it stays correct when the copy changes. */
.faq details .a {
display: grid; grid-template-rows: 0fr;
transition:none;
}
.faq details[open] .a { grid-template-rows: 1fr }
.faq details .a > div { overflow: hidden }
.faq details .a p { padding-bottom: 0 }
.faq details .a > div > p { padding: 4px 0 26px }
/* details[open] is toggled by the browser BEFORE our transition runs, so the
content would appear instantly on open without this: hold it hidden for a
frame and let the row height carry it. */
.faq summary { user-select: none }
/* ---- 2. capability marquee -------------------------------------------------
Styles live with the inventory block above (.mq). This only adds the section
frame around it. */
.mq-sec { padding: 0 }
.mq-label {
text-align: center; font-size: 11.5px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45);
padding: 30px 0 18px;
}
/* ---- 3. browser chrome -----------------------------------------------------
A screenshot floating on a page is an image. The same screenshot inside a
window with a URL bar is software. It is the cheapest credibility on the
page: three dots and a pill, and the reader files it under "thing that
exists" rather than "picture in a deck". */
.chrome {
border-radius: 14px; overflow: hidden; background: #fff;
border: 1px solid var(--line);
box-shadow: 0 1px 1px rgba(15,23,23,.04),
0 4px 10px -2px rgba(15,23,23,.05),
0 24px 50px -16px rgba(15,23,23,.14);
}
.chrome-bar {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; background: var(--wash);
border-bottom: 1px solid var(--line);
}
/* Three dots from one element: the box-shadow trick, so the markup stays clean. */
.chrome-dots {
width: 10px; height: 10px; border-radius: 50%; flex: none;
background: #FF5F57;
box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
margin-right: 32px;
}
.chrome-url {
flex: 1; text-align: center; font-size: 12px; color: var(--ink-45);
background: var(--bg); border: 1px solid var(--line);
border-radius: 999px; padding: 5px 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chrome img { display: block; width: 100% }
/* ---- 4. before / after slider ----------------------------------------------
Built on a real . That is the whole design decision: it
arrives with drag, touch, keyboard arrows, and a screen-reader label already
working, which a div-and-pointer-events version has to reimplement and
usually only gets half right. */
.ba { position: relative; overflow: hidden; isolation: isolate }
/* height:auto is REQUIRED. The carries height="1300", and an explicit
height attribute beats width:100%, so the box stayed 1300px tall at every
viewport: 1096x1300 on desktop and 302x1300 on a phone. That is the
"stretched" look, and it is the SECOND time this exact omission has bitten
this page (the hero bleed band had it too). If an image here ever looks
wrong, check this line first.
The aspect cap crops to the top of each screenshot rather than showing 1300px
of page at a size nobody can read. */
.ba > img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
}
.ba-top {
position: absolute; inset: 0;
clip-path: inset(0 calc(100% - var(--p, 50%)) 0 0);
}
.ba-top img {
display: block; width: 100%; height: auto;
aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
}
.ba-handle {
position: absolute; top: 0; bottom: 0; left: var(--p, 50%);
width: 2px; background: #fff; transform: translateX(-1px);
box-shadow: 0 0 0 1px rgba(15,17,19,.12); pointer-events: none; z-index: 3;
}
.ba-handle::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 40px; height: 40px; transform: translate(-50%,-50%);
border-radius: 50%; background: #fff;
box-shadow: 0 4px 16px rgba(15,17,19,.28);
}
/* the little arrows inside the knob */
.ba-handle::before {
/* nowrap: the two glyphs were breaking onto separate lines inside the 40px
knob and stacking vertically. */
content: "‹ ›"; position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%); z-index: 4; white-space: nowrap;
font-size: 16px; line-height: 1; color: var(--ink); letter-spacing: 3px;
}
.ba input[type=range] {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: col-resize; z-index: 5;
-webkit-appearance: none; appearance: none; background: transparent;
}
.ba:has(input[type=range]:focus-visible) .ba-handle::after {
box-shadow: 0 4px 16px rgba(15,17,19,.28), 0 0 0 3px var(--accent);
}
.ba-tag {
position: absolute; top: 14px; z-index: 4;
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
padding: 7px 13px; border-radius: 999px; pointer-events: none;
}
.ba-tag.l { left: 14px; background: rgba(15,17,19,.72); color: #fff }
.ba-tag.r { right: 14px; background: var(--accent); color: #fff }
.ba-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-45); text-align: center }
/* A 16:10 crop is 189px tall on a phone: technically correct and useless, since
nobody can tell two storefronts apart in a 189px strip. Taller crop so there
is something to actually compare. */
@media (max-width: 700px) {
.ba > img, .ba-top img { aspect-ratio: 3 / 4 }
.ba-tag { font-size: 10px; padding: 6px 10px }
.ba-handle::after { width: 34px; height: 34px }
}
/* The price. It sits above the sub-line because it is the thing being looked
for, and a buyer who has to hunt for it assumes it is being hidden. */
/* Unused while the price is off the page (Carson's call, 2026-08-31). Kept
so restoring the number is one line of markup, not a rebuild. */
.tier-price {
font-size: clamp(30px, 3.4vw, 40px); font-weight: 800;
letter-spacing: -.03em; line-height: 1; margin-top: 14px;
}
.tier-price span {
font-size: 14px; font-weight: 600; letter-spacing: 0;
color: var(--ink-45); margin-left: 8px;
}
/* ---- mobile nav ------------------------------------------------------------
Two bars that become an X. The drawer is a plain block under the bar rather
than a full-screen overlay: on a page this long the visitor wants to jump to
a section, not be interrupted by a modal. */
.nav-burger{
display:none; width:44px; height:44px; margin-left:10px; flex:none;
align-items:center; justify-content:center; gap:5px; flex-direction:column;
background:transparent; border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.nav-burger i{
display:block; width:17px; height:2px; background:var(--ink); border-radius:2px;
transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.nav-burger[aria-expanded=true] i:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.nav-burger[aria-expanded=true] i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }
/* This guard is the whole thing. Without it the rule below silently defeats
the hidden attribute, because an author declaration outranks the UA's
[hidden]{display:none}. Any component that toggles `hidden` and also sets its
own display needs this line. */
.nav-drawer[hidden]{ display:none !important }
.nav-drawer{
position:fixed; top:84px; left:0; right:0; z-index:70;
background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
border-bottom:1px solid var(--line); padding:14px 20px 20px;
display:flex; flex-direction:column; gap:2px;
box-shadow:0 20px 40px -20px rgba(15,17,19,.2);
}
.nav-drawer a{
padding:14px 4px; font-size:16px; font-weight:600;
border-bottom:1px solid var(--line);
}
.nav-drawer a:last-child{
border-bottom:0; margin-top:14px; justify-content:center; text-align:center;
}
.nav-drawer .nav-label{
padding:16px 4px 6px; font-size:11px; font-weight:600; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink-45);
}
.nav-drawer a .arr{ color:var(--ink-45); font-weight:600; margin-left:6px; }
@media (max-width:900px){ .nav-burger{ display:flex } }
@media (min-width:901px){ .nav-drawer{ display:none !important } }
/* Footer links have to look like links, or "Privacy" reads as body copy and
the visitor never learns the page exists. */
.foot-in a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.foot-in a:hover{ color:var(--accent) }
/* The right column divides whatever height the left column sets, instead of
each tile sizing to its own aspect ratio and leaving the remainder as dead
space. Three tiles rather than two keeps each one close to its natural 16:10,
so cover crops a few pixels rather than a third of the picture.
Gated above the stacking breakpoint on purpose: below 860 the columns become
one, nothing external defines the height, and flex:1 against an auto-height
parent would collapse these tiles to nothing. */
@media (min-width:861px){
.work-col.fill{height:100%}
.work-col.fill .tile{flex:1 1 0;min-height:0}
.work-col.fill .tile img{
height:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center;
}
}
/* ---- the backend walkthrough ----------------------------------------------
Alternating text/screenshot rows. Why this rather than another feature grid:
a grid asserts, a screenshot shows. Every number in the copy is legible in the
image beside it, which is both what keeps the section honest and what earns
the vertical space it costs.
Images sit in the same browser chrome the rest of the page uses, so they read
as software rather than as pictures in a deck. */
.walk { margin-top: clamp(36px, 4.5vw, 56px); display: flex; flex-direction: column; gap: 16px }
.walk-row {
display: grid; grid-template-columns: 0.86fr 1.14fr;
gap: clamp(24px, 3.5vw, 56px); align-items: center;
background: var(--wash); border: 1px solid var(--line);
border-radius: 24px; padding: clamp(24px, 3vw, 48px);
}
/* Alternate the sides so the eye zig-zags down the page instead of running down
one rail and skipping the copy entirely. */
.walk-row:nth-child(even) { grid-template-columns: 1.14fr 0.86fr }
.walk-row:nth-child(even) .walk-txt { order: 2 }
.walk-row:nth-child(even) .walk-img { order: 1 }
.walk-n {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--ink); color: #fff;
font-size: 12.5px; font-weight: 700;
}
.walk-kicker {
display: block; margin-top: 16px;
font-size: 11px; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-45);
}
.walk-txt h3 {
margin-top: 10px;
font-size: clamp(26px, 3vw, 38px); line-height: 1.1;
letter-spacing: -.03em; font-weight: 800;
}
.walk-txt p {
margin-top: 14px; font-size: 16px; line-height: 1.6;
color: var(--ink-70); max-width: 46ch;
}
/* 1400x883 desktop captures, held at their own ratio so nothing stretches.
height:auto is load-bearing here: the width/height attributes are present for
layout stability, and without it the attribute height wins over width:100%.
That exact omission has bitten this page twice already. */
.walk-img .chrome { box-shadow: 0 20px 50px -30px rgba(15,17,19,.35) }
.walk-img img {
display: block; width: 100%; height: auto;
aspect-ratio: 1400 / 883; object-fit: cover; object-position: top left;
}
.walk-foot { margin-top: 26px; text-align: center; font-size: 15px; color: var(--ink-45) }
.walk-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.walk-foot a:hover { color: var(--accent) }
@media (max-width: 900px) {
/* One column, image first: on a phone the picture is what stops the scroll and
the copy reads as its caption. !important because the nth-child order rules
above are equally specific and would otherwise keep winning on odd rows. */
.walk-row,
.walk-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px }
.walk-row .walk-txt { order: 2 !important }
.walk-row .walk-img { order: 1 !important }
.walk-txt p { max-width: none }
}
/* ---- ad creative marquee ---------------------------------------------------
Full-bleed on purpose: these are 9:16 frames and the row reads as a reel, not
as a gallery inside a column. It is the one section allowed to break the wrap.
Same seam trick as the capability marquee: the six frames are rendered twice
and the track translates exactly -50%, so the loop lands on an identical
frame. The duplicates are aria-hidden with empty alt, or a screen reader
announces the same six twice. */
.cr-marquee{
margin-top: clamp(32px, 4vw, 48px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cr-row{ display: flex; width: max-content; gap: 16px; animation: mq 64s linear infinite }
.cr-marquee:hover .cr-row{ animation-play-state: paused }
.cr{ width: clamp(190px, 17vw, 250px); flex: none }
.cr img{
display: block; width: 100%; height: auto;
aspect-ratio: 720 / 1290; /* the real frame ratio; without it these
reflow as each lazy image arrives */
object-fit: cover; border-radius: 14px; background: var(--wash);
}
.cr figcaption{
margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-70);
}
/* The honesty line. It sits under the reel rather than in the caption of each
frame, because saying it once plainly is stronger than repeating it six times
in small print. */
.demo-note{
display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
margin-top: clamp(24px, 3vw, 34px);
padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px;
font-size: 13.5px; line-height: 1.5; color: var(--ink-70);
}
.demo-note b{
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent);
}
@media (prefers-reduced-motion: reduce){
.cr-row{ animation: none }
.cr-marquee{ overflow-x: auto; -webkit-overflow-scrolling: touch }
/* With the animation off the duplicates are just repetition, so drop them and
let the reader scroll the six real frames. */
.cr-dupe{ display: none }
}
@media (max-width: 600px){
.demo-note{ border-radius: 16px }
}
/* Phone screenshots below 700px. The desktop captures are 1400px wide and land
at about 280px on a phone, which renders their numbers at roughly five pixels:
the section's own rule is that every figure in the copy is legible in the
image beside it, and that passed on a laptop and failed on every phone.
The replacement is not a crop, it is the same admin captured AT 390, so the
picture is legible and it quietly demonstrates the mobile build at the same
time. */
@media (max-width:700px){
.walk-img img{ aspect-ratio: 780 / 1560; object-position: top center }
/* Browser chrome around a phone screenshot reads as a category error, so the
frame drops away and the phone capture speaks for itself. */
.walk-img .chrome-bar{ display:none }
.walk-img .chrome{ border:0; box-shadow:none; background:none }
.walk-img img{ border-radius:14px; border:1px solid var(--line) }
}
/* ---- money terms -----------------------------------------------------------
A disclosure, styled to be read rather than skimmed past. Collapsed by
default because most visitors do not want it, open in one click because the
ones who do want it are the ones about to pay. */
.terms{
margin-top: 26px; border: 1px solid var(--line); border-radius: 14px;
background: var(--bg); overflow: hidden;
}
.terms summary{
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 18px 22px; cursor: pointer; list-style: none;
font-size: 16px; font-weight: 600; min-height: 56px;
}
.terms summary::-webkit-details-marker{ display: none }
.terms summary:hover{ background: rgba(15,17,19,.02) }
.terms summary svg{ width: 18px; height: 18px; flex: none; color: var(--ink-45);
transition:transform .3s cubic-bezier(.16,1,.3,1)}
.terms[open] summary svg{ transform: rotate(180deg) }
.terms summary:focus-visible{ outline: none;
box-shadow: inset 0 0 0 2px var(--accent) }
.terms-b{ padding: 4px 22px 22px; border-top: 1px solid var(--line) }
.terms-b p{ margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--ink-70);
max-width: 68ch }
.terms-b b{ color: var(--ink) }
@media (prefers-reduced-motion: reduce){ .terms summary svg{ transition: none } }
/* ---- the splash -------------------------------------------------------------
A vial filling, once per session, then out of the way. It is a tax the
visitor pays before seeing anything, so it is short, it never waits on the
network, and it removes itself on a timer that runs regardless of what else
happens on the page. */
.splash{
position:fixed; inset:0; z-index:9999;
display:grid; place-items:center;
background:var(--bg);
transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
.splash[hidden]{ display:none !important }
.splash.gone{ opacity:0; pointer-events:none }
.splash-in{ display:flex; flex-direction:column; align-items:center; gap:22px }
.vial{ width:96px; height:186px; overflow:visible }
.vial .glass{ fill:none; stroke:var(--ink); stroke-width:3.2; opacity:.42;
stroke-linejoin:round; stroke-linecap:round }
.vial .cap{ fill:var(--ink); opacity:.34 }
.vial .neck{ fill:var(--ink); opacity:.18 }
/* The liquid is a solid rect revealed upward, so its surface stays a hard
line. A gradient would read as a glow rather than a fill. */
.vial .fluid{ fill:var(--accent); transform-box:fill-box;transform-origin:bottom;transform:scaleY(0); }
.vial .shine{ fill:#fff; opacity:.28 }
.splash-word{
font:600 12px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
opacity:0; transform:translateY(4px);
}
@keyframes vial-fill{0%{transform:scaleY(0)}70%{transform:scaleY(.76)}100%{transform:scaleY(.79)}}
@keyframes vial-shine{
0% { transform:translateY(46px); opacity:0 }
30% { opacity:.28 }
100% { transform:translateY(-6px); opacity:0 }
}
@keyframes splash-word{ to{ opacity:.55; transform:none } }
.splash.run .fluid{ animation:vial-fill 1s cubic-bezier(.35,.1,.25,1) forwards }
.splash.run .shine{ animation:vial-shine 1s cubic-bezier(.35,.1,.25,1) forwards }
.splash.run .splash-word{ animation:splash-word .5s ease .45s forwards }
/* No animation and no delay. Someone who has asked for less motion should not
be made to wait for motion they will not see. */
@media (prefers-reduced-motion: reduce){
.splash{ transition:none }
.splash.run .fluid{ animation:none;transform:scaleY(.79) }
.splash.run .shine{ animation:none; opacity:0 }
.splash.run .splash-word{ animation:none; opacity:.55; transform:none }
}
/* ===========================================================================
PASS 2
---------------------------------------------------------------------------
Everything below is a second pass over a page that already worked. It is
appended rather than merged so the first pass stays readable as what it was,
and so any single change here can be lifted back out by deleting its block.
=========================================================================== */
/* ---- 1. THE FOLD ------------------------------------------------------------
The hero was a tall stack that happened to start at the top of the page:
kicker, headline, sub, buttons, note, four facts, and then a screenshot, all
in one . On a laptop that put the screenshot half-cropped at the
bottom edge, which is the worst possible place for it. Half a picture reads
as a page that has been cut off rather than as an invitation to scroll.
So the fold is now a fold. The claim and the four checkable numbers own the
first screen, centred in it, and the screenshot is what you get for scrolling.
svh, not vh. On mobile Safari `100vh` is the height of the viewport with the
URL bar RETRACTED, so a hero sized in vh is always taller than the screen it
is sitting on, and the scroll cue at its bottom edge starts life underneath
the browser chrome. svh is the small viewport: it fits with the bar showing. */
.hero{
min-height:calc(100vh - 84px);
min-height:calc(100svh - 84px);
display:flex;flex-direction:column;justify-content:center;
/* The bottom padding is the cue's room, not decoration. Centred content that
grows into the space where the cue sits produces the one bug this layout
can have, which is a scroll indicator printed over the last line of copy. */
padding:min(clamp(18px,3vw,40px),2.4vh) 0 clamp(92px,11vh,124px);
}
/* Short laptops and anything landscape on a phone. Below about 720px of height
a centred full-screen hero stops being generous and starts clipping its own
content, so it gives up and just flows. */
/* Above the phone breakpoint the fold is height-aware. 9vh reaches the 92px
width cap at about 1020px of viewport height, so a desktop monitor sees
exactly the headline it saw before and a laptop scales down continuously
rather than snapping at a breakpoint or clipping at the bottom edge. */
@media (min-width:861px){
.hero h1 { font-size:clamp(38px, min(7.4vw,9vh), 92px) }
.hero .sub { font-size:clamp(19px, min(2.5vw,3.1vh), 32px);
margin-top:min(clamp(16px,2vw,26px), 2.8vh) }
.hero-cta { margin-top:min(clamp(26px,3.4vw,40px), 4.2vh) }
.hero-note { margin-top:min(16px, 2vh) }
.hero-facts { margin-top:min(clamp(30px,4vw,44px), 4vh);
padding-top:min(clamp(22px,3vw,30px), 2.8vh) }
.hero-kicker { margin-bottom:min(clamp(14px,2vw,22px), 2.4vh) }
}
@media (max-height:720px){
.hero{min-height:0;padding:clamp(24px,4vw,48px) 0 clamp(40px,5vw,64px)}
.scrollcue{display:none}
}
/* The tour's own section, directly under the fold. It keeps the wash behind
it: the ground was sized min(1100px,120vh) for a hero that ended sooner, and
a hard edge where the colour stops is more noticeable than the colour. */
.showcase{position:relative;z-index:3;padding:0 0 clamp(56px,7vw,96px)}
/* No top margin here. The tour sits under a section heading further down the
page in every other layout this class was written for; here it sits under the
fold, and the hero's own bottom padding is the gap. */
.showcase .tour{margin-top:0}
.showcase-cap{
margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-45);
}
.showcase-cap a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.showcase-cap a:hover{color:var(--accent)}
/* The cue. Not an arrow bouncing on its own: a labelled control, because the
thing worth communicating is not "you can scroll" but what is down there. */
.scrollcue{
/* Centred by auto margins, NOT by translateX(-50%). The rise animation ends
on `transform:none`, which silently wiped the centring transform and left
the cue sitting 87px right of the middle. Anything that both animates its
transform and needs a static one has to get the static one from somewhere
else. */
position:absolute;left:0;right:0;bottom:clamp(22px,2.6vw,30px);
width:max-content;margin-inline:auto;z-index:4;
display:flex;flex-direction:column;align-items:center;gap:9px;
font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-45);transition:none;
opacity:0;animation:rise .95s cubic-bezier(.16,1,.3,1) .78s forwards;
}
.scrollcue:hover{color:var(--accent)}
/* A hairline with something falling down it. Twenty-two pixels instead of
sixty-five, which on a 1440x820 laptop is the difference between the four
facts sitting above the cue and sitting underneath it. */
.scrollcue-m{
width:1px;height:22px;position:relative;overflow:hidden;
background:linear-gradient(180deg,currentColor,transparent);opacity:.4;
}
.scrollcue-m i{
position:absolute;left:0;top:0;width:1px;height:9px;background:var(--accent);
animation:cuedrop 1.9s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes cuedrop{
0%{transform:translateY(-10px);opacity:0}
30%{opacity:1}
100%{transform:translateY(22px);opacity:0}
}
/* ---- 2. THE GRADIENT --------------------------------------------------------
The serif italic carried one flat indigo. A gradient across it does two
things a flat fill cannot: it separates the payoff word from the sans around
it by more than font choice alone, and it gives a completely static headline
somewhere for light to sit.
Kept inside a narrow value band on purpose. The temptation with clipped-text
gradients is to run dark-to-pale, which looks superb in a comp and then fails
the moment the text wraps: the second line starts at the pale end and the
heading appears to fade out. Dark at both ends, brighter in the middle, so
any single line of it reads at full strength.
The @supports block is not decoration. Without background-clip:text the
fill-color:transparent still applies and the headline disappears entirely,
which is the one failure mode worth writing four extra lines to prevent. */
.em{
background-image:linear-gradient(101deg,#131F4B 0%,#20356F 22%,#3B5BB4 50%,#22386F 76%,#141F49 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
/* A gradient clipped to glyphs is painted at the size of the ELEMENT box, so
a one-word span gets one narrow slice of the ramp and a whole line gets all
of it. Fixing the paint area to the text's own box is what keeps the two
looking like the same treatment. */
-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.em{color:var(--accent);-webkit-text-fill-color:currentColor;background-image:none}
}
/* The hero's gets a slow travel. One element on the page, at the moment the
page is being judged, and it is the difference between a headline that is
printed and one that is lit. Off under reduced motion at the bottom. */
/* No animated background-position. At any size above 100% the visible window
samples a slice of the ramp rather than the whole of it, which means the word
sits at whatever value that slice happens to be: the travel was not moving
light across the headline, it was holding it at its palest point for eleven
seconds at a time. Painted once, at full ramp, is both truer to the ask and
the better-looking of the two. */
/* Same treatment on the two other places the cursive blue appears. */
.inc-item b{
background-image:linear-gradient(101deg,#152354,#3B5BB4 58%,#1C2E62);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* On the black section the ramp has to invert or it turns into a hole. */
.honest .em{
background-image:linear-gradient(101deg,#8FA8E6 0%,#D6E0F8 42%,#9FB6EC 100%);
-webkit-text-fill-color:transparent;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.honest .em{color:#9FB3E8;-webkit-text-fill-color:currentColor;background-image:none}
.inc-item b{color:var(--accent);-webkit-text-fill-color:currentColor;background-image:none}
}
/* ---- 3. THE TOUR ------------------------------------------------------------
Carson asked for a thirty-second video walking through the site. This is that,
built out of the captures instead of a file: eight stops, 4.2s each, 33.6s a
lap, in the same browser chrome the rest of the page uses.
Why not an actual mp4. A screen recording of this store would land somewhere
between four and twelve megabytes, would be the largest thing on the page by
an order of magnitude, would need re-encoding at three sizes, and would go
stale the day any screen changes. This weighs what the images already weigh,
every frame is a link to the real page, the URL bar tells you where you are,
and updating it is replacing a jpg. It also cannot buffer, which on a sales
page is the entire argument.
The tall storefront capture is the one that genuinely scrolls: at 1200x1800
in a 16:10 window there is real page below the fold, so object-position walks
down it. The 1400x883 backend shots have nothing underneath, so faking a
scroll on them would be a lie the eye can see. They get a slow push in. */
.tour{margin-top:clamp(32px,4vw,48px)}
.tour-chrome{position:relative}
/* Scoped to the BAR, not to the window. .tour-chrome is the positioned
ancestor, so without this the badge resolved against the whole frame and sat
in the vertical middle of the screenshot instead of in the chrome bar. */
.tour-chrome .chrome-bar{
position:relative;
/* Room for the badge. The URL pill is flex:1 and centres its own text, so
without this the text ran underneath "LIVE TOUR" on narrow windows rather
than ellipsing before it. */
padding-right:108px;
}
/* The URL swaps at the midpoint of the slide fade rather than at the start of
it, so the bar never names a screen that is not on screen yet. */
.tour-chrome .chrome-url{transition:opacity .18s ease}
.tour-live{
position:absolute;right:14px;top:50%;transform:translateY(-50%);
display:inline-flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-45);
}
.tour-live i{
width:6px;height:6px;border-radius:50%;background:#28C840;
animation:pulse 2.2s ease-in-out infinite;
}
@media (max-width:640px){.tour-live span{display:none}}
.tour-stage{
position:relative;overflow:hidden;background:var(--wash);
/* A player whose controls are below the fold is not a player. 16:9.6 puts the
frame, its URL bar and all eight chapters inside one screen on anything
900px tall or more; the max-height catches the laptops under that by
letterboxing rather than by pushing the rail off the bottom. The images are
object-fit:cover, so a shorter frame crops them instead of squashing them,
and object-position keeps the crop at the top where the headers are. */
/* width:100% is load-bearing. aspect-ratio only sizes the axis that is auto,
so with both axes auto the max-height below was satisfied by shrinking the
WIDTH to keep the ratio, and the frame sat 124px narrower than the browser
chrome around it with a white gutter down the right-hand side. Pinning the
width makes max-height do what it says: the box gets shorter, the ratio
yields, and object-fit:cover absorbs it as a crop. */
width:100%;
aspect-ratio:16/9.6;
max-height:calc(100svh - 250px);
}
.tour-slide{
position:absolute;inset:0;opacity:0;transition:opacity .55s ease;
pointer-events:none;
}
.tour-slide.is-on{opacity:1;pointer-events:auto}
.tour-slide img{
width:100%;height:100%;object-fit:cover;object-position:center top;
display:block;
}
/* The push-in. transform, not width/height, so it stays on the compositor. */
.tour-slide.is-on img{animation:tourpush 5s linear forwards}
@keyframes tourpush{from{transform:scale(1.005)}to{transform:scale(1.055)}}
/* The one that really scrolls. */
.tour-slide.tall.is-on img{animation:tourscroll 5s linear forwards}
@keyframes tourscroll{
from{object-position:center top}
to{object-position:center 88%}
}
/* Sits over the whole frame so the tour is one big click target, and says so. */
.tour-open{
position:absolute;right:16px;bottom:16px;z-index:3;
display:inline-flex;align-items:center;gap:9px;
background:var(--ink);color:#fff;border-radius:999px;
padding:11px 20px;font-size:12.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
box-shadow:0 10px 30px rgba(15,17,19,.28);
transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.tour-open:hover{background:var(--accent);transform:translateY(-2px)}
.tour-open svg{width:14px;height:14px}
/* The rail. Eight chapters, each one a labelled progress bar, each one a jump.
This is what makes it a tour rather than a slideshow: you can see how much is
left, you can see what is coming, and you can skip to the screen you care
about instead of waiting for it. */
.tour-rail{
display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
margin-top:16px;
}
.tour-chap{
border:0;background:transparent;padding:0;cursor:pointer;text-align:left;
font-family:inherit;color:var(--ink-45);transition:none;
display:flex;flex-direction:column;gap:9px;
}
.tour-chap:hover,.tour-chap.is-on{color:var(--ink)}
.tour-chap.is-on b{color:var(--accent)}
.tour-bar{
display:block;height:3px;border-radius:2px;background:rgba(15,17,19,.14);
overflow:hidden;
}
/* scaleX, not width. Eight bars each animating width for 4.2 seconds is eight
layout passes a second for the whole thirty-three second lap; a transform is
handed to the compositor and costs the main thread nothing. It also measures
correctly, which width did not: under instrumentation the width version sat
at 0 for two seconds and then jumped, because a layout-driven transition only
advances on frames that are actually laid out. */
.tour-bar i{
display:block;height:100%;width:100%;background:var(--accent);border-radius:2px;
transform:scaleX(0);transform-origin:left center;
}
.tour-chap b{
font-size:12px;font-weight:700;letter-spacing:.06em;
line-height:1.25;transition:none;
}
.tour-chap:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media (max-width:900px){
.tour-rail{grid-template-columns:repeat(4,1fr);gap:10px 12px}
}
@media (max-width:640px){
/* A 1400px-wide desktop capture inside a 331px phone at 16:9.6 is a 198px
strip, which reads as a banner rather than as software. Taller and cropped
from the top-left keeps the header, the sidebar and the first row of data
at the largest scale the width allows.
This is the weakest part of the tour and it is a source problem, not a CSS
one: four of the eight screens have phone captures in
assets/backend/phone/ and the other four do not, so a proper mobile set
cannot be assembled yet. */
.tour-stage{aspect-ratio:16/11}
.tour-slide img{object-position:top left}
.tour-slide.tall img{object-position:center top}
}
@media (max-width:560px){
.tour-rail{grid-template-columns:repeat(2,1fr)}
.tour-open{right:10px;bottom:10px;padding:9px 15px;font-size:11px}
}
/* ---- 4. THE PROBLEM CARDS ---------------------------------------------------
Six white rectangles with a serif numeral and two lines of text. Correct
information, no shape, and the section that is supposed to make somebody feel
the problem read like a table of contents.
Two changes, and the second is the one that matters:
The numeral moves. A 26px serif "iv" above a heading is a decoration; the
same numeral at 165px behind the card at 6% opacity is a texture, and it
gives six otherwise identical boxes six different silhouettes. It is set
through content:attr() so the markup carries the value once.
And every card now answers itself. A problem grid that only lists problems
makes the reader carry all six to the next section; a grid where each problem
has our answer under a rule converts the section from a complaint into an
argument. Nothing in those answers is new: each one is a line already stated
further down this page and already scoped in Exhibit A. */
.prob-grid{gap:18px}
.prob-card{
position:relative;overflow:hidden;isolation:isolate;
padding:30px 28px 26px;
background:linear-gradient(180deg,#FFFFFF 0%,#FBFBFD 100%);
display:flex;flex-direction:column;
}
/* The accent edge. Fades left to right so six of them in a grid read as a set
rather than as six flags. */
.prob-card::before{
content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2;
background:linear-gradient(90deg,var(--accent),rgba(36,59,122,.10) 85%);
opacity:.45;transition:opacity .45s;
}
.prob-card:hover::before{opacity:1}
/* The ghost numeral. */
.prob-card::after{
content:attr(data-n);
position:absolute;right:16px;bottom:-16px;z-index:-1;
font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
font-size:118px;line-height:1;color:var(--accent);opacity:.06;
pointer-events:none;user-select:none;
transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
.prob-card:hover::after{opacity:.10;transform:translateY(-8px)}
/* The small numeral becomes a chip, so it stops competing with the ghost. */
.prob-n{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
background:var(--accent-soft);border:1px solid rgba(36,59,122,.16);
font-size:14px;margin-bottom:16px;
transition:none;
}
.prob-card:hover .prob-n{background:var(--accent);color:#fff;border-color:var(--accent)}
.prob-card h3{font-size:19px;margin-bottom:9px}
.prob-card p{flex:1}
/* The answer. */
.prob-fix{
margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
display:flex;gap:9px;align-items:flex-start;
font-size:13.5px;line-height:1.5;font-weight:600;color:var(--accent);
}
/* Drawn, not typed. U+21B3 is not in Switzer and the fallback rendered it as
something between a lowercase L and a comma, which is worse than no mark at
all. Two borders on an empty box is a tick in every font on every platform. */
.prob-fix::before{
content:"";flex:none;width:6px;height:11px;margin:4px 2px 0 1px;
border:solid var(--accent);border-width:0 2px 2px 0;
transform:rotate(42deg);
}
/* ---- 5. CLICKABLE ----------------------------------------------------------
The five tiles have always been links. Nothing said so. A screenshot on a
sales page is assumed to be a picture, and the whole point of this grid is
that it is not: those are five live screens you can open right now, which is
the single most persuasive thing on the page and it was being thrown away by
an affordance that only appeared once your cursor was already on top of it.
Four signals, three of them visible without hovering:
a badge that says OPEN, permanently
an accent arrow rather than a white one
a border and a lift on hover
a focus ring, because keyboard users get the same offer */
.tile{
cursor:pointer;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.tile:hover{
border-color:rgba(36,59,122,.55);transform:translateY(-4px);
box-shadow:0 1px 1px rgba(15,23,23,.04),
0 26px 56px -28px rgba(36,59,122,.45);
}
.tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tile-arrow{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(36,59,122,.4)}
.tile:hover .tile-arrow{background:var(--ink)}
/* Said once, under the grid, for anyone who still is not sure. */
.work-foot{
margin-top:22px;text-align:center;font-size:14.5px;color:var(--ink-45);
}
.work-foot b{color:var(--ink);font-weight:650}
/* ---- 6. RIGHT AND WRONG ----------------------------------------------------
Two cards of the same size, one with a slightly greyer background and ticks
instead of dots. Technically a comparison. Visually a pair, which is the
opposite of the point: a comparison has to have a loser.
So the left column is now visibly the worse object. It sits lower, it is
flatter, it is desaturated, its items are struck through, and it is marked
with crosses in a muted oxblood rather than with neutral dots. The right one
is raised, larger, ringed in the accent, and carries a badge with the two
numbers that are the actual argument: one login, one bill.
The oxblood is the only non-house colour on the page and it is deliberate.
Marking "wrong" in the brand colour, or in grey, makes a reader work out
which side they are looking at. Wrong should not need parsing. */
.vs{grid-template-columns:1fr 1.06fr;gap:clamp(16px,2.4vw,30px);align-items:stretch;
position:relative}
.vs-col{
position:relative;border-radius:22px;padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,32px);
display:flex;flex-direction:column;
}
/* the loser */
.vs-col.bad{
background:linear-gradient(180deg,#F4F6F9,#F4F6F9);
border:1px solid rgba(15,17,19,.09);
}
.vs-col.bad li{color:var(--ink-70)}
.vs-col.bad li span{text-decoration:line-through;text-decoration-color:rgba(140,70,78,.45)}
.vs-col.bad li::before{content:"✕";color:#8C464E;font-weight:700;font-size:13px;
line-height:1.45;flex:none}
/* the winner */
.vs-col.good{
background:#fff;border:2px solid var(--accent);
box-shadow:0 2px 4px rgba(36,59,122,.06),
0 20px 44px -20px rgba(36,59,122,.28),
0 44px 90px -50px rgba(36,59,122,.5);
}
.vs-col.good li::before{
content:"✓";color:#fff;background:var(--accent);
width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;
flex:none;margin-top:2px;
}
@media (min-width:681px){ .vs-col.good{transform:translateY(-10px)} }
.vs-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:20px;flex-wrap:wrap}
.vs-col h3{margin-bottom:0}
.vs-tally{
font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.vs-col.bad .vs-tally{background:rgba(140,70,78,.09);color:#7E4048}
.vs-col.good .vs-tally{background:var(--accent);color:#fff}
.vs-col ul{gap:13px;flex:1}
.vs-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.vs-col.good .vs-note{border-top-color:rgba(36,59,122,.16);color:var(--ink-70)}
/* The medallion between them. Absolutely positioned so it does not take a grid
column and force the two panels apart on the axis where they should be
touching. Hidden on one column, where there is no "between". */
.vs-mark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
width:52px;height:52px;border-radius:50%;
background:var(--ink);color:#fff;display:grid;place-items:center;
font-size:12.5px;font-weight:800;letter-spacing:.06em;
box-shadow:0 10px 30px rgba(15,17,19,.3);border:3px solid #fff;
}
@media (max-width:680px){.vs-mark{display:none}}
/* The verdict. One line under both columns, because a comparison that ends
without a conclusion makes the reader draw it, and they will draw a weaker
one than the true one. */
.vs-verdict{
margin-top:clamp(18px,2.4vw,26px);
max-width:min(820px,100%);margin-inline:auto;
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
text-align:center;padding:20px 26px;border-radius:999px;
background:var(--accent-soft);border:1px solid rgba(36,59,122,.16);
font-size:16px;line-height:1.5;color:var(--ink-70);
}
.vs-verdict b{color:var(--ink);font-weight:750}
/* ---- 7. THE INVENTORY, OPENED UP -------------------------------------------
Eight rows, one line each, a number on the right. Skimmable, and short enough
that a careful reader ran out of page before they ran out of questions. The
number of pages was stated; which pages was not. "25 screens" is a number a
reader either takes on trust or does not.
Every row now opens. Closed, the section reads exactly as it did. Open, it
names all twelve pages, all twenty-five screens, all six emails, and what
handoff actually transfers, along with the limits that belong next to each
one. That is the section doing its real job, which is not to impress but to
remove the thing a buyer is quietly worried about.
, not a JS accordion. It opens with JS switched off, it is in the
find-on-page index, it announces its own state to a screen reader, and a
printed page comes out expanded. */
/* The row was a two-column grid. A whose display is grid puts its
summary and its body into two grid tracks, which is not what either of them
is for, so the row goes back to block and the grid moves down onto the
summary where it belongs. */
.inv-row{
display:block;padding:0;
border-bottom:1px solid var(--line);transition:none;
}
.inv-row[open]{background:linear-gradient(180deg,rgba(36,59,122,.035),transparent 40%)}
.inv-sum{
list-style:none;cursor:pointer;
display:grid;grid-template-columns:1fr auto auto;
gap:clamp(16px,3vw,40px);align-items:center;
padding:clamp(20px,2.4vw,28px) 0;
}
.inv-sum::-webkit-details-marker{display:none}
.inv-sum:hover h3{color:var(--accent)}
.inv-sum h3{transition:none}
.inv-plus{
width:28px;height:28px;border-radius:50%;flex:none;
border:1px solid var(--line);display:grid;place-items:center;
font-size:17px;font-weight:300;color:var(--ink-45);line-height:0;
transition:transform .4s cubic-bezier(.16,1,.3,1);
}
:is(.inv-sum,.prow-sum,.no-sum):hover .inv-plus{border-color:var(--accent);color:var(--accent)}
:is(.inv-row,.prow,.no-item)[open] > summary .inv-plus{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg)}
.inv-detail{padding:2px 0 clamp(24px,3vw,32px)}
.inv-detail .col{
columns:2;column-gap:clamp(28px,4vw,56px);
font-size:14.5px;line-height:1.75;color:var(--ink-70);
}
.inv-detail .col > div{break-inside:avoid;margin-bottom:14px}
.inv-detail .col h4{
font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--accent);margin-bottom:5px;
}
.inv-detail ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.inv-detail li{display:flex;gap:9px;align-items:flex-start}
.inv-detail li::before{content:"·";color:var(--accent);flex:none;font-weight:700}
.inv-detail .limit{
margin-top:18px;padding:14px 18px;border-radius:12px;
background:rgba(15,17,19,.035);border-left:2px solid rgba(36,59,122,.35);
font-size:14px;line-height:1.6;color:var(--ink-on-muted);max-width:78ch;
}
.inv-detail .limit b{color:var(--ink);font-weight:700}
@media (max-width:760px){
.inv-detail .col{columns:1}
.inv-sum{grid-template-columns:1fr auto;grid-template-areas:"a c" "b b";row-gap:12px}
.inv-sum > div{grid-area:a}
.inv-sum .inv-n{grid-area:b;justify-self:start}
.inv-sum .inv-plus{grid-area:c}
}
/* Expand-all, because eight separate clicks to read the contract list is a
worse experience than one, and somebody comparing two quotes wants it flat. */
.inv-all{
display:inline-flex;align-items:center;gap:9px;margin-top:22px;
border:1px solid var(--line);background:#fff;border-radius:999px;
padding:11px 20px;font-family:inherit;font-size:13.5px;font-weight:650;
cursor:pointer;color:var(--ink-70);transition:opacity .25s,transform .25s;
}
.inv-all:hover{border-color:var(--accent);color:var(--accent)}
/* ---- 8. GROUND -------------------------------------------------------------
The page was white from the end of the hero wash to the black section near
the bottom: nine sections with nothing between them but their own margins.
White is not the problem. Undifferentiated white is: without a change of
ground, a long page gives a reader no sense of having moved through it, and
the sections stop reading as separate arguments.
Two grounds, used alternately, both built from the accent token so they
recolour with the brand:
.sec--tint a tinted panel with two soft blooms and hairline edges
.sec--grid white, with a faint dot lattice masked to fade at the edges
The dot lattice is masked rather than faded with opacity because an unmasked
grid meeting a section boundary makes a visible seam, and a seam is exactly
the thing this is supposed to remove. */
.sec--tint{
background:
radial-gradient(920px 460px at 10% -12%, rgba(36,59,122,.075), transparent 62%),
radial-gradient(760px 400px at 94% 6%, rgba(36,59,122,.055), transparent 64%),
linear-gradient(180deg,#FAFAFC 0%,#F4F5F9 48%,#FAFAFC 100%);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sec--tint::after{content:none;background:none}
.sec--grid::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(rgba(36,59,122,.16) 1px,transparent 1px);
background-size:26px 26px;
/* Masked wide, not narrow. The first version faded to nothing by 74% of the
way out, which put every visible dot underneath the opaque cards in the
middle of the section and none of them in the gutters, where the eye
actually had a chance of seeing one. */
-webkit-mask-image:radial-gradient(ellipse 92% 78% at 50% 46%,#000 0%,transparent 82%);
mask-image:radial-gradient(ellipse 92% 78% at 50% 46%,#000 0%,transparent 82%);
opacity:.75;
}
/* Both grounds are painted on the , so its .wrap has to be lifted out
of their stacking order or the copy sits under the texture. */
.sec--tint > .wrap,.sec--tint > .narrow,
.sec--grid > .wrap,.sec--grid > .narrow{position:relative;z-index:1}
/* ---- what pass 2 broke on a phone, put back --------------------------------
Both of these are the same mistake in two places: a rule written for the
desktop layout, appended AFTER the stylesheet's own mobile breakpoints, and
therefore beating them. Anything added at the end of a sheet inherits
responsibility for every media query above it. */
@media (max-width:680px){
/* .vs{grid-template-columns:1fr 1.06fr} above outranked the 680px rule that
had been collapsing this to one column, so the winning panel ran off the
right edge of every phone. */
.vs{grid-template-columns:1fr}
.vs-col.good{transform:none}
}
@media (max-width:860px){
/* A phone hero is taller than a phone, and no amount of type scaling changes
that without making the headline apologetic. So the cue goes: it exists to
say there is more below, and on a screen where the copy is already running
past the bottom edge, that is not news. */
.hero{padding-bottom:clamp(40px,6vw,64px)}
.scrollcue{display:none}
.hero-facts{margin-top:clamp(24px,4vw,34px);padding-top:22px}
}
/* Cards sitting on a tinted ground need to be white to keep their edge. The
walkthrough rows were --wash, which is within a couple of values of the tint
itself, so on the new ground they stopped reading as cards at all and became
a faint outline around some copy. */
.sec--tint .prob-card{background:linear-gradient(180deg,#fff,#FDFDFE)}
.sec--tint .walk-row{background:#fff}
.sec--tint .chip{background:#fff}
.sec--tint .inv-all{background:#fff}
/* A hairline the width of the text column, closing each white section so the
eye is handed to the next one instead of drifting. */
.sec--seam{position:relative}
.sec--seam::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:min(1320px,92vw);height:1px;
background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
/* ---- reduced motion, for everything added above ---------------------------
Same rule as the first pass: off, not gentler. */
@media (prefers-reduced-motion:reduce){
.scrollcue{opacity:1;animation:none}
.scrollcue-m i{animation:none;opacity:1}
.tour-slide{transition:none}
.tour-slide.is-on img,.tour-slide.tall.is-on img{animation:none}
.tour-live i{animation:none}
.prob-card::after,.prob-n,.tile,.inv-plus{transition:none}
}
/* ===========================================================================
PASS 3, MOBILE
---------------------------------------------------------------------------
The desktop pass is signed off, so every rule here lives behind a max-width
query and desktop resolves none of it. Appended for the same reason pass 2
was: rules at the end of the sheet win the specificity ties against the
breakpoints above, which is exactly what a mobile override needs.
=========================================================================== */
/* ---- tap targets -----------------------------------------------------------
Everything interactive gets at least ~44px in the axis a thumb needs.
Measured at 390x844: the tour chapters were 27px tall, the tour's open
button 35px, "Open every line" 41px, and the footer links 17px. */
@media (max-width:900px){
/* The chapter buttons grow DOWN into padding rather than the rail growing
apart: the grid gap stays what it was, the touchable box does not. */
.tour-chap{padding:6px 2px 12px}
/* The wordmark is a link to #top. Negative margin keeps it optically where
the desktop pass put it while the box reaches 44px. */
.logo{padding:6px 8px;margin-left:-8px}
.inv-all{min-height:44px}
.tour-open{min-height:44px}
/* Inline links: block padding enlarges the hit box without moving the text,
because vertical padding on an inline box does not change line height. */
.showcase-cap a,.walk-foot a{padding-block:14px}
.foot-in a{padding-block:14px;padding-inline:5px}
/* If the viewport is shorter than the drawer (a phone in landscape), the
last link was simply unreachable: nothing scrolled. */
.nav-drawer{max-height:calc(100dvh - 84px);overflow-y:auto}
}
/* ---- the tour on a phone ---------------------------------------------------
The frame is a 1400px desktop capture in a ~330px box, and the floating
"Open it yourself" pill was covering a third of it, exactly over the data
the capture exists to show. It becomes a player-style bar across the bottom
edge: full width so it reads as a control rather than a sticker, and the
stage gets taller so the image keeps the rows the bar now covers. */
@media (max-width:640px){
.tour-stage{aspect-ratio:16/13}
.tour-open{
left:0;right:0;bottom:0;justify-content:center;
border-radius:0;min-height:48px;padding:12px 16px;font-size:12px;
}
/* Only the green dot survives at this width, so the 108px reserved for the
full "LIVE TOUR" badge was just stolen from the URL pill. */
.tour-chrome .chrome-bar{padding-right:44px}
}
/* ---- layout repairs --------------------------------------------------------
.proof-in's `padding: ... 0` shorthand zeroes the horizontal padding of the
.wrap it shares an element with. Desktop never shows it because max-width
centring leaves margins; below 1024 the numbers sat flush against the screen
edge. Padding-inline restores exactly what .wrap would have given. */
@media (max-width:1024px){
.proof-in{padding-inline:clamp(22px,4vw,56px)}
}
@media (max-width:680px){
/* A 999px radius on a pill is fine for one line. At phone width the verdict
wraps to three and the pill became a lens with the text touching the
curves. */
.vs-verdict{border-radius:18px;padding:16px 18px}
/* Six one-column cards make this section a fifth of the page; the desktop
padding was air the phone cannot afford. */
.prob-card{padding:24px 20px 22px}
/* Sections keep their taper but bottom out lower: 64px minimums over
thirteen sections is most of a screen of empty scrolling on a phone. */
.sec{padding:clamp(46px,13vw,64px) 0}
}
/* ---- the close, over the watercolour ---------------------------------------
At phone width the cover-crop of the wash concentrates its darkest pigment
exactly where the fine print sits, and 58%-alpha ink on top of that was
near-invisible. The chip is the same trick the tile labels use: carry your
own ground instead of gambling on the image behind you. */
@media (max-width:860px){
.close .hero-note{
display:inline-block;background:rgba(255,255,255,.78);
border-radius:12px;padding:10px 14px;color:var(--ink-70);
}
}
/* ===========================================================================
PASS 4, MOBILE, SECOND LOOK
---------------------------------------------------------------------------
Pass 3 fixed what was measurably wrong on a phone: tap targets, overflow,
unreadable fine print. It did not fix what the page LOOKED like, and on a
real device that is most of the problem. Three things dominated every
screenshot:
a navigation band 85px tall following the reader down 22,000px of page
five screenshots at a size where not one pixel of them is legible
rows of body copy taller than the screen they are read on
Same rule as pass 3: every block is behind a max-width query and desktop,
which is signed off, resolves none of it.
=========================================================================== */
/* ---- the band ---------------------------------------------------------------
84px is a desktop bar. On a 932px phone it is nine percent of the screen,
permanently, and because the returning bar is a clone of the hero's nav it
arrived at full desktop height with a 44px pill floating in the middle of it.
Sixty is enough for a wordmark, a button and a menu, and it gives back most
of a paragraph on every screen of a very long page. */
@media (max-width:900px){
.nav-in{height:60px}
.nav-drawer{top:60px} /* match the 60px mobile nav so the menu opens flush, no gap */
.nav-solid .nav-in{height:58px}
/* A 44px target still fits inside a 60px bar, and pass 3 had already raised
these three once. Shortening the bar shrank them back to 39-42, so the
padding is restated here rather than left to the taller rule it replaced. */
.logo{font-size:17px;padding:11px 8px;margin-left:-8px}
.logo .em{font-size:18px}
.nav-burger{width:44px;height:44px}
/* Nav links are display:none below 900, and they were the flex item holding
the centre. Without them the bar became logo / Apply / burger under
space-between, which floated the button in the middle of nothing. */
.nav-cta{margin-left:auto;margin-right:8px;padding:9px 18px;font-size:13.5px;min-height:44px}
.hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px)}
}
/* ---- five screenshots nobody can read --------------------------------------
The work grid is one tall storefront and four 1400px-wide admin captures. On
a 430px phone the storefront was 555px of the screen and the admin shots were
232px strips rendering their source at about a seventh of natural size: not
small, illegible. Five of them stacked ran to roughly fifteen hundred pixels
of noise, and the black label pills floating over them were sized for a
desktop tile.
The honest read is that a dashboard cannot be read in a phone thumbnail and
nobody expects to. What this section has to do is say "these are five real
screens and you can open any of them", so it becomes what that actually looks
like: a two-column grid of cards, each a recognisable thumbnail with its name
and an arrow on a strip underneath. The whole section now fits in about a
screen and a half instead of four screens, and it reads as a menu, which is
what it is. */
@media (max-width:860px){
/* display:contents dissolves the two columns so all five tiles become direct
children of one grid. Without it the wrapper divs stay in the way and the
tiles cannot be arranged against each other. */
.work{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.work-col{display:contents}
.tile{display:flex;flex-direction:column;border-radius:16px}
/* The hero of the set gets the full width. */
.tile.tall{grid-column:1 / -1}
.tile img,
.tile.tall img,.tile.wide img,.tile.short img{
width:100%;height:auto;aspect-ratio:16/10;
/* Top-left, so the crop keeps the page title and the first row of data
rather than centring on whitespace in the middle of a table. */
object-fit:cover;object-position:top left;
}
.tile.tall img{aspect-ratio:16/11;object-position:top center}
/* The label comes out of the picture and becomes a footer. Over the image it
had to be a heavy black pill to stay legible, and at phone scale that pill
covered a third of the thumbnail it was labelling. */
.tile-label{
position:static;background:#fff;border-top:1px solid var(--line);
padding:11px 13px;gap:8px;
}
.tile-label > span:first-child{
background:transparent;color:var(--ink);padding:0;
font-size:11.5px;letter-spacing:.1em;
}
.tile-arrow{width:26px;height:26px;box-shadow:none}
.tile-arrow svg{width:13px;height:13px}
.tile:hover{transform:none}
.work-foot{margin-top:18px;font-size:14px}
}
/* ---- rows taller than the screen -------------------------------------------
Each walkthrough row was 934px on a 932px phone, so no row was ever visible
in one piece: you scrolled into a paragraph, then scrolled again to reach the
screenshot it was describing. The phone captures inside them are the one
genuinely readable set of images on this page, so the fix is to spend less
space around them rather than less on them. */
@media (max-width:860px){
.walk{gap:12px}
.walk-row{padding:20px 16px;border-radius:18px;gap:18px}
.walk-txt p{margin-top:10px;font-size:15.5px}
.walk-txt h3{font-size:clamp(22px,6vw,28px)}
.walk-kicker{margin-top:12px}
/* Constrain the COLUMN, not the image. Capping height and setting width:auto
collapsed the picture to three pixels: the base rule pairs width:100% with
height:auto and an aspect-ratio, so releasing the width left nothing to
derive a size from. Narrowing the container keeps the ratio doing the work,
and a 1:2 phone capture at full column width was 700px tall, which put the
copy and the screenshot it describes on different screens. */
.walk-img{max-width:290px;margin-inline:auto;width:100%}
.walk-foot{margin-top:18px}
}
/* ---- ground ----------------------------------------------------------------
The dot lattice is calibrated against a 1400px section where the dots read as
texture. Inside 430px the same 26px spacing puts them close enough together
to read as speckle on the copy sitting over them. Wider and fainter. */
@media (max-width:700px){
.sec--grid::before{background-size:34px 34px;opacity:.4}
.sec--tint::after{opacity:.10}
}
/* ===========================================================================
PASS 5 · borrowed technique
---------------------------------------------------------------------------
From a teardown of jlucreative.com, who sell roughly what this business
sells. Three things, and the rule applied throughout was: take the mechanism,
never the silhouette. Their numbered eyebrow pills and their gradient serif
italic are their SHAPE, and this page already leans on both harder than they
do. Nothing here adds to that.
What is taken is motion that does a job:
scroll-velocity lean the one effect on their page that reacts to HOW you
scroll rather than to where you are
opposed column drift two columns passing each other, so the grid reads
as depth rather than as a wall
a slider that demos a control nobody knew was draggable, teaching itself
=========================================================================== */
/* ---- 1 · the work grid leans into the scroll -------------------------------
Two custom properties drive it. --lean is scroll VELOCITY, normalised to
-1..1 and springing back to 0 the moment you stop. --drift is scroll
POSITION through the section, also -1..1. The columns take opposite signs of
both, so they shear against each other and slide past each other.
Both are composited transforms and nothing else, so this costs no layout and
no paint. The skew is 1.8deg where the reference uses 3: their columns are
flat cards, ours are screenshots of real interfaces, and a shear you can
read as a shear on a picture of a dashboard looks like a rendering fault
rather than like motion.
Desktop only, and not because of performance. Below 861px .work-col is
display:contents, so the columns are not boxes at all and there is nothing
to transform. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
.work{ --lean:0; --drift:0 }
.work-col{
/* scaleY takes back the height the skew adds, so the row does not appear
to grow as it tilts. */
transform:
translateY(calc(var(--drift) * 22px))
skewY(calc(var(--lean) * 1.8deg))
scaleY(calc(1 - max(var(--lean), var(--lean) * -1) * 0.022));
transform-origin:center center;
}
.work-col.fill{
transform:
translateY(calc(var(--drift) * -22px))
skewY(calc(var(--lean) * -1.8deg))
scaleY(calc(1 - max(var(--lean), var(--lean) * -1) * 0.022));
}
}
/* ---- 2 · the slider that shows you what it is ------------------------------
The control was always a real range input, so it always had drag, touch and
arrow keys. What it never had was any way of telling you that. A comparison
image sitting still at 50% reads as a picture with a line drawn down it.
Nothing is added to the markup and no label is written. It moves once, on
entry, and that is the whole explanation. */
.ba{ cursor:col-resize }
/* The handle grows for the length of the demo sweep so the eye is on the thing
that is moving rather than on the images either side of it. */
.ba.demo .ba-handle::after{ transform:translate(-50%,-50%) scale(1.12) }
.ba .ba-handle::after{ transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* ---- 3 · what happens after you click --------------------------------------
Under the two buttons that ask for money, which is where the question is
actually being asked. The hero and the closing section already answer it;
the pricing tiers were the one place the page said a number and then said
nothing about what pressing the button does to you. */
.tier-after{
margin-top:12px; text-align:center;
font-size:13px; line-height:1.5; color:var(--ink-45);
}
.tier-after b{ color:var(--ink-70); font-weight:650 }
/* ===== REDESIGN · direction B: Space Grotesk display · roman indigo accent · warm paper ===== */
:root{ --bg:#FFFFFF; --font-display:'Inter',system-ui,-apple-system,sans-serif; }
body{ background:var(--bg); }
.hero h1, .sec h2, .close h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.028em; }
/* Kill the gradient serif-italic emphasis (the pervasive AI tell): one roman
accent word in the heading's own grotesk, in the house indigo. Scoped
overrides (.honest .em light-on-dark) keep their own colour via currentColor. */
.em{ font-family:inherit; font-style:normal; font-weight:inherit;
color:var(--accent); background-image:none;
-webkit-text-fill-color:currentColor; -webkit-background-clip:border-box; background-clip:border-box; }
.hero h1 .em{ font-weight:600; }
/* ===== REDESIGN · direction B → synex DNA (approved) ========================
Rebuilt to the reference Carson chose (synex.xyz): an editorial warm-white
ground, a neutral grotesk, a two-tone headline (a light-grey setup line above
a black payoff line), a small tracked eyebrow, a muted sub, and the heart of
it, the REAL finished store anchored large as the hero's centrepiece. No
floating cards, no dark gradient, no invented anything. */
.wash{ display:none; } /* clean, flat warm-white ground */
.herowrap{ position:relative; background:transparent; } /* light; nav keeps its default dark-on-light styling */
/* hero shell: undo the full-viewport centring, sit near the top, centred */
.hero{ background:transparent; min-height:0; justify-content:flex-start; text-align:center;
padding-top:clamp(22px,3vw,46px); padding-bottom:clamp(56px,7vw,104px); }
.hero-in{ position:relative; z-index:2; max-width:1000px; margin:0 auto; }
/* eyebrow: small, upper, tracked, quiet (synex 'FINANCE REIMAGINED') */
.hero-kicker{ color:var(--ink-45); letter-spacing:.22em; font-size:12px; font-weight:600;
margin-bottom:clamp(18px,2.4vw,28px); }
/* two-tone headline in a neutral grotesk: grey setup line, black payoff line */
.hero h1{ font-family:'Inter',system-ui,sans-serif; font-weight:600;
font-size:clamp(38px,6.2vw,82px); line-height:1.03; letter-spacing:-.03em;
max-width:17ch; margin:0 auto; color:var(--ink); }
.hero h1 .ln1{ display:block; color:#BAC4D3; } /* light-grey setup line */
.hero h1 .ln2{ display:block; color:var(--ink); } /* black payoff line */
/* sub: muted, centred, relaxed */
.hero .sub{ color:#475264; font-weight:400; font-size:clamp(17px,1.55vw,20px); line-height:1.55;
max-width:52ch; margin:clamp(20px,2.4vw,28px) auto 0; }
/* CTAs: synex-quiet, one black pill + one hairline ghost (keep the pill radius) */
.hero-cta{ margin-top:clamp(26px,3vw,36px); }
.hero .btn.primary{ background:var(--ink); color:#fff; }
.hero .btn.primary:hover{ background:#000; }
.hero .btn.ghost{ background:transparent; color:var(--ink); border:1px solid rgba(15,15,14,.16); backdrop-filter:none; }
.hero .btn.ghost:hover{ border-color:var(--ink); }
.hero-note{ color:var(--ink-45); }
/* the four numbers: kept for proof but understated into a quiet line under the
CTAs (synex has none; this is the one proof cue we keep, sized down) */
.hero-facts{ border-top-color:var(--line); max-width:900px; }
.hero-facts b{ color:var(--ink); font-size:clamp(21px,2.3vw,29px); }
.hero-facts span{ color:var(--ink-45); }
/* THE CENTREPIECE: the real finished store, anchored large and emerging from a
soft graphite floor. synex frames its dashboard with landscape photography; we
echo that depth with a restrained shadow-ground rather than fabricated imagery. */
.hero-anchor{ position:relative; z-index:1; max-width:1120px; margin:clamp(42px,5vw,72px) auto 0; padding:0 24px; }
.hero-anchor::before{ content:""; position:absolute; left:50%; bottom:-8%; transform:translateX(-50%);
width:80%; height:58%; z-index:0; filter:blur(60px);
background:radial-gradient(50% 50% at 50% 50%, rgba(15,17,20,.22), transparent 70%); }
.hero-anchor figure{ position:relative; z-index:1; margin:0; background:#fff;
border:1px solid rgba(15,15,14,.09); border-radius:18px; overflow:hidden;
max-height:clamp(320px,46vw,540px);
box-shadow:0 60px 120px -50px rgba(15,17,20,.5), 0 20px 44px -24px rgba(15,17,20,.28); }
.hero-anchor figure img{ display:block; width:100%; height:auto; }
/* scroll cue (synex 'Scroll to explore') */
@media (max-width:680px){ .hero-anchor figure{ max-height:340px; } .hero h1{ max-width:none; } }
/* ===========================================================================
SYNEX DESIGN SYSTEM | sections beyond the approved hero
Local tokens deliberately stop at the section boundary: no root, body,
.herowrap or hero rules change. Existing layouts and interaction hooks stay
intact; screenshots retain their original content and the tour its chrome.
=========================================================================== */
body > section:not(.hh-story), body > footer{
--font-display:'Inter',system-ui,sans-serif;
--accent:var(--ink);
--accent-soft:rgba(15,15,14,.04);
--ink-70:#475264;
--line:rgba(15,15,14,.09);
--wash:#F4F6F9;
--synex-border:1px solid var(--line);
--synex-shadow:0 30px 60px -40px rgba(15,17,20,.16);
--synex-radius:16px;
font-family:var(--font-display);
font-weight:400;
color:var(--ink);
background:var(--bg);
}
/* Flat warm paper, with whitespace carrying the section rhythm. */
.sec{padding-block:clamp(72px,8vw,124px)}
.sec--tint::after,.sec--grid::before,.sec--seam::after{content:none}
.showcase{padding-bottom:clamp(72px,8vw,112px)}
.sec.close{padding-block:clamp(88px,10vw,148px)}
.sec h2{
font-family:var(--font-display);font-weight:600;
font-size:clamp(30px,4.6vw,58px);letter-spacing:-.028em;
line-height:1.08;color:var(--ink);margin-top:24px;
}
.sec .em{
font-family:inherit;font-style:normal;font-weight:inherit;
letter-spacing:inherit;color:#BAC4D3;background:none;
-webkit-text-fill-color:currentColor;background-clip:border-box;
-webkit-background-clip:border-box;
}
.sec h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.sec .lede{color:var(--ink-70);font-weight:400;line-height:1.6;margin-top:22px}
.sec .eyebrow,.showcase .eyebrow,.mq-label,.walk-kicker,.tl-step .n,
.step .n,.demo-note b,.inv-detail .col h4{
font-family:var(--font-display);font-size:12px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
}
.sec .eyebrow,.showcase .eyebrow{background:none;border:0;border-radius:0;padding:0}
.sec .eyebrow .dot,.showcase .eyebrow .dot{display:none}
.sec :is(.vs-col,.fit-col) h3{
font-size:12px;letter-spacing:.2em;color:var(--ink-45);
}
.sec :is(p,li){line-height:1.6}
/* One white panel treatment, including the formerly indigo featured cards. */
.sec :is(.prob-card,.vs-col,.tier,.fit-col,.walk-row,.terms){
background:#fff;border:var(--synex-border);
border-radius:var(--synex-radius);box-shadow:var(--synex-shadow);
}
.sec :is(.prob-card,.vs-col,.tier,.fit-col){padding:clamp(26px,3vw,40px)}
.sec .depth:hover,.sec .tile:hover{
border-color:rgba(15,15,14,.16);box-shadow:var(--synex-shadow);
}
.prob-card::before,.prob-card::after{content:none}
.prob-n,.inc-item b{
font-family:var(--font-display);font-style:normal;font-weight:600;
color:var(--ink-45);background:var(--accent-soft);
border-color:var(--line);-webkit-text-fill-color:currentColor;
}
.inc-item b{background:none}
.sec .prob-fix{color:var(--ink);font-weight:500}
.prob-grid,.tiers,.fit,.no-grid{gap:24px}
.work,.inc-list{margin-top:48px}
.work-col{gap:24px}
.sec .vs-col.good{transform:none}
.vs-col.bad li::before{color:var(--ink-45)}
.vs-col.bad li span{text-decoration-color:rgba(15,15,14,.24)}
.vs-col.bad .vs-tally{background:var(--accent-soft);color:var(--ink-70)}
.vs-col.good .vs-note{border-color:var(--line)}
.vs-tally,.vs-mark,.vs-verdict b{font-weight:600}
.vs-mark{box-shadow:var(--synex-shadow)}
.vs-verdict{
background:#fff;border:var(--synex-border);border-radius:var(--synex-radius);
padding:24px 28px;box-shadow:var(--synex-shadow);
}
/* Existing image frames only. The interactive tour's bar and dots are untouched. */
.sec .tile,.sec .chrome,.sec .cr img{
background:#fff;border:var(--synex-border);border-radius:var(--synex-radius);
box-shadow:var(--synex-shadow);
}
.sec .chrome-bar{display:none}
.sec .tile-arrow{background:var(--ink);color:#fff;box-shadow:none}
.tile-label > span:first-child{font-weight:600}
.sec .chrome:has(.ba){margin-top:44px}
.ba-handle::after{box-shadow:0 6px 18px rgba(15,17,20,.12)}
.mq{background:transparent;padding-block:28px}
.mq-label{padding:32px 22px 24px}
.mq-track span{font-weight:500}
.walk{gap:28px}
.walk-row{padding:clamp(26px,3vw,44px)}
.walk-txt h3{font-weight:600;letter-spacing:-.028em;line-height:1.12}
.cr figcaption{font-weight:500;color:var(--ink-70);line-height:1.6}
.demo-note{background:#fff;border-radius:var(--synex-radius);padding:18px 22px}
/* Inventory and timeline keep their existing disclosure and progress behavior. */
.inv{border-top-color:var(--line)}
.inv-row[open]{background:var(--accent-soft)}
.inv-detail .limit{border-left-color:rgba(15,15,14,.16)}
.inv-n{font-family:var(--font-display)}
.inc-list{gap:28px}
.inc-item{padding-top:26px}
.tl-steps{gap:28px;margin-top:30px}
.tl-who{font-weight:600}
.proof-in{padding-block:clamp(44px,5vw,68px)}
.proof-item b{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em}
.proof-item span{color:var(--ink-70);line-height:1.6}
.tier ul,.fit-col ul{gap:14px}
/* ===== Pricing: give the two builds real lift =============================== */
#pricing .tiers{ align-items:stretch; }
#pricing .tier{ position:relative; overflow:visible;
transition:transform .25s ease; }
#pricing .tier h3{ font-size:clamp(26px,2.4vw,30px); }
/* premium check-chips instead of a bare tick */
#pricing .tier li{ align-items:center; gap:12px; }
#pricing .tier li::before{
content:"✓"; flex:none; width:22px; height:22px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
font-size:12px; font-weight:800; line-height:1;
background:var(--accent-soft); color:var(--accent); -webkit-text-fill-color:var(--accent);
}
/* the featured build: navy top bar, badge, soft navy wash, and it sits proud */
#pricing .tier.feature{
border-color:var(--accent);
background:linear-gradient(180deg,#EEF4FC 0,#fff 140px);
box-shadow:0 44px 96px -52px rgba(36,59,122,.62);
}
#pricing .tier.feature::before{
content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:5px;
border-radius:var(--synex-radius) var(--synex-radius) 0 0;
background:linear-gradient(90deg,#21406F,#2F62B0 55%,#4E86CE);
}
#pricing .tier.feature li::before{
background:linear-gradient(135deg,#21406F,#2F62B0); color:#fff; -webkit-text-fill-color:#fff;
box-shadow:0 6px 14px -6px rgba(36,59,122,.7);
}
#pricing .tier li::before{ color:#2F62B0; -webkit-text-fill-color:#2F62B0; }
.tier-badge{
position:absolute; top:-14px; right:28px; z-index:3;
display:inline-flex; align-items:center;
background:linear-gradient(135deg,#21406F,#2F62B0); color:#fff;
font-size:11px; font-weight:650; letter-spacing:.09em; text-transform:uppercase;
padding:8px 16px; border-radius:999px;
box-shadow:0 16px 30px -12px rgba(36,59,122,.75);
}
@media (hover:hover) and (pointer:fine){
#pricing .tier.feature{ transform:translateY(-10px); }
#pricing .tier:hover{ transform:translateY(-4px); box-shadow:0 44px 96px -52px rgba(36,59,122,.5); }
#pricing .tier.feature:hover{ transform:translateY(-14px); }
}
@media (max-width:720px){
#pricing .tier.feature{ transform:none; }
.tier-badge{ right:22px; }
}
/* Plainly, FAQ and close share the same light ground and readable body tone. */
.honest .no-item{border-color:var(--line);padding-top:24px}
.honest .no-item p,.honest-close{color:var(--ink-70)}
.honest-close{border-color:var(--line);padding-top:30px}
.faq{margin-top:48px}
.faq summary{padding-block:28px;font-weight:600}
.faq details[open]{background:var(--accent-soft)}
.close .hero-note{background:none;padding:0;color:var(--ink-45);line-height:1.6}
body > footer{color:var(--ink-45)}
/* Pills stay monochrome in default, hover and keyboard focus states. */
.sec .btn,.sec .inv-all{border-radius:999px;font-family:var(--font-display);font-weight:600}
.sec .btn.primary{background:var(--ink);color:#fff}
.sec .btn.primary:hover{background:#000}
.sec .btn.primary::after{content:none}
.sec .btn.ghost,.sec .inv-all{
background:transparent;color:var(--ink);border:1px solid rgba(15,15,14,.16);
backdrop-filter:none;
}
.sec .btn.ghost:hover,.sec .inv-all:hover{border-color:var(--ink)}
.sec :is(.btn,.inv-all,summary):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* Retain the established stacking layouts and mobile screenshot proportions. */
@media (max-width:860px){
.work{gap:16px;margin-top:36px}
.walk{gap:20px}
.walk-row{padding:24px 20px}
.walk-txt h3{font-size:clamp(24px,6vw,30px)}
}
@media (max-width:820px){
.tl-steps{gap:0}
}
@media (max-width:680px){
.sec{padding-block:68px}
.sec.close{padding-block:84px}
.prob-grid,.tiers,.fit,.no-grid{gap:18px}
.sec :is(.prob-card,.vs-col,.tier,.fit-col){padding:26px 24px}
.vs-verdict{padding:22px}
.faq summary{padding-block:24px}
}
/* ===== honest section → light (Codex re-coloured the text for light but left the
dark ground, so the copy went low-contrast; this finishes the conversion so the
'what we don't do' block matches the rest of the light synex page). ===== */
.sec.honest{ background:var(--bg); color:var(--ink); }
.sec.honest .eyebrow{ background:transparent; border:0; padding:0; color:var(--ink-45); }
.sec.honest .eyebrow .dot{ background:var(--ink-45); }
.sec.honest h2{ color:var(--ink); }
.sec.honest h2 .em{ color:#BAC4D3; -webkit-text-fill-color:currentColor; background-image:none; }
.sec.honest .lede{ color:#475264; }
.sec.honest .no-item{ border-color:var(--line); }
.sec.honest .no-item h3{ color:var(--ink); }
.sec.honest .no-item p{ color:#475264; }
.sec.honest .honest-close{ color:#475264; border-color:var(--line); }
/* ===== motion polish (Carson: 'should have some sort of animation') ========= */
/* Content cards lift a touch on hover. Pointer-only and not under reduced-motion,
so it never fires on touch or for motion-sensitive visitors. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
.prob-card, .tier, .fit-col{
transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.prob-card:hover, .tier:hover, .fit-col:hover{
transform: translateY(-4px);
box-shadow: 0 26px 54px -32px rgba(15,17,20,.30);
}
}
/* Scroll parallax on the hero store (synex's signature): as it travels through the
viewport it drifts and scales a hair, so it reads as anchored in space rather than
pasted on. Pure CSS scroll-timeline, guarded, and applied to the INNER figure so it
can never collide with the entrance animation on the container. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.hero-anchor figure{ animation: storeFloat linear both; animation-timeline: view(); }
@keyframes storeFloat{
from{ transform: translateY(-14px) scale(1.015); }
to { transform: translateY(14px) scale(.985); }
}
}
}
/* Animated dark-blue sheen on the hero setup line: a lighter blue band drifts
across a deep navy. Off under reduced-motion (static navy). */
.hero h1 .ln1{
background: linear-gradient(100deg,#21406F 0%,#21406F 34%,#3B6BB0 50%,#21406F 66%,#21406F 100%);
background-size:230% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:none;
}
@media (prefers-reduced-motion: reduce){
.hero h1 .ln1{ animation:none; background:none; -webkit-text-fill-color:#26497E; color:#26497E; }
}
.showcase{ padding-top: clamp(40px,6vw,88px); }
.showcase .tour{ margin-top: clamp(28px,3.4vw,44px); }
/* ===== mobile: tighten the vertical rhythm (Carson: 'so much white space') =====
On a phone the clamp minimums stacked into big dead bands, most visibly the
~100px gap between the scroll cue and the demo-store header (hero bottom padding
+ showcase top padding). Pull it all in. */
@media (max-width:640px){
.wrap{ padding-left:18px; padding-right:18px; }
.showcase{ padding-top:20px; }
.showcase .tour{ margin-top:18px; }
/* ---- text-first mobile header --------------------------------
Copy and actions come first, followed by the store image (scoped to <=640px). ---- */
.hero{ padding-top:0; padding-bottom:clamp(30px,7vw,44px); }
.hero .wrap{ display:flex; flex-direction:column; padding-left:0; padding-right:0; }
.hero-anchor{ order:1; width:100%; max-width:none; margin:0; padding:0; }
.hero-anchor::before{ display:none; } /* no glow behind a full-bleed image */
.hero-anchor figure{ border:0; border-radius:0; box-shadow:none; max-height:none;
clip-path:polygon(0 0, 100% 0, 100% 91%, 0 100%); } /* angled bottom edge */
.hero-anchor figure img{ width:100%; height:clamp(300px,76vw,380px);
object-fit:cover; object-position:center 15%; } /* crop to the store's top fold */
.hero-in{ order:0; text-align:left; padding:0 18px; margin-top:clamp(22px,6vw,32px); }
.hero-kicker{ font-size:10.5px; letter-spacing:.14em; margin-bottom:12px; }
.hero h1{ font-size:clamp(33px,8.6vw,46px); line-height:1.1; letter-spacing:-.022em;
max-width:none; margin-top:0; }
.hero .sub{ max-width:none; font-size:15px; line-height:1.55; margin-top:16px; }
.hero-cta{ flex-direction:column; align-items:stretch; gap:10px; margin-top:22px; }
.hero-cta .btn{ width:100%; min-height:52px; font-size:15px; padding:15px 24px; }
.hero-note{ margin-top:14px; }
.hero-facts{ margin-top:24px; padding-top:20px; }
}
/* Creatives: on phones/tablets let people SWIPE the ad frames instead of watching
them auto-scroll (Carson). Stop the marquee, make the row a snap scroller, and
drop the duplicate frames so it is the six real ones you drag through. */
@media (max-width:768px){
.cr-row{ animation:none; width:auto; }
.cr-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
scroll-padding-left:24px; padding-bottom:6px; }
.cr-dupe{ display:none; }
.cr{ scroll-snap-align:center; width:clamp(200px,62vw,260px); }
}
/* ===== visual-first 'The problem': a scannable problem -> fix list ===== */
.plist{ margin-top:clamp(34px,4vw,56px); border-top:1px solid var(--line); }
.prow{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,40%);
gap:clamp(18px,3vw,44px); align-items:center;
padding:clamp(22px,2.5vw,30px) 0; border-bottom:1px solid var(--line); }
.prow-n{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.2vw,28px);
letter-spacing:-.02em; color:#BAC4D3; font-variant-numeric:tabular-nums; }
.prow-main{ display:flex; align-items:flex-start; gap:15px; }
.prow-ic{ flex:none; width:34px; height:34px; color:var(--ink); margin-top:2px; }
.prow-ic svg{ width:100%; height:100%; display:block; }
.prow h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.1vw,27px);
letter-spacing:-.02em; line-height:1.1; margin:0 0 5px; color:var(--ink); }
.prow-desc{ color:#475264; font-size:15.5px; line-height:1.5; margin:0; }
.prow-fix{ display:flex; align-items:flex-start; gap:11px; font-size:16px; font-weight:600;
color:var(--ink); line-height:1.42; }
.prow-fix .chk{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--ink);
color:#fff; display:grid; place-items:center; margin-top:1px; }
.prow-fix .chk svg{ width:12px; height:12px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.prow{ transition:none; }
.prow:hover{ background:rgba(15,17,20,.025); }
}
@media (max-width:760px){
.plist{ margin-top:26px; }
.prow{ grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-items:start;
padding:22px 0; }
.prow-n{ grid-row:1; }
.prow-main{ grid-column:2; }
.prow-fix{ grid-column:2; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
}
/* ===== the dark-blue sheen everywhere it was grey ============================
Not just the hero: every two-tone heading accent (the grey half of each section
heading, plus the hero's payoff span) now carries the same drifting dark blue.
Reduced-motion falls back to a static navy. (Carson: 'anywhere it's grey add the
gradient'.) */
.sec h2 .em, .sec.honest h2 .em, .close h2 .em, .showcase h2 .em{
background: linear-gradient(100deg,#21406F 0%,#21406F 34%,#3B6BB0 50%,#21406F 66%,#21406F 100%);
background-size:230% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:none;
}
@media (prefers-reduced-motion: reduce){
.sec h2 .em, .sec.honest h2 .em, .close h2 .em, .showcase h2 .em{
animation:none; background:none; -webkit-text-fill-color:#26497E; color:#26497E;
}
}
/* ===== LM device 5 · dark closing CTA with floating tool tiles =============== */
.sec.close{ position:relative; overflow:hidden; background:#0C1A33; color:#fff; }
.close-grid{ position:absolute; inset:0; z-index:0;
background:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 58px 58px,
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 58px 58px;
-webkit-mask:radial-gradient(120% 105% at 50% 45%, #000 28%, transparent 78%);
mask:radial-gradient(120% 105% at 50% 45%, #000 28%, transparent 78%);
}
.sec.close .narrow{ position:relative; z-index:2; }
.sec.close h2{ color:#fff; }
.sec.close h2 .em{ background:none; -webkit-text-fill-color:#7FB2FF; color:#7FB2FF; animation:none; }
.sec.close .eyebrow, .sec.close .eyebrow .dot{ color:rgba(255,255,255,.55); }
.sec.close .eyebrow .dot{ background:#7FB2FF; }
.sec.close .lede{ color:rgba(255,255,255,.72); }
.sec.close .hero-note{ color:rgba(255,255,255,.45); }
.sec.close .btn.primary{ background:#4E86CE; color:#06122A; }
.sec.close .btn.primary:hover{ background:#6E9FE0; }
.sec.close .btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.26); backdrop-filter:none; }
.sec.close .btn.ghost:hover{ border-color:#fff; }
/* Small pieces of the delivered operation, with a clear central reading zone. */
.close-fragments{position:absolute;inset:0;z-index:1;pointer-events:none;max-width:1440px;margin:auto}
.close-fragment{position:absolute;width:216px;padding:15px 17px;text-align:left;background:rgba(25,44,73,.82);border:1px solid rgba(184,205,239,.2);border-radius:9px;box-shadow:0 18px 38px -24px #000;backdrop-filter:blur(12px);color:#F2F6FC;font:12px/1.5 'Inter',sans-serif;animation:fragmentDrift var(--drift,7s) ease-in-out var(--delay,0s) infinite}
.close-fragment small{display:block;color:#A8BAD3;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.close-fragment b{font-size:12px;font-weight:600}.close-fragment p{margin-top:7px;font-size:11px;color:#C0CEE2}
.fragment-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.fragment-chip{font-size:9px;color:#BDD8FF;border:1px solid #496893;background:#263E60;padding:3px 7px;border-radius:4px}
.close-fragment:nth-child(1){left:3%;top:12%;--drift:7s;--delay:-1s}
.close-fragment:nth-child(2){right:3%;top:11%;--drift:8s;--delay:-3s}
.close-fragment:nth-child(3){left:1.5%;top:44%;--drift:6.5s;--delay:-2s}
.close-fragment:nth-child(4){right:1.5%;top:43%;--drift:9s;--delay:-4s}
.close-fragment:nth-child(5){left:4%;bottom:8%;--drift:8.5s;--delay:-5s}
.close-fragment:nth-child(6){right:4%;bottom:8%;--drift:7.5s;--delay:-2.5s}
.fragment-field{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #49617F;border-radius:4px;letter-spacing:.12em}
.fragment-lock{width:10px;height:9px;border:1px solid #A8C8F3;border-radius:2px;position:relative;margin:4px 2px 0}
.fragment-lock::before{content:"";position:absolute;width:6px;height:6px;border:1px solid #A8C8F3;border-bottom:0;border-radius:5px 5px 0 0;left:1px;top:-6px}
.fragment-chat{border-left:2px solid #7FB2FF;padding-left:10px}
.fragment-trace{width:100%;height:24px;margin-top:5px;color:#7FB2FF}
@keyframes fragmentDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(min-width:900px){.sec.close .narrow{max-width:calc(100% - 500px);padding-inline:12px}.sec.close .hero-cta{gap:10px}.sec.close .btn{padding-inline:22px}}
@media(min-width:900px) and (max-width:1199px){.close-fragment{width:180px;padding:12px}.sec.close .narrow{max-width:calc(100% - 410px)}.sec.close h2{font-size:44px}.sec.close{min-height:630px}}
@media(max-width:899px){.close-fragments{display:none}}
@media(prefers-reduced-motion:reduce){.close-fragment{animation:none}}
.sec.close:has(.narrow:hover) .close-fragment,.sec.close:focus-within .close-fragment{animation-play-state:paused}
/* Annotated category diagrams and the mobile mega-menu. */
.dgm-section{position:relative;background:#FFFFFF;color:#0F1113;font-family:'Inter',sans-serif}
.dgm-section .lede{color:#475264}
.dgm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px);margin-top:40px}
.dgm-card{position:relative;min-width:0;padding:clamp(28px,3vw,36px);background:#fff;border:1px solid rgba(15,15,14,.09);border-radius:18px;box-shadow:0 30px 60px -40px rgba(15,17,20,.16)}
.dgm-card h3{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.025em}
.dgm-card>p{margin-top:12px;max-width:46ch;color:#475264;font-size:15px;line-height:1.65}
.dgm-stage{position:relative;height:180px;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:18px;color:#21406F;font-size:12px}
.dgm-stage svg{flex:none}
.dgm-account{position:relative;width:230px;padding:22px;background:#fff;border:1px solid rgba(15,15,14,.09);border-radius:14px;box-shadow:0 14px 30px -20px rgba(15,17,20,.25)}
.dgm-account strong{display:block;font-size:14px;font-weight:600;margin-bottom:18px;color:#0F1113}
.dgm-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#21406F;color:#fff;font-size:10px;white-space:nowrap}
.dgm-declined{position:absolute;width:220px;height:110px;left:calc(50% - 122px);top:12px;padding:12px 18px;border:1px solid rgba(15,15,14,.09);border-radius:14px;background:#FFFFFF;color:#475264;transform:rotate(-7deg);opacity:.5}
.dgm-dashboard{width:min(100%,280px);padding:14px;border:1px solid rgba(15,15,14,.09);border-radius:12px;background:#fff;box-shadow:0 14px 30px -20px rgba(15,17,20,.16)}
.dgm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.dgm-kpis span{padding:9px 6px;border:1px solid rgba(15,15,14,.09);border-radius:6px;background:#FFFFFF;font-size:9px;color:#475264}
.dgm-kpis i{display:block;width:24px;height:4px;margin-top:8px;background:#7FB2FF;border-radius:3px}
.dgm-chart{display:block;width:100%;height:84px;margin-top:12px}
.dgm-transfer{gap:12px}
.dgm-tile{padding:16px 13px;border:1px solid rgba(15,15,14,.09);border-radius:10px;background:#FFFFFF;font-weight:600;white-space:nowrap}
.dgm-owned{display:grid;gap:10px}
.dgm-owned .dgm-tile{background:rgba(47,98,176,.06)}
.dgm-arrow{width:36px;height:24px;color:#4E86CE}
.dgm-artwork{width:102px;height:82px;padding:14px 10px;border:1px solid rgba(15,15,14,.09);border-radius:10px;background:#FFFFFF;text-align:center}
.dgm-artwork svg{display:block;margin:0 auto 9px}
.dgm-vial{position:relative;width:62px;height:104px;border:1px solid #7FB2FF;border-radius:16px 16px 10px 10px;background:linear-gradient(90deg,rgba(127,178,255,.12),#fff 45%,rgba(127,178,255,.2))}
.dgm-vial::before{content:"";position:absolute;left:6px;right:6px;top:-9px;height:17px;border-radius:4px;background:#21406F;border-top:3px solid #4E86CE}
.dgm-vial::after{content:"";position:absolute;left:0;right:0;top:38px;height:35px;background:#fff;border-top:7px solid #2F62B0;border-bottom:1px solid rgba(15,15,14,.09)}
.dgm-card{padding-bottom:78px}
.nav-drawer{font-family:'Inter',sans-serif;background:#FFFFFF;gap:18px;max-height:calc(100dvh - 60px);overflow-y:auto}
.nav-drawer .nav-mega{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.nav-drawer .nav-column{display:flex;flex-direction:column;min-width:0}
.nav-drawer .nav-column a{display:block;font-size:15px}
.nav-drawer .nav-column a:last-child{margin-top:0;text-align:left}
.nav-drawer .nav-column a:hover{color:#2F62B0}
.nav-drawer .nav-stat{grid-column:1/-1;background:linear-gradient(135deg,#21406F,#2F62B0);color:#fff;border-radius:16px;padding:20px}
.nav-drawer .nav-stat strong{display:block;font-size:52px;font-weight:600;line-height:1;letter-spacing:-.05em;margin-bottom:9px}
.nav-drawer .nav-stat p{font-size:14px}
.nav-drawer>.btn.primary{width:100%;margin-top:0;background:#21406F;color:#fff}
.nav-drawer>.btn.primary:hover{background:#2F62B0}
@media(max-width:860px){.dgm-grid{grid-template-columns:1fr}.dgm-card{padding-bottom:28px}}
@media(max-width:520px){.nav-drawer .nav-mega{grid-template-columns:1fr;gap:12px}.dgm-stage{gap:12px}.dgm-transfer{gap:8px}.dgm-tile{padding:14px 10px}.dgm-arrow{width:28px}}
/* real images inside the backend + renders diagram cards */
.dgm-shot{margin:0;width:min(100%,300px);border:1px solid rgba(15,15,14,.09);border-radius:12px;overflow:hidden;box-shadow:0 16px 34px -22px rgba(15,17,20,.3);background:#fff}
.dgm-shot img{display:block;width:100%;height:150px;object-fit:cover;object-position:top left}
.dgm-render{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;color:#475264;font-size:11px;font-weight:500}
.dgm-render img{display:block;border-radius:10px}
.dgm-render-label img{width:98px;height:74px;object-fit:cover;border:1px solid rgba(15,15,14,.09)}
.dgm-render-vial img{height:138px;width:auto;border:1px solid rgba(15,15,14,.06);box-shadow:0 16px 34px -22px rgba(15,17,20,.32)}
/* ---- concierge chat demo ---- */
#concierge{--accent:#243B7A;--accent-soft:rgba(36,59,122,.08);--wash:#F4F6F9;--font-display:'Switzer',system-ui,-apple-system,sans-serif;font-family:var(--font-display)}
#concierge h2 .em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
.conc-grid{margin-top:clamp(32px,4vw,56px)}
.conc-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(32px,4vw,64px);align-items:center}
.conc-examples{list-style:none;display:grid;gap:13px;font-size:15px;color:var(--ink-70)}
.conc-examples li{display:flex;align-items:center;gap:10px}
.conc-examples li::before{content:'\2713';display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}
.conc-chat{min-width:0}
.conc-window{border:1px solid rgba(15,17,19,.08);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 2px 4px rgba(15,17,19,.04),0 14px 30px -12px rgba(15,17,19,.12),0 50px 90px -56px rgba(15,17,19,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.conc-header{display:flex;align-items:center;gap:12px;padding:18px 22px;background:#fff;border-bottom:1px solid rgba(15,17,19,.07)}
.conc-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:13px;background:linear-gradient(140deg,#3A56A5,#243B7A);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.28);color:#fff;font-weight:700}
.conc-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.conc-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-45);margin-top:2px}
.conc-status .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent);animation:none}
.conc-msgs{min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px;padding:22px 22px 16px;background:linear-gradient(180deg,var(--wash),#fff);overflow:hidden;transition:opacity .3s ease}
.conc-msgs.out{opacity:0}
.conc-row{display:flex;align-items:flex-end;gap:8px;width:100%;min-width:0;animation:concFadeUp .35s cubic-bezier(.19,1,.22,1) both}
.conc-row.user{justify-content:flex-end}
.conc-avatar.conc-avatar-small{width:28px;height:28px;border-radius:9px;font-size:12px;margin-bottom:20px;box-shadow:0 4px 10px -6px color-mix(in srgb,var(--accent) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.conc-row.conc-typing .conc-avatar-small{margin-bottom:0}
.conc-message{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:82%}
.conc-row.user .conc-message{align-items:flex-end}
.conc-bubble{max-width:100%;padding:13px 16px;border:1px solid rgba(15,17,19,.08);border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 8px 20px -14px rgba(15,17,19,.22);color:var(--ink);font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.conc-bubble.user{background:linear-gradient(145deg,#1c2023,#0F1113);color:#fff;border-color:transparent;border-radius:16px 16px 4px 16px;box-shadow:0 12px 26px -14px rgba(15,17,19,.5)}
.conc-check{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;vertical-align:-3px;border-radius:50%;background:var(--accent-soft);color:var(--accent);animation:concCheck .45s ease-out both}
.conc-bubble b{font-weight:700;color:var(--accent)}
.conc-time{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:11px;line-height:15px;color:var(--ink-45)}
.conc-time svg{color:var(--accent)}
.conc-dots{display:flex;gap:5px;align-items:center;min-height:22px}
.conc-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:concDot 1s ease-in-out infinite}
.conc-dots span:nth-child(2){animation-delay:.15s}
.conc-dots span:nth-child(3){animation-delay:.3s}
.conc-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(15,17,19,.07);background:#fff}
.conc-field{display:flex;align-items:center;flex:1;min-width:0;min-height:46px;padding:11px 14px;border:1px solid rgba(15,17,19,.08);border-radius:14px;background:var(--wash);box-shadow:inset 0 1px 2px rgba(15,17,19,.05);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.conc-entry{min-width:0;width:100%}
.conc-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:concCaret 1s step-end infinite}
.conc-send{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:linear-gradient(140deg,#3A56A5,#243B7A);box-shadow:0 8px 16px -8px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.28);color:#fff}
.conc-send.sending{animation:concSend .18s ease-out}
.conc-demo:not(.running) .conc-caret,.conc-demo:not(.running) .conc-dots span,.conc-demo:not(.running) .conc-row,.conc-demo:not(.running) .conc-check,.conc-demo:not(.running) .conc-send,.conc-demo:not(.running) .conc-status .dot{animation-play-state:paused}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.conc-note{margin-top:24px;font-size:12px;line-height:1.6;color:var(--ink-45)}
@keyframes concFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes concDot{0%,80%,100%{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes concCheck{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1);opacity:1}}
@keyframes concSend{0%,100%{transform:scale(1)}45%{transform:scale(.9)}}
@keyframes concCaret{50%{opacity:0}}
@media (max-width:900px){
.conc-grid{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media (max-width:520px){
.conc-header{padding:18px 16px}
.conc-msgs{min-height:240px;padding:18px 14px 14px}
.conc-bubble{padding:12px 14px}
.conc-input{padding:14px 12px;gap:8px}
.conc-field{padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){
.conc-row,.conc-bubble,.conc-dots span,.conc-caret,.conc-check,.conc-send,.conc-status .dot{animation:none!important}
.conc-msgs{transition:none}
.conc-caret{display:none}
}
/* Final refresh: spacing, cool grounds, navigation and sample panels. */
.live-demo:not(.demo-enhanced) *,.live-demo.is-static *{animation:none!important;transition:none!important}
:root{--bg:#FFFFFF;--wash:#F4F6F9}
body > section,body > footer,#concierge{--wash:#F4F6F9}
body > .sec--tint{background:radial-gradient(920px 460px at 10% -12%,rgba(36,59,122,.04),transparent 62%),radial-gradient(760px 400px at 94% 6%,rgba(36,59,122,.025),transparent 64%),#F4F6F9}
body > .proof,.dgm-declined,.dgm-kpis span,.dgm-tile,.dgm-artwork{background:#F4F6F9}
.sec--tint::after{content:none;background:none}
:is(h1,h2,h3,h4,h5,h6),:is(h1,h2,h3,h4,h5,h6) :is(em,i,.em),#concierge h2 .em{font-style:normal}
#concierge h2 .em{font-family:inherit;font-weight:inherit;letter-spacing:inherit}
.hero{padding-top:clamp(116px,10vw,144px)}
.hero-in{max-width:1120px;width:100%}
.hero-kicker{margin-bottom:32px}
.hero h1{font-size:clamp(38px,5.5vw,76px);line-height:1.09;letter-spacing:-.02em;max-width:1100px;text-wrap:balance}
.hero .sub{max-width:62ch;margin-top:32px;text-wrap:pretty;line-height:1.65}
.hero .hero-cta{margin-top:38px}
.hero .hero-note{margin-top:24px}
.hero-facts{margin-top:42px;padding-top:30px}
@media(min-width:861px){.hero h1 .ln1,.hero h1 .ln2{white-space:nowrap}}
@media(max-width:640px){
.hero{padding-top:76px}
.hero-in{margin-top:30px}
.hero-kicker{margin-bottom:22px}
.hero h1{font-size:clamp(33px,8.6vw,46px)}
.hero .sub{font-size:16px;margin-top:24px}
.hero .hero-cta{margin-top:28px}
.hero .hero-note{margin-top:20px}
.hero-facts{margin-top:30px;padding-top:24px}
}
.site-grain{position:fixed;inset:0;z-index:110;pointer-events:none;user-select:none;overflow:hidden;opacity:.06;mix-blend-mode:normal}
.site-grain::before{content:"";position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E");background-size:200px 200px;animation:grainStatic 600ms steps(6) infinite}
@keyframes grainStatic{0%,100%{transform:translate(0,0)}20%{transform:translate(-17px,23px)}40%{transform:translate(31px,-11px)}60%{transform:translate(-29px,-37px)}80%{transform:translate(13px,41px)}}
.site-nav{position:fixed;inset:0 0 auto;z-index:100;height:88px;pointer-events:none;background:none;border:0;box-shadow:none;color:#0F1113}
.site-nav > .logo{position:absolute;left:clamp(18px,4vw,56px);top:20px;z-index:2;display:flex;align-items:center;min-height:44px;padding:0;margin:0;font-size:18px;color:inherit;pointer-events:auto}
.site-nav .logo .em{color:inherit;background:none;-webkit-text-fill-color:currentColor}
.nav-actions{position:absolute;right:clamp(18px,4vw,56px);top:20px;z-index:2;display:flex;gap:12px;align-items:center;pointer-events:auto}
.site-nav .nav-apply{display:grid;place-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:#0F1113;color:#fff;font-size:13px;font-weight:600}
.site-nav .nav-plus{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#0F1113;box-shadow:0 2px 8px rgba(15,17,19,.06)}
.nav-plus > span{position:relative;width:20px;height:20px;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.nav-plus > span::before,.nav-plus > span::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor}
.nav-plus > span::after{transform:rotate(90deg)}
.nav-plus[aria-expanded=true] > span{transform:rotate(45deg)}
.site-nav.on-dark:not(.menu-open){color:#fff}
.site-nav.on-dark:not(.menu-open) .nav-apply{background:#fff;color:#0C1A33}
.site-nav.on-dark:not(.menu-open) .nav-plus{background:#21406F;color:#fff}
.site-nav.menu-open{height:100%;height:100dvh;color:#0F1113}
.site-nav #navdrawer{position:fixed;inset:0;z-index:1;max-height:none;height:100%;height:100dvh;padding:100px clamp(22px,6vw,88px) 32px;background:#FFFFFF;backdrop-filter:none;border:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;gap:24px;pointer-events:auto}
.site-nav #navdrawer:not([hidden]){display:flex!important}
.menu-links{flex-shrink:0;width:100%;max-width:1120px;margin:auto;display:grid;gap:0}
.site-nav #navdrawer .menu-links a{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:baseline;gap:18px;padding:14px 0;margin:0;border-bottom:1px solid var(--line);text-align:left;animation:menuEnter 320ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--menu-i) * 35ms)}
.menu-n{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#475264}
.menu-label{font-size:clamp(28px,4.5vw,62px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.menu-label small{display:block;margin-top:8px;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5;color:#475264}
.menu-bottom{flex-shrink:0;width:100%;max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap}
.site-nav #navdrawer .menu-bottom a{padding:10px 0;margin:0;border:0;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.site-nav #navdrawer .menu-bottom .btn{padding:12px 28px;background:#0F1113;color:#fff}
.menu-detail{width:100%;font-size:12px;color:#475264}
.site-nav a:hover{color:#2F62B0}
.site-nav :is(a,button):focus-visible{outline:3px solid #4E86CE;outline-offset:5px}
@keyframes menuEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:520px){
.site-nav > .logo,.nav-actions{top:14px}
.site-nav #navdrawer{padding:88px 22px 24px}
.site-nav #navdrawer .menu-links a{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:13px 0}
.menu-label{font-size:30px}
.menu-label small{font-size:12px}
.menu-bottom{gap:8px 20px}
}
.work-col,.work-col.fill{transform:none}
.work .tile{min-width:0}
section[id]{scroll-margin-top:92px}
@media(max-width:520px){.work .tile-label{padding:10px 8px;gap:6px}.work .tile-label > span:first-child{font-size:10px;letter-spacing:.02em}.work .tile-arrow{width:22px;height:22px}}
.work .tile img{translate:0 var(--picture-y,0%);object-position:left top;transform-origin:left top}
@media(prefers-reduced-motion:no-preference){
.work .tile.picture-ready img{transform:scale(1.06);transition:transform 700ms cubic-bezier(.23,1,.32,1);transition-delay:var(--picture-delay,0ms)}
.work .tile.picture-in img{transform:scale(1.05)}
}
.live-demo{--demo-accent:#243B7A;min-width:0;width:100%;margin:28px 0 0;text-align:left}
.live-window{overflow:hidden;border:1px solid rgba(15,17,19,.09);border-radius:20px;background:#fff;box-shadow:0 2px 4px rgba(15,17,19,.04),0 14px 30px -12px rgba(15,17,19,.12),0 50px 90px -56px rgba(15,17,19,.4)}
.live-header{display:flex;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.live-mark{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(140deg,#3A56A5,#243B7A);color:#fff;font-size:14px;font-weight:700}
.live-header h4{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.live-header > div > span{display:block;color:#475264;font-size:11px;margin-top:3px}
.live-stage{padding:18px;background:linear-gradient(180deg,#F4F6F9,#fff);min-width:0}
.live-demo figcaption{margin-top:14px;font-size:12px;line-height:1.6;color:#475264}
.live-pause{display:inline-flex;align-items:center;gap:9px;width:auto;margin-top:10px;border:0;border-radius:6px;background:none;color:#475264;font-family:inherit;font-size:12px;line-height:1.5;padding:10px 8px;min-height:44px;cursor:pointer}
.live-pause::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.live-pause[aria-pressed=true]::before{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor;border-right:0}
.live-pause:focus-visible{outline:2px solid #243B7A;outline-offset:4px}
.order-list{position:relative;height:430px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.order-row{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:78px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;height:78px}
.order-row > div{min-width:0}
.order-row b{display:block;font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.order-row > div > span{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:#475264}
.order-chip{flex:none;max-width:100px;border-radius:999px;padding:6px 9px;font-size:10px;line-height:1.4;color:#243B7A;background:#EEF4FC}
.order-chip[data-state="0"]{background:#F4F6F9;color:#475264}
.order-chip[data-state="3"]{background:#243B7A;color:#fff}
.order-chip.changed{animation:chipChange .7s ease}
@keyframes orderEnter{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes chipChange{from{opacity:.55}to{opacity:1}}
.lot-search{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.lot-typed{overflow-wrap:anywhere}
.lot-caret{height:14px;width:1px;background:#243B7A;animation:concCaret 1s step-end infinite}
.lot-result{position:relative;min-height:225px;padding-top:14px}
.lot-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;animation:concFadeUp .4s both}
.lot-card[hidden],.lot-shimmer[hidden]{display:none}
.lot-card-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:10px;color:#475264}
.lot-badge{background:#EEF4FC;color:#243B7A;border-radius:999px;padding:5px 9px;font-size:10px}
.lot-product{display:block;font-size:21px;font-weight:600;margin:14px 0}
.lot-card dl{display:grid;gap:8px;font-size:11px}
.lot-card dl > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.lot-card dt{color:#475264}
.lot-card dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lot-shimmer{height:198px;border-radius:14px;background:linear-gradient(100deg,#EEF4FC 25%,#fff 50%,#EEF4FC 75%);position:relative;overflow:hidden}
.lot-shimmer::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#fff,transparent);animation:lookupShimmer 1s linear infinite}
@keyframes lookupShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.live-build{max-width:820px;margin:44px auto 0}
.live-build .live-stage{padding:26px}
.build-summary{display:flex;justify-content:space-between;gap:12px;align-items:center}
.build-day{display:block;font-size:27px;letter-spacing:-.02em;font-weight:600;font-variant-numeric:tabular-nums}
.build-clock{display:block;font-size:11px;color:#475264;margin-top:3px}
.build-count{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#243B7A;white-space:nowrap}
.build-track{height:5px;overflow:hidden;border-radius:999px;background:#E4EAF3;margin:22px 0}
.build-track i{display:block;height:100%;background:linear-gradient(90deg,#243B7A,#4E86CE);transform-origin:left;transition:transform .5s ease}
.build-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.build-list li{display:flex;gap:10px;align-items:center;color:#475264;font-size:13px;min-width:0}
.build-tick{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid #BAC4D3;border-radius:50%;color:transparent;font-size:11px}
.build-list .done{color:#0F1113}
.build-list .done .build-tick{background:#243B7A;color:#fff;border-color:#243B7A;animation:concCheck .4s both}
.live-demo:not(.running) *{animation-play-state:paused!important}
.live-demo:not(.running) .build-track i{transition:none}
.walk-txt,.walk-img{min-width:0}
@media(max-width:520px){
.live-header{padding:16px 14px}
.live-stage,.live-build .live-stage{padding:12px}
.order-row{align-items:flex-start;flex-direction:column;gap:7px;height:108px;min-height:108px}
.order-list{height:580px}
.order-chip{max-width:none}
.build-list{grid-template-columns:minmax(0,1fr)}
.build-summary{align-items:flex-start;flex-wrap:wrap}
.lot-card{padding:12px}
.lot-result{min-height:240px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.work .tile img{translate:none!important;transform:none!important;clip-path:none!important}
.work .tile:hover{transform:none}
.live-pause,.lot-caret{display:none}
}
.hero-ready :is(.hero-kicker,.hero h1,.hero .sub,.hero .hero-cta,.hero .hero-note,.hero-facts,.hero-anchor){animation-play-state:running}
html{scrollbar-gutter:stable}
.site-nav{transition:transform 320ms cubic-bezier(.23,1,.32,1)}
.site-nav.nav-hidden{transform:translateY(-120%)}
.site-nav.menu-open,.site-nav:focus-within{transform:none}
.site-nav #navdrawer{opacity:0;transition:opacity 180ms ease}
.site-nav #navdrawer.menu-visible{opacity:1}
.site-nav #navdrawer.menu-closing{opacity:0;transition-duration:150ms;pointer-events:none}
.work .tile img{transform:scale(1.05)}
.work .tile.picture-settled img{transition:transform 400ms cubic-bezier(.23,1,.32,1);transition-delay:0ms}
@media(hover:hover) and (pointer:fine){.work .tile.picture-settled:hover img{transform:scale(1.08)}}
.lot-recent{height:226px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#F4F6F9;color:#475264;font-size:12px}
.lot-recent ul{list-style:none;margin-top:12px}.lot-recent li{padding:12px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.lot-recent li span{display:block}.lot-recent p{margin-top:8px;font-size:10px}
.lot-result{height:254px;min-height:254px}.lot-card,.lot-shimmer{height:226px}.lot-recent[hidden]{display:none}
.conc-status .dot,.tour-live i{animation:none}
.mq{mask:none;-webkit-mask:none}.mq-track{padding:0 20px;gap:12px 24px}.mq-track span{padding:0}
@media(min-width:521px){.build-list{grid-auto-flow:column;grid-template-rows:repeat(4,auto)}}
@media(max-width:640px){.hero-anchor{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.site-nav:not(.nav-hidden),.menu-links a,.nav-plus > span{transform:none!important}.hero-anchor{opacity:1;transform:none;animation:none}.site-grain::before{animation:none;transform:none}}
.anchor-arrival .rev,.anchor-arrival .w,.anchor-arrival .tl-days{transition:none!important;opacity:1;transform:none}
.live-pause[hidden]{display:none}
.tl-who{max-width:100%;overflow-wrap:anywhere}
.hero .hero-note{color:#475264}.sec.close .hero-note{color:#B8C5D8}
.prow-n{color:#475264}
.dgm-declined{opacity:1}
.site-nav.on-dark:not(.menu-open) .nav-plus{border:0;box-shadow:none}
/* HANDOFF HERO CSS START: scoped to the story root. */
.hh-story{position:relative;height:320svh;--hh-mono:ui-monospace,SFMono-Regular,Consolas,monospace;--hh-gutter:clamp(22px,4vw,56px)}
.hh-story .hh-stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;background:#f4f6f9;isolation:isolate}
.hh-story .hh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hh-story .hh-mono{font:11px/1.5 var(--hh-mono);font-variant-numeric:tabular-nums;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hh-story .hh-opening{position:absolute;inset:100px var(--hh-gutter) 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:52px;align-items:center;max-width:1480px;margin:auto}
.hh-story .hh-copy{position:relative;z-index:8;min-width:0;align-self:center}
.hh-story .hh-copy h1{font:600 clamp(52px,5vw,76px)/1.04 var(--font-display);letter-spacing:-.02em;margin:20px 0 24px;text-align:left;white-space:nowrap}
.hh-story .hh-copy h1 span{color:var(--accent)}
.hh-story .hh-sub{max-width:46ch;font-size:clamp(15px,1.22vw,18px);line-height:1.65;color:var(--ink-45)}
.hh-story .hh-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.hh-story .hh-actions .btn{font-size:13px;padding:15px 21px}
.hh-story .hh-screen-space{position:relative;width:100%;aspect-ratio:1.6}
.hh-story .hh-screen{position:absolute;inset:0;transform-origin:0 0;border:1px solid #ccd2df;border-radius:6px;box-shadow:0 2px 3px #14203c08,0 12px 24px -8px #14203c20,0 36px 70px -20px #14203c35;overflow:hidden;background:var(--wash);z-index:4}
.hh-story .hh-screen img{width:100%;height:100%;object-fit:contain}
.hh-story .hh-callouts{position:absolute;inset:1px;z-index:9;pointer-events:none}
.hh-story .hh-pin{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #243b7a20;animation:hh-pin-in .4s both;animation-delay:var(--delay)}
.hh-story .hh-call{position:absolute;font:10px/1.45 var(--hh-mono);font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;animation:hh-chip-in .45s both;animation-delay:var(--delay)}
.hh-story .hh-call b{display:block;font-weight:400;background:white;border:1px solid #cdd3de;padding:6px 9px;border-radius:3px;box-shadow:0 3px 9px #14203c06}
.hh-story .hh-call:nth-of-type(1){left:0;top:-104px}.hh-story .hh-call:nth-of-type(2){left:48%;top:-68px}.hh-story .hh-call:nth-of-type(3){right:0;top:-32px}.hh-story .hh-call:nth-of-type(4){right:8%;top:calc(100% + 34px)}
.hh-story .hh-leaders{position:absolute;inset:0;overflow:visible;width:100%;height:100%}.hh-story .hh-leaders path{fill:none;stroke:var(--accent);stroke-width:1;opacity:.5;stroke-dasharray:1;stroke-dashoffset:0;animation:hh-line-in .65s both;animation-delay:var(--delay)}
@keyframes hh-pin-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes hh-chip-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes hh-line-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hh-story .hh-demo-tag{position:absolute;bottom:24px;left:var(--hh-gutter);right:var(--hh-gutter);padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font:10px/1.5 var(--hh-mono);color:var(--ink-45);z-index:10}
.hh-story.hh-enhanced:not(.hh-ready) .hh-board{visibility:hidden}
.hh-story .hh-board{position:absolute;inset:96px var(--hh-gutter) 80px;pointer-events:none}
.hh-story .hh-board-camera{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 50%}
.hh-story .hh-board-inner{position:absolute;left:50%;top:50%;width:1260px;margin:0;display:grid;grid-template-columns:6fr 8fr;gap:48px;transform-style:preserve-3d;transform-origin:50% 50%}
.hh-story .hh-board-headings{position:absolute;inset:0 8%;display:grid;grid-template-columns:6fr 8fr;gap:48px;align-content:start;font:13px/1.5 var(--hh-mono);color:var(--accent)}
.hh-story .hh-board-headings h3{font:inherit}.hh-story .hh-board-title{position:absolute;left:50%;bottom:0;white-space:nowrap;font:11px/1.5 var(--hh-mono);color:var(--ink-45)}
.hh-story .hh-group{min-width:0;transform-style:preserve-3d}.hh-story .hh-group h3{display:none;font:13px/1.5 var(--hh-mono);font-weight:400;color:var(--accent);margin-bottom:16px}
.hh-story .hh-backend{padding-top:0}
.hh-story .hh-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start;grid-auto-flow:dense;grid-auto-rows:46px;transform-style:preserve-3d}.hh-story .hh-backend .hh-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
.hh-story .hh-tile{grid-column:span 2;grid-row:span 2;min-width:0;position:relative;transform-style:preserve-3d}
.hh-story .hh-tile[data-screen="index"],.hh-story .hh-tile[data-screen="admin-orders"]{grid-column:span 4;grid-row:span 4}
.hh-story .hh-tile[data-screen="product"],.hh-story .hh-tile[data-screen="checkout"],.hh-story .hh-tile[data-screen="admin-coa-library"]{grid-column:span 3;grid-row:span 3}
@media(min-width:760px){.hh-story .hh-tile[data-screen="terms"]{grid-column:3 / span 2}}
.hh-story .hh-tile-image{position:relative;aspect-ratio:1.6;border:1px solid #cdd3de;background:var(--wash);border-radius:6px;box-shadow:0 2px 3px #14203c08,0 8px 16px -5px #14203c15,0 20px 32px -16px #14203c28;transform-style:preserve-3d}
.hh-story .hh-tile img{width:100%;height:auto;aspect-ratio:1.6;border-radius:5px}
.hh-story.hh-enhanced .hh-tile-image>img,.hh-story.hh-enhanced .hh-screen img{visibility:hidden}.hh-story.hh-enhanced .hh-tile-image>img.hh-decoded,.hh-story.hh-enhanced .hh-screen img.hh-decoded{visibility:visible}
.hh-story.hh-enhanced:not(.hh-static) .hh-tile[data-screen="index"] .hh-tile-image{border-color:transparent;background:transparent;box-shadow:none}.hh-story.hh-enhanced .hh-tile[data-screen="index"] .hh-tile-image>img{visibility:hidden}
.hh-story .hh-tile figcaption{margin-top:7px;font:9px/1.35 var(--hh-mono);color:#344052;overflow-wrap:anywhere}
.hh-story .hh-lit{position:absolute;inset:-1px;border:1px solid var(--accent);border-radius:6px;opacity:0;pointer-events:none;box-shadow:0 12px 22px -8px #243b7a35,0 28px 38px -16px #14203c45}
.hh-story .hh-step{position:absolute;left:7px;top:7px;padding:5px 7px;background:var(--accent);border:1px solid #ffffff80;border-radius:3px;color:white;font:16px/1.25 var(--hh-mono);white-space:nowrap;opacity:0;transform:translateZ(2px);z-index:8}
.hh-story .hh-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:translateZ(3px)}
.hh-story .hh-route path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.hh-story .hh-route circle{fill:var(--accent);filter:drop-shadow(0 0 5px #243b7a99)}
.hh-story .hh-ledger{position:absolute;left:var(--hh-gutter);right:var(--hh-gutter);top:50%;max-width:960px;margin:auto;padding:36px 44px 32px;border:1px solid #d9dde5;border-radius:8px;background:white;box-shadow:0 2px 4px #14203c05,0 22px 50px -24px #14203c35,0 60px 110px -40px #14203c40;transform:translateY(calc(-50% + 110svh));pointer-events:none}
.hh-story .hh-ledger-top{margin-bottom:24px}.hh-story .hh-ledger h2{font:600 clamp(34px,3.5vw,48px)/1.08 var(--font-display);letter-spacing:-.035em;margin-top:9px;overflow-wrap:anywhere}
.hh-story .hh-brand{margin-top:14px;max-width:210px}.hh-story .hh-brand label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hh-story .hh-brand input{width:100%;font:12px var(--hh-mono);border:0;border-bottom:1px solid #dce0e7;padding:7px 0;background:transparent;color:var(--ink);border-radius:0}
.hh-story .hh-ledger table{width:100%;border-collapse:collapse;text-align:left}.hh-story .hh-ledger thead{font:9px var(--hh-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}.hh-story .hh-ledger thead th{font-weight:400;padding:0 0 11px;border-bottom:1px solid #bec5d1}.hh-story .hh-ledger thead th:last-child{text-align:right;padding-right:24px}
.hh-story .hh-ledger tbody th{font-size:20px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}.hh-story .hh-ledger td{width:150px;border-bottom:1px solid var(--line);text-align:right}.hh-story .hh-ledger th small{display:block;font-size:10px;line-height:1.5;color:var(--ink-45);font-weight:400;margin-top:3px}
.hh-story .hh-owner{display:flex;justify-content:flex-end;align-items:center;position:relative;height:28px;font:16px/28px var(--hh-mono);font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.hh-story .hh-char{position:relative;width:.62em;height:28px;perspective:160px;display:inline-block}
.hh-story .hh-half{position:absolute;left:0;width:100%;height:14px;overflow:hidden;backface-visibility:hidden;background:white}.hh-story .hh-half>span{position:absolute;left:0;top:0;width:100%;height:28px;text-align:center;white-space:pre}
.hh-story .hh-top{top:0;transform-origin:50% 100%}.hh-story .hh-bottom{top:14px;transform-origin:50% 0}.hh-story .hh-bottom>span{top:-14px}.hh-story .hh-old{color:#939cab;font-weight:400}.hh-story .hh-fold-bottom{transform:rotateX(90deg)}
.hh-story .hh-check{width:14px;height:14px;margin-left:10px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hh-story .hh-finish{margin-top:24px}.hh-story .hh-finish p{font:500 clamp(28px,3vw,40px)/1.12 var(--font-display);letter-spacing:-.035em}.hh-story .hh-finish .hh-actions{margin-top:18px}.hh-story .hh-finish .btn{font-size:12px;min-height:44px;padding:12px 20px}
.hh-story.hh-in-view.hh-moving .hh-screen,.hh-story.hh-in-view .hh-board-inner,.hh-story.hh-in-view .hh-ledger{will-change:transform}
.hh-story.hh-enhanced:not(.hh-static) .hh-tile figcaption{display:none}
.hh-story .hh-finish[hidden]{display:none}.hh-story .hh-ledger{height:auto;min-height:0}.hh-story .hh-owner::before,.hh-story .hh-owner::after{content:none}
.hh-story.hh-static .hh-board-camera,.hh-story:not(.hh-enhanced) .hh-board-camera{position:relative;perspective:none}
.hh-story.hh-static .hh-board-inner,.hh-story:not(.hh-enhanced) .hh-board-inner{position:relative;left:auto;top:auto;width:100%}
.hh-story.hh-static .hh-board,.hh-story:not(.hh-enhanced) .hh-board{padding-bottom:34px}
.hh-story.hh-static .hh-group h3,.hh-story:not(.hh-enhanced) .hh-group h3{display:block}
.hh-story.hh-static .hh-board-headings h3,.hh-story:not(.hh-enhanced) .hh-board-headings h3{display:none}
.hh-story.hh-static .hh-grid,.hh-story:not(.hh-enhanced) .hh-grid{grid-auto-rows:auto}
/* Static flow is also the no script and reduced motion experience. */
.hh-story:not(.hh-enhanced),.hh-story.hh-static{height:auto}.hh-story:not(.hh-enhanced) .hh-stage,.hh-story.hh-static .hh-stage{position:relative;height:auto;min-height:0;overflow:hidden}
.hh-story:not(.hh-enhanced) .hh-opening,.hh-story.hh-static .hh-opening{position:relative;inset:auto;margin:170px var(--hh-gutter) 140px;min-height:450px}
.hh-story:not(.hh-enhanced) .hh-board,.hh-story.hh-static .hh-board{position:relative;inset:auto;margin:80px var(--hh-gutter);perspective:none}
.hh-story:not(.hh-enhanced) .hh-ledger,.hh-story.hh-static .hh-ledger{position:relative;inset:auto;transform:none;margin:80px auto;pointer-events:auto;width:calc(100% - 2 * var(--hh-gutter))}
.hh-story:not(.hh-enhanced) .hh-demo-tag,.hh-story.hh-static .hh-demo-tag{position:relative;inset:auto;margin:30px var(--hh-gutter)}
.hh-story.hh-static .hh-route,.hh-story:not(.hh-enhanced) .hh-route{display:none}.hh-story.hh-static .hh-screen img.hh-decoded{visibility:visible}.hh-story.hh-static .hh-tile[data-screen="index"] .hh-tile-image>img.hh-decoded{visibility:visible}
.hh-story.hh-static .hh-call,.hh-story.hh-static .hh-pin,.hh-story.hh-static .hh-leaders path{animation:none}.hh-story.hh-static.hh-in-view .hh-screen,.hh-story.hh-static.hh-in-view .hh-board-inner,.hh-story.hh-static.hh-in-view .hh-ledger{will-change:auto}
@media(min-width:760px) and (max-width:1150px){.hh-story .hh-copy h1{font-size:4.85vw}.hh-story .hh-actions .btn{font-size:11px;padding:13px 15px}.hh-story .hh-call{font-size:8px}.hh-story .hh-tile figcaption{font-size:8px}}
@media(max-width:759px){
.hh-story{height:240svh;--hh-gutter:22px}.hh-story .hh-stage{min-height:720px}.hh-story .hh-opening{inset:90px var(--hh-gutter) 126px;display:flex;flex-direction:column;justify-content:center;gap:28px}.hh-story .hh-copy{align-self:stretch}.hh-story .hh-copy h1{font-size:clamp(30px,8.3vw,52px);line-height:1.04;white-space:normal;text-wrap:balance;letter-spacing:-.02em;margin:12px 0 16px}.hh-story .hh-copy h1 br{display:none}.hh-story .hh-copy h1 span{display:block}.hh-story .hh-mono{font-size:9px}.hh-story .hh-sub{font-size:13px;line-height:1.55}.hh-story .hh-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px}.hh-story .hh-actions .btn{font-size:10px;padding:11px 5px;min-height:44px;white-space:nowrap}
.hh-story .hh-screen-space{max-width:420px;margin:0 auto;container-type:inline-size}.hh-story .hh-pin{box-sizing:content-box;width:6px;height:6px;margin:-5px;border:2px solid #fff;background:var(--accent);box-shadow:none;filter:none;animation:none;transform:none}.hh-story .hh-callouts{display:block}.hh-story .hh-call{font-size:8px;white-space:normal;width:50%}.hh-story .hh-call:nth-of-type(1){left:0;top:calc(100% + 12px)}.hh-story .hh-call:nth-of-type(2){left:50%;top:calc(100% + 12px)}.hh-story .hh-call:nth-of-type(3){left:0;top:calc(100% + 38px)}.hh-story .hh-call:nth-of-type(4){left:50%;right:auto;top:calc(100% + 38px)}.hh-story .hh-call b{padding:4px 5px;background:transparent;border:0;box-shadow:none}.hh-story .hh-leaders{display:none}
.hh-story .hh-board{inset:75px var(--hh-gutter) 60px}.hh-story .hh-board-inner{display:block;max-width:460px}.hh-story .hh-board-title{top:-24px;font-size:9px}.hh-story .hh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}.hh-story .hh-tile,.hh-story .hh-tile[data-screen]{grid-column:span 1;grid-row:span 1}.hh-story .hh-desktop{display:none}.hh-story .hh-backend{padding-top:20px}.hh-story .hh-group h3{font-size:9px;margin-bottom:9px}.hh-story .hh-tile figcaption{font-size:8px;margin-top:4px}.hh-story .hh-step{font-size:8px;left:4px;top:4px;padding:4px}.hh-story .hh-demo-tag{font-size:8px;bottom:18px}.hh-story .hh-demo-tag span:last-child{display:none}
.hh-story .hh-ledger{padding:24px 20px}.hh-story .hh-ledger h2{font-size:34px}.hh-story .hh-ledger-top{margin-bottom:20px}.hh-story .hh-ledger tbody th{font-size:16px;padding:12px 0}.hh-story .hh-ledger td{width:104px}.hh-story .hh-ledger th small{font-size:9px;max-width:23ch}.hh-story .hh-ledger thead{font-size:8px;letter-spacing:0}.hh-story .hh-owner{font-size:12px}.hh-story .hh-check{margin-left:7px;width:12px}.hh-story .hh-finish p{font-size:30px}.hh-story .hh-finish .btn{font-size:9px;padding:10px 4px}.hh-story .hh-brand{max-width:160px}.hh-story:not(.hh-enhanced) .hh-opening,.hh-story.hh-static .hh-opening{margin-top:105px;margin-bottom:140px;min-height:0}.hh-story:not(.hh-enhanced) .hh-ledger,.hh-story.hh-static .hh-ledger{margin:60px auto}
}
@media(max-width:759px) and (max-height:740px){.hh-story .hh-stage{min-height:640px}.hh-story .hh-opening{inset:85px var(--hh-gutter) 116px;gap:20px}.hh-story .hh-copy h1{font-size:30px;margin:9px 0 12px}.hh-story .hh-sub{font-size:12px}.hh-story .hh-screen-space{max-width:285px}.hh-story .hh-ledger{padding:20px}.hh-story .hh-ledger tbody th{padding:9px 0;font-size:14px}.hh-story .hh-ledger-top{margin-bottom:14px}.hh-story .hh-ledger h2{font-size:29px}.hh-story .hh-finish{margin-top:18px}.hh-story .hh-finish p{font-size:27px}}
@media(prefers-reduced-motion:reduce){.hh-story .hh-call,.hh-story .hh-pin,.hh-story .hh-leaders path{animation:none}}
@media(max-width:759px){.hh-story .hh-board-inner{width:100%;max-width:460px}.hh-story .hh-grid,.hh-story .hh-backend .hh-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.hh-story.hh-enhanced:not(.hh-static) .hh-tile figcaption{display:block}.hh-story .hh-board-headings{inset:0;font-size:13px;display:block}.hh-story .hh-board-headings h3{position:absolute;left:0;white-space:nowrap}.hh-story .hh-board-headings h3:last-child{top:50%}.hh-story .hh-board-title{left:0;top:auto;bottom:0;font-size:9px}.hh-story .hh-step{display:grid;place-items:center;width:20px;height:20px;left:0;top:0;padding:0;border-radius:50%;font-size:12px;line-height:1;transform:none}.hh-story .hh-route{transform:none}.hh-story .hh-backend{padding-top:36px}}
@media(min-width:760px){.hh-story:not(.hh-enhanced) .hh-copy{container-type:inline-size}.hh-story:not(.hh-enhanced) .hh-copy h1{font-size:min(76px,8.5cqw)}}
/* HANDOFF HERO CSS END */
/* Integration: native buttons, splash completion and static fallback. */
.hh-story .btn{font-weight:600;border:1px solid transparent;gap:0;backdrop-filter:none}
.hh-story .btn.primary{background:var(--ink);color:#fff}
.hh-story .btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.hh-story .btn:hover{opacity:.8}
.hh-story .hh-pin,.hh-story .hh-call,.hh-story .hh-leaders path{animation-play-state:paused}
.hh-story.hh-callouts-ready .hh-pin,.hh-story.hh-callouts-ready .hh-call,.hh-story.hh-callouts-ready .hh-leaders path{animation-play-state:running}
.hh-story:not(.hh-enhanced) .hh-pin,.hh-story:not(.hh-enhanced) .hh-call,.hh-story:not(.hh-enhanced) .hh-leaders path{animation:none}
.handoff-facts{position:relative;padding:24px clamp(22px,4vw,56px);border-block:1px solid var(--line);background:var(--bg)}
.handoff-facts .hero-facts{margin:0 auto;padding:0;border:0;text-align:center;opacity:1;transform:none;animation:none}
@media(max-width:680px){.handoff-facts .hero-facts{text-align:left}}
/* Requested fixes shared by desktop and phone. */
.cr-marquee{padding-inline:max(clamp(22px,4vw,56px),calc((100vw - 1208px)/2));mask-image:none;-webkit-mask-image:none}
#pricing .tier.feature::before{inset:0;height:auto;border-radius:inherit;clip-path:inset(0 0 calc(100% - 5px) 0);pointer-events:none}
.live-verify .lot-result{height:290px;min-height:290px}
.live-verify .lot-card,.live-verify .lot-recent,.live-verify .lot-shimmer{height:276px;min-height:276px}
.live-verify .lot-shimmer{position:absolute;inset:14px 0 0;pointer-events:none;background:transparent}
.live-verify .lot-shimmer::before{opacity:.25}
.conc-msgs > .conc-initial{animation:none}
.phone-apply{display:none}
@media(max-width:760px){.work{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){
body{padding-bottom:0}
.hh-story .hh-mono{font-size:12px;letter-spacing:.06em}
.hh-story .hh-sub{font-size:16px;line-height:1.55}
.hh-story .hh-actions{grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
.hh-story .hh-actions .btn,.phone-apply .btn{width:100%;font-size:16px;min-height:52px;padding:14px 10px;white-space:normal}
.hh-story .hh-board-headings,.hh-story .hh-board-title,.hh-story .hh-group h3,.hh-story .hh-tile figcaption,.hh-story .hh-call{font-size:11px}
.hh-story .hh-call:nth-of-type(3),.hh-story .hh-call:nth-of-type(4){top:calc(100% + 54px)}
.hh-story .hh-ledger thead{font-size:11px}
.hh-story .hh-ledger th small,.hh-story .hh-demo-tag{font-size:12px}
.hh-story .hh-brand input{min-height:44px;font-size:16px}
.hh-story .hh-ledger{padding-inline:16px}
.hh-story .hh-ledger td{width:86px}
.hh-story .hh-ledger thead th:last-child{padding-right:0}
.inv-plus{width:44px;height:44px}
footer .foot-in a{display:inline-flex;align-items:center;min-height:44px;padding-block:8px}
.work .tile-label > span:first-child{font-size:12px;overflow-wrap:anywhere}
.work .tile-arrow{flex:none;margin-left:auto}
.vs-tally,.ba-tag,.live-header > div > span,.dgm-pill,.dgm-render figcaption,.tl-step .n,.tl-step .who,.tier-badge,.build-clock,.build-count,.lot-card-top,.lot-badge,.lot-card dl,.conc-time,.chrome-url,.tour-live,.menu-n,.walk-kicker,.eyebrow,.mq-label,.tl-step .tl-m-days,.tl-who,.build-tick{font-size:12px}
.demo-note,.lot-recent p,.hero-note,.conc-note,.tier-after,.tour-note,.limit{font-size:12px}
.phone-apply:not([hidden]){display:block;position:fixed;bottom:0;inset-inline:0;z-index:20;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
body:has(.site-nav.menu-open) .phone-apply{display:none}
}
@media(max-width:640px){.cr-marquee{padding-inline:18px}}
/* Phone follow-ups: reserve caption clearance and tighten the last list row. */
@media(max-width:759px){
.hh-story .hh-backend{padding-top:80px}
}
@media(max-width:480px){
footer .foot-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:0}
footer .foot-links .foot-separator{display:none}
footer .foot-links a{white-space:nowrap;margin-inline:0;padding-inline:0}
.sec:has(> .wrap > .plist){padding-bottom:28px}
.plist > .prow:last-child{padding-bottom:8px}
}
/* Owner phone polish: retain the same content and reserve its actual space. */
.hh-pins{display:contents}
.mq-track span::after{content:none}
@media(max-width:760px){
.mq-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding-inline:22px;justify-content:start;text-align:left}
.mq-track span{white-space:normal;min-width:0;align-items:start}
}
@media(max-width:759px){
.hh-story{--hh-top:100px;--hh-shot-width:200px}
.hh-story .hh-stage{min-height:0}
.hh-story .hh-opening{inset:var(--hh-top) var(--hh-gutter) auto;justify-content:flex-start;gap:10px}
.hh-story .hh-copy h1{font-size:28px;line-height:1.04;margin:8px 0}
.hh-story .hh-mono{font-size:11px;line-height:1.5;letter-spacing:.04em}
.hh-story .hh-sub{font-size:14px;line-height:1.4}
.hh-story .hh-actions{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:10px}
.hh-story .hh-actions .btn{font-size:16px;line-height:1.25;min-height:48px;padding:10px 8px;white-space:normal}
.hh-story .hh-screen-space{max-width:none;width:100%;aspect-ratio:auto;flex:none;padding-top:100px;padding-bottom:44px}
.hh-story .hh-screen-space::before{content:"";display:block;height:calc(var(--hh-shot-width) / 1.6)}
.hh-story .hh-screen-space > .hh-screen{inset:100px auto auto calc((100% - var(--hh-shot-width)) / 2);width:var(--hh-shot-width);height:calc(var(--hh-shot-width) / 1.6)}
.hh-story .hh-callouts{position:absolute;display:block;inset:101px auto auto calc((100% - var(--hh-shot-width)) / 2 + 1px);width:calc(var(--hh-shot-width) - 2px);height:calc(var(--hh-shot-width) / 1.6 - 2px);margin:0}
.hh-story .hh-callouts .hh-call{position:absolute;left:var(--call-left,0px);right:auto;width:max-content;font-size:11px;line-height:1.35;white-space:nowrap}
.hh-story .hh-callouts .hh-call:nth-of-type(1){top:-100px}
.hh-story .hh-callouts .hh-call:nth-of-type(2){top:-68px}
.hh-story .hh-callouts .hh-call:nth-of-type(3){top:-36px}
.hh-story .hh-callouts .hh-call:nth-of-type(4){top:calc(100% + 12px)}
.hh-story .hh-call b{height:auto;padding:6px 9px;background:white;border:1px solid #cdd3de;box-shadow:0 3px 9px #14203c06}
.hh-story .hh-pins{display:block;position:absolute;inset:0}
.hh-story .hh-leaders{display:block}
.hh-story .hh-demo-tag{bottom:12px;padding-top:8px;font-size:11px;line-height:1.35}
.hh-story .hh-ledger{top:var(--hh-ledger-center,50%);padding:12px 14px}
.hh-story .hh-ledger-top{margin-bottom:8px}
.hh-story .hh-ledger h2{font-size:26px;line-height:1.08;margin-top:4px}
.hh-story .hh-brand{margin-top:4px}
.hh-story .hh-brand input{min-height:32px;font-size:16px;padding:4px 0}
.hh-story .hh-ledger thead{font-size:11px;line-height:1.3}
.hh-story .hh-ledger thead th{padding-bottom:6px}
.hh-story .hh-ledger thead th:last-child{padding-right:0}
.hh-story .hh-ledger tbody th{font-size:14px;line-height:1.3;padding:3px 0}
.hh-story .hh-ledger td{width:76px}
.hh-story .hh-ledger th small{font-size:11px;line-height:1.3;margin-top:2px}
.hh-story .hh-finish{margin-top:8px}
.hh-story .hh-finish p{font-size:22px;line-height:1.1}
.hh-story .hh-owner{height:22px;line-height:22px}
.hh-story .hh-char,.hh-story .hh-half>span{height:22px}
.hh-story .hh-half{height:11px}
.hh-story .hh-bottom{top:11px}
.hh-story .hh-bottom>span{top:-11px}
.hh-story .hh-finish .hh-actions{margin-top:8px}
/* Reserve the finish during its existing reveal, so the card never jumps. */
.hh-story .hh-finish[hidden]{display:block;visibility:hidden}
.hh-story.hh-static .hh-opening,.hh-story:not(.hh-enhanced) .hh-opening{margin-top:100px;margin-bottom:44px}
.hh-story.hh-static .hh-board,.hh-story:not(.hh-enhanced) .hh-board{margin-block:44px}
.hh-story.hh-static .hh-ledger,.hh-story:not(.hh-enhanced) .hh-ledger{margin-block:44px}
}
@media(max-width:759px) and (prefers-reduced-motion:no-preference){
.hh-story.hh-enhanced .hh-pin{animation:hh-pin-in .4s both;animation-delay:var(--delay);animation-play-state:paused}
.hh-story.hh-enhanced.hh-callouts-ready .hh-pin{animation-play-state:running}
}
@media(max-width:480px){
.sec{padding-block:44px}
.sec.close{padding-block:64px}
.showcase{padding-block:28px}
.proof-in{padding-block:28px}
.mq-sec{padding-block:0}
.mq-label{padding-block:24px}
.handoff-facts{padding-block:24px}
/* Adjacent white sections share a boundary; avoid adding both paddings. */
.sec + .sec{padding-top:28px}
.sec + .sec.close{padding-top:64px}
.sec:has(+ .sec.close){padding-bottom:8px}
footer{padding:8px 0 24px}
}
/* Detail-page intros use the final section heading typography. */
.sec.page-intro{padding-top:calc(88px + 72px);padding-bottom:24px}
.sec.page-intro h1{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.028em;line-height:1.08;color:var(--ink);margin-top:0;max-width:18ch;font-style:normal}
.page-intro .btn{margin-top:28px;max-width:100%;white-space:normal}
.section-link{display:flex;justify-content:center;padding:28px 22px 0}
.section-link .btn{max-width:100%;white-space:normal;text-align:center}
/* Remove only the spacing stacked at the detail-page intro boundary. */
.page-intro + .sec{padding-top:0}
.page-intro + .sec > .wrap > :first-child{margin-top:0}
.foot-in .foot-ruo{flex-basis:100%}
.section-link .build-day-link{white-space:nowrap}
@media(max-width:759px){
.sec.page-intro{padding-top:calc(88px + 48px)}
.section-link .build-day-link{padding-inline:20px}
}
/* Native owner-requested dropdowns, with the same list layout at every width. */
.offer-copy > p{max-width:72ch;font-size:clamp(16px,1.5vw,20px);line-height:1.7;margin-top:24px;color:var(--ink-45)}
.offer-copy > h2 + p{margin-top:28px}
.offer-copy .tiers-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tiers-three .tier{min-width:0;padding:32px 24px}
.tiers-three .tier .btn{margin-top:auto;white-space:normal;text-align:center}
.offer-copy .tier-note{font-size:16px;margin:32px 0 24px}
.offer-boundaries{max-width:78ch;margin-top:36px}
.offer-boundaries p{padding:24px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.6vw,22px);line-height:1.65}
.offer-boundaries p:last-child{border-bottom:1px solid var(--line)}
.tier-table-scroll{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.tier-table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tier-table{width:100%;min-width:680px;border-collapse:collapse;text-align:left;font-size:15px;line-height:1.5}
.tier-table caption{text-align:left;font-weight:600;padding:20px 24px}
.tier-table th,.tier-table td{padding:17px 20px;border-top:1px solid var(--line);vertical-align:top}
.tier-table thead th{background:var(--wash);font-size:17px}
.tier-table tbody th{font-weight:500;width:34%}
.tier-table td{width:22%;color:var(--ink-45)}
.running-costs{max-width:760px;margin-top:32px}
.running-costs > div{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);line-height:1.6}
.running-costs dt{font-weight:600}.running-costs dd{margin:0;color:var(--ink-45)}
.start-page .page-intro{padding-bottom:64px}
.start-page .page-intro h1{max-width:20ch}
.start-page .site-nav > .btn{min-height:44px}
@media(max-width:1000px){.offer-copy .tiers-three{grid-template-columns:1fr}.tiers-three .tier{padding:28px}.tiers-three .tier .btn{align-self:flex-start}}
@media(max-width:480px){.offer-copy > p{font-size:16px}.running-costs > div{grid-template-columns:1fr;gap:4px}.start-page .site-nav > .btn{padding:12px;font-size:13px}}
.plist > .prow,.plist > .prow:last-child,.honest .no-item{
display:block;padding:0;
}
.no-grid{display:block}
.no-grid > .no-item:last-child{border-bottom:1px solid var(--line)}
.honest .honest-close{margin-top:32px;padding-top:0;border-top:0}
@media(max-width:759px){
.honest .honest-close{margin-top:24px}
}
.prow-sum,.no-sum{
display:grid;align-items:center;min-height:44px;
padding:clamp(22px,2.5vw,30px) 0;gap:clamp(10px,2vw,24px);
list-style:none;cursor:pointer;
}
.prow-sum{grid-template-columns:auto auto minmax(0,1fr) auto}
.no-sum{grid-template-columns:minmax(0,1fr) auto}
.prow-sum::-webkit-details-marker,.no-sum::-webkit-details-marker{display:none}
.prow-sum::marker,.no-sum::marker{content:""}
.prow-sum:focus-visible,.no-sum:focus-visible{
outline:2px solid var(--ink);outline-offset:4px;
}
.prow-sum h3,.no-sum h3{margin:0;min-width:0;font-style:normal;overflow-wrap:anywhere}
.no-sum h3{font-weight:700}
.prow-sum .prow-ic{margin:0}
.prow-body,.no-body{padding:0 0 clamp(22px,2.5vw,30px)}
.prow-body .prow-fix{margin-top:12px}
@keyframes list-content-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
.prow[open] > .prow-body,.no-item[open] > .no-body{
animation:list-content-in .2s ease-out;
}
}