/* =========================================================
   LIVEOP WEBSITE, COMPONENTS
   Buttons · nav · footer · section patterns · cards · media.
   All components read semantic surface tokens, so they adapt
   automatically inside `.s-dark` and `.s-warm` sections.
   ========================================================= */

/* Icon sizing within component contexts (icons.js fills .ico) */
.benefit__icon .ico{width:24px;height:24px}
.option__ico .ico{width:17px;height:17px}
.disc .ico{width:24px;height:24px;color:var(--accent)}
.chip .ico{width:16px;height:16px;color:var(--accent)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-eyebrow);line-height:1;
  padding:14px 26px;border-radius:var(--r-xl);border:1px solid transparent;
  transition:transform var(--dur-hover) var(--ease),box-shadow var(--dur-state) var(--ease),
             background var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:scale(.98)}

/* Primary, filled purple, soft glow. Hover lightens, never darkens. */
.btn--primary{position:relative;overflow:hidden;background:var(--brand-purple);color:#fff;box-shadow:0 10px 30px -8px rgba(97,45,248,.55)}
.btn--primary:hover{background:var(--brand-purple-bright);transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(97,45,248,.65)}
/* subtle sheen sweep on hover */
.btn--primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg)}
.btn--primary:hover::after{animation:btn-sheen .7s var(--ease)}
@keyframes btn-sheen{from{left:-70%}to{left:130%}}
@media (prefers-reduced-motion:reduce){.btn--primary:hover::after{animation:none}}

/* Secondary / glass, adapts to surface */
.btn--secondary{background:var(--btn-secondary-bg);color:var(--fg);border:var(--btn-secondary-border);backdrop-filter:blur(10px);font-size:0.9em;font-weight:500}
.btn--secondary:hover{border-color:var(--border-strong);transform:translateY(-2px)}

/* Ghost / tertiary */
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{background:var(--accent-soft)}

/* On solid light surfaces we sometimes want a dark solid button (inverse) */
.btn--inverse{background:var(--night-graphite);color:#fff}
.btn--inverse:hover{background:#34373f;transform:translateY(-2px)}

.btn--sm{padding:11px 20px;font-size:1rem;border-radius:12px}
.btn--lg{padding:16px 32px;font-size:1.25rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row--center{justify-content:center}

/* link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:1.1em;color:var(--accent)}
.link-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-state) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* =========================================================
   TOP BAR / MAIN MENU  (full-width, atlas-pro styling adapted)
   ========================================================= */
.lo-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:border-color .3s;border-bottom:1px solid transparent}
/* Frosted bar as a ::before layer (a sibling of the panel, never its ancestor)
   so a scrolled header does NOT break the dropdown panel's own backdrop-filter. */
.lo-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.lo-header.scrolled::before{opacity:1}
.lo-header.scrolled{border-bottom:1px solid var(--hairline)}
/* Header sits over dark heroes by default → force light ink until scrolled */
.lo-header{color:#fff}
.lo-header.scrolled{color:var(--fg)}
/* The links stay centred while they fit; when the actions need more room (language switcher, narrow desktop) the side
   columns keep their content width and the links shift left instead of running under the actions */
.lo-nav{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:24px;align-items:center;height:68px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.lo-nav__brand{grid-column:1;display:flex;align-items:center;justify-self:start}
.lo-nav__brand svg,.lo-nav__brand img{height:20px;width:auto;display:block}
.lo-nav__links{grid-column:2;display:flex;align-items:center;gap:4px}
.lo-nav__link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:0;border-radius:var(--r-pill);background:transparent;font:inherit;font-size:var(--fs-small);font-weight:500;line-height:1.2;white-space:nowrap;color:currentColor;opacity:.82;cursor:pointer;transition:opacity var(--dur-state),background var(--dur-state)}
.lo-nav__link:hover{opacity:1;background:rgba(127,127,127,.10)}
.lo-nav__actions{grid-column:3;display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:10px}
/* Secondary button legibility while header is transparent over a dark hero */
.lo-header:not(.scrolled) .btn--secondary{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);color:#fff}
.lo-header:not(.scrolled) .btn--secondary:hover{background:rgba(255,255,255,.16)}

/* Dropdown mega-menu (products by category) */
.lo-nav__item{position:relative;display:flex;align-items:center}
.lo-nav__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:640px;padding:20px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--hairline);box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease) .16s,transform .2s var(--ease) .16s,visibility 0s linear .36s;color:var(--fg)
}
/* Invisible hover bridge across the gap so the panel stays open while the cursor travels from the trigger */
.lo-nav__panel::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.lo-nav__item:hover .lo-nav__panel,.lo-nav__item:focus-within .lo-nav__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.lo-nav__panel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.lo-nav__panel--topics{left:0;width:min(1040px,calc(100vw - 32px));transform:translateX(-33%) translateY(8px)}.lo-nav__item:hover .lo-nav__panel--topics,.lo-nav__item:focus-within .lo-nav__panel--topics{transform:translateX(-33%) translateY(0)}.lo-nav__panel--topics .lo-nav__panel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lo-nav__panel-intro{margin:0 12px 10px;padding-bottom:13px;border-bottom:1px solid var(--border);color:var(--fg-muted);font-size:var(--fs-meta)}
/* Below 1300px a panel anchored to its trigger runs off the screen (Topics on the right, Products on the left), so both
   centre on the bar instead. top keeps the 14px gap below the trigger that the hover bridge spans. */
@media (max-width:1299px){
  .lo-nav{position:relative}
  .lo-nav__item{position:static}
  .lo-nav__panel,.lo-nav__panel--topics{top:calc(100% - 2px);left:50%;transform:translateX(-50%) translateY(8px)}
  .lo-nav__item:hover .lo-nav__panel,.lo-nav__item:focus-within .lo-nav__panel{transform:translateX(-50%) translateY(0)}
}
.lo-nav__menu-item{display:flex;gap:12px;padding:12px;border-radius:var(--r-lg);transition:background var(--dur-state)}
.lo-nav__menu-item:hover{background:var(--accent-soft)}
.mi-chip{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.mi-chip .ico{width:17px;height:17px}
.lo-nav__menu-item b{display:block;font-size:var(--fs-small);font-weight:500}
.lo-nav__menu-item .mi-text{font-size:var(--fs-meta);color:var(--fg-muted);line-height:1.45}
.lo-nav__menu-item .mi-desc{display:block}
.lo-nav__panel .link-arrow{font-size:1em}
.lo-nav__panel .caption{color:var(--fg-muted)}

/* Mobile menu */
.lo-nav__toggle{display:none;width:42px;height:42px;border:0;background:transparent;color:currentColor;border-radius:var(--r-md)}
.lo-nav__toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;margin-inline:auto}
.lo-mobile{position:fixed;inset:0;z-index:99;background:rgba(10,12,16,.97);backdrop-filter:blur(20px);color:#fff;display:none;flex-direction:column;padding:88px var(--gutter) 40px;gap:6px;overflow-y:auto}
.lo-mobile.open{display:flex}
.lo-mobile a{padding:16px 8px;font-size:1.25rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.08)}
.lo-mobile__heading,.lo-mobile a.lo-mobile__heading{padding:16px 8px 8px;font-size:1.25rem;font-weight:500;border-bottom:0}
.lo-mobile__sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:0 8px 10px}.lo-mobile__sub a{padding:10px 0;color:#aeb6c2;font-size:var(--fs-small);font-weight:400}
.lo-mobile .btn{margin-top:20px}

/* Below 1080px the five links and both actions no longer fit side by side */
@media (max-width:1080px){
  .lo-nav{column-gap:0}
  .lo-nav__links,.lo-nav__actions .btn:not(.lo-nav__cta){display:none}
  .lo-nav__toggle{display:block}
}
@media (max-width:520px){.lo-mobile__sub{grid-template-columns:1fr}}

/* =========================================================
   FOOTER
   ========================================================= */
.lo-footer{background:var(--night-graphite);color:#c3cad4;padding-block:clamp(56px,7vw,88px) 40px}
.lo-footer a{color:#c3cad4;transition:color var(--dur-state)}
.lo-footer a:hover{color:#fff}
.lo-footer__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.lo-footer__wordmark svg,.lo-footer__wordmark img{height:22px;margin-bottom:18px}
.lo-footer__brand p{font-size:var(--fs-small);color:#8a93a1;max-width:34ch;line-height:1.55}
.lo-footer__col h6{font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:#8a93a1;margin-bottom:16px}
.lo-footer__col a{display:block;font-size:var(--fs-small);padding:6px 0}
.lo-footer__social{display:flex;gap:12px;margin-top:22px}
.lo-footer__social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#c3cad4;transition:background var(--dur-state),color var(--dur-state),border-color var(--dur-state)}
.lo-footer__social a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.lo-footer__social .ico{width:19px;height:19px}
.lo-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:var(--fs-meta);color:#8a93a1}
.lo-footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.lo-footer__badges{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lo-footer__badge{font-size:var(--fs-micro);padding:6px 12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);color:#b4bcc8}
@media (max-width:900px){.lo-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lo-footer__top{grid-template-columns:1fr}}

/* =========================================================
   SECTION HEAD  (eyebrow + title + subtitle)
   ========================================================= */
.section-head{max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{margin-bottom:0}
.section-head .lead{margin-top:20px;max-width:62ch}
.section-head--center .lead{margin-inline:auto}

/* =========================================================
   BENEFITS GRID
   ========================================================= */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{
  background:var(--card-bg);border:var(--card-border);border-radius:var(--r-2xl);
  padding:32px;transition:transform var(--dur-state) var(--ease),box-shadow var(--dur-state) var(--ease),border-color var(--dur-state)
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--accent-line)}
.benefit__icon{width:48px;height:48px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:22px}
.benefit__icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.benefit__icon i{font-size:1.25rem}
.benefit h3{font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.benefit p{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
.benefits--center .benefit{text-align:center}
.benefits--center .benefit__icon{margin-inline:auto}
@media (max-width:960px){.benefits{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.benefits{grid-template-columns:1fr}}

/* Audience cards (image-topped, recognizable per service) */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.aud{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);transition:transform var(--dur-state) var(--ease),box-shadow var(--dur-state),border-color var(--dur-state)}
.aud:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--accent-line)}
.aud__img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.aud__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.aud:hover .aud__img img{transform:scale(1.05)}
.aud__ico{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(10,12,16,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.18)}
.aud__ico .ico{width:20px;height:20px}
.aud__body{padding:20px 22px 24px}
.aud__body h3{font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
.aud__body p{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.55;margin:0}
@media(max-width:960px){.aud-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.aud-grid{grid-template-columns:1fr}}

/* =========================================================
   FEATURE DETAIL  (copy + points, alternating)
   ========================================================= */
.detail h3{font-size:var(--fs-h3);line-height:1.08;margin-top:16px}
.detail p{color:var(--fg-muted);margin-top:22px;font-size:var(--fs-lead);line-height:1.55;max-width:54ch}
.points{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.point{display:flex;gap:15px;align-items:flex-start}
.point__tick{width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent);flex-shrink:0;margin-top:2px;display:grid;place-items:center}
.point__tick svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.point span{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
.point span strong{color:var(--fg);font-weight:500}

/* =========================================================
   SUB-OPTIONS GRID  (compact feature/app tiles)
   ========================================================= */
.options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.option{
  display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-xl);
  background:var(--card-bg);border:var(--card-border);
  transition:transform var(--dur-state) var(--ease),border-color var(--dur-state),box-shadow var(--dur-state)
}
.option:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--card-shadow)}
.option__head{display:flex;align-items:center;gap:10px}
.option__ico{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.option__ico i{font-size:.9375rem}
.option__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Role tokens one step up each: title --fs-small to --fs-h5 (+25%), body
   --fs-meta to --fs-body (+20-25%), tag --fs-micro to --fs-meta (+18-23%).
   --fs-h5 also matches .cap b, the same "item title" job in the Build list. */
.option b{font-size:var(--fs-h5);font-weight:500}
/* The product name is the point of the card, so it carries eyebrow size, while
   "Learn more" drops to meta. Previously inverted: the link inherited 1.1em
   (19.8px) and outweighed the 15px product name. */
.option .tag{font-size:var(--fs-eyebrow);color:var(--accent);font-weight:600}
.option .link-arrow{font-size:var(--fs-meta)}
.option p{font-size:var(--fs-body);color:var(--fg-subtle);line-height:1.55}
/* Product image slot: bleeds to the card edges, top corners follow the card
   radius. Opt-in, so cards without .option__media are unchanged. Real shots go
   to assets/img/product/<slug>.jpg; until then each falls back to a reference. */
.option__media{display:block;margin:-22px -22px 6px;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;background:var(--surface-2,#e9ebee)}
.option__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-slow,.6s) var(--ease)}
.option:hover .option__media img{transform:scale(1.03)}
/* UI screenshots are usually taller than the 16:9 slot; crop from the bottom
   so headers and status bars survive. */
.option__media--top img{object-position:top}
@media (prefers-reduced-motion:reduce){.option:hover .option__media img{transform:none}}
/* Two-up variant, for a grid sitting inside a narrower column (e.g. .atmo__col).
   A class, not an inline style: inline grid-template-columns would beat the
   media queries below and keep two cramped columns on phones. */
.options-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.options-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.options-grid,.options-grid--2{grid-template-columns:1fr}}

/* =========================================================
   BENTO GRID (Block 3: Products): flagship tile + 2x2
   ========================================================= */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.btile{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-xl);background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);color:var(--fg);transition:transform var(--dur-state) var(--ease),border-color var(--dur-state),box-shadow var(--dur-state)}
.btile:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--card-shadow-hover)}
.btile__ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.btile__ico .ico{width:19px;height:19px}
.btile h3{font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em;margin:6px 0 0}
.btile p{font-size:var(--fs-body);color:var(--fg-muted);line-height:1.55;margin:0}
.btile__tags{margin-top:auto;padding-top:6px;font-size:var(--fs-meta);font-weight:500;color:var(--accent);letter-spacing:.01em}
/* flagship */
.btile--flag{grid-column:1;grid-row:1 / span 2;padding:0;gap:0;overflow:hidden}
.btile--flag .btile__media{display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.btile--flag .btile__media img{width:100%;height:100%;object-fit:cover}
.btile--flag .btile__body{display:flex;flex-direction:column;gap:12px;padding:28px}
.btile--flag h3{font-size:clamp(1.625rem,2.3vw,2rem);margin:4px 0 0}
.btile--flag p{font-size:var(--fs-body)}
@media (max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .btile--flag{grid-column:1 / span 2;grid-row:auto}
  .btile--flag .btile__media{aspect-ratio:21/9}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .btile--flag{grid-column:1}
  .btile--flag .btile__media{aspect-ratio:4/3}
}

/* =========================================================
   STAT STRIP
   ========================================================= */
.stat-strip{display:flex;border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--glass-bg);backdrop-filter:blur(14px);overflow:hidden}
.stat{flex:1;padding:24px 28px;border-right:1px solid var(--hairline)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(1.75rem,3.4vw,2.375rem);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.stat small{font-size:var(--fs-meta);font-weight:500;color:var(--fg-subtle);display:block;margin-top:5px}
@media (max-width:620px){.stat-strip{flex-direction:column}.stat{border-right:0;border-bottom:1px solid var(--hairline)}.stat:last-child{border-bottom:0}}

/* Proof cards (big numbers) */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proof{border:var(--card-border);border-radius:var(--r-2xl);padding:38px 32px;background:var(--card-bg)}
.proof b{display:block;font-size:clamp(2.75rem,6vw,4.5rem);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.proof span{display:block;margin-top:16px;color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
@media (max-width:960px){.proof-grid{grid-template-columns:1fr}}
.proof-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Two cards share a half-width column here, so the number sizes to the card, not the viewport (10,000+ overflowed at 1024px and up). */
.proof-grid--2 .proof{container-type:inline-size}
.proof-grid--2 .proof b{font-size:clamp(2.25rem,25cqi,4.5rem)}
@media (max-width:620px){.proof-grid--2{grid-template-columns:1fr}}

/* =========================================================
   DISCIPLINE BAND
   ========================================================= */
.disc-band{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:30px 0}
.disc-row{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,60px);flex-wrap:wrap}
.disc{display:flex;align-items:center;gap:11px;color:var(--fg-muted);font-size:var(--fs-body);font-weight:500}
.disc svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.disc i{color:var(--accent);font-size:1.25rem}

/* =========================================================
   PROOF STRIP (Block 2): logo bar + stat band, centered, light
   ========================================================= */
.proof-strip{padding-block:clamp(44px,6vw,76px);background:var(--bg);color:var(--fg)}
.proof-strip__caption{text-align:center;font-size:1.25rem;font-weight:400;letter-spacing:.02em;color:var(--fg-subtle);margin-bottom:26px}
/* Logo lightbar: auto-scrolling marquee that fades to transparent at both edges */
.logo-bar{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-bar__track{display:flex;align-items:center;width:max-content;animation:logo-scroll 50s linear infinite}
.logo-bar:hover .logo-bar__track{animation-play-state:paused}
/* With JS, initLogoBar() moves the track instead (Safari jumps back when a paused CSS animation freezes) */
.logo-bar--js .logo-bar__track{animation:none;will-change:transform}
.logo-bar .lg{flex:0 0 auto;margin-right:clamp(40px,5.5vw,78px);max-height:52px;max-width:172px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity var(--dur-state) var(--ease),filter var(--dur-state) var(--ease)}
.logo-bar .lg:hover{opacity:1;filter:none}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-bar{-webkit-mask-image:none;mask-image:none}
  .logo-bar__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:24px}
  .logo-bar__track .lg[data-dup]{display:none}
  .logo-bar__track .lg{margin-right:clamp(24px,4vw,52px)}
}
.proof-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:clamp(38px,5vw,54px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--hairline)}
.proof-stats .st{padding:0 clamp(24px,4.5vw,52px);border-left:1px solid var(--border);text-align:center}
.proof-stats .st:first-child{border-left:0}
.proof-stats .st b{display:block;font-size:clamp(2rem,4vw,3.125rem);font-weight:500;letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums lining-nums;line-height:1}
.proof-stats .st span{display:block;margin-top:10px;font-size:var(--fs-small);color:var(--fg-muted);max-width:28ch;margin-inline:auto}
@media (max-width:620px){
  .proof-stats{gap:24px 0;margin-top:32px;padding-top:30px}
  .proof-stats .st{width:100%;border-left:0;padding:0}
  .proof-stats .st b{font-size:2rem}
  .proof-stats .st span{max-width:none}
}

/* Trust / logo bar */
.trust-bar{padding:44px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trust-row{display:flex;justify-content:center;gap:clamp(20px,4vw,44px);flex-wrap:wrap;align-items:center}
.trust-row .caption{width:100%;text-align:center;margin-bottom:22px}
.trust-item{font-size:var(--fs-small);color:var(--fg-subtle);font-weight:500}

/* =========================================================
   CTA BLOCK
   ========================================================= */
.cta-block{position:relative;overflow:hidden;text-align:center}
.cta-block__glow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:900px;height:500px;max-width:100%;z-index:0;background:radial-gradient(50% 50% at 50% 50%,rgba(97,45,248,.22),transparent 70%);filter:blur(20px);pointer-events:none}
.cta-block .wrap{position:relative;z-index:2}
.cta-block h2{max-width:20ch;margin-inline:auto;font-weight:300}
.cta-block .lead{margin:22px auto 0;max-width:56ch}
.cta-block .btn-row{margin-top:34px}

/* =========================================================
   CARDS, generic + certification
   ========================================================= */
.card{background:var(--card-bg);border:var(--card-border);border-radius:var(--r-xl);padding:28px;box-shadow:var(--card-shadow)}
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cert{border:1px solid var(--border);border-radius:14px;padding:20px;background:var(--bg-raised)}
.cert b{display:block;font-size:var(--fs-small);font-weight:500}
.cert small{color:var(--fg-subtle);font-size:var(--fs-meta);line-height:1.4;display:block;margin-top:5px}
.cert small a{color:inherit;text-decoration:none;transition:color var(--dur-state) var(--ease)}
.cert small a:hover{color:var(--accent)}

/* Chips / pills */
.chip{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg-raised);font-size:var(--fs-small);color:var(--fg-muted)}
.chip svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chip i{color:var(--accent);font-size:.875rem}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}

/* =========================================================
   CONNECT BAND, the reusable "connect what you already run"
   summary used on product pages (and available anywhere).
   The frame is FIXED: eyebrow, headline, lead and the link to
   integrate-your-data.html are identical on every page. Only
   the .chip-row varies, naming the sources that matter for
   that product. Surface is chosen per host page: add .s-dark
   or .s-warm so the page keeps its dark/light rhythm; the
   chips are token-driven and read correctly on either.
   Long-form version of this story: `#integration` on the
   Solutions and Products pages, full canvas on the
   integrate-your-data page.
   ========================================================= */
.connect-band{border-top:1px solid var(--hairline)}
.connect-band .section-head{max-width:58ch}
.connect-band .chip-row{margin-top:30px}
.connect-band__foot{margin-top:30px}

/* Inline stat: a single proof number carried inside a copy column,
   for feature splits that end on a measured claim. The three-up
   grid version is .proof / .proof-grid. */
.stat-inline{display:flex;align-items:baseline;gap:16px;margin-top:34px;padding-top:26px;border-top:1px solid var(--hairline)}
.stat-inline b{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums lining-nums;flex:none}
.stat-inline span{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.5;max-width:32ch}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);background:var(--accent-soft);border:1px solid var(--accent-line);font-size:var(--fs-micro);font-weight:500;color:var(--accent)}
.badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* =========================================================
   FAQ (details/summary)
   ========================================================= */
.faq{display:flex;flex-direction:column;gap:12px;max-width:900px}
.qa{background:var(--card-bg);border:var(--card-border);border-radius:var(--r-xl);overflow:hidden;transition:border-color var(--dur-state)}
.qa[open],.qa:hover{border-color:var(--accent-line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;font-weight:500;font-size:var(--fs-body)}
.qa summary::-webkit-details-marker{display:none}
.qa__plus{flex-shrink:0;width:22px;height:22px;position:relative}
.qa__plus::before,.qa__plus::after{content:"";position:absolute;background:var(--accent);left:50%;top:50%;transform:translate(-50%,-50%);transition:transform var(--dur-state) var(--ease)}
.qa__plus::before{width:14px;height:2px}.qa__plus::after{width:2px;height:14px}
.qa[open] .qa__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa__a{padding:0 26px 24px;color:var(--fg-muted);font-size:var(--fs-body);max-width:74ch;line-height:1.6}

/* =========================================================
   MEDIA, device mockups, atmospheric heroes
   ========================================================= */
.media{position:relative}
.device{position:relative;transition:transform .5s var(--ease);filter:drop-shadow(0 40px 80px rgba(0,0,0,.35))}
.device img{width:100%;border-radius:6px}
.device--tilt{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg)}
.split--reverse .device--tilt{transform:perspective(1600px) rotateY(9deg) rotateX(3deg)}
.media:hover .device--tilt{transform:perspective(1600px) rotateY(0) rotateX(0)}
.device__glow{position:absolute;inset:-8% -6%;z-index:-1;background:radial-gradient(60% 55% at 50% 45%,rgba(97,45,248,.28),transparent 70%);filter:blur(24px)}

/* CSS iPhone frame (restrained, matte). Screen is a swappable <img>,
   so localized screenshots drop in without re-compositing the bezel.
   Reserve baked-in bezel composites for cinematic / angled scenes. */
.phone-mock{position:relative;max-width:300px;margin-inline:auto}
.phone-mock::after{content:"";position:absolute;inset:-16% -12%;z-index:-1;background:radial-gradient(55% 50% at 50% 45%,rgba(97,45,248,.32),transparent 70%);filter:blur(30px)}
.phone-mock__frame{
  position:relative;padding:11px;border-radius:54px;
  background:linear-gradient(150deg,#2b2e35 0%,#101216 55%,#20232a 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.10),
    inset 0 0 3px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.55),
    0 46px 84px -22px rgba(0,0,0,.7);
}
.phone-mock__frame img{width:100%;display:block;border-radius:44px}
/* Dynamic Island: sits in the empty centre of the screenshot's status bar */
.phone-mock__island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:32%;height:26px;background:#04050a;border-radius:16px;z-index:2}
/* Richness pass slice 2: gentle device float (subtle, staggered) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.phone-mock__frame{animation:floaty 6.5s ease-in-out infinite;will-change:transform}
.apple-lineup .screen{animation:floaty 7s ease-in-out infinite;will-change:transform}
.apple-lineup .screen--phone{animation-duration:6s;animation-delay:.5s}
.apple-lineup .screen--carplay{animation-duration:8s;animation-delay:.9s}
@media (prefers-reduced-motion:reduce){.phone-mock__frame,.apple-lineup .screen{animation:none}}
.gov-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.gov{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-meta);font-weight:500;color:var(--fg-muted);background:var(--btn-secondary-bg);border:var(--btn-secondary-border);border-radius:var(--r-pill);padding:9px 16px}
.gov .ico{width:16px;height:16px;color:var(--accent)}

/* =========================================================
   APPLE / native device experience (Block 5, light product page)
   ========================================================= */
.apple{background:linear-gradient(180deg,#ffffff 0%,#eaeef3 100%);text-align:center;position:relative;overflow:hidden}
.apple__head{max-width:22ch;margin-inline:auto}
.apple__lead{max-width:58ch;margin:20px auto 0}
.apple__lead + .apple__lead{margin-top:16px}
.apple-stage{position:relative;margin:clamp(48px,7vw,84px) auto 0;max-width:1000px}
/* device lineup, aligned to a common floor (phone rises above the tablets) */
.apple-lineup{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,2.6vw,40px);position:relative;z-index:1}
.apple-lineup::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:78%;height:78%;background:radial-gradient(60% 55% at 50% 45%,rgba(97,45,248,.16),transparent 70%);filter:blur(42px);z-index:-1}
/* Baked device composite (21 Oct 2026) replacing the CSS lineup on the homepage: its white
   backdrop multiplies into the section gradient, so no box edge shows. */
.apple-shot{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.screen{position:relative;flex:0 0 auto;padding:6px;border-radius:18px;background:linear-gradient(150deg,#34373e 0%,#111318 55%,#23262d 100%);box-shadow:0 34px 60px -26px rgba(18,22,38,.5),0 0 0 1px rgba(0,0,0,.25)}
.screen img{display:block;width:100%;border-radius:12px}
.screen--phone{flex-basis:clamp(120px,15vw,166px);padding:5px;border-radius:30px}
.screen--phone img{border-radius:25px}
.screen--ipad{flex-basis:clamp(300px,42vw,460px)}
.screen--carplay{flex-basis:clamp(220px,30vw,340px)}
.screen--carplay img{aspect-ratio:16/9;object-fit:cover}
/* Lock the CarPlay height to the iPad's: same clamp expression, minus the 6px
   frame padding on each side, divided by the iPad shot's 1400/1049 ratio. The
   image crops at the sides to fill it. Single-row layout only; below 861px the
   lineup wraps, so each device stands alone and matching heights is moot. */
@media(min-width:861px){
  .screen--carplay img{aspect-ratio:auto;height:calc((clamp(300px,42vw,460px) - 12px) / 1.3346);object-position:center}
}
/* four-pillar row */
.apple-pillars{margin-top:clamp(52px,7vw,88px);text-align:left}
.apillar{display:flex;flex-direction:column;gap:10px}
.apillar__ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.apillar__ico .ico{width:22px;height:22px}
.apillar b{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.apillar>.badge{align-self:flex-start;margin-top:2px}
.apillar p{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
/* Closing statement: the answer to "why not multi-platform". Carries a real
   argument, so it gets a heading and body-size copy instead of footnote type. */
.apple-close{margin:clamp(48px,6.5vw,80px) auto 0;max-width:62ch;padding-top:clamp(30px,4vw,46px);border-top:1px solid var(--border)}
.apple-close h3{font-size:var(--fs-h4);letter-spacing:-.01em;text-align:center;text-wrap:balance}
.apple-close p{margin-top:16px;color:var(--fg-muted);font-size:var(--fs-body);text-wrap:pretty}
.apple-close p:first-of-type{margin-top:20px}
@media(max-width:820px){
  .apple-lineup{flex-wrap:wrap;gap:20px}
  .screen--ipad{flex-basis:88%;order:-1}
  .screen--carplay{flex-basis:70%}
  .screen--phone{flex-basis:132px}
}

/* =========================================================
   BUILD / empowerment (Block 6, dark, editorial split)
   ========================================================= */
.build .split{align-items:start}
.cap-list{display:flex;flex-direction:column}
.cap{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--hairline)}
.cap:first-child{border-top:0;padding-top:0}
.cap:last-child{padding-bottom:0}
.cap__ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.cap__ico .ico{width:22px;height:22px}
.cap__ico--num{font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* Two-by-two step list, for a section without an image beside it. */
.cap-list--2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px)}
.cap-list--2x2 .cap:nth-child(2){border-top:0;padding-top:0}
.cap-list--2x2 .cap:nth-last-child(2){padding-bottom:0}
@media (max-width:620px){.cap-list--2x2{grid-template-columns:1fr}.cap-list--2x2 .cap:nth-child(2){border-top:1px solid var(--hairline);padding-top:24px}.cap-list--2x2 .cap:nth-last-child(2){padding-bottom:24px}}
.cap b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.cap p{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}

/* =========================================================
   INDEPENDENCE / principles manifesto (Block 7, warm light)
   ========================================================= */
.indep{text-align:center}
.indep__head{max-width:15ch;margin-inline:auto}
.indep__sub{max-width:52ch;margin:18px auto 0}
.indep-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,6vw,78px);text-align:left}
.indep-item{padding:0 clamp(18px,2.4vw,34px);border-left:1px solid var(--border)}
.indep-item:first-child{border-left:0}
.indep-item b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.indep-item span{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.55}
/* 2-up variant: fewer, weightier principles with room for real body copy */
.indep__body{max-width:64ch;margin:22px auto 0;color:var(--fg-muted)}
.indep-row--3{grid-template-columns:repeat(3,1fr)}
.indep-row--2up{grid-template-columns:repeat(2,1fr);gap:clamp(36px,4.5vw,56px) 0}
.indep-row--2up .indep-item:nth-child(odd){border-left:0}
.indep-row--2up .indep-item span{font-size:var(--fs-body)}
.indep-item .indep-item__title{display:flex;align-items:center;gap:14px}
.indep-item .indep-item__ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.indep-item .indep-item__ico .ico{width:20px;height:20px;color:inherit}
@media(max-width:860px){
  .indep-row{grid-template-columns:repeat(2,1fr);gap:38px 0}
  .indep-item{border-left:0;padding-left:0;padding-right:clamp(18px,4vw,30px)}
}
@media(max-width:520px){
  .indep-row{grid-template-columns:1fr;gap:30px}
  .indep-item{padding:0}
}

/* =========================================================
   OUTCOMES / customer case video (Block 8, dark, quote + 16:9 player)
   The poster is the video thumbnail, which carries its own title and
   logo, so it is shown uncropped at 16:9 and never zoomed or overlaid.
   ========================================================= */
.outcomes{position:relative;overflow:hidden;padding-block:var(--section-y);background:#07090c;color:#f4f6f9}
.outcomes__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.outcomes__quote{font-weight:300;font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.02em;max-width:20ch;text-wrap:balance;color:#f4f6f9;margin-top:16px;text-indent:-.4em}
.outcomes__attr{margin-top:22px;color:#c7ccd4;font-size:var(--fs-small)}
.outcomes__attr b{display:block;color:#fff;font-weight:500;font-size:var(--fs-body);margin-bottom:2px}
.outcomes__lead{margin-top:22px;color:#c7ccd4;font-size:var(--fs-body);max-width:42ch}
.outcomes__stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.outcomes__poster{position:absolute;inset:0}
.outcomes__poster img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.outcomes__stage:hover .outcomes__poster img{transform:scale(1.025)}
.outcomes__play{position:absolute;inset:0;z-index:2;width:100%;display:grid;place-items:center;background:transparent;border:0;border-radius:inherit;cursor:pointer}
.outcomes__play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
/* Sits on the bonnet in the thumbnail, clear of its baked-in title */
.outcomes__play .pbtn{top:8%}
.outcomes__play .pbtn{position:relative;width:66px;height:66px;border-radius:50%;background:var(--brand-purple);display:grid;place-items:center;box-shadow:0 14px 44px -6px rgba(97,45,248,.6);transition:transform var(--dur-state) var(--ease)}
.outcomes__play .pbtn::before{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:5px}
.outcomes__play .pbtn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,116,255,.7);animation:pulse-ring 2.8s ease-out infinite}
.outcomes__play:hover .pbtn{transform:scale(1.07)}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}70%{opacity:0}100%{transform:scale(1.85);opacity:0}}
.outcomes__video{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:#000;border:0;opacity:0;pointer-events:none;transition:opacity var(--dur-state) var(--ease)}
.outcomes__stage.playing .outcomes__poster,.outcomes__stage.playing .outcomes__play{opacity:0;pointer-events:none;transition:opacity var(--dur-state) var(--ease)}
.outcomes__stage.playing .outcomes__video{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.outcomes__poster img{transition:none}.outcomes__stage:hover .outcomes__poster img{transform:none}.outcomes__play .pbtn::after{animation:none}}
@media(max-width:960px){.outcomes__inner{grid-template-columns:1fr}}
@media(max-width:620px){.outcomes__play .pbtn{width:52px;height:52px}.outcomes__play .pbtn::before{border-width:9px 0 9px 15px;margin-left:4px}}

/* =========================================================
   NEWS / momentum band (Block 9, light, data-driven cards)
   ========================================================= */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.ncard{display:flex;flex-direction:column;background:var(--card-bg);border:var(--card-border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--card-shadow);color:var(--fg);transition:transform var(--dur-state) var(--ease),box-shadow var(--dur-state),border-color var(--dur-state)}
.ncard:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--accent-line)}
.ncard__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.ncard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.ncard:hover .ncard__thumb img{transform:scale(1.05)}
.ncard__body{display:flex;flex-direction:column;gap:11px;padding:24px 24px 26px}
.ncard__meta{display:flex;align-items:center;gap:11px;font-size:var(--fs-meta)}
.ncard__cat{color:var(--accent);font-weight:500}
.ncard__dot{width:4px;height:4px;border-radius:50%;background:var(--border-strong);flex-shrink:0}
.ncard__date{color:var(--fg-subtle)}
.ncard h3{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em;line-height:1.22;margin:0}
.ncard p{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.55;margin:0}
.ncard__more{margin-top:auto;padding-top:6px;color:var(--accent);font-weight:500;font-size:var(--fs-small);display:inline-flex;align-items:center;gap:7px}
.ncard__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-state) var(--ease)}
.ncard:hover .ncard__more svg{transform:translateX(4px)}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)}.news-grid .ncard:last-child{grid-column:1 / -1}.news-grid .ncard:last-child .ncard__thumb{aspect-ratio:21/7}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}.news-grid .ncard:last-child .ncard__thumb{aspect-ratio:16/10}}

/* =========================================================
   PREPAREDNESS DOORWAY (dark, one-screen link into the
   preparedness campaign). Text-align follows .center on the
   intro block; the fact card and CTA are centered separately
   so the card content itself can stay left-aligned and readable.
   ========================================================= */
.prep-door__inner{position:relative;z-index:1}
.prep-door__fact{max-width:56ch;margin:clamp(30px,3.6vw,42px) auto 0;text-align:left}
.prep-door__fact-label{margin-bottom:10px}
.prep-door__fact-body{margin:0;color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
.prep-door__cta{justify-content:center;margin-top:clamp(26px,3vw,34px)}
/* Quiet inline source link, used wherever a July 2021 fact appears outside the
   case study's own numbered list. Shared by the homepage doorway and the
   preparedness pages, which both load this file. */
.prep-src{color:var(--accent);font-size:var(--fs-meta)}
.prep-src:hover{text-decoration:underline}

/* =========================================================
   COMPLIANCE band (Block 10, clean white trust strip)
   ========================================================= */
.compliance{background:var(--bg-raised);text-align:center;border-top:1px solid var(--hairline)}
.compliance__statement{max-width:56ch;margin:14px auto 0}
.cert-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;margin:clamp(30px,4vw,46px) auto 0}
.cert-badge{display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);text-align:left;transition:border-color var(--dur-state) var(--ease),transform var(--dur-state) var(--ease)}
.cert-badge .ico{width:22px;height:22px;color:var(--fg-faint);flex-shrink:0;transition:color var(--dur-state) var(--ease)}
.cert-badge__t{display:flex;flex-direction:column;line-height:1.25}
.cert-badge b{font-size:var(--fs-small);font-weight:500;color:var(--fg)}
.cert-badge small{font-size:var(--fs-micro);color:var(--fg-subtle)}
.cert-badge:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.cert-badge:hover .ico{color:var(--accent)}
.compliance__foot{margin-top:clamp(26px,3vw,38px)}

/* =========================================================
   FINAL CTA (Block 11, dark cinematic close, bookends the hero)
   ========================================================= */
.cta-final{position:relative;overflow:hidden;background:#07090c;text-align:center;padding-block:clamp(90px,12vw,160px)}
.cta-final__inner{position:relative;z-index:1}
.cta-final h2{font-weight:300;font-size:var(--fs-h1);letter-spacing:-.03em;line-height:1.02;color:#f4f6f9;max-width:15ch;margin-inline:auto}
.cta-final p{color:#c7ccd4;font-size:var(--fs-lead);max-width:50ch;margin:22px auto 0}
.cta-final .btn-row{justify-content:center;margin-top:40px}

/* Floating live card (over media) */
.float-card{position:absolute;z-index:4;background:var(--glass-bg);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 30px 60px rgba(0,0,0,.35);padding:14px;width:min(300px,74%)}
.float-card--br{right:-22px;bottom:-30px}
.float-card--bl{left:-22px;bottom:-30px}
.float-card__label{font-size:var(--fs-micro);font-weight:500;letter-spacing:.03em;color:var(--fg-subtle);margin-bottom:10px;display:flex;align-items:center;gap:9px}
.float-card__label .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media (max-width:960px){.device--tilt,.split--reverse .device--tilt{transform:none}.float-card--br{right:8px}.float-card--bl{left:8px}}

/* =========================================================
   HERO (cinematic, full-bleed atmosphere)
   ========================================================= */
/* padding-top reserves the fixed header's height. Content is bottom-aligned, so
   the more copy a hero carries the higher its top edge climbs; without this,
   interior heroes slid their eyebrow under the transparent nav (Solutions by
   64px, Trust by 34px, Careers by 18px at 1440x800). */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:clamp(88px,11vh,116px);padding-bottom:clamp(48px,7vw,90px);background:#0a0c10;color:#f4f6f9;
  --fg:#f4f6f9;--fg-muted:#c7ccd4;--fg-subtle:#8a93a1;
  --btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-border:1px solid rgba(255,255,255,.20)}
.hero .btn--secondary:hover{background:rgba(255,255,255,.16)}
.hero__bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:heroDrift 24s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.12) translateY(-1.4%)}}
.hero__grad{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(10,12,16,.96) 0%,rgba(10,12,16,.8) 32%,rgba(10,12,16,.28) 64%,rgba(10,12,16,.42) 100%),
  linear-gradient(0deg,rgba(10,12,16,1) 2%,rgba(10,12,16,0) 46%,rgba(10,12,16,.35) 100%)}
.hero__scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px)}
/* Hero montage video: still poster (the img) shows instantly, video fades in on canplay. Enabled by setting HERO_VIDEO in site.js. */
.hero__video{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .9s var(--ease)}
.hero__video.is-ready{opacity:1}
.hero__inner{position:relative;z-index:3;width:100%}
.hero .eyebrow{margin-bottom:26px;color:var(--brand-purple-bright)}
.hero h1{font-weight:300;font-size:clamp(2.5rem,8.4vw,8rem);line-height:.94;letter-spacing:-.04em;margin:0 0 16px;color:#f4f6f9}
.hero__tagline{font-size:clamp(1.25rem,2.5vw,1.875rem);font-weight:400;letter-spacing:-.01em;color:#f4f6f9}
.hero__sub{color:#d3d8e0;max-width:56ch;margin-top:22px;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.55}
.hero .btn-row{margin-top:38px}
.hero .stat-strip{margin-top:60px;max-width:820px;--glass-bg:rgba(12,15,20,.5)}

/* Light inline microproof row (home hero): supports the headline, no box */
.hero__microproof{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(34px,5vw,50px)}
.hero__microproof .mp{padding:0 clamp(18px,3vw,32px);border-left:1px solid rgba(255,255,255,.16)}
.hero__microproof .mp:first-child{padding-left:0;border-left:0}
.hero__microproof b{display:block;font-size:clamp(1.1875rem,2.1vw,1.6875rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:#f4f6f9}
.hero__microproof small{display:block;font-size:var(--fs-small);color:#bcc3ce;margin-top:5px}

/* Interior/section hero variant: centered + shorter, distinct from the home hero */
.hero--sub h1{font-size:clamp(2.375rem,5.5vw,4.5rem)}
.hero--page{min-height:clamp(420px,64svh,640px);align-items:center;text-align:center}
.hero--page .hero__inner{max-width:940px;margin-inline:auto}
.hero--page .eyebrow{justify-content:center}
.hero--page .btn-row{justify-content:center}
.hero--page .hero__microproof{justify-content:center}

.scroll-cue{position:absolute;left:var(--gutter);bottom:26px;z-index:3;font-size:var(--fs-micro);font-weight:500;letter-spacing:.14em;color:#8a93a1;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(#8a93a1,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}
@media (max-width:620px){.scroll-cue{display:none}}

/* Hero responsive: media stays full-bleed; content + scrim adapt (never lose the background).
   On phones a landscape frame can't crop vertically, so we anchor-zoom from the bottom to lift
   the subject above the text, and strengthen the lower scrim. Real asset uses a <picture> mobile crop. */
@media (max-width:900px){
  .hero__bg img,.hero__bg video{animation:none;transform:scale(1.35);transform-origin:center bottom;object-position:center}
  .hero__grad{background:linear-gradient(0deg,#0a0c10 30%,rgba(10,12,16,.92) 48%,rgba(10,12,16,.32) 70%,rgba(10,12,16,.5) 100%)}
}
@media (max-width:620px){
  .hero__bg img,.hero__bg video{transform:scale(1.6);transform-origin:center bottom}
  .hero__grad{background:linear-gradient(0deg,#0a0c10 34%,rgba(10,12,16,.94) 52%,rgba(10,12,16,.28) 74%,rgba(10,12,16,.5) 100%)}
}
@media (max-width:620px){
  .hero__microproof{gap:12px 0}
  .hero__microproof .mp{width:100%;border-left:0;padding:0;display:flex;align-items:baseline;gap:8px}
  .hero__microproof b{font-size:1.125rem}
  .hero__microproof small{margin-top:0}
  .hero .btn-row{width:100%}
  .hero .btn-row .btn{flex:1 1 auto;justify-content:center}
}

/* Differentiator strip: five points over two rows, 3 then 2, with the short row
   centred. Flex rather than grid, because a 5-item grid strands the last row
   left. Basis is a third minus its share of the gaps, so exactly three fit.
   The wider columns let body copy sit at --fs-body. */
.diffs{--diff-gap:clamp(28px,3vw,46px);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--diff-gap) * 1.3) var(--diff-gap)}
.diff{flex:0 1 calc((100% - 2 * var(--diff-gap)) / 3)}
.diff__ico{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.diff__ico .ico{width:21px;height:21px}
.diff b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em;margin:16px 0 8px;text-wrap:balance}
.diff p{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
@media (max-width:900px){.diff{flex-basis:calc((100% - var(--diff-gap)) / 2)}}
@media (max-width:620px){.diff{flex-basis:100%}}

/* Product device shot on a white studio background. multiply drops the white
   into whatever light surface it sits on, so there is no visible plate edge. */
/* The source frame is cropped to its content, so the gap above the image is the
   section's own top padding and the gap below is this margin. Matching
   --section-y makes the two read as equal. */
.devices-shot{max-width:1000px;margin:0 auto var(--section-y)}
.devices-shot img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Dark counterpart: the frame's background is pure black, so screen dissolves it
   into the dark section the way multiply does for white on light. */
.devices-shot--dark{max-width:1040px;margin:clamp(40px,5vw,76px) auto 0}
.devices-shot--dark img{mix-blend-mode:screen}

/* Full-bleed atmospheric feature section */
.atmo{position:relative;overflow:hidden;color:#f4f6f9;padding-block:clamp(90px,12vw,170px)}
.atmo__bg{position:absolute;inset:0;z-index:0}
.atmo__bg img{width:100%;height:100%;object-fit:cover}
.atmo__grad{position:absolute;inset:0;z-index:1}
.atmo .wrap{position:relative;z-index:2}
.atmo--left .atmo__grad{background:linear-gradient(90deg,rgba(10,12,16,.97) 0%,rgba(10,12,16,.82) 40%,rgba(10,12,16,.25) 78%,transparent 100%)}
.atmo--right .atmo__grad{background:linear-gradient(270deg,rgba(10,12,16,.97) 0%,rgba(10,12,16,.82) 40%,rgba(10,12,16,.25) 78%,transparent 100%)}
.atmo__col{max-width:560px}
.atmo--right .atmo__col{margin-left:auto}
.atmo .point span,.atmo p{color:#c7ccd4}
/* Direct child only: a descendant selector here also resized paragraphs inside
   nested components (cards), so atmo-section cards read larger than the same
   cards elsewhere on the page. */
.atmo__col>p{font-size:var(--fs-lead);line-height:1.55}
.atmo .point span strong{color:#eef1f5}
/* Lucem is the one atmo image shot in daylight, so it needs a heavier veil than
   the night photos to hold light text, kept lighter past 60% so the detection
   boxes stay readable. On phones the horizontal scrim can't work (copy spans the
   full width), so it becomes a near-even veil. */
.lucem .atmo__grad{background:linear-gradient(90deg,rgba(10,12,16,.96) 0%,rgba(10,12,16,.9) 34%,rgba(10,12,16,.55) 66%,rgba(10,12,16,.16) 100%)}
/* Cover crops this 16:9 frame from the sides here, so pinning the image's left
   edge pushes its content right, clearing the fire from behind the copy. */
.lucem .atmo__bg img{object-position:0% center}
.lucem .atmo__col{max-width:560px}
.lucem .gov-labels{margin-top:26px}
@media (max-width:900px){
  .lucem .atmo__grad{background:linear-gradient(0deg,rgba(10,12,16,.93) 0%,rgba(10,12,16,.86) 55%,rgba(10,12,16,.8) 100%)}
  /* A tall phone viewport crops this 16:9 frame hard from the sides, which cut
     the fire out entirely. Anchor the crop on it. */
  .lucem .atmo__bg img{object-position:44% center}
}

/* Ambient orbs (for dark sections without photography) */
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(140px)}
.orb--a{width:640px;height:460px;top:-8%;left:-6%;background:rgba(97,45,248,.10);animation:drift 22s ease-in-out infinite}
.orb--b{width:480px;height:380px;bottom:-6%;right:-5%;background:rgba(58,134,224,.06);animation:drift 26s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.hero__bg img,.hero__bg video{animation:none;transform:scale(1.06)}.orb{animation:none}}

/* =========================================================
   DATA INTEGRATION, "the integration canvas" (platform page)
   ---------------------------------------------------------
   A blueprint-dark schematic: your systems -> LIVEOP -> your
   operation, and back again as evidence. On desktop the stage
   pins and three stages (Connect / Unify / Act) advance with
   scroll; `initIntegration()` adds `.integ--live` and drives
   `data-stage`. Everything below `.integ--live` is progressive
   enhancement, so no JS / small screens / reduced motion get the
   whole picture assembled and legible, stacked, wires hidden.
   Blue = data coming in, purple = intelligence going out,
   steel = evidence returning. Purple stays a UI accent only.
   ========================================================= */
.integ{position:relative;background:#070b14;color:var(--fg);overflow:clip;padding-block:var(--section-y) clamp(56px,7vw,96px)}
.integ__mesh{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(143,116,255,.05) 1px,transparent 1px) 0 0/68px 68px,
    linear-gradient(90deg,rgba(143,116,255,.05) 1px,transparent 1px) 0 0/68px 68px,
    radial-gradient(66% 46% at 50% 44%,rgba(58,134,224,.11),transparent 72%);
  -webkit-mask-image:radial-gradient(78% 60% at 50% 44%,#000 26%,transparent 100%);
          mask-image:radial-gradient(78% 60% at 50% 44%,#000 26%,transparent 100%);
}
.integ__intro{position:relative;z-index:2}
.integ__intro .section-head{max-width:58ch}

/* ---- sticky scroll stage ---- */
.integ__scroller{position:relative;z-index:2;height:auto}
.integ--live .integ__scroller{height:290svh}
.integ__sticky{position:static}
.integ--live .integ__sticky{position:sticky;top:0;height:100svh;padding-top:68px;display:grid;align-items:center}
.integ__stage{width:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,2.2vh,28px);margin-top:clamp(36px,5vw,60px)}
.integ--live .integ__stage{height:100%;margin-top:0;padding-block:clamp(8px,1.2vh,16px) clamp(10px,1.4vh,18px)}

/* ---- step rail ---- */
.integ__steps{list-style:none;display:grid;grid-template-columns:1fr;gap:24px;border-top:1px solid var(--hairline);padding-top:clamp(14px,1.8vh,20px)}
.integ--live .integ__steps{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,38px)}
.istep{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;align-content:start;transition:opacity .55s var(--ease)}
.istep__n{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;color:var(--accent)}
.istep b{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.istep p{grid-column:2;margin-top:7px;font-size:var(--fs-body);line-height:1.45;color:var(--fg-muted);max-width:42ch}

/* ---- canvas ---- */
/* Default = one stacked, fully assembled, fully legible column. The
   three-column wired diagram is opt-in via .integ--live, which
   initIntegration() adds only when the pinned stage genuinely fits the
   viewport. So no JS, a narrow window, a short window and reduced motion all
   land on the same readable fallback rather than a clipped diagram. */
.integ__canvas{
  position:relative;display:grid;grid-template-columns:1fr;align-items:start;
  gap:clamp(20px,4vw,30px);
  padding:clamp(22px,4vw,32px) clamp(16px,3.5vw,28px) clamp(26px,4vw,36px);
}
.integ--live .integ__canvas{
  grid-template-columns:minmax(0,1.06fr) minmax(0,.72fr) minmax(0,1.06fr);
  gap:clamp(22px,4.6vw,84px);
  padding:clamp(18px,2.4vh,32px) clamp(38px,4vw,64px) clamp(44px,5.6vh,64px);
  /* Hug the content rather than stretching to fill the pinned row, so the
     return lane sits just under the diagram instead of far below it. */
  align-self:center;
}
/* Stacked: the wires are meaningless top-to-bottom, so they become flow ticks. */
.integ__wires,.integ__backlabel{display:none}
.integ--live .integ__wires,.integ--live .integ__backlabel{display:block}
.integ__col--src::after,.integ__col--core::after{
  content:"";align-self:center;width:1px;height:30px;margin-top:6px;
  background:linear-gradient(rgba(143,116,255,.55),rgba(143,116,255,0))
}
.integ--live .integ__col--src::after,.integ--live .integ__col--core::after{display:none}
.integ__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.integ__bound{position:absolute;inset:0;border:1px dashed rgba(143,116,255,.30);border-radius:var(--r-2xl);pointer-events:none}
.integ__boundlabel,.integ__backlabel{
  position:absolute;background:#070b14;padding:0 12px;white-space:nowrap;
  font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;
}
.integ__boundlabel{top:0;left:clamp(18px,3vw,38px);transform:translateY(-50%);color:var(--accent)}
.integ__backlabel{left:50%;bottom:var(--integ-lane,22px);transform:translate(-50%,50%);color:var(--fg-subtle)}

.integ__col{display:flex;flex-direction:column;gap:clamp(8px,1.3vh,13px);min-width:0}
.integ__col--core{align-self:center;align-items:center;justify-content:center}
.integ__coltitle{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle)}
.integ__note{font-size:var(--fs-small);line-height:1.5;color:var(--fg-faint);margin-top:2px}
.integ--live .integ__note{max-width:40ch}

/* ---- source nodes ---- */
.isrc{
  display:flex;gap:13px;align-items:flex-start;
  padding:clamp(9px,1.2vh,13px) 15px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(23,27,36,.92),rgba(12,15,22,.86));
  border:1px solid rgba(255,255,255,.09);
  transition:opacity .6s var(--ease),border-color var(--dur-state)
}
.isrc__ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(58,134,224,.16);color:#7ab2ee}
.isrc__ico .ico{width:20px;height:20px}
.isrc__txt{min-width:0}
.isrc b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.isrc__ex{display:block;margin-top:4px;font-size:var(--fs-small);line-height:1.45;color:var(--fg-subtle)}

/* ---- core ---- */
.icore{position:relative;margin-block:4px;display:grid;place-items:center;width:clamp(148px,14vw,190px);aspect-ratio:1;text-align:center;transition:opacity .6s var(--ease)}
.icore::before{content:"";position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(97,45,248,.36),rgba(58,134,224,.15) 46%,transparent 70%);filter:blur(20px)}
.icore__ring{position:absolute;inset:0;width:100%;height:100%}
.icore__arc{fill:none;stroke-width:6.5;stroke-linecap:round;transform-origin:50% 50%}
.icore__arc--a{stroke:url(#iCoreA);animation:ispin 15s linear infinite}
.icore__arc--b{stroke:url(#iCoreB);animation:ispin 21s linear infinite reverse}
@keyframes ispin{to{transform:rotate(360deg)}}
.icore__label{position:relative;display:block;width:68%}
.icore__label b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:.03em}
.icore__label em{display:block;margin-top:4px;font-style:normal;font-size:var(--fs-meta);line-height:1.35;color:var(--fg-subtle)}

/* ---- outcome nodes ---- */
.iout{
  padding:clamp(9px,1.2vh,13px) 15px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(28,24,50,.88),rgba(14,14,25,.86));
  border:1px solid rgba(143,116,255,.22);
  transition:opacity .6s var(--ease),border-color var(--dur-state)
}
.iout__head{display:flex;align-items:center;gap:11px}
.iout__ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(97,45,248,.20);color:var(--accent)}
.iout__ico .ico{width:19px;height:19px}
.iout b{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.iout p{margin-top:6px;font-size:var(--fs-small);line-height:1.45;color:var(--fg-subtle)}

/* ---- responder strip ---- */
.iresp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px;transition:opacity .6s var(--ease)}
.iresp__ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--fg-muted)}
.iresp__ico .ico{width:19px;height:19px}
.iresp__l{flex:1 1 90px;min-width:0;font-size:var(--fs-small);line-height:1.35;color:var(--fg-faint);margin-left:4px}

/* ---- wires (built by initIntegration) ---- */
.iwire__base{fill:none;stroke-width:1.15}
.iwire__pulse{fill:none;stroke-width:2.3;stroke-linecap:round;stroke-dasharray:5 95;animation:iflow 3.4s linear infinite}
.iwire--in .iwire__base{stroke:rgba(58,134,224,.30)}
.iwire--in .iwire__pulse{stroke:#4d9bf0}
.iwire--out .iwire__base{stroke:rgba(143,116,255,.32)}
.iwire--out .iwire__pulse{stroke:#9a82ff}
.iwire--back .iwire__base{stroke:rgba(160,172,190,.34);stroke-dasharray:4 5}
.iwire--back .iwire__pulse{stroke:rgba(190,200,214,.75);animation-duration:5.4s}
@keyframes iflow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---- stage choreography (desktop, motion allowed) ----
   Tiers accumulate: 1 = your systems, 2 = the core and the inbound
   flow, 3 = the outcomes, the responders and the return loop. */
.integ--live [data-tier],
.integ--live .iwire{opacity:.12;transition:opacity .6s var(--ease)}
/* The rail stays readable as a legend: inactive steps keep their number and
   title, only the explanatory line drops away. */
.integ--live .istep{opacity:.42;transition:opacity .6s var(--ease)}
.integ--live .istep p{opacity:.28;transition:opacity .6s var(--ease)}
.integ--live[data-stage="1"] .istep[data-step="1"],
.integ--live[data-stage="2"] .istep[data-step="2"],
.integ--live[data-stage="3"] .istep[data-step="3"],
.integ--live[data-stage="1"] .istep[data-step="1"] p,
.integ--live[data-stage="2"] .istep[data-step="2"] p,
.integ--live[data-stage="3"] .istep[data-step="3"] p{opacity:1}
.integ--live:is([data-stage="1"],[data-stage="2"],[data-stage="3"]) :is([data-tier="1"],.iwire[data-tier="1"]),
.integ--live:is([data-stage="2"],[data-stage="3"]) :is([data-tier="2"],.iwire[data-tier="2"]),
.integ--live[data-stage="3"] :is([data-tier="3"],.iwire[data-tier="3"]){opacity:1}

/* ---- closing control band ---- */
.integ__control{position:relative;z-index:2;margin-top:clamp(38px,5.5vw,70px);border-top:1px solid var(--hairline);padding-top:clamp(28px,4vw,46px)}
.integ__control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,48px)}
.icontrol__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);margin-bottom:14px}
.icontrol__ico .ico{width:19px;height:19px}
.icontrol b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.icontrol p{font-size:var(--fs-body);line-height:1.5;color:var(--fg-muted)}

/* ---- stacked (small screens, short viewports, reduced motion) ---- */
@media (max-width:900px){
  .integ__control-grid{grid-template-columns:1fr;gap:28px}
}
/* Too narrow to straddle the border legibly: drop the label into the flow as
   the first line inside the boundary instead. */
@media (max-width:620px){
  .integ__boundlabel{position:static;transform:none;padding:0;background:none;white-space:normal;line-height:1.4}
}
@media (prefers-reduced-motion:reduce){
  .iwire__pulse,.icore__arc{animation:none}
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:var(--font-sans);font-size:var(--fs-small);color:var(--fg);
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 14px;transition:border-color var(--dur-state),box-shadow var(--dur-state);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:88px;line-height:1.55}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
label .small{color:var(--fg-muted);font-weight:500}

/* =========================================================
   BREADCRUMB / PAGE HEADER (interior pages)
   ========================================================= */
.page-hero{position:relative;padding-top:calc(68px + clamp(56px,8vw,96px));padding-bottom:clamp(48px,6vw,80px);overflow:hidden}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{max-width:18ch}
.page-hero .lead{margin-top:22px;max-width:60ch}

/* =========================================================
   CONTACT: THANK-YOU DIALOG
   A native <dialog> that contact-form.js opens after a successful send (the inline note stays as the record once
   it is closed). Closes on Esc or through its own method="dialog" form, so closing needs no script.
   ========================================================= */
.lo-modal{margin:auto;border:0;padding:0;background:transparent;width:min(460px,calc(100vw - 32px));max-width:none;color:var(--fg);overflow:visible}
.lo-modal::backdrop{background:rgba(10,12,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lo-modal__card{background:var(--bg-raised);border:var(--card-border);border-radius:var(--r-xl);box-shadow:var(--card-shadow-hover);padding:40px 32px 28px;text-align:center}
.lo-modal__ico{width:60px;height:60px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.lo-modal__ico .ico{width:28px;height:28px}
.lo-modal h2{font-size:var(--fs-h4);margin:0 0 10px}
.lo-modal p{color:var(--fg-muted);font-size:var(--fs-body);line-height:1.6;margin:0 auto 26px;max-width:34ch}
.lo-modal form{margin:0}
.lo-modal .btn{width:100%;justify-content:center}
.lo-modal[open] .lo-modal__card{animation:lo-modal-in var(--dur-state) var(--ease) both}
@keyframes lo-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lo-modal[open] .lo-modal__card{animation:none}}

/* "Watch on YouTube": a small link under a self-hosted video (the site embeds nothing from YouTube; the visitor
   chooses to go there). Takes the colour of its section, so it works on light and dark. */
.video-yt{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 14px;border:1px solid currentColor;border-radius:999px;color:inherit;font-size:var(--fs-meta);font-weight:500;line-height:1.2;text-decoration:none;opacity:.7;transition:opacity var(--dur-hover) var(--ease)}
.video-yt:hover,.video-yt:focus-visible{opacity:1}
.video-yt svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.outcomes__media{display:flex;flex-direction:column;align-items:flex-end}
.outcomes__media .outcomes__stage{width:100%}

/* =========================================================
   WELLBEING (homepage, dark): the first core value, as four product decisions beside a photo of responders.
   ========================================================= */
.wellbeing{background:#0a0c10;position:relative;overflow:hidden}
.wellbeing__inner{align-items:center}
.wellbeing .lead{max-width:56ch}
.wellbeing__list{list-style:none;margin:30px 0 32px;padding:0;display:grid;gap:18px}
.wellbeing__list li{padding-left:18px;border-left:2px solid var(--accent-line);color:var(--fg-muted);font-size:var(--fs-body);line-height:1.55}
.wellbeing__list b{display:block;margin-bottom:2px;color:var(--fg);font-weight:500}
.wellbeing__photo{margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.wellbeing__photo img{display:block;width:100%;height:100%;object-fit:cover}
.wellbeing__story{display:flex;align-items:center;gap:18px;max-width:520px;margin:0 0 26px;padding:12px 18px 12px 12px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.03);color:inherit;text-decoration:none;transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.wellbeing__story:hover,.wellbeing__story:focus-visible{border-color:var(--accent-line);background:rgba(255,255,255,.05)}
.wellbeing__story-thumb{position:relative;flex:none;width:132px;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.wellbeing__story-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.wellbeing__story-play{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--brand-purple);box-shadow:0 8px 22px -6px rgba(97,45,248,.7)}
.wellbeing__story-play::before{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.wellbeing__story-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.wellbeing__story-text small{color:var(--accent);font-size:var(--fs-meta);font-weight:500}
.wellbeing__story-text b{color:var(--fg);font-size:var(--fs-body);font-weight:500;line-height:1.35}
.wellbeing__story-text span{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.45}
@media(max-width:480px){.wellbeing__story{gap:14px}.wellbeing__story-thumb{width:104px}}
@media(max-width:960px){.wellbeing__photo{aspect-ratio:4/3}.wellbeing__photo img{object-position:50% 30%}}