/* ============================================================
JonyX WebWorks — house stylesheet
------------------------------------------------------------
DESIGN NOTES (read before editing)
The reference is precision instrumentation: an aerospace
cockpit, a lab bench, a machined titanium case. Dark,
engineered, expensive. The site should feel like the systems
it sells.
Surfaces Five tiers of graphite, void -> sur3. Panels are
never flat fills: each carries a top bevel
highlight (inset 0 1px 0 white) over a shallow
vertical fall. That single detail is what reads
as machined rather than drawn.
Colour Two accents, and they mean different things.
GOLD = value, brand, the thing you should click.
CYAN = live, technical, measured, data.
Never use one where the other belongs, and never
use either as a large flat area — they are light
sources, not paint.
Type Sora for display (angular, engineered).
Manrope for everything you actually read.
JetBrains Mono ONLY for data: figures, units,
readouts, table headers, code. Mono is a spice.
Setting whole buttons and nav links in uppercase
mono is what makes a site read "robot" — don't.
Depth Glows are rare and low-alpha. Grain sits at 3%
over the deepest surfaces to kill banding, which
is the difference between "dark" and "cheap".
Detail HUD corner brackets mark the three most important
panels — hero mock, quote form, featured plan.
Three. They stop being precision the moment they
are everywhere.
Radii are 3px. Not 0 (brutalist, flat), not 14px (soft,
generic). 3px is a machined edge break.
============================================================ */
:root{
/* surface tiers — void is the page, sur3 is the highest lift */
--void:#07080B; --sur1:#0C0E13; --sur2:#12151C; --sur3:#191D26; --sur4:#222732;
/* hairlines */
--edge:rgba(255,255,255,.075); --edge2:rgba(255,255,255,.145); --edge3:rgba(255,255,255,.26);
--bevel:inset 0 1px 0 rgba(255,255,255,.055);
--bevel2:inset 0 1px 0 rgba(255,255,255,.09);
/* text */
/* --tx3 was #7C8695, which measured 4.58:1 on --sur3 — passing AA with
almost no margin, so any future surface change would tip it under.
#8A94A3 clears 4.5:1 on every surface tier (5.5 on sur3, 6.5 on void)
while keeping the same cool grey. */
--tx:#EEF1F5; --tx2:#A6AEBB; --tx3:#8A94A3;
/* accents — gold is brand/action, cyan is live/data */
--gold:#F0B45E; --gold2:#E0A048; --gold3:#FFD08C; --gold-dim:rgba(240,180,94,.13);
--cyan:#5FD5F0; --cyan2:#38B6D6; --cyan3:#9BE8FB; --cyan-dim:rgba(95,213,240,.12);
/* semantic */
--ok:#4ED8A0; --warn:#F0B45E; --bad:#FF7A6B; --wa:#4ADE80;
/* legacy aliases — older markup still resolves through these */
--bg:#07080B; --bg2:#0C0E13; --bg3:#12151C; --card:#12151C; --card2:#191D26;
--ink:#07080B; --ink2:#0C0E13;
--line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.145); --line3:rgba(255,255,255,.26);
--accent:#F0B45E; --accent2:#E0A048; --accent-lt:#FFD08C; --accent-soft:rgba(240,180,94,.13);
--magenta:#F0B45E; --violet:#E0A048; --cyan-legacy:#5FD5F0;
--grad:linear-gradient(180deg,#F7C377,#E0A048); --gradtx:#F0B45E;
/* 3% grain — kills banding on the deep surfaces */
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
/* the drafting grid used behind hero + page heads */
--grid:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
/* type */
--fh:'Sora',system-ui,-apple-system,sans-serif;
--fb:'Manrope',system-ui,-apple-system,sans-serif;
--fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fd:'Sora',system-ui,sans-serif;
/* elevation */
--shadow-sm:0 1px 2px rgba(0,0,0,.5);
--shadow-md:0 2px 6px rgba(0,0,0,.45),0 14px 34px -14px rgba(0,0,0,.75);
--shadow-lg:0 4px 12px rgba(0,0,0,.5),0 34px 70px -22px rgba(0,0,0,.9);
--r:3px; --rl:3px; --rxl:4px;
--wrap:1260px; --nav-h:70px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 22px);}
body{
font-family:var(--fb);color:var(--tx2);line-height:1.68;font-size:16.5px;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
background:var(--void);
position:relative;
}
/* Film grain. It has to sit ABOVE the content, not below it — the banding
it exists to kill happens in the big gradients (hero arc, alt bands), and
a layer underneath those never touches them. pointer-events:none keeps it
inert; it sits below the consent dialog (9999) deliberately. */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
background-image:var(--noise);background-size:140px 140px;opacity:.038;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}
::selection{background:rgba(240,180,94,.28);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:2px;}
html,body{overflow-x:hidden;}
.wrap{width:min(var(--wrap),calc(100vw - 56px));margin:0 auto;}
@media (max-width:640px){.wrap{width:calc(100vw - 36px);}}
/* Skip link — hidden above the viewport until keyboard focus lands on it */
.skip{position:fixed;top:12px;left:12px;z-index:200;transform:translateY(-250%);
display:inline-flex;align-items:center;font-family:var(--fb);font-weight:700;font-size:.9rem;color:#0A0B0E;
padding:.7rem 1.2rem;border-radius:var(--r);border:1px solid var(--gold);
background:linear-gradient(180deg,var(--gold3),var(--gold2));
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-md);
transition:transform .18s ease;}
.skip:focus{transform:none;}
/* Available to assistive tech, absent to the eye. Used where a heading cell
must be named for a screen reader but reads better blank on screen —
the empty top-left corner of the comparison table, for instance. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--sur1);}
::-webkit-scrollbar-thumb{background:var(--sur4);border:3px solid var(--sur1);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:#333A47;}
/* ── section markers ─────────────────────────────────────────
Wide-tracked sans, not mono — mono here is what tipped the
old build into robot territory. The cyan tick does the work. */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;
font-family:var(--fb);font-weight:600;font-size:.73rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--cyan);}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan);flex:none;
box-shadow:0 0 8px rgba(95,213,240,.8);}
/* accent word inside a headline — gold, with a soft emissive lift */
.grad{color:var(--gold);text-shadow:0 0 26px rgba(240,180,94,.32);}
h1 .grad,h2 .grad,.pagehero .grad{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;padding:0;
background:none;-webkit-text-fill-color:currentColor;}
h1,h2,h3,h4{font-family:var(--fh);color:var(--tx);letter-spacing:-.03em;line-height:1.1;overflow-wrap:break-word;font-weight:700;}
h1{letter-spacing:-.04em;line-height:1.03;}
/* ── HUD corner brackets ─────────────────────────────────────
Eight gradient slivers, so no pseudo-elements are consumed
and the effect composes onto any existing background stack. */
/* ── buttons — machined, sentence case, never uppercase mono ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
font-family:var(--fb);font-weight:600;font-size:.92rem;letter-spacing:.005em;
padding:.92rem 1.6rem;border-radius:var(--r);white-space:nowrap;border:1px solid transparent;
transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.btn--primary{color:#0A0B0E;font-weight:700;
background:linear-gradient(180deg,var(--gold3),var(--gold2));border-color:var(--gold);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px -10px rgba(240,180,94,.55);}
.btn--primary:hover{background:linear-gradient(180deg,#FFDDA4,#F0B45E);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 32px -8px rgba(240,180,94,.75);}
.btn--ghost{color:var(--tx);background:linear-gradient(180deg,var(--sur3),var(--sur2));border-color:var(--edge2);
box-shadow:var(--bevel);}
.btn--ghost:hover{color:#fff;border-color:rgba(95,213,240,.55);
box-shadow:var(--bevel2),0 0 22px -6px rgba(95,213,240,.4);}
.btn--wa{color:var(--tx);background:linear-gradient(180deg,var(--sur3),var(--sur2));border-color:var(--edge2);box-shadow:var(--bevel);}
.btn--wa svg{color:var(--wa);}
.btn--wa:hover{color:#fff;border-color:rgba(74,222,128,.5);box-shadow:var(--bevel2),0 0 22px -6px rgba(74,222,128,.4);}
.btn--lg{padding:1.08rem 1.9rem;font-size:.98rem;}
.btn svg{width:17px;height:17px;flex:none;}
/* ── NAV ─────────────────────────────────────────────────────
Glass over void, with a gold filament along the bottom edge
that fades out at both ends. */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
background:rgba(7,8,11,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
border-bottom:1px solid var(--edge);transition:background .3s,border-color .3s;}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(240,180,94,.55) 22%,rgba(95,213,240,.5) 68%,transparent);
opacity:.75;}
.nav.scrolled{background:rgba(7,8,11,.94);border-bottom-color:var(--edge2);}
.nav .brand{color:var(--tx);} .nav .brand b{color:#fff;} .nav .brand span{color:var(--tx3);}
.nav .btn{padding:.6rem 1.1rem;font-size:.85rem;}
.nav__inner{display:flex;align-items:center;gap:1.6rem;height:100%;}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--fh);font-weight:700;font-size:1.02rem;letter-spacing:-.028em;}
/* The mark sits directly on the page. No tile, no container, no initials —
that shape is the giveaway. See includes/mark.php for the reasoning. */
.brand .mark{width:27px;height:27px;flex:none;display:block;overflow:visible;
color:var(--tx);transition:color .2s ease,filter .2s ease;
filter:drop-shadow(0 0 9px rgba(240,180,94,.28));}
.brand:hover .mark{color:#fff;filter:drop-shadow(0 0 13px rgba(240,180,94,.5));}
.brand b{font-weight:700;} .brand span{color:var(--tx3);font-weight:400;}
.nav__links{display:flex;gap:1.9rem;margin-left:auto;
font-family:var(--fb);font-size:.92rem;font-weight:500;color:var(--tx2);}
.nav__links a{position:relative;padding:.4rem 0;transition:color .18s ease;}
.nav__links a:hover{color:#fff;}
/* scaleX rather than width: identical render, but it runs on the compositor
instead of triggering layout on every frame of the hover. */
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cyan);
box-shadow:0 0 8px rgba(95,213,240,.9);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__actions{display:flex;gap:.6rem;align-items:center;}
.nav__toggle{display:none;width:42px;height:42px;border-radius:var(--r);border:1px solid var(--edge2);margin-left:auto;
align-items:center;justify-content:center;background:linear-gradient(180deg,var(--sur3),var(--sur2));box-shadow:var(--bevel);}
.nav__toggle span{display:block;width:17px;height:1.5px;background:var(--tx);position:relative;}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--tx);transition:transform .25s,top .25s;}
.nav__toggle span::before{top:-6px;} .nav__toggle span::after{top:6px;}
.nav.open .nav__toggle span{background:transparent;}
.nav.open .nav__toggle span::before{top:0;transform:rotate(45deg);}
.nav.open .nav__toggle span::after{top:0;transform:rotate(-45deg);}
.nav__mobile{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:55;display:none;flex-direction:column;
padding:.7rem 1.2rem 1.5rem;background:rgba(9,11,15,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid var(--edge2);box-shadow:0 24px 50px rgba(0,0,0,.8);}
.nav.open .nav__mobile{display:flex;}
.nav__mobile a{padding:.95rem .2rem;font-size:1rem;font-weight:500;color:var(--tx);border-bottom:1px solid var(--edge);}
/* The generic rule above also matched the gold CTA, painting bright text
on a gold fill at 1.26:1. Buttons keep their own colour. */
.nav__mobile .btn--primary{color:#0A0B0E;font-weight:700;border-bottom:0;}
.nav__mobile .btn{border-bottom:0;}
.nav__mobile .btn{margin-top:.8rem;width:100%;border-bottom:0;}
/* ── HERO ────────────────────────────────────────────────────
Grid + a cold arc-glow behind the product mock. Nothing
animates except the caret. */
.hero{padding:calc(var(--nav-h) + 5.6rem) 0 5.4rem;position:relative;overflow:hidden;background:var(--void);}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--grid);background-size:72px 72px;background-position:center top;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.55) 45%,transparent 82%);
mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.55) 45%,transparent 82%);}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(46% 52% at 74% 34%, rgba(95,213,240,.13), transparent 66%),
radial-gradient(40% 44% at 16% 18%, rgba(240,180,94,.075), transparent 68%);}
.hero .wrap{position:relative;z-index:1;}
.hero .eyebrow{margin-bottom:1.6rem;}
.hero h1{color:#fff;font-weight:700;font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-.042em;line-height:1.04;max-width:16ch;margin-bottom:1.5rem;}
.hero .sub{font-size:clamp(1.03rem,1.5vw,1.15rem);color:var(--tx2);max-width:56ch;margin-bottom:2.1rem;line-height:1.72;}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem;}
.hero h1 .caret{display:inline-block;margin-left:.06em;color:var(--cyan);font-weight:700;
text-shadow:0 0 18px rgba(95,213,240,.9);animation:caretblink 1.15s steps(2,start) infinite;}
@keyframes caretblink{50%{opacity:.15;}}
/* spec readouts */
.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2.5rem;}
.chip{display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--fb);font-weight:500;font-size:.8rem;letter-spacing:.005em;
color:var(--tx2);padding:.48rem .85rem;border:1px solid var(--edge);border-radius:var(--r);
background:linear-gradient(180deg,var(--sur2),var(--sur1));box-shadow:var(--bevel);
transition:border-color .18s ease,color .18s ease;}
.chip:hover{border-color:var(--edge2);color:var(--tx);}
.chip svg{width:14px;height:14px;color:var(--cyan);}
/* A chip that is a link has to look clickable and answer on hover; a chip that
is only a label must not pretend to. Same shape, different contract. */
a.chip{text-decoration:none;}
a.chip:hover{border-color:rgba(95,213,240,.5);color:var(--tx);box-shadow:var(--bevel),0 0 18px -8px rgba(95,213,240,.45);}
.chip--mute{color:var(--tx3);background:none;border-style:dashed;border-color:var(--edge);}
.chip--mute:hover{border-color:var(--edge);color:var(--tx3);}
.trust{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;font-size:.86rem;color:var(--tx3);padding-top:1.6rem;border-top:1px solid var(--edge);}
.trust .lbl{font-family:var(--fm);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--tx3);}
.trust a{color:var(--tx2);font-weight:500;border-bottom:1px solid rgba(255,255,255,.16);transition:color .18s,border-color .18s;}
.trust a:hover{color:var(--cyan);border-bottom-color:var(--cyan);}
.trust .sep{width:1px;height:11px;background:var(--edge3);display:inline-block;}
/* ── section shell ───────────────────────────────────────────
Alternating bands are a half-step lift, not a colour change. */
.section{padding:5.6rem 0;}
.section--tight{padding:4.2rem 0;}
.section--alt{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
background:linear-gradient(180deg,var(--sur1),var(--void) 62%);position:relative;}
/* chapter-opening head: label + headline left, standfirst right,
under a rule that starts as a short gold segment */
.shead{margin-bottom:3rem;max-width:none;
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1rem 4rem;align-items:start;
border-top:1px solid var(--edge);padding-top:1.5rem;position:relative;}
.shead::before{content:"";position:absolute;top:-1px;left:0;width:58px;height:1px;background:var(--gold);
box-shadow:0 0 10px rgba(240,180,94,.8);}
.shead .eyebrow{display:inline-flex;margin-bottom:1rem;grid-column:1;}
.shead h2{grid-column:1;font-size:clamp(1.85rem,3.2vw,2.55rem);font-weight:700;margin-bottom:0;letter-spacing:-.038em;}
.shead p{grid-column:2;grid-row:1 / span 3;color:var(--tx2);font-size:1.02rem;line-height:1.7;align-self:end;max-width:52ch;}
/* Named --center for a long time while setting text-align:LEFT. Renamed:
it flushes the chapter head left and drops the eyebrow trailing rule. */
.shead--flush{margin-left:0;margin-right:0;text-align:left;}
.shead--flush .eyebrow::after{content:none;}
.shead--flush p{margin-left:0;margin-right:0;}
@media (max-width:900px){
.shead{grid-template-columns:1fr;gap:.8rem;}
.shead p{grid-column:1;grid-row:auto;margin-top:.5rem;}
}
/* ── the machined panel ──────────────────────────────────────
Every card in the system is this object. Bevel + fall + rule. */
.diff,.svc,.step,.price-card,.work-card,.pain,.sys-feat .feat,.post-card,.stat,.card-soft,.adcard,.panel{
background:linear-gradient(180deg,var(--sur2),var(--sur1));
border:1px solid var(--edge);border-radius:var(--r);
box-shadow:var(--bevel),var(--shadow-sm);
transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.diff:hover,.svc:hover,.work-card:hover,.pain:hover,.sys-feat .feat:hover,.post-card:hover{
border-color:var(--edge2);transform:translateY(-2px);
box-shadow:var(--bevel2),var(--shadow-md),0 0 0 1px rgba(95,213,240,.07);}
/* DIFFERENTIATORS */
/* ── Sticky quote bar ─────────────────────────────────────────
Small screens only: above 840px the fixed nav still carries a
visible "Get a quote", so a second one would be noise.
Two targets, no more. The price is on the left because that is
the question the visitor actually opened the ad to answer, and
putting the number on the bar means they never have to travel
18 viewports to read it. Gold stays on the action alone.
============================================================ */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
align-items:center;gap:.7rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
background:rgba(7,8,11,.93);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
border-top:1px solid var(--edge2);box-shadow:0 -14px 34px -18px rgba(0,0,0,.95);
transform:translateY(110%);transition:transform .26s cubic-bezier(.2,.65,.25,1);}
.qbar.is-on{transform:none;}
.qbar__price{flex:none;display:flex;flex-direction:column;gap:.05rem;border-bottom:0;color:var(--tx2);}
/* .68rem, not .56rem: the label token floor. Shipping a 9px label here would
have re-created the exact defect this pass exists to remove. */
.qbar__lbl{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);}
.qbar__price b{font-family:var(--fh);font-weight:700;font-size:1.02rem;letter-spacing:-.028em;color:var(--cyan);
font-variant-numeric:tabular-nums;line-height:1.1;}
.qbar__price b span{font-family:var(--fb);font-weight:500;font-size:.72rem;color:var(--tx3);letter-spacing:0;}
.qbar__price:hover b{color:var(--cyan3);}
.qbar__cta{flex:1;justify-content:center;padding:.85rem 1rem;}
@media (max-width:840px){ .qbar{display:flex;} }
/* Must outrank the media query above: while hidden the bar has to leave the
layout AND the tab order, or keyboard users land on an invisible control. */
.qbar[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){ .qbar{transition:none;} }
/* ── Claims ───────────────────────────────────────────────────
The three promises, set as ruled rows instead of cards.
WHY NOT CARDS: this page already runs card grids for the eleven
systems, the six pains, the safeguards, the work and the plans.
A sixth grid made the promises read as one more catalogue, and
gave the reader nothing to rank. A claim should read as a
statement — so: no tile, no pictogram, just a rule and space.
The geometry is deliberately the chapter head's (statement
left, detail right), so a new component lands inside the
existing world rather than introducing a second idea. Measure
is capped at 60ch per the design system, not the wider default.
============================================================ */
.claims{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge2);}
.claim{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:1rem 2.4rem;
padding:1.7rem 0;border-bottom:1px solid var(--edge);}
.claim h3{font-family:var(--fh);font-weight:700;font-size:1.3rem;line-height:1.18;letter-spacing:-.032em;color:var(--tx);}
/* 52ch, not 60: measured against the page it sits on, 60ch rendered ~80
characters per line — the widest measure on the homepage. 52ch lands at
~69, the same line length as the chapter-head standfirst two rules above. */
.claim p{color:var(--tx2);max-width:52ch;}
@media (max-width:900px){
.claim{grid-template-columns:1fr;gap:.45rem;padding:1.4rem 0;}
.claim h3{font-size:1.16rem;}
}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.diff-grid--4{grid-template-columns:repeat(4,1fr);}
.diff{padding:2rem 1.85rem 2.1rem;position:relative;overflow:hidden;}
.diff .ic{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:1.25rem;
background:linear-gradient(160deg,rgba(95,213,240,.16),rgba(95,213,240,.03));
border:1px solid rgba(95,213,240,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.diff .ic svg{width:20px;height:20px;color:var(--cyan);}
.diff h3{font-size:1.06rem;margin-bottom:.6rem;letter-spacing:-.028em;font-weight:600;}
.diff p{color:var(--tx2);font-size:.93rem;line-height:1.65;}
/* SYSTEMS — indexed like line items on a spec sheet */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:svc;}
.svc{padding:1.75rem 1.75rem 1.85rem;position:relative;overflow:hidden;}
.svc-grid .svc::after{counter-increment:svc;content:counter(svc,decimal-leading-zero);
position:absolute;top:1.6rem;right:1.6rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;color:var(--tx3);opacity:.65;}
.svc h3{font-size:1.03rem;margin-bottom:.55rem;letter-spacing:-.026em;padding-right:2.6rem;font-weight:600;}
.svc p{color:var(--tx2);font-size:.9rem;line-height:1.62;}
.svc .tagline{display:inline-block;margin-top:1rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--cyan);border:1px solid rgba(95,213,240,.24);border-radius:2px;
padding:.26rem .6rem;background:rgba(95,213,240,.06);}
a.svc{display:block;text-decoration:none;color:inherit;}
/* a.svc sets display:block, which outranks the UA's [hidden] rule — the
personalised grid collapses cards with the hidden attribute, so restore it. */
.svc[hidden]{display:none;}
a.svc h3{color:var(--tx);}
.svc__more{display:inline-block;margin-top:.85rem;margin-left:.55rem;font-family:var(--fb);font-weight:600;
font-size:.78rem;color:var(--gold);transition:transform .2s ease;}
a.svc:hover .svc__more{transform:translateX(4px);}
/* PROCESS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:step;}
.step{position:relative;padding:2rem 1.75rem 2.1rem;}
.step .num{font-family:var(--fm);font-size:.8rem;font-weight:500;color:var(--gold);
width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:1.2rem;
background:linear-gradient(160deg,rgba(240,180,94,.16),rgba(240,180,94,.03));
border:1px solid rgba(240,180,94,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);}
.step h3{font-size:1.03rem;margin-bottom:.55rem;font-weight:600;}
.step p{color:var(--tx2);font-size:.9rem;line-height:1.62;}
/* PRICING — figures set like instrument readouts */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.7rem;}
.price-card{position:relative;padding:2.2rem 1.9rem 2.1rem;}
.price-card.feat{border-color:rgba(240,180,94,.45);
background:
radial-gradient(90% 55% at 50% 0%, rgba(240,180,94,.11), transparent 70%),
linear-gradient(180deg,var(--sur3),var(--sur1));
box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(240,180,94,.09),0 26px 60px -22px rgba(240,180,94,.28),var(--shadow-md);}
.price-card.feat .ptag{color:var(--gold);}
.price-card.feat .amt{color:#fff;}
.price-card .flag{position:absolute;top:-1px;left:1.9rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:#0A0B0E;font-weight:500;padding:.32rem .7rem;border-radius:0 0 2px 2px;
background:linear-gradient(180deg,var(--gold3),var(--gold2));box-shadow:0 4px 16px -4px rgba(240,180,94,.6);}
.price-card .ptag{font-family:var(--fm);font-weight:400;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-bottom:1rem;}
.price-card .amt{font-family:var(--fh);font-weight:700;font-size:2.5rem;line-height:1;letter-spacing:-.045em;color:var(--tx);font-variant-numeric:tabular-nums;}
.price-card .amt em{font-family:var(--fm);font-style:normal;font-size:.72rem;font-weight:400;color:var(--tx3);letter-spacing:.06em;}
.price-card .per{color:var(--tx3);font-size:.85rem;margin:.5rem 0 1.6rem;}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.8rem;}
.price-card li{display:flex;gap:.6rem;color:var(--tx2);font-size:.91rem;line-height:1.5;}
.price-card li svg{width:15px;height:15px;color:var(--cyan);flex:none;margin-top:.22rem;}
.price-card .btn{width:100%;}
.price-note{background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge);border-radius:var(--r);
padding:1.5rem 1.7rem;position:relative;overflow:hidden;margin-bottom:1.3rem;box-shadow:var(--bevel);}
.price-note p{color:var(--tx2);font-size:.95rem;}
.price-note p b{color:var(--tx);font-weight:600;}
/* the pricing ledger — the fine print set like a datasheet, one row per moment */
.price-ledger{display:flex;flex-direction:column;margin:0 0 .9rem;}
.price-ledger .row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:1.4rem;align-items:baseline;
padding:.8rem 0;border-top:1px solid var(--edge);}
.price-ledger .row:first-child{border-top:0;padding-top:0;}
.price-ledger .when{font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.price-ledger .what{color:var(--tx2);font-size:.94rem;line-height:1.6;}
.price-ledger .what b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums;}
/* Ran 132 characters on a single line before this cap — the widest measure
on the site, against its own 52-60ch rule. */
.price-note .fineprint{color:var(--tx3);font-size:.88rem;max-width:62ch;border-top:1px solid var(--edge);padding-top:.9rem;}
@media (max-width:560px){.price-ledger .row{grid-template-columns:1fr;gap:.25rem;}}
.web-block{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;border-radius:var(--r);padding:1.9rem 2rem;
background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge);border-left:2px solid var(--gold);
box-shadow:var(--bevel),var(--shadow-sm);}
.web-block .wb-txt{flex:1;min-width:min(100%,280px);}
/* h2 on the standalone pricing-page section, h3 where it sits under one. */
.web-block h2,.web-block h3{font-size:1.16rem;margin-bottom:.45rem;font-weight:600;letter-spacing:-.026em;line-height:1.3;}
.web-block p{color:var(--tx2);font-size:.94rem;}
.web-block p b{color:var(--tx);font-weight:600;}
/* PROOF */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;}
.work-card{display:block;overflow:hidden;}
.wk-frame{background:var(--sur1);border-bottom:1px solid var(--edge);overflow:hidden;}
.wk-img{width:100%;aspect-ratio:900/468;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s ease;
filter:saturate(.88) brightness(.9);}
.work-card:hover .wk-img{transform:scale(1.03);filter:saturate(1) brightness(1);}
.wk-bar{display:flex;gap:6px;padding:.6rem .8rem;border-bottom:1px solid var(--edge);background:var(--sur2);}
.wk-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14);}
.wk-shot{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;font-family:var(--fh);font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.03em;padding:1rem;}
.wk-shot.n1,.wk-shot.n2,.wk-shot.n3{background:linear-gradient(150deg,var(--sur3),var(--void));}
.wk-body{padding:1.4rem 1.5rem 1.6rem;}
.wk-body h3{font-size:1.1rem;margin-bottom:.45rem;font-weight:600;}
.wk-body p{color:var(--tx2);font-size:.91rem;margin-bottom:.85rem;}
.wk-tags{display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;color:var(--tx3);margin-bottom:.75rem;}
.wk-visit{font-family:var(--fb);font-size:.85rem;font-weight:600;color:var(--gold);}
.work-card:hover .wk-visit{color:var(--gold3);}
/* PAIN → FIX */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.05rem;}
.pain{padding:1.85rem 1.85rem;}
.pain .ache{font-family:var(--fh);font-weight:600;font-size:1.04rem;color:var(--tx);margin-bottom:.95rem;line-height:1.35;letter-spacing:-.026em;}
.pain .fix{display:flex;gap:.65rem;color:var(--tx2);font-size:.94rem;line-height:1.6;}
.pain .fix .arrow{color:var(--cyan);font-weight:600;flex:none;font-family:var(--fm);}
/* WHY ME */
.whyme{display:flex;gap:3.2rem;align-items:flex-start;flex-wrap:wrap;}
.whyme__txt{flex:1;min-width:min(100%,300px);}
.whyme__txt h2{font-size:clamp(1.7rem,2.9vw,2.2rem);font-weight:700;margin-bottom:1.15rem;letter-spacing:-.038em;}
.whyme__txt p{color:var(--tx2);margin-bottom:1.05rem;max-width:58ch;}
.whyme__txt p b{color:var(--tx);font-weight:600;}
.whyme__stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-width:min(100%,280px);flex:1;}
.stat{padding:1.6rem 1.5rem;position:relative;overflow:hidden;}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;
background:linear-gradient(180deg,var(--cyan),transparent);opacity:.85;}
.stat .big{font-family:var(--fh);font-weight:700;font-size:2.2rem;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
color:var(--cyan);background:none;-webkit-text-fill-color:currentColor;display:block;line-height:1;
text-shadow:0 0 24px rgba(95,213,240,.35);}
.stat .lbl{font-family:var(--fm);color:var(--tx3);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.7rem;line-height:1.55;}
/* ── FAQ ─────────────────────────────────────────────────── */
.faq{max-width:880px;}
.faq--center{margin-left:0;margin-right:0;}
/* homepage FAQ: the 11 questions flow across two full-width columns */
.faq--cols{max-width:none;margin:0;column-count:2;column-gap:3.5rem;}
.faq--cols details{break-inside:avoid;}
@media (max-width:900px){.faq--cols{column-count:1;}}
.faq details{background:transparent;border:0;border-top:1px solid var(--edge);border-radius:0;margin-bottom:0;overflow:hidden;box-shadow:none;
transition:background .2s ease;}
.faq details:last-of-type{border-bottom:1px solid var(--edge);}
.faq details[open]{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem .2rem;font-family:var(--fh);font-weight:600;font-size:1.01rem;
color:var(--tx);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;transition:color .18s ease;letter-spacing:-.024em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--fm);font-size:1.15rem;font-weight:400;line-height:1;color:var(--cyan);flex:none;transition:transform .2s ease;}
.faq details[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--cyan);}
.faq .ans{padding:0 .2rem 1.5rem;color:var(--tx2);font-size:.95rem;line-height:1.75;max-width:72ch;}
/* ── CONTACT ─────────────────────────────────────────────── */
#contact.section--alt{border-top:1px solid var(--edge);border-bottom:0;position:relative;overflow:hidden;
background:
radial-gradient(46% 60% at 82% 12%, rgba(95,213,240,.09), transparent 68%),
linear-gradient(180deg,var(--sur1),var(--void) 70%);}
#contact.section--alt::after{content:none;}
#contact .wrap{position:relative;z-index:1;}
#contact .cline.wa{color:var(--wa);}
#contact .cline.note{color:var(--tx3);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:start;}
.contact-side .eyebrow{display:inline-flex;margin-bottom:1.1rem;}
.contact-side h2{font-size:clamp(1.85rem,3.1vw,2.45rem);font-weight:700;margin-bottom:1.15rem;letter-spacing:-.04em;color:var(--tx);}
.contact-side p{color:var(--tx2);margin-bottom:1.7rem;max-width:46ch;}
.contact-side .lines{display:flex;flex-direction:column;gap:.9rem;}
.cline{display:inline-flex;align-items:center;gap:.7rem;color:var(--tx2);font-weight:500;transition:color .18s ease;}
.cline svg{width:17px;height:17px;flex:none;color:var(--cyan);}
.cline.wa{color:var(--wa);} .cline.wa svg{color:var(--wa);}
.cline.note{color:var(--tx3);font-weight:400;font-size:.88rem;}
a.cline:hover{color:#fff;}
/* ── forms — inset wells, cyan focus ─────────────────────── */
.form{background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge2);border-radius:var(--r);
padding:2.1rem;position:relative;overflow:hidden;
box-shadow:var(--bevel2),var(--shadow-lg);}
.form label{display:block;font-family:var(--fm);font-weight:400;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin:0 0 .55rem;}
.form .field{margin-bottom:1.2rem;}
.form input:not([type=range]):not([type=checkbox]):not([type=radio]),
.form textarea,.form select{width:100%;background:#080A0E;border:1px solid var(--edge2);border-radius:2px;
/* 1rem, not .95rem, and it is not a taste call: iOS Safari zooms the whole
page whenever a focused field is under 16px, then leaves the visitor
pinch-zoomed out mid-form. Most of this site's traffic arrives on a
phone from an ad, so that lands squarely on the quote form. */
color:var(--tx);font-size:1rem;padding:.85rem .9rem;
box-shadow:inset 0 1px 3px rgba(0,0,0,.65);
transition:border-color .18s,box-shadow .18s;}
.form input:not([type=range]):not([type=checkbox]):not([type=radio])::placeholder,
.form textarea::placeholder{color:var(--tx3);}
.form input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,
.form textarea:focus,.form select:focus{outline:none;border-color:rgba(95,213,240,.7);
box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(95,213,240,.13);}
.form textarea{min-height:126px;resize:vertical;}
.form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:2.4rem;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .9rem center;}
.form select option,.form select optgroup{background:#0C0E13;color:var(--tx);}
.form .btn{width:100%;}
/* Prose, not data: Manrope at .82rem instead of 11.2px mono. The design
system reserves mono for figures and units, and this line carries a
sentence a hesitant visitor is meant to read and believe. */
.form .formnote{font-family:var(--fb);color:var(--tx2);font-size:.82rem;letter-spacing:0;text-align:center;margin-top:1rem;line-height:1.5;}
/* per-field validation state */
.field.err input,.field.err select,.field.err textarea{border-color:rgba(255,122,107,.75);
box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(255,122,107,.12);}
.field .err-msg{display:none;color:var(--bad);font-size:.8rem;margin-top:.45rem;line-height:1.4;}
.field.err .err-msg{display:block;}
/* optional detail — company, interest & budget fold away until wanted */
.form-more{border:1px solid var(--edge);border-radius:var(--r);background:rgba(255,255,255,.015);margin-bottom:1.2rem;}
.form-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.85rem 1rem;font-family:var(--fb);font-weight:600;font-size:.88rem;color:var(--tx2);transition:color .18s ease;}
.form-more summary::-webkit-details-marker{display:none;}
.form-more summary::after{content:"+";font-family:var(--fm);font-size:1.05rem;color:var(--cyan);flex:none;}
.form-more[open] summary::after{content:"\2013";}
.form-more summary:hover{color:var(--tx);}
.form-more__in{padding:.2rem 1rem .4rem;}
/* ── FOOTER ──────────────────────────────────────────────── */
.footer{background:linear-gradient(180deg,var(--sur1),var(--void));color:var(--tx2);
border-top:1px solid var(--edge);padding:3.8rem 0 3rem;position:relative;overflow:hidden;}
.footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(240,180,94,.4) 30%,rgba(95,213,240,.35) 70%,transparent);
background-image:linear-gradient(90deg,transparent,rgba(240,180,94,.4) 30%,rgba(95,213,240,.35) 70%,transparent);
opacity:1;background-size:auto;}
.footer .wrap{position:relative;z-index:1;}
.footer__word{font-family:var(--fh);font-weight:700;line-height:.92;letter-spacing:-.055em;user-select:none;pointer-events:none;
font-size:clamp(2.2rem,10.4vw,8.2rem);white-space:nowrap;margin:2.6rem 0 1.9rem;
color:transparent;background:none;-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.09);}
.footer__top{display:flex;justify-content:space-between;gap:2.6rem;flex-wrap:wrap;margin-bottom:2rem;}
.footer .brand{margin-bottom:.9rem;}
.footer .brand b{color:#fff;} .footer .brand span{color:var(--tx3);}
.footer__tag{color:var(--tx2);font-size:.88rem;max-width:38ch;line-height:1.65;}
.footer__cols{display:flex;gap:3.4rem;flex-wrap:wrap;}
.fcol h3{font-family:var(--fm);font-weight:400;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.05rem;
padding-bottom:.65rem;border-bottom:1px solid var(--edge);}
.fcol a,.fcol span{display:block;color:var(--tx2);font-size:.89rem;margin-bottom:.6rem;transition:color .18s ease;}
.fcol a:hover{color:var(--gold);}
.footer__bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.7rem;
border-top:1px solid var(--edge);color:var(--tx3);font-family:var(--fm);font-size:.68rem;letter-spacing:.05em;}
.footer__bot a{color:var(--tx3);} .footer__bot a:hover{color:var(--tx2);}
.footer__craft{margin-top:1.2rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.03em;color:var(--tx3);display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;}
.footer__craft .tag{color:var(--gold);font-weight:500;}
/* ── reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.65,.25,1),transform .55s cubic-bezier(.2,.65,.25,1);}
.reveal.in{opacity:1;transform:none;}
.diff-grid>.reveal:nth-child(3n+2),.svc-grid>.reveal:nth-child(3n+2),.pain-grid>.reveal:nth-child(2n),
.steps>.reveal:nth-child(2),.price-grid>.reveal:nth-child(2),.work-grid>.reveal:nth-child(2n){transition-delay:.07s;}
.diff-grid>.reveal:nth-child(3n),.svc-grid>.reveal:nth-child(3n),
.steps>.reveal:nth-child(3),.price-grid>.reveal:nth-child(3){transition-delay:.14s;}
.steps>.reveal:nth-child(4){transition-delay:.21s;}
/* ── responsive ──────────────────────────────────────────── */
@media (max-width:980px){
.diff-grid,.svc-grid,.steps,.price-grid,.work-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:840px){
.nav__links,.nav__actions{display:none;}
.nav__toggle{display:flex;}
.contact-grid{grid-template-columns:1fr;gap:2.4rem;}
}
@media (max-width:640px){
.diff-grid,.svc-grid,.steps,.price-grid,.pain-grid,.whyme__stats,.work-grid{grid-template-columns:1fr;}
.eyebrow{font-size:.64rem;letter-spacing:.16em;}
.hero h1{font-size:2.1rem;}
.pagehero h1{font-size:1.95rem;}
.hero{padding-top:calc(var(--nav-h) + 2.8rem);padding-bottom:3rem;}
.hero .cta{width:100%;}
.hero .cta .btn{flex:1;}
.section{padding:3.4rem 0;}
.section--tight{padding:2.6rem 0;}
.pagehero{padding:calc(var(--nav-h) + 2.6rem) 0 2.2rem;}
.form{padding:1.4rem;}
.compare th,.compare td{padding:.6rem .55rem;font-size:.85rem;}
.cta-band__in{padding:2.4rem 0;}
.footer__cols{gap:1.8rem 2.4rem;}
.diff,.svc,.step,.price-card,.pain,.stat{padding-left:1.4rem;padding-right:1.4rem;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.reveal{opacity:1;transform:none;transition:none;}
*{animation:none !important;}
.diff:hover,.svc:hover,.work-card:hover,.pain:hover,.sys-feat .feat:hover,.post-card:hover{transform:none;}
}
/* ============================================================
Inner pages
============================================================ */
.pagehero{padding:calc(var(--nav-h) + 3.8rem) 0 3.2rem;border-bottom:1px solid var(--edge);position:relative;overflow:hidden;background:var(--void);}
.pagehero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--grid);background-size:72px 72px;background-position:center top;filter:none;animation:none;
-webkit-mask-image:radial-gradient(115% 90% at 50% 0%,#000,transparent 80%);
mask-image:radial-gradient(115% 90% at 50% 0%,#000,transparent 80%);}
.pagehero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;
background:radial-gradient(42% 56% at 82% 20%, rgba(95,213,240,.1), transparent 70%);
background-image:radial-gradient(42% 56% at 82% 20%, rgba(95,213,240,.1), transparent 70%);background-size:auto;}
.pagehero .wrap{position:relative;z-index:1;}
.breadcrumb{font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;color:var(--tx3);margin-bottom:1.3rem;}
/* inline-block + padding so the crumb is a real tap target, not a 14px sliver */
.breadcrumb a{color:var(--tx3);display:inline-block;padding:.35rem .1rem;margin:-.35rem 0;}
.breadcrumb a:hover{color:var(--cyan);}
.pagehero h1{font-family:var(--fh);font-weight:700;font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.04em;line-height:1.06;max-width:20ch;margin-bottom:1.15rem;color:#fff;}
.pagehero .grad{color:var(--gold);}
.pagehero .lead{color:var(--tx2);font-size:clamp(1rem,1.5vw,1.14rem);max-width:60ch;margin-bottom:1.8rem;line-height:1.7;}
.pagehero .cta{display:flex;gap:.75rem;flex-wrap:wrap;}
/* long-form copy */
.prose{max-width:70ch;}
.prose h2{font-family:var(--fh);font-weight:700;color:var(--tx);font-size:clamp(1.4rem,2.4vw,1.85rem);margin:2.8rem 0 .95rem;letter-spacing:-.035em;
padding-top:1.4rem;border-top:1px solid var(--edge);}
.prose h3{font-family:var(--fh);font-weight:600;color:var(--tx);font-size:1.12rem;margin:1.9rem 0 .6rem;letter-spacing:-.028em;}
.prose p{margin-bottom:1.15rem;color:var(--tx2);}
.prose ul{margin:0 0 1.25rem 1.15rem;} .prose li{margin-bottom:.6rem;color:var(--tx2);}
.prose strong{color:var(--tx);font-weight:600;}
/* :not(.btn) — buttons inside prose keep their own colour */
.prose a:not(.btn){color:var(--cyan);border-bottom:1px solid rgba(95,213,240,.3);transition:border-color .18s;}
.prose a:not(.btn):hover{border-bottom-color:var(--cyan);}
.prose blockquote{margin:1.8rem 0;padding:.3rem 0 .3rem 1.4rem;border-left:2px solid var(--gold);color:var(--tx);font-size:1.06rem;line-height:1.65;}
/* CTA band */
.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
background:linear-gradient(180deg,var(--sur1),var(--void));}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(44% 70% at 86% 22%, rgba(240,180,94,.11), transparent 70%);
background-image:radial-gradient(44% 70% at 86% 22%, rgba(240,180,94,.11), transparent 70%);opacity:1;background-size:auto;}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;opacity:1;background-size:auto;
background:linear-gradient(90deg,transparent,rgba(240,180,94,.5) 40%,transparent);
background-image:linear-gradient(90deg,transparent,rgba(240,180,94,.5) 40%,transparent);}
.cta-band .wrap{position:relative;z-index:1;}
.cta-band__in{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:3rem 0;}
.cta-band h2{font-family:var(--fh);font-weight:700;font-size:clamp(1.45rem,2.6vw,2rem);color:#fff;letter-spacing:-.038em;}
.cta-band p{color:var(--tx2);max-width:52ch;margin-top:.6rem;}
/* comparison table — set like a datasheet */
.compare{width:100%;table-layout:fixed;border-collapse:collapse;margin:1.8rem 0;font-size:.93rem;}
.compare th,.compare td{word-break:break-word;}
.compare th,.compare td{text-align:left;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--edge);vertical-align:top;color:var(--tx2);}
.compare thead th{font-family:var(--fm);font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
border-bottom:1px solid var(--edge2);padding-bottom:.75rem;}
.compare tbody th{font-weight:500;color:var(--tx2);}
.compare td.j{color:var(--tx);font-weight:600;}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;}
.card-soft{padding:1.75rem;}
.card-soft h3{font-family:var(--fh);font-weight:600;color:var(--tx);font-size:1.08rem;margin-bottom:.9rem;letter-spacing:-.026em;}
.card-soft ul{list-style:none;display:flex;flex-direction:column;gap:.65rem;}
.card-soft li{display:flex;gap:.6rem;color:var(--tx2);font-size:.92rem;}
.card-soft li svg{width:15px;height:15px;color:var(--cyan);flex:none;margin-top:.22rem;}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:2rem;}}
/* ============================================================
Hero product mock
============================================================ */
.brandlogo{height:38px;width:auto;display:block;}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:3.6rem;align-items:center;}
.hero__visual{position:relative;display:flex;align-items:center;justify-content:center;padding:14px;}
/* HUD brackets #1 — framing the product */
.hero__visual::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
background-image:
linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--cyan),var(--cyan)),
linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--cyan),var(--cyan)),
linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--cyan),var(--cyan)),
linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--cyan),var(--cyan));
background-repeat:no-repeat;
background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;
background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
opacity:.75;}
.hero__glow{position:absolute;inset:-18%;z-index:0;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%, rgba(95,213,240,.22), rgba(95,213,240,.05) 52%, transparent 72%);
filter:blur(30px);}
.browser{position:relative;z-index:1;width:100%;border:1px solid var(--edge2);border-radius:var(--r);overflow:hidden;
background:var(--sur1);transform:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -26px rgba(0,0,0,.95),0 0 44px -18px rgba(95,213,240,.3);}
.browser__bar{display:flex;align-items:center;gap:6px;padding:.6rem .8rem;border-bottom:1px solid var(--edge);background:var(--sur2);}
.browser__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14);}
.browser__url{margin-left:.55rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.02em;color:var(--tx3);}
.browser img{display:block;width:100%;height:auto;}
.browser--app{transform:none;}
/* floating readouts */
.fchip{position:absolute;z-index:4;display:flex;align-items:center;gap:.65rem;border-radius:var(--r);
background:linear-gradient(180deg,var(--sur3),var(--sur1));border:1px solid var(--edge2);
padding:.62rem .85rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 34px -14px rgba(0,0,0,.95);
animation:floaty 6s ease-in-out infinite alternate;}
.fchip b{display:block;font-size:.77rem;font-weight:600;color:var(--tx);line-height:1.28;}
.fchip .sm{display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.04em;color:var(--tx3);margin-top:.12rem;}
.fc-ic{width:28px;height:28px;border-radius:2px;display:grid;place-items:center;font-weight:600;font-size:.8rem;flex:none;font-family:var(--fm);}
.fc-ic.ok{background:rgba(78,216,160,.14);color:var(--ok);border:1px solid rgba(78,216,160,.3);}
.fc-ic.inv{background:rgba(240,180,94,.14);color:var(--gold);border:1px solid rgba(240,180,94,.3);}
.fchip--a{top:5%;left:-30px;}
.fchip--b{bottom:-16px;right:-14px;animation-delay:1.6s;}
@keyframes floaty{from{transform:translateY(-4px);}to{transform:translateY(6px);}}
@media (max-width:1100px){.fchip--a{left:-8px;}.fchip--b{right:-4px;}}
@media (max-width:900px){.fchip{display:none;}}
@media (max-width:900px){
.hero__grid{grid-template-columns:1fr;gap:2.6rem;}
.browser{transform:none;}
.hero__visual{max-width:470px;margin:0 auto;}
}
/* ============================================================
The dashboard mock — dark telemetry
============================================================ */
.sysui{background:var(--sur1);display:flex;flex-direction:column;min-height:384px;color:var(--tx2);}
.sysui__bar{display:flex;align-items:center;gap:.55rem;padding:.5rem .75rem;border-bottom:1px solid var(--edge);background:var(--sur2);}
.sysui__co{display:flex;align-items:center;gap:.45rem;font-family:var(--fh);font-weight:600;font-size:.77rem;color:var(--tx);}
.sysui__co b{width:15px;height:15px;border-radius:2px;background:linear-gradient(150deg,var(--gold3),var(--gold2));display:inline-block;}
.sysui__co .ch{color:var(--tx3);font-size:.62rem;font-family:var(--fm);}
.sysui__search{margin-left:.35rem;flex:1;max-width:165px;font-family:var(--fm);font-size:.61rem;color:var(--tx3);
background:#080A0E;border:1px solid var(--edge);border-radius:2px;padding:.33rem .55rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.sysui__tools{margin-left:auto;display:flex;align-items:center;gap:.55rem;}
.sysui__bell{position:relative;color:var(--tx3);display:inline-flex;}
.sysui__bell svg{width:15px;height:15px;}
.sysui__bell::after{content:"";position:absolute;top:-2px;right:-2px;width:5px;height:5px;border-radius:50%;background:var(--gold);
box-shadow:0 0 7px rgba(240,180,94,.9);}
.sysui__av{width:21px;height:21px;border-radius:50%;background:linear-gradient(150deg,var(--sur4),var(--sur2));border:1px solid var(--edge2);display:inline-block;}
.sysui__body{display:grid;grid-template-columns:150px 1fr;flex:1;min-height:0;}
.sysui__side{border-right:1px solid var(--edge);background:var(--void);padding:.55rem .45rem;display:flex;flex-direction:column;gap:.12rem;}
.sysui__side .cap{font-family:var(--fm);font-weight:400;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);padding:.35rem .55rem .4rem;}
.sysui__side button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.45rem .55rem;border-radius:2px;color:var(--tx3);font-size:.74rem;font-weight:500;transition:background .15s,color .15s;}
.sysui__side button svg{width:14px;height:14px;flex:none;}
.sysui__side button:hover{color:var(--tx);background:rgba(255,255,255,.045);}
.sysui__side button.active{color:var(--cyan);background:rgba(95,213,240,.1);box-shadow:inset 2px 0 0 var(--cyan);}
.sysui__main{padding:.8rem .95rem;display:flex;flex-direction:column;gap:.65rem;min-width:0;overflow:hidden;background:var(--sur1);}
.sysui__head{display:flex;align-items:center;justify-content:space-between;}
.sysui__head .sysui__title{margin:0;font-family:var(--fh);font-weight:600;color:var(--tx);font-size:.89rem;}
.pill{font-family:var(--fm);font-weight:400;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);
border:1px solid rgba(78,216,160,.35);border-radius:2px;padding:.2rem .5rem;display:inline-flex;align-items:center;gap:.35rem;background:rgba(78,216,160,.08);}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(78,216,160,.9);
animation:livepulse 2.4s ease-in-out infinite;}
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.view{display:none;flex-direction:column;gap:.65rem;}
.view.show{display:flex;}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.42rem;}
.kpi{background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge);border-radius:2px;padding:.5rem .55rem;min-width:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.kpi__top{display:flex;align-items:center;justify-content:space-between;gap:.3rem;}
.kpi__l{font-family:var(--fm);font-size:.54rem;letter-spacing:.04em;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.delta{font-family:var(--fm);font-size:.54rem;font-weight:500;flex:none;}
.delta.up{color:var(--ok);} .delta.down{color:var(--bad);}
.kpi__n{font-family:var(--fh);font-weight:700;font-size:1rem;color:var(--tx);line-height:1;margin:.28rem 0 .3rem;font-variant-numeric:tabular-nums;}
.spark{width:100%;height:16px;display:block;}
.spark polyline{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .9s ease;}
.panels{display:grid;grid-template-columns:1.55fr 1fr;gap:.5rem;}
.panel{padding:.6rem .65rem;min-width:0;border-radius:2px;}
.panel__head{display:flex;align-items:center;justify-content:space-between;font-family:var(--fm);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);margin-bottom:.4rem;}
.panel__head .muted{color:var(--tx3);}
.linechart{width:100%;height:104px;display:block;}
.linechart .grid{stroke:rgba(255,255,255,.055);stroke-width:1;}
.linechart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(95,213,240,.55));transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1);}
.linechart .area{opacity:0;transition:opacity .9s ease .25s;}
.linechart.in .area{opacity:1;}
.panel--ring{display:flex;align-items:center;gap:.6rem;}
.ring{position:relative;width:88px;height:88px;flex:none;}
.ring svg{width:88px;height:88px;transform:rotate(-90deg);}
.ring__bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8;}
.ring__fg{fill:none;stroke:var(--cyan);stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(95,213,240,.6));transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1);}
.ring__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring__c b{font-family:var(--fh);font-weight:700;font-size:1rem;color:var(--tx);line-height:1;}
.ring__c span{font-family:var(--fm);font-size:.49rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-top:.2rem;}
.mini{list-style:none;display:flex;flex-direction:column;gap:.32rem;font-size:.63rem;color:var(--tx2);}
.mini li{display:flex;align-items:center;gap:.4rem;}
.mini b{margin-left:auto;color:var(--tx);font-family:var(--fm);font-size:.6rem;}
.dotc{width:6px;height:6px;border-radius:1px;flex:none;}
.dotc.ok{background:var(--ok);} .dotc.warn{background:var(--warn);} .dotc.bad{background:var(--bad);}
.gtbl{width:100%;border-collapse:collapse;font-size:.66rem;}
.gtbl th{text-align:left;font-family:var(--fm);font-size:.49rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);padding:.18rem .4rem .35rem;border-bottom:1px solid var(--edge2);font-weight:400;}
.gtbl td{padding:.34rem .4rem;border-bottom:1px solid var(--edge);color:var(--tx2);}
.gtbl tr:last-child td{border-bottom:none;}
.gtbl .sc{display:flex;align-items:center;gap:.4rem;font-family:var(--fm);}
.scorebar{width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;flex:none;}
.scorebar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 6px rgba(95,213,240,.7);width:0;transition:width .85s ease;}
.rows{display:flex;flex-direction:column;gap:.3rem;}
.srow{display:flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,var(--sur2),var(--sur1));
border:1px solid var(--edge);border-radius:2px;padding:.45rem .55rem;font-size:.68rem;}
.srow .nm{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.42rem;flex:1;min-width:0;}
.bar-prog{height:4px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;flex:1;max-width:120px;}
.bar-prog i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 6px rgba(95,213,240,.7);width:0;transition:width .85s ease;}
.badge{font-family:var(--fm);font-weight:400;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;padding:.16rem .45rem;border-radius:2px;flex:none;background:rgba(255,255,255,.07);color:var(--tx2);}
.badge.ok{color:var(--ok);background:rgba(78,216,160,.13);}
.badge.warn{color:var(--warn);background:rgba(240,180,94,.14);}
.stat-dot{width:6px;height:6px;border-radius:50%;flex:none;}
.stat-dot.ok{background:var(--ok);box-shadow:0 0 6px rgba(78,216,160,.8);}
.stat-dot.idle{background:var(--tx3);}
.stat-dot.warn{background:var(--warn);box-shadow:0 0 6px rgba(240,180,94,.8);}
.statline{display:flex;gap:1.1rem;font-family:var(--fm);font-size:.61rem;letter-spacing:.04em;color:var(--tx3);align-items:baseline;}
.statline b{color:var(--tx);font-family:var(--fh);font-size:.9rem;margin-right:.25rem;}
.fleet-util{display:flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.61rem;color:var(--tx3);margin-top:.05rem;}
.fleet-util b{color:var(--tx);font-weight:500;}
/* Phones: the demo is the proof artifact, so it has to stay legible. KPIs go
two-up, each label takes its own line so nothing ellipsises, and every mono
readout comes up off ~8px. Scoped to #sysui so it beats the base rules. */
@media (max-width:640px){
#sysui .kpis{grid-template-columns:repeat(2,1fr);gap:.5rem;}
#sysui .kpi__top{flex-wrap:wrap;}
#sysui .kpi__l{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip;
font-size:.66rem;line-height:1.3;}
#sysui .delta{font-size:.66rem;}
#sysui .kpi__n{font-size:1.15rem;}
#sysui .cap,#sysui .pill,#sysui .sysui__search,#sysui .sysui__co .ch{font-size:.66rem;}
#sysui .gtbl th,#sysui .gtbl td,#sysui .badge{font-size:.66rem;}
#sysui .panel__head,#sysui .panel__head span,#sysui .muted,
#sysui .mini,#sysui .mini li,#sysui .mini b,
#sysui .statline,#sysui .statline b,#sysui .fleet-util,#sysui .fleet-util b{font-size:.66rem;}
#sysui .ring__c b{font-size:1.05rem;}
#sysui .ring__c span{font-size:.62rem;}
}
@media (max-width:520px){
.sysui__body{grid-template-columns:94px 1fr;}
.sysui__search{display:none;}
.kpis{grid-template-columns:repeat(2,1fr);}
.panels{grid-template-columns:1fr;}
.panel--ring{justify-content:center;}
}
/* ============================================================
WhatsApp launcher
============================================================ */
/* The floating launcher. Scoped to the widget's ID, NOT the bare .wa class:
the contact block's WhatsApp link is and a bare .wa
rule made it inherit position:fixed, so it escaped the contact list and
pinned itself over the launcher the moment .reveal.in dropped the parent
transform that was accidentally containing it. */
#waWidget{position:fixed;right:22px;bottom:22px;z-index:200;font-family:var(--fb);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
#waWidget.wa--hidden{opacity:0;transform:translateY(135%);pointer-events:none;}
/* Guard: inline contact lines are never taken out of flow, whatever else matches. */
.lines .cline{position:static;}
.wa__btn{position:relative;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;
border:1px solid var(--edge2);cursor:pointer;background:linear-gradient(180deg,var(--sur3),var(--sur1));
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px -12px rgba(0,0,0,.95),0 0 26px -10px rgba(74,222,128,.5);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.wa__btn:hover{transform:translateY(-3px);border-color:rgba(74,222,128,.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -12px rgba(0,0,0,.95),0 0 34px -8px rgba(74,222,128,.75);}
.wa__btn svg{position:absolute;width:27px;height:27px;transition:opacity .2s ease,transform .2s ease;}
.wa__btn .wa__icon{color:var(--wa);}
.wa__btn .wa__min{color:var(--tx2);opacity:0;transform:scale(.55);}
.wa--open .wa__btn .wa__icon{opacity:0;transform:scale(.55);}
.wa--open .wa__btn .wa__min{opacity:1;transform:scale(1);}
.wa__ping{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(74,222,128,.5);animation:waping 2.8s ease-out infinite;pointer-events:none;}
.wa--open .wa__ping{display:none;}
@keyframes waping{0%{transform:scale(1);opacity:.6;}70%{transform:scale(1.45);opacity:0;}100%{opacity:0;}}
.wa__card{position:absolute;right:0;bottom:calc(100% + 14px);width:min(300px,calc(100vw - 36px));
background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge2);border-radius:var(--r);overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -18px rgba(0,0,0,.95);
transform-origin:bottom right;opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;
transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1);}
.wa--open .wa__card{opacity:1;transform:none;pointer-events:auto;}
.wa__card::before{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,var(--wa),transparent);}
.wa__head{display:flex;align-items:center;gap:.65rem;padding:.95rem .95rem .45rem;}
.wa__ava{flex:none;width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
font-family:var(--fm);font-weight:500;font-size:.74rem;color:var(--gold);letter-spacing:.02em;
background:linear-gradient(155deg,var(--sur4),var(--sur1));border:1px solid rgba(240,180,94,.4);}
.wa__who{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.wa__who strong{font-family:var(--fh);font-weight:600;font-size:.88rem;color:var(--tx);}
.wa__status{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--tx3);}
.wa__status i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--wa);box-shadow:0 0 7px rgba(74,222,128,.9);
animation:livepulse 2.4s ease-in-out infinite;}
.wa__x{margin-left:auto;flex:none;width:26px;height:26px;border-radius:2px;color:var(--tx3);font-size:1.15rem;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.wa__x:hover{background:rgba(255,255,255,.07);color:var(--tx);}
.wa__sig{padding:0 .95rem;font-family:var(--fm);font-size:.64rem;letter-spacing:.03em;color:var(--tx3);}
.wa__body{padding:.6rem .95rem .15rem;}
.wa__bubble{position:relative;background:#080A0E;border:1px solid var(--edge);color:var(--tx2);
font-size:.85rem;line-height:1.55;padding:.75rem .85rem;border-radius:var(--r) var(--r) var(--r) 2px;
box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.wa__cta{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.9rem .95rem .6rem;padding:.8rem 1rem;
border-radius:var(--r);font-family:var(--fb);font-weight:600;font-size:.88rem;color:#06210F;
background:linear-gradient(180deg,#6EE79C,#3FCB78);border:1px solid rgba(74,222,128,.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -10px rgba(74,222,128,.6);
transition:box-shadow .18s ease,background .18s ease;}
.wa__cta svg{width:17px;height:17px;}
.wa__cta:hover{transform:none;background:linear-gradient(180deg,#84F0AF,#4FD886);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -8px rgba(74,222,128,.8);}
.wa__alt{display:block;text-align:center;padding-bottom:.95rem;font-size:.78rem;color:var(--tx3);transition:color .15s;}
.wa__alt:hover{color:var(--cyan);}
@media (max-width:560px){
.wa{right:16px;bottom:16px;}
.wa__btn{width:54px;height:54px;}
.wa__btn svg{width:25px;height:25px;}
}
@media (prefers-reduced-motion:reduce){
.wa__ping,.wa__status i,.pill::before{animation:none;}
/* Must match #waWidget: the launcher is scoped by id (see the note at
its rule), so a .wa selector here loses on specificity and the
135% slide kept running under reduced motion. */
#waWidget{transition:opacity .2s ease;}
#waWidget.wa--hidden{transform:none;}
.wa__card{transition:opacity .2s ease;}
.wa__card,.wa--open .wa__card{transform:none;}
.wa__btn,.wa__cta,.wa__btn svg{transition:none;}
.wa__btn:hover{transform:none;}
.fchip{animation:none;}
}
/* ── budget slider ───────────────────────────────────────── */
.budget{display:flex;flex-direction:column;gap:.85rem;}
.budget__modes{display:inline-flex;align-self:flex-start;background:var(--void);border:1px solid var(--edge2);border-radius:var(--r);padding:3px;gap:3px;
box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.bmode{padding:.5rem .95rem;border-radius:2px;font-family:var(--fb);font-weight:600;font-size:.85rem;color:var(--tx3);transition:background .15s,color .15s;}
.bmode:hover{color:var(--tx2);}
.bmode.active{background:linear-gradient(180deg,var(--sur3),var(--sur2));color:var(--cyan);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.budget__val{display:flex;align-items:baseline;gap:.1rem;}
.budget__val b{font-family:var(--fh);font-weight:700;font-size:1.65rem;line-height:1;color:var(--gold);letter-spacing:-.035em;font-variant-numeric:tabular-nums;
text-shadow:0 0 24px rgba(240,180,94,.35);}
.budget__val .bu{font-family:var(--fm);color:var(--tx3);font-size:.78rem;margin-left:.5rem;letter-spacing:.06em;}
.budget__range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border:0;padding:0;border-radius:2px;
background:rgba(255,255,255,.1);outline:none;cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.budget__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
background:linear-gradient(180deg,var(--gold3),var(--gold2));border:1px solid var(--gold);
box-shadow:0 0 0 4px rgba(240,180,94,.14),0 2px 8px rgba(0,0,0,.7);cursor:grab;}
.budget__range::-webkit-slider-thumb:active{cursor:grabbing;}
.budget__range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold);border:1px solid var(--gold);
box-shadow:0 0 0 4px rgba(240,180,94,.14);cursor:grab;}
.budget__range:disabled{opacity:.4;cursor:not-allowed;}
.budget__ends{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.7rem;letter-spacing:.06em;color:var(--tx3);}
/* The label IS the target here (it wraps the input), so it carries the
24px minimum from WCAG 2.5.8 rather than the 15px box the browser draws. */
.budget__ns{display:flex;align-items:center;gap:.55rem;font-size:.87rem;color:var(--tx2);cursor:pointer;margin-top:.1rem;min-height:24px;}
.budget__ns input{width:20px;height:20px;flex:none;padding:0;border:0;background:none;accent-color:var(--gold);cursor:pointer;border-radius:0;}
.budget__note{font-size:.78rem;color:var(--tx3);margin-top:-.15rem;display:flex;align-items:center;gap:.35rem;}
.opt{color:var(--tx3);font-weight:400;font-size:.85em;}
/* "Don't see your system?" */
.svc-more{margin-top:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px dashed var(--edge2);border-radius:var(--r);padding:1.5rem 1.7rem;}
.svc-more .t{display:flex;align-items:center;gap:1.05rem;min-width:0;}
.svc-more .plus{width:40px;height:40px;border-radius:var(--r);flex:none;display:flex;align-items:center;justify-content:center;
background:linear-gradient(160deg,rgba(240,180,94,.16),rgba(240,180,94,.03));border:1px solid rgba(240,180,94,.32);color:var(--gold);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.svc-more .plus svg{width:19px;height:19px;}
.svc-more h3{font-family:var(--fh);font-weight:600;color:var(--tx);font-size:1.05rem;margin-bottom:.25rem;letter-spacing:-.026em;}
.svc-more p{color:var(--tx2);font-size:.92rem;max-width:64ch;}
.svc-more .btn{flex:none;}
@media (max-width:640px){.svc-more{justify-content:flex-start;}.svc-more .btn{width:100%;justify-content:center;}}
/* ── Blog ────────────────────────────────────────────────── */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;}
.post-card{display:flex;flex-direction:column;padding:2rem 1.9rem 2.1rem;text-decoration:none;position:relative;overflow:hidden;}
.pmeta{font-family:var(--fm);font-weight:400;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:1rem;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;}
.pmeta .dot{opacity:.5;}
.post-card h3{font-family:var(--fh);font-weight:700;color:var(--tx);font-size:1.22rem;line-height:1.28;margin-bottom:.65rem;letter-spacing:-.035em;}
.post-card p{color:var(--tx2);margin-bottom:1.25rem;flex:1;font-size:.94rem;}
.post-card .more{font-family:var(--fb);font-weight:600;font-size:.85rem;color:var(--gold);}
.post-card:hover .more{color:var(--gold3);}
.post-meta{display:flex;gap:.7rem .9rem;flex-wrap:wrap;align-items:center;font-family:var(--fm);font-weight:400;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin:1.3rem 0 .2rem;}
.post-meta .dot{opacity:.5;}
@media (max-width:760px){.post-grid{grid-template-columns:1fr;}}
/* ── System landing pages ────────────────────────────────── */
.sys-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;}
.sys-feat .feat{padding:1.9rem 1.8rem 2rem;}
.sys-feat .feat .ic{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:1.05rem;
background:linear-gradient(160deg,rgba(95,213,240,.16),rgba(95,213,240,.03));
border:1px solid rgba(95,213,240,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.sys-feat .feat .ic svg{width:19px;height:19px;color:var(--cyan);}
.sys-feat .feat h3{font-family:var(--fh);font-weight:600;color:var(--tx);font-size:1.03rem;margin-bottom:.5rem;letter-spacing:-.026em;}
.sys-feat .feat p{color:var(--tx2);font-size:.93rem;line-height:1.65;}
.painrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem;margin-top:1.6rem;}
.painrow .pain{display:flex;gap:.75rem;align-items:flex-start;color:var(--tx2);border:0;padding:0;background:none;box-shadow:none;}
.painrow .pain:hover{transform:none;box-shadow:none;border:0;}
.painrow .pain svg{width:19px;height:19px;color:var(--bad);flex:none;margin-top:.22rem;}
@media (max-width:860px){.sys-feat{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.sys-feat,.painrow{grid-template-columns:1fr;}}
/* ── Audit & Inspection demo ─────────────────────────────── */
.auditdemo{display:grid;grid-template-columns:1.3fr .9fr;gap:1.4rem;align-items:start;}
.adcard{overflow:hidden;}
.adcard__head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--edge);background:var(--sur2);}
.adcard__head h3{font-family:var(--fh);font-weight:600;color:var(--tx);font-size:.98rem;letter-spacing:-.026em;}
.adcard__head .pill{font-family:var(--fm);font-weight:400;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
border:1px solid rgba(95,213,240,.3);border-radius:2px;padding:.2rem .55rem;background:rgba(95,213,240,.07);}
.adcard__head .pill::before{background:var(--cyan);box-shadow:0 0 6px rgba(95,213,240,.9);}
.adsec{padding:.85rem 1.1rem;border-bottom:1px solid var(--edge);}
.adsec:last-child{border-bottom:0;}
.adsec__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
.adsec__top b{font-size:.9rem;color:var(--tx);font-weight:600;}
.adsec__top .wt{font-family:var(--fm);font-size:.63rem;letter-spacing:.06em;color:var(--tx3);}
.aditem{display:flex;align-items:center;gap:.7rem;padding:.42rem 0;color:var(--tx2);font-size:.91rem;cursor:pointer;user-select:none;}
.aditem input{position:absolute;opacity:0;width:0;height:0;}
.aditem .box{width:19px;height:19px;border-radius:2px;border:1px solid var(--edge2);flex:none;display:grid;place-items:center;
background:#080A0E;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:background .15s,border-color .15s,box-shadow .15s;}
.aditem .box svg{width:12px;height:12px;color:#06210F;opacity:0;transition:opacity .12s;}
.aditem input:checked + .box{background:linear-gradient(180deg,#6EE79C,#3FCB78);border-color:rgba(74,222,128,.7);
box-shadow:0 0 12px -3px rgba(74,222,128,.7);}
.aditem input:checked + .box svg{opacity:1;}
.aditem input:focus-visible + .box{outline:2px solid var(--cyan);outline-offset:2px;}
.adscore{position:sticky;top:88px;background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge2);border-radius:var(--r);
padding:1.5rem 1.3rem;text-align:center;box-shadow:var(--bevel2),var(--shadow-md);}
.adscore .ringwrap{position:relative;width:146px;height:146px;margin:.2rem auto .85rem;}
.adscore svg{width:146px;height:146px;transform:rotate(-90deg);}
.adscore .bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:10;}
.adscore .fg{fill:none;stroke:var(--cyan);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(95,213,240,.6));transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1);}
.adscore .ringnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.adscore .ringnum b{font-family:var(--fh);font-weight:700;font-size:2rem;color:var(--tx);line-height:1;font-variant-numeric:tabular-nums;}
.adscore .ringnum span{font-family:var(--fm);font-weight:400;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin-top:.3rem;}
.adbadge{display:inline-block;font-family:var(--fm);font-weight:400;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .8rem;border-radius:2px;margin-bottom:1rem;}
.adbadge.pass{background:rgba(78,216,160,.12);color:var(--ok);border:1px solid rgba(78,216,160,.35);}
.adbadge.fail{background:rgba(255,122,107,.1);color:var(--bad);border:1px solid rgba(255,122,107,.35);}
.adbreak{text-align:left;margin:.4rem 0 1.1rem;}
.adbreak .br{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--tx2);padding:.3rem 0 0;}
.adbreak .br .bn{font-family:var(--fm);font-size:.68rem;color:var(--tx3);}
.adbar{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:.42rem;}
.adbar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 6px rgba(95,213,240,.7);width:0;transition:width .5s ease;}
.adreset{margin-top:.5rem;width:100%;}
.adnote{font-family:var(--fm);font-size:.66rem;line-height:1.65;color:var(--tx3);margin-top:1rem;}
@media (max-width:780px){.auditdemo{grid-template-columns:1fr;}.adscore{position:static;}}
/* ── Lead magnet ─────────────────────────────────────────── */
.leadmag{border:1px solid var(--edge2);border-radius:var(--r);padding:2.2rem 2.2rem;position:relative;overflow:hidden;
background:
radial-gradient(70% 90% at 92% 4%, rgba(240,180,94,.1), transparent 62%),
linear-gradient(180deg,var(--sur2),var(--sur1));
box-shadow:var(--bevel2),var(--shadow-md);}
.leadmag::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg,transparent,rgba(240,180,94,.6) 35%,transparent);}
.leadmag__in{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem 3rem;align-items:center;}
.leadmag .eyebrow{margin-bottom:.8rem;}
.leadmag h2{font-family:var(--fh);font-weight:700;font-size:clamp(1.3rem,2.3vw,1.72rem);color:var(--tx);letter-spacing:-.038em;line-height:1.18;}
.leadmag p{color:var(--tx2);margin-top:.65rem;}
.leadmag ul{margin:.85rem 0 0 1.1rem;color:var(--tx2);font-size:.91rem;}
.leadmag li{margin-bottom:.35rem;}
.lmform{display:flex;flex-direction:column;gap:.65rem;}
/* A visible label, not just a placeholder: the placeholder vanishes the moment
someone types, and this form is often the first thing a hesitant visitor
fills in. Matches the quote form's label treatment. */
.lmlabel{display:block;font-family:var(--fm);font-weight:400;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin:0 0 -.15rem;}
.lmform input{width:100%;padding:.9rem 1rem;border-radius:2px;border:1px solid var(--edge2);background:#080A0E;color:var(--tx);font:inherit;font-size:1rem;
box-shadow:inset 0 1px 3px rgba(0,0,0,.65);}
.lmform input::placeholder{color:var(--tx3);}
.lmform input:focus{outline:none;border-color:rgba(95,213,240,.7);box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(95,213,240,.13);}
.lmform .btn{width:100%;justify-content:center;}
.lmnote{font-family:var(--fm);font-size:.66rem;letter-spacing:.03em;color:var(--tx3);}
.lmdone{text-align:center;padding:1rem;}
.lmdone .tick{width:46px;height:46px;border-radius:50%;margin:0 auto .85rem;display:grid;place-items:center;font-size:22px;color:#0A0B0E;
background:linear-gradient(180deg,var(--gold3),var(--gold2));box-shadow:0 0 26px -6px rgba(240,180,94,.7);}
/* Who I build for */
.who-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem 4rem;align-items:center;}
.who-grid .shead{margin-bottom:0;grid-template-columns:1fr;}
.who-grid .shead p{grid-column:1;grid-row:auto;margin-top:.6rem;}
.who-grid .chips{margin-bottom:0;gap:.55rem;}
.who-grid .chip{font-size:.87rem;padding:.6rem 1rem;}
@media (max-width:900px){.who-grid{grid-template-columns:1fr;gap:1.8rem;}}
/* ── Promo / magnet bands ────────────────────────────────── */
.promo-card{position:relative;overflow:hidden;margin-top:1.8rem;border:1px solid rgba(240,180,94,.3);border-radius:var(--r);
padding:2.4rem 2.4rem;color:var(--tx2);
background:
radial-gradient(80% 90% at 6% 0%, rgba(240,180,94,.12), transparent 60%),
linear-gradient(180deg,var(--sur3),var(--sur1));
box-shadow:var(--bevel2),0 0 0 1px rgba(240,180,94,.06),var(--shadow-md);}
.promo-card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;opacity:1;background-size:auto;
background:linear-gradient(90deg,transparent,rgba(240,180,94,.65) 30%,transparent);
background-image:linear-gradient(90deg,transparent,rgba(240,180,94,.65) 30%,transparent);}
.promo-card>*{position:relative;z-index:1;}
.promo-card .eyebrow{margin-bottom:.85rem;}
/* h2 where the promo stands alone (pricing page), h3 where it sits under one. */
.promo-card h2,.promo-card h3{color:#fff;font-size:clamp(1.3rem,2.3vw,1.65rem);margin:0 0 .75rem;letter-spacing:-.038em;font-weight:700;line-height:1.2;}
.promo-card p{color:var(--tx2);max-width:62ch;line-height:1.7;margin:0 0 1.5rem;}
.magnet-card{position:relative;overflow:hidden;border:1px solid var(--edge2);border-radius:var(--r);padding:2.4rem 2.4rem;
background:
radial-gradient(70% 90% at 96% 0%, rgba(95,213,240,.09), transparent 62%),
linear-gradient(180deg,var(--sur2),var(--sur1));
box-shadow:var(--bevel2),var(--shadow-md);}
.magnet-card .eyebrow{margin-bottom:.85rem;}
.magnet-card h2{font-size:clamp(1.4rem,2.5vw,1.85rem);margin:0 0 .75rem;letter-spacing:-.04em;font-weight:700;}
.magnet-card>p{color:var(--tx2);max-width:64ch;line-height:1.7;margin:0 0 1.6rem;}
.magnet-card .mrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;max-width:540px;}
.magnet-card .mrow input{flex:1 1 240px;padding:.92rem 1.1rem;border-radius:2px;border:1px solid var(--edge2);background:#080A0E;color:var(--tx);font-size:1rem;font-family:inherit;
box-shadow:inset 0 1px 3px rgba(0,0,0,.65);transition:border-color .18s,box-shadow .18s;}
.magnet-card .mrow input::placeholder{color:var(--tx3);}
.magnet-card .mrow input:focus{outline:none;border-color:rgba(95,213,240,.7);box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(95,213,240,.13);}
.magnet-card .formnote{margin:.95rem 0 0;font-family:var(--fb);color:var(--tx2);font-size:.82rem;letter-spacing:0;line-height:1.5;}
.mrow__label{flex:1 0 100%;font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:.15rem;}
/* what happens to a details we just asked for — stated where it is asked */
.privnote{margin:.6rem 0 0;color:var(--tx3);font-size:.82rem;line-height:1.5;}
.privnote a{color:var(--cyan);border-bottom:1px solid rgba(95,213,240,.35);}
.privnote a:hover{border-bottom-color:var(--cyan);}
.form .privnote{text-align:center;}
@media (max-width:760px){.leadmag__in{grid-template-columns:1fr;}}
/* ============================================================
DEMO KIT — shared chrome for the try-it-yourself widgets
------------------------------------------------------------
Every system page carries a working slice of that system.
The two originals (audit, crm) each shipped their own style
block; that does not scale to eleven. This is the shared
vocabulary they all draw on, so a new demo is markup plus a
few lines of logic, not another 60-line stylesheet.
Scope everything under .jxd so a demo can never leak styles
into the page around it.
============================================================ */
.jxd{--dz:1;display:grid;grid-template-columns:1.35fr .85fr;gap:1.15rem;align-items:start;
font-family:var(--fb);color:var(--tx2);font-size:.9rem;}
.jxd *{box-sizing:border-box;}
@media (max-width:820px){.jxd{grid-template-columns:1fr;}}
/* panel + toolbar */
.jxd__p{background:linear-gradient(180deg,var(--sur2),var(--sur1));border:1px solid var(--edge);border-radius:var(--r);
box-shadow:var(--bevel),var(--shadow-sm);overflow:hidden;}
.jxd__bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
padding:.75rem 1rem;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,var(--sur3),var(--sur2));}
.jxd__ttl{font-family:var(--fh);font-weight:600;font-size:.9rem;color:var(--tx);letter-spacing:-.02em;}
.jxd__sub{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;color:var(--tx3);}
/* overflow-x guards the line-item tables: on a narrow phone they are wider
than the panel, and without this they clip instead of scrolling. */
.jxd__body{padding:.9rem 1rem;overflow-x:auto;}
.jxd__side{position:sticky;top:88px;}
@media (max-width:820px){.jxd__side{position:static;}}
.jxd__sec{padding:.85rem 1rem;border-bottom:1px solid var(--edge);}
.jxd__sec:last-child{border-bottom:0;}
/* live chip */
.jxd__live{font-family:var(--fm);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);
border:1px solid rgba(78,216,160,.35);border-radius:2px;padding:.2rem .5rem;background:rgba(78,216,160,.08);
display:inline-flex;align-items:center;gap:.35rem;}
.jxd__live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);
box-shadow:0 0 6px rgba(78,216,160,.9);animation:livepulse 2.4s ease-in-out infinite;}
/* rows */
.jxd__row{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--edge);}
.jxd__row:last-child{border-bottom:0;}
.jxd__grow{flex:1;min-width:0;}
.jxd__nm{color:var(--tx);font-weight:600;font-size:.88rem;line-height:1.3;}
.jxd__mt{font-family:var(--fm);font-size:.64rem;letter-spacing:.04em;color:var(--tx3);margin-top:.15rem;}
/* controls */
.jxd__btn{font-family:var(--fb);font-weight:600;font-size:.82rem;border-radius:2px;padding:.5rem .9rem;cursor:pointer;
background:linear-gradient(180deg,var(--sur3),var(--sur2));border:1px solid var(--edge2);color:var(--tx);
box-shadow:var(--bevel);transition:border-color .16s,box-shadow .16s,color .16s;}
.jxd__btn:hover{border-color:rgba(95,213,240,.5);color:#fff;box-shadow:var(--bevel2),0 0 16px -6px rgba(95,213,240,.5);}
.jxd__btn--go{color:#0A0B0E;font-weight:700;background:linear-gradient(180deg,var(--gold3),var(--gold2));border-color:var(--gold);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 20px -10px rgba(240,180,94,.55);}
.jxd__btn--go:hover{background:linear-gradient(180deg,#FFDDA4,#F0B45E);color:#0A0B0E;}
.jxd__btn--sm{padding:.3rem .6rem;font-size:.74rem;}
.jxd__btn:disabled{opacity:.35;cursor:not-allowed;}
.jxd__btn:disabled:hover{border-color:var(--edge2);box-shadow:var(--bevel);color:var(--tx);}
.jxd__step{width:30px;height:30px;padding:0;font-family:var(--fm);font-size:.95rem;line-height:1;flex:none;}
/* stepper / segmented */
.jxd__seg{display:inline-flex;border:1px solid var(--edge2);border-radius:2px;overflow:hidden;
background:var(--void);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.jxd__seg button{font-family:var(--fb);font-weight:600;font-size:.76rem;color:var(--tx3);padding:.38rem .7rem;cursor:pointer;
border:0;border-left:1px solid var(--edge);background:transparent;transition:background .14s,color .14s;}
.jxd__seg button:first-child{border-left:0;}
.jxd__seg button:hover{color:var(--tx);}
.jxd__seg button[aria-pressed="true"]{color:var(--cyan);background:rgba(95,213,240,.12);}
.jxd__seg button[aria-pressed="true"][data-v="fail"],
.jxd__seg button[aria-pressed="true"][data-tone="bad"]{color:var(--bad);background:rgba(255,122,107,.12);}
.jxd__seg button[aria-pressed="true"][data-tone="ok"]{color:var(--ok);background:rgba(78,216,160,.12);}
/* fields */
.jxd__f{display:block;margin-bottom:.75rem;}
.jxd__f label{display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin-bottom:.35rem;}
.jxd__in{width:100%;background:#080A0E;border:1px solid var(--edge2);border-radius:2px;color:var(--tx);
font:inherit;font-size:.88rem;padding:.55rem .65rem;box-shadow:inset 0 1px 3px rgba(0,0,0,.65);
transition:border-color .16s,box-shadow .16s;}
.jxd__in::placeholder{color:var(--tx3);}
.jxd__in:focus{outline:none;border-color:rgba(95,213,240,.7);box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(95,213,240,.13);}
.jxd__in--bad{border-color:rgba(255,122,107,.75);box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 3px rgba(255,122,107,.13);}
.jxd__err{display:block;font-family:var(--fm);font-size:.62rem;color:var(--bad);margin-top:.3rem;min-height:.9rem;}
select.jxd__in{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.9rem;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .6rem center;}
select.jxd__in option{background:#0C0E13;color:var(--tx);}
/* figures */
.jxd__big{font-family:var(--fh);font-weight:700;font-size:1.9rem;line-height:1;letter-spacing:-.04em;color:var(--tx);
font-variant-numeric:tabular-nums;}
.jxd__big--gold{color:var(--gold);text-shadow:0 0 26px rgba(240,180,94,.35);}
.jxd__big--cyan{color:var(--cyan);text-shadow:0 0 26px rgba(95,213,240,.35);}
.jxd__num{font-family:var(--fm);font-variant-numeric:tabular-nums;color:var(--tx);}
.jxd__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem;}
.jxd__tile{background:linear-gradient(180deg,var(--sur3),var(--sur2));border:1px solid var(--edge);border-radius:2px;
padding:.6rem .7rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);}
.jxd__tile .l{font-family:var(--fm);font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);}
.jxd__tile .v{font-family:var(--fh);font-weight:700;font-size:1.15rem;color:var(--tx);margin-top:.25rem;font-variant-numeric:tabular-nums;}
/* bars */
.jxd__bar2{height:4px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:.4rem;}
.jxd__bar2 i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 6px rgba(95,213,240,.7);
transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s;}
.jxd__bar2 i.warn{background:var(--warn);box-shadow:0 0 6px rgba(240,180,94,.7);}
.jxd__bar2 i.bad{background:var(--bad);box-shadow:0 0 6px rgba(255,122,107,.7);}
.jxd__bar2 i.ok{background:var(--ok);box-shadow:0 0 6px rgba(78,216,160,.7);}
/* badges */
.jxd__b{font-family:var(--fm);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .45rem;
border-radius:2px;flex:none;background:rgba(255,255,255,.07);color:var(--tx2);white-space:nowrap;}
.jxd__b--ok{color:var(--ok);background:rgba(78,216,160,.13);}
.jxd__b--warn{color:var(--warn);background:rgba(240,180,94,.14);}
.jxd__b--bad{color:var(--bad);background:rgba(255,122,107,.13);}
.jxd__b--cy{color:var(--cyan);background:rgba(95,213,240,.12);}
/* table */
.jxd__t{width:100%;border-collapse:collapse;font-size:.8rem;}
.jxd__t th{text-align:left;font-family:var(--fm);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);
font-weight:400;padding:.3rem .45rem .45rem;border-bottom:1px solid var(--edge2);}
.jxd__t td{padding:.45rem;border-bottom:1px solid var(--edge);color:var(--tx2);}
.jxd__t tr:last-child td{border-bottom:0;}
.jxd__t .r{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums;color:var(--tx);}
/* audit log — the "prove it" panel most of these demos end on */
.jxd__log{list-style:none;margin:0;padding:0;max-height:190px;overflow:auto;}
.jxd__log li{font-family:var(--fm);font-size:.66rem;line-height:1.5;color:var(--tx3);padding:.35rem 0;
border-bottom:1px solid var(--edge);display:flex;gap:.5rem;}
.jxd__log li:last-child{border-bottom:0;}
.jxd__log .tm{color:var(--cyan);flex:none;}
.jxd__log .em{color:var(--tx2);}
.jxd__empty{font-family:var(--fm);font-size:.66rem;color:var(--tx3);padding:.5rem 0;font-style:italic;}
/* note under every demo */
.jxd__note{font-family:var(--fm);font-size:.66rem;line-height:1.6;color:var(--tx3);margin-top:.9rem;}
.jxd__note b{color:var(--tx2);font-weight:500;}
@media (max-width:520px){
.jxd__t{font-size:.75rem;}
.jxd__t th,.jxd__t td{padding:.35rem .3rem;}
.jxd__row{flex-wrap:wrap;}
.jxd__big{font-size:1.65rem;}
}
/* flash when a value recalculates, so the cause and effect is visible */
@keyframes jxdPulse{0%{background:rgba(95,213,240,.16);}100%{background:transparent;}}
.jxd__flash{animation:jxdPulse .7s ease-out;}
@media (prefers-reduced-motion:reduce){.jxd__flash{animation:none;} .jxd__live::before{animation:none;}}
/* ============================================================
INDUSTRY PICKER — "let the system adapt to you", made literal
------------------------------------------------------------
Deliberately NOT a form control sitting in a box. It is set
as part of the hero sentence, so choosing an industry reads
as a line of copy rather than a filter widget. The select is
a real native