/* ===========================================================================
   ss-hero-v2.css — the premium pass on the homepage hero and the public header.
   Loaded ONLY when includes/design_flag.php says v2 is active, so the current
   design is untouched when it is not.

   WHAT WAS ACTUALLY WRONG, and what each part here answers:

     1. The hero's background was radial-gradient(...var(--primary-soft)...) at
        #eff6ff fading to transparent by 55%. At that lightness over white it is
        invisible — the hero was flat white, which is why "dull" was the word.
        ANSWER: three stacked layers — a warm-blue wash, two large soft orbs,
        and a 1px dot mesh that only shows near the top. Depth without colour
        that competes with the CTA.

     2. padding-top:88px + padding-bottom:96px, then the trust strip, left a
        band of nothing under the search bar. Empty space reads as spacious only
        when something anchors it; here it read as unfinished.
        ANSWER: the bottom padding comes off (96px -> 40px) so the fold ends on
        content. A trust row was built to fill the space and then removed — see
        the note further down; filling it was solving the problem twice.

     3. .hero-grid is max-width:820px;text-align:center, so a product visual can
        never sit beside the copy. ANSWER: not forced into two columns — a
        centred hero is a legitimate choice and the search bar is the hero's
        subject. Instead the bar itself is promoted: bigger, lifted, with a
        focus state worth looking at.

     4. The headline was flat --ink at default tracking. ANSWER: tighter
        tracking, optical sizing, and the second line carries a gradient so the
        eye has somewhere to land.

   EVERY COLOUR COMES FROM THE EXISTING TOKENS (--primary #2563eb, --ink
   #0f172a, --accent #10b981, --primary-soft #eff6ff). No new brand colours, and
   no purple.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER
   The bar was a flat translucent white strip. It now has a hairline gradient
   top edge, a hover underline that grows from the centre, and it gains real
   elevation once the page scrolls — so it reads as a layer above the page
   rather than part of it.
   --------------------------------------------------------------------------- */

.ss-nav.ss-v2 {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* A 2px gradient hairline along the very top. Costs nothing and is the single
   cheapest signal that someone chose the colours on purpose. */
.ss-nav.ss-v2::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 28%, #10b981 62%, #2563eb 100%);
    opacity: .9;
}

/* Elevation on scroll. templates/header.php adds .is-scrolled past 8px. */
.ss-nav.ss-v2.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(15, 23, 42, 0.09);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -20px rgba(15, 23, 42, .3);
}

/* Nav links: an underline that grows from the middle. Transform-only, so it
   animates on the compositor and never reflows the bar. */
.ss-nav.ss-v2 .nav-links > a,
.ss-nav.ss-v2 .has-mega > a {
    position: relative;
    font-weight: 560;
    letter-spacing: -.005em;
    transition: color .18s ease;
}
.ss-nav.ss-v2 .nav-links > a::after,
.ss-nav.ss-v2 .has-mega > a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    transform: scaleX(0);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.ss-nav.ss-v2 .nav-links > a:hover::after,
.ss-nav.ss-v2 .has-mega:hover > a::after {
    transform: scaleX(1);
}

/* The primary CTA. A gradient plus a coloured shadow of the same hue is what
   separates a button that was styled from one that was left at default. */
.ss-nav.ss-v2 .nav-cta .btn-primary,
.ss-nav.ss-v2 .nav-cta a.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 10px 22px -12px rgba(37, 99, 235, .75);
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ss-nav.ss-v2 .nav-cta .btn-primary:hover,
.ss-nav.ss-v2 .nav-cta a.btn-primary:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 16px 30px -12px rgba(37, 99, 235, .85);
}

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */

/* NO overflow:hidden on the hero. The first version had it, to keep the 980px
   orb from causing a horizontal scrollbar — and it also clipped the country
   dropdown, which is position:absolute inside the search bar and has to escape
   the hero to be usable. The base theme never clipped here for exactly that
   reason. The decoration now lives in .hv2-deco, which is clipped on its own. */
.ss-page .hero.ss-v2 {
    position: relative;
    /* isolation:isolate keeps .hv2-deco (z-index:-1) from sliding behind the
       page background -- but it also makes the hero a stacking context, which
       TRAPS everything inside it. The country dropdown is z-index:40 and hangs
       below the hero; with the hero at z-index:auto it painted in DOM order,
       so .hv2-cap (the next positioned sibling) covered the bottom third of
       the open menu. Raising the MENU cannot fix that -- tested at z-index
       2000, still covered -- because the ceiling is the hero itself.
       So the z-index goes on the HERO. 3 clears .demo (z-index:1) and every
       other following section is z-index:auto. Well under the sticky nav at
       1030, which has to stay on top of all of it. */
    isolation: isolate;
    z-index: 3;
    padding-top: 74px;
    padding-bottom: 40px;        /* was 96 — the dead band under the CTA */
    background:
        /* a wide, low wash so the top of the page is not pure white */
        radial-gradient(130% 78% at 50% -10%, #eaf1ff 0%, rgba(234, 241, 255, 0) 58%),
        linear-gradient(180deg, #fbfcff 0%, #ffffff 72%);
}

/* The decoration layer. Absolute and clipped, so the orb cannot push the page
   sideways, while everything that needs to escape the hero — the country
   dropdown, the domain typeahead — still can. */
.ss-page .hero.ss-v2 .hv2-deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* Two large, very soft orbs. Blur is the expensive-looking part and it is free
   here: no images, no requests, and they sit behind everything via z-index. */
.ss-page .hero.ss-v2 .hv2-deco::before {
    content: '';
    position: absolute;
    top: -220px;
    left: 50%;
    /* min(), so on a phone the orb cannot be wider than its own clipped
       parent — and the 28px blur below has room before the edge. */
    width: min(980px, 118%);
    height: 620px;
    transform: translateX(-50%);
    background:
        radial-gradient(closest-side, rgba(37, 99, 235, .16), rgba(37, 99, 235, 0) 70%),
        radial-gradient(closest-side at 72% 46%, rgba(16, 185, 129, .13), rgba(16, 185, 129, 0) 70%);
    filter: blur(28px);
    pointer-events: none;
}

/* A 1px dot mesh, masked so it fades out before it reaches the copy. Grids read
   as "engineering product" — appropriate here, and it gives the eye a texture
   to register depth against. */
.ss-page .hero.ss-v2 .hv2-deco::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    background-image: radial-gradient(rgba(15, 23, 42, .085) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 78%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 78%);
    pointer-events: none;
}

.ss-page .hero.ss-v2 .hero-grid { max-width: 880px; }

/* Eyebrow. A live dot earns its place on a product whose whole claim is that it
   is watching something. */
.ss-page .hero.ss-v2 .hv2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 auto 1.35rem;
    padding: 6px 15px 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(37, 99, 235, .18);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(37, 99, 235, .5);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #1d4ed8;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ss-page .hero.ss-v2 .hv2-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
    animation: hv2pulse 2.4s ease-in-out infinite;
}
@keyframes hv2pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, .05); }
}

/* Headline. Tighter than the default, which is most of the difference between
   "big text" and "a display setting". */
.ss-page .hero.ss-v2 h1 {
    font-size: clamp(2.6rem, 5.4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #0b1220;
    margin-bottom: 1.1rem;
    text-wrap: balance;
}

/* The second line carries the gradient, so the eye lands on the claim rather
   than on a wall of even weight. background-clip, so it still selects as text. */
.ss-page .hero.ss-v2 h1 .hv2-grad {
    background: linear-gradient(104deg, #1d4ed8 0%, #2563eb 34%, #0ea5e9 68%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ss-page .hero.ss-v2 .lead {
    max-width: 46ch;
    font-size: 1.14rem;
    line-height: 1.62;
    color: #475569;
    margin: 0 auto 1.9rem;
}

/* The search bar is the subject of this hero, so it gets the elevation. */
.ss-page .hero.ss-v2 .startbar {
    max-width: 700px;
    padding: 9px 9px 9px 24px;
    border-color: rgba(15, 23, 42, .09);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .05),
        0 10px 24px -14px rgba(15, 23, 42, .28),
        0 28px 60px -30px rgba(37, 99, 235, .42);
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
/* THE HOVER LIFT IS ALSO A STACKING CONTEXT. transform:translateY(-1px) on the
   form makes it one for as long as the pointer is over the search bar, and a
   stacking context is a ceiling: the country menu inside it has z-index:40,
   but trapped in a form at z-index:auto it paints in DOM order, so
   .hv2-actions -- the next sibling -- came out on top. That is why the demo
   button appeared over the open list only while the cursor was on the bar.
   The form therefore carries its own z-index, permanently, so the menu is
   never at the mercy of a hover state. 2 beats .hv2-actions and .widget-note,
   which are both in flow; the hero above holds z-index 3 in the page. */
.ss-page .hero.ss-v2 .startbar { position: relative; z-index: 2; }
.ss-page .hero.ss-v2 .startbar:hover { transform: translateY(-1px); }

/* :focus-within, not :focus — the focus lives on the input inside, and the ring
   belongs on the whole bar so it reads as one control. */
.ss-page .hero.ss-v2 .startbar:focus-within {
    border-color: rgba(37, 99, 235, .45);
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .12),
        0 12px 28px -14px rgba(15, 23, 42, .3),
        0 30px 64px -30px rgba(37, 99, 235, .5);
}

.ss-page .hero.ss-v2 .startbar-input { font-size: 1.06rem; }

.ss-page .hero.ss-v2 .startbar-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 0;
    padding: .9rem 1.8rem;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 12px 24px -12px rgba(37, 99, 235, .8);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ss-page .hero.ss-v2 .startbar-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .14), 0 18px 32px -12px rgba(37, 99, 235, .9);
}

/* #64748b, not the #94a3b8 the base theme uses here and not the #7c8798 this
   file shipped first: both fail WCAG AA on white (2.8 and 3.6 against the 4.5
   a 13px line needs). This is the token --muted, measures 4.76, and still
   reads as secondary next to the #475569 lead above it. */
.ss-page .hero.ss-v2 .widget-note {
    margin-top: 1rem;
    font-size: .82rem;
    color: #64748b;
}

/* The demo link was a bare blue line of text at the bottom of the dead band.
   As a bordered chip it reads as a second, lighter action. */
.ss-page .hero.ss-v2 .hero-demo { margin-top: 1.15rem; }
.ss-page .hero.ss-v2 .hero-demo a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: rgba(255, 255, 255, .7);
    font-size: .9rem;
    font-weight: 650;
    color: #1d4ed8;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ss-page .hero.ss-v2 .hero-demo a:hover {
    border-color: rgba(37, 99, 235, .4);
    background: #fff;
    transform: translateY(-1px);
}

/* NO TRUST ROW HERE. One was built and removed: it repeated three figures
   from the stats band 400px below (which hardcodes them at data-target=...),
   so it was a second copy of numbers that would drift from the first, and its
   "no credit card required" chip repeated the .widget-note directly above it.
   The band of dead space it was invented to fill is gone anyway — that was
   padding-bottom:96px, now 40px. The gap needed closing, not filling. */

@media (max-width: 720px) {
    .ss-page .hero.ss-v2 { padding-top: 54px; padding-bottom: 30px; }
    .ss-page .hero.ss-v2 h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); letter-spacing: -.03em; }
    .ss-page .hero.ss-v2 .lead { font-size: 1.04rem; max-width: 100%; }
    .ss-page .hero.ss-v2 .startbar { padding-left: 16px; }
    .ss-page .hero.ss-v2 .hv2-deco::after { height: 260px; }
}

/* The orbs, the pulse and every lift are decoration. None of it carries
   meaning, so all of it goes when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
    .ss-page .hero.ss-v2 .hv2-dot { animation: none; }
    .ss-page .hero.ss-v2 .startbar:hover,
    .ss-page .hero.ss-v2 .startbar-btn:hover,
    .ss-page .hero.ss-v2 .hero-demo a:hover,
    .ss-nav.ss-v2 .nav-cta .btn-primary:hover { transform: none; }
    .ss-nav.ss-v2 .nav-links > a::after,
    .ss-nav.ss-v2 .has-mega > a::after { transition: none; }
}

/* Windows high-contrast / forced colours: gradient text collapses to nothing
   visible, so the fill has to come back. */
@media (forced-colors: active) {
    .ss-page .hero.ss-v2 h1 .hv2-grad {
        -webkit-text-fill-color: currentColor;
        color: CanvasText;
        background: none;
    }
    .ss-page .hero.ss-v2::before,
    .ss-page .hero.ss-v2 .hv2-deco::after { display: none; }
}

/* ---------------------------------------------------------------------------
   MEGA MENU — tightened
   The panel carries four category buttons plus four direct links in its rail,
   at .92rem with .66rem of vertical padding each. That is ~9 rows of 40px in a
   246px column, which is what makes it feel heavy and is why the last rail item
   sits so close to the panel edge.

   Everything here is proportional: type down ~7%, padding down ~25%, rail
   narrower by 28px, panel narrower by 60px. Nothing is restructured, so the
   two-pane behaviour and the JS that drives it are untouched.

   Scoped to .ss-nav.ss-v2, so this arrives and leaves with the flag.
   --------------------------------------------------------------------------- */

.ss-nav.ss-v2 .mega { padding: 20px; gap: 20px; }
.ss-nav.ss-v2 .mega h5 { font-size: .68rem; margin-bottom: .65rem; }
.ss-nav.ss-v2 .mega a { font-size: .855rem; padding: .22rem 0; }
.ss-nav.ss-v2 .mega .mega-note { font-size: .71rem; margin-top: .5rem; }

/* Two-pane variant: a narrower rail and a narrower panel. */
.ss-nav.ss-v2 .mega.mega-2p {
    grid-template-columns: 218px 1fr;
    padding: 8px;
    width: min(720px, 92vw);
}
.ss-nav.ss-v2 .mega-rail { gap: 1px; padding: 4px; }
.ss-nav.ss-v2 .mega-railitem {
    padding: .5rem .65rem;
    font-size: .865rem;
    border-radius: 9px;
    gap: .45rem;
}
.ss-nav.ss-v2 .mega-railitem .mrl-t {
    /* The rail is 28px narrower now, so a long label has to ellipsis rather
       than wrap into a two-line row that breaks the rhythm of the column. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ss-nav.ss-v2 .mega-panes { padding: 4px 4px 4px 12px; }

/* Tool rows in the right pane. */
.ss-nav.ss-v2 .mega-tool { padding: .42rem .5rem; border-radius: 9px; }
.ss-nav.ss-v2 .mega-tool .mt-ic { width: 30px; height: 30px; }
.ss-nav.ss-v2 .mega-tool .mt-ic svg { width: 15px; height: 15px; }
/* Only .mt-ic and .mt-n exist on a tool row. An .mt-d description rule was
   written here first and removed: there is no such element, so it was dead
   CSS pretending to style something. */
.ss-nav.ss-v2 .mega-tool .mt-n { font-size: .855rem; }

/* Mobile keeps the stacked layout the base theme switches to; only the type
   follows the desktop reduction so the two do not disagree. */
@media (max-width: 1024px) {
    .ss-nav.ss-v2 .nav-menu .mega-railitem { padding: .52rem .3rem; font-size: .88rem; }
    .ss-nav.ss-v2 .nav-menu .mega a { font-size: .86rem; }
}

/* ---------------------------------------------------------------------------
   CAPABILITY BAND — replaces the six vanity counters
   The old band was "245,000+ KEYWORDS TRACKED" six times over: numbers about
   our own usage, which say nothing a buyer can act on. These four say what the
   platform HOLDS, which is the actual differentiator, and the engine row above
   them is evidence for the third card rather than decoration.

   Card 4 carries no figure on purpose. "One API + MCP" is a capability, and
   inventing a number for it to match the others would be the kind of filler
   the old band was made of.
   --------------------------------------------------------------------------- */

/* NO border-top. The hero fades to #ffffff at its foot and this band opens on
   #ffffff, so the two are already one continuous surface — a hairline across
   that join was drawing a section break where there is no change of material. */
.ss-page .hv2-cap {
    position: relative;
    padding: 64px 0 76px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 42%, #f2f6fe 100%);
}

.ss-page .hv2-cap-eyebrow {
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #2563eb;
    margin: 0 0 .7rem;
}

.ss-page .hv2-cap-h2 {
    text-align: center;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.028em;
    color: #0b1220;
    margin: 0 0 1.9rem;
    text-wrap: balance;
}

/* The engines. Chips rather than a grey logo wall: these are the engines the
   AI card measures, so they carry their real brand colours. */
.ss-page .hv2-engines {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 auto 2.5rem;
}
.ss-page .hv2-eng {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font-size: .845rem;
    font-weight: 650;
    color: #334155;
    white-space: nowrap;
}
.ss-page .hv2-eng svg { flex: none; }

.ss-page .hv2-cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}

.ss-page .hv2-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .075);
    border-radius: 16px;
    padding: 22px 22px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -28px rgba(15, 23, 42, .3);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ss-page .hv2-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, .22);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 26px 50px -26px rgba(37, 99, 235, .42);
}

.ss-page .hv2-card-top {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.05rem;
}
.ss-page .hv2-ic {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
}
/* One hue per data family, so the four cards are scannable as four things. */
.ss-page .hv2-ic.kw  { background: #eaf1ff; color: #1d4ed8; }
.ss-page .hv2-ic.bl  { background: #e9f7f1; color: #0f7a4d; }
.ss-page .hv2-ic.ai  { background: #eef0ff; color: #4338ca; }
.ss-page .hv2-ic.api { background: #f1f5f9; color: #334155; }

.ss-page .hv2-tag {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
}

/* tabular-nums so 5.4 / 2.65 / 24.9 line up instead of drifting. */
.ss-page .hv2-num {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: #0b1220;
    margin: 0 0 .55rem;
    font-variant-numeric: tabular-nums;
}
.ss-page .hv2-num .u {
    font-size: 1.5rem;
    font-weight: 750;
    color: #2563eb;
    margin-left: .06em;
    letter-spacing: -.02em;
}
/* Card 4 has words where the others have a figure, so it needs its own size to
   sit on the same optical line rather than towering over them. */
.ss-page .hv2-num.api { font-size: 1.62rem; letter-spacing: -.025em; }
.ss-page .hv2-num.api .u {
    display: block;
    font-size: 1.05rem;
    margin: .2rem 0 0;
    color: #2563eb;
}

.ss-page .hv2-lab {
    font-size: .945rem;
    font-weight: 650;
    line-height: 1.45;
    color: #1e293b;
    margin: 0 0 .6rem;
}
.ss-page .hv2-lab b { color: #1d4ed8; font-weight: 800; }

.ss-page .hv2-det {
    font-size: .845rem;
    line-height: 1.58;
    color: #64748b;          /* 4.76 on white — AA */
    margin: 0;
}
.ss-page .hv2-det b { color: #334155; font-weight: 700; }

.ss-page .hv2-card-link {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .855rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ss-page .hv2-card-link:hover { text-decoration: underline; }

@media (max-width: 1080px) {
    .ss-page .hv2-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .ss-page .hv2-cap { padding: 44px 0 52px; }
    .ss-page .hv2-cap-grid { grid-template-columns: 1fr; gap: 12px; }
    .ss-page .hv2-card { padding: 18px 18px 20px; }
    .ss-page .hv2-num { font-size: 2.1rem; }
    .ss-page .hv2-engines { gap: 7px; margin-bottom: 1.8rem; }
    .ss-page .hv2-eng { padding: 6px 12px; font-size: .79rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-page .hv2-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   THE THREE PREMIUM PASSES (round 2)
   --------------------------------------------------------------------------- */

/* 1. EYEBROW — a gradient ring, not a flat border.
   A 1px border can only be one colour; a gradient edge needs the two-layer
   trick: the outer element paints the gradient, the inner sits on top with 1px
   of inset so the gradient survives only as an edge. The old version was a
   plain rgba(37,99,235,.18) hairline, which is the default every template
   ships with. */
.ss-page .hero.ss-v2 .hv2-eyebrow {
    display: inline-block;
    margin: 0 auto 1.45rem;
    padding: 1.4px;                       /* this IS the ring width */
    border-radius: 999px;
    background: linear-gradient(120deg, #2563eb 0%, #38bdf8 38%, #10b981 72%, #2563eb 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px -16px rgba(37, 99, 235, .62);
    /* Cancel what the first version set on this element. */
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ss-page .hero.ss-v2 .hv2-eyebrow-in {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 7px 17px 7px 13px;
    border-radius: 999px;
    /* Not pure white: a hair of blue keeps it from punching a hole in the wash
       behind it. */
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    font-size: .815rem;
    font-weight: 750;
    letter-spacing: .015em;
    color: #1d4ed8;
    white-space: nowrap;
}

/* 2. THE ACTION PAIR.
   The startbar above is the primary action, so the trial button is ink — a
   third blue in one fold is what flattens a hero. Both chips share a height
   and a radius so they read as a pair rather than two unrelated controls. */
.ss-page .hero.ss-v2 .hv2-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 1.35rem 0 0;
}
.ss-page .hero.ss-v2 .hv2-act {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.008em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
                border-color .18s ease, color .18s ease;
}
/* A light blue tint with blue type, not the near-black this shipped as. The
   ink version was chosen to avoid a third blue competing with the solid-blue
   scan button above — a tinted fill solves the same problem better: it reads
   as the same family without claiming the same weight. */
.ss-page .hero.ss-v2 .hv2-act.primary {
    background: linear-gradient(180deg, #eef4ff 0%, #dfeaff 100%);
    border: 1px solid rgba(37, 99, 235, .26);
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(37, 99, 235, .55);
}
.ss-page .hero.ss-v2 .hv2-act.primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #f5f9ff 0%, #d6e4ff 100%);
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 32px -14px rgba(37, 99, 235, .7);
}
.ss-page .hero.ss-v2 .hv2-act.primary svg { color: #2563eb; }
.ss-page .hero.ss-v2 .hv2-act.ghost {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .11);
    color: #1d4ed8;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ss-page .hero.ss-v2 .hv2-act.ghost:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(37, 99, 235, .42);
}

/* The single-link version this replaced is still used by v1, so its rule stays
   in the file above — but v2 never renders .hero-demo, and leaving its margin
   live would add a phantom gap if it ever did. */
.ss-page .hero.ss-v2 .hero-demo { display: none; }

/* 3. CAPABILITY EYEBROW — a rule either side of the label.
   Centred uppercase blue on its own is the stock treatment. Two hairlines that
   fade out from the text read as editorial, and they also tie the label to the
   full width of the band instead of leaving it floating. */
.ss-page .hv2-cap-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto .85rem;
    max-width: 520px;
}
.ss-page .hv2-cap-eyebrow i {
    flex: 1 1 auto;
    height: 1px;
    max-width: 120px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, .42));
}
.ss-page .hv2-cap-eyebrow i:last-child {
    background: linear-gradient(90deg, rgba(37, 99, 235, .42), rgba(37, 99, 235, 0));
}
.ss-page .hv2-cap-eyebrow span {
    flex: none;
    font-size: .715rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #2563eb;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .ss-page .hero.ss-v2 .hv2-actions { gap: 9px; }
    .ss-page .hero.ss-v2 .hv2-act { height: 42px; padding: 0 18px; font-size: .865rem; }
    .ss-page .hv2-cap-eyebrow { gap: 10px; }
    .ss-page .hv2-cap-eyebrow i { max-width: 40px; }
    .ss-page .hv2-cap-eyebrow span { font-size: .67rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-page .hero.ss-v2 .hv2-act:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   THE FILM — under the capability cards
   The product film (components/home_film.php) sits inside this band rather
   than in a section of its own, because the cards are the claim and the film
   is the proof: keeping them on one surface reads as one argument. The mat,
   ring and player styles are shared (.film-* in ss-theme.css); this wrapper
   only owns the breathing room. The band's own bottom padding (76px) plus the
   mat's halo carries the space below.
   --------------------------------------------------------------------------- */

.ss-page .hv2-film {
    margin: 64px auto 12px;
}

@media (max-width: 620px) {
    .ss-page .hv2-film { margin: 40px auto 4px; }
}

/* ---------------------------------------------------------------------------
   SOCIAL-PROOF STRIP (includes/hero_proof.php)
   Styled and empty. Nothing below renders until that file carries a real count
   and real client logos — see its header for why it is not prefilled.

   Beyond the reference this was built from:
     · the avatar ring is 2.5px of white with a shadow under the cluster, so it
       sits ON the page rather than in it
     · logos are muted at rest and colour on hover. Six brands at full
       saturation directly under the CTA compete with it, and reading all six
       at once is not what the row is for
     · the row is masked at both edges, so on a narrow screen it fades out
       instead of ending on a hard crop
   --------------------------------------------------------------------------- */

.ss-page .hero.ss-v2 .hv2-proof {
    margin: 2.6rem auto 0;
    max-width: 880px;
}

.ss-page .hero.ss-v2 .hv2-proof-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* The cluster. Negative margin overlaps them; the white ring is what keeps the
   overlap readable instead of muddy. */
.ss-page .hero.ss-v2 .hv2-faces {
    display: inline-flex;
    align-items: center;
    flex: none;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .16));
}
.ss-page .hero.ss-v2 .hv2-faces img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f7;          /* so a slow image is not a hole */
    box-shadow: 0 0 0 2.5px #fff;
    margin-left: -11px;
    transition: transform .2s ease;
}
.ss-page .hero.ss-v2 .hv2-faces img:first-child { margin-left: 0; }
/* Fan out slightly on hover — the cluster is the one place a little life is
   welcome, because it is standing in for people. */
.ss-page .hero.ss-v2 .hv2-faces:hover img { transform: translateY(-2px); }

.ss-page .hero.ss-v2 .hv2-proof-line {
    margin: 0;
    font-size: 1.035rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: #334155;              /* 10.35 on white */
    white-space: nowrap;
}
.ss-page .hero.ss-v2 .hv2-proof-line b {
    font-weight: 800;
    color: #0b1220;
    font-variant-numeric: tabular-nums;
}

/* The logo row. */
.ss-page .hero.ss-v2 .hv2-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 40px;
    flex-wrap: wrap;
    margin-top: 1.9rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ss-page .hero.ss-v2 .hv2-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.ss-page .hero.ss-v2 .hv2-logo img {
    height: 26px;
    width: auto;
    max-width: 148px;
    object-fit: contain;
    /* Muted, not greyscale-to-nothing: a logo at opacity .5 still reads, and
       the slight desaturation keeps six different brand palettes from fighting
       each other and the CTA above. */
    filter: grayscale(1) opacity(.52);
    transition: filter .22s ease, transform .22s ease;
}
.ss-page .hero.ss-v2 .hv2-logo img:hover {
    filter: grayscale(0) opacity(1);
    transform: translateY(-2px);
}

@media (max-width: 620px) {
    .ss-page .hero.ss-v2 .hv2-proof { margin-top: 2rem; }
    .ss-page .hero.ss-v2 .hv2-proof-line { font-size: .95rem; white-space: normal; }
    .ss-page .hero.ss-v2 .hv2-faces img { width: 36px; height: 36px; margin-left: -9px; }
    .ss-page .hero.ss-v2 .hv2-logos { gap: 12px 24px; margin-top: 1.4rem; }
    .ss-page .hero.ss-v2 .hv2-logo img { height: 21px; max-width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-page .hero.ss-v2 .hv2-faces:hover img,
    .ss-page .hero.ss-v2 .hv2-logo img:hover { transform: none; }
}