/* ===== Original inline style block 1 ===== */
:root{
/* --teal-600 is the exact brand value requested (#0095AA); it carries graphics,
borders and large type, where 3:1 applies — white text on it alone is only
3.57:1, short of the 4.5:1 that small text and filled buttons need. --teal-700
is the same hue and full saturation at 28% lightness instead of 33%, the
lightest step of THIS hue that clears 4.5:1 both ways: as a filled button under
a white label (4.85:1), and as small text on the page's own neutral. */
--teal-900:#062A31; --teal-800:#0A4650; --teal-700:#007D8F; --teal-600:#0095AA;
--teal-500:#12A2B6; --teal-400:#1CB4C9; --teal-100:#D5EDF1; --teal-50:#EFF8F9;
--ink-900:#0A2124; --ink-600:#46595C; --ink-400:#7B8C8E;
/* neutral with a trace of the brand teal: warm paper read as yellow next to
amber, which is reserved for time */
--paper:#F5F7F7; --white:#FFFFFF; --border:#E3E8E7;
--amber-600:#A86A00; --amber-500:#E89F00; --amber-100:#FDF0CC;
--on-dark:#E9F4F5; --on-dark-muted:#9CBEC3; --on-dark-border:rgba(255,255,255,.16);
--r-ctl:8px; --r-card:16px; --r-pill:999px;
--pad-tight:88px; --pad-base:128px; --pad-anchor:152px;
--container:1200px;
/* Google Sans Flex replaces IBM Plex Sans. It is a real variable font on Google
Fonts (distinct from the 'Google Plex' mix-up earlier), requested at the same
four weights already used on the page — 400/500/600 explicit, 700 for the
browser's default bold on h1/h2/b/strong. IBM Plex Mono is untouched: swapping
it would break every ch-based reservation and tabular alignment on the page. */
--display:'Google Sans Flex',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;font-family:var(--display);font-size:17px;line-height:1.6;color:var(--ink-600);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink-900);font-weight:600;margin:0}
h1{font-size:clamp(40px,6.2vw,74px);line-height:1.01;letter-spacing:-.042em}
h2{font-size:clamp(28px,3.4vw,38px);line-height:1.14;letter-spacing:-.024em}
.faq h2{max-width:840px;margin-left:auto;margin-right:auto}
h3{font-size:18px;line-height:1.35;letter-spacing:-.01em;font-weight:500}
p{margin:0}
a{color:inherit}
svg{display:block}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-700);margin:0 0 18px}
.lede{font-size:19px;line-height:1.55;max-width:52ch;margin-top:20px}
/* Pill buttons with a shallow left-to-right gradient, dark into light.
Gradients cannot be transitioned, so hover moves brightness on the filled
button and the border colour on the outlined ones. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:15px;font-weight:500;line-height:1.35;padding:11px 24px;border-radius:var(--r-pill);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .18s ease,border-color .18s ease,transform .18s ease}
.btn-primary{background:var(--teal-600);color:#fff}
/* 1.06 is the ceiling: 1.08 drops the white label to 4.46:1 */
.btn-primary:hover{filter:brightness(1.04)}
.btn-ghost{border-color:var(--border);color:var(--ink-900);background:var(--white)}
.btn-ghost:hover{border-color:var(--teal-600)}
/* The shared hairline token is .16 alpha, which is right for dividers but leaves a
button outline at 1.7:1. A control needs 3:1, so this one is scoped up. */
.btn-ghost-dark{border-color:rgba(255,255,255,.4);color:var(--on-dark);background:rgba(255,255,255,.05)}
.btn-ghost-dark:hover{border-color:var(--on-dark)}
.btn:active{transform:translateY(1px)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}
:where(a,button,summary):focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;border-radius:4px}
/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:80px}
.brand{display:flex;align-items:center;height:56px;color:var(--ink-900);text-decoration:none;flex:none}
/* Logo sheen, two independent mechanisms because they fail independently:
1. SMIL slides and rotates the tilted gradient and breathes the three colour
stops, on four different periods. Runs without CSS animation support.
2. This CSS filter breathes saturation on top. No hue-rotate: rotating the hue
dragged the yellow towards green and the teal towards blue, off brand.
Either alone reads as iridescence. Ends stay ink: those stops are currentColor. */
/* The wordmark is a looping video now, not an SVG with an animated gradient — same
slot, same height-driven sizing (the parent link sets height; width follows the
video's own aspect ratio). Paused under reduced motion via JS below, since CSS has
no way to control video playback state. */
/* The primary WebM has a real alpha channel: the original white matte was
removed and its anti-aliased edge colour decontaminated, so the wordmark can
sit over translucent or dark header backgrounds without a visible rectangle.
MP4 remains only as a compatibility fallback for browsers without WebM alpha. */
/* Brand logo — the animated GLOCOD.AI lockup (dark wordmark on a white backing),
shared with the main dashboard. multiply knocks the white backing out to
transparent on the light-themed page (header + footer). */
.glogo{display:block;height:100%;width:auto;mix-blend-mode:multiply}
.nav-links{display:flex;justify-content:center;gap:28px}
.nav-links a,.nav-signin{font-size:15px;text-decoration:none;color:var(--ink-600);transition:color .18s}
.nav-links a:hover,.nav-signin:hover{color:var(--ink-900)}
.nav-end{display:flex;align-items:center;gap:6px;justify-self:end}
.nav-signin{padding:10px 12px}
.nav .btn-primary{padding:9px 17px;font-size:14px}
.nav.is-light{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom-color:var(--border)}
/* ---- Active section indicator: tells you where you are on the page ---- */
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--teal-600);border-radius:1px;opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .2s,transform .2s}
.nav-links a.on{color:var(--ink-900)}
.nav-links a.on::after{opacity:1;transform:none}
/* ============ DARK ACT: hero + morph share one background ============ */
/* ============ OPENING ACT: hero + transformation, on white ============ */
.act{background:var(--white);color:var(--ink-600)}
/* ---- Hero: centred, content-height. The stage below is centred too, so the
whole opening reads as one statement before the body goes left-aligned. ---- */
.hero{
position:relative;padding:158px 0 96px;text-align:center;
background-image:
radial-gradient(660px 440px at 4% 2%, rgba(18,118,125,.11), transparent 68%),
radial-gradient(560px 380px at 97% 6%, rgba(201,191,82,.12), transparent 68%),
radial-gradient(640px 430px at 10% 97%, rgba(62,154,110,.09), transparent 70%);
}
.hero > .wrap{position:relative;z-index:1}
.hero:hover .fx{opacity:.45}
/* Glass instead of a shadow: the page has no shadows, and the nav already uses
this exact treatment when it gains a background on scroll. Opaque fallback
first, so browsers without backdrop-filter still get a legible panel. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.ftip{
background:rgba(255,255,255,.72);
-webkit-backdrop-filter:blur(16px) saturate(1.6);
backdrop-filter:blur(16px) saturate(1.6);
}
}
.fdot.l .ftip{left:-3px}
.fdot.r .ftip{right:-3px}
@media (prefers-reduced-motion:reduce){
[data-seq]{opacity:1;transform:none;transition:none}
}
/* 26ch holds "From regulatory changes to" on one line; the cycling half sits on
its own line below, forced by the
. */
.hero h1{max-width:26ch;margin:0 auto}
.hero h1 .g{color:var(--teal-600)}
/* Reserve the widest cycling word so the centred headline never shifts width as
it types, and give it a blinking caret — this rule went missing during an
earlier CSS-block edit; caught now by grepping for it defensively. */
.h1-cyc{display:inline-block;text-align:center;position:relative;min-width:17ch}
.h1-cyc::after{content:"";display:inline-block;width:3px;height:.82em;margin-left:.06em;vertical-align:-.06em;background:var(--teal-600);animation:h1-caret 1.05s step-end infinite}
@keyframes h1-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-lede{font-size:19px;line-height:1.55;color:var(--ink-600);max-width:46ch;margin:26px auto 0}
/* ---- Regulatory globe. Palette comes from the page tokens rather than the
prototype's near-identical hexes, so there is one source for the colours. ---- */
/* Domain caret under the hero globe. Reuses the exact caret animation already
defined for the H1 typewriter (@keyframes h1-caret, declared once), so this is
styling only — no new keyframes. Width is reserved for the longest of the 22
domain names so the line never shifts as it types. */
.glow-h{margin:18px 0 0;text-align:center;font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.015em;color:var(--ink-900)}
/* Just the typewriter now, no lead-in text, so the cycling word is centred inside its
own reserved box rather than left-aligned within it — the same fix the H1 cycler
needed for the same reason: text-align on the outer line alone does not centre text
that is left-aligned inside a wider fixed-width inline-block. */
.glow-cap{margin:8px 0 0;text-align:center;font-size:clamp(16px,2vw,19px);letter-spacing:.005em}
.glow-cyc{display:inline-block;min-width:31ch;text-align:center;color:var(--teal-700);font-weight:600;position:relative}
.glow-cyc::after{content:"";display:inline-block;width:2px;height:.82em;margin-left:.06em;vertical-align:-.04em;background:var(--teal-600);animation:h1-caret 1.05s step-end infinite}
/* Regulations strip, back under the domain block by request — a clear gap above it
(margin-top, not the old negative-margin overlap trick, which existed only to pull
the strip up into the globe when it lived there) separates it from the domain
caret rather than crowding it. Boxed cards, not one continuous line. Flags are
descriptive — jurisdiction of origin, the way a legal database shows a country flag
beside an address, not a regulator's own logo. Defined once as symbols, reused by
use, so the Union Jack's geometry exists once on the page. US states get a compact
code instead: at this size a state flag is either a plain rectangle (Colorado) or
a coat of arms turned to mud (Vermont). */
.mq{position:relative;margin-top:80px;overflow:hidden;
--mm:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
-webkit-mask-image:var(--mm);mask-image:var(--mm)}
.mq-track{display:flex;gap:16px;width:max-content;animation:mq-run 52s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;gap:16px}
.mq-i{
display:flex;align-items:center;gap:12px;height:70px;padding:0 19px;
border:1px solid var(--border);border-radius:12px;
background:rgba(255,255,255,.84);white-space:nowrap;cursor:pointer;
transition:border-color .18s ease,background-color .18s ease;
}
.mq-i:hover{border-color:var(--teal-100);background:var(--teal-50)}
/* Active is whichever card is nearest the viewport centre, tracked in script. Kept as
quiet as a focus state — brand-tinted border, a trace of tint, no shadow and no
scale, because a carousel effect was the one thing to avoid. */
.mq-i.is-active{border-color:rgba(0,150,175,.32);background:rgba(0,150,175,.03)}
.mq-i:hover.is-active{border-color:var(--teal-100);background:var(--teal-50)}
/* The fixed 38px identity column is what makes every card align: the name and the type
below it start on the same X whether the indicator is a 23px flag or a wider state
code. The flag carries no container of its own, so it reads as metadata. */
.mk{flex:none;width:38px;display:flex;align-items:center}
.mk-flag-svg{
width:23px;height:16px;display:block;border-radius:3px;
box-shadow:inset 0 0 0 1px rgba(10,33,36,.12);
}
.mk-code{
height:17px;padding:0 3px;border:1px solid var(--border);border-radius:3px;
background:var(--white);display:flex;align-items:center;
}
.mk-code i{font-family:var(--mono);font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.01em;color:var(--ink-600);line-height:1}
/* Reading order by design: name, then type, then jurisdiction. The type drops mono and
capitals — a tracked capital label reads as a system tag, and this should read as
secondary metadata instead. */
.mq-t{display:flex;flex-direction:column;gap:3px}
.mq-t b{font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-900);line-height:1.2}
.mq-t em{font-style:normal;font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--ink-400);line-height:1.2}
@keyframes mq-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.regulatory-globe{
position:relative;width:min(900px,96vw);height:440px;margin:24px auto 0;overflow:hidden;
--gm:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
-webkit-mask-image:var(--gm);mask-image:var(--gm);
}
.regulatory-globe canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
.regulatory-globe canvas.is-dragging{cursor:grabbing}
.regulatory-globe canvas.is-marker-hover{cursor:pointer}
.globe-tooltip{
position:absolute;z-index:5;width:250px;padding:14px 16px 13px;text-align:left;
background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:10px;
box-shadow:0 12px 40px rgba(8,50,57,.10);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
opacity:0;transform:scale(.98);transform-origin:18px 50%;
transition:opacity .16s ease,transform .16s ease;pointer-events:none;
}
.globe-tooltip.is-visible{opacity:1;transform:scale(1)}
/* Down to two facts: where, and which legal domain. No act name, no date, no
Deadline/Tracked/Roadmap status — those all lived here before and made the card
busy. Region reads as a full jurisdiction name, not the internal code. */
.globe-tooltip__region{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink-900)}
/* Only rendered for the 8 markers with a confirmed domain (5 with a firm date, plus
NIS2, MiCA and the Online Safety Act, which are real named instruments without one
yet); [hidden] on the other 20, which show the jurisdiction alone. */
.globe-tooltip__domain{margin-top:9px;display:flex;align-items:center;gap:8px}
.globe-tooltip__domain-icon{flex:none;width:17px;height:17px;color:var(--teal-600)}
.globe-tooltip__domain span{font-size:13.5px;font-weight:500;color:var(--teal-700)}
/* Same visual language as the coverage map's tooltip below on the page: source on
its own row, under a divider, teal, with the same link icon — one pattern for
"here is where this comes from", not two different-looking ones. */
.globe-tooltip__src{display:flex;align-items:center;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border);font-size:12px;font-weight:500;color:var(--teal-700)}
.globe-tooltip__src svg{width:12px;height:12px;flex:none}
/* Instrument field. Two CSS dot lattices rather than hundreds of nodes: a faint
one always on, a slightly larger one revealed only around the cursor by a mask.
A mask on the wrapper keeps the middle clear so the headline sits on plain white.
Teal marks mean tracked, the amber one means a deadline nearing — the two things
the product actually does. Nothing here claims applicability scoring. */
.field{
position:absolute;inset:0;z-index:0;pointer-events:none;
--mx:-40%;--my:-40%;
--mask:
radial-gradient(560px 230px at 50% 22%,transparent 0,transparent 42%,#000 100%),
radial-gradient(520px 300px at 50% 74%,transparent 0,transparent 55%,#000 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;
-webkit-mask-image:var(--mask);mask-image:var(--mask);
}
.field::before{content:"";position:absolute;inset:0;
background-image:radial-gradient(circle,rgba(10,33,36,.11) 1px,transparent 1.3px);
background-size:30px 30px;
}
/* The reveal layer used to be a full-hero element whose mask followed the pointer, so
every pointer frame repainted a masked layer over a thousand pixels tall. It is now
a 420px square with a static mask, moved by transform; background-position shifts by
the same amount so its dots stay locked to the base lattice. */
.lens{
position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;
pointer-events:none;z-index:0;opacity:0;transition:opacity .35s ease;will-change:transform;
background-image:radial-gradient(circle,rgba(10,33,36,.26) 1.7px,transparent 2px);
background-size:30px 30px;
--lm:radial-gradient(190px 190px at 50% 50%,#000 0,transparent 72%);
-webkit-mask-image:var(--lm);mask-image:var(--lm);
}
.lens.on{opacity:1}
.hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}
/* Recognisable instruments: the floor under the hero. Real, verifiable, no API.
Framework-medallion structure from the GRC vendors, but without the circles —
a circled tick in this category reads as "we certify you", which is not the claim. */
/* Paired with a deadline marker in the gutter: hovering either end lights both,
so the two decorations read as one system instead of separate ornaments. */
.fdot.lit{opacity:1}
.fdot.lit .fx{opacity:.95}
.fdot.lit::after{animation:none;transform:scale(2.4);opacity:.65}
/* ---- The signature: two columns, pinned. The left column is constant — label,
heading, process copy and the four steps, whose active row follows the
scroll. The right column accumulates rather than crossfades: the citation
line never leaves, the statute collapses into a quoted clause that stays on
screen, and the obligation and the task stack under it. By the last stage
all three layers are visible at once, linked by the source reference. ---- */
.morph{position:relative;background:var(--paper)}
.track{height:calc(100vh + 1700px)}
.stage{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:104px 0 56px;overflow:hidden}
/* Matches every other section's container instead of running 160px wider than
them — this block used to be the one place on the page that overflowed the
shared grid. The right column shrinks with it, since it is minmax(0,1fr). */
.stage-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:80px;align-items:center;width:100%}
/* left column, constant */
.hw-h{font-size:clamp(25px,2.4vw,33px);line-height:1.16;letter-spacing:-.026em;margin-top:16px}
.hw-p{font-size:15.5px;line-height:1.62;color:var(--ink-600);margin-top:18px}
.steps4{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--border)}
.steps4 li{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:baseline;
padding:14px 0 14px 15px;border-bottom:1px solid var(--border);
border-left:2px solid transparent;color:var(--ink-400);cursor:pointer;
transition:color .4s ease,border-left-color .4s ease,background-color .18s ease;
}
.steps4 li:hover{background:var(--paper)}
/* The button carries the click and the keyboard focus; display:contents drops its
own box so it does not disturb the 's own grid — its children (the number and
the label) become direct grid items instead, exactly as if the button were not
there. A button in that mode has no box of its own to outline on focus, so the
focus ring goes on the via :focus-within instead. */
.step-btn{display:contents;font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0}
.steps4 li:focus-within{outline:2px solid var(--teal-600);outline-offset:2px}
.steps4 b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em}
.steps4 span{font-size:15px;font-weight:500;letter-spacing:-.01em}
/* right column: fixed overall height. The two zones trade height — when the statute
collapses into its quoted clause, it hands the freed space to the result. Both use
the same duration and curve, so the sum is constant in every frame, not just at
rest. One soft shadow, because the panel needs to read as a surface. */
.demo{
--pad:clamp(24px,2.4vw,34px);
--h-all:clamp(352px,38vh,428px);
--h-q:clamp(104px,11vh,124px);
padding:var(--pad);border:1px solid var(--border);border-radius:var(--r-card);
background:var(--white);
box-shadow:0 1px 2px rgba(10,33,36,.04),0 20px 44px -28px rgba(10,33,36,.18);
}
.d-ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);padding-bottom:13px;border-bottom:1px solid var(--border)}
.d-zone{--ease:cubic-bezier(.3,.7,.3,1);position:relative;overflow:hidden;transition:height .55s var(--ease)}
.d-src{height:var(--h-all);margin-top:18px}
.d-out{height:0}
.d-full,.d-quote,.d-oblc,.d-taskc{position:absolute;left:0;right:0;top:0;transition:opacity .5s ease,transform .5s ease}
.d-body{font-family:var(--mono);font-size:clamp(13px,1vw,15px);line-height:2;color:var(--ink-600);transition:color .5s}
.d-body mark{background:transparent;color:inherit;padding:2px 0;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .45s,color .45s,box-shadow .45s}
.d-quote{opacity:0;transform:translateY(10px)}
.d-quote blockquote{margin:0;border-left:2px solid var(--amber-500);padding-left:17px;font-family:var(--mono);font-size:clamp(12.5px,.95vw,14.5px);line-height:1.95;color:var(--ink-600)}
/* Both result cards share the same header row and the same sentence in the same
place, so the crossfade reads as the box changing state around the obligation
rather than one card being swapped for another. */
.d-oblc,.d-taskc{
height:100%;display:flex;flex-direction:column;
border-radius:var(--r-ctl);padding:17px 20px;opacity:0;transform:translateY(10px);
}
.d-oblc{background:var(--teal-50);border:1px solid var(--teal-100);border-left:2px solid var(--teal-600)}
.d-taskc{background:var(--teal-900)}
.d-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.d-taskc .d-card-top{border-bottom-color:var(--on-dark-border)}
.d-task-assignee{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.d-task-avatar{
width:28px;height:28px;border-radius:50%;
display:grid;place-items:center;flex:0 0 28px;
background:var(--teal-600);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 0 0 2px rgba(18,162,182,.10);
color:#fff;
}
.d-task-avatar svg{
width:15px;height:15px;display:block;
fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;
}
.d-task-user{font-size:11.5px;font-weight:500;color:#fff;white-space:nowrap}
.d-taskc .d-card-top{justify-content:flex-start}
.d-taskc .d-pill{margin-left:4px}
.d-taskc .d-kv{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:auto}
.d-lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.d-oblc .d-lbl{color:var(--teal-800)}
.d-taskc .d-lbl{color:var(--teal-500)}
.d-pill{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;padding:3px 8px;border-radius:5px}
.d-oblc .d-pill{background:var(--white);color:var(--teal-800);border:1px solid var(--teal-100)}
.d-taskc .d-pill{background:rgba(18,162,182,.16);color:var(--teal-500);border:1px solid rgba(18,162,182,.3)}
.d-obl-t{font-size:clamp(17px,1.45vw,21px);line-height:1.36;font-weight:500;letter-spacing:-.018em;margin-top:15px}
.d-oblc .d-obl-t{color:var(--ink-900)}
.d-taskc .d-obl-t{color:#fff}
.d-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:auto;padding-top:16px}
.d-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted)}
.d-v{font-size:15px;font-weight:500;color:#fff;margin-top:5px;letter-spacing:-.01em}
.d-v.amb{color:var(--amber-500);font-family:var(--mono);font-size:13.5px}
.d-v.mn{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--on-dark)}
/* stage states — "done" first, so the active row overrides it */
.stage[data-s="2"] .steps4 li:nth-child(-n+1),
.stage[data-s="3"] .steps4 li:nth-child(-n+2),
.stage[data-s="4"] .steps4 li:nth-child(-n+3){color:var(--ink-600)}
.stage[data-s="1"] .steps4 li:nth-child(1),
.stage[data-s="2"] .steps4 li:nth-child(2),
.stage[data-s="3"] .steps4 li:nth-child(3),
.stage[data-s="4"] .steps4 li:nth-child(4){color:var(--ink-900);border-left-color:var(--teal-600)}
.stage[data-s="2"] .d-body{color:rgba(10,33,36,.17)}
.stage[data-s="2"] .d-body mark{background:var(--amber-100);color:#4A2F00;box-shadow:0 0 0 5px var(--amber-100)}
.stage[data-s="3"] .d-full,.stage[data-s="4"] .d-full{opacity:0;transform:translateY(-10px)}
.stage[data-s="3"] .d-quote,.stage[data-s="4"] .d-quote{opacity:1;transform:none}
/* the two zones swap height by the same amount, so the panel never resizes */
.stage[data-s="3"] .d-src,.stage[data-s="4"] .d-src{height:var(--h-q)}
.stage[data-s="3"] .d-out,.stage[data-s="4"] .d-out{height:calc(var(--h-all) - var(--h-q))}
.stage[data-s="3"] .d-oblc{opacity:1;transform:none}
.stage[data-s="4"] .d-taskc{opacity:1;transform:none}
/* ============ COMPARISON: the thesis, proved ============ */
/* The table sits on its own white surface rather than the section flipping to white,
because the section above is already white and two would merge. Values are a glyph
plus a word: the glyph scans, the word keeps it exact — the states are not binary.
"No" is a dash, not a cross: a cross reads as a verdict on a competitor, a dash
reads as "does not offer", which is what we can actually assert. */
.compare{background:var(--paper);padding:var(--pad-base) 0;border-top:1px solid var(--border)}
.cmp-card{
margin-top:44px;background:var(--white);border:1px solid var(--border);
border-radius:var(--r-card);overflow:hidden;
box-shadow:0 1px 2px rgba(10,33,36,.04),0 18px 42px -30px rgba(10,33,36,.16);
}
.cmp-scroll{overflow-x:auto}
/* separate borders, not collapsed: the Glocod column needs its own outline and
rounded caps, which collapsed borders would merge away */
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.cmp th{font-size:14px;font-weight:600;letter-spacing:-.006em;color:var(--ink-900);text-align:left;padding:22px 18px 14px 0;border-bottom:1px solid var(--border);vertical-align:bottom;line-height:1.32}
.cmp td{font-size:14.5px;color:var(--ink-600);padding:15px 18px 15px 0;border-bottom:1px solid var(--border)}
.cmp tr:last-child td{border-bottom:0}
.cmp th:first-child,.cmp td:first-child{width:38%;padding-left:26px;text-align:left}
.cmp td:first-child{color:var(--ink-900);font-weight:500}
/* the three value columns read as a grid, so they are centred; symmetric padding,
otherwise the inherited right-only padding would pull the centre off axis */
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center;padding-left:18px;padding-right:18px}
.cmp tbody tr{transition:background-color .16s ease}
.cmp tbody tr:hover td{background:rgba(10,33,36,.028)}
.cmp .own{background:var(--teal-50);padding-left:20px;padding-right:20px;border-left:1px solid var(--teal-600);border-right:1px solid var(--teal-600);border-bottom-color:var(--teal-100)}
.cmp th.own{border-top:1px solid var(--teal-600);border-radius:12px 12px 0 0;padding-top:24px}
.cmp tr:last-child td.own{border-bottom:1px solid var(--teal-600);border-radius:0 0 12px 12px;padding-bottom:22px}
.cmp tbody tr:hover td.own{background:rgba(14,140,158,.10)}
.cmp th.own .glogo-t{height:15px;color:var(--ink-900);margin:0 auto 1px}
.v{display:inline-flex;align-items:center;position:relative}
.v::before{content:"";flex:none;display:block}
.v i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v.yes::before{width:13px;height:7px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);margin-bottom:3px}
.v.no::before{width:14px;height:0;border-top:1.8px solid currentColor}
.v.part::before{width:12px;height:12px;border-radius:50%;border:1.8px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.v.out{gap:10px;font-size:14px}
.v.out::before{width:8px;height:8px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}
.v.out i{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-style:normal}
.v.yes{color:var(--teal-600)}
.own .v.yes{color:var(--teal-800)}
/* same value, more weight, because this column is already declared as ours */
.own .v.yes::before{width:20px;height:20px;border:0;border-radius:50%;background:var(--teal-600);transform:none;margin:0}
.own .v.yes::after{content:"";position:absolute;left:5.5px;top:6.5px;width:9px;height:5px;border-left:1.9px solid #fff;border-bottom:1.9px solid #fff;transform:rotate(-45deg)}
.v.no{color:var(--ink-400)}
.v.part{color:var(--teal-600)}
.v.out{color:var(--ink-600)}
.lgd{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:20px 0 0;padding:0}
.lgd li{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-400)}
.cmp-note{font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.03em;color:var(--ink-400);margin-top:22px}
/* ---- One provable claim carries the section, four coverage facts support it.
The artwork layer sits under a scrim so text contrast never depends on
whatever image is dropped in; the dot lattice stays as the finest layer. ---- */
.figures{
position:relative;overflow:hidden;isolation:isolate;
background-color:var(--teal-900);color:var(--on-dark);padding:var(--pad-anchor) 0;
}
/* drop an image in here: background-image:url("bg.jpg") */
.figures-art{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-position:center;background-size:cover;background-repeat:no-repeat;
background-image:
radial-gradient(860px 580px at 90% 6%, rgba(18,162,182,.17), transparent 68%),
radial-gradient(700px 480px at 4% 98%, rgba(62,154,110,.13), transparent 70%);
}
/* Two-axis scrim. One axis was not enough: the claim sits upper-left but the four
stats run along the bottom across the full width, so the artwork had to be pushed
back vertically as well. Measured against the image, the worst-case contrast for
the small mono labels is 5.4:1 and for white text 10.7:1. */
.figures-art::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(180deg, transparent 0%, transparent 38%,
rgba(6,42,49,.56) 70%, rgba(6,42,49,.72) 100%),
linear-gradient(90deg, rgba(6,42,49,.88) 0%, rgba(6,42,49,.78) 42%,
rgba(6,42,49,.34) 78%, rgba(6,42,49,.18) 100%);
}
.figures::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.4px);
background-size:32px 32px;
--m:radial-gradient(900px 520px at 46% 42%, transparent 0, transparent 40%, #000 100%);
-webkit-mask-image:var(--m);mask-image:var(--m);
}
.figures .wrap{position:relative;z-index:2}
.claim{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4.2vw,68px);align-items:center;margin-top:24px}
.claim-n{font-variant-numeric:tabular-nums;font-size:clamp(112px,13.5vw,208px);line-height:.82;font-weight:600;letter-spacing:-.055em;color:var(--teal-500)}
.claim-h{color:#fff;font-size:clamp(25px,3.1vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:600}
/* Claim rotator. The number is a counter that runs from the outgoing value to the
incoming one, so the eye follows a change rather than a swap; heading and body
cross-fade underneath it. Width is reserved in ch against tabular figures, or the
whole text column would shuffle sideways on every digit. */
.claim-body{min-height:196px}
.claim-fade{transition:opacity .3s ease}
.claim-fade.is-out{opacity:0}
.claim-nav{display:flex;gap:9px;margin-top:26px}
.claim-nav button{
width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
display:grid;place-items:center;border-radius:50%;
}
.claim-nav button::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--on-dark-border);transition:background-color .2s ease,transform .2s ease;
}
.claim-nav button:hover::before{background:var(--teal-500)}
.claim-nav button[aria-selected="true"]::before{background:var(--teal-500);transform:scale(1.35)}
.claim-nav button:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.claim-p{font-size:17.5px;line-height:1.6;color:var(--on-dark-muted);margin-top:18px;max-width:50ch}
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(58px,7vw,92px);border-top:1px solid var(--on-dark-border);padding-top:34px}
.fig{padding-right:26px}
.fig + .fig{border-left:1px solid var(--on-dark-border);padding-left:28px}
.fig-n{font-variant-numeric:tabular-nums;font-size:clamp(27px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:#fff}
.fig-l{font-family:var(--mono);font-size:12.5px;line-height:1.55;letter-spacing:.01em;color:var(--on-dark-muted);margin-top:13px;max-width:26ch}
/* V57: keep Coverage depth metric labels compact on desktop. */
@media(min-width:901px){
.fig-l{
max-width:none;
white-space:nowrap;
}
}
/* ============ VERIFICATION ============ */
/* A recognisable AI chat: a question, an answer, then verification against the
source and a human confirmation. Amber stays the one accent for the discrepancy;
the checkmark stays teal rather than the more conventional green, since a third
status hue would be new anywhere else on the page — teal already means "this is
Glocod, and this is fine." The chat card is wider than the heading measure, so
the two live at their own widths inside one shared centred column. */
.verify{
background:var(--white);padding:var(--pad-base) 0;
background-image:radial-gradient(720px 460px at 4% 6%, rgba(18,118,125,.07), transparent 70%);
}
.verify-in{max-width:840px;margin:0 auto}
.verify-in>.eyebrow,.verify-in>h2,.verify-p{max-width:480px;margin-left:auto;margin-right:auto;text-align:center}
.verify-p{font-size:17px;line-height:1.6;color:var(--ink-600);margin-top:22px}
/* Soft brand-coloured glow behind the card, on a separate wrapper rather than the
card's own ::before — .chatwin keeps overflow:hidden for its header's corners,
and a glow that respected that would just clip itself out of existence. Same
three hues as the sparkle mark, so it reads as "the same AI," not a new colour
introduced just for decoration. */
/* No ring anymore — just the glow. box-shadow paints as part of the box itself, so
it needs no z-index and nothing to beat in the stacking order, which is why it
replaced the old blurred-pseudo-element halo that could not be relied on in a
real browser. Softened from the first pass, since without a crisp ring next to
it the glow was carrying more visual weight on its own. */
.chatwin-wrap{
position:relative;margin-top:34px;border-radius:20px;
}
.chatwin-wrap::before,
.chatwin-wrap::after{
content:"";
position:absolute;
z-index:0;
pointer-events:none;
border-radius:50%;
will-change:transform,opacity;
}
.chatwin-wrap::before{
width:52%;
height:68%;
left:-12%;
top:-12%;
background:radial-gradient(
ellipse at center,
rgba(18,162,182,.34) 0%,
rgba(18,162,182,.22) 34%,
rgba(18,162,182,.08) 58%,
transparent 76%
);
filter:blur(30px);
opacity:.82;
animation:chat-glow-teal 18s cubic-bezier(.45,.05,.55,.95) infinite;
}
.chatwin-wrap::after{
width:48%;
height:64%;
right:-10%;
bottom:-15%;
background:radial-gradient(
ellipse at center,
rgba(232,159,0,.30) 0%,
rgba(232,159,0,.18) 36%,
rgba(232,159,0,.07) 60%,
transparent 77%
);
filter:blur(32px);
opacity:.76;
animation:chat-glow-gold 21s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes chat-glow-teal{
0%,100%{
transform:translate3d(0,0,0) scale(1);
opacity:.72;
}
25%{
transform:translate3d(34px,16px,0) scale(1.08);
opacity:.96;
}
50%{
transform:translate3d(54px,52px,0) scale(.98);
opacity:.80;
}
75%{
transform:translate3d(12px,68px,0) scale(1.05);
opacity:.92;
}
}
@keyframes chat-glow-gold{
0%,100%{
transform:translate3d(0,0,0) scale(1.02);
opacity:.70;
}
28%{
transform:translate3d(-30px,-18px,0) scale(.96);
opacity:.94;
}
56%{
transform:translate3d(-58px,-54px,0) scale(1.07);
opacity:.78;
}
82%{
transform:translate3d(-12px,-70px,0) scale(1);
opacity:.90;
}
}
@media(prefers-reduced-motion:reduce){
.chatwin-wrap::before,
.chatwin-wrap::after{
animation:none;
}
}
/* A dedicated, looping reveal for just this chat — the generic one-shot .rv system
(fade in once when scrolled into view, then stay revealed forever) undersold the
"watch a conversation happen" idea, and would only ever play once per visit. This
plays the same three beats every few seconds for as long as the chat is on
screen, so any visitor sees the full sequence regardless of scroll timing. */
[data-seq]{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
[data-seq].seq-in{opacity:1;transform:none}
.chatwin{
position:relative;z-index:1;text-align:left;
border-radius:20px;background:var(--white);
box-shadow:0 1px 2px rgba(10,33,36,.03),0 24px 50px -30px rgba(10,33,36,.16);
overflow:hidden;
}
.chatwin-h{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:14px 20px;border-bottom:1px solid var(--border);text-align:left}
.chatwin-logo{height:56px;width:auto;max-width:280px;object-fit:contain;object-position:left center}
.chatwin-mark{width:18px;height:18px;display:block;flex:none}
.chatwin-name{font-size:14.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-900);text-transform:uppercase}
.chatwin-badge{
margin-left:auto;display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:500;color:var(--teal-700);
background:var(--teal-50);border:1px solid var(--teal-100);border-radius:99px;padding:4px 10px 4px 8px;
}
.badge-i{width:12px;height:12px}
.crow{display:flex;align-items:flex-end;gap:9px;padding:0 20px;margin-top:20px}
.crow-user{justify-content:flex-end}
.crow-ai{align-items:flex-start}
.chat-answer{gap:12px}
.cav{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.cav-user{background:var(--teal-100);color:var(--teal-700)}
.cav-i{width:14px;height:14px}
.cav-ai{background:var(--teal-900);padding:6px;box-sizing:border-box}
.ai-response-avatar{
width:48px;height:48px;flex:0 0 48px;
display:grid;place-items:center;
border-radius:15px;
background:linear-gradient(145deg,rgba(18,162,182,.10),rgba(232,159,0,.08));
border:1px solid rgba(18,162,182,.16);
box-shadow:0 8px 22px -14px rgba(6,42,49,.45),inset 0 1px 0 rgba(255,255,255,.7);
}
.ai-response-avatar img{
width:36px;height:36px;display:block;object-fit:contain;
filter:drop-shadow(0 3px 7px rgba(10,33,36,.12));
}
.ai-response-avatar.is-loading{
width:34px;height:34px;flex:0 0 34px;border-radius:11px;
}
.ai-response-avatar.is-loading img{
width:25px;height:25px;
}
.msg{max-width:74%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;margin:0}
.msg-user{background:var(--teal-50);color:var(--ink-900);border:1px solid var(--teal-100);border-radius:14px 14px 4px 14px}
.ai-col{flex:1;min-width:0}
.msg-ai{background:var(--paper);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:14px 16px}
.msg-t{font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.4;color:var(--ink-900);margin:0}
.msg-ai mark{background:var(--amber-100);color:#4A2F00;padding:1px 3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.msg-src{font-family:var(--mono);font-size:11px;color:var(--ink-400);margin:10px 0 0}
.msg-src a{color:var(--teal-700);text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.msg-src a:hover{text-decoration:underline}
.ext-i{width:11px;height:11px}
.msg-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(10,33,36,.08)}
.msg-footer .msg-src{margin:0;min-width:0}
.cbtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:8px 14px;margin-top:16px;border-radius:99px;text-decoration:none;line-height:1}
.cbtn-in-msg{margin-top:0;flex:none;padding:7px 11px;font-size:11.5px}
.cbtn svg{width:13px;height:13px}
.cbtn-primary{background:var(--teal-600);color:#fff;border:1px solid transparent}
.cbtn-primary:hover{filter:brightness(1.04)}
.chat-next-loader{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:0;background:transparent;border:0;font-size:10.5px;color:var(--ink-400);max-height:24px;overflow:hidden;transition:opacity .24s ease,transform .24s ease,max-height .3s ease,margin-top .3s ease}
.chat-next-loader.is-done{opacity:0;transform:translateY(-3px);max-height:0;margin-top:0;pointer-events:none}
.chat-next-loader .thinking-dots i{width:3.5px;height:3.5px}
.chat-actions{display:block;margin-top:16px;padding-top:14px;border-top:1px solid rgba(10,33,36,.09)}
.chat-actions-top{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-400);margin-bottom:8px}
.chat-actions-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.chat-action-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid rgba(10,33,36,.11);border-radius:99px;background:rgba(255,255,255,.62);text-decoration:none;color:var(--ink-700);font-size:11px;font-weight:500;line-height:1.15;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.chat-action-chip:hover{border-color:var(--teal-100);background:var(--teal-50);color:var(--teal-800)}
.chat-action-chip svg{width:10.5px;height:10.5px;color:var(--teal-600)}
/* Just an ordinary input now: a border, no glow, no wrapper — the depth was doing
nothing useful here once the rest of the card carries the AI glow on its own. */
.chat-compose{
display:flex;align-items:center;gap:10px;margin:26px 20px 20px;padding:10px 8px 10px 14px;
border:1px solid var(--border);border-radius:99px;background:var(--paper);
}
.chat-compose span:first-child{flex:1;font-size:13px;color:var(--ink-400)}
.compose-send{flex:none;width:28px;height:28px;border-radius:50%;background:var(--teal-700);display:grid;place-items:center;color:#fff}
.send-i{width:13px;height:13px}
/* Three beats: your question, the answer, then verify. --rd is read by the generic
.rv.in rule declared once, above. */
/* One-shot chat reveal: familiar chat first, then a brief source-check state, then
the final answer. It plays only once per page load and never resets on scroll. */
.chat-once{opacity:0;transform:translateY(10px);transition:opacity .42s cubic-bezier(.2,.7,.3,1),transform .42s cubic-bezier(.2,.7,.3,1)}
.chat-once.is-in{opacity:1;transform:none}
.chat-loading{max-height:76px;overflow:hidden;transition:opacity .28s ease,transform .28s ease,max-height .35s ease,margin-top .35s ease}
.chat-loading.is-done{opacity:0;transform:translateY(-4px);max-height:0;margin-top:0;pointer-events:none}
.chat-thinking{display:inline-flex;align-items:flex-start;gap:10px;padding:10px 13px;background:var(--paper);border:1px solid var(--border);border-radius:4px 14px 14px 14px;color:var(--ink-600);font-size:12.5px;line-height:1.2}
.thinking-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.thinking-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.thinking-label{white-space:nowrap}
.thinking-meta{font-family:var(--mono);font-size:10px;letter-spacing:.045em;color:var(--ink-400)}
.thinking-dots{display:inline-flex;align-items:center;gap:3px}
.thinking-dots i{width:4px;height:4px;border-radius:50%;background:var(--teal-600);opacity:.28;animation:chat-dot 1s ease-in-out infinite}
.thinking-dots i:nth-child(2){animation-delay:.14s}.thinking-dots i:nth-child(3){animation-delay:.28s}
@keyframes chat-dot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
.chatwin-badge span:last-child{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.chat-once{opacity:1;transform:none;transition:none}.chat-loading,.chat-next-loader{display:none}.thinking-dots i{animation:none}}
/* ============ COVERAGE: a register, not a list ============ */
.cover{background:var(--paper);padding:var(--pad-base) 0}
.cover-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cover-head-copy{max-width:650px}
.cover-subtitle{font-size:16px;line-height:1.6;margin-top:18px;color:var(--ink-600);max-width:650px}
.coverage-view-controls{display:flex;justify-content:flex-end;align-items:flex-end;flex:none;padding-bottom:2px}
/* Map and table show the same coverage facts at two grains — country-level visual,
row-level exact — so one replaces the other rather than stacking both on the page
at once. */
.cov-toggle{display:inline-flex;background:var(--paper);border:1px solid var(--border);border-radius:99px;padding:3px;gap:2px}
.cov-toggle button{
font-family:var(--display);font-size:13px;font-weight:500;color:var(--ink-600);
background:none;border:0;border-radius:99px;padding:7px 18px;cursor:pointer;line-height:1.2;
transition:background-color .18s ease,color .18s ease;
}
.cov-toggle button.is-on{background:var(--white);color:var(--ink-900);box-shadow:0 1px 2px rgba(10,33,36,.08)}
.cov-toggle button:hover:not(.is-on){color:var(--ink-900)}
.reg{width:100%;border-collapse:collapse;margin-top:20px;min-width:680px}
.reg th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);font-weight:500;text-align:left;padding:0 18px 13px 0;border-bottom:1px solid var(--ink-900)}
.reg td{font-family:var(--mono);font-size:13px;color:var(--ink-600);padding:15px 18px 15px 0;border-bottom:1px solid var(--border);white-space:nowrap}
.reg td:first-child{font-family:var(--display);font-size:15.5px;font-weight:500;color:var(--ink-900);white-space:normal}
.reg .num{text-align:right;padding-right:0;color:var(--ink-900)}
.reg th.num{text-align:right;padding-right:0}
/* Tag sphere. No globe: with the labels themselves on a sphere the shape already
reads as one, and a second globe competed with the world map above. Coordinates sit
in data attributes rather than CSS custom properties — reading them back through
getComputedStyle proved unreliable, and the values have no business in the cascade.
Rotation pauses on hover, which both makes moving text readable and provides the
pause mechanism WCAG 2.2.2 asks for. */
/* The map covers the one geography where every unit is included, so the frame fills
rather than advertising what is grey. Geometry is us-atlas states-albers-10m,
simplified to 26 KB of path data; 51 features, which is the claim itself. The svg
is aria-hidden and the same list follows as text — 51 focusable paths would be a
worse experience than one list. */
/* [hidden] alone is not enough here: author CSS always beats the user-agent
stylesheet's built-in "hidden means display:none", so .map-row's own
display:grid was silently winning and the panel stayed visible under the
Table tab — caught by an actual click-through screenshot, not a code read. */
.map-row[hidden]{display:none}
.map-row{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:56px;align-items:center;margin-top:18px}
.map-row>.mq{grid-column:1/-1;margin-top:34px}
.map-lede{font-size:16px;line-height:1.6;color:var(--ink-600)}
.map-out{margin-top:26px;padding-top:22px;border-top:1px solid var(--border);min-height:96px}
.map-out-n{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.028em;color:var(--ink-900);line-height:1.1}
.map-out-c{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-400);margin-top:9px}
.usmap{width:100%;height:auto;display:block}
.usmap path{fill:var(--teal-100);stroke:var(--white);stroke-width:1;transition:fill .15s ease}
.usmap path:hover,.usmap path.on{fill:var(--teal-600)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
/* Visual caps only, never literal: text-transform leaves the underlying text as
"Glocod.ai", so a screen reader still says the name rather than spelling it
G-L-O-C-O-D letter by letter, which some readers do to text already typed
in caps. aria-label values and the SVG keep normal casing for the
same reason — nothing to visually transform there anyway. */
.brand-caps{text-transform:uppercase}
/* World map: covered countries are brand teal and clickable, the rest are a pale
neutral and inert. Pointer-only by design — the register below states the same
data as text, so the map is aria-hidden rather than 28 extra tab stops. */
.map-vis{position:relative}
.wmap{width:100%;height:auto;display:block}
.wmap-controls{position:absolute;right:10px;top:10px;z-index:8;display:flex;flex-direction:column;gap:6px}
.wmap-ctl{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.94);color:var(--ink-900);display:grid;place-items:center;font-family:var(--display);font-size:20px;font-weight:400;line-height:1;cursor:pointer;box-shadow:0 8px 22px -16px rgba(10,33,36,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .16s ease,background-color .16s ease,color .16s ease,opacity .16s ease}
.wmap-ctl:hover:not(:disabled){border-color:var(--teal-100);background:var(--teal-50);color:var(--teal-800)}
.wmap-ctl:disabled{opacity:.38;cursor:default}
.wmap-ctl span{transform:translateY(-1px)}
/* A floating tooltip alongside the existing side-panel readout: hover now answers
with a real card near the cursor, not just updated text off to the left. Content
is deliberately soft — a jurisdiction count and a vague freshness line, not the
exact instrument totals and dates the register/modal already carry. */
.wmap-tip{
position:absolute;top:0;left:0;pointer-events:none;z-index:5;
background:var(--white);border:1px solid var(--border);border-radius:12px;
padding:10px 13px;box-shadow:0 12px 28px -12px rgba(10,33,36,.22);
opacity:0;transform:translate(-50%,-100%);transition:opacity .12s ease;
white-space:nowrap;
}
.wmap-tip.is-on{opacity:1}
.wmap-tip__name{font-size:13px;font-weight:600;color:var(--ink-900);margin:0}
.wmap-tip__meta{font-family:var(--mono);font-size:11px;color:var(--ink-400);margin:4px 0 0}
/* The source gets its own row, below a thin divider, in teal with a small link
icon — the same icon and colour "View source" already uses in the accuracy chat,
so a visitor who has seen that pattern once reads this one at a glance. Meta
(the count) stays a plain grey fact; the source is the one thing here meant to
look like a place you could go. */
.wmap-tip__src{display:flex;align-items:center;gap:5px;margin:7px 0 0;padding-top:6px;border-top:1px solid var(--border);font-size:11.5px;font-weight:500;color:var(--teal-700)}
.wmap-tip__src svg{width:11px;height:11px;flex:none}
/* Three tiers, not a count-based choropleth: per-country instrument figures do not
exist for the 24 member states covered through EUR-Lex, and inventing them would
break the one promise this page makes. Depth of coverage is the real variable.
Luminances step evenly: .135 -> .249 -> .491 -> .830. */
.wmap path{fill:#D9E1E1;stroke:var(--white);stroke-width:.6;transition:fill .15s ease}
.wmap path.t1{fill:#007185;cursor:pointer}
.wmap path.t2{fill:#0096AF;cursor:pointer}
.wmap path.t3{fill:#7FC5D2;cursor:pointer}
/* Hover goes to teal-800, not teal-900: near-black is a 2.68:1 jump from the darkest
tier and reads as switched off rather than picked out. One shared hover colour is
unambiguous — which tier it was is named in the readout. */
.wmap path.t1:hover,.wmap path.t2:hover,.wmap path.t3:hover{fill:#0A4650}
.mdlg{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.mdlg[hidden]{display:none}
.mdlg-back{position:absolute;inset:0;background:rgba(6,42,49,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mdlg-box{position:relative;background:var(--white);border-radius:var(--r-card);padding:30px 32px 32px;width:100%;max-width:660px;max-height:86vh;overflow:auto;box-shadow:0 30px 80px -30px rgba(6,42,49,.5)}
.mdlg-x{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;background:none;font-size:22px;line-height:1;color:var(--ink-400);cursor:pointer;border-radius:var(--r-ctl)}
.mdlg-x:hover{background:var(--paper);color:var(--ink-900)}
.mdlg-k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-700)}
.mdlg-t{font-size:26px;font-weight:600;letter-spacing:-.026em;color:var(--ink-900);margin-top:9px}
.mdlg-body{margin-top:20px}
.mdlg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;padding:13px 0;border-top:1px solid var(--border);font-family:var(--mono);font-size:12.5px;color:var(--ink-600)}
.mdlg-row b{font-weight:500;color:var(--ink-900)}
.mdlg-row span:last-child{color:var(--ink-400)}
.mdlg-note{font-size:14px;line-height:1.55;color:var(--ink-600);margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.mdlg-map{margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.mdlg-map[hidden]{display:none}
.mdlg-map .map-out{margin-top:0;padding-top:0;border-top:0;min-height:70px}
/* ============ PRICING ============ */
.price{background:var(--white);padding:var(--pad-base) 0}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:start}
.p{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);padding:30px;position:relative}
.p-feat{
border:1px solid transparent;
background:
linear-gradient(var(--paper),var(--paper)) padding-box,
linear-gradient(135deg, rgba(0,149,170,1) 0%, rgba(18,162,182,.96) 42%, rgba(250,231,85,.9) 100%) border-box;
box-shadow:0 12px 30px -24px rgba(6,42,49,.14);
}
.p-badge{position:absolute;top:-10px;left:30px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:linear-gradient(135deg,#007F91 0%, #0095AA 48%, #12A2B6 72%, #E8B91E 100%);color:#fff;padding:4px 10px;border-radius:6px;box-shadow:none}
.p-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400)}
.p-amt{font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink-900);margin:14px 0 4px;line-height:1.1}
.p-amt span{font-size:14px;font-weight:400;color:var(--ink-400);letter-spacing:0}
.p-for{font-size:14.5px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.p ul{list-style:none;margin:0 0 26px;padding:0}
.p li{font-size:14.5px;line-height:1.5;padding:6px 0 6px 21px;position:relative}
.p li::before{content:"";position:absolute;left:1px;top:12px;width:9px;height:5px;border-left:1.5px solid var(--teal-600);border-bottom:1.5px solid var(--teal-600);transform:rotate(-45deg)}
.p .btn{width:100%;justify-content:center}
/* The trial line stands in for the integrations strip: one sentence, centred, no
border and no chrome, so it reads as a footnote to the cards rather than a fourth
thing to compare. */
/* The trial sits under the cards as an aside, not as a fourth plan: one sentence,
a secondary button, no border. It carries no term because it is limited by
searches rather than by days. */
.p-trial{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:40px}
.p-trial p{font-size:14.5px;color:var(--ink-600)}
.p-trial .btn{font-size:14px;padding:11px 22px}
/* ============ FAQ ============ */
.faq{background:var(--paper);padding:var(--pad-base) 0}
.faq-in{max-width:840px;margin:44px auto 0}
.q{border-bottom:1px solid var(--border)}
.q:first-of-type{border-top:1px solid var(--border)}
.q summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-size:17.5px;font-weight:500;color:var(--ink-900);letter-spacing:-.012em}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--ink-400);border-bottom:1.5px solid var(--ink-400);transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.q[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.q p{font-size:16px;line-height:1.65;padding:0 54px 26px 0;max-width:62ch}
/* ============ CTA + FOOTER ============ */
/* Same artwork as the figures block, mirrored so two appearances on one page do
not read as a repeat. The scrim is radial rather than two-axis: the content
here is centred, and the ghost button is nearly transparent, so the middle
has to stay dark while the image is allowed to breathe at the edges. */
.close{position:relative;overflow:hidden;isolation:isolate;background-color:var(--teal-900);color:var(--on-dark);padding:var(--pad-anchor) 0;text-align:center}
.close-art{position:absolute;inset:0;z-index:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scaleX(-1)}
.close-art::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 430px at 50% 50%, rgba(6,42,49,.95) 0%, rgba(6,42,49,.9) 62%, rgba(6,42,49,.34) 100%),linear-gradient(rgba(6,42,49,.16),rgba(6,42,49,.16))}
.close .wrap{position:relative;z-index:1}
.close h2{color:#fff;font-size:clamp(30px,4.6vw,54px);letter-spacing:-.035em;line-height:1.06;max-width:20ch;margin:0 auto;text-wrap:balance}
.close p{font-size:18.5px;color:var(--on-dark-muted);margin:22px auto 0;max-width:46ch}
.close-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}
.foot{background:var(--paper);padding:70px 0 38px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-brand{display:block;height:56px;color:var(--ink-900);text-decoration:none}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin:0 0 16px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a:not(.foot-brand){font-size:15px;color:var(--ink-600);text-decoration:none}
.foot a:not(.foot-brand):hover{color:var(--ink-900)}
.foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-400)}
/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
.nav-links{gap:20px}
.pins{display:none}
.stage-grid{grid-template-columns:290px minmax(0,1fr);gap:52px}
}
@media (max-width:1000px){
/* Unpin: a pinned two-column screen does not fit here. Everything is shown at
once instead — statute with the clause already highlighted, then the obligation,
then the task — which is the same story without the scrubbing. */
.track{height:auto}
.stage{position:static;min-height:0;padding:var(--pad-base) 0}
.stage-grid{grid-template-columns:1fr;gap:48px}
.d-zone{height:auto;overflow:visible;transition:none}
.d-src{margin-top:18px}
.d-out{margin-top:22px}
.d-full,.d-quote,.d-oblc,.d-taskc{position:static;transform:none;transition:none}
.d-quote,.d-oblc{display:none}
.d-taskc{opacity:1;height:auto}
.d-body mark{background:var(--amber-100);color:#4A2F00}
.d-kv{margin-top:20px}
.steps4 li{color:var(--ink-600);border-left-color:var(--teal-600)}
.msg{max-width:96%}
.p-grid,.foot-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:repeat(2,1fr)}
.thesis-in{grid-template-columns:1fr;gap:28px;align-items:start}
.thesis-lede{max-width:52ch;padding-bottom:0}
.nav-in{display:flex}
.nav-links{display:none}
.nav-end{margin-left:auto}
.reg-scroll,.cmp-scroll{overflow-x:auto}
#covTablePanel.reg-scroll{margin-top:24px;height:420px;max-height:420px;overflow-y:auto;overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--white)}
#covTablePanel .reg{margin-top:0;min-width:760px;border-collapse:separate;border-spacing:0}
#covTablePanel .reg th,#covTablePanel .reg td{padding-left:18px;padding-right:18px}
#covTablePanel .reg th:first-child,#covTablePanel .reg td:first-child{padding-left:22px}
#covTablePanel .reg th:last-child,#covTablePanel .reg td:last-child{padding-right:22px}
#covTablePanel .reg thead th{position:sticky;top:0;background:var(--white);z-index:2;padding-top:16px;box-shadow:0 1px 0 var(--border)}
#wmapTip .wmap-tip__meta[hidden]{display:none}
#wmapTip .wmap-tip__src[hidden]{display:none}
.fig-grid{grid-template-columns:repeat(2,1fr);row-gap:40px}
.fig{padding-right:24px}
.fig:nth-child(2n+1){border-left:0;padding-left:0}
.fig:nth-child(n+3){border-top:1px solid var(--on-dark-border);padding-top:36px}
.fig-l{max-width:28ch}
.claim{grid-template-columns:1fr;gap:10px}
.claim-n{line-height:.9}
}
@media (max-width:680px){
:root{--pad-base:80px;--pad-anchor:92px;--pad-tight:64px}
.wrap{padding:0 20px}
.hero{padding:118px 0 72px}
.d-body{font-size:12.5px;line-height:1.9}
.d-kv{grid-template-columns:1fr;gap:12px}
.d-obl-t{font-size:18px}
.hero-cta .btn,.close-btns .btn{flex:1 1 auto;justify-content:center}
}
/* Reduced motion: same static telling, no pinning and no scrubbing */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.track{height:auto}
.stage{position:static;min-height:0;padding:var(--pad-base) 0}
.d-zone{height:auto;overflow:visible;transition:none}
.d-src{margin-top:18px}
.d-out{margin-top:22px}
.d-full,.d-quote,.d-oblc,.d-taskc{position:static;transform:none;transition:none}
.d-quote,.d-oblc{display:none}
.d-taskc{opacity:1;height:auto}
.d-body mark{background:var(--amber-100);color:#4A2F00}
.d-kv{margin-top:20px}
.steps4 li{color:var(--ink-600);border-left-color:var(--teal-600);transition:none}
.au,.au.in{opacity:1;transform:none;transition:none}
.h1-cyc::after{display:none}
.rv [data-rv],.rv.in [data-rv]{opacity:1;transform:none;transition:none}
.mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
.mq{--mm:none;-webkit-mask-image:none;mask-image:none}
.mq-set:nth-child(2){display:none}
.mq-i{cursor:default}
.mq-i.is-active{border-color:var(--border);background:rgba(255,255,255,.84)}
}
/* ============ V3 REFINEMENT: shorter story, stronger product proof ============ */
.hero-v3{padding:154px 0 72px;min-height:auto;overflow:hidden}
.hero-v3 h1{max-width:26ch}
.hero-v3 .hero-lede{max-width:52ch}
.hero-proof{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-500)}
.hero-proof span{display:inline-flex;align-items:center;gap:9px}
.hero-proof i{width:6px;height:6px;border-radius:50%;background:var(--teal-600);box-shadow:0 0 0 4px rgba(0,149,170,.08)}
.signal-stage{position:relative;width:min(760px,94vw);margin:58px auto 0;padding:20px 0 34px}
.signal-aura{position:absolute;left:50%;top:46%;width:78%;height:54%;transform:translate(-50%,-50%) scale(.98);border-radius:50%;background:radial-gradient(ellipse,rgba(18,162,182,.16),rgba(201,191,82,.07) 42%,transparent 72%);filter:blur(24px);pointer-events:none;animation:signal-aura 9.6s ease-in-out infinite}
.signal-card{position:relative;overflow:hidden;text-align:left;background:rgba(255,255,255,.93);border:1px solid rgba(10,70,80,.13);border-radius:22px;padding:22px 24px 20px;box-shadow:0 28px 70px -46px rgba(6,42,49,.36);backdrop-filter:blur(12px);animation:signal-card-breathe 9.6s ease-in-out infinite}
.signal-top,.signal-source,.signal-foot{display:flex;align-items:center}
.signal-top{justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--border)}
.signal-live,.signal-fresh{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
.signal-live{display:flex;align-items:center;gap:8px;color:var(--ink-600)}
.signal-live i{width:7px;height:7px;border-radius:50%;background:var(--teal-600);box-shadow:0 0 0 0 rgba(0,149,170,.25);animation:signal-pulse 9.6s ease-out infinite}
.signal-fresh{position:relative;min-width:12.5ch;height:1.35em;color:var(--teal-700);text-align:right;overflow:hidden}
.signal-fresh span{position:absolute;right:0;top:0;white-space:nowrap;opacity:0;transform:translateY(4px)}
.signal-fresh .sf-detected{animation:signal-status-detected 9.6s ease-in-out infinite}
.signal-fresh .sf-analyzing{animation:signal-status-analyzing 9.6s ease-in-out infinite}
.signal-fresh .sf-updated{animation:signal-status-updated 9.6s ease-in-out infinite}
.signal-source{gap:13px;padding:20px 0 15px}
.signal-jur{width:36px;height:28px;border:1px solid var(--teal-100);border-radius:7px;background:var(--teal-50);display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--teal-700)}
.signal-domain{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);line-height:1.2}
.signal-source h3{font-size:17px;margin-top:2px;font-weight:600}
.signal-source-name{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-400)}
.signal-document{height:64px;position:relative;padding:7px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.signal-document span{display:block;height:5px;border-radius:4px;background:#E8ECEC;margin:7px 0;transform-origin:left;animation:signal-lines 9.6s ease-in-out infinite}
.signal-document span:nth-child(1){width:92%}.signal-document span:nth-child(2){width:78%}.signal-document span:nth-child(3){width:87%;animation-name:signal-clause}.signal-document span:nth-child(4){width:58%}
.signal-scan{position:absolute;left:0;right:0;top:-20px;height:24px;background:linear-gradient(180deg,transparent,rgba(18,162,182,.19),rgba(18,162,182,.04));border-bottom:1px solid rgba(18,162,182,.38);animation:signal-scan 9.6s cubic-bezier(.4,0,.2,1) infinite}
.signal-insight{padding:17px 0 16px;opacity:.18;transform:translateY(7px);animation:signal-insight 9.6s cubic-bezier(.2,.7,.3,1) infinite}
.signal-insight-k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-700)}
.signal-insight p{font-size:17px;line-height:1.45;color:var(--ink-900);font-weight:500;margin-top:5px;max-width:58ch}
.signal-foot{justify-content:space-between;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--ink-400)}
.signal-foot>span{opacity:.28;transform:translateY(3px);animation:signal-foot 9.6s ease-in-out infinite}
.signal-foot span:first-child{display:flex;align-items:center;gap:6px;color:var(--teal-700);font-weight:500}.signal-foot svg{width:13px;height:13px}
.signal-foot>span:last-child{animation-delay:.16s}
@keyframes signal-pulse{0%,5%{box-shadow:0 0 0 0 rgba(0,149,170,.30)}13%{box-shadow:0 0 0 9px rgba(0,149,170,0)}14%,100%{box-shadow:0 0 0 0 rgba(0,149,170,0)}}
@keyframes signal-aura{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(.98)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}38%{opacity:.92;transform:translate(-50%,-50%) scale(1)}62%,86%{opacity:.78;transform:translate(-50%,-50%) scale(.99)}}
@keyframes signal-card-breathe{0%,100%{transform:translateY(0)}10%{transform:translateY(-1px)}52%,88%{transform:translateY(0)}}
@keyframes signal-status-detected{0%,4%{opacity:0;transform:translateY(4px)}7%,17%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes signal-status-analyzing{0%,18%{opacity:0;transform:translateY(4px)}22%,43%{opacity:1;transform:none}47%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes signal-status-updated{0%,44%{opacity:0;transform:translateY(4px)}49%,93%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes signal-scan{0%,18%{transform:translateY(0);opacity:0}23%{opacity:1}42%{transform:translateY(90px);opacity:1}46%,100%{transform:translateY(90px);opacity:0}}
@keyframes signal-lines{0%,20%{opacity:.68;transform:scaleX(1)}39%,48%{opacity:.28;transform:scaleX(.988)}56%,94%{opacity:.38;transform:scaleX(.992)}100%{opacity:.68;transform:scaleX(1)}}
@keyframes signal-clause{0%,24%{opacity:.68;background:#E8ECEC;box-shadow:none;transform:scaleX(1)}30%,42%{opacity:1;background:var(--amber-100);box-shadow:0 0 0 3px rgba(232,159,0,.08);transform:scaleX(1.005)}49%,92%{opacity:.5;background:#DDEEEF;box-shadow:none;transform:scaleX(.995)}100%{opacity:.68;background:#E8ECEC;transform:scaleX(1)}}
@keyframes signal-insight{0%,38%{opacity:.16;transform:translateY(7px)}48%{opacity:.72;transform:translateY(2px)}56%,92%{opacity:1;transform:none}97%,100%{opacity:.16;transform:translateY(7px)}}
@keyframes signal-foot{0%,50%{opacity:.22;transform:translateY(3px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:.22;transform:translateY(3px)}}
.product-show{background:var(--paper);padding:112px 0;border-top:1px solid var(--border)}
.product-grid{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:80px;align-items:center}
.product-copy h2{max-width:14ch}.product-p{font-size:16.5px;line-height:1.65;margin-top:20px;max-width:39ch}
.product-points{margin-top:30px;border-top:1px solid var(--border)}
.product-points span{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--ink-600)}
.product-points b{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--teal-700)}
.answer-shell{position:relative}
.answer-shell::before{content:"";position:absolute;inset:12% 8%;background:radial-gradient(circle,rgba(18,162,182,.16),rgba(62,154,110,.08) 45%,transparent 70%);filter:blur(30px)}
.answer-window{position:relative;background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 30px 65px -44px rgba(6,42,49,.32)}
.answer-bar{height:52px;padding:0 18px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--ink-600)}
.answer-mark{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:var(--teal-900);color:#fff;font-size:12px}
.answer-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;color:var(--teal-700)}
.answer-status i{width:6px;height:6px;border-radius:50%;background:var(--teal-600)}
.answer-query{margin:18px 18px 0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--paper);border:1px solid var(--border);border-radius:12px;font-size:13.5px;color:var(--ink-900)}
.answer-query svg{width:16px;height:16px;color:var(--ink-400);flex:none}
.answer-body{padding:22px 24px 20px}
.answer-kicker{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
.answer-ai{color:var(--teal-700)}
.answer-body h3{font-size:20px;font-weight:600;margin-top:11px;max-width:27ch}.answer-body>p{font-size:14.5px;line-height:1.65;margin-top:10px;max-width:62ch}.answer-body mark{background:var(--amber-100);color:#4A2F00;padding:1px 3px;border-radius:3px}
.answer-source-row{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:20px;padding-top:15px;border-top:1px solid var(--border)}
.answer-source-row div{display:flex;flex-direction:column;gap:3px}.answer-source-k{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400)}.answer-source-row strong{font-size:12.5px;font-weight:500;color:var(--ink-900)}.answer-source-row a{font-size:12.5px;font-weight:500;color:var(--teal-700);text-decoration:none;white-space:nowrap}
.answer-compose{margin:0 18px 18px;padding:10px 10px 10px 14px;border:1px solid var(--border);border-radius:99px;display:flex;align-items:center;justify-content:space-between;color:var(--ink-400);font-size:12.5px}.answer-compose b{width:27px;height:27px;border-radius:50%;background:var(--teal-700);color:white;display:grid;place-items:center;font-size:14px}
.morph{border-top:1px solid var(--border)}
.track{height:calc(100vh + 1280px)}
.jobs{background:var(--white);padding:var(--pad-base) 0;border-top:1px solid var(--border)}
.jobs-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);gap:70px;align-items:end}.jobs-head>p{font-size:16px;line-height:1.65;max-width:46ch}
.jobs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}.job-card{min-height:220px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--paper);display:flex;flex-direction:column}.job-n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--teal-700)}.job-card h3{font-size:18px;font-weight:600;margin-top:auto;padding-top:44px}.job-card p{font-size:14px;line-height:1.55;margin-top:8px}
.role-strip{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}.role-strip span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-400);margin-right:5px}.role-strip b{font-size:12.5px;font-weight:500;color:var(--ink-600);border:1px solid var(--border);border-radius:99px;padding:6px 11px;background:var(--white)}
.jobs-head-simple{align-items:end}
.jobs-grid-simple{gap:12px;margin-top:38px}
.job-card-simple{min-height:154px;padding:22px;background:var(--paper)}
.job-card-simple .job-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-600);box-shadow:0 0 0 5px rgba(0,149,170,.08)}
.job-card-simple h3{margin-top:auto;padding-top:30px;font-size:17px}
.job-card-simple p{font-size:13.5px;line-height:1.5;max-width:24ch}
.cover{background:var(--paper);border-top:1px solid var(--border)}
.cover-head{align-items:flex-end}
.coverage-proof{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border:1px solid var(--border);border-radius:14px;background:var(--white);overflow:hidden}.coverage-proof div{padding:18px 20px;min-height:110px}.coverage-proof div+div{border-left:1px solid var(--border)}.coverage-proof strong{display:block;font-size:14px;color:var(--ink-900);font-weight:600}.coverage-proof span{display:block;font-size:12.5px;line-height:1.5;margin-top:5px;color:var(--ink-400)}
.map-row{margin-top:34px}
.verify{border-top:1px solid var(--border)}
.verify-in>.eyebrow,.verify-in>h2,.verify-p{max-width:560px}
.chatwin-badge{color:var(--teal-700)}
.close h2{max-width:19ch}
@media (max-width:1000px){.jobs-head{grid-template-columns:1fr;gap:20px}.jobs-grid{grid-template-columns:repeat(2,1fr)}.cover-head{gap:24px}.cover-head-copy{max-width:560px}}
@media (max-width:760px){.cover-head{display:block}.coverage-view-controls{justify-content:flex-start;margin-top:22px;padding-bottom:0}.map-row{margin-top:24px}}
/* V29 uploaded 3D hero cloud animation. */
/* Hero cloud. A 3D point field with real perspective, replacing the earlier flat
noise->order animation: depth (near dots bigger and brighter, far dots small and
faint) is what made the old globe read as dimensional, and a flat scatter could
not match it. Camera actually flies toward the focused node rather than the whole
picture being scaled, so nearby dots stream past and blur -- the part that cannot
be faked in 2D. */
.hero-cloud{
position:relative;width:min(940px,100%);height:440px;margin:24px auto 0;
--hcm:linear-gradient(to bottom,transparent 0%,#000 9%,#000 84%,transparent 100%);
-webkit-mask-image:var(--hcm);mask-image:var(--hcm);
}
.hero-cloud canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The label sits in a wrapper, not inside the pill: the pill needs overflow:hidden so
the name cannot spill out while it is still a small circle mid-morph, and that same
clip was cutting the category label off above it. */
.hc-wrap{position:absolute;left:0;top:0;z-index:6;pointer-events:none}
.hc-chip{
--hc-accent:var(--teal-700);
--hc-soft:rgba(18,162,182,.10);
position:absolute;left:0;top:0;transform:translate(-50%,-50%);
display:flex;align-items:center;justify-content:center;gap:9px;
padding:0 16px;
border-radius:50%;background:rgba(255,255,255,.965);
border:1.5px solid transparent;
box-shadow:0 10px 34px -12px rgba(6,42,49,.34);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:0;overflow:hidden;
}
.hc-wrap.domain .hc-chip{
--hc-accent:var(--teal-600);
--hc-soft:rgba(18,162,182,.10);
border-color:var(--teal-500);
}
.hc-wrap.instrument .hc-chip{
--hc-accent:var(--teal-800);
--hc-soft:rgba(6,42,49,.075);
border-color:var(--teal-800);
}
.hc-wrap.is-open .hc-chip{
opacity:1;
box-shadow:0 18px 48px -20px rgba(6,42,49,.42),0 0 0 5px rgba(255,255,255,.44);
animation:hcChipSettle .68s cubic-bezier(.22,.82,.24,1) both;
}
@keyframes hcChipSettle{
0%{transform:translate(-50%,-50%) scale(.965)}
72%{transform:translate(-50%,-50%) scale(1.025)}
100%{transform:translate(-50%,-50%) scale(1)}
}
.hc-chip-icon{
width:24px;height:24px;flex:0 0 24px;
display:grid;place-items:center;
color:var(--hc-accent);
opacity:0;
transform:translateX(-4px) scale(.84);
transition:opacity .26s ease .15s,transform .36s cubic-bezier(.2,.8,.2,1) .15s;
}
.hc-chip-icon svg{
width:20px;height:20px;display:block;
fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;
}
.hc-wrap.is-open .hc-chip-icon{opacity:1;transform:translateX(0) scale(1)}
.hc-text{
font-size:18px;font-weight:600;letter-spacing:-.012em;color:var(--ink-900);
white-space:nowrap;padding:0;opacity:0;
}
.hc-tag{
position:absolute;left:0;top:-46px;
transform:translate(-50%,4px);
font-family:var(--display);font-size:11.5px;font-weight:560;letter-spacing:.06em;line-height:1;
text-transform:uppercase;white-space:nowrap;opacity:0;
transition:opacity .28s ease .12s,transform .36s cubic-bezier(.2,.8,.2,1) .12s;
}
.hc-wrap.domain .hc-tag{color:var(--teal-600)}
.hc-wrap.instrument .hc-tag{color:var(--teal-800)}
.hc-wrap.is-open .hc-tag{opacity:1;transform:translate(-50%,0)}
@media(max-width:680px){
.hero-cloud{width:100%;height:330px;margin-top:24px}
.hc-chip{gap:8px;padding:0 13px}
.hc-chip-icon{width:21px;height:21px;flex-basis:21px}
.hc-chip-icon svg{width:17px;height:17px}
.hc-text{font-size:15px}
.hc-tag{top:-39px;font-size:9.8px;letter-spacing:.05em}
}
@media(prefers-reduced-motion:reduce){
.hc-tag,.hc-chip-icon{transition:none}
.hc-wrap.is-open .hc-chip{animation:none}
}
@media (max-width:680px){.hero-v3{padding:118px 0 64px}.hero-proof{gap:9px 15px}.signal-stage{margin-top:38px}.signal-card{padding:17px 17px 16px;border-radius:17px}.signal-source-name{display:none}.signal-insight p{font-size:15px}.signal-foot{gap:12px;align-items:flex-start}.jobs-grid{grid-template-columns:1fr}.job-card-simple{min-height:142px}.jobs-head{gap:14px}.wmap-controls{right:6px;top:6px}.wmap-ctl{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.signal-aura,.signal-card,.signal-live i,.signal-fresh span,.signal-document span,.signal-scan,.signal-insight,.signal-foot>span{animation:none}.signal-scan{display:none}.signal-aura{opacity:.8}.signal-card{transform:none}.signal-fresh .sf-updated{opacity:1;transform:none}.signal-fresh .sf-detected,.signal-fresh .sf-analyzing{opacity:0}.signal-document span{opacity:.42}.signal-document span:nth-child(3){background:#DDEEEF}.signal-insight,.signal-foot>span{opacity:1;transform:none}}
@media(max-width:560px){
.msg-footer{align-items:flex-start;flex-direction:column;gap:9px}
.chatwin-logo{height:56px;max-width:280px}
.ai-response-avatar{width:44px;height:44px;flex-basis:44px;border-radius:14px}
.ai-response-avatar img{width:33px;height:33px}
.ai-response-avatar.is-loading{width:32px;height:32px;flex-basis:32px;border-radius:10px}
.ai-response-avatar.is-loading img{width:23px;height:23px}
}
/* --- V118: Crimea / Ukraine map refinement --- */
.wmap path.ua-crimea-seam{
fill:none;
stroke:#D9E1E1;
stroke-width:3.2;
stroke-linecap:round;
stroke-linejoin:round;
pointer-events:none;
}
.wmap path.ua-crimea-bridge,
.wmap path.ua-crimea-fix{
fill:#D9E1E1;
stroke:none;
}
/* ===== Original inline style block 2 ===== */
/* Artwork inlined as WebP so this single file renders standalone. In production
replace with the shipped files, which are next to this document:
.art{background-image:image-set(url("bg.webp") type("image/webp"),
url("bg.jpg") type("image/jpeg"))}
Source is 2560x1463; WebP 44 KB, JPEG 4:4:4 139 KB (4:2:0 banded the gradients). */
.art{background-image:url("../assets/images/abstract-background.webp")}
/* ===== Original inline style block 3 ===== */
/* --- V5: make roadmap/reporting a true downstream output --- */
.d-feed{margin-top:14px;padding-top:0}
.d-feed-line{height:16px;position:relative;margin-left:18px}
.d-feed-line::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(var(--teal-500),rgba(18,162,182,.16))}
.d-feed-line span{position:absolute;left:-2.5px;bottom:-1px;width:6px;height:6px;border-radius:50%;background:var(--teal-500)}
.d-feed-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.035)}
.d-feed-k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);margin-right:2px}
.d-feed-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--on-dark)}
.d-feed-item + .d-feed-item{padding-left:9px;border-left:1px solid var(--on-dark-border)}
.d-feed-item svg{width:13px;height:13px;color:var(--teal-500)}
/* --- V5 capabilities: real UI snippets, not a generic feature grid --- */
.jobs-v5{background:var(--white);padding:var(--pad-base) 0;border-top:1px solid var(--border)}
.jobs-head-v5{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.7fr);gap:72px;align-items:end}
.jobs-head-v5 h2{max-width:15ch}
.jobs-head-v5>p{font-size:16px;line-height:1.65;max-width:47ch}
.cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:46px}
.cap-card{min-height:360px;border:1px solid var(--border);border-radius:18px;background:var(--paper);padding:24px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.cap-card::before{content:"";position:absolute;width:260px;height:180px;right:-70px;bottom:-70px;background:radial-gradient(circle,rgba(18,162,182,.10),transparent 68%);pointer-events:none}
.cap-copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;position:relative;z-index:1}
.cap-n{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--teal-700);padding-top:4px}
.cap-copy h3{font-size:18px;font-weight:600}
.cap-copy p{font-size:13.5px;line-height:1.55;margin-top:5px;max-width:36ch}
.cap-ui{position:relative;z-index:1;margin-top:auto;background:var(--white);border:1px solid var(--border);border-radius:13px;box-shadow:0 16px 36px -30px rgba(6,42,49,.28);overflow:hidden}
.cap-ui-search{padding:12px}
.cap-search-q{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;background:var(--paper);padding:10px 11px;font-size:12.5px;color:var(--ink-900)}
.cap-search-q svg{width:14px;height:14px;color:var(--ink-400);flex:none}
.cap-answer{margin-top:10px;padding:11px 12px;border-left:2px solid var(--teal-600);background:var(--teal-50);border-radius:7px}
.cap-answer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-400)}
.cap-answer-top b{font-weight:500;color:var(--teal-700)}
.cap-answer>p{font-size:13px;line-height:1.45;color:var(--ink-900);margin-top:8px}
.cap-link{display:inline-flex;gap:5px;margin-top:8px;font-size:11px;font-weight:500;color:var(--teal-700)}
.cap-ui-roadmap{padding:0}
.roadmap-top,.report-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--ink-900)}
.roadmap-top b,.report-top b{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-400);text-transform:uppercase}
.gantt{padding:12px 13px 13px}
.gantt-head,.gantt-row{display:grid;grid-template-columns:92px repeat(3,1fr);align-items:center;gap:10px}
.gantt-head{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.gantt-head span:first-child{color:transparent}
.gantt-row+.gantt-row{margin-top:10px}
.gantt-label{font-size:11px;font-weight:500;color:var(--ink-900);white-space:nowrap}
.gantt-cell{position:relative;height:18px;border-radius:99px;background:var(--paper);border:1px solid rgba(10,33,36,.04);overflow:hidden}
.gantt-bar{position:absolute;top:2px;bottom:2px;border-radius:99px}
.gantt-bar.teal{background:linear-gradient(90deg,rgba(18,162,182,.22),rgba(18,162,182,.65))}
.gantt-bar.gold{background:linear-gradient(90deg,rgba(232,159,0,.18),rgba(232,159,0,.58))}
.gantt-bar.mix{background:linear-gradient(90deg,rgba(18,162,182,.2),rgba(232,159,0,.5))}
.gantt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;color:var(--ink-400)}
.gantt-foot b{font-size:10.5px;font-weight:600;color:var(--ink-900)}
.cap-ui-monitor{padding:15px 16px}
.monitor-k{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8.7px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-700)}
.monitor-k i{width:6px;height:6px;border-radius:50%;background:var(--amber-500);box-shadow:0 0 0 4px var(--amber-100)}
.monitor-k span{margin-left:auto;color:var(--ink-400)}
.cap-ui-monitor h4{font-size:15px;font-weight:600;color:var(--ink-900);margin:14px 0 0}
.cap-ui-monitor>p{font-size:12.5px;line-height:1.45;margin-top:4px}
.monitor-impact{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:11px;border-top:1px solid var(--border);font-size:10.5px;color:var(--ink-400)}
.monitor-impact b{font-size:11.5px;font-weight:600;color:var(--ink-900)}
.cap-ui-report{padding-bottom:13px}
.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:14px 13px 12px}
.report-metrics div+div{border-left:1px solid var(--border);padding-left:12px}
.report-metrics strong{display:block;font-size:18px;line-height:1;color:var(--ink-900);letter-spacing:-.025em}
.report-metrics span{display:block;font-size:9.5px;line-height:1.35;color:var(--ink-400);margin-top:5px}
.report-bar{height:5px;margin:0 13px;background:var(--border);border-radius:99px;overflow:hidden}
.report-bar span{display:block;height:100%;background:var(--teal-600);border-radius:inherit}
/* --- V39: sticky copy + simple scrolling cards --- */
.jobs-v5{
padding:clamp(96px,8vw,132px) 0 110px;
overflow:visible;
}
.jobs-stack-layout{
display:grid;
grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr);
gap:clamp(56px,7vw,112px);
align-items:start;
}
/* Left narrative stays fixed while the feature cards scroll normally on the right. */
.jobs-head-v5{
position:sticky;
top:142px;
align-self:start;
display:block;
}
.jobs-head-v5 h2{
max-width:11ch;
font-size:clamp(34px,3.4vw,48px);
}
.jobs-head-v5>p{
max-width:36ch;
margin-top:22px;
font-size:16px;
line-height:1.68;
}
/* No stacked-card mechanics at all: cards remain in document flow. */
.cap-stack-track{
position:relative;
min-width:0;
height:auto;
}
.cap-grid{
display:flex;
flex-direction:column;
gap:28px;
position:relative;
margin:0;
padding:0;
}
.cap-grid::after{display:none!important}
.cap-card,
.cap-card + .cap-card,
.cap-card:not(:last-child){
position:relative;
top:auto;
inset:auto;
width:100%;
height:auto;
min-height:360px;
margin:0;
padding:26px;
transform:none!important;
opacity:1!important;
will-change:auto;
background:rgba(245,247,247,.995);
border:1px solid var(--border);
border-radius:18px;
box-shadow:0 20px 52px -40px rgba(6,42,49,.24);
overflow:hidden;
}
/* A little extra rhythm between cards keeps each capability easy to scan
while still allowing the left-side copy to feel like one continuous story. */
.cap-card + .cap-card{
margin-top:10px;
}
.cap-copy h3{font-size:20px}
.cap-copy p{font-size:14px;max-width:42ch}
.cap-ui{margin-top:28px}
.cap-research .cap-ui,
.cap-plan .cap-ui,
.cap-monitor .cap-ui,
.cap-report .cap-ui{margin-top:34px}
@media(max-width:1000px){
.jobs-v5{padding:88px 0}
.jobs-stack-layout{
grid-template-columns:minmax(240px,.72fr) minmax(430px,1.28fr);
gap:46px;
}
.jobs-head-v5{top:116px}
.jobs-head-v5 h2{font-size:36px}
.cap-grid{gap:24px}
.cap-card{min-height:340px}
}
@media(max-width:900px){
.jobs-stack-layout{display:block}
.jobs-head-v5{position:static}
.jobs-head-v5 h2{max-width:15ch}
.jobs-head-v5>p{margin-top:18px}
.cap-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:40px;
}
.cap-card,
.cap-card + .cap-card{
min-height:340px;
margin:0;
}
}
@media(max-width:680px){
.jobs-v5{padding:72px 0}
.cap-grid{grid-template-columns:1fr;margin-top:32px}
.cap-card{min-height:330px;padding:20px}
}
@media(prefers-reduced-motion:reduce){
.jobs-stack-layout{display:block}
.jobs-head-v5{position:static}
.cap-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:40px;
}
.cap-card,
.cap-card + .cap-card{
min-height:340px;
margin:0;
}
}
/* --- V46: heading rhythm refinements --- */
/* How it works: keep the heading large, but give the left copy enough room
for the intentional 2-line composition without shrinking the product visual. */
.hw-copy{
min-width:0;
}
.hw-h{
max-width:560px;
font-size:clamp(34px,2.9vw,44px);
line-height:1.06;
letter-spacing:-.03em;
}
/* Capabilities: visually align the main heading scale with How it works.
The text stays prominent, but no longer breaks almost word-by-word. */
.jobs-head-v5 h2{
max-width:520px;
font-size:clamp(36px,3.15vw,48px);
line-height:1.06;
letter-spacing:-.032em;
}
/* Preserve more width for the right-side product cards. */
.jobs-stack-layout{
grid-template-columns:minmax(320px,.78fr) minmax(540px,1.22fr);
gap:clamp(52px,6vw,92px);
}
@media(max-width:1180px){
.jobs-stack-layout{
grid-template-columns:minmax(290px,.76fr) minmax(500px,1.24fr);
gap:48px;
}
.jobs-head-v5 h2{
font-size:clamp(34px,3vw,44px);
max-width:470px;
}
.hw-h{
font-size:clamp(33px,2.8vw,42px);
max-width:520px;
}
}
@media(max-width:1000px){
.jobs-stack-layout{
grid-template-columns:minmax(250px,.75fr) minmax(430px,1.25fr);
gap:42px;
}
.jobs-head-v5 h2{
font-size:36px;
max-width:430px;
}
}
@media(max-width:900px){
.hw-h{
max-width:680px;
}
.jobs-head-v5 h2{
max-width:680px;
}
}
.hw-line{
display:block;
white-space:nowrap;
}
/* --- V49: compact, collision-safe How it works heading --- */
.morph .stage-grid{
grid-template-columns:360px minmax(0,1fr);
gap:72px;
}
.morph .hw-h{
max-width:360px;
font-size:clamp(28px,2.2vw,32px);
line-height:1.08;
letter-spacing:-.027em;
}
.morph .hw-line{
display:block;
white-space:nowrap;
}
@media(max-width:1180px){
.morph .stage-grid{
grid-template-columns:340px minmax(0,1fr);
gap:56px;
}
.morph .hw-h{
max-width:340px;
font-size:clamp(27px,2.35vw,30px);
}
}
@media(max-width:900px){
.morph .stage-grid{
grid-template-columns:1fr;
gap:34px;
}
.morph .hw-h{
max-width:100%;
font-size:clamp(29px,5vw,36px);
}
.morph .hw-line{
white-space:normal;
}
}
/* --- V56: one-line capability descriptions --- */
@media(min-width:901px){
.cap-copy > div{
min-width:0;
}
.cap-copy p{
max-width:none;
white-space:nowrap;
}
}
/* --- V64: hero typography consistency --- */
.hero .eyebrow{
font-family:var(--display);
}
.hero-proof{
font-family:var(--display);
margin-top:42px;
}
.hero-proof span{
font-size:14px;
}
.hero-proof span i{
background:#e89f00;
box-shadow:0 0 0 5px rgba(232,159,0,.12);
}
/* Keep the value chips visually connected to the point sphere:
more space after the CTA, less empty space before the visualization. */
.hero .hero-cloud{
margin-top:14px;
}
@media(max-width:680px){
.hero-proof{
margin-top:34px;
}
.hero .hero-cloud{
margin-top:18px;
}
}
/* --- V67: larger hero supporting copy --- */
.hero .hero-lede{
font-size:20px;
}
@media(max-width:680px){
.hero .hero-lede{
font-size:17px;
}
}
/* --- V75: slightly larger Accuracy action buttons --- */
.verify .chat-action-chip{
font-size:13.5px;
padding:9px 13px;
}
.verify .chat-action-chip svg{
width:12px;
height:12px;
}
/* --- V77: unified section captions --- */
.eyebrow{
font-family:var(--display);
font-size:15px;
}
/* --- V5 trust: Simplify -> Verify -> Act --- */
.verify-v5{background:var(--white);padding:var(--pad-base) 0;border-top:1px solid var(--border);background-image:radial-gradient(720px 440px at 6% 8%,rgba(18,118,125,.07),transparent 70%)}
.verify-v5-in{max-width:1200px}
.verify-v5-head{max-width:720px;margin:0 auto;text-align:center}
.verify-v5-head h2{font-size:clamp(30px,3.5vw,42px);max-width:22ch;margin:0 auto}
.verify-v5-head>p:last-child{font-size:16.5px;line-height:1.65;max-width:62ch;margin:20px auto 0}
.clarity-shell{margin-top:46px;border:1px solid var(--border);border-radius:20px;background:var(--white);overflow:hidden;box-shadow:0 1px 2px rgba(10,33,36,.03),0 26px 58px -40px rgba(6,42,49,.22)}
.clarity-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:15px 18px;border-bottom:1px solid var(--border);background:rgba(245,247,247,.72)}
.clarity-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-900)}
.clarity-spark{width:22px;height:22px;border-radius:7px;background:var(--teal-900);color:#fff;display:grid;place-items:center;font-size:12px}
.clarity-path{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}
.clarity-path span{color:var(--teal-700);font-weight:500}
.clarity-path i{font-style:normal;color:var(--ink-400)}
.clarity-fresh{justify-self:end;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;color:var(--ink-400)}
.clarity-fresh i{width:6px;height:6px;border-radius:50%;background:var(--teal-600);box-shadow:0 0 0 4px rgba(0,149,170,.08)}
.clarity-grid{display:grid;grid-template-columns:minmax(0,1.08fr) 48px minmax(0,.92fr) 48px minmax(0,.82fr);gap:0;align-items:stretch;padding:28px}
.clarity-step{min-width:0}
.clarity-label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);margin-bottom:11px}
.clarity-label span{color:var(--teal-700)}
.source-doc,.simple-card,.verified-card{height:100%;border:1px solid var(--border);border-radius:13px;background:var(--paper);padding:16px}
.source-doc-meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-400);padding-bottom:11px;border-bottom:1px solid var(--border)}
.source-doc-meta b{font-weight:500;color:var(--ink-600)}
.source-doc p{font-family:var(--mono);font-size:11px;line-height:1.78;color:var(--ink-600);margin-top:13px}
.source-doc mark{background:var(--amber-100);color:#4A2F00;padding:1px 2px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.simple-card{background:var(--teal-50);border-color:var(--teal-100);border-left:2px solid var(--teal-600)}
.simple-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}
.simple-card h3{font-size:18px;line-height:1.38;font-weight:600;margin-top:12px}
.simple-card>p{font-size:12px;line-height:1.55;margin-top:9px}
.simple-source{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding-top:12px;border-top:1px solid var(--teal-100);font-family:var(--mono);font-size:9px;color:var(--ink-400)}
.simple-source b{font-weight:500;color:var(--teal-700)}
.verified-card{background:var(--teal-900);border-color:var(--teal-900);display:flex;flex-direction:column;color:var(--on-dark)}
.verified-state{display:flex;gap:10px;align-items:flex-start}
.verified-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(18,162,182,.16);border:1px solid rgba(18,162,182,.3);color:var(--teal-500);font-size:13px}
.verified-state b{display:block;font-size:13px;font-weight:600;color:#fff}
.verified-state div span{display:block;font-size:10.5px;line-height:1.45;color:var(--on-dark-muted);margin-top:3px}
.verified-meta{display:flex;flex-direction:column;gap:4px;margin-top:18px;padding-top:13px;border-top:1px solid var(--on-dark-border);font-family:var(--mono);font-size:9px;color:var(--on-dark-muted)}
.verified-meta b{font-weight:500;color:var(--on-dark)}
.verified-action{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border-radius:9px;background:var(--teal-600);color:#fff;text-decoration:none;font-size:11.5px;font-weight:600}
.verified-action span{font-size:15px}
.clarity-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-400)}
.clarity-arrow span{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.clarity-arrow svg{width:20px;height:20px;color:var(--teal-600)}
.clarity-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);background:var(--paper)}
.clarity-foot span{padding:14px 18px;font-size:11.5px;color:var(--ink-600);text-align:center}
.clarity-foot span+span{border-left:1px solid var(--border)}
.clarity-foot b{font-weight:600;color:var(--ink-900)}
@media(max-width:1000px){
.jobs-head-v5{grid-template-columns:1fr;gap:20px}.cap-grid{grid-template-columns:1fr 1fr}.cap-card{min-height:340px}
.clarity-top{grid-template-columns:1fr auto}.clarity-path{display:none}.clarity-grid{grid-template-columns:1fr;gap:14px;padding:22px}.clarity-arrow{height:22px;flex-direction:row}.clarity-arrow svg{transform:rotate(90deg)}.clarity-step{min-height:0}.source-doc,.simple-card,.verified-card{height:auto}.verified-action{margin-top:18px}.clarity-foot{grid-template-columns:1fr}.clarity-foot span+span{border-left:0;border-top:1px solid var(--border)}
}
@media(max-width:680px){
.cap-grid{grid-template-columns:1fr}.cap-card{min-height:330px;padding:20px}.jobs-head-v5{gap:14px}.jobs-head-v5>p{font-size:15px}.clarity-top{grid-template-columns:1fr}.clarity-fresh{justify-self:start}.clarity-grid{padding:16px}.clarity-shell{margin-top:34px}.verify-v5-head{text-align:left}.verify-v5-head h2{margin-left:0}.verify-v5-head>p:last-child{margin-left:0}.d-feed-item + .d-feed-item{padding-left:0;border-left:0}
}
/* --- V30: How it works in dark theme --- */
.morph{background:var(--teal-900);color:var(--on-dark)}
.morph .stage{background:var(--teal-900)}
.morph .hw .eyebrow{color:var(--teal-400)}
.morph .hw-h{color:#fff}
.morph .hw-p{color:var(--on-dark-muted)}
.morph .steps4{border-top-color:var(--on-dark-border)}
.morph .steps4 li{
color:rgba(233,244,245,.56);
border-bottom-color:var(--on-dark-border);
border-left-color:transparent;
}
.morph .steps4 li:hover{background:rgba(255,255,255,.045)}
.morph .steps4 li:focus-within{outline-color:var(--teal-400)}
.morph .steps4 b{color:inherit}
.morph .steps4 span{color:inherit}
/* Completed steps remain visible but subdued; the current step gets the bright
type + teal rail seen in the reference. */
.morph .stage[data-s="2"] .steps4 li:nth-child(-n+1),
.morph .stage[data-s="3"] .steps4 li:nth-child(-n+2),
.morph .stage[data-s="4"] .steps4 li:nth-child(-n+3){color:rgba(233,244,245,.72)}
.morph .stage[data-s="1"] .steps4 li:nth-child(1),
.morph .stage[data-s="2"] .steps4 li:nth-child(2),
.morph .stage[data-s="3"] .steps4 li:nth-child(3),
.morph .stage[data-s="4"] .steps4 li:nth-child(4){
color:#fff;
border-left-color:var(--teal-400);
background:rgba(255,255,255,.035);
}
/* Keep the product transformation surface deliberately light for contrast against
the dark section rather than darkening the UI itself. */
.morph .demo{
background:#fff;
border-color:rgba(255,255,255,.28);
box-shadow:0 28px 70px -38px rgba(0,0,0,.42);
}
@media(max-width:1000px){
.morph .steps4 li{color:rgba(233,244,245,.68);border-left-color:var(--teal-400)}
.morph .steps4 li:hover{background:rgba(255,255,255,.04)}
}
@media(prefers-reduced-motion:reduce){
.morph .steps4 li{color:rgba(233,244,245,.68);border-left-color:var(--teal-400)}
}
/* --- V99: a little more breathing room inside the Accuracy chat --- */
.verify .chatwin-h{
padding:18px 24px;
}
.verify .crow{
padding-left:24px;
padding-right:24px;
margin-top:24px;
}
.verify .msg{
padding:12px 16px;
}
.verify .msg-ai{
padding:17px 19px;
}
.verify .msg-footer{
margin-top:14px;
padding-top:12px;
}
.verify .chat-next-loader{
margin-top:16px;
}
.verify .chat-actions{
margin-top:18px;
padding-top:16px;
}
.verify .chat-compose{
margin:30px 24px 24px;
padding:11px 9px 11px 16px;
}
@media(max-width:560px){
.verify .chatwin-h{
padding:16px 18px;
}
.verify .crow{
padding-left:18px;
padding-right:18px;
margin-top:20px;
}
.verify .chat-compose{
margin:26px 18px 18px;
}
}
/* --- V100: white ChatGPT-like input --- */
.verify .chat-compose{
background:#ffffff;
border:1px solid rgba(10,33,36,.09);
box-shadow:
0 1px 2px rgba(10,33,36,.04),
0 10px 24px -18px rgba(10,33,36,.18);
}
.verify .chat-compose span:first-child{
color:rgba(89,111,114,.72);
}
.verify .compose-send{
box-shadow:
0 1px 2px rgba(10,33,36,.10),
0 8px 18px -12px rgba(18,162,182,.35);
}
/* --- V101: final CTA yellow highlight --- */
.close .cta-yellow{
color:#e89f00;
}
/* --- V104: Capabilities use real application UI screenshots --- */
.cap-ui-shot{
padding:0 !important;
border-radius:14px;
background:#fff;
aspect-ratio:1200 / 440;
}
.cap-ui-shot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:inherit;
}
.cap-research .cap-ui,
.cap-plan .cap-ui,
.cap-monitor .cap-ui,
.cap-report .cap-ui{
margin-top:34px;
}
@media(max-width:860px){
.cap-ui-shot{
aspect-ratio:1200 / 440;
}
}
/* --- V107: aligned Pricing cards --- */
.price .p-grid{
align-items:stretch;
}
.price .p{
display:flex;
flex-direction:column;
height:100%;
}
.price .p ul{
margin-bottom:26px;
}
.price .p .btn{
margin-top:auto;
}
.price .p-badge{
background:var(--teal-600);
color:#fff;
}
/* --- V113: Coverage table uses a true fixed-height scroll viewport --- */
#covTablePanel.reg-scroll{
height:420px !important;
max-height:420px !important;
overflow-y:auto !important;
overflow-x:auto !important;
position:relative;
scrollbar-gutter:stable;
overscroll-behavior:contain;
}
#covTablePanel .reg{
margin:0;
width:100%;
min-width:760px;
height:auto;
border-collapse:separate;
border-spacing:0;
}
#covTablePanel .reg thead th{
position:sticky !important;
top:0;
z-index:10;
background:#fff;
box-shadow:0 1px 0 var(--border);
}
@media(max-width:680px){
#covTablePanel.reg-scroll{
height:360px !important;
max-height:360px !important;
}
}
/* --- V114: map tooltip hidden states --- */
#wmapTip .wmap-tip__meta[hidden],
#wmapTip .wmap-tip__src[hidden]{
display:none !important;
}
/* --- V115: stable Map/Table coverage viewport --- */
#covTablePanel.reg-scroll{
margin-top:34px !important;
height:var(--coverage-map-height, 520px) !important;
max-height:var(--coverage-map-height, 520px) !important;
min-height:0 !important;
overflow-y:auto !important;
overflow-x:auto !important;
background:transparent !important;
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:rgba(0,113,133,.26) transparent;
scrollbar-gutter:stable;
}
#covTablePanel .reg{
background:transparent;
}
#covTablePanel .reg thead th{
position:sticky !important;
top:0;
z-index:10;
background:var(--paper) !important;
box-shadow:0 1px 0 var(--border);
}
#covTablePanel::-webkit-scrollbar{
width:6px;
height:6px;
}
#covTablePanel::-webkit-scrollbar-track{
background:transparent;
}
#covTablePanel::-webkit-scrollbar-thumb{
background:rgba(0,113,133,.24);
border-radius:999px;
}
#covTablePanel::-webkit-scrollbar-thumb:hover{
background:rgba(0,113,133,.42);
}
#covTablePanel::-webkit-scrollbar-corner{
background:transparent;
}
@media(max-width:760px){
#covTablePanel.reg-scroll{
margin-top:24px !important;
}
}
/* --- V123: AI Consultant chat avatar refinement --- */
#accuracy .chatwin{
padding-top:2px;
}
#accuracy .crow{
gap:12px;
}
#accuracy .ai-response-avatar,
#accuracy .cav-user{
width:48px;
height:48px;
flex:0 0 48px;
border-radius:15px;
box-sizing:border-box;
background:transparent;
border:1px solid rgba(10,33,36,.14);
box-shadow:none;
display:grid;
place-items:center;
}
#accuracy .ai-response-avatar img,
#accuracy .cav-user .cav-i{
width:28px;
height:28px;
display:block;
}
#accuracy .ai-response-avatar img{
object-fit:contain;
filter:none;
}
#accuracy .cav-user{
color:var(--teal-700);
}
#accuracy .ai-response-avatar.is-loading{
width:36px;
height:36px;
flex:0 0 36px;
border-radius:12px;
background:transparent;
border:1px solid rgba(10,33,36,.12);
box-shadow:none;
}
#accuracy .ai-response-avatar.is-loading img{
width:22px;
height:22px;
filter:none;
}
@media(max-width:560px){
#accuracy .ai-response-avatar,
#accuracy .cav-user{
width:44px;
height:44px;
flex-basis:44px;
border-radius:14px;
}
#accuracy .ai-response-avatar img,
#accuracy .cav-user .cav-i{
width:26px;
height:26px;
}
#accuracy .ai-response-avatar.is-loading{
width:34px;
height:34px;
flex-basis:34px;
border-radius:11px;
}
#accuracy .ai-response-avatar.is-loading img{
width:21px;
height:21px;
}
}
/* --- V124: AI Consultant avatar tuning --- */
#accuracy .cav-user{
background:rgba(18,162,182,.10);
border:1px solid rgba(18,162,182,.14);
color:var(--teal-700);
}
#accuracy .cav-user .cav-i{
width:22px;
height:22px;
stroke-width:1.75;
}
#accuracy .ai-response-avatar img{
width:38px;
height:38px;
}
#accuracy .ai-response-avatar.is-loading img{
width:26px;
height:26px;
}
@media(max-width:560px){
#accuracy .cav-user .cav-i{
width:21px;
height:21px;
stroke-width:1.7;
}
#accuracy .ai-response-avatar img{
width:35px;
height:35px;
}
#accuracy .ai-response-avatar.is-loading img{
width:24px;
height:24px;
}
}
/* --- V129: exact brand SVG + clearly visible internal gradient motion --- */
#accuracy .ai-response-avatar{
--spark-size:38px;
position:relative;
display:grid;
place-items:center;
overflow:visible;
isolation:isolate;
}
#accuracy .ai-response-avatar.is-loading{
--spark-size:26px;
}
#accuracy .ai-response-avatar .brand-sparkle-original,
#accuracy .ai-response-avatar .brand-sparkle-motion{
position:absolute;
left:50%;
top:50%;
width:var(--spark-size);
height:var(--spark-size);
transform:translate(-50%,-50%);
display:block;
}
#accuracy .ai-response-avatar .brand-sparkle-original{
z-index:1;
object-fit:contain;
filter:none;
}
#accuracy .ai-response-avatar .brand-sparkle-motion{
z-index:2;
overflow:visible;
pointer-events:none;
mix-blend-mode:screen;
}
@media(prefers-reduced-motion:reduce){
#accuracy .ai-response-avatar .brand-sparkle-motion{
display:none;
}
}
/* --- V130: keep animated sparkle strictly inside avatar box --- */
#accuracy .ai-response-avatar{
position:relative !important;
overflow:hidden !important;
contain:layout paint !important;
isolation:isolate !important;
}
#accuracy .brand-sparkle-stage{
position:relative !important;
display:block !important;
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
overflow:hidden !important;
border-radius:10px;
line-height:0 !important;
}
#accuracy .ai-response-avatar.is-loading .brand-sparkle-stage{
width:26px !important;
height:26px !important;
flex-basis:26px !important;
border-radius:8px;
}
#accuracy .brand-sparkle-stage > .brand-sparkle-original,
#accuracy .brand-sparkle-stage > .brand-sparkle-motion{
position:absolute !important;
inset:0 !important;
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
min-width:0 !important;
min-height:0 !important;
transform:none !important;
margin:0 !important;
padding:0 !important;
display:block !important;
}
#accuracy .brand-sparkle-stage > .brand-sparkle-original{
z-index:1 !important;
object-fit:contain !important;
}
#accuracy .brand-sparkle-stage > .brand-sparkle-motion{
z-index:2 !important;
overflow:hidden !important;
pointer-events:none !important;
mix-blend-mode:screen;
}
/* --- V131: stronger perimeter gradient circulation inside exact brand sparkle --- */
#accuracy .brand-sparkle-stage > .brand-sparkle-motion{
z-index:2 !important;
overflow:hidden !important;
pointer-events:none !important;
mix-blend-mode:screen;
opacity:.98;
}
#accuracy .brand-sparkle-stage > .brand-sparkle-original{
z-index:1 !important;
object-fit:contain !important;
opacity:1;
}
/* --- V134: larger ChatGPT-like send button --- */
#accuracy .chat-compose{
padding:8px 8px 8px 16px;
min-height:54px;
box-sizing:border-box;
}
#accuracy .compose-send{
width:38px;
height:38px;
flex:0 0 38px;
border-radius:50%;
background:var(--teal-700);
color:#fff;
display:grid;
place-items:center;
box-shadow:
0 1px 2px rgba(10,33,36,.10),
0 8px 18px -12px rgba(18,162,182,.35);
}
#accuracy .compose-send .send-i{
width:18px;
height:18px;
stroke-width:2.15;
}
@media(max-width:560px){
#accuracy .compose-send{
width:36px;
height:36px;
flex-basis:36px;
}
#accuracy .compose-send .send-i{
width:17px;
height:17px;
}
}
/* --- V135: FAQ hover + active states --- */
#faq .q{
position:relative;
transition:
background-color .18s ease,
border-color .18s ease;
}
#faq .q::before{
content:"";
position:absolute;
left:0;
right:0;
top:-1px;
height:2px;
background:var(--teal-600);
transform:scaleX(0);
transform-origin:left center;
transition:transform .24s ease;
pointer-events:none;
}
#faq .q summary{
transition:
color .18s ease,
padding-left .18s ease;
}
/* Soft hover: enough feedback to make the row feel interactive,
without turning the FAQ into a card list. */
#faq .q:not([open]):hover{
background:rgba(18,162,182,.025);
}
#faq .q:not([open]):hover summary{
color:var(--teal-700);
padding-left:6px;
}
/* Small rounded container behind the existing chevron. */
#faq .q summary::before{
content:"";
position:absolute;
right:0;
top:50%;
width:30px;
height:30px;
border-radius:10px;
border:1px solid transparent;
background:transparent;
transform:translateY(-50%);
transition:
background-color .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#faq .q summary::after{
right:10px;
z-index:1;
transition:
transform .2s ease,
border-color .18s ease;
}
#faq .q:not([open]):hover summary::before{
background:rgba(18,162,182,.065);
border-color:rgba(18,162,182,.10);
}
#faq .q:not([open]):hover summary::after{
border-color:var(--teal-700);
}
/* Active / open state */
#faq .q[open]{
background:
linear-gradient(90deg,
rgba(18,162,182,.045) 0%,
rgba(18,162,182,.018) 48%,
rgba(18,162,182,0) 88%);
}
#faq .q[open]::before{
transform:scaleX(1);
}
#faq .q[open] summary{
color:var(--teal-800);
font-weight:600;
}
#faq .q[open] summary::before{
background:rgba(18,162,182,.085);
border-color:rgba(18,162,182,.14);
}
#faq .q[open] summary::after{
border-color:var(--teal-700);
}
#faq .q[open] p{
color:var(--ink-600);
}
@media(prefers-reduced-motion:reduce){
#faq .q,
#faq .q::before,
#faq .q summary,
#faq .q summary::before,
#faq .q summary::after{
transition:none;
}
}
/* --- V136: FAQ spacing + shared text axis --- */
#faq .q summary{
padding:24px 60px 24px 18px;
}
/* Keep hover feedback without shifting the question off the answer's axis. */
#faq .q:not([open]):hover summary{
padding-left:18px;
}
#faq .q p{
padding:0 60px 26px 18px;
max-width:62ch;
}
/* Keep question + answer on exactly the same vertical text line. */
#faq .q summary,
#faq .q p{
box-sizing:border-box;
}
#faq .q summary::before{
right:14px;
}
#faq .q summary::after{
right:24px;
}
@media(max-width:560px){
#faq .q summary{
padding:21px 54px 21px 14px;
}
#faq .q:not([open]):hover summary{
padding-left:14px;
}
#faq .q p{
padding:0 54px 23px 14px;
}
#faq .q summary::before{
right:10px;
}
#faq .q summary::after{
right:20px;
}
}
/* --- V137: smooth FAQ accordion motion --- */
#faq .faq-answer-panel{
overflow:hidden;
will-change:height,opacity,transform;
}
#faq .faq-answer-panel > p{
margin:0;
}
@media(prefers-reduced-motion:reduce){
#faq .faq-answer-panel{
transition:none !important;
transform:none !important;
}
}
/* --- V138: final CTA single larger primary action --- */
.close .close-primary{
font-size:16px;
padding:13px 30px;
min-height:48px;
}
/* --- V139: gold accent for final CTA heading --- */
.close .close-accent-gold{
color: #FCC502;
}
/* --- V140: expanded footer with contact details + open contact form --- */
.foot{
background:var(--paper);
padding:76px 0 34px;
}
.foot-grid-v140{
display:grid;
grid-template-columns:minmax(230px,1.2fr) minmax(140px,.65fr) minmax(130px,.55fr) minmax(360px,1.55fr);
gap:46px;
align-items:start;
}
.foot-contact-col{
min-width:0;
}
.foot-brand{
width:max-content;
max-width:100%;
}
.foot-contact-intro{
margin:18px 0 0;
max-width:30ch;
font-size:14.5px;
line-height:1.55;
color:var(--ink-500);
}
.foot-contact-list{
display:grid;
gap:11px;
margin-top:25px;
}
.foot-contact-item,
.foot a.foot-contact-item{
display:flex;
align-items:flex-start;
gap:10px;
width:max-content;
max-width:100%;
font-size:14px;
line-height:1.45;
color:var(--ink-600);
text-decoration:none;
}
.foot a.foot-contact-item:hover{
color:var(--teal-700);
}
.foot-contact-icon{
display:grid;
place-items:center;
width:20px;
height:20px;
flex:0 0 20px;
margin-top:1px;
color:var(--teal-700);
}
.foot-contact-icon svg{
width:17px;
height:17px;
}
.foot-socials{
display:flex;
gap:8px;
margin-top:24px;
}
.foot a.foot-social{
display:grid;
place-items:center;
width:36px;
height:36px;
border:1px solid var(--border);
border-radius:11px;
background:rgba(255,255,255,.66);
color:var(--ink-600);
transition:
color .18s ease,
background-color .18s ease,
border-color .18s ease,
transform .18s ease;
}
.foot a.foot-social:hover{
color:var(--teal-700);
background:var(--teal-50);
border-color:rgba(18,162,182,.18);
transform:translateY(-1px);
}
.foot-social svg{
width:17px;
height:17px;
}
.foot-nav-col{
min-width:0;
}
.foot-form-col{
padding:26px;
border:1px solid rgba(10,70,80,.10);
border-radius:20px;
background:rgba(255,255,255,.66);
box-shadow:0 22px 50px -40px rgba(6,42,49,.22);
}
.foot-form-head{
margin-bottom:22px;
}
.foot-form-eyebrow{
margin:0 0 8px;
font-family:var(--mono);
font-size:10.5px;
line-height:1;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--teal-700);
}
.foot-form-head h3{
margin:0;
font-size:23px;
line-height:1.15;
letter-spacing:-.025em;
color:var(--ink-900);
}
.foot-form-head > p:last-child{
margin:9px 0 0;
max-width:42ch;
font-size:14px;
line-height:1.55;
color:var(--ink-500);
}
.foot-form{
display:grid;
gap:14px;
}
.foot-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.foot-form label{
display:grid;
gap:7px;
}
.foot-form label > span{
font-size:12px;
font-weight:500;
color:var(--ink-600);
}
.foot-form input,
.foot-form textarea{
width:100%;
box-sizing:border-box;
border:1px solid rgba(10,70,80,.12);
border-radius:11px;
background:#fff;
color:var(--ink-900);
font:inherit;
font-size:14px;
outline:none;
transition:
border-color .18s ease,
box-shadow .18s ease,
background-color .18s ease;
}
.foot-form input{
height:44px;
padding:0 13px;
}
.foot-form textarea{
min-height:104px;
padding:11px 13px;
resize:vertical;
line-height:1.5;
}
.foot-form input::placeholder,
.foot-form textarea::placeholder{
color:var(--ink-400);
}
.foot-form input:focus,
.foot-form textarea:focus{
border-color:rgba(18,162,182,.46);
box-shadow:0 0 0 3px rgba(18,162,182,.08);
}
.foot-form-actions{
display:flex;
align-items:center;
gap:14px;
min-height:42px;
margin-top:2px;
}
.foot-form-submit{
min-height:42px;
padding:10px 18px;
border:0;
cursor:pointer;
font:inherit;
font-size:14px;
}
.foot-form-submit span{
font-size:16px;
}
.foot-form-status{
margin:0;
font-size:12.5px;
line-height:1.4;
color:var(--teal-700);
}
.foot-base{
margin-top:48px;
}
@media(max-width:1180px){
.foot-grid-v140{
grid-template-columns:1.2fr .7fr .65fr;
}
.foot-form-col{
grid-column:1 / -1;
max-width:720px;
}
}
@media(max-width:760px){
.foot{
padding-top:62px;
}
.foot-grid-v140{
grid-template-columns:1fr 1fr;
gap:38px 28px;
}
.foot-contact-col,
.foot-form-col{
grid-column:1 / -1;
}
.foot-form-col{
max-width:none;
}
}
@media(max-width:520px){
.foot-grid-v140{
grid-template-columns:1fr;
}
.foot-contact-col,
.foot-form-col{
grid-column:auto;
}
.foot-form-row{
grid-template-columns:1fr;
}
.foot-form-col{
padding:20px;
border-radius:17px;
}
.foot-form-actions{
align-items:flex-start;
flex-direction:column;
}
}
/* --- V141: refined footer composition --- */
.foot{
padding:68px 0 30px;
}
.foot-grid-v140{
display:grid;
grid-template-columns:minmax(280px,1.05fr) minmax(280px,.9fr) minmax(420px,1.2fr);
gap:48px;
align-items:start;
}
.foot-contact-col{
max-width:340px;
}
.foot-contact-intro{
margin:18px 0 0;
max-width:26ch;
}
.foot-contact-list{
gap:12px;
margin-top:24px;
}
.foot-contact-item,
.foot a.foot-contact-item{
width:100%;
max-width:100%;
}
.foot-contact-item span:last-child{
display:block;
}
.foot-socials{
margin-top:24px;
}
.foot-links-cluster{
padding-top:6px;
}
.foot-links-grid{
display:grid;
grid-template-columns:minmax(150px,1fr) minmax(130px,.9fr);
gap:36px;
align-items:start;
}
.foot-nav-col h4{
margin:0 0 16px;
}
.foot-nav-col ul{
display:grid;
gap:14px;
margin:0;
padding:0;
list-style:none;
}
.foot-nav-col li{
margin:0;
padding:0;
}
.foot-nav-col a{
display:inline-block;
line-height:1.35;
}
.foot-form-col{
max-width:100%;
padding:28px;
border-radius:22px;
}
.foot-form-head{
margin-bottom:20px;
}
.foot-form-head h3{
margin:0;
}
.foot-form-head > p:last-child{
max-width:34ch;
}
.foot-form{
gap:13px;
}
.foot-form-row{
gap:12px;
}
.foot-form input{
height:46px;
}
.foot-form textarea{
min-height:118px;
}
.foot-form-actions{
margin-top:4px;
}
.foot-base{
margin-top:42px;
padding-top:20px;
border-top:1px solid rgba(10,70,80,.08);
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}
.foot-base span:last-child{
max-width:620px;
}
@media(max-width:1180px){
.foot-grid-v140{
grid-template-columns:minmax(260px,1fr) minmax(260px,.95fr);
gap:42px 36px;
}
.foot-form-col{
grid-column:1 / -1;
max-width:760px;
}
}
@media(max-width:860px){
.foot{
padding:60px 0 28px;
}
.foot-grid-v140{
grid-template-columns:1fr;
gap:36px;
}
.foot-contact-col{
max-width:none;
}
.foot-links-cluster{
padding-top:0;
}
.foot-links-grid{
grid-template-columns:1fr 1fr;
gap:28px;
max-width:520px;
}
.foot-form-col{
grid-column:auto;
max-width:none;
}
}
@media(max-width:560px){
.foot-links-grid{
grid-template-columns:1fr;
gap:24px;
}
.foot-form-col{
padding:22px;
border-radius:18px;
}
.foot-base{
margin-top:34px;
padding-top:18px;
}
}
/* --- V142: compact footer with form band below --- */
.foot{
padding:66px 0 30px;
}
.foot-top-v142{
display:grid;
grid-template-columns:minmax(300px,1.05fr) minmax(340px,.95fr);
gap:64px;
align-items:start;
}
.foot-contact-col{
max-width:360px;
}
.foot-links-cluster{
padding-top:8px;
}
.foot-links-grid{
display:grid;
grid-template-columns:minmax(170px,1fr) minmax(140px,.8fr);
gap:48px;
align-items:start;
max-width:430px;
}
.foot-contact-band{
margin-top:42px;
}
.foot-contact-band-inner{
padding:26px 28px;
border:1px solid rgba(10,70,80,.10);
border-radius:22px;
background:rgba(255,255,255,.68);
box-shadow:0 22px 50px -42px rgba(6,42,49,.20);
}
.foot-form-col{
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
max-width:none;
display:grid;
grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
gap:28px;
align-items:start;
}
.foot-form-head{
margin-bottom:0;
padding-top:4px;
}
.foot-form-head > p:last-child{
max-width:30ch;
}
.foot-form{
display:grid;
gap:12px;
}
.foot-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.foot-form > label:nth-of-type(1){
margin-top:0;
}
.foot-form label{
display:grid;
gap:7px;
}
.foot-form > label:nth-of-type(2){
grid-column:1 / -1;
}
.foot-form > label:nth-of-type(2) textarea{
min-height:96px;
}
.foot-form-actions{
margin-top:2px;
}
.foot-form-submit{
min-height:44px;
padding:11px 18px;
}
.foot-base{
margin-top:34px;
}
@media(max-width:1100px){
.foot-top-v142{
grid-template-columns:1fr;
gap:34px;
}
.foot-links-grid{
max-width:none;
}
.foot-form-col{
grid-template-columns:1fr;
gap:20px;
}
}
@media(max-width:720px){
.foot{
padding-top:58px;
}
.foot-contact-band{
margin-top:34px;
}
.foot-contact-band-inner{
padding:22px;
border-radius:18px;
}
}
@media(max-width:560px){
.foot-links-grid{
grid-template-columns:1fr;
gap:26px;
}
.foot-form-row{
grid-template-columns:1fr;
}
.foot-form > label:nth-of-type(2) textarea{
min-height:110px;
}
}
/* --- V143: larger contact intro + floating-label underline fields --- */
.foot-form-col{
grid-template-columns:minmax(270px,.82fr) minmax(0,1.18fr);
gap:42px;
}
.foot-form-head{
padding-top:2px;
}
.foot-form-eyebrow{
margin-bottom:11px;
font-size:11px;
letter-spacing:.13em;
}
.foot-form-head h3{
max-width:13ch;
font-size:31px;
line-height:1.06;
letter-spacing:-.035em;
}
.foot-form-head > p:last-child{
margin-top:13px;
max-width:31ch;
font-size:16px;
line-height:1.55;
color:var(--ink-500);
}
.foot-form{
gap:18px;
}
.foot-form-row{
gap:22px;
}
.foot-form label{
position:relative;
display:block;
min-width:0;
padding-top:14px;
}
/* Remove the old boxed-field treatment only inside the footer form */
.foot-form .floating-field{
width:100%;
box-sizing:border-box;
border:0;
border-bottom:1px solid rgba(10,70,80,.20);
border-radius:0;
background:transparent;
color:var(--ink-900);
box-shadow:none;
outline:none;
font:inherit;
font-size:15px;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.foot-form input.floating-field{
height:42px;
padding:8px 0 7px;
}
.foot-form textarea.floating-field{
min-height:72px !important;
padding:10px 0 8px;
resize:vertical;
line-height:1.5;
}
.foot-form .floating-label{
position:absolute;
left:0;
top:28px;
z-index:1;
pointer-events:none;
font-size:15px;
line-height:1;
color:var(--ink-400);
transform-origin:left top;
transition:
transform .18s cubic-bezier(.22,1,.36,1),
color .18s ease,
top .18s cubic-bezier(.22,1,.36,1),
font-size .18s ease;
}
/* Active line */
.foot-form .floating-field:focus{
border-bottom-color:var(--teal-600);
box-shadow:0 1px 0 0 var(--teal-600);
}
/* Float label on focus or once field has content */
.foot-form .floating-field:focus + .floating-label,
.foot-form .floating-field:not(:placeholder-shown) + .floating-label{
top:6px;
font-size:11px;
color:var(--teal-700);
transform:translateY(0);
}
/* Existing markup has label before input, so support that structure too */
.foot-form label:focus-within .floating-label,
.foot-form label:has(.floating-field:not(:placeholder-shown)) .floating-label{
top:6px;
font-size:11px;
color:var(--teal-700);
}
.foot-form-actions{
margin-top:2px;
}
.foot-form-submit{
min-height:44px;
padding:11px 19px;
}
@media(max-width:1100px){
.foot-form-col{
grid-template-columns:1fr;
gap:24px;
}
.foot-form-head h3{
max-width:16ch;
}
}
@media(max-width:720px){
.foot-form-head h3{
font-size:28px;
}
.foot-form-head > p:last-child{
font-size:15px;
}
}
@media(max-width:560px){
.foot-form-row{
grid-template-columns:1fr;
gap:18px;
}
}
/* --- V144: move contact details into the contact form band --- */
.foot-contact-col{
max-width:320px;
}
.foot-contact-col .foot-socials{
margin-top:22px;
}
/* Contact details now live below the Contact us intro, left of the form fields */
.foot-form-head .foot-contact-list-in-form{
margin-top:26px;
gap:12px;
}
.foot-form-head .foot-contact-list-in-form .foot-contact-item,
.foot-form-head .foot-contact-list-in-form a.foot-contact-item{
width:100%;
max-width:100%;
font-size:14px;
line-height:1.45;
color:var(--ink-600);
}
.foot-form-head .foot-contact-list-in-form a.foot-contact-item:hover{
color:var(--teal-700);
}
.foot-form-head .foot-contact-list-in-form .foot-contact-icon{
margin-top:1px;
}
@media(max-width:1100px){
.foot-form-head .foot-contact-list-in-form{
max-width:520px;
}
}
/* --- V145: footer contact copy + layout tuning --- */
.foot-form-col{
grid-template-columns:minmax(290px,.88fr) minmax(0,1.12fr);
gap:40px;
}
.foot-form-head{
padding-top:0;
}
.foot-form-head h3{
max-width:11ch;
font-size:28px;
line-height:1.08;
letter-spacing:-.03em;
}
.foot-form-head > p:last-child{
margin-top:14px;
max-width:28ch;
font-size:15px;
line-height:1.58;
}
.foot-form-head .foot-contact-list-in-form{
margin-top:24px;
max-width:34ch;
}
@media(max-width:1100px){
.foot-form-col{
grid-template-columns:1fr;
gap:22px;
}
.foot-form-head h3{
max-width:14ch;
font-size:29px;
}
.foot-form-head > p:last-child,
.foot-form-head .foot-contact-list-in-form{
max-width:40ch;
}
}
@media(max-width:720px){
.foot-form-head h3{
font-size:27px;
max-width:13ch;
}
.foot-form-head > p:last-child{
font-size:15px;
}
}
/* --- V146: larger gap between footer contact heading and description --- */
.foot-form-head > p:last-child{
margin-top:20px;
}
/* --- V148: footer contact heading one-line + spacing + shorter address --- */
.foot-form-col{
grid-template-columns:minmax(390px,.95fr) minmax(0,1.05fr);
}
.foot-form-head h3{
max-width:none;
white-space:nowrap;
}
.foot-form-head > p:last-child{
margin-top:24px;
}
@media(max-width:1100px){
.foot-form-head h3{
white-space:normal;
}
}
/* --- V149: more air under contact heading + balanced description lines --- */
.foot-form-head > p:last-child{
margin-top:30px;
max-width:34ch;
}
.foot-form-head > p:last-child br{
display:block;
content:"";
}
.foot-form-head .foot-contact-list-in-form{
margin-top:28px;
}
/* --- V150: larger heading-to-description gap in footer contact block --- */
.foot-form-head > p:last-child{
margin-top:38px;
}
/* --- V151: fix actual heading-to-description spacing target --- */
.foot-form-head .foot-form-description{
margin-top:32px !important;
}
/* --- V152: footer CTA label + exact heading gap --- */
.foot-form-head .foot-form-description{
margin-top:16px !important;
}
/* --- V154: pure-vector AI Consultant sparkle with internal moving gradients --- */
#accuracy .brand-sparkle-stage{
display:grid !important;
place-items:center !important;
overflow:hidden !important;
}
#accuracy .brand-sparkle-vector{
display:block;
width:100%;
height:100%;
overflow:visible;
}
#accuracy .brand-sparkle-vector .sparkle-base{
opacity:1;
}
#accuracy .brand-sparkle-vector .sparkle-motion-layer{
opacity:.94;
}
/* Remove any legacy image/overlay behavior if old selectors are still present in CSS. */
#accuracy .brand-sparkle-stage > .brand-sparkle-original,
#accuracy .brand-sparkle-stage > .brand-sparkle-motion{
display:none !important;
}
@media(prefers-reduced-motion:reduce){
#accuracy .brand-sparkle-vector .sparkle-motion-layer{
opacity:.42;
}
}
/* --- V161: AI Consultant card separation on white background --- */
#accuracy .chatwin{
border:1px solid rgba(10,33,36,.065);
box-shadow:
0 0 0 1px rgba(10,33,36,.018),
0 4px 12px rgba(10,33,36,.055),
0 24px 56px -28px rgba(10,33,36,.24);
}
/* --- V162: AI Consultant card separation with shadow only --- */
#accuracy .chatwin{
border:0 !important;
box-shadow:
0 3px 14px rgba(10,33,36,.045),
0 18px 46px -24px rgba(10,33,36,.18),
0 0 34px rgba(10,33,36,.025);
}
/* --- V167: global coverage supporting copy width --- */
#coverage .section-sub,
#coverage .coverage-sub,
#coverage .cov-sub{
max-width:565px;
}
#coverage .coverage-supporting-copy,
.coverage-supporting-copy{
max-width:565px !important;
}
/* --- V168: Global regulatory coverage table polish --- */
.coverage-table-polished{
width:100%;
border-collapse:separate;
border-spacing:0;
background:transparent;
}
.coverage-table-polished thead th{
position:sticky;
top:0;
z-index:4;
background:#F2F6F5 !important;
color:rgba(6,42,49,.72);
font-weight:650;
letter-spacing:.01em;
border-bottom:1px solid rgba(6,42,49,.10) !important;
box-shadow:0 1px 0 rgba(255,255,255,.72) inset;
}
.coverage-table-polished tbody tr{
position:relative;
transition:
background-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.coverage-table-polished tbody tr:nth-child(even){
background:rgba(6,42,49,.018);
}
.coverage-table-polished tbody tr:hover{
background:rgba(252,197,2,.055) !important;
box-shadow:
inset 2px 0 0 #FCC502,
inset 0 1px 0 rgba(252,197,2,.18),
inset 0 -1px 0 rgba(252,197,2,.18);
}
.coverage-table-polished tbody td{
transition:color .18s ease, background-color .18s ease;
}
.coverage-table-polished tbody tr:hover td:first-child{
color:#062A31;
font-weight:650;
}
.coverage-table-polished tbody tr:hover td{
border-bottom-color:rgba(6,42,49,.09);
}
.coverage-table-polished thead th:first-child{
border-top-left-radius:10px;
}
.coverage-table-polished thead th:last-child{
border-top-right-radius:10px;
}
@media(max-width:720px){
.coverage-table-polished tbody tr:hover{
box-shadow:inset 2px 0 0 #FCC502;
}
}
/* --- V169: white card treatment for Global regulatory coverage table --- */
.coverage-table-card{
background:#fff;
padding:20px;
border-radius:18px;
box-sizing:border-box;
}
/* Header: same tone, smaller type */
.coverage-table-polished thead th{
font-size:12px !important;
color:rgba(6,42,49,.62) !important;
font-weight:650;
letter-spacing:.01em;
background:#F7F9F8 !important;
}
/* Lighter zebra */
.coverage-table-polished tbody tr:nth-child(even){
background:rgba(6,42,49,.010);
}
/* Slightly softer hover fill, keep the yellow cue */
.coverage-table-polished tbody tr:hover{
background:rgba(252,197,2,.035) !important;
box-shadow:
inset 2px 0 0 #FCC502,
inset 0 1px 0 rgba(252,197,2,.12),
inset 0 -1px 0 rgba(252,197,2,.12);
}
/* Give Jurisdiction more breathing room from the yellow hover rail */
.coverage-table-polished th:first-child,
.coverage-table-polished td:first-child{
padding-left:18px !important;
}
/* Preserve clean spacing from the card edges */
.coverage-table-polished th:last-child,
.coverage-table-polished td:last-child{
padding-right:14px !important;
}
@media(max-width:720px){
.coverage-table-card{
padding:14px;
border-radius:16px;
}
.coverage-table-polished th:first-child,
.coverage-table-polished td:first-child{
padding-left:14px !important;
}
}
/* --- V170: ensure the table view card is visibly white --- */
#covTablePanel.coverage-table-card{
background:#fff !important;
padding:20px !important;
border-radius:18px !important;
border:0 !important;
box-shadow:0 14px 34px -30px rgba(6,42,49,.22);
}
@media(max-width:720px){
#covTablePanel.coverage-table-card{
padding:14px !important;
border-radius:16px !important;
}
}
/* --- V171: proper sticky table header inside padded white card --- */
#covTablePanel.coverage-table-card{
overflow:hidden !important;
}
#covTablePanel .coverage-table-scroll-inner{
height:100%;
max-height:100%;
overflow-y:auto;
overflow-x:hidden;
border-radius:10px;
scrollbar-width:thin;
scrollbar-color:rgba(18,162,182,.34) transparent;
}
#covTablePanel .coverage-table-scroll-inner::-webkit-scrollbar{
width:6px;
}
#covTablePanel .coverage-table-scroll-inner::-webkit-scrollbar-track{
background:transparent;
}
#covTablePanel .coverage-table-scroll-inner::-webkit-scrollbar-thumb{
background:rgba(18,162,182,.30);
border-radius:999px;
}
#covTablePanel .coverage-table-polished thead th{
top:0 !important;
padding-top:12px !important;
padding-bottom:12px !important;
line-height:1.15 !important;
vertical-align:middle !important;
z-index:8 !important;
background:#F7F9F8 !important;
}
/* Make sure body rows cannot visually bleed through the sticky header edge */
#covTablePanel .coverage-table-polished thead{
position:relative;
z-index:8;
}
#covTablePanel .coverage-table-polished thead th{
box-shadow:
0 1px 0 rgba(6,42,49,.10),
0 4px 10px -10px rgba(6,42,49,.18);
}
/* --- V172: coverage table zebra color --- */
#covTablePanel .coverage-table-polished tbody tr:nth-child(even){
background:#F5FBFC !important;
}
/* --- V173: coverage table zebra color --- */
#covTablePanel .coverage-table-polished tbody tr:nth-child(even){
background:#F7FBFC !important;
}
/* --- V174: consistent hover color on white and zebra rows --- */
#covTablePanel .coverage-table-polished tbody tr:hover,
#covTablePanel .coverage-table-polished tbody tr:nth-child(even):hover{
background:rgba(252,197,2,.035) !important;
}
/* --- V175: World map = Covered / Coming soon / Not covered --- */
/* Not covered: lightest tone in the same teal family. */
.wmap path{
fill:#E8F3F5 !important;
cursor:default !important;
}
/* Covered: national and EU coverage use the same visual status color. */
.wmap path.t1,
.wmap path.t2{
fill:#0096AF !important;
cursor:default !important;
}
/* Coming soon: visually between covered and not covered. */
.wmap path.t3{
fill:#A9D7DF !important;
cursor:default !important;
}
/* Keep status distinction on hover instead of collapsing all states to one color. */
.wmap path.t1:hover,
.wmap path.t2:hover{
fill:#087F93 !important;
}
.wmap path.t3:hover{
fill:#91C9D3 !important;
}
.wmap path:not(.t1):not(.t2):not(.t3):hover{
fill:#DCEEF1 !important;
}
/* Crimea/Ukraine corrective geometry follows the Not covered map tone. */
.wmap path.ua-crimea-bridge,
.wmap path.ua-crimea-fix{
fill:#E8F3F5 !important;
}
.wmap path.ua-crimea-seam{
fill:none !important;
stroke:#E8F3F5 !important;
}
/* --- V177: restore neutral grey for Not covered --- */
.wmap path{
fill:#D9E1E1 !important;
}
.wmap path:not(.t1):not(.t2):not(.t3):hover{
fill:#CCD7D8 !important;
}
/* Keep Crimea/Ukraine corrective geometry aligned with the neutral map fill. */
.wmap path.ua-crimea-bridge,
.wmap path.ua-crimea-fix{
fill:#D9E1E1 !important;
}
.wmap path.ua-crimea-seam{
fill:none !important;
stroke:#D9E1E1 !important;
}
/* --- V178: ensure Crimea hover belongs to Ukraine, not Russia --- */
.wmap path.ua-crimea-hit{
fill:#D9E1E1 !important;
stroke:none !important;
pointer-events:auto !important;
}
.wmap path.ua-crimea-hit:hover{
fill:#CCD7D8 !important;
}
/* --- V179: unify Ukraine + Crimea hover/highlight --- */
.wmap path.ua-unified-hover{
fill:#CCD7D8 !important;
}
.wmap path.ua-crimea-seam.ua-unified-hover{
fill:none !important;
stroke:#CCD7D8 !important;
}
/* --- V180: Crimea is now part of the native Ukraine SVG path --- */
.wmap path.ua-crimea-seam,
.wmap path.ua-crimea-bridge,
.wmap path.ua-crimea-fix,
.wmap path.ua-crimea-hit{
display:none !important;
}
/* --- V181: Coverage depth = 3 stable-height claims --- */
#figures .claim-body{
height:196px;
min-height:196px;
display:flex;
flex-direction:column;
}
#figures .claim-nav{
margin-top:auto;
padding-top:26px;
}
@media(max-width:760px){
#figures .claim-body{
height:230px;
min-height:230px;
}
}
/* --- V182: keep Coverage depth navigation dots in one fixed position --- */
#figures .claim-body{
position:relative;
box-sizing:border-box;
padding-bottom:54px;
}
#figures .claim-nav{
position:absolute;
left:0;
bottom:0;
margin:0 !important;
padding:0 !important;
}
@media(max-width:760px){
#figures .claim-body{
padding-bottom:54px;
}
}
/* --- V184: AI Consultant copy width + refined sparkle motion --- */
#accuracy .verify-p{
max-width:600px !important;
}
/* Keep the avatar container unchanged; only make the sparkle itself slightly smaller. */
#accuracy .brand-sparkle-vector{
width:92% !important;
height:92% !important;
}
#accuracy .ai-response-avatar.is-loading .brand-sparkle-vector{
width:90% !important;
height:90% !important;
}
/* Dark mark stays dominant, while the moving color catches are more noticeable. */
#accuracy .brand-sparkle-vector .sparkle-motion-layer{
opacity:1 !important;
filter:saturate(1.18) contrast(1.03);
}
@media(prefers-reduced-motion:reduce){
#accuracy .brand-sparkle-vector .sparkle-motion-layer{
opacity:.46 !important;
filter:none;
}
}
/* --- V185: Pricing CTA states + AI Consultant / Pricing divider --- */
/* Separate the two light sections with a quiet content-width hairline. */
#pricing{
padding-top:0 !important;
}
#pricing > .wrap{
border-top:1px solid rgba(10,33,36,.11);
padding-top:clamp(86px,7vw,112px);
}
/* All Pricing CTAs use the same brand-outline treatment by default. */
#pricing .p .btn,
#pricing .p-trial .btn{
background:transparent !important;
border-color:var(--teal-600) !important;
color:var(--ink-900) !important;
filter:none !important;
}
/* Hover adds only a very light brand tint inside the outlined control. */
#pricing .p .btn:hover,
#pricing .p-trial .btn:hover{
background:rgba(18,162,182,.075) !important;
border-color:var(--teal-600) !important;
filter:none !important;
}
@media(max-width:680px){
#pricing > .wrap{
padding-top:72px;
}
}
/* --- V186: keep the featured Companies CTA primary --- */
#pricing .p.p-feat .btn{
background:var(--teal-600) !important;
border-color:var(--teal-600) !important;
color:#fff !important;
}
#pricing .p.p-feat .btn:hover{
background:var(--teal-600) !important;
border-color:var(--teal-600) !important;
color:#fff !important;
filter:brightness(1.04) !important;
}
/* --- V192: branded FAQ, with yellow active chevron only --- */
#faq .q[open] summary::before{
border-color:#FCC502 !important;
}
#faq .q[open] summary::after{
border-color:#FCC502 !important;
}
/* --- V193: refined yellow treatment for active FAQ chevron --- */
#faq .q[open] summary::before{
background:rgba(252,197,2,.13) !important;
border-color:rgba(232,159,0,.34) !important;
box-shadow:0 4px 14px -10px rgba(232,159,0,.45) !important;
}
#faq .q[open] summary::after{
border-color:#D99A00 !important;
}
/* --- V196: final CTA supporting copy width --- */
#start > .wrap > p{
max-width:380px !important;
}
/* --- V197: compact footer + modal contact flow --- */
.foot-v197{
padding:68px 0 30px;
}
.foot-v197 .foot-main-v197{
display:grid;
grid-template-columns:minmax(300px,1.15fr) minmax(360px,.85fr);
gap:84px;
align-items:start;
}
.foot-v197 .foot-brand-col-v197{
max-width:380px;
}
.foot-v197 .foot-brand{
width:max-content;
max-width:100%;
}
.foot-v197 .foot-business-v197{
display:grid;
gap:8px;
margin-top:26px;
font-size:14.5px;
line-height:1.45;
color:var(--ink-600);
}
.foot-v197 .foot-business-v197 a,
.foot-v197 .foot-business-v197 span{
width:max-content;
max-width:100%;
}
.foot-v197 .foot-business-v197 a{
color:var(--ink-600);
text-decoration:none;
transition:color .18s ease;
}
.foot-v197 .foot-business-v197 a:hover{
color:var(--teal-700);
}
/* Filled social glyphs, no background containers. */
.foot-v197 .foot-socials-v197{
display:flex;
align-items:center;
gap:17px;
margin-top:24px;
}
.foot-v197 a.foot-social-v197{
display:grid;
place-items:center;
width:24px;
height:24px;
padding:0;
color:#17383D;
background:none;
border:0;
text-decoration:none;
transition:
color .18s ease,
transform .18s cubic-bezier(.22,1,.36,1);
}
.foot-v197 .foot-social-v197 svg{
display:block;
width:21px;
height:21px;
fill:currentColor;
}
.foot-v197 a.foot-social-v197:hover{
color:var(--teal-600);
transform:translateY(-2px) scale(1.04);
}
.foot-v197 .foot-talk-btn-v197{
margin-top:28px;
min-height:44px;
padding:11px 22px;
border:0;
}
.foot-v197 .foot-links-v197{
display:grid;
grid-template-columns:minmax(150px,1fr) minmax(130px,.82fr);
gap:52px;
justify-self:end;
min-width:360px;
padding-top:6px;
}
.foot-v197 .foot-nav-col ul{
display:grid;
gap:14px;
}
.foot-v197 .foot-base{
margin-top:58px;
}
/* Modal */
.contact-modal-v197{
position:fixed;
inset:0;
z-index:120;
display:grid;
place-items:center;
padding:24px;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:
opacity .22s ease,
visibility 0s linear .22s;
}
.contact-modal-v197.is-open{
visibility:visible;
opacity:1;
pointer-events:auto;
transition-delay:0s;
}
.contact-modal-backdrop-v197{
position:absolute;
inset:0;
background:rgba(6,42,49,.32);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
}
.contact-modal-panel-v197{
position:relative;
z-index:1;
width:min(640px,100%);
max-height:min(760px,calc(100vh - 48px));
overflow:auto;
box-sizing:border-box;
padding:38px 40px 40px;
border:1px solid rgba(10,70,80,.10);
border-radius:24px;
background:#fff;
box-shadow:0 30px 80px -28px rgba(6,42,49,.34);
outline:none;
opacity:0;
transform:translateY(14px) scale(.985);
transition:
opacity .24s ease,
transform .28s cubic-bezier(.22,1,.36,1);
}
.contact-modal-v197.is-open .contact-modal-panel-v197{
opacity:1;
transform:none;
}
.contact-modal-close-v197{
position:absolute;
top:18px;
right:18px;
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:1px solid rgba(10,70,80,.10);
border-radius:12px;
background:rgba(247,249,248,.86);
color:var(--ink-600);
cursor:pointer;
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease;
}
.contact-modal-close-v197:hover{
background:var(--teal-50);
border-color:rgba(18,162,182,.18);
color:var(--teal-700);
transform:rotate(2deg);
}
.contact-modal-close-v197 svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
}
.contact-modal-head-v197{
padding-right:52px;
}
.contact-modal-head-v197 .foot-form-eyebrow{
margin-bottom:12px;
}
.contact-modal-head-v197 h2{
margin:0;
max-width:15ch;
font-size:32px;
line-height:1.08;
letter-spacing:-.035em;
color:var(--ink-900);
}
.contact-modal-head-v197 > p:last-child{
margin:16px 0 0;
max-width:48ch;
font-size:15.5px;
line-height:1.6;
color:var(--ink-500);
}
.contact-modal-form-v197{
margin-top:30px;
gap:19px;
}
.contact-modal-form-v197 .foot-form-row{
gap:22px;
}
.contact-modal-form-v197 textarea.floating-field{
min-height:88px !important;
}
.contact-modal-actions-v197{
margin-top:6px;
align-items:center;
}
.contact-modal-actions-v197 .foot-form-submit{
min-height:46px;
padding:11px 20px;
}
body.contact-modal-lock-v197{
overflow:hidden;
}
@media(max-width:820px){
.foot-v197 .foot-main-v197{
grid-template-columns:1fr;
gap:48px;
}
.foot-v197 .foot-links-v197{
justify-self:start;
min-width:0;
}
}
@media(max-width:560px){
.foot-v197{
padding-top:58px;
}
.foot-v197 .foot-links-v197{
grid-template-columns:1fr 1fr;
gap:30px;
width:100%;
}
.contact-modal-v197{
padding:12px;
align-items:end;
}
.contact-modal-panel-v197{
width:100%;
max-height:calc(100vh - 24px);
padding:30px 22px 26px;
border-radius:22px;
}
.contact-modal-head-v197{
padding-right:44px;
}
.contact-modal-head-v197 h2{
font-size:28px;
}
.contact-modal-form-v197 .foot-form-row{
grid-template-columns:1fr;
gap:18px;
}
.contact-modal-actions-v197{
align-items:flex-start;
flex-direction:column;
}
}
@media(prefers-reduced-motion:reduce){
.contact-modal-v197,
.contact-modal-panel-v197,
.foot-v197 a.foot-social-v197{
transition:none !important;
}
}
/* --- V198: wider footer CTA + calmer social hover --- */
.foot-v197 .foot-talk-btn-v197{
min-width:156px;
justify-content:center;
padding-left:28px;
padding-right:28px;
}
/* Slightly larger social controls, but still visually light by default. */
.foot-v197 .foot-socials-v197{
gap:12px;
}
.foot-v197 a.foot-social-v197{
width:34px;
height:34px;
border-radius:10px;
color:#17383D;
background:transparent;
transition:
color .18s ease,
background-color .18s ease;
}
.foot-v197 .foot-social-v197 svg{
width:22px;
height:22px;
}
/* No movement or scale: only brand color + soft rounded surface. */
.foot-v197 a.foot-social-v197:hover{
color:var(--teal-700);
background:rgba(18,162,182,.085);
transform:none;
}
/* --- V199: Contact modal copy + single-line desktop heading --- */
.contact-modal-head-v197 h2{
max-width:none !important;
white-space:nowrap;
}
@media(max-width:760px){
.contact-modal-head-v197 h2{
white-space:normal;
}
}
/* --- V200: modal title size + wider submit CTA --- */
.contact-modal-head-v197 h2{
font-size:28px !important;
}
.contact-modal-actions-v197 .foot-form-submit{
min-width:172px;
justify-content:center;
}