/* ============================================================
   Global Copilot - Shared Design System
   Used by every page on the site. Keep this file the single
   source of truth for color, type, and component styles.
   ============================================================ */

:root{
  --bg:#08080e;
  --bg-panel:#111118;
  --bg-panel-2:#16161f;
  --border:rgba(255,255,255,0.08);
  --border-mid:rgba(255,255,255,0.13);
  --text:#f3f3f7;
  --text-dim:#9d9daa;
  --text-faint:#5e5e6e;
  --purple:#8b6cff;
  --teal:#2fd4bc;
  --gold:#f4b942;
  --gradient:linear-gradient(105deg,#8b6cff 0%,#5b8aff 45%,#2fd4bc 100%);
  --gradient-text:linear-gradient(105deg,#a48eff 0%,#7ab2ff 50%,#2fd4bc 100%);
  --gradient-danger:linear-gradient(105deg,#ff5f56 0%,#ff8a3d 100%);
  --gradient-warning:linear-gradient(105deg,#f4b942 0%,#ff8a3d 100%);
  --gradient-warm:linear-gradient(105deg,#ff5f56 0%,#ff8a3d 50%,#f4b942 100%);
  /* Shared vertical gap between a centered section's subtext and the
     visual/graphic directly beneath it (.section-head's own margin,
     and any other section that needs to match that exact rhythm -
     e.g. the cost-model comparison graphic - reads off this same
     token rather than a separately hardcoded value). */
  --section-visual-gap:56px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
section{padding:96px 0;}
@media(max-width:768px){section{padding:64px 0;}.wrap{padding:0 20px;}}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(8,8,14,0.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.nav-inner{max-width:1160px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.01em;}
.logo-icon{width:26px;height:32px;flex-shrink:0;display:block;}
.logo-word{color:#fff;}
footer .logo{margin-bottom:4px;}
.nav-links{display:flex;gap:32px;font-size:14.5px;color:var(--text-dim);}
.nav-links a{transition:color .22s ease;}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text);}
.nav-links a.active{color:var(--text);}

/* Faint purple → blue → green gradient glow behind each main nav tab
   (Platform, Use Cases, Partners, Pricing, Resources) on hover/focus -
   stays lit while the corresponding dropdown is open or focused. */
.nav-item > a,
.nav-links > a{position:relative;z-index:0;}
.nav-item > a::before,
.nav-links > a::before{
  content:"";
  position:absolute;
  inset:-8px -14px;
  border-radius:10px;
  background:var(--gradient);
  opacity:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  transition:opacity .22s ease;
  pointer-events:none;
  z-index:-1;
}
.nav-item:hover > a::before,
.nav-item:focus-within > a::before,
.nav-item.open > a::before,
.nav-links > a:hover::before,
.nav-links > a:focus-visible::before{
  opacity:.09;
}
.nav-right{display:flex;align-items:center;gap:20px;font-size:14.5px;}
.nav-right .login{color:var(--text-dim);}
.nav-right .login:hover{color:var(--text);}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:8px;font-size:14.5px;font-weight:600;border:1px solid transparent;background:transparent;cursor:pointer;white-space:nowrap;transition:opacity .15s;}
.btn:hover{opacity:.85;}
.btn-primary{background:var(--text);color:#08080e;}
.btn-gradient{background:var(--gradient);color:#fff;}
.btn-ghost{background:transparent;border:1px solid var(--border-mid);color:var(--text);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.28);opacity:1;}
.btn-teal{background:var(--teal);color:#08080e;}
.btn-lg{padding:14px 28px;font-size:15.5px;border-radius:10px;}
@media(max-width:860px){.nav-links{display:none;}}

/* ---------- "Schedule a Call" secondary CTA (paired with Get Started
   for Free) — grey fill by default, matching the nav's secondary
   button. On hover/focus/tap the interior STAYS grey; only the neutral
   border swaps for the brand purple → blue → green gradient ring
   (same uniform border/background-clip technique as the nav CTA).
   nav.js nudges --cta-angle to track the cursor as it moves over the
   button, so the ring's color subtly follows the pointer instead of
   auto-spinning. Scoped to .cta-schedule so no other .btn-ghost is
   affected. */
@property --cta-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.cta-schedule{
  --cta-angle:0deg;
  border-width:2px;
  background:var(--bg-panel);
  transition:border-color .22s ease,color .22s ease,box-shadow .22s ease,background .22s ease,--cta-angle .22s ease;
}
.cta-schedule svg{transition:filter .22s ease;}
.cta-schedule:hover,
.cta-schedule:focus-visible,
.cta-schedule.tap-active{
  border-color:transparent;
  background:
    linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,
    conic-gradient(from var(--cta-angle),#8b6cff,#5b8aff,#2fd4bc,#8b6cff) border-box;
  color:#fff;
  box-shadow:0 0 14px rgba(91,138,255,.2);
  outline:none;
}
.cta-schedule:hover svg,
.cta-schedule:focus-visible svg,
.cta-schedule.tap-active svg{filter:brightness(1.3);}
.cta-schedule:active{transform:scale(.97);filter:brightness(.94);}
.cta-schedule:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}

/* ---------- NAV: "Book a Demo" primary CTA ----------
   Dark-gray fill (matches the "Biggest Cost of Growth" band) with a
   thin purple → blue → green gradient ring, using the same native
   border + background-clip technique as the rest of the site (so the
   ring stays a perfectly even width all the way through the rounded
   corners). On hover the ring's conic-gradient rotates like a slow
   stream of color traveling around the border. Scoped to .nav-right
   so it never touches other .btn-primary uses on the site.

   .btn-cta-ring is the same exact treatment exposed as a standalone,
   reusable button variant (padding/size come from the plain .btn base
   class, same as the nav button) so other CTAs on the page can reuse
   this component without touching nav markup or specificity. */
@property --nav-cta-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.nav-right .btn-primary,
.btn-cta-ring{
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,
    conic-gradient(from var(--nav-cta-angle),#8b6cff,#5b8aff,#2fd4bc,#8b6cff) border-box;
  color:#fff;
  opacity:1;
  transition:filter .25s ease,box-shadow .25s ease,transform .15s ease;
}
.nav-right .btn-primary:hover,
.nav-right .btn-primary:focus-visible,
.btn-cta-ring:hover,
.btn-cta-ring:focus-visible{
  opacity:1;
  filter:brightness(1.18);
  box-shadow:0 0 16px rgba(91,138,255,.24);
}
@media(prefers-reduced-motion:no-preference){
  @keyframes nav-cta-spin{to{--nav-cta-angle:360deg;}}
  .nav-right .btn-primary:hover,
  .nav-right .btn-primary:focus-visible,
  .btn-cta-ring:hover,
  .btn-cta-ring:focus-visible{
    animation:nav-cta-spin 2.6s linear infinite;
  }
}
.nav-right .btn-primary:active,
.btn-cta-ring:active{
  transform:scale(.97);
  filter:brightness(.92);
}
.nav-right .btn-primary:focus-visible,
.btn-cta-ring:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:3px;
}
@media(max-width:600px){
  .btn-full-mobile{width:100%;white-space:normal;text-align:center;line-height:1.3;height:auto;}
}

/* ---------- NAV: MEGA MENU (Solutions dropdown) ---------- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-item > a{display:inline-flex;align-items:center;gap:5px;}
.nav-caret{font-size:9px;color:var(--text-faint);transition:transform .2s ease,color .2s ease;line-height:1;}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret,.nav-item.open .nav-caret{transform:rotate(180deg);color:var(--text-dim);}
.mega-menu{position:absolute;top:100%;left:50%;margin-top:22px;transform:translateX(-50%) translateY(6px);width:660px;max-width:calc(100vw - 40px);background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.5);padding:24px 24px 16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:200;}
/* .open is toggled by nav.js (hover-intent delay on desktop, tap-to-toggle on touch).
   :hover/:focus-within remain as a no-JS fallback. */
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu,.nav-item.open .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-header{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.mega-header h4{font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px;letter-spacing:-0.01em;}
.mega-header p{font-size:13px;color:var(--text-dim);line-height:1.5;max-width:480px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:2px;}
.mega-item{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:10px;transition:background .15s ease;}
.mega-item:hover,.mega-item:focus,.mega-item.active{background:var(--bg-panel-2);}
.mega-icon{width:38px;height:38px;border-radius:10px;background:var(--gradient);border:none;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;line-height:1;box-shadow:0 4px 12px rgba(91,138,255,.28);transition:transform .2s ease,box-shadow .2s ease;}
.mega-icon svg{width:18px;height:18px;stroke:currentColor;}
.mega-item:hover .mega-icon,.mega-item.active .mega-icon{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,108,255,.5),0 0 14px rgba(47,212,188,.35);}
.mega-text h5{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.25;}
.mega-text h5.fit-line{font-size:12.5px;white-space:nowrap;}
.mega-text p{font-size:12.5px;color:var(--text-dim);line-height:1.45;}
.mega-footer{border-top:1px solid var(--border);margin-top:12px;padding-top:16px;}
.mega-footer a{display:flex;align-items:center;justify-content:center;width:100%;padding:13px 20px;border-radius:10px;background:var(--gradient);color:#fff;font-size:14.5px;font-weight:600;text-align:center;transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;}
.mega-footer a:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 10px 24px rgba(139,108,255,.35);}

/* ---------- NAV: PLATFORM MEGA MENU, 3-COLUMN TEST VARIANT ----------
   Same visual language as the standard 2-col .mega-menu (dark panel,
   typography, icon treatment, hover states, rounded corners) but wider,
   with a 3-column grid and a subtle uppercase category label ("Discover" /
   "Plan" / "Execute and prove") above each column. Modifier classes only
   -- the base .mega-menu/.mega-grid/.mega-item rules above are untouched
   so the Use cases and Partners dropdowns are unaffected. Currently wired
   up on index.html only (test/review before site-wide rollout).
   Columns are separated by whitespace only (no vertical divider lines);
   the extra menu width freed up by dropping the border/padding-offset
   goes toward wider, equal-width columns so descriptions wrap less. */
.mega-menu.mega-menu-wide{width:960px;}
.mega-grid-3col{grid-template-columns:repeat(3,1fr);column-gap:28px;}
.mega-cat-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px;padding:0 10px;}
@media(max-width:1100px){
  .mega-menu.mega-menu-wide{width:660px;}
  .mega-grid-3col{grid-template-columns:1fr 1fr;row-gap:0;column-gap:28px;}
  .mega-grid-3col .mega-col:nth-child(3){grid-column:1/-1;padding-left:10px;margin-top:20px;}
}
@media(max-width:640px){
  .mega-menu.mega-menu-wide{width:100%;}
  .mega-grid-3col{grid-template-columns:1fr;}
  .mega-grid-3col .mega-col{padding-left:10px;margin-top:20px;}
  .mega-grid-3col .mega-col:first-child{margin-top:0;}
}

/* ---------- HERO ---------- */
/* Padding rhythm matched to .subhero (the Use Case page hero) so the homepage hero
   reads as one connected composition with the graphic directly beneath it, instead
   of a boxed title section followed by a separate visual. No outer panel/border. */
.hero{padding:76px 0 64px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(47,212,188,.22);border-radius:999px;padding:7px 18px;margin-bottom:28px;}
.hero h1{font-size:50px;font-weight:800;letter-spacing:-.025em;line-height:1.05;max-width:900px;margin:0 auto 24px;}
.grad-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.grad-text-warm{background:var(--gradient-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.grad-text-danger{background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
@media(max-width:768px){.hero h1{font-size:36px;}}
.hero-sub{font-size:19px;color:var(--text-dim);max-width:660px;margin:0 auto 14px;line-height:1.6;}
.hero-sub-single{margin:0 auto 0;}
.hero-spark{font-size:15.5px;color:var(--text-faint);max-width:500px;margin:0 auto 38px;}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero-microcopy{font-size:13px;color:var(--text-faint);max-width:480px;margin:22px auto 0;line-height:1.5;text-align:center;}

/* ---------- SUB-PAGE HERO (shorter, for interior pages) ---------- */
.subhero{padding:76px 0 64px;text-align:center;scroll-margin-top:70px;}
.subhero h1{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:760px;margin:0 auto 20px;}
@media(max-width:768px){.subhero h1{font-size:32px;}}
.subhero .hero-sub{margin-bottom:0;}

/* ---------- COST BAND ---------- */
.cost-band{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.cost-band .cost-inner{max-width:760px;margin:0 auto;text-align:center;padding:56px 32px;}
.cost-band .cost-stmt{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:18px;}
.cost-band .cost-risk{font-size:16.5px;color:var(--text-dim);line-height:1.7;}

/* ---------- COMPLEXITY / CLARITY ---------- */
.complexity{text-align:center;}
.complexity .overline{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);font-weight:700;margin-bottom:28px;}
.complexity .stmt{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.1;max-width:700px;margin:0 auto;}
.complexity .stmt .dim{color:var(--text-faint);}
.complexity .divider{width:56px;height:3px;background:var(--gradient);border-radius:2px;margin:36px auto;}
.complexity .punch-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:0 auto 40px;}
@media(max-width:640px){.complexity .punch-row{grid-template-columns:1fr;}}
.punch-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:24px;text-align:left;}
.punch-card .label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:10px;}
.punch-card .body{font-size:16px;font-weight:600;line-height:1.45;}
.punch-card .body .hl{color:var(--teal);}
.complexity .support{font-size:16px;color:var(--text-dim);max-width:620px;margin:0 auto;line-height:1.65;}

/* ---------- VALUE PROPS ---------- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
@media(max-width:900px){.value-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.value-grid{grid-template-columns:1fr;}}
.v-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:28px 24px;}
.v-card .v-num{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px;white-space:nowrap;}
.v-card h4{font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.3;}
.v-card p{font-size:14px;color:var(--text-dim);line-height:1.6;}
/* ---------- RISK / CHALLENGE CARDS (Use Case pages) ---------- */
.risk-card{border:1.5px solid transparent;border-radius:14px;padding:28px 24px;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient-danger) border-box;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 22px rgba(255,111,61,.16);transition:transform .2s ease,box-shadow .2s ease;}
.risk-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.45),0 0 30px rgba(255,111,61,.26);}
.risk-icon{width:36px;height:36px;border-radius:9px;background:var(--gradient-danger);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px;box-shadow:0 4px 12px rgba(255,90,60,.35);}
.risk-icon svg{width:18px;height:18px;stroke:currentColor;}
.risk-card h4{font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.3;color:var(--text);}
.risk-card p{font-size:14px;color:var(--text-dim);line-height:1.6;}
.v-card.cta-outline{
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 18px rgba(139,108,255,.22);
  transition:transform .25s ease,box-shadow .25s ease;
}
.v-card.cta-outline .v-num,
.v-card.cta-outline h4,
.v-card.cta-outline p{transition:color .25s ease,filter .25s ease;}
.v-card.cta-outline:hover,
.v-card.cta-outline:focus-visible,
.v-card.cta-outline.tap-active{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.45),0 0 28px rgba(139,108,255,.34);
  outline:none;
}
.v-card.cta-outline:hover .v-num,
.v-card.cta-outline:focus-visible .v-num,
.v-card.cta-outline.tap-active .v-num{color:var(--text-dim);filter:brightness(1.3);}
.v-card.cta-outline:hover h4,
.v-card.cta-outline:focus-visible h4,
.v-card.cta-outline.tap-active h4{filter:brightness(1.15);}
.v-card.cta-outline:hover p,
.v-card.cta-outline:focus-visible p,
.v-card.cta-outline.tap-active p{color:var(--text);filter:brightness(1.1);}

/* ---------- INFRA STATEMENT ---------- */
.infra-statement{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.infra-statement .inner{max-width:820px;margin:0 auto;text-align:center;padding:64px 32px;}
.infra-statement .pre{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:700;margin-bottom:20px;}
.infra-statement h2{font-size:34px;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-bottom:18px;text-wrap:balance;}
.infra-statement p{font-size:16px;color:var(--text-dim);line-height:1.65;}
/* When this band is immediately followed by the cost comparison
   graphic (the "Priced like infrastructure" section, shared verbatim
   between pricing.html and the homepage), the gap beneath the
   subtext reads off the same --section-visual-gap token used by
   .section-head elsewhere, instead of stacking this padding on top
   of .cost-cmp-section's own top padding. Every other .infra-statement
   usage (standalone mission-style bands with no graphic beneath) is
   untouched. */
.infra-statement:has(.cost-cmp-section) .inner{padding-bottom:var(--section-visual-gap);}

/* ---------- DIFFERENTIATION ---------- */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;}
@media(max-width:768px){.diff-grid{grid-template-columns:1fr;}}
.diff-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:32px;}
.diff-card .diff-icon{width:40px;height:40px;border-radius:10px;background:var(--bg-panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px;}
.diff-card h4{font-size:19px;font-weight:700;margin-bottom:12px;}
.diff-card p{font-size:14.5px;color:var(--text-dim);line-height:1.65;margin-bottom:14px;}
.diff-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;padding:4px 12px;border-radius:999px;background:rgba(47,212,188,.1);color:var(--teal);border:1px solid rgba(47,212,188,.2);}
.diff-tag.purple{background:rgba(139,108,255,.1);color:var(--purple);border-color:rgba(139,108,255,.2);}

/* ---------- ACCESS MODES ---------- */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
@media(max-width:768px){.access-grid{grid-template-columns:1fr;}}
.access-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:36px;}
.access-card .a-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 14px;border-radius:999px;margin-bottom:20px;}
.access-card.direct .a-badge{background:rgba(139,108,255,.1);color:var(--purple);border:1px solid rgba(139,108,255,.2);}
.access-card.embedded .a-badge{background:rgba(47,212,188,.1);color:var(--teal);border:1px solid rgba(47,212,188,.2);}
.access-card h4{font-size:22px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em;}
.access-card p{font-size:15px;color:var(--text-dim);line-height:1.65;margin-bottom:18px;}
.access-list{list-style:none;}
.access-list li{font-size:14px;color:var(--text-dim);padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--border);}
.access-list li:first-child{border-top:none;}
.access-list li::before{content:"→";position:absolute;left:0;top:8px;font-weight:700;}
.access-card.direct .access-list li::before{color:var(--purple);}
.access-card.embedded .access-list li::before{color:var(--teal);}

/* ---------- USE CASE PAGE COMPONENTS ---------- */
.check-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin-top:8px;}
.check-list{list-style:none;}
.check-list li{font-size:14.5px;color:var(--text-dim);padding:11px 0 11px 26px;position:relative;border-top:1px solid var(--border);}
.check-list li:first-child{border-top:none;}
.check-list li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--teal);font-weight:700;}
@media(max-width:768px){.check-grid{grid-template-columns:1fr;}}
.outcomes-band{background:var(--bg-panel-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.outcomes-panel{max-width:640px;margin:0 auto;}
.outcomes-list{list-style:none;}
.outcomes-list li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--text);font-weight:600;padding:16px 0;border-top:1px solid var(--border);line-height:1.4;}
.outcomes-list li:first-child{border-top:none;}
.outcomes-list .check-dot{width:26px;height:26px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex-shrink:0;box-shadow:0 4px 12px rgba(91,138,255,.28);margin-top:1px;}

/* ---------- COST COMPARISON (Traditional Consulting vs. Global Copilot - Pricing page) ---------- */
.cost-cmp-section{padding:0 32px 64px;}
.cost-cmp-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch;max-width:1080px;margin:0 auto;}
@media(max-width:860px){.cost-cmp-wrap{grid-template-columns:1fr;gap:20px;}}

.cost-cmp-panel{border-radius:20px;padding:36px 32px;background:var(--bg-panel);border:1.5px solid transparent;}
.cost-cmp-before{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 24px rgba(255,111,61,.16);}
.cost-cmp-after{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 24px rgba(139,108,255,.22);}

.cost-cmp-badge{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px;}
.cost-cmp-before .cost-cmp-badge{background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cost-cmp-after .cost-cmp-badge{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.cost-cmp-price{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.25;margin-bottom:6px;}
.cost-cmp-sub{font-size:14px;color:var(--text-dim);margin-bottom:28px;}

.cost-bar-track{width:100%;height:14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:10px;}
.cost-bar-fill{display:block;height:100%;border-radius:8px;width:94%;}
.cost-bar-fill.cost-bar-danger{background:var(--gradient-danger);}
.cost-bar-fill.cost-bar-grad{background:var(--gradient);width:14%;}
.cost-bar-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:28px;}

.cost-cmp-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.cost-cmp-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--text-dim);line-height:1.5;}
.cost-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:#fff;flex-shrink:0;margin-top:1px;}
.cost-dot-danger{background:var(--gradient-danger);box-shadow:0 4px 10px rgba(255,90,60,.3);}
.cost-dot-grad{background:var(--gradient);box-shadow:0 4px 10px rgba(91,138,255,.3);}

.cost-cmp-vs{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--bg-panel-2);border:1px solid var(--border-mid);font-size:12.5px;font-weight:800;letter-spacing:.05em;color:var(--text-dim);justify-self:center;align-self:center;flex-shrink:0;}
@media(max-width:860px){.cost-cmp-vs{width:44px;height:44px;font-size:11px;}}

/* Data security section - reuses .cost-cmp-panel/-before/-after/-badge/
   -list/.cost-dot verbatim; deliberately its own wrapper class (not
   .cost-cmp-wrap) and its own sub-label class (not .cost-cmp-sub) so
   the pricing section's scroll-reveal/IntersectionObserver behavior,
   which targets the first .cost-cmp-wrap on the page, is not silently
   skipped or duplicated for this second, unrelated instance. Redesigned
   to a two-column hero (copy+checklist / shield illustration) - the
   two-panel comparison layout this section used previously has been
   fully replaced. */
.sec-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.sec-hero-grid{grid-template-columns:1fr;gap:40px;}}
.sec-hero-copy h2{font-size:36px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin-bottom:28px;}
@media(max-width:768px){.sec-hero-copy h2{font-size:26px;}}
#data-security .check-list{max-width:480px;}
#data-security .check-list li{color:var(--text);}

.sec-shield-visual{display:flex;align-items:center;justify-content:center;}
.sec-shield-svg{width:100%;max-width:320px;height:auto;overflow:visible;}
@media(max-width:900px){.sec-shield-svg{max-width:260px;}}
.sec-shield-glow{fill:url(#shieldGlowGrad);animation:sec-shield-pulse 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.sec-shield-body{fill:var(--bg-panel-2);}
.sec-shield-outline{fill:none;stroke:url(#shieldStrokeGrad);stroke-width:5;stroke-linejoin:round;}
.sec-shield-sweep{fill:url(#shieldSweepGrad);animation:sec-shield-sweep 6s ease-in-out infinite;}
.sec-lock-body,.sec-lock-shackle{fill:none;stroke:url(#shieldStrokeGrad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
@keyframes sec-shield-pulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes sec-shield-sweep{0%{transform:translateX(0);}100%{transform:translateX(400px);}}
@media(prefers-reduced-motion:reduce){
  .sec-shield-glow,.sec-shield-sweep{animation:none;}
}

/* Scroll-triggered bar fill + label fade (skipped for reduced-motion users) */
@media(prefers-reduced-motion:no-preference){
  .cost-bar-fill{width:0 !important;transition:width 1.1s cubic-bezier(.4,0,.2,1);}
  .cost-cmp-price,.cost-cmp-sub,.cost-bar-label{opacity:0;transition:opacity .6s ease;}
  .cost-cmp-wrap.in-view .cost-bar-fill.cost-bar-danger{width:94% !important;}
  .cost-cmp-wrap.in-view .cost-bar-fill.cost-bar-grad{width:14% !important;}
  .cost-cmp-wrap.in-view .cost-cmp-price,
  .cost-cmp-wrap.in-view .cost-cmp-sub,
  .cost-cmp-wrap.in-view .cost-bar-label{opacity:1;transition-delay:1.1s;}
}

/* ---------- GROWTH TIMELINE COMPARISON (McKinsey vs. Global Copilot - Pricing page) ---------- */
.tl-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto;}
@media(max-width:860px){.tl-wrap{grid-template-columns:1fr;}}

.tl-panel{border-radius:20px;padding:26px 24px;background:var(--bg-panel);border:1px solid var(--border);}

.tl-badge{display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:6px 14px;border-radius:999px;margin-bottom:22px;background:var(--bg-panel-2);color:var(--text);border:1px solid var(--border);}

.tl-rows{display:grid;grid-template-columns:62px 1fr;column-gap:14px;row-gap:12px;align-items:start;}
.tl-time{font-size:11.5px;font-weight:700;color:var(--text);padding-top:14px;border-right:1px solid var(--border);text-align:right;padding-right:12px;white-space:nowrap;}

.tl-task{border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--text);transition:transform .25s ease,box-shadow .25s ease;}

/* McKinsey - red → orange gradient outline (same treatment as the Challenge cards on Use Case pages) */
.tl-before .tl-task{
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;
  box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 20px rgba(255,111,61,.16);
}

/* Global Copilot - purple → blue → green gradient outline (same treatment used across the site) */
.tl-after .tl-task{
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;
  box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 20px rgba(139,108,255,.22);
}

@media(max-width:480px){
  .tl-rows{grid-template-columns:52px 1fr;}
  .tl-time{font-size:10.5px;padding-right:8px;}
}

/* ---------- PRICING PAGE COMPARISON MATRIX (How Global Copilot Compares) ---------- */
.pcmp-wrap{overflow-x:auto;}
.pcmp{display:flex;flex-direction:column;gap:10px;min-width:900px;}
.pcmp-row{display:grid;grid-template-columns:1.05fr 1.3fr 1.3fr 1.3fr;border-radius:12px;border:1px solid var(--border);background:var(--bg-panel);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.pcmp-row > div{padding:16px 18px;font-size:13.5px;line-height:1.55;color:#c7c7d6;text-align:left;transition:color .25s ease,filter .25s ease;}
.pcmp-row > div:first-child{position:sticky;left:0;background:var(--bg-panel);border-radius:12px 0 0 12px;z-index:1;}

/* Header row - bright, high-contrast, clearly separated from content */
.pcmp-head{background:transparent;border-color:transparent;margin-bottom:4px;}
.pcmp-head > div{padding:0 18px 16px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text);font-weight:700;box-shadow:inset 0 -2px 0 var(--border-mid);text-align:left;transition:color .25s ease,box-shadow .25s ease,text-shadow .25s ease;}
.pcmp-head > div:first-child{background:transparent;}
.pcmp-head .pcmp-gc-title{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;}
.pcmp-dim{font-weight:700;color:var(--text);}

/* Keyboard focus - minimal, neutral indicator (column hover below carries the color) */
.pcmp-row:not(.pcmp-head):focus-visible{outline:2px solid var(--purple);outline-offset:2px;}

/* Global Copilot column emphasis - permanent, not hover-dependent */
.pcmp-gc{position:relative;background:linear-gradient(180deg,rgba(139,108,255,.1),rgba(47,212,188,.05));font-weight:600;color:var(--text);border-radius:0 12px 12px 0;}
.pcmp-head .pcmp-gc{background:none;border-radius:0;}
.pcmp-row:not(.pcmp-head) .pcmp-gc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient);border-radius:12px 12px 0 0;}
.pcmp-badge{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;}

/* Traditional Consulting / ChatGPT & Claude columns - neutral by default,
   red-orange gradient treatment (matching the Challenge cards on use-case
   pages) on hover of any cell in that column, across every row. */
.pcmp-row:not(.pcmp-head) > div:nth-child(2),
.pcmp-row:not(.pcmp-head) > div:nth-child(3){font-weight:600;}
.pcmp-row:not(.pcmp-head) > div:nth-child(2),
.pcmp-row:not(.pcmp-head) > div:nth-child(3),
.pcmp-head > div:nth-child(2),
.pcmp-head > div:nth-child(3){position:relative;transition:background .3s ease,color .3s ease,box-shadow .3s ease,text-shadow .3s ease;}

.pcmp.col-hover-trad .pcmp-row:not(.pcmp-head) > div:nth-child(2),
.pcmp.col-hover-ai .pcmp-row:not(.pcmp-head) > div:nth-child(3){
  background:linear-gradient(180deg,rgba(255,95,86,.1),rgba(255,138,61,.05));
  color:var(--text);
}
.pcmp.col-hover-trad .pcmp-row:not(.pcmp-head) > div:nth-child(2)::before,
.pcmp.col-hover-ai .pcmp-row:not(.pcmp-head) > div:nth-child(3)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-danger);
}
.pcmp.col-hover-trad .pcmp-row:not(.pcmp-head) > div:nth-child(2) .cmp-ind,
.pcmp.col-hover-ai .pcmp-row:not(.pcmp-head) > div:nth-child(3) .cmp-ind{filter:brightness(1.35);}

.pcmp.col-hover-trad .pcmp-head > div:nth-child(2),
.pcmp.col-hover-ai .pcmp-head > div:nth-child(3){
  color:var(--text);
  background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  box-shadow:inset 0 -2px 0 #ff8a3d;
  text-shadow:0 0 14px rgba(255,111,61,.4);
}

/* Support-level indicators (checkmark / partial / unavailable) - shape + color, not color alone */
.cmp-ind{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;font-size:11px;font-weight:800;margin-right:8px;line-height:1;transition:filter .25s ease;}
.cmp-ind.full{background:rgba(47,212,188,.18);color:var(--teal);}
.cmp-ind.full::before{content:"✓";}
.cmp-ind.partial{background:rgba(244,185,66,.18);color:var(--gold);}
.cmp-ind.partial::before{content:"–";}
.cmp-ind.none{background:rgba(255,95,86,.16);color:#ff6f61;}
.cmp-ind.none::before{content:"×";}

/* Visually-hidden but screen-reader-accessible labels (used by .cmp-ind, etc.) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.cmp-note{font-size:13.5px;color:var(--text-faint);text-align:center;max-width:600px;margin:24px auto 0;line-height:1.6;}

@media(max-width:640px){
  .pcmp-wrap{overflow-x:visible;}
  .pcmp{min-width:0;gap:16px;}
  .pcmp-head{display:none;}
  .pcmp-row{display:block;padding:16px;}
  .pcmp-row > div{padding:6px 0;}
  .pcmp-row > div:first-child{position:static;background:none;border-radius:0;padding-top:0;}
  .pcmp-dim{font-size:16px;margin-bottom:2px;}
  .pcmp-row > div[data-label]:not(.pcmp-dim)::before{content:attr(data-label);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:700;margin-bottom:4px;}
  .pcmp-gc{border-radius:10px !important;padding:12px !important;margin-top:8px;}
  .pcmp-row:not(.pcmp-head) .pcmp-gc::before{border-radius:10px 10px 0 0;}
}

/* ---------- PRICING TIERS COMPARISON TABLE (four-column: Tier / Basic /
   Growth / Enterprise) - built on the exact same .pcmp comparison-matrix
   system as "How Global Copilot compares" below, via this .pcmp-tiers
   modifier, so both tables share one dark/bordered/rounded-corner design
   language. .pcmp-growth and .pcmp-ent give the Growth and Enterprise
   columns their own accent (Growth = standard brand gradient, matching
   .pcmp-gc's existing treatment; Enterprise = the same palette at lower
   opacity, for a subtler "still premium" read) without the border-radius
   .pcmp-gc bakes in for a last-column position - Growth sits third of
   four here, so it stays square-cornered like the neutral columns beside
   it; only Enterprise (last column) rounds its outer corner. */
.pcmp-tiers .pcmp-row > div{padding:18px 20px;}
.pcmp-tier-name{display:block;font-size:15px;font-weight:800;color:#fff;text-transform:none;letter-spacing:0;}
.pcmp-tier-price{display:block;font-size:11px;font-weight:600;color:var(--text-faint);text-transform:none;letter-spacing:0;margin-top:3px;}
.pcmp-growth{position:relative;background:linear-gradient(180deg,rgba(139,108,255,.1),rgba(47,212,188,.05));font-weight:600;color:var(--text);}
.pcmp-tiers .pcmp-head .pcmp-growth{background:none;}
.pcmp-tiers .pcmp-row:not(.pcmp-head) .pcmp-growth::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient);}
.pcmp-ent{position:relative;background:rgba(139,108,255,.045);font-weight:600;color:var(--text);border-radius:0 12px 12px 0;}
.pcmp-tiers .pcmp-head .pcmp-ent{background:none;border-radius:0;}
.pcmp-tiers .pcmp-row:not(.pcmp-head) .pcmp-ent::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient);opacity:.55;border-radius:12px 12px 0 0;}
.pcmp-dash{color:var(--text-faint);}
/* Row hover - brightens every cell together (no dimension shift), scoped
   to this table so the feature-comparison table's own column-hover
   behavior (JS-driven, unrelated) stays untouched. */
.pcmp-tiers .pcmp-row:not(.pcmp-head):hover{border-color:var(--border-mid);}
.pcmp-tiers .pcmp-row:not(.pcmp-head):hover > div:first-child{background:var(--bg-panel-2);}
.pcmp-tiers .pcmp-row:not(.pcmp-head):hover > div:not(.pcmp-growth):not(.pcmp-ent):not(:first-child){background:rgba(255,255,255,.03);}
.pcmp-tiers .pcmp-row:not(.pcmp-head):hover .pcmp-growth{background:linear-gradient(180deg,rgba(139,108,255,.15),rgba(47,212,188,.08));}
.pcmp-tiers .pcmp-row:not(.pcmp-head):hover .pcmp-ent{background:rgba(139,108,255,.08);}
.pcmp-cta-row{background:transparent;border-color:transparent;}
.pcmp-cta-row > div{padding-top:10px;padding-bottom:10px;display:flex;align-items:center;}
.pcmp-cta-row .pcmp-growth::before,.pcmp-cta-row .pcmp-ent::before{display:none;}
@media(max-width:640px){
  .pcmp-tiers .pcmp-row > div{padding:6px 0;}
  .pcmp-tier-name{display:inline;font-size:16px;}
  .pcmp-tier-price{display:inline;margin-left:6px;margin-top:0;}
  .pcmp-growth,.pcmp-ent{border-radius:10px !important;padding:12px !important;margin-top:8px;}
  .pcmp-tiers .pcmp-row:not(.pcmp-head) .pcmp-growth::before,
  .pcmp-tiers .pcmp-row:not(.pcmp-head) .pcmp-ent::before{border-radius:10px 10px 0 0;}
  .pcmp-cta-row > div{padding:6px 0;}
}

/* ---------- AUDIENCE CARDS ---------- */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:860px){.aud-grid{grid-template-columns:1fr;}}
.aud-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:18px;padding:40px 36px;display:flex;flex-direction:column;}
.aud-card.enterprise{border-top:3px solid var(--purple);}
.aud-card.growth{border-top:3px solid var(--teal);}
.aud-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;}
.aud-card.enterprise .aud-label{color:var(--purple);}
.aud-card.growth .aud-label{color:var(--teal);}
.aud-card h3{font-size:22px;font-weight:700;margin-bottom:16px;letter-spacing:-.01em;line-height:1.3;}
.aud-card .aud-body{font-size:14.5px;color:var(--text-dim);line-height:1.65;margin-bottom:14px;}
.aud-card .aud-body strong{color:var(--text);}
.buy-block{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
@media(max-width:480px){.buy-block{grid-template-columns:1fr;}}
.buy-col{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:18px;}
.buy-col .buy-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;margin-bottom:10px;}
.buy-col ul{list-style:none;}
.buy-col ul li{font-size:14px;color:var(--text-dim);padding:5px 0 5px 16px;position:relative;}
.buy-col ul li::before{content:"·";position:absolute;left:0;font-weight:900;}
.buy-col .output{font-size:13px;color:var(--teal);font-weight:600;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
.aud-card.enterprise .buy-col ul li::before{color:var(--purple);}
.aud-card.growth .buy-col ul li::before{color:var(--teal);}
.aud-ctas{display:flex;gap:12px;margin-top:auto;padding-top:24px;flex-wrap:wrap;}

/* ---------- STRESS TEST ---------- */
.stress-test{background:var(--bg-panel-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stress-inner{max-width:680px;margin:0 auto;text-align:center;}
.stress-badge{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 16px;border-radius:999px;background:rgba(244,185,66,.1);color:var(--gold);border:1px solid rgba(244,185,66,.22);margin-bottom:24px;}
.stress-inner h2{font-size:34px;font-weight:800;letter-spacing:-.015em;margin-bottom:14px;}
.stress-inner .sub{font-size:16px;color:var(--text-dim);line-height:1.65;margin-bottom:32px;}
.stress-form{background:var(--bg);border:1px solid var(--border-mid);border-radius:14px;padding:28px;text-align:left;margin-bottom:20px;}
.stress-form label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.stress-form textarea{width:100%;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:8px;color:var(--text);font-size:15px;font-family:inherit;padding:14px 16px;resize:vertical;min-height:90px;outline:none;}
.stress-form textarea::placeholder{color:var(--text-faint);}
.stress-form textarea:focus{border-color:var(--teal);}
.stress-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0 22px;}
@media(max-width:640px){.stress-metrics{grid-template-columns:repeat(2,1fr);}}
.s-metric{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;font-size:12px;color:var(--text-dim);line-height:1.3;}
.s-metric strong{display:block;color:var(--text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
.stress-disclaimer{font-size:12.5px;color:var(--text-faint);text-align:center;margin-top:10px;}

/* ---------- FEATURES ---------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
@media(max-width:900px){.features-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.features-grid{grid-template-columns:1fr;}}
.feat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:26px 22px;}
.feat-dot{width:8px;height:8px;border-radius:50%;background:var(--gradient);margin-bottom:18px;display:inline-block;}
.feat-card h4{font-size:16px;font-weight:700;margin-bottom:8px;}
.feat-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}

/* ---------- PHASES / PLATFORM WORKFLOW (solutions.html) ---------- */
.phase-num{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--bg);background:var(--gradient);border-radius:999px;padding:5px 14px;flex-shrink:0;}
.phase-block{display:flex;gap:32px;align-items:center;margin-bottom:56px;}
.phase-block:last-child{margin-bottom:0;}
.phase-label{flex:0 0 180px;}
.phase-label h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;}
.phase-label .phase-desc{display:block;font-size:13.5px;color:rgba(255,255,255,.88);font-weight:600;line-height:1.5;text-align:left;max-width:none;margin-left:0;}
.phase-grid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.phase-block{flex-direction:column;align-items:stretch;gap:16px;}.phase-label{flex:none;}}
@media(max-width:860px){.phase-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.phase-grid{grid-template-columns:1fr;}}
.cap-card{display:block;position:relative;background:var(--bg-panel);border:1.5px solid var(--border);border-radius:14px;padding:26px 44px 26px 22px;scroll-margin-top:96px;color:var(--text);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.cap-card:hover,.cap-card:focus-visible{transform:translateY(-4px);border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 18px 34px rgba(0,0,0,.42),0 0 26px rgba(139,108,255,.28);}
.cap-card:focus-visible{outline:none;}
.cap-card h4{font-size:16.5px;font-weight:700;margin-bottom:8px;}
.cap-card p{font-size:14px;color:var(--text-dim);line-height:1.6;}
.cap-arrow{position:absolute;right:18px;bottom:16px;width:18px;height:18px;color:var(--text-faint);opacity:.4;transition:opacity .25s ease,transform .25s ease;}
.cap-arrow svg{width:100%;height:100%;stroke:currentColor;}
.cap-card:hover .cap-arrow,.cap-card:focus-visible .cap-arrow{opacity:1;transform:translate(2px,-2px);color:var(--teal);}
.cap-card.active{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 24px rgba(139,108,255,.26);cursor:default;}
.cap-card.active:hover{transform:none;}
.cap-card.active h4{color:#fff;}
.cap-card.active .cap-arrow{display:none;}
.cap-current{position:absolute;top:9px;right:10px;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--gradient);padding:3px 8px;border-radius:999px;line-height:1;white-space:nowrap;}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;}}
.price-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px;display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--purple);background:var(--bg-panel-2);position:relative;}
.price-card .price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gradient);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 16px;border-radius:999px;white-space:nowrap;}
.price-card .price-tier{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;}
.price-card h3{font-size:24px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em;}
.price-card .price-value{font-size:15px;color:var(--text-dim);margin-bottom:22px;}
.price-card .price-list{list-style:none;margin-bottom:26px;flex-grow:1;}
.price-card .price-list li{font-size:14px;color:var(--text-dim);padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--border);}
.price-card .price-list li:first-child{border-top:none;}
.price-card .price-list li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--teal);font-weight:700;}

/* Plan allowance sliders (Users / Projects) - sit directly above the CTA
   in each pricing card, right after the feature list. Interactive -
   visitors can raise usage above the plan's starting quantity; each
   input runs on the same absolute 0-15 scale (see nav.js) with the real
   tier floor enforced in JS via data-min. No pricing formula exists yet,
   so nothing here fabricates a dollar estimate; it only ever shows the
   selected quantity. .price-list's flex-grow (above) absorbs the
   difference in feature-list length between cards, so this block and
   the CTA beneath it land at the same vertical position across all
   three cards regardless of copy length. */
.plan-allowance-intro{text-align:center;font-size:11.5px;color:#fff;margin-bottom:12px;}
.plan-allowances{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;}
.plan-allowance-labels{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:700;color:#fff;margin-bottom:7px;white-space:nowrap;}
.plan-allowance-value{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;}

/* The native range input drives all interaction (drag, track click, arrow
   keys) and sits on top (z-index 2) but is rendered fully transparent; the
   track/fill/dot beneath it are purely decorative (pointer-events:none) and
   are repositioned by nav.js on every "input" event to mirror the real
   value, so what's visible always matches the accessible/keyboard state. */
.plan-allowance-slider-wrap{position:relative;height:24px;display:flex;align-items:center;}
.plan-allowance-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:3px;background:var(--bg-panel-2);pointer-events:none;transition:background .18s ease;}
.price-card.featured .plan-allowance-track{background:var(--bg);}
.plan-allowance-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:var(--gradient);pointer-events:none;}
.plan-allowance-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--gradient);border:2px solid var(--bg-panel);box-shadow:0 2px 6px rgba(139,108,255,.45);transform:translate(-50%,-50%);pointer-events:none;transition:box-shadow .18s ease;}
.price-card.featured .plan-allowance-dot{border-color:var(--bg-panel-2);}
.plan-allowance-slider{position:relative;z-index:2;-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:grab;}
.plan-allowance-slider::-webkit-slider-runnable-track{height:24px;background:transparent;}
.plan-allowance-slider::-moz-range-track{height:24px;background:transparent;border:none;}
.plan-allowance-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:transparent;border:none;cursor:grab;}
.plan-allowance-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:transparent;border:none;cursor:grab;}
.plan-allowance-slider:active{cursor:grabbing;}
.plan-allowance-slider:active ~ .plan-allowance-dot{cursor:grabbing;}
.plan-allowance-slider-wrap:hover .plan-allowance-track{background:var(--border-mid);}
.plan-allowance-slider-wrap:hover .plan-allowance-dot{box-shadow:0 0 0 4px rgba(139,108,255,.18),0 2px 6px rgba(139,108,255,.5);}
.plan-allowance-slider-wrap:focus-within .plan-allowance-dot{box-shadow:0 0 0 4px rgba(139,108,255,.32),0 2px 6px rgba(139,108,255,.6);}
.plan-allowance-slider:focus-visible{outline:2px solid #5b8aff;outline-offset:3px;border-radius:12px;}
@media(max-width:480px){.plan-allowance-labels{font-size:11.5px;}.plan-allowance-slider-wrap,.plan-allowance-slider,.plan-allowance-slider::-webkit-slider-runnable-track,.plan-allowance-slider::-webkit-slider-thumb{height:44px;}.plan-allowance-slider::-moz-range-track,.plan-allowance-slider::-moz-range-thumb{height:44px;}}

/* ---------- ABOUT ---------- */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;}
@media(max-width:768px){.mission-grid{grid-template-columns:1fr;}}
.value-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
@media(max-width:860px){.value-list{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.value-list{grid-template-columns:1fr;}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin-top:48px;align-items:start;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:480px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg);border:1px solid var(--border-mid);border-radius:8px;color:var(--text);font-size:15px;font-family:inherit;padding:12px 14px;outline:none;}
.form-group textarea{resize:vertical;min-height:110px;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-faint);}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--teal);}
.contact-info-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px;}
.contact-info-card h4{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.contact-info-card p.big{font-size:17px;font-weight:600;margin-bottom:24px;}
.contact-info-card .divider-line{border-top:1px solid var(--border);margin:24px 0;}

/* ---------- RESOURCES HUB ---------- */
.res-filter-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 40px;}
.res-filter-btn{padding:9px 20px;border-radius:999px;font-size:13.5px;font-weight:700;background:var(--bg-panel);border:1px solid var(--border-mid);color:var(--text-dim);cursor:pointer;font-family:inherit;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.res-filter-btn:hover{color:var(--text);transform:translateY(-1px);}
.res-filter-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.res-filter-btn.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(139,108,255,.32);}

.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:16px;}
@media(max-width:860px){.resource-grid{grid-template-columns:1fr;}}

.resource-card{background:var(--bg-panel);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.resource-card.res-hidden{display:none;}
.resource-card:hover,.resource-card:focus-visible{
  transform:translateY(-4px);
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 18px 34px rgba(0,0,0,.42),0 0 26px rgba(139,108,255,.28);
  outline:none;
}
.resource-card:hover .resource-cover svg,.resource-card:focus-visible .resource-cover svg{transform:scale(1.1);}

.resource-cover{position:relative;height:132px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,rgba(139,108,255,.2),rgba(91,138,255,.08));}
.resource-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:16px 16px;opacity:.35;}
.resource-cover svg{width:36px;height:36px;color:#fff;opacity:.92;position:relative;z-index:1;transition:transform .3s ease;}
.resource-card.cat-case-study .resource-cover{background:linear-gradient(135deg,rgba(47,212,188,.22),rgba(47,212,188,.06));}
.resource-card.cat-blog .resource-cover{background:linear-gradient(135deg,rgba(244,185,66,.22),rgba(244,185,66,.06));}
.resource-card.cat-podcast .resource-cover{background:linear-gradient(135deg,rgba(255,95,86,.22),rgba(255,138,61,.08));}

.resource-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex-grow:1;}
.resource-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(139,108,255,.1);color:var(--purple);border:1px solid rgba(139,108,255,.2);margin-bottom:14px;width:fit-content;}
.resource-card.cat-case-study .resource-tag{background:rgba(47,212,188,.1);color:var(--teal);border-color:rgba(47,212,188,.2);}
.resource-card.cat-blog .resource-tag{background:rgba(244,185,66,.1);color:var(--gold);border-color:rgba(244,185,66,.22);}
.resource-card.cat-podcast .resource-tag{background:rgba(255,111,61,.12);color:#ff8a5c;border-color:rgba(255,111,61,.24);}
.resource-card h4{font-size:16.5px;font-weight:700;margin-bottom:10px;line-height:1.35;}
.resource-card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:16px;flex-grow:1;}
.resource-meta{font-size:12.5px;color:var(--text-faint);border-top:1px solid var(--border);padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.resource-meta .rm-sep{opacity:.5;}
.resource-hub-head{margin-bottom:32px;}
.resource-hub-head h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;}
.resource-hub-head p{font-size:14.5px;color:var(--text-dim);}

/* ---------- FINAL CTA ---------- */
.final-cta{text-align:center;}
.final-cta h2{font-size:40px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;line-height:1.1;}
.final-cta p{font-size:17px;color:var(--text-dim);max-width:500px;margin:0 auto 36px;line-height:1.6;}
.cta-frame{max-width:820px;margin:0 auto;background:var(--gradient);border-radius:24px;padding:2.5px;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(139,108,255,.24);}
.cta-frame-inner{background:var(--bg-panel);border-radius:21.5px;padding:64px 48px;text-align:center;}
@media(max-width:640px){.cta-frame-inner{padding:44px 26px;}}
/* Final CTA headline is two forced lines ("Make confident growth
   decisions" / "with Global Copilot, faster.") at the standard 40px
   weight - widened slightly vs. the base .cta-frame so the longer
   second line never wraps to a third line at desktop widths. */
.final-cta .cta-frame{max-width:880px;}
.cta-talk{margin:4px auto 0;padding-top:32px;border-top:1px solid var(--border);max-width:520px;}
.cta-talk-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:700;margin-bottom:14px;}
@media(max-width:640px){.cta-talk{padding-top:26px;}}

/* ---------- SECTION HEADERS ---------- */
.section-head{text-align:center;max-width:680px;margin:0 auto var(--section-visual-gap);}
.section-head h2{font-size:36px;font-weight:800;letter-spacing:-.015em;margin-bottom:14px;line-height:1.2;}
.section-head p{font-size:16px;color:var(--text-dim);line-height:1.65;}
@media(max-width:768px){.section-head h2{font-size:26px;}}


/* ---------- PRODUCT VISUAL: BROWSER FRAME + DASHBOARD MOCKUP ---------- */
.browser-frame{background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.55);overflow:hidden;}
.browser-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:var(--bg-panel-2);border-bottom:1px solid var(--border);}
.browser-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.browser-dot.red{background:#ff5f56;}
.browser-dot.yellow{background:#ffbd2e;}
.browser-dot.green{background:#27c93f;}
.browser-url{flex:1;margin-left:14px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:6px 14px;font-size:12.5px;color:var(--text-faint);text-align:center;max-width:360px;}
.product-mockup{padding:22px;background:var(--bg);}
.mockup-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
@media(max-width:768px){.mockup-grid{grid-template-columns:1fr;}}
.mockup-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:20px;}
.mockup-panel h6{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;margin-bottom:16px;}

.rank-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border);}
.rank-row:first-child{border-top:none;padding-top:0;}
.rank-num{width:22px;height:22px;border-radius:6px;background:var(--gradient);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rank-name{flex:1;font-size:13.5px;font-weight:600;color:var(--text);}
.rank-bar-track{width:70px;height:6px;background:var(--bg);border-radius:4px;overflow:hidden;flex-shrink:0;}
.rank-bar-fill{height:100%;background:var(--gradient);border-radius:4px;}
.rank-score{font-size:12.5px;font-weight:700;color:var(--teal);width:26px;text-align:right;flex-shrink:0;}

.score-ring{width:64px;height:64px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.score-ring-inner{width:48px;height:48px;border-radius:50%;background:var(--bg-panel);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--text);}
.score-meta{display:grid;gap:10px;margin-top:18px;}
.score-meta-row{display:flex;justify-content:space-between;font-size:12.5px;}
.score-meta-row span:first-child{color:var(--text-dim);}
.score-meta-row span:last-child{font-weight:700;}
.score-tag-high{color:var(--teal);}
.score-tag-med{color:var(--gold);}
.score-tag-low{color:var(--text-faint);}

table.compare-table{width:100%;border-collapse:collapse;font-size:12.5px;}
table.compare-table th{text-align:left;color:var(--text-faint);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding-bottom:10px;}
table.compare-table td{padding:8px 6px 8px 0;border-top:1px solid var(--border);color:var(--text-dim);}
table.compare-table td:first-child{color:var(--text);font-weight:600;}
.compare-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.compare-pill.high{background:rgba(47,212,188,.12);color:var(--teal);}
.compare-pill.med{background:rgba(244,185,66,.12);color:var(--gold);}
.compare-pill.low{background:rgba(255,255,255,.07);color:var(--text-faint);}

.market-map{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;}
.map-dot{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.07);}
.map-dot.hot{background:var(--teal);}
.map-dot.warm{background:var(--purple);}
.map-legend{display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--text-faint);flex-wrap:wrap;}
.map-legend .swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle;}

.ai-callout{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(139,108,255,.1),rgba(47,212,188,.08));border:1px solid rgba(139,108,255,.22);border-radius:10px;padding:16px;}
.ai-callout .ai-icon{width:30px;height:30px;border-radius:9px;background:var(--gradient);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(91,138,255,.3);}
.ai-callout .ai-icon svg{width:16px;height:16px;stroke:currentColor;}
.ai-callout p{font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.ai-callout strong{color:var(--text);}

/* ---------- PREMIUM ICON STYLE (opt-in modifiers - matches Solutions mega-menu) ---------- */
.diff-icon.icon-gradient{background:var(--gradient);border:1px solid rgba(255,255,255,.1);color:#fff;box-shadow:0 4px 12px rgba(91,138,255,.28);transition:transform .2s ease,box-shadow .2s ease;}
.diff-icon.icon-gradient-danger{background:var(--gradient-danger);border:1px solid rgba(255,255,255,.1);color:#fff;box-shadow:0 4px 12px rgba(255,111,61,.28);transition:transform .2s ease,box-shadow .2s ease;}
.diff-card.icon-card:hover .diff-icon.icon-gradient-danger{transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,95,86,.45),0 0 16px rgba(255,138,61,.3);}
.diff-icon.icon-gradient svg,.diff-icon.icon-gradient-danger svg{width:20px;height:20px;stroke:currentColor;}
.diff-card.icon-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.diff-card.icon-card:hover{transform:translateY(-3px);border-color:var(--border-mid);box-shadow:0 18px 36px rgba(0,0,0,.4);}
.diff-card.icon-card:hover .diff-icon.icon-gradient{transform:translateY(-2px);box-shadow:0 10px 22px rgba(139,108,255,.5),0 0 16px rgba(47,212,188,.35);}

/* ---------- GRADIENT-OUTLINE ICON (matches cta-frame border treatment, scaled to icon size) ---------- */
.diff-icon.icon-outline{background:var(--gradient);padding:1.5px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 20px rgba(139,108,255,.28);transition:transform .2s ease,box-shadow .2s ease;}
.diff-icon.icon-outline .icon-outline-inner{width:100%;height:100%;background:var(--bg-panel-2);border-radius:10.5px;display:flex;align-items:center;justify-content:center;color:#fff;}
.diff-icon.icon-outline .icon-outline-inner svg{width:20px;height:20px;stroke:currentColor;}
.diff-card.icon-card:hover .diff-icon.icon-outline{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.45),0 0 26px rgba(47,212,188,.32);}

/* ---------- STAT TILES ---------- */
.stat-tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat-tile{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.stat-tile .stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.stat-tile .stat-value{font-size:21px;font-weight:800;color:var(--text);line-height:1;margin-bottom:6px;}
.stat-tile .stat-trend{font-size:11.5px;font-weight:600;}
.stat-trend.up{color:var(--teal);}
.stat-trend.down{color:var(--gold);}

/* ---------- IMPACT / OUTCOMES DASHBOARD (Partner pages) ---------- */
.impact-group{margin-top:44px;}
.impact-group:first-child{margin-top:0;}
.impact-group-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);font-weight:800;margin-bottom:16px;}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.impact-grid .stat-tile{background:var(--bg-panel);border:1px solid var(--border);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
@media(max-width:860px){.impact-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.impact-grid{grid-template-columns:1fr;}}

/* Gradient hover/focus/tap state - matches the final CTA's purple→blue→green outline */
.impact-grid .stat-tile:hover,
.impact-grid .stat-tile:focus-visible,
.impact-grid .stat-tile.tap-active{
  transform:translateY(-3px);
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);
  outline:none;
}
.impact-grid .stat-tile .stat-label,
.impact-grid .stat-tile .stat-value{transition:filter .25s ease,color .25s ease;}
.impact-grid .stat-tile:hover .stat-value,
.impact-grid .stat-tile:focus-visible .stat-value,
.impact-grid .stat-tile.tap-active .stat-value{filter:brightness(1.25);}
.impact-grid .stat-tile:hover .stat-label,
.impact-grid .stat-tile:focus-visible .stat-label,
.impact-grid .stat-tile.tap-active .stat-label{filter:brightness(1.3);color:var(--text);}

/* ---------- MULTI-SELECT OUTCOME METRICS (Accelerators page only, scoped to .outcomes-selectable) ---------- */
.outcomes-selectable .outcome-metric{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.outcomes-selectable .outcome-metric-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.outcomes-selectable .outcome-check{
  flex-shrink:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--border-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  color:transparent;
  transition:background .2s ease,border-color .2s ease,color .15s ease,box-shadow .2s ease,transform .2s ease;
}
/* Hover: brighten the checkbox and give it a gradient outline, but never auto-select */
.outcomes-selectable .outcome-metric:hover .outcome-check,
.outcomes-selectable .outcome-metric:focus-visible .outcome-check,
.outcomes-selectable .outcome-metric.tap-active .outcome-check{
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;
  border-color:transparent;
}
/* Selected: permanent gradient outline on the card, checkmark visible, dark interior kept */
.outcomes-selectable .outcome-metric.selected{
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);
}
.outcomes-selectable .outcome-metric.selected .stat-value,
.outcomes-selectable .outcome-metric.selected .stat-label{filter:brightness(1.25);color:var(--text);}
.outcomes-selectable .outcome-metric.selected .outcome-check{
  background:var(--gradient);
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 12px rgba(91,138,255,.28);
  transform:scale(1.05);
}

/* Selection summary + dashboard CTA - hidden until >=1 metric selected, fades + slides up into view */
.outcome-select-summary{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.outcome-select-summary.is-visible{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease,transform .3s ease;
}
.outcome-select-count{font-size:15px;color:var(--text-dim);font-weight:600;}
.outcome-select-count strong{color:#fff;font-weight:800;font-size:17px;}
@media(prefers-reduced-motion:reduce){
  .outcome-select-summary{transition:opacity .15s ease,visibility 0s linear .15s;transform:none;}
  .outcome-select-summary.is-visible{transition:opacity .15s ease;transform:none;}
  .outcomes-selectable .outcome-metric,
  .outcomes-selectable .outcome-check{transition:none;}
}

/* Placeholder dashboard-builder modal, opened by the Build Your Outcome
   Reporting Dashboard button (Accelerators page only) */
.outcome-dashboard-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,4,8,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:200;
}
.outcome-dashboard-modal{
  max-width:440px;
  width:100%;
  background:var(--bg-panel-2);
  border-radius:16px;
  padding:28px 30px;
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.outcome-dashboard-modal h3{font-size:19px;margin-bottom:10px;color:var(--text);}
.outcome-dashboard-modal p{font-size:14px;color:var(--text-dim);margin-bottom:12px;}
.outcome-dashboard-modal-list{list-style:none;margin-bottom:22px;max-height:220px;overflow-y:auto;}
.outcome-dashboard-modal-list li{font-size:14px;color:var(--text);padding:8px 0;border-top:1px solid var(--border);}
.outcome-dashboard-modal-list li:first-child{border-top:none;}
.outcome-dashboard-close{width:100%;}

/* ---------- PESTEL GRID ---------- */
.pestel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media(max-width:640px){.pestel-grid{grid-template-columns:1fr 1fr;}}
.pestel-cell{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;}
.pestel-cell .pestel-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--purple);font-weight:800;margin-bottom:6px;}
.pestel-cell .pestel-text{font-size:12px;color:var(--text-dim);line-height:1.45;margin-bottom:10px;}
.pestel-bar-track{width:100%;height:5px;background:var(--bg-panel-2);border-radius:3px;overflow:hidden;}
.pestel-bar-fill{height:100%;background:var(--gradient);border-radius:3px;}

/* ---------- TREND CHART (SVG line chart) ---------- */
.trend-chart-wrap{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.trend-chart-wrap svg{width:100%;height:auto;display:block;}
.trend-legend{display:flex;gap:16px;margin-top:10px;font-size:11.5px;color:var(--text-faint);flex-wrap:wrap;}
.trend-legend .swatch-line{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;}

/* ---------- TAM / SAM / SOM BARS ---------- */
.tam-stack{display:flex;flex-direction:column;gap:10px;}
.tam-row{display:flex;align-items:center;gap:12px;}
.tam-row .tam-label{width:46px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--text-faint);flex-shrink:0;}
.tam-row .tam-track{flex-grow:1;height:22px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.tam-row .tam-fill{height:100%;display:flex;align-items:center;padding-left:10px;font-size:11.5px;font-weight:700;color:#fff;border-radius:6px 0 0 6px;}

/* ---------- PERSONA / EXPERT CARDS ---------- */
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:640px){.persona-grid{grid-template-columns:1fr;}}
.persona-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;}
.persona-avatar{width:38px;height:38px;border-radius:50%;background:var(--gradient);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.persona-name{font-size:13.5px;font-weight:700;color:var(--text);}
.persona-role{font-size:11.5px;color:var(--text-faint);margin-bottom:10px;}
.persona-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.tag-chip{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text-dim);}
.persona-bar-track{width:100%;height:5px;background:var(--bg-panel-2);border-radius:3px;overflow:hidden;}
.persona-bar-fill{height:100%;background:var(--gradient);border-radius:3px;}

/* ---------- QUADRANT / POSITIONING CHART ---------- */
.quad-chart{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:10px;height:200px;padding:10px;}
.quad-chart::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:var(--border-mid);}
.quad-chart::after{content:"";position:absolute;top:50%;left:10px;right:10px;height:1px;background:var(--border-mid);}
.quad-axis-label{position:absolute;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);font-weight:700;}
.quad-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--teal);border:2px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--border-mid);}
.quad-dot.purple{background:var(--purple);}
.quad-dot-label{position:absolute;font-size:10px;font-weight:700;color:var(--text);white-space:nowrap;transform:translate(-50%,-140%);}

/* ---------- KANBAN BOARD ---------- */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:640px){.kanban{grid-template-columns:1fr;}}
.kanban-col{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;}
.kanban-col-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;}
.kanban-card{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:12px;color:var(--text-dim);margin-bottom:8px;font-weight:600;}
.kanban-card:last-child{margin-bottom:0;}
.kanban-card .kc-tag{display:block;margin-top:5px;font-size:10px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.03em;}

/* ---------- OKR / PROGRESS BARS ---------- */
.okr-list{display:flex;flex-direction:column;gap:14px;}
.okr-row .okr-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;}
.okr-row .okr-obj{color:var(--text);font-weight:600;}
.okr-row .okr-pct{color:var(--teal);font-weight:700;}
.okr-track{position:relative;width:100%;height:8px;background:var(--bg);border:1px solid var(--border);border-radius:5px;overflow:visible;}
.okr-fill{height:100%;background:var(--gradient);border-radius:5px;}
.okr-target{position:absolute;top:-3px;width:2px;height:14px;background:var(--text-faint);}

/* ---------- SCENARIO TOGGLE ---------- */
.scenario-tabs{display:flex;gap:8px;margin-bottom:14px;}
.scenario-tab{flex:1;text-align:center;padding:8px 6px;border-radius:8px;font-size:11.5px;font-weight:700;background:var(--bg);border:1px solid var(--border);color:var(--text-faint);}
.scenario-tab.active{background:var(--gradient);color:#fff;border-color:transparent;}
.scenario-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.scenario-stats .stat-tile{padding:10px 12px;}

/* ---------- ASSUMPTION TRACKER ---------- */
.assumption-list{display:flex;flex-direction:column;}
.assumption-row{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:12.5px;}
.assumption-row:first-child{border-top:none;padding-top:0;}
.assumption-row .a-name{color:var(--text);font-weight:600;}
.assumption-row .a-old{color:var(--text-faint);}
.assumption-row .a-new{color:var(--text-dim);}
.assumption-delta{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;justify-self:end;}
.assumption-delta.up{background:rgba(47,212,188,.12);color:var(--teal);}
.assumption-delta.down{background:rgba(244,185,66,.12);color:var(--gold);}

/* ---------- DONUT + LEGEND ---------- */
.donut-row{display:flex;align-items:center;gap:20px;}
.donut-ring{width:76px;height:76px;border-radius:50%;flex-shrink:0;}
.donut-hole{width:100%;height:100%;border-radius:50%;background:var(--bg-panel);}
.donut-legend-list{flex-grow:1;display:flex;flex-direction:column;gap:8px;}
.donut-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);}
.donut-legend-row .dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.donut-legend-row .val{margin-left:auto;font-weight:700;color:var(--text);}

/* ---------- GANTT CHART ---------- */
.gantt{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.gantt-header{display:grid;grid-template-columns:120px repeat(4,1fr);gap:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:10px;}
.gantt-row{display:grid;grid-template-columns:120px repeat(4,1fr);gap:4px;align-items:center;margin-bottom:10px;}
.gantt-row:last-child{margin-bottom:0;}
.gantt-row .gantt-label{font-size:12px;color:var(--text-dim);font-weight:600;}
.gantt-track{grid-column:span 4;position:relative;height:16px;background:var(--bg-panel-2);border-radius:5px;}
.gantt-bar{position:absolute;top:0;height:100%;border-radius:5px;background:var(--gradient);}
.gantt-milestone{position:absolute;top:50%;width:9px;height:9px;background:var(--teal);border:2px solid var(--bg);transform:translate(-50%,-50%) rotate(45deg);}

/* ---------- NETWORK GRAPH ---------- */
.network-graph-wrap{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:center;}
.network-graph-wrap svg{width:100%;height:auto;}

/* ---------- ALERT FEED ---------- */
.alert-feed{display:flex;flex-direction:column;}
.alert-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--border);}
.alert-row:first-child{border-top:none;padding-top:0;}
.alert-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.alert-dot.high{background:var(--gold);}
.alert-dot.mid{background:var(--purple);}
.alert-dot.low{background:var(--teal);}
.alert-body{flex-grow:1;font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.alert-body strong{color:var(--text);}
.alert-time{font-size:11px;color:var(--text-faint);white-space:nowrap;flex-shrink:0;}

/* ---------- MINI WORKFLOW STEPPER (Expert Mapping validation flow) ---------- */
.mini-workflow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.mini-step{padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--border);color:var(--text-faint);}
.mini-step.done{background:var(--gradient);color:#fff;border-color:transparent;}
.mini-arrow{color:var(--text-faint);font-size:13px;}

/* ---------- TRIO GRID (3 equal-width cards) ---------- */
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
@media(max-width:860px){.trio-grid{grid-template-columns:1fr;}}

/* ---------- WORKFLOW STRIP ---------- */
.workflow-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.workflow-step{display:inline-flex;align-items:center;padding:14px 20px;border-radius:12px;font-size:13.5px;font-weight:700;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-faint);white-space:nowrap;transition:color .15s ease,border-color .15s ease;}
.workflow-step.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(139,108,255,.4);}
a.workflow-step:not(.active):hover{color:var(--text-dim);border-color:var(--border-mid);}
.workflow-arrow{color:var(--text-faint);font-size:18px;flex-shrink:0;}
@media(max-width:640px){.workflow-strip{flex-direction:column;}.workflow-arrow{transform:rotate(90deg);}}
.workflow-note{text-align:center;font-size:15px;color:var(--text-dim);max-width:660px;margin:28px auto 0;line-height:1.65;}

/* ---------- CONNECTED INTELLIGENCE ENGINE DIAGRAM ---------- */
.engine-diagram-wrap{max-width:760px;margin:0 auto 4px;padding:0 16px;}
.engine-diagram{width:100%;height:auto;display:block;overflow:visible;}
.engine-glow{animation:engine-pulse 4.5s ease-in-out infinite;transform-origin:510px 510px;}
.engine-core{filter:url(#engineSoftBlur);}
.engine-ring-rotate{transform-origin:510px 510px;animation:engine-rotate 40s linear infinite;}
.engine-core-label{fill:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;}
.engine-beam{stroke:url(#engineBeamGrad);stroke-width:1.75;fill:none;stroke-linecap:round;stroke-dasharray:3 9;animation:engine-flow 1.8s linear infinite;}
.engine-node{cursor:pointer;}
.engine-node-bg{fill:url(#engineCoreGrad);box-shadow:none;transition:transform .2s ease;}
.engine-node-ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;transition:stroke .2s ease,opacity .2s ease;opacity:0;}
.engine-label{fill:var(--text-dim);font-size:17px;font-weight:600;letter-spacing:-.005em;transition:fill .2s ease;}
.engine-node:hover .engine-node-bg,.engine-node:focus .engine-node-bg{transform:scale(1.12);}
.engine-node:hover .engine-node-ring,.engine-node:focus .engine-node-ring{opacity:1;stroke:rgba(139,108,255,.55);}
.engine-node:hover .engine-label,.engine-node:focus .engine-label{fill:var(--text);}
.engine-node-bg{transform-box:fill-box;transform-origin:center;}
@keyframes engine-pulse{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
@keyframes engine-rotate{to{transform:rotate(360deg);}}
@keyframes engine-flow{to{stroke-dashoffset:-24;}}
@media(max-width:640px){.engine-label{font-size:15px;}}

/* ---------- EASY TO INTEGRATE (Partner pages, before Final CTA) ---------- */
.integrate-section{padding:88px 0;}
.integrate-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media(max-width:960px){.integrate-grid{grid-template-columns:1fr;gap:44px;}}
.integrate-text h2{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px;}
@media(max-width:768px){.integrate-text h2{font-size:27px;}}
.integrate-text > p{font-size:16px;color:var(--text-dim);line-height:1.7;max-width:520px;margin-bottom:32px;}
.integrate-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.integrate-cards{grid-template-columns:1fr;}}
.integrate-card{padding:22px 20px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.integrate-card:hover,.integrate-card:focus-visible{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.24);outline:none;}
.integrate-card-icon{width:36px;height:36px;border-radius:9px;background:var(--gradient);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px;box-shadow:0 4px 12px rgba(139,108,255,.3);}
.integrate-card-icon svg{width:18px;height:18px;stroke:currentColor;}
.integrate-card h4{font-size:15.5px;font-weight:700;margin-bottom:8px;line-height:1.3;}
.integrate-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}

/* Right-side graphic: partner website -> arrow -> Global Copilot workflow */
.integrate-visual{display:flex;flex-direction:column;align-items:center;}
.integrate-site-frame{width:100%;max-width:400px;}
.integrate-site-body{background:var(--bg);padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.integrate-site-lines{width:100%;display:flex;flex-direction:column;gap:7px;}
.integrate-site-lines span{display:block;height:7px;border-radius:4px;background:var(--border-mid);}
.integrate-site-lines span:nth-child(1){width:70%;}
.integrate-site-lines span:nth-child(2){width:92%;}
.integrate-site-lines span:nth-child(3){width:55%;}
.integrate-site-cta{margin-top:2px;font-size:13px;padding:9px 18px;pointer-events:none;}
.integrate-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-faint);margin:10px 0;}
.integrate-arrow-line{width:1.5px;height:22px;background:linear-gradient(var(--border-mid),var(--teal));}
.integrate-arrow svg{width:16px;height:16px;stroke:var(--teal);}
.integrate-gc-frame{width:100%;max-width:400px;}
.integrate-gc-body{padding:20px;display:flex;flex-direction:column;gap:18px;}
.integrate-workflow{display:flex;flex-direction:column;}
.integrate-step{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0;font-size:12.5px;font-weight:600;color:var(--text);}
.integrate-step:not(:last-child)::after{content:"";position:absolute;left:5px;top:23px;width:1.5px;height:calc(100% - 6px);background:linear-gradient(var(--purple),var(--teal));opacity:.4;}
.integrate-step-dot{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;background:var(--gradient);flex-shrink:0;box-shadow:0 0 6px rgba(91,138,255,.4);}
.integrate-edu-panel{padding-top:16px;border-top:1px solid var(--border);}
.integrate-edu-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:10px;}
.integrate-edu-tags{display:flex;flex-wrap:wrap;gap:8px;}
.integrate-edu-tag{font-size:11px;font-weight:600;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:999px;padding:5px 11px;}

/* ============================================================
   RESOURCE DETAIL PAGE (Guide / Case Study / Blog / Podcast)
   Color-coded via --accent custom properties set per .type-*
   modifier - every other rule below just references var(--accent)
   so all four variants share one implementation.
   ============================================================ */
.resource-detail{--accent:var(--purple);--accent-bg:rgba(139,108,255,.1);--accent-border:rgba(139,108,255,.22);}
.resource-detail.type-case-study{--accent:var(--teal);--accent-bg:rgba(47,212,188,.1);--accent-border:rgba(47,212,188,.22);}
.resource-detail.type-blog{--accent:var(--gold);--accent-bg:rgba(244,185,66,.1);--accent-border:rgba(244,185,66,.24);}
.resource-detail.type-podcast{--accent:#ff8a5c;--accent-bg:rgba(255,111,61,.12);--accent-border:rgba(255,111,61,.26);}

/* ---- Hero / header ---- */
.res-hero{padding:56px 0 0;}
.res-hero-inner{max-width:820px;margin:0 auto;}
.res-type-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:18px;}
.res-type-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
.res-detail-title{font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px;}
@media(max-width:768px){.res-detail-title{font-size:30px;}}
.res-detail-summary{font-size:18px;color:var(--text-dim);line-height:1.6;max-width:700px;margin-bottom:26px;}
.res-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13.5px;color:var(--text-faint);padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.res-detail-meta .persona-avatar{width:32px;height:32px;font-size:11.5px;margin-bottom:0;flex-shrink:0;}
.res-meta-authorline{display:flex;align-items:center;gap:10px;}
.res-meta-authorline .res-meta-name{color:var(--text);font-weight:700;}
.res-meta-sep{opacity:.5;}

/* ---- Share row ---- */
.res-share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.res-share-label{font-size:12.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-right:4px;}
.res-share-btn{width:34px;height:34px;border-radius:50%;background:var(--bg-panel);border:1px solid var(--border-mid);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;font-family:inherit;position:relative;}
.res-share-btn svg{width:15px;height:15px;stroke:currentColor;}
.res-share-btn:hover,.res-share-btn:focus-visible{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);outline:none;}
.res-share-copied{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:#08080e;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.res-share-btn.copied .res-share-copied{opacity:1;}

/* ---- Featured media ---- */
.res-detail-media{max-width:920px;margin:0 auto 8px;}
.res-media-frame{border-radius:18px;overflow:hidden;border:1.5px solid var(--accent-border);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px var(--accent-bg);background:linear-gradient(135deg,var(--accent-bg),rgba(255,255,255,.02));aspect-ratio:16/8.4;display:flex;align-items:center;justify-content:center;position:relative;}
.res-media-frame::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px;opacity:.35;}
.res-media-frame svg{width:72px;height:72px;color:var(--accent);opacity:.9;position:relative;z-index:1;}
.res-media-caption{text-align:center;font-size:13px;color:var(--text-faint);margin-top:12px;}

/* ---- Podcast audio player ---- */
.res-audio-player{max-width:920px;margin:20px auto 0;background:var(--bg-panel);border:1px solid var(--accent-border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px;}
.res-audio-play{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#08080e;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.res-audio-play svg{width:18px;height:18px;fill:currentColor;}
.res-audio-track{flex:1;height:5px;border-radius:3px;background:var(--border-mid);position:relative;overflow:hidden;}
.res-audio-track::before{content:"";position:absolute;inset:0;width:28%;background:var(--accent);border-radius:3px;}
.res-audio-time{font-size:12px;color:var(--text-faint);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---- Overview panel (What You'll Learn / Covers / At a Glance / In This Episode) ---- */
.res-overview-panel{max-width:820px;margin:36px auto 0;border-radius:16px;padding:26px 28px;border:1.5px solid transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--accent) border-box;}
.res-overview-panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--accent);margin-bottom:16px;}
.res-overview-list{list-style:none;display:grid;gap:11px;}
.res-overview-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text);line-height:1.5;font-weight:600;}
.res-overview-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:7px;}

/* ---- Article layout: reading column + sticky TOC ---- */
.res-article-wrap{max-width:980px;margin:0 auto;padding:48px 0 0;}
.res-article-grid{display:grid;grid-template-columns:1fr 220px;gap:56px;align-items:start;}
@media(max-width:900px){.res-article-grid{grid-template-columns:1fr;gap:0;}}
.res-article{max-width:720px;}
.res-toc-mobile{display:none;}
@media(max-width:900px){
  .res-toc-desktop{display:none;}
  .res-toc-mobile{display:block;margin-bottom:32px;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:6px 18px;}
  .res-toc-mobile summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:700;color:var(--text);list-style:none;display:flex;align-items:center;justify-content:space-between;}
  .res-toc-mobile summary::-webkit-details-marker{display:none;}
  .res-toc-mobile summary::after{content:"▾";color:var(--text-faint);}
  .res-toc-mobile[open] summary::after{content:"▴";}
  .res-toc-mobile ul{list-style:none;padding-bottom:14px;}
}
.res-toc-desktop{position:sticky;top:96px;}
.res-toc-desktop .res-toc-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--text-faint);margin-bottom:14px;}
.res-toc ul{list-style:none;display:flex;flex-direction:column;gap:2px;}
.res-toc li a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--border);font-size:13px;color:var(--text-dim);text-decoration:none;line-height:1.4;transition:color .15s ease,border-color .15s ease;}
.res-toc li.res-toc-h3 a{padding-left:26px;font-size:12.5px;}
.res-toc li a:hover{color:var(--text);}
.res-toc li a.active{color:var(--accent);border-left-color:var(--accent);font-weight:700;}
html{scroll-behavior:smooth;}
.res-article h2,.res-article h3{scroll-margin-top:96px;}

/* ---- Rich content typography ---- */
.res-article h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:44px 0 16px;line-height:1.3;}
.res-article h2:first-child{margin-top:0;}
.res-article h3{font-size:19px;font-weight:700;margin:30px 0 12px;line-height:1.35;}
.res-article p{font-size:17px;color:var(--text);line-height:1.8;margin-bottom:20px;}
.res-article ul,.res-article ol{margin:0 0 22px;padding-left:22px;}
.res-article li{font-size:16.5px;color:var(--text);line-height:1.75;margin-bottom:9px;}
.res-article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.res-article strong{color:var(--text);font-weight:700;}
.res-article blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent);font-size:19px;font-style:italic;color:var(--text);line-height:1.55;}
.res-article blockquote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--text-faint);}
.res-callout{margin:28px 0;padding:20px 22px;border-radius:12px;border:1.5px solid var(--accent-border);background:var(--accent-bg);}
.res-callout .res-callout-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:8px;}
.res-callout p{margin-bottom:0;font-size:15.5px;color:var(--text);}
.res-inline-image{margin:32px -20px;}
.res-inline-image img,.res-inline-image .res-inline-image-ph{width:100%;border-radius:12px;display:block;}
.res-inline-image-ph{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent-bg),rgba(255,255,255,.02));border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);}
.res-inline-image-ph svg{width:40px;height:40px;}
.res-image-caption{font-size:12.5px;color:var(--text-faint);text-align:center;margin-top:10px;}
.res-table-wrap{margin:28px 0;overflow-x:auto;border-radius:12px;border:1px solid var(--border);}
.res-article table{width:100%;border-collapse:collapse;font-size:14.5px;}
.res-article th{background:var(--bg-panel-2);color:var(--text);font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap;}
.res-article td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text-dim);}
.res-article tr:last-child td{border-bottom:none;}
.res-video-embed{margin:28px 0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);}
.res-video-embed svg{width:52px;height:52px;color:var(--accent);}
.res-sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--border);}
.res-sources h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:14px;}
.res-sources ol{padding-left:20px;}
.res-sources li{font-size:13.5px;color:var(--text-dim);margin-bottom:8px;line-height:1.6;}

/* ---- Type-specific modules ---- */
.res-module{margin:36px 0;padding:24px;border-radius:14px;background:var(--bg-panel);border:1px solid var(--border);}
.res-module h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:16px;}
.res-module-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.res-module-tag{font-size:12px;font-weight:700;color:var(--text-dim);background:var(--bg);border:1px solid var(--border-mid);border-radius:999px;padding:6px 13px;}
.res-checklist{list-style:none;display:grid;gap:10px;}
.res-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text);line-height:1.5;}
.res-checklist .res-check-mark{width:18px;height:18px;border-radius:5px;background:var(--accent);color:#08080e;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.res-chapter-list{list-style:none;display:grid;gap:2px;}
.res-chapter-list li a{display:flex;justify-content:space-between;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-dim);text-decoration:none;}
.res-chapter-list li:last-child a{border-bottom:none;}
.res-chapter-list li a:hover{color:var(--accent);}
.res-chapter-list .res-chapter-num{color:var(--accent);font-weight:700;margin-right:10px;}
.res-impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0;}
@media(max-width:720px){.res-impact-grid{grid-template-columns:1fr 1fr;}}
.res-impact-tile{background:var(--bg-panel);border:1px solid var(--accent-border);border-radius:12px;padding:18px 16px;}
.res-impact-tile .stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.res-impact-tile .stat-value{font-size:24px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:6px;}
.res-impact-tile .stat-note{font-size:11.5px;color:var(--text-faint);}
.res-guest-card{display:flex;align-items:center;gap:14px;margin:28px 0;padding:18px 20px;border-radius:12px;background:var(--bg-panel);border:1px solid var(--border);}
.res-guest-card .persona-avatar{width:48px;height:48px;font-size:15px;margin-bottom:0;flex-shrink:0;}
.res-guest-card .res-guest-name{font-weight:700;color:var(--text);font-size:15px;}
.res-guest-card .res-guest-role{font-size:13px;color:var(--text-dim);}
.res-transcript{margin:36px 0;border-radius:12px;border:1px solid var(--border);background:var(--bg-panel);}
.res-transcript summary{cursor:pointer;padding:16px 20px;font-size:14.5px;font-weight:700;color:var(--text);list-style:none;display:flex;align-items:center;justify-content:space-between;}
.res-transcript summary::-webkit-details-marker{display:none;}
.res-transcript summary::after{content:"Show transcript ▾";color:var(--accent);font-weight:600;font-size:13px;}
.res-transcript[open] summary::after{content:"Hide transcript ▴";}
.res-transcript-body{padding:0 20px 20px;font-size:14px;color:var(--text-dim);line-height:1.75;max-height:340px;overflow-y:auto;}
.res-transcript-body p{margin-bottom:14px;}
.res-transcript-body .res-ts-speaker{color:var(--text);font-weight:700;}

/* ---- Author profile / footer ---- */
.res-author-card{display:flex;gap:16px;align-items:flex-start;margin:44px 0;padding:22px;border-radius:14px;background:var(--bg-panel);border:1px solid var(--border);}
.res-author-card .persona-avatar{width:50px;height:50px;font-size:16px;margin-bottom:0;flex-shrink:0;}
.res-author-card h4{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.res-author-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin-bottom:0;}

/* ---- Related resources ---- */
.res-related{max-width:980px;margin:64px auto 0;padding-top:48px;border-top:1px solid var(--border);}
.res-related h2{font-size:24px;font-weight:800;margin-bottom:24px;}

/* ---- Prev / next nav ---- */
.res-prevnext{max-width:980px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.res-prevnext{grid-template-columns:1fr;}}
.res-prevnext a{display:block;padding:20px 22px;border-radius:12px;background:var(--bg-panel);border:1px solid var(--border);text-decoration:none;transition:border-color .2s ease,transform .2s ease;}
.res-prevnext a:hover{border-color:var(--accent);transform:translateY(-2px);}
.res-prevnext .res-pn-dir{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.res-prevnext .res-pn-next{text-align:right;}
.res-prevnext .res-pn-next .res-pn-dir{justify-content:flex-end;}
.res-prevnext .res-pn-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.4;}

/* ---- Contextual CTA ----
   Standardized on the same .cta-frame/.cta-frame-inner premium gradient
   container used for Use Case page final CTAs, so every resource-detail
   CTA now matches that component exactly (2.5px purple->blue->green ring,
   equal on all sides, dark centered panel). See .cta-frame in the FINAL CTA
   block above; .res-contextual-cta itself now only supplies the top margin
   that separates it from the Previous/Next navigation above it. */
.res-contextual-cta{max-width:820px;margin:48px auto 0;}
.res-contextual-cta .cta-frame-inner h3{font-size:20px;font-weight:800;margin-bottom:12px;}
.res-contextual-cta .cta-frame-inner p{font-size:14.5px;color:var(--text-dim);margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto;}

/* ============================================================
   CONTACT PAGE: Apollo strategy-call booking experience
   ============================================================ */
.contact-grid-booking{grid-template-columns:1fr 1.3fr;}
@media(max-width:860px){.contact-grid-booking{grid-template-columns:1fr;}}

.booking-context h2{font-size:19px;font-weight:800;margin-bottom:18px;}
.booking-explore-list{margin-bottom:24px;}
.booking-reassurance{display:flex;gap:12px;align-items:flex-start;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--text-dim);line-height:1.6;}
.booking-reassurance .booking-reassurance-icon{width:26px;height:26px;border-radius:8px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.booking-reassurance .booking-reassurance-icon svg{width:14px;height:14px;stroke:currentColor;}
.booking-reassurance strong{color:var(--text);}

/* Outer booking container - same visual weight as other major site graphics */
.booking-panel{background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:18px;padding:36px;box-shadow:0 24px 60px rgba(0,0,0,.4);max-width:100%;overflow:hidden;}
@media(max-width:560px){.booking-panel{padding:24px 20px;}}
.booking-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;}
.booking-panel-head .res-type-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);display:flex;align-items:center;gap:7px;}
.booking-panel-head .res-type-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gradient);}

/* Qualification form (reuses .form-group / .form-row) */
.booking-qual-form .form-group{margin-bottom:16px;}
.booking-privacy-note{font-size:11.5px;color:var(--text-faint);margin-top:14px;text-align:center;line-height:1.5;}
.booking-privacy-note a{color:var(--text-dim);text-decoration:underline;}

/* Shared state container */
.booking-state{width:100%;}
.booking-state[hidden]{display:none;}

/* Loading skeleton */
.booking-skeleton{border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--border);padding:20px;min-height:420px;}
.booking-skeleton-bar{height:16px;border-radius:5px;margin-bottom:22px;width:55%;}
.booking-skeleton-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.booking-skeleton-cell{aspect-ratio:1;border-radius:6px;}
.booking-skeleton-bar,.booking-skeleton-cell{background:linear-gradient(90deg,var(--bg-panel-2) 25%,var(--border-mid) 37%,var(--bg-panel-2) 63%);background-size:400% 100%;}
@media(prefers-reduced-motion:no-preference){
  .booking-skeleton-bar,.booking-skeleton-cell{animation:booking-shimmer 1.8s ease-in-out infinite;}
}
@keyframes booking-shimmer{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.booking-loading-msg{text-align:center;font-size:14px;color:var(--text-dim);margin-top:18px;}

/* Embedded Apollo scheduler mount */
.apollo-scheduler-mount{min-height:520px;width:100%;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--border);}
.apollo-scheduler-mount iframe{width:100%;height:520px;min-height:520px;border:0;display:block;}
@media(max-width:640px){.apollo-scheduler-mount,.apollo-scheduler-mount iframe{height:600px;min-height:600px;}}

/* Error / embed-failure state */
.booking-error{text-align:center;padding:56px 20px;background:var(--bg);border:1px solid var(--border);border-radius:12px;}
.booking-error p{font-size:15px;color:var(--text-dim);margin-bottom:22px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.6;}

/* Confirmation state */
.booking-confirmed{text-align:center;padding:32px 8px 8px;}
.booking-confirmed-icon{width:52px;height:52px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 20px;box-shadow:0 8px 22px rgba(139,108,255,.35);}
.booking-confirmed-icon svg{width:24px;height:24px;stroke:currentColor;}
.booking-confirmed h3{font-size:21px;font-weight:800;margin-bottom:12px;}
.booking-confirmed p{font-size:14.5px;color:var(--text-dim);line-height:1.65;max-width:420px;margin:0 auto 24px;}
.booking-confirmed-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);padding:64px 0 32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;}}
.footer-col h5{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:16px;font-weight:700;}
.footer-col a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:10px;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--border);padding-top:28px;font-size:13px;color:var(--text-faint);}

/* ============================================================
   HOMEPAGE HERO - GROWTH STRATEGY STRESS TEST GRAPHIC
   ============================================================ */
.stress-graphic-head{text-align:center;margin-bottom:22px;}
.stress-graphic-head h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;}
.stress-graphic-head p{font-size:13.5px;color:var(--text-faint);}

/* Dynamic recommendation pill above the three cards (homepage hero
   only) - replaces the old "Growth strategy comparison" static
   heading, so the row sits higher with less top padding. Reuses the
   .eyebrow-scale small-pill footprint (height/radius/padding/type)
   but with a gradient BORDER instead of a solid one, since its color
   swaps per hovered card. JS only ever swaps textContent + one state
   class - every visual state (color, glow) lives here. */
.opp-rec-pill{
  display:flex;align-items:center;justify-content:center;
  width:fit-content;margin:0 auto 18px;height:30px;padding:0 18px;
  border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:#fff;white-space:nowrap;border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;
  box-shadow:0 0 12px rgba(139,108,255,.3);
  transition:background .3s ease,box-shadow .3s ease;
}
.opp-rec-pill.state-risk{
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;
  box-shadow:0 0 12px rgba(255,95,86,.32);
}
.opp-rec-pill.state-low{
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,linear-gradient(105deg,#f4b942 0%,#ff8a3d 100%) border-box;
  box-shadow:0 0 12px rgba(244,185,66,.32);
}
@media(prefers-reduced-motion:reduce){.opp-rec-pill{transition:none;}}

/* ---------- Opportunity cards ---------- */
/* Non-interactive information cards: no links, click handlers, tab stops, or
   pressed/selected states. Neutral border by default; the gradient outline,
   glow, and brightened text appear on hover/focus, and on whichever card is
   currently ".leading" - the single automatically-rotating "active" card
   driven by nav.js (every 3s, or immediately on hover). */
.opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.opp-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:20px;cursor:default;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,opacity .3s ease;}
.opp-card:hover,.opp-card.leading{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 0 20px rgba(139,108,255,.22);}
/* Enterprise/mid-market each swap to their own gradient (hover, or when
   rotation makes them the active/".leading" card) instead of the shared
   brand one above (higher specificity than the plain .opp-card:hover/.leading). */
.opp-card[data-opp="enterprise"]:hover,.opp-card[data-opp="enterprise"].leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;box-shadow:0 0 20px rgba(255,95,86,.26);}
.opp-card[data-opp="midmarket"]:hover,.opp-card[data-opp="midmarket"].leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,linear-gradient(105deg,#f4b942 0%,#ff8a3d 100%) border-box;box-shadow:0 0 20px rgba(244,185,66,.26);}
.opp-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border);}
.opp-card-head h5{font-size:14.5px;font-weight:700;line-height:1.3;max-width:150px;color:var(--text-dim);transition:color .22s ease;}
.opp-card:hover .opp-card-head h5,.opp-card.leading .opp-card-head h5{color:#fff;}
.opp-score{font-size:24px;font-weight:800;color:var(--text);flex-shrink:0;transition:color .22s ease;}
.opp-card:hover .opp-score,.opp-card.leading .opp-score{color:#fff;}
.opp-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
.opp-metric{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--text-faint);}
.opp-metric span:first-child{text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:9.5px;transition:color .22s ease;}
.opp-metric span:last-child{font-size:13px;font-weight:700;color:var(--text-dim);transition:color .22s ease;}
.opp-card:hover .opp-metric span:first-child,.opp-card.leading .opp-metric span:first-child{color:var(--text-dim);}
.opp-card:hover .opp-metric span:last-child,.opp-card.leading .opp-metric span:last-child{color:#fff;}
@media(max-width:860px){.opp-metrics{grid-template-columns:1fr 1fr;}.opp-metric:nth-child(n+5){display:none;}}
@media(prefers-reduced-motion:reduce){.opp-card,.opp-card-head h5,.opp-score,.opp-metric span:first-child,.opp-metric span:last-child{transition:none;}}

/* Risk tag pill (mirrors compare-pill treatment) */
.risk-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;width:fit-content;}
.risk-tag.low{background:rgba(47,212,188,.12);color:var(--teal);}
.risk-tag.medium{background:rgba(244,185,66,.12);color:var(--gold);}
.risk-tag.high{background:rgba(255,111,61,.14);color:#ff8a5c;}

/* ============================================================
   HOMEPAGE - "Complete executive visibility and tracking" graphic.
   Reuses the Executive visibility page's .mockup-panel/.okr-list/
   .okr-row/.okr-track/.okr-fill/.okr-target chrome verbatim (same
   dark panel, progress bar, and target-marker treatment); .okr-obj-wrap
   places a small .risk-tag status pill (reusing the existing risk-tag
   component) directly inline after each initiative name, plus an
   optional brief risk "ping", instead of a separate row beneath the
   title. .flow-exec-mock/.flow-exec-list only tighten spacing and
   sizing for this compact homepage graphic - none of this touches the
   base .okr-* rules or layout shared with executive-visibility.html.
   ============================================================ */
.flow-exec-mock{min-height:190px;}
.flow-exec-list{gap:12px;}
.flow-exec-list .okr-top{font-size:13.5px;margin-bottom:6px;}
.flow-exec-list .okr-track{height:8px;}
.flow-exec-list .okr-target{height:14px;top:-3px;}

.okr-obj-wrap{display:flex;align-items:center;gap:8px;min-width:0;}
.okr-obj-wrap .okr-obj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.flow-exec-ping{width:7px;height:7px;border-radius:50%;background:#ff5f56;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .3s ease;box-shadow:0 0 5px rgba(255,95,86,.6);flex-shrink:0;}
.flow-exec-ping.visible{opacity:1;transform:scale(1);}

@media(prefers-reduced-motion:reduce){.flow-exec-ping{transition:none;}}

/* ---------- Opportunity comparison matrix ---------- */
.opp-matrix{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.opp-matrix-row{display:grid;grid-template-columns:1.5fr .85fr .85fr .85fr .75fr .85fr .85fr;gap:8px;align-items:center;border-radius:9px;border:1px solid var(--border);background:var(--bg);padding:10px 12px;font-size:12px;color:var(--text-dim);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.opp-matrix-head{border:none;background:transparent;padding:0 12px;color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.opp-matrix-row .opp-name{color:var(--text);font-weight:700;}
.opp-matrix-row .opp-score-cell{color:var(--text);font-weight:800;font-size:13.5px;}
.opp-matrix-row.leading{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;box-shadow:0 0 18px rgba(139,108,255,.22);}
@media(max-width:860px){
  .opp-matrix-row{grid-template-columns:1.6fr .8fr .8fr .8fr;}
  .opp-matrix-row>*:nth-child(3),.opp-matrix-row>*:nth-child(4),.opp-matrix-row>*:nth-child(6){display:none;}
}
@media(max-width:620px){.opp-matrix-panel{display:none;}}

/* ---------- AI recommendation panel ---------- */
.ai-rec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ai-rec-head h6{margin-bottom:0;}
.ai-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text-faint);font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;cursor:pointer;}
@media(max-width:860px){.ai-toggle{display:inline-block;}}
.ai-rec-body{transition:max-height .3s ease,opacity .3s ease;overflow:hidden;max-height:400px;opacity:1;}
.ai-rec-body.collapsed{max-height:0;opacity:0;}
.rec-indicators{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.tag-chip.grad{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;border:1px solid transparent;color:var(--text);}

/* ---------- Stress-test assumption sliders ---------- */
.assump-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;}
@media(max-width:640px){.assump-grid{grid-template-columns:1fr;}}
.assump-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:8px;}
.assump-label .assump-val{color:var(--text);font-weight:700;}
.assump-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--bg-panel-2);outline:none;cursor:pointer;}
.assump-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gradient);border:2px solid var(--bg);box-shadow:0 2px 8px rgba(139,108,255,.5);transition:transform .2s ease;}
.assump-slider::-webkit-slider-thumb:hover{transform:scale(1.15);}
.assump-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gradient);border:2px solid var(--bg);box-shadow:0 2px 8px rgba(139,108,255,.5);cursor:pointer;}
.assump-slider::-moz-range-progress{background:var(--gradient);height:4px;border-radius:3px;}

@media(max-width:860px){.opp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.opp-grid{grid-template-columns:1fr;}}

/* ============================================================
   HOMEPAGE - "Move From Strategic Decisions to Confident
   Execution" section. A simplified launch-roadmap dashboard:
   three timeline rows, each with one floating status pill.
   Pills are decorative (no click behavior); nav.js advances
   their position/status every 10s, then holds.
   ============================================================ */
.exec-dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;}
.exec-dash-head h3{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.exec-dash-today{font-size:11.5px;color:var(--text-faint);font-weight:600;white-space:nowrap;}

.exec-timeline{display:flex;flex-direction:column;gap:24px;}
.exec-tl-row{display:flex;flex-direction:column;gap:10px;}
.exec-tl-label{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.exec-tl-track{position:relative;height:6px;border-radius:3px;background:var(--bg-panel-2);}
.exec-tl-milestone{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--bg-panel-2);border:1.5px solid var(--border-mid);transform:translate(-50%,-50%);}
.exec-tl-milestone-label{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text-faint);white-space:nowrap;}

/* Pills sized ~18% smaller (padding/gap/font trimmed proportionally) so
   none of their content clips against the frame edge at any position
   along the timeline, including near the right end of the track. */
.exec-pill{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:999px;padding:5px 11px 5px 8px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35);cursor:default;transition:left 1.1s cubic-bezier(.4,0,.2,1),border-color .22s ease,background .22s ease,box-shadow .22s ease;}
.exec-pill:hover{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 16px rgba(139,108,255,.24);}
.exec-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.exec-pill-name{font-size:10px;font-weight:800;color:var(--text-dim);transition:color .22s ease;}
.exec-pill:hover .exec-pill-name{color:#fff;}
.exec-pill-status{font-size:8.5px;font-weight:700;color:var(--text-faint);transition:color .22s ease;}
.exec-pill:hover .exec-pill-status{color:var(--text-dim);}

.exec-pill.status-track .exec-pill-dot{background:var(--teal);box-shadow:0 0 6px rgba(47,212,188,.55);}
.exec-pill.status-ready .exec-pill-dot{background:#5b8aff;box-shadow:0 0 6px rgba(91,138,255,.55);}
.exec-pill.status-attention .exec-pill-dot{background:var(--gold);box-shadow:0 0 6px rgba(244,185,66,.55);}
.exec-pill.status-behind .exec-pill-dot{background:#ff5f56;box-shadow:0 0 6px rgba(255,95,86,.55);}

.exec-dash-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.exec-dash-progress{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text-faint);font-weight:700;}
.exec-progress-bar{flex:1;height:6px;border-radius:999px;background:var(--bg-panel-2);overflow:hidden;}
.exec-progress-fill{height:100%;background:var(--gradient);border-radius:999px;transition:width 1.1s cubic-bezier(.4,0,.2,1);}
.exec-progress-pct{color:var(--text);font-weight:800;}

@media(max-width:480px){.exec-tl-milestone-label{display:none;}.exec-pill-status{display:none;}}
@media(prefers-reduced-motion:reduce){.exec-pill,.exec-progress-fill{transition:none;}}

/* ============================================================
   HOMEPAGE - Signal Intelligence spider chart. Flat-top hexagon,
   one triangular segment per category (Sales top, Product top
   right, Infrastructure bottom right, Organizational bottom,
   Administrative bottom left, Marketing top left), labels centered
   beside their flat edge. Resting state is neutral - gray grid,
   dark segments, muted labels, no permanent color fill. Every 5s
   nav.js randomly selects a category (never repeating the previous
   one), drops a small dot at a random point inside its segment, and
   brightens that segment/label/node with a single brand accent -
   a short 200-300ms crossfade carries the chart into the next
   signal so it never sits empty. Hovering (or focusing) a
   label/segment pauses the rotation and shows that category's
   signal without navigating anywhere; rotation resumes from a new
   random category ~5s after the pointer leaves. Under
   prefers-reduced-motion the category still changes randomly every
   5s and the insight text still updates, but the dot only fades
   (no scale/pulse).
   ============================================================ */
.spider-wrap{max-width:300px;margin:0 auto;}
.spider-svg{width:100%;height:auto;overflow:visible;display:block;}

.spider-ring{fill:none;stroke:var(--border);stroke-width:1;}
.spider-ring-outer{stroke:var(--border-mid);}
.spider-spoke{stroke:var(--border);stroke-width:1;transition:stroke .25s ease;}
.spider-spoke.active{stroke:rgba(255,255,255,.4);}

.spider-segment{fill:transparent;cursor:default;outline:none;transition:fill .25s ease;}
.spider-segment.active,.spider-segment:hover{fill:rgba(139,108,255,.16);}
.spider-segment:focus-visible{fill:rgba(139,108,255,.16);}

/* Signal Intelligence chart only: the active category's background
   comes from the dedicated .spider-signal-fill polygon below (depth
   and color driven by the signal dot's position), so the shared
   flat-purple .spider-segment active/hover/focus fill used by the
   Coordination chart is turned off here to avoid a double wash. */
.signal-intel-svg .spider-segment.active,
.signal-intel-svg .spider-segment:hover,
.signal-intel-svg .spider-segment:focus-visible{fill:none;}

.spider-signal-fill{stroke:none;opacity:0;pointer-events:none;transition:opacity .25s ease,fill .25s ease;}
.spider-signal-fill.visible{opacity:1;}

.spider-label{fill:var(--text-faint);font-size:12px;font-weight:700;cursor:default;transition:fill .25s ease,font-weight .25s ease;}
.spider-label.active{fill:#fff;font-weight:800;}

.spider-signal-dot{fill:#8b6cff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);filter:drop-shadow(0 0 5px rgba(139,108,255,.65));transition:opacity .25s ease,transform .25s ease;}
.spider-signal-dot.visible{opacity:1;transform:scale(1);}

.spider-insight-panel{margin-top:24px;}
.spider-insight-body{display:flex;align-items:flex-start;gap:12px;}
.spider-insight-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;background:#8b6cff;box-shadow:0 0 6px rgba(139,108,255,.6);transition:background .25s ease,box-shadow .25s ease;}
.spider-insight-line{font-size:13px;color:var(--text-dim);line-height:1.55;}
/* Compact AI recommendation nested inside the Latest signal panel -
   .ai-callout/.ai-icon below are the same shared classes used by the
   hero graphic's recommendation, just wrapped with its own label and
   top spacing so it reads as a distinct block under the signal line. */
.spider-ai-rec{margin-top:16px;}
.spider-insight-cat{font-weight:800;color:var(--text);}

@media(max-width:480px){.spider-label{font-size:10.5px;}}
@media(prefers-reduced-motion:reduce){
  .spider-spoke,.spider-segment,.spider-label,.spider-signal-fill{transition:none;}
  .spider-signal-dot{transition:opacity .2s ease;transform:none;}
}

/* ============================================================
   HOMEPAGE COORDINATION SPIDER CHART - shares the .spider-wrap /
   .spider-svg / .spider-ring / .spider-spoke / .spider-segment /
   .spider-label chrome above (same hexagon geometry, same six
   segments, just relabeled "...lead"). The category signal dot +
   insight panel are replaced with a small circular profile avatar
   per function plus a "shared strategic plan" core at the center;
   activating a leader brightens their avatar/segment/label and
   draws an animated dashed connector from that avatar to the core.
   nav.js always keeps two or three leaders active at once (never
   just one) to show multiple teams connected through one shared
   strategy; this chart is purely decorative/non-interactive, so
   pointer events are disabled on it and it has no hover states of
   its own (unlike the Signal Intelligence chart above, which keeps
   its hover-to-pause behavior via the shared .spider-segment:hover
   rule).
   ============================================================ */
.coord-spider-svg .spider-segment,.coord-spider-svg .coord-avatar,.coord-spider-svg .spider-label{pointer-events:none;}

.coord-avatar-bg{fill:var(--bg-panel);stroke:var(--border-mid);stroke-width:1.5;transition:stroke .3s ease,filter .3s ease;}
.coord-avatar-ring{fill:none;stroke:var(--border);stroke-width:1;transition:stroke .3s ease;}
.coord-avatar-glow{fill:url(#coordGlowGrad);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.7);transition:opacity .35s ease,transform .35s ease;}
.coord-avatar-icon{color:var(--text-faint);transition:color .3s ease;}

.coord-avatar.active .coord-avatar-glow{opacity:.6;transform:scale(1);}
.coord-avatar.active .coord-avatar-bg{stroke:#8b6cff;filter:drop-shadow(0 0 7px rgba(139,108,255,.65));}
.coord-avatar.active .coord-avatar-ring{stroke:#8b6cff;}
.coord-avatar.active .coord-avatar-icon{color:#fff;}

.coord-connector{stroke:url(#coordBeamGrad);stroke-width:1.75;fill:none;stroke-linecap:round;stroke-dasharray:3 9;opacity:0;transition:opacity .3s ease;}
.coord-connector.active{opacity:1;animation:coord-flow 1.6s linear infinite;}

.coord-center-core{fill:url(#coordGlowGrad);opacity:.55;transition:opacity .3s ease;}
.coord-center-glow{fill:url(#coordGlowGrad);opacity:.16;animation:coord-pulse 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center;transition:opacity .3s ease;}

/* Every third cycle (three leaders active) briefly boosts the
   center's presence to read as broader cross-functional reach. */
.coord-center-core.boost{opacity:.72;}
.coord-center-glow.boost{opacity:.3;animation-duration:2.8s;}

@keyframes coord-flow{to{stroke-dashoffset:-24;}}
@keyframes coord-pulse{0%,100%{transform:scale(1);opacity:.13;}50%{transform:scale(1.3);opacity:.28;}}

@media(prefers-reduced-motion:reduce){
  .coord-avatar-glow,.coord-avatar-bg,.coord-avatar-ring,.coord-avatar-icon,.coord-connector,.coord-center-core,.coord-center-glow{transition:none;}
  .coord-connector.active,.coord-center-glow{animation:none;}
}

/* ============================================================
   SHIFT 5 HYBRID STRATEGY-LOOP CHART - reuses the coordination
   chart's hexagon/avatar/connector/center chrome and the signal
   chart's dot/radial-fill chrome verbatim (shared .spider-*,
   .coord-* classes above); the only new pieces are per-position
   signal dots/fills (six of each, one per category, instead of
   the single shared pair the signal chart uses) and a small
   center label. Always a 3-coordination/3-signal split, fully
   non-interactive - see nav.js.
   ============================================================ */
.hybrid-loop-svg .spider-segment,
.hybrid-loop-svg .coord-avatar,
.hybrid-loop-svg .spider-label,
.hybrid-loop-svg .hybrid-signal-dot,
.hybrid-loop-svg .hybrid-signal-fill{pointer-events:none;cursor:default;}
.hybrid-loop-svg .coord-avatar{opacity:0;transition:opacity .3s ease;}
.hybrid-loop-svg .coord-avatar.active{opacity:1;}
.hybrid-loop-svg .coord-center-glow,.hybrid-loop-svg .coord-center-core{fill:url(#hybridGlowGrad);}
.hybrid-loop-svg .coord-connector{stroke:url(#hybridBeamGrad);}
/* No browser-frame wrapper for this instance - centered within the
   right column, sitting close under the column label. */
.hybrid-loop-wrap{margin:-4px auto 0;}
.hybrid-signal-dot{fill:#8b6cff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);filter:drop-shadow(0 0 5px rgba(139,108,255,.65));transition:opacity .25s ease,transform .25s ease;}
.hybrid-signal-dot.visible{opacity:1;transform:scale(1);}
.hybrid-signal-fill{stroke:none;opacity:0;pointer-events:none;transition:opacity .25s ease,fill .25s ease;}
.hybrid-signal-fill.visible{opacity:1;}
.hybrid-center-label{fill:var(--text-faint);font-size:8.5px;font-weight:700;letter-spacing:.02em;pointer-events:none;}
@media(prefers-reduced-motion:reduce){
  .hybrid-loop-svg .coord-avatar,.hybrid-signal-dot,.hybrid-signal-fill{transition:none;}
}

/* ============================================================
   CONNECTED ECOSYSTEM / INTEGRATIONS - a single row of four
   squared category cards, reusing the "Start where your strategy
   needs it most" four-column phase-grid pattern at one row instead
   of stacked phase blocks. Each card lists its category's tools as
   plain text-label chips (not reproduced third-party logo artwork)
   in a wrapping row.
   ============================================================ */
.integ-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.integ-cat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.integ-cat-grid{grid-template-columns:1fr;}}
.integ-cat-card{display:flex;flex-direction:column;background:var(--bg-panel);border:1.5px solid var(--border);border-radius:10px;padding:24px 22px;transition:border-color .25s ease,box-shadow .25s ease;}
.integ-cat-card:hover{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 20px rgba(139,108,255,.18);}
.integ-cat-card h4{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:8px;}
/* Fixed-height copy block (all four cards' copy wraps to the same
   3 lines at this card width) so every card's pill row starts at an
   identical distance from the top - not bottom-anchored, since
   bottom-anchoring would misalign the first row whenever cards end
   up with a different total number of wrapped pill rows. */
.integ-cat-card p{font-size:13.5px;color:var(--text-dim);line-height:1.55;min-height:63px;margin-bottom:16px;}
.integ-logo-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;}
.integ-logo-chip{display:inline-flex;align-items:center;height:28px;font-size:12px;font-weight:600;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:7px;padding:0 10px;line-height:1;white-space:nowrap;}
/* Tool-pill color accents - same dark-gray interior/height/padding/
   radius/typography as the base chip above, just a colored border,
   faint tinted background layer, and subtle glow, drawn from the
   existing brand palette (gold/teal/blue/purple) rather than a new one.
   Text stays white/near-white, never the tint color, so labels read
   clearly against the dark chip. */
.integ-logo-chip.chip-gold{color:#fff;background-color:var(--bg-panel-2);background-image:linear-gradient(rgba(244,185,66,.12),rgba(244,185,66,.12));border-color:rgba(244,185,66,.45);box-shadow:0 0 8px rgba(244,185,66,.22);}
.integ-logo-chip.chip-teal{color:#fff;background-color:var(--bg-panel-2);background-image:linear-gradient(rgba(47,212,188,.12),rgba(47,212,188,.12));border-color:rgba(47,212,188,.45);box-shadow:0 0 8px rgba(47,212,188,.22);}
.integ-logo-chip.chip-blue{color:#fff;background-color:var(--bg-panel-2);background-image:linear-gradient(rgba(91,138,255,.12),rgba(91,138,255,.12));border-color:rgba(91,138,255,.45);box-shadow:0 0 8px rgba(91,138,255,.22);}
.integ-logo-chip.chip-purple{color:#fff;background-color:var(--bg-panel-2);background-image:linear-gradient(rgba(139,108,255,.12),rgba(139,108,255,.12));border-color:rgba(139,108,255,.45);box-shadow:0 0 8px rgba(139,108,255,.22);}

/* ============================================================
   CUSTOMER TESTIMONIALS - rotating carousel over a flat list of six
   .testi-card elements (no pair wrapper). nav.js pages through them
   two at a time on desktop and one at a time on mobile, toggling
   .active per card and rebuilding the dot count for the current
   page size (3 dots desktop, 6 dots mobile) - see nav.js. Cards use
   height:auto (no fixed/min-height) so longer quotes never clip.
   ============================================================ */
.testi-carousel{max-width:1080px;margin:0 auto;}
.testi-track{position:relative;min-height:1px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.testi-card{display:none;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px 26px;flex-direction:column;}
.testi-card.active{display:flex;animation:testi-fade-in .35s ease;}
@keyframes testi-fade-in{from{opacity:0;}to{opacity:1;}}
.testi-quote{font-size:15.5px;color:var(--text);line-height:1.65;margin-bottom:22px;}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:auto;}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-panel-2);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;}
.testi-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.testi-name{font-size:14px;font-weight:700;color:var(--text);}
.testi-role{font-size:12.5px;color:var(--text-faint);}
.testi-tag{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);background:rgba(47,212,188,.1);border:1px solid rgba(47,212,188,.3);border-radius:999px;padding:4px 12px;align-self:flex-start;}
@media(max-width:640px){
  .testi-track{grid-template-columns:1fr;}
}

.testi-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px;}
.testi-nav{width:40px;height:40px;border-radius:50%;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,color .2s ease;flex-shrink:0;}
.testi-nav svg{width:18px;height:18px;}
.testi-nav:hover,.testi-nav:focus-visible{border-color:#8b6cff;color:#fff;outline:none;}
.testi-dots{display:flex;align-items:center;gap:8px;}
.testi-dot{width:8px;height:8px;border-radius:50%;background:var(--border-mid);border:none;padding:0;cursor:pointer;transition:background .25s ease,transform .25s ease;}
.testi-dot.active{background:var(--gradient);transform:scale(1.3);}
.testi-dot:focus-visible{outline:2px solid #8b6cff;outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  .testi-card.active{animation:none;}
  .testi-dot{transition:none;}
}

/* ============================================================
   PRICING QUESTIONS - accordion with gradient hover/focus/open state
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;}
.faq-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.faq-item:hover,.faq-item:focus-within{transform:translateY(-3px);}
.faq-item:hover,.faq-item:focus-within,.faq-item.open{
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);
}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:none;border:none;text-align:left;cursor:pointer;font:inherit;color:var(--text);}
.faq-question:focus-visible{outline:none;}
.faq-question h4{font-size:15.5px;font-weight:700;transition:filter .25s ease;}
.faq-icon{flex-shrink:0;width:20px;height:20px;color:var(--text-faint);transition:transform .3s ease,color .25s ease,filter .25s ease;}
.faq-item:hover .faq-question h4,.faq-item:focus-within .faq-question h4,.faq-item.open .faq-question h4{filter:brightness(1.2);}
.faq-item:hover .faq-icon,.faq-item:focus-within .faq-icon,.faq-item.open .faq-icon{color:var(--text);filter:brightness(1.3);}
.faq-item.open .faq-icon{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 24px;}
.faq-item.open .faq-answer{max-height:480px;padding:0 24px 22px;}
.faq-answer p{font-size:14px;color:var(--text-dim);line-height:1.65;}
.faq-answer p:first-child{border-top:1px solid var(--border);padding-top:16px;}
.faq-answer p + p{margin-top:12px;}

/* ============================================================
   ABOUT PAGE - Intro Story (45/55 split)
   ============================================================ */
.intro-story-grid{display:grid;grid-template-columns:45fr 55fr;gap:52px;align-items:center;}
@media(max-width:900px){.intro-story-grid{grid-template-columns:1fr;gap:36px;}}
.intro-story-copy .pre{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:700;margin-bottom:16px;}
.intro-story-copy h2{font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin-bottom:16px;}
.intro-story-copy p{font-size:15.5px;color:var(--text-dim);line-height:1.7;margin-bottom:22px;}
.intro-story-visual .browser-frame{max-width:520px;margin:0 auto;}
.intro-story-visual .tl2-photo{max-width:520px;margin:0 auto;}

/* Homepage-only wide variant (Strategy to Execution graphic): balances
   the copy and visual columns close to even and top-aligns them so the
   headline and graphic start at the same height. Additive - the base
   .intro-story-grid ratio/alignment and .browser-frame max-width used by
   about.html's photo are untouched. */
.intro-story-grid--wide{grid-template-columns:48fr 52fr;align-items:start;}
@media(max-width:900px){.intro-story-grid--wide{grid-template-columns:1fr;}}
.intro-story-grid--wide .intro-story-visual .browser-frame{max-width:600px;}

/* Alternating homepage rhythm: mirrors the 48fr/52fr column ratio so
   the graphic keeps its exact width, and forces visual-then-copy grid
   placement via `order` (independent of source order in the markup)
   so no copy/graphic content has to move. Falls back to the normal
   single-column stack on mobile like the rest of .intro-story-grid. */
.intro-story-grid--wide.intro-story-grid--flip{grid-template-columns:52fr 48fr;}
.intro-story-grid--flip .intro-story-visual{order:1;}
.intro-story-grid--flip .intro-story-copy{order:2;}
@media(max-width:900px){
  .intro-story-grid--flip .intro-story-visual,
  .intro-story-grid--flip .intro-story-copy{order:initial;}
}

/* Data-flow connectors linking all eight homepage workflow graphics in
   sequence inside one shared wrapper, #flowConnectorZone: Define your
   growth strategy -> Surface strategic intelligence -> Validate
   insights and strategy with world-class experts -> Build a
   differentiated strategy -> Transform strategic decisions into
   tactical plans -> Coordinate execution across every team -> Complete
   executive visibility and tracking -> Continuous and contextual
   intelligence. The zone wraps every section in that sequence with
   position:relative so its single overlay SVG (sized/placed by nav.js
   from each pair of browser-frames' actual measured positions) can
   span the gaps between them; every path is the same dotted, softly
   rounded orthogonal line with a small gradient node at each end, so
   the whole sequence reads as one continuous system. Hidden below
   900px, where the sections collapse to a single stacked column and
   the graphics no longer sit side-by-side. */
.flow-connector-zone{position:relative;z-index:0;}
.flow-connector-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;}
.flow-connector-path{fill:none;stroke:url(#flowConnectorGrad);stroke-width:1.75;stroke-linecap:round;stroke-dasharray:1 7;animation:flow-connector-dash 1.4s linear infinite;}
.flow-connector-dot{fill:#8b6cff;filter:drop-shadow(0 0 4px rgba(139,108,255,.6));}
@keyframes flow-connector-dash{to{stroke-dashoffset:-16;}}
@media(prefers-reduced-motion:reduce){.flow-connector-path{animation:none;}}
@media(max-width:900px){.flow-connector-svg{display:none;}}

/* Executive visibility -> Continuous and contextual intelligence:
   dedicated connector, in its own overlay SVG (#flowExecIntelSvg) so
   it can stay visible and reroute independently on mobile while every
   other connector above is hidden. Same dotted purple->blue->green
   line/node treatment as the rest of the sequence - no background
   beam or glow behind it. */
.flow-exec-intel-svg{z-index:-1;}
@media(max-width:900px){.flow-exec-intel-svg{display:block;}}
@media(prefers-reduced-motion:reduce){.flow-exec-intel-svg .flow-connector-path{animation:none;}}

/* Scoped to the execution graphic only (not the spider-chart section,
   which also uses .browser-frame--lg) - slightly more consistent
   internal padding now that the column is narrower. */
.browser-frame--exec .product-mockup{padding:26px 26px;}
.browser-frame--lg .product-mockup{padding:28px 26px;}

/* ============================================================
   HOMEPAGE - Why Global Copilot mini comparison
   Sits outside the data-flow connector zone (no dotted connector,
   no workflow beam). Dark panel columns, thin neutral borders, the
   shared .cmp-ind check/x indicator reused verbatim from the pricing
   comparison table, and the standard gradient reserved for the
   Global Copilot column only - no full gradient section background.
   ============================================================ */
.why-cmp-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;border:1px solid var(--border-mid);border-radius:16px;overflow:hidden;align-items:stretch;}
.why-cmp-col{padding:28px 24px;background:var(--bg-panel);border-right:1px solid var(--border-mid);text-align:left;display:flex;flex-direction:column;}
.why-cmp-col:last-child{border-right:none;}
.why-cmp-col.why-cmp-gc{background:linear-gradient(160deg,var(--bg-panel) 0%,rgba(139,108,255,.09) 100%);}
.why-cmp-head{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--border);text-align:left;}
.why-cmp-label{font-size:14px;font-weight:600;color:var(--text-dim);letter-spacing:.01em;text-align:left;transition:color .3s ease,text-shadow .3s ease;}
.why-cmp-badge{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--gradient);color:#fff;border-radius:20px;padding:3px 10px;}
.why-cmp-badge-bottom{margin-top:18px;}
.why-cmp-gc-title{font-size:17px;font-weight:700;color:#fff;text-align:left;}
.why-cmp-rows{list-style:none;display:flex;flex-direction:column;gap:13px;text-align:left;}
.why-cmp-rows li{font-size:14px;line-height:1.55;color:var(--text-dim);display:flex;gap:9px;align-items:flex-start;text-align:left;transition:color .3s ease;}
.why-cmp-gc .why-cmp-rows li{color:rgba(255,255,255,.8);}
.why-cmp-rows li strong{color:var(--text);}
@media(max-width:900px){.why-cmp-col{padding:22px 18px;}}
@media(max-width:680px){
  .why-cmp-grid{grid-template-columns:1fr;border-radius:14px;}
  .why-cmp-col{border-right:none;border-bottom:1px solid var(--border-mid);}
  .why-cmp-col:last-child{border-bottom:none;}
}

/* Traditional consulting / ChatGPT & Claude columns - neutral by
   default, same red-orange treatment as the pricing comparison
   table's column hover (.pcmp.col-hover-trad/-ai): a 3px gradient-
   danger top edge, a faint red-orange background wash over the same
   dark panel, brighter label text, brighter body copy, and brighter
   indicator icons - never a solid gradient fill, never a resize or
   position change. Triggers on hover, keyboard focus, or tap
   (:focus-within) so it also works on touch/tablet. The Global
   Copilot column is excluded and keeps its permanent purple-blue-
   green treatment regardless of hover state. */
.why-cmp-col:not(.why-cmp-gc){position:relative;transition:background .3s ease,box-shadow .3s ease;}
.why-cmp-col:not(.why-cmp-gc):focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.why-cmp-col:not(.why-cmp-gc):hover,
.why-cmp-col:not(.why-cmp-gc):focus-within{
  background:linear-gradient(180deg,rgba(255,95,86,.1),rgba(255,138,61,.05));
}
.why-cmp-col:not(.why-cmp-gc):hover::before,
.why-cmp-col:not(.why-cmp-gc):focus-within::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-danger);
}
.why-cmp-col:not(.why-cmp-gc):hover .why-cmp-label,
.why-cmp-col:not(.why-cmp-gc):focus-within .why-cmp-label{
  color:var(--text);
  background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:0 0 14px rgba(255,111,61,.4);
}
.why-cmp-col:not(.why-cmp-gc):hover .why-cmp-rows li,
.why-cmp-col:not(.why-cmp-gc):focus-within .why-cmp-rows li{color:var(--text);}
.why-cmp-col:not(.why-cmp-gc):hover .cmp-ind,
.why-cmp-col:not(.why-cmp-gc):focus-within .cmp-ind{filter:brightness(1.35);}

/* ============================================================
   HOMEPAGE - The five shifts defining the future of strategy
   Editorial accordion sequence (not generic cards): one shift open
   at a time, dark interior by default, gradient outline only on
   hover/focus/open (border-box trick, no gradient fill), reusing the
   same pattern as .faq-item elsewhere on the site. Also sits outside
   the connector zone.
   ============================================================ */
.shifts-intro{max-width:720px;margin-bottom:56px;}
.shifts-intro h2{max-width:640px;font-size:36px;font-weight:800;letter-spacing:-.015em;margin-bottom:14px;line-height:1.2;}
.shifts-intro p{max-width:600px;font-size:16px;color:var(--text-dim);line-height:1.65;}
@media(max-width:768px){.shifts-intro h2{font-size:26px;max-width:none;}.shifts-intro p{max-width:none;}}
.shift-list{display:flex;flex-direction:column;gap:14px;}
.shift-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease;}
.shift-item:hover,.shift-item:focus-within,.shift-item.open{
  border-color:transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);
}
.shift-header{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;padding:20px 24px;gap:16px;background:none;border:none;text-align:left;cursor:pointer;font:inherit;color:inherit;}
.shift-header:focus-visible{outline:none;}
@media(max-width:640px){.shift-header{grid-template-columns:34px 1fr auto;padding:16px 18px;gap:10px;}}
.shift-num{font-size:24px;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;text-align:center;transition:filter .25s ease;}
.shift-item:hover .shift-num,.shift-item:focus-within .shift-num,.shift-item.open .shift-num{filter:brightness(1.3);}
.shift-meta{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:var(--text-faint);-webkit-text-fill-color:var(--text-faint);transition:color .25s ease,-webkit-text-fill-color .25s ease;}
.shift-item:hover .shift-meta,.shift-item:focus-within .shift-meta,.shift-item.open .shift-meta{color:transparent;-webkit-text-fill-color:transparent;}
.shift-title{font-size:17px;font-weight:700;line-height:1.25;color:var(--text);}
@media(max-width:640px){.shift-title{font-size:15.5px;}}
.shift-from-to{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.shift-from{font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;color:#fff;}
.shift-arrow{color:var(--teal);font-size:14px;font-weight:700;}
.shift-to{font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,linear-gradient(105deg,#2fd4bc 0%,#5b8aff 50%,#8b6cff 100%) border-box;color:#fff;}
.shift-item:hover .faq-icon,.shift-item:focus-within .faq-icon,.shift-item.open .faq-icon{color:var(--text);filter:brightness(1.3);}
.shift-item.open .faq-icon{transform:rotate(180deg);}
.shift-body{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 24px;border-top:1px solid var(--border);}
.shift-item.open .shift-body{max-height:2400px;padding:0 24px 28px;}
@media(max-width:640px){.shift-body{padding:0 18px;}.shift-item.open .shift-body{padding:0 18px 22px;}}
.shift-body-inner{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px;}
@media(max-width:768px){.shift-body-inner{grid-template-columns:1fr;}}
.shift-col{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:12px;padding:24px;}
.shift-col-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.shift-col.today .shift-col-label{color:var(--text-faint);}
.shift-col.future .shift-col-label{color:var(--teal);}
.shift-col ul{list-style:none;}
.shift-col ul li{font-size:14px;color:var(--text-dim);padding:8px 0 8px 18px;position:relative;border-top:1px solid var(--border);line-height:1.5;}
.shift-col ul li:first-child{border-top:none;}
.shift-col.today ul li::before{content:"\00b7";position:absolute;left:0;color:var(--text-faint);font-size:18px;line-height:1.3;}
.shift-col.future ul li::before{content:"\2192";position:absolute;left:0;color:var(--teal);font-size:12px;font-weight:700;top:8px;}
.shift-col p{font-size:14px;color:var(--text-dim);line-height:1.65;transition:filter .25s ease;}
.shift-item.open .shift-col p{filter:brightness(1.1);}
.shift-insight{background:rgba(139,108,255,.07);border:1px solid rgba(139,108,255,.2);border-radius:10px;padding:16px 20px;margin-top:20px;font-size:14px;color:var(--text-dim);line-height:1.65;transition:filter .25s ease;}
.shift-insight strong{color:var(--text);}
.shift-item.open .shift-insight{filter:brightness(1.1);}
@media(prefers-reduced-motion:reduce){.shift-item,.shift-body,.faq-icon,.shift-num,.shift-meta,.shift-col p,.shift-insight{transition:none;}}
/* Shift 1 expanded content - scoped one-off treatment, does not affect shifts 2-5 */
#shift-body-1 .shift-col.today .shift-col-label{background:var(--gradient-danger);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#shift-body-1 .shift-col.future .shift-col-label{background:linear-gradient(105deg,#2fd4bc 0%,#5b8aff 50%,#8b6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#shift-body-1 .shift-col{display:flex;flex-direction:column;}
#shift-body-1 .shift-col .shift-final-line{margin-top:auto;padding-top:14px;}
/* Shift 2 expanded content - scoped one-off treatment, does not affect other shifts */
#shift-body-2 .shift-col.today .shift-col-label{background:var(--gradient-danger);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#shift-body-2 .shift-col.future .shift-col-label{background:linear-gradient(105deg,#2fd4bc 0%,#5b8aff 50%,#8b6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
/* Shifts 3-5 expanded content - same scoped today/tomorrow gradient heading treatment */
#shift-body-3 .shift-col.today .shift-col-label,
#shift-body-4 .shift-col.today .shift-col-label,
#shift-body-5 .shift-col.today .shift-col-label{background:var(--gradient-danger);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#shift-body-3 .shift-col.future .shift-col-label,
#shift-body-4 .shift-col.future .shift-col-label,
#shift-body-5 .shift-col.future .shift-col-label{background:linear-gradient(105deg,#2fd4bc 0%,#5b8aff 50%,#8b6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
/* Shift 5 hybrid graphic - tighter gap under the column label, and the
   shared blue insight box gets a single centered white line instead of
   the default left-aligned bold+plain copy used by the other shifts. */
#shift-body-5 .shift-col.future .shift-col-label{margin-bottom:6px;padding-bottom:6px;}
#shift-body-5 .shift-insight{text-align:center;color:var(--text);}

/* ============================================================
   ABOUT PAGE - Vertical Milestone Timeline
   ============================================================ */
.tl2-intro{text-align:center;max-width:640px;margin:0 auto 8px;}
.tl2-intro .pre{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:700;margin-bottom:16px;}

.tl2-track{position:relative;max-width:1080px;margin:56px auto 0;}
.tl2-track::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--border-mid) 6%,var(--border-mid) 94%,transparent);}
@media(max-width:900px){.tl2-track::before{left:19px;}}

.tl2-row{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;grid-template-areas:"a marker b";align-items:center;padding:44px 0;}
.tl2-row:first-child{padding-top:0;}
.tl2-row:last-child{padding-bottom:0;}
@media(max-width:900px){
  .tl2-row{grid-template-columns:40px 1fr;grid-template-areas:"marker a" "marker b";row-gap:20px;align-items:start;padding:32px 0;}
}

.tl2-col,.tl2-visual{padding:0 40px;}
@media(max-width:900px){.tl2-col,.tl2-visual{padding:0;}}
[data-tl-side="a"]{grid-area:a;}
[data-tl-side="b"]{grid-area:b;}

.tl2-marker-col{grid-area:marker;position:relative;display:flex;align-items:center;justify-content:center;}
@media(max-width:900px){.tl2-marker-col{padding-top:4px;}}
.tl2-marker-col::before,.tl2-marker-col::after{content:"";position:absolute;top:50%;width:28px;height:1px;background:var(--border-mid);}
.tl2-marker-col::before{right:100%;}
.tl2-marker-col::after{left:100%;}
@media(max-width:900px){.tl2-marker-col::before,.tl2-marker-col::after{display:none;}}
.tl2-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;background:var(--gradient);box-shadow:0 0 0 6px var(--bg),0 0 22px rgba(139,108,255,.45);position:relative;z-index:1;}

.tl2-year{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;}
.tl2-col h3{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px;}
.tl2-col p{font-size:15px;color:var(--text-dim);line-height:1.7;}
.tl2-visual .browser-frame{max-width:440px;margin:0;}
@media(max-width:900px){.tl2-visual .browser-frame{max-width:100%;}}

.tl2-photo{
  display:block;width:100%;max-width:440px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 26px rgba(139,108,255,.28);
}
@media(max-width:900px){.tl2-photo{max-width:100%;}}

/* Scroll-triggered fade + converge-to-center slide (skipped for reduced-motion users) */
@media(prefers-reduced-motion:no-preference){
  .tl2-row{opacity:0;transition:opacity .7s ease;}
  .tl2-row [data-tl-side]{transition:transform .7s cubic-bezier(.4,0,.2,1);}
  .tl2-row [data-tl-side="a"]{transform:translateX(-26px);}
  .tl2-row [data-tl-side="b"]{transform:translateX(26px);}
  .tl2-row.in-view{opacity:1;}
  .tl2-row.in-view [data-tl-side="a"],.tl2-row.in-view [data-tl-side="b"]{transform:translateX(0);}
  @media(max-width:900px){
    .tl2-row [data-tl-side]{transform:translateY(16px) !important;}
    .tl2-row.in-view [data-tl-side]{transform:translateY(0) !important;}
  }
}

/* ============================================================
   ABOUT PAGE - Final Mission Section
   ============================================================ */
.mission-final{position:relative;text-align:center;overflow:hidden;}
.mission-final::before{
  content:"";position:absolute;top:50%;left:50%;width:900px;height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,108,255,.14) 0%,rgba(91,138,255,.08) 35%,transparent 70%);
  pointer-events:none;z-index:0;
}
.mission-final .wrap{position:relative;z-index:1;}
.mission-final h2{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px;}
.mission-final p{font-size:17px;color:var(--text-dim);max-width:600px;margin:0 auto;line-height:1.7;}

/* Homepage duplicate of the section above (same .mission-final base -
   layout/graphic/spacing/hover all shared). Bumped to the 40px scale
   used by other dominant homepage titles (e.g. .final-cta h2) with a
   touch more spacing above/below, so the headline reads as the
   section's single focal point against the still-secondary supporting
   copy. The About-page original is untouched. */
.hp-mission-focal h2{font-size:40px;margin-top:4px;margin-bottom:24px;}

/* ============================================================
   CERTIFICATION PAGE - step-flow + audience card grid
   ============================================================ */
.step-flow{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.step-item{display:flex;align-items:center;gap:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:22px 28px;width:100%;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.step-item:hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.24);}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--gradient);color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px rgba(139,108,255,.35);}
.step-body h4{font-size:16px;font-weight:700;line-height:1.4;}
.step-connector{font-size:20px;color:var(--text-faint);padding:10px 0;line-height:1;}

.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:860px){.aud-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.aud-grid{grid-template-columns:1fr;}}
.aud-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:26px 18px;text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.aud-card:hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.24);}
.aud-icon{width:44px;height:44px;border-radius:12px;background:var(--bg-panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);margin:0 auto 14px;}
.aud-icon svg{width:20px;height:20px;stroke:currentColor;}
.aud-card h5{font-size:14.5px;font-weight:700;line-height:1.35;}

/* ============================================================
   ABOUT PAGE - "Strategy Software Gap" graphic
   Left: 2x2 grid of purpose-built function cards. Right: one
   full-height red/orange Strategy Teams panel spanning both rows.
   ============================================================ */
.gap-headline-danger{
  background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.gap-row{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:stretch;max-width:1180px;margin:0 auto;}
@media(max-width:1024px){.gap-row{grid-template-columns:1fr;}}

.gap-func-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:16px;}
@media(max-width:640px){.gap-func-grid{grid-template-columns:1fr;grid-template-rows:none;}}

/* --- Function cards (HR / Finance / Marketing / Sales) --- */
.gap-func-card{position:relative;display:flex;flex-direction:column;border-radius:14px;padding:20px 18px;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,linear-gradient(rgba(139,108,255,.35),rgba(47,212,188,.2)) border-box;border:1.5px solid transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;}
.gap-func-card:hover,.gap-func-card:focus-visible,.gap-func-card.tap-active{
  transform:translateY(-3px);
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;
  box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 20px rgba(139,108,255,.26);
  outline:none;
}
.gap-func-icon{width:34px;height:34px;border-radius:9px;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;flex-shrink:0;box-shadow:0 4px 12px rgba(91,138,255,.28);transition:filter .25s ease;}
.gap-func-icon svg{width:17px;height:17px;stroke:currentColor;}
.gap-func-card:hover .gap-func-icon,.gap-func-card:focus-visible .gap-func-icon,.gap-func-card.tap-active .gap-func-icon{filter:brightness(1.25);}
.gap-func-card h5{font-size:14.5px;font-weight:700;margin-bottom:4px;transition:filter .25s ease;}
.gap-func-card:hover h5,.gap-func-card:focus-visible h5,.gap-func-card.tap-active h5{filter:brightness(1.2);}
.gap-func-system{font-size:12px;color:var(--text-dim);margin-bottom:10px;transition:color .25s ease;}
.gap-func-card:hover .gap-func-system,.gap-func-card:focus-visible .gap-func-system,.gap-func-card.tap-active .gap-func-system{color:var(--text);}
.gap-func-status{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;background:rgba(47,212,188,.1);color:var(--teal);border:1px solid rgba(47,212,188,.2);align-self:flex-start;}

.gap-func-tasks{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease;font-size:12px;color:var(--text-faint);line-height:1.5;}
.gap-func-card:hover .gap-func-tasks,.gap-func-card:focus-visible .gap-func-tasks,.gap-func-card.tap-active .gap-func-tasks{max-height:60px;opacity:1;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}

/* --- Strategy Teams panel: red/orange "no purpose-built system" --- */
.gap-strategy-card{
  position:relative;display:flex;flex-direction:column;justify-content:center;border-radius:14px;padding:28px 26px;
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 22px rgba(255,111,61,.24);
}
.gap-strategy-header{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:12px;}
.gap-strategy-statement{
  font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:24px;
  background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.gap-strategy-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.gap-strategy-tool-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-dim);}
.gap-strategy-tool-icon{width:26px;height:26px;border-radius:7px;background:var(--bg-panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex-shrink:0;}
.gap-strategy-tool-icon svg{width:13px;height:13px;stroke:currentColor;}

.gap-strategy-challenges{list-style:none;margin:0;margin-top:auto;padding:0;display:flex;flex-direction:column;gap:10px;}
.gap-strategy-challenges li{display:flex;align-items:center;font-size:12.5px;color:var(--text-faint);line-height:1.5;}

/* Homepage-only additions: "Strategy" title + large red X + "PowerPoint"
   label used above the same .gap-strategy-challenges list on the new
   "Sales Has CRM..." homepage section. Additive only - about.html's
   .gap-strategy-header/.gap-strategy-statement/.gap-strategy-tools are
   untouched and still used there exactly as before. */
.gap-strategy-title{font-size:20px;font-weight:800;letter-spacing:-.01em;text-align:center;margin-bottom:20px;}
.gap-strategy-bigx{font-size:56px;font-weight:800;line-height:1;text-align:center;background:var(--gradient-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;}
.gap-strategy-sublabel{font-size:15px;font-weight:700;color:var(--text-dim);text-align:center;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);}

/* Homepage-only: simplified "Sales Has CRM..." strategy panel - just
   the three legacy tools, centered horizontally and vertically inside
   the same .gap-strategy-card used above. Additive only. Icon
   containers match the left-hand .gap-func-icon's dimensions/radius
   (34px, 9px), but with a dark interior + thin red-orange gradient
   outline (echoing the box's own outline treatment) instead of a
   solid color fill, since the icon glyphs themselves now carry the
   red-orange gradient as a filled shape. */
.gap-tools-trio{display:flex;align-items:center;justify-content:center;gap:32px;}
@media(max-width:640px){.gap-tools-trio{gap:20px;}}
.gap-tool{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:default;outline:none;}
.gap-tool-icon{width:51px;height:51px;border-radius:13.5px;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;border:1.5px solid transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(255,111,61,.18);transition:filter .25s ease,box-shadow .25s ease;}
.gap-tool-icon svg{width:25.5px;height:25.5px;}
.gap-tool:hover .gap-tool-icon,.gap-tool:focus-visible .gap-tool-icon{filter:brightness(1.18);box-shadow:0 4px 14px rgba(255,111,61,.4),0 0 16px rgba(255,111,61,.32);}
.gap-tool-name{font-size:19.5px;font-weight:700;color:var(--text);text-align:center;}

/* Legacy-tool negative pill, placed directly beneath the PowerPoint/
   Excel/Word icons above. Reuses the exact .gap-func-status pill shell
   (radius/height/padding/typography) from the "Purpose-built platform"
   pills on the left, and the exact .cmp-ind.none X-icon already used
   elsewhere on the site - just recolored to a dark interior with the
   card's own red-orange gradient outline instead of the shared teal
   fill, so the two pills read as a clear positive/negative contrast. */
.gap-func-status.status-danger{
  align-self:center;margin-top:18px;color:#fff;
  font-size:12px;padding:5px 14px;
  border:1px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;
}

/* ============================================================
   HOMEPAGE - "How Global Copilot Changes Strategy": three
   consecutive sections, each reusing the exact same two-column
   layout as "Transform Strategic Decisions Into Tactical Plans"
   (.intro-story-grid.intro-story-grid--wide, .intro-story-copy,
   .browser-frame.browser-frame--lg.browser-frame--exec). Only the
   .flow-mock-* content INSIDE each .product-mockup is new; no
   shared layout/browser-frame rules are touched, so all three
   graphics share identical dimensions automatically.
   ============================================================ */
.flow-mock{min-height:236px;display:flex;flex-direction:column;justify-content:center;gap:14px;}

/* Stage 2's graphic keeps just the blue ai-callout box below the
   metric grid (no title text, no outer mockup-panel card behind it),
   so it needs a bit less height than with that extra panel wrapper. */
.flow-insight-mock{min-height:180px;}

/* Stage 1 - strategic input (typed prompt -> Analyze button -> status) */
.flow-agent-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-dim);}
.flow-agent-brand img{width:14px;height:18px;}
.flow-prompt-box{background:var(--bg);border:1px solid var(--border-mid);border-radius:10px;padding:14px 16px;min-height:64px;font-size:13px;color:var(--text);line-height:1.55;}
.flow-caret{display:inline-block;width:2px;height:14px;background:var(--teal);margin-left:2px;vertical-align:-2px;animation:flowCaretBlink 1s step-end infinite;}
@keyframes flowCaretBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.flow-analyze-btn{position:relative;width:100%;gap:8px;transition:opacity .15s,box-shadow .3s ease;}
.flow-btn-spinner{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;flex-shrink:0;}
.flow-analyze-btn.is-analyzing{box-shadow:0 0 0 3px rgba(139,108,255,.22),0 8px 20px rgba(139,108,255,.3);}
.flow-analyze-btn.is-analyzing .flow-btn-spinner{display:inline-block;animation:flowSpin .8s linear infinite;}
@keyframes flowSpin{to{transform:rotate(360deg);}}
.flow-status-panel{min-height:20px;display:flex;align-items:center;justify-content:center;text-align:center;}
.flow-status-msg{font-size:12px;color:var(--text-faint);font-weight:600;transition:opacity .35s ease;}
.flow-status-msg.is-hidden{opacity:0;}

/* Stage 2 - surfaced strategic intelligence (fades in) */
.flow-insight-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.flow-insight-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.flow-insight-card span:first-child{font-size:10px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.flow-fade-item{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;}
.flow-fade-item.visible{opacity:1;transform:translateY(0);}

/* Stage 3 - strategy configurator: four rows of three equal-width
   selection buttons (Customer segment / Value proposition / Channel
   / Product), each row landing on one randomly-chosen option in
   sequence, then a "Build strategy" button that runs a build cycle.
   Selected options get a gradient outline (border-box trick, no
   gradient fill) over the same dark interior as the unselected
   state, plus a soft glow - never a solid gradient background. */
.flow-config-row{display:flex;flex-direction:column;}
.flow-config-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.flow-config-opt{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 6px;font-size:12px;font-weight:600;color:var(--text-dim);text-align:center;font-family:inherit;cursor:pointer;transition:border-color .25s ease,color .25s ease,box-shadow .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flow-config-opt:hover{border-color:var(--border-mid);color:var(--text);}
.flow-config-opt:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.flow-config-opt.selected{color:#fff;border-color:transparent;background-image:linear-gradient(var(--bg),var(--bg)),var(--gradient);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 0 1px rgba(139,108,255,.12),0 4px 14px rgba(91,138,255,.28);}

.flow-config-btn{width:100%;gap:8px;margin-top:2px;transition:opacity .2s ease,box-shadow .3s ease;}
.flow-config-btn:disabled{opacity:.45;cursor:default;}
.flow-config-btn.is-building{box-shadow:0 0 0 3px rgba(139,108,255,.22),0 8px 20px rgba(139,108,255,.3);}
.flow-config-btn.is-building .flow-btn-spinner{display:inline-block;animation:flowSpin .8s linear infinite;}

@media(max-width:480px){
  .flow-config-options{gap:6px;}
  .flow-config-opt{padding:8px 4px;font-size:11px;}
}

@media(prefers-reduced-motion:reduce){
  .flow-caret{animation:none;opacity:1;}
  .flow-btn-spinner{animation:none;}
  .flow-status-msg{transition:none;}
  .flow-fade-item{transition:none;}
  .flow-config-opt{transition:none;}
}

/* ============================================================
   PARTNER PAGES — Global Tracking Map
   Abstract "reporting dashboard" map (grid + glow zones, not real
   cartography) with hoverable/clickable market pins, routes, a
   legend, filters, and a detail/AI-insight side panel. Shared by
   all 5 Partner pages; page-specific copy/data lives in the HTML.
   ============================================================ */
.geo-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:920px;margin:0 auto 40px;}
@media(max-width:768px){.geo-metrics{grid-template-columns:repeat(2,1fr);}}
.geo-metric{text-align:center;padding:18px 12px;border-radius:12px;background:var(--bg-panel);border:1px solid var(--border);}
.geo-metric-value{font-size:26px;font-weight:800;letter-spacing:-.01em;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;}
.geo-metric-label{font-size:12px;color:var(--text-dim);}

.geo-dashboard{background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:18px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.geo-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;}
.geo-filters .res-filter-btn{padding:7px 16px;font-size:12.5px;}
.geo-daterange{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--border);}
.geo-daterange svg{width:13px;height:13px;stroke:currentColor;}
@media(max-width:640px){.geo-daterange{margin-left:0;width:100%;justify-content:center;}}

.geo-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start;}
@media(max-width:900px){.geo-layout{grid-template-columns:1fr;}}

.geo-map-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--bg);}
.geo-map-canvas{position:relative;aspect-ratio:16/9;background:
    radial-gradient(ellipse 38% 30% at 22% 34%,rgba(139,108,255,.16),transparent 70%),
    radial-gradient(ellipse 26% 26% at 50% 28%,rgba(91,138,255,.14),transparent 70%),
    radial-gradient(ellipse 34% 34% at 76% 42%,rgba(47,212,188,.16),transparent 70%),
    radial-gradient(ellipse 22% 22% at 66% 68%,rgba(139,108,255,.1),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 12.5%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 8.33%),
    var(--bg);
}
.geo-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.geo-route{fill:none;stroke:url(#geoRouteGrad);stroke-width:.35;stroke-dasharray:1.6 1.4;opacity:.7;vector-effect:non-scaling-stroke;}

.geo-pin{position:absolute;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;z-index:2;}
.geo-pin-dot{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 3px rgba(139,108,255,.22),0 0 14px rgba(139,108,255,.5);transition:transform .22s ease,box-shadow .22s ease;}
.geo-pin-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(139,108,255,.4);opacity:0;transition:opacity .22s ease,transform .22s ease;transform:scale(.8);}
.geo-pin:hover .geo-pin-dot,.geo-pin:focus-visible .geo-pin-dot,.geo-pin.selected .geo-pin-dot{transform:scale(1.25);}
.geo-pin:hover .geo-pin-dot::after,.geo-pin:focus-visible .geo-pin-dot::after,.geo-pin.selected .geo-pin-dot::after{opacity:1;transform:scale(1);}
.geo-pin.blue .geo-pin-dot{background:var(--teal);box-shadow:0 0 0 3px rgba(91,138,255,.22),0 0 14px rgba(91,138,255,.5);}
.geo-pin.blue .geo-pin-dot::after{border-color:rgba(91,138,255,.4);}
.geo-pin.green .geo-pin-dot{background:var(--teal);box-shadow:0 0 0 3px rgba(47,212,188,.22),0 0 14px rgba(47,212,188,.5);}
.geo-pin.green .geo-pin-dot::after{border-color:rgba(47,212,188,.4);}
.geo-pin.risk .geo-pin-dot{background:#ff8a5c;box-shadow:0 0 0 3px rgba(255,111,61,.22),0 0 14px rgba(255,111,61,.5);}
.geo-pin.risk .geo-pin-dot::after{border-color:rgba(255,111,61,.4);}
.geo-pin.origin .geo-pin-dot{background:var(--text);box-shadow:0 0 0 3px rgba(255,255,255,.16),0 0 14px rgba(255,255,255,.35);}
.geo-pin.origin .geo-pin-dot::after{border-color:rgba(255,255,255,.35);}

.geo-tooltip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(4px);min-width:200px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:14px 16px;box-shadow:0 20px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:5;text-align:left;white-space:normal;}
.geo-pin:hover .geo-tooltip,.geo-pin:focus-visible .geo-tooltip,.geo-pin.tap-active .geo-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.geo-tooltip h6{font-size:13px;font-weight:800;margin-bottom:8px;color:var(--text);}
.geo-tooltip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.geo-tooltip li{font-size:11.5px;color:var(--text-dim);line-height:1.4;}
.geo-tooltip.small{min-width:150px;}
.geo-tooltip.small p{font-size:11.5px;color:var(--text-dim);margin:0;}

/* --- Real world-map variant (Export Agencies): simplified but recognizable
   continent silhouettes, uniform teal activity dots with an always-on,
   staggered "soft pulse" ring, and a single-color route treatment. --- */
.geo-map-canvas.geo-world{background:var(--bg);}
.geo-world-svg{position:absolute;inset:0;width:100%;height:100%;}
.geo-world-svg path{fill:var(--bg-panel-2);stroke:var(--border-mid);stroke-width:1.5;}
.geo-routes.uniform .geo-route{stroke:var(--teal);}

.geo-pin-dot.pulse{background:var(--teal);box-shadow:0 0 0 3px rgba(47,212,188,.25),0 0 14px rgba(47,212,188,.55);}
.geo-pin-dot.pulse::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--teal);opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:no-preference){
  @keyframes geo-pulse-ring{0%{transform:scale(.6);opacity:.6;}70%{opacity:0;}100%{transform:scale(1.9);opacity:0;}}
  .geo-pin-dot.pulse::before{animation:geo-pulse-ring 2.8s ease-out infinite;animation-delay:var(--pulse-delay,0s);}
}
.geo-pin:hover .geo-pin-dot.pulse::before,
.geo-pin:focus-visible .geo-pin-dot.pulse::before,
.geo-pin.tap-active .geo-pin-dot.pulse::before{animation-play-state:paused;opacity:0;}

.geo-zone{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;transition:opacity .25s ease;}
.geo-legend{display:flex;flex-wrap:wrap;gap:14px;padding:14px 4px 0;font-size:11.5px;color:var(--text-faint);}
.geo-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.geo-swatch.purple{background:var(--purple);}
.geo-swatch.blue{background:#5b8aff;}
.geo-swatch.green{background:var(--teal);}
.geo-swatch.risk{background:#ff8a5c;}

.geo-side{display:flex;flex-direction:column;gap:14px;}
.geo-detail-panel{background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:14px;padding:20px;}
.geo-detail-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.geo-detail-flag{width:10px;height:10px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.geo-detail-head h4{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.geo-detail-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.geo-detail-stats li{position:relative;padding-left:16px;font-size:13px;color:var(--text-dim);line-height:1.5;}
.geo-detail-stats li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--teal);}

.geo-ai-insight{border-radius:14px;}

@media(max-width:900px){.geo-side{order:2;}.geo-map-frame{order:1;}}

/* --- Real geographic map variant (Industry Organizations): MapLibre GL
   re-skinned dark, uniform teal pulsing markers reusing the pulse pattern
   established for the Export Agencies real-world map. --- */
.geo-map-canvas.geo-maplibre{background:var(--bg);}
.geo-maplibre-map{position:absolute;inset:0;width:100%;height:100%;}
.geo-maplibre .maplibregl-ctrl-attrib{background:rgba(8,8,14,.55);color:var(--text-faint);font-size:10px;border-radius:6px 0 0 0;}
.geo-maplibre .maplibregl-ctrl-attrib a{color:var(--text-faint);}
.geo-maplibre .maplibregl-ctrl-bottom-right,.geo-maplibre .maplibregl-ctrl-bottom-left{z-index:3;}
.geo-maplibre .maplibregl-ctrl-logo{display:none!important;}

.geo-marker{position:relative;cursor:pointer;background:none;border:none;padding:0;z-index:2;}
.geo-marker:hover .geo-pin-dot,.geo-marker:focus-visible .geo-pin-dot,.geo-marker.tap-active .geo-pin-dot{transform:scale(1.25);}
.geo-marker:hover .geo-tooltip,.geo-marker:focus-visible .geo-tooltip,.geo-marker.tap-active .geo-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.geo-marker:hover .geo-pin-dot.pulse::before,
.geo-marker:focus-visible .geo-pin-dot.pulse::before,
.geo-marker.tap-active .geo-pin-dot.pulse::before{animation-play-state:paused;opacity:0;}
.geo-marker:focus-visible{outline:none;}
.geo-marker:focus-visible .geo-pin-dot{box-shadow:0 0 0 3px rgba(47,212,188,.25),0 0 0 5px rgba(255,255,255,.55),0 0 14px rgba(47,212,188,.55);}

/* --- Gradient-glow world-map variant (Industry Organizations): brand-gradient
   filled continent silhouette with a soft outer glow, styled after a
   dashboard-infographic reference. Reuses the shared pulse-dot and
   gradient-route patterns already established for the Partner maps. --- */
.geo-map-canvas.geo-glow-world{background:
    radial-gradient(ellipse 62% 55% at 50% 46%,rgba(91,138,255,.12),transparent 72%),
    var(--bg);
}
.geo-world-svg.geo-world-gradient{filter:drop-shadow(0 0 14px rgba(91,138,255,.3)) drop-shadow(0 0 30px rgba(47,212,188,.18));}
.geo-world-svg.geo-world-gradient path{fill:url(#geoWorldGrad);stroke:rgba(255,255,255,.1);stroke-width:1;}

/* --- Accelerators: filter-linked map + insight panel. Selected filter
   uses a gradient OUTLINE (not a gradient fill) on top of the shared
   res-filter-btn component; map pins stay one uniform brand color and
   are differentiated only by brightness/opacity/scale. --- */
.geo-filters .res-filter-btn.geo-filter-outline.active{
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box, var(--gradient) border-box;
  border:2px solid transparent;
  color:#fff;
  box-shadow:0 0 14px rgba(91,138,255,.22);
}

.geo-pin.geo-filter-dim .geo-pin-dot{opacity:.35;transform:scale(.8);box-shadow:0 0 0 2px rgba(47,212,188,.12),0 0 6px rgba(47,212,188,.22);}
.geo-pin.geo-filter-dim .geo-pin-dot.pulse::before{opacity:0;}
.geo-pin.geo-filter-emphasis .geo-pin-dot{opacity:1;transform:scale(1.35);box-shadow:0 0 0 4px rgba(47,212,188,.3),0 0 22px rgba(47,212,188,.75);}
.geo-pin.geo-filter-emphasis .geo-pin-dot.pulse::before{border-width:2px;}
@media(prefers-reduced-motion:no-preference){
  .geo-pin.geo-filter-dim .geo-pin-dot,.geo-pin.geo-filter-emphasis .geo-pin-dot{transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;}
}

/* Gentle drift for Accelerators map dots - a tiny, slow, staggered
   position wobble layered on top of the existing centering transform
   (kept on .geo-pin) so it never fights the dot's own hover/scale
   transforms (which live on the child .geo-pin-dot). Opt-in via
   .drift so other Partner pages' static pins are unaffected. */
@media(prefers-reduced-motion:no-preference){
  @keyframes geo-pin-drift{
    0%,100%{transform:translate(-50%,-50%) translate(0,0);}
    50%{transform:translate(-50%,-50%) translate(3px,-3px);}
  }
  .geo-pin.drift{animation:geo-pin-drift 7s ease-in-out infinite;animation-delay:var(--drift-delay,0s);}
  @media(max-width:900px){
    @keyframes geo-pin-drift-sm{
      0%,100%{transform:translate(-50%,-50%) translate(0,0);}
      50%{transform:translate(-50%,-50%) translate(1.5px,-1.5px);}
    }
    .geo-pin.drift{animation-name:geo-pin-drift-sm;}
  }
}

.geo-insight-rows{display:flex;flex-direction:column;gap:12px;}
.geo-insight-row{position:relative;border-radius:10px;padding:12px 14px;background:var(--bg-panel);border:1.5px solid var(--border);}
.geo-insight-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;}
.geo-insight-row-label{font-size:12px;font-weight:700;color:var(--text-dim);}
.geo-insight-row-value{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text-dim);}
.geo-insight-row-desc{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin:0;}
/* Active row: solid white text (title, value, description), gradient
   outline preserved on all sides via the border/background-clip
   technique (not gradient-fill text), plus a subtle matching glow.
   Inactive rows keep muted gray text but stay fully visible - dark
   background and neutral border are never faded. */
.geo-insight-row.active{
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box, var(--gradient) border-box;
  box-shadow:0 0 16px rgba(91,138,255,.2);
}
.geo-insight-row.active .geo-insight-row-label,
.geo-insight-row.active .geo-insight-row-value{color:#fff;}
.geo-insight-row.active .geo-insight-row-desc{color:rgba(255,255,255,.92);}
@media(prefers-reduced-motion:no-preference){
  .geo-insight-row{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;}
  .geo-insight-row-label,.geo-insight-row-value,.geo-insight-row-desc{transition:color .25s ease;}
}

/* --- Accelerators: left column (map + Singapore analysis, stacked) and
   right column (Portfolio Impact) form one stretched two-column grid, so
   both columns start on the same top edge and share the same bottom
   edge. The map is the flexible element within the left column - it
   grows or shrinks so the map + analysis panel combined height matches
   Portfolio Impact's height, rather than Portfolio Impact moving. --- */
.geo-top-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch;}
@media(max-width:900px){.geo-top-grid{grid-template-columns:1fr;}}

.geo-left-col{display:flex;flex-direction:column;gap:18px;min-height:0;}

.geo-map-frame.geo-map-frame-fill{flex:1 1 auto;min-height:300px;}
.geo-map-canvas.geo-fill-height{aspect-ratio:auto;height:100%;min-height:300px;}
@media(max-width:900px){
  .geo-map-frame.geo-map-frame-fill{flex:none;min-height:0;}
  .geo-map-canvas.geo-fill-height{aspect-ratio:16/9;height:auto;min-height:0;}
}

/* Portfolio Impact border matches the nav "Book a Demo" gradient ring
   exactly: same colors, 2px thickness, conic (angle-based) gradient so
   all four sides and corners stay equally bright - no directional fade. */
.geo-detail-panel.geo-insight-panel{
  border:2px solid transparent;
  background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box, conic-gradient(from 0deg,#8b6cff,#5b8aff,#2fd4bc,#8b6cff) border-box;
}

/* Analysis panel: subtle, sits directly beneath the map only, doesn't
   compete with Portfolio Impact. Spacing above comes from the left
   column's flex gap, not its own margin. */
.ai-callout.geo-ai-insight-full{padding:20px;margin-top:0;flex:0 0 auto;}

/* ============================================================
   EXPERT NETWORK PAGE (Resources > Expert Network)
   ============================================================ */

/* Audience selector - two large cards beneath the hero. Namespaced
   .xn- (Expert Network) so this never collides with the pre-existing
   .aud-card / .aud-grid classes reused elsewhere (pricing + certification). */
.xn-audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:860px){.xn-audience-grid{grid-template-columns:1fr;}}
.xn-audience-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:18px;padding:40px 36px;display:flex;flex-direction:column;text-align:left;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;}
.xn-audience-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.4);}
.xn-audience-card.company{border-top:3px solid var(--purple);}
.xn-audience-card.expert{border-top:3px solid var(--teal);}
.xn-audience-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;}
.xn-audience-card.company .xn-audience-label{color:var(--purple);}
.xn-audience-card.expert .xn-audience-label{color:var(--teal);}
.xn-audience-card h3{font-size:22px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em;line-height:1.3;}
.xn-audience-card p{font-size:14.5px;color:var(--text-dim);line-height:1.65;margin-bottom:24px;}
.xn-audience-card .btn{align-self:flex-start;pointer-events:none;}
.xn-audience-card.active{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 30px rgba(139,108,255,.22);}
.xn-audience-card.active .btn{background:var(--gradient);color:#fff;border-color:transparent;}
.xn-audience-card:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}

/* Company / Expert content panels - only one visible at a time, swapped by nav.js */
.xn-panel[hidden]{display:none;}
.xn-panel.xn-fade-in{animation:xn-fade-in .4s ease;}
@keyframes xn-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* Small AI / Human tags used beside hero workflow steps */
.xn-step-tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-left:8px;}
.xn-step-tag.ai{background:rgba(139,108,255,.16);color:#a48eff;}
.xn-step-tag.human{background:rgba(47,212,188,.16);color:var(--teal);}

/* Mini content panels used inside the alternating How-It-Works browser mockups */
.xn-mini-panel{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.xn-mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;color:var(--text-dim);border-bottom:1px solid var(--border);}
.xn-mini-row:last-child{border-bottom:none;}
.xn-mini-row strong{color:var(--text);font-weight:700;}
.xn-mini-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-panel-2);color:var(--text-dim);}
.xn-mini-tag.high{color:var(--teal);}

/* Shared form panel wrapper - Request an Expert / Build Your Expert Profile.
   Reuses the same tokens as the rest of the design system; no new form
   control styling is introduced (inputs/selects/labels are the existing
   .form-row / .form-group rules already used on the contact page). */
.xn-form-panel{max-width:760px;margin:0 auto;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:18px;padding:40px;box-shadow:0 24px 60px rgba(0,0,0,.35);}
@media(max-width:560px){.xn-form-panel{padding:26px 20px;}}
.xn-form-panel .btn{width:100%;justify-content:center;margin-top:6px;}
.xn-form-panel[hidden]{display:none;}

.xn-step-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:32px;}
.xn-step-dot-ind{width:8px;height:8px;border-radius:50%;background:var(--border-mid);transition:background .2s ease,transform .2s ease;}
.xn-step-dot-ind.active{background:var(--gradient);transform:scale(1.3);}

/* AI Profile Builder loading state */
.xn-loading{text-align:center;padding:36px 20px 20px;}
.xn-spinner{width:56px;height:56px;border-radius:50%;margin:0 auto 26px;background:conic-gradient(from 0deg,#8b6cff,#5b8aff,#2fd4bc,#8b6cff);animation:xn-spin 1.1s linear infinite;display:flex;align-items:center;justify-content:center;}
.xn-spinner-inner{width:44px;height:44px;border-radius:50%;background:var(--bg-panel);}
@keyframes xn-spin{to{transform:rotate(360deg);}}
.xn-loading h3{font-size:19px;font-weight:800;margin-bottom:10px;}
.xn-loading p{font-size:14px;color:var(--text-dim);margin-bottom:24px;}
.xn-loading-msg{font-size:13.5px;color:var(--text-faint);font-weight:600;min-height:20px;transition:opacity .25s ease;}

/* Editable tag-chip fields (industries, expertise, languages, etc.) */
.xn-chip-field{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--bg);border:1px solid var(--border-mid);border-radius:8px;}
.xn-chip-field:focus-within{border-color:var(--teal);}
.xn-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:999px;padding:5px 8px 5px 12px;}
.xn-chip button{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;line-height:1;padding:0;display:flex;}
.xn-chip button:hover{color:#ff6f61;}
.xn-chip-input{border:none;background:none;outline:none;color:var(--text);font-size:13px;font-family:inherit;flex:1;min-width:140px;padding:5px 4px;}
.xn-chip-input::placeholder{color:var(--text-faint);}
.xn-field-hint{font-size:11.5px;color:var(--text-faint);margin-top:6px;}

/* Engagement-type checkboxes + availability */
.xn-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){.xn-check-grid{grid-template-columns:1fr;}}
.xn-check-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border-mid);border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--text-dim);cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.xn-check-item input{accent-color:var(--teal);width:16px;height:16px;flex-shrink:0;}
.xn-check-item.checked{color:var(--text);border-color:var(--teal);}

/* Thank-you / confirmation state (Expert application final step) */
.xn-thankyou{text-align:center;padding:40px 20px;}
.xn-thankyou-icon{width:52px;height:52px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 22px;box-shadow:0 10px 24px rgba(139,108,255,.35);}
.xn-thankyou h3{font-size:22px;font-weight:800;margin-bottom:12px;}
.xn-thankyou p{font-size:15px;color:var(--text-dim);max-width:420px;margin:0 auto;line-height:1.65;}

/* Company: "Ways to Work With Experts" / Expert: "Ways Experts Contribute"
   reuse the existing .integrate-cards 2-col grid (renders as 2x2 for four
   cards) and .integrate-card treatment untouched. */

/* ============================================================
   FEATURED EXPERTS - shared carousel + card + drawer used by both
   the Company and Expert views on the Expert Network page.
   ============================================================ */

/* Cards - original vertical/centered format, three visible on desktop */
.xn-carousel-viewport{overflow:hidden;}
.xn-carousel-track{display:flex;gap:20px;align-items:stretch;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;}
@media(prefers-reduced-motion:reduce){.xn-carousel-track{transition:none;}}
.xn-expert-card{flex:0 0 calc((100% - 2*20px)/3);display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px 24px;box-shadow:0 10px 24px rgba(0,0,0,.3);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;cursor:pointer;}
@media(max-width:960px){.xn-expert-card{flex:0 0 calc((100% - 20px)/2);}}
@media(max-width:640px){.xn-expert-card{flex:0 0 100%;}}
.xn-expert-card:hover,.xn-expert-card:focus-visible{transform:translateY(-4px);border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 16px 32px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.22);outline:none;}

.xn-expert-avatar{width:60px;height:60px;border-radius:50%;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;margin-bottom:16px;letter-spacing:.02em;overflow:hidden;flex-shrink:0;}
.xn-expert-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.xn-expert-card h4{font-size:16px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em;transition:color .2s ease;}
.xn-expert-card:hover h4,.xn-expert-card:focus-visible h4{color:#fff;}
.xn-expert-title{font-size:12.5px;color:var(--text-dim);margin-bottom:14px;font-weight:600;transition:color .2s ease;}
.xn-expert-card:hover .xn-expert-title,.xn-expert-card:focus-visible .xn-expert-title{color:var(--text);}
.xn-expert-summary{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:16px;}

.xn-expert-tagblock{margin-bottom:10px;width:100%;}
.xn-expert-tagblock:last-child{margin-bottom:0;}
.xn-expert-tagblock-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;margin-bottom:6px;}
.xn-expert-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.xn-expert-tag{font-size:11px;font-weight:600;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px;}

/* Controls */
.xn-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px;}
.xn-carousel-arrow{width:38px;height:38px;border-radius:50%;background:var(--bg-panel);border:1px solid var(--border-mid);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,transform .2s ease;flex-shrink:0;}
.xn-carousel-arrow:hover{border-color:var(--purple);transform:translateY(-1px);}
.xn-carousel-arrow:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
.xn-carousel-arrow svg{width:17px;height:17px;stroke:currentColor;}
.xn-carousel-dots{display:flex;align-items:center;gap:8px;}
.xn-carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--border-mid);border:none;padding:0;cursor:pointer;transition:background .2s ease,transform .2s ease;}
.xn-carousel-dot.active{background:var(--gradient);transform:scale(1.3);}

/* ============================================================
   HOMEPAGE - "Validate strategy with world-class experts" preview.
   Reuses the .persona-card component verbatim from the Expert
   mapping platform-capability graphic (expert-mapping.html) - same
   card dimensions, typography, border, radius, match-score bar,
   tag-chip styling, avatar treatment and dark background - just
   inside a 2-up row sized/centered for this homepage graphic
   instead of the capability page's 3-up grid. Static, no JS.
   ============================================================ */
.hp-expert-mock{padding:22px;}

.hp-expert-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:440px;margin:0 auto;align-items:stretch;}
.hp-expert-row .persona-card{height:100%;}
@media(max-width:640px){
  .hp-expert-row{gap:12px;}
  .hp-expert-row .persona-card{padding:14px 12px;}
}
@media(max-width:480px){.hp-expert-row{grid-template-columns:1fr;max-width:280px;}}

/* Profile drawer */
.xn-drawer-overlay{position:fixed;inset:0;background:rgba(4,4,8,.7);backdrop-filter:blur(4px);z-index:500;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;}
.xn-drawer-overlay.open{opacity:1;visibility:visible;}
.xn-drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--bg-panel);border-left:1px solid var(--border-mid);box-shadow:-30px 0 60px rgba(0,0,0,.5);z-index:501;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:36px;}
.xn-drawer.open{transform:translateX(0);}
@media(prefers-reduced-motion:reduce){.xn-drawer{transition:none;}.xn-drawer-overlay{transition:none;}}
.xn-drawer-close{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;}
.xn-drawer-close:hover{border-color:var(--purple);}
.xn-drawer-avatar{width:88px;height:88px;border-radius:50%;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:800;margin-bottom:22px;overflow:hidden;}
.xn-drawer-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.xn-drawer-body h3{font-size:22px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em;}
.xn-drawer-body .xn-expert-title{font-size:14px;margin-bottom:22px;}
.xn-drawer-bio{font-size:14.5px;color:var(--text-dim);line-height:1.7;margin-bottom:24px;}
.xn-drawer-body .xn-expert-tagblock{margin-bottom:18px;}
.xn-drawer-cta{width:100%;justify-content:center;margin-top:8px;}
@media(max-width:560px){.xn-drawer{width:100%;padding:26px;}}

/* ============================================================
   GO-TO-MARKET STRATEGY BUILDER (gtm-builder.html only)
   Hero + progress, scope pill-selector, hexagon map + sticky
   summary sidebar, dimension/decision/option cards, confidence
   badges, evidence drawer content, completion state, and the
   mobile collapsible summary bar. Reuses .spider-*, .xn-drawer,
   .eyebrow, .grad-text, .btn-* verbatim where possible.
   ============================================================ */
.gtm-hero{padding:76px 0 40px;}
.gtm-progress{margin:32px auto 0;max-width:420px;}
.gtm-progress-track{height:6px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border);overflow:hidden;}
.gtm-progress-fill{height:100%;width:0;background:var(--gradient);border-radius:999px;transition:width .4s ease;}
.gtm-progress-label{display:block;margin-top:10px;font-size:12.5px;color:var(--text-dim);font-weight:600;}

.gtm-scope-panel{max-width:760px;margin:0 auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:18px;padding:40px;text-align:center;}
.gtm-scope-panel h2{font-size:24px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em;}
.gtm-scope-panel > p{color:var(--text-dim);font-size:14.5px;line-height:1.65;margin-bottom:32px;}
.gtm-scope-group{margin-bottom:28px;text-align:left;}
.gtm-scope-group h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.gtm-scope-hint{font-size:10.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-faint);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;}
.gtm-pill-select{display:flex;flex-wrap:wrap;gap:10px;}
.gtm-pill{font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-dim);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;}
.gtm-pill:hover{border-color:rgba(255,255,255,.28);color:var(--text);}
.gtm-pill.selected{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;border:1px solid transparent;color:#fff;}
.gtm-pill-add{background:transparent;border-style:dashed;color:var(--text-faint);}
.gtm-pill-add:hover{color:var(--teal);border-color:var(--teal);}
.gtm-scope-panel > .btn:disabled{opacity:.4;cursor:not-allowed;}

.gtm-map-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;}
.gtm-map-visual h2{font-size:24px;font-weight:800;margin-bottom:8px;}
.gtm-map-visual > p{color:var(--text-dim);font-size:14px;line-height:1.6;margin-bottom:20px;max-width:440px;}
.gtm-hex-svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;}
.gtm-map-summary{position:sticky;top:96px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:26px;}
.gtm-map-summary h3{font-size:16px;font-weight:800;margin-bottom:4px;}
.gtm-summary-count{display:block;font-size:12px;color:var(--teal);font-weight:700;margin-bottom:18px;}
.gtm-summary-list{display:flex;flex-direction:column;gap:16px;max-height:520px;overflow-y:auto;}
.gtm-summary-block h5{font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.gtm-summary-done{color:var(--teal);}
.gtm-summary-block ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;}
.gtm-summary-block li{font-size:12px;color:var(--text-dim);line-height:1.5;}
.gtm-summary-decision{display:block;color:var(--text-faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.gtm-summary-empty{font-size:12.5px;color:var(--text-faint);line-height:1.6;}
.gtm-mobile-bar-panel .gtm-summary-block{padding:14px 0;border-top:1px solid var(--border);}
.gtm-mobile-bar-panel .gtm-summary-block:first-child{border-top:none;}

.gtm-dimension{padding:48px 0;border-top:1px solid var(--border);}
.gtm-dimension:first-child{border-top:none;padding-top:0;}
.gtm-dimension-title-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.gtm-dimension-title-row h2{font-size:26px;font-weight:800;letter-spacing:-.01em;}
.gtm-dimension-check{width:26px;height:26px;border-radius:50%;background:var(--bg-panel-2);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:transparent;flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.gtm-dimension-check.is-done{background:var(--gradient);border-color:transparent;color:#fff;}
.gtm-dimension-head > p{color:var(--text-dim);font-size:14.5px;max-width:640px;margin-bottom:8px;}

.gtm-decision{margin-top:36px;}
.gtm-decision-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.gtm-decision-head h3{font-size:17.5px;font-weight:700;}
.gtm-decision-mode{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--purple);background:rgba(139,108,255,.12);border-radius:999px;padding:3px 11px;white-space:nowrap;}
.gtm-decision-prompt{font-size:13.5px;color:var(--text-faint);margin-bottom:16px;max-width:640px;}

.gtm-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.gtm-option{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease;}
.gtm-option:hover,.gtm-option:focus-visible{border-color:rgba(255,255,255,.24);outline:none;}
.gtm-option-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.gtm-option-check{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:transparent;transition:background .2s ease,border-color .2s ease,color .15s ease,transform .2s ease;}
.gtm-option:hover .gtm-option-check,.gtm-option:focus-visible .gtm-option-check{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;border-color:transparent;}
.gtm-option h4{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.35;}
.gtm-option-desc{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:10px;}
.gtm-option-evidence-line{font-size:12px;color:var(--text-faint);line-height:1.5;margin-bottom:16px;font-style:italic;}
.gtm-option-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.gtm-option-selected-label{font-size:11px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.04em;opacity:0;transition:opacity .2s ease;}
.gtm-view-evidence{background:none;border:none;color:var(--text-dim);font-size:12px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;}
.gtm-view-evidence:hover{color:var(--teal);}

.gtm-option.selected{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);transform:translateY(-2px);}
.gtm-option.selected .gtm-option-check{background:var(--gradient);border-color:transparent;color:#fff;transform:scale(1.05);}
.gtm-option.selected .gtm-option-selected-label{opacity:1;}

.gtm-conf{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.gtm-conf-high{background:rgba(47,212,188,.14);color:var(--teal);}
.gtm-conf-medium{background:rgba(244,185,66,.14);color:var(--gold);}
.gtm-conf-emerging{background:rgba(255,111,61,.16);color:#ff8a5c;}

.gtm-evidence-drawer .gtm-evidence-list{margin-top:20px;display:flex;flex-direction:column;gap:16px;}
.gtm-evidence-item{border-top:1px solid var(--border);padding-top:14px;}
.gtm-evidence-type{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--purple);margin-bottom:6px;}
.gtm-evidence-item p{font-size:13.5px;color:var(--text-dim);line-height:1.6;}

.gtm-complete{text-align:center;}
.gtm-complete-panel{max-width:640px;margin:0 auto;}
.gtm-complete-panel h2{font-size:30px;font-weight:800;margin-bottom:14px;letter-spacing:-.01em;}
.gtm-complete-panel > p{color:var(--text-dim);font-size:15px;line-height:1.65;margin-bottom:28px;}
.gtm-plan-output{margin-top:36px;text-align:left;}
.gtm-plan-sections{display:flex;flex-direction:column;gap:16px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:24px;}
.gtm-plan-section h4{font-size:14px;font-weight:800;margin-bottom:4px;}
.gtm-plan-section p{font-size:13px;color:var(--text-dim);line-height:1.6;}
.gtm-plan-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.gtm-mobile-bar{display:none;}
@media(max-width:900px){
  .gtm-map-grid{grid-template-columns:1fr;}
  .gtm-map-summary{display:none;}
  .gtm-mobile-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:400;background:var(--bg-panel);border-top:1px solid var(--border-mid);box-shadow:0 -12px 30px rgba(0,0,0,.35);}
  .gtm-mobile-bar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:none;border:none;color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;}
  .gtm-mobile-bar-caret{color:var(--text-faint);transition:transform .2s ease;}
  .gtm-mobile-bar.open .gtm-mobile-bar-caret{transform:rotate(180deg);}
  .gtm-mobile-bar-panel{max-height:0;overflow-y:auto;padding:0 20px;transition:max-height .25s ease,padding .25s ease;}
  .gtm-mobile-bar.open .gtm-mobile-bar-panel{max-height:52vh;padding:0 20px 20px;}
}
@media(max-width:640px){
  .gtm-scope-panel{padding:28px 22px;}
  .gtm-options{grid-template-columns:1fr;}
  .gtm-dimension-title-row h2{font-size:22px;}
  .gtm-plan-actions .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .gtm-progress-fill,.gtm-pill,.gtm-option,.gtm-dimension-check,.gtm-option-check,.gtm-mobile-bar-caret,.gtm-mobile-bar-panel{transition:none;}
}

/* ============================================================
   MARKET ATTRACTIVENESS PAGE (market-attractiveness.html only)
   Hero reuses the homepage opp-card rotator verbatim (new
   data-opp="mkt-*" gradient states below). Macro/industry
   intelligence split, a three-step "How it works" sequence
   (reuses .intro-story-grid from the homepage), the why-the-
   ranking-changed rationale, the attractiveness+fit=priority
   formula cards, and the priority shortlist + workflow stepper.
   Reuses .browser-frame, .opp-card, .mockup-panel, .rank-row,
   .ai-callout, .tag-chip, .check-list, .gtm-conf, .xn-drawer,
   .cta-frame, .intro-story-grid verbatim.
   ============================================================ */

/* Hero opp-card rotator - new gradient states for markets (homepage's
   .opp-card[data-opp="enterprise"/"midmarket"] rules are untouched;
   these use distinct data-opp values so the homepage is unaffected). */
.opp-card[data-opp="mkt-brazil"]:hover,.opp-card[data-opp="mkt-brazil"].leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;box-shadow:0 0 20px rgba(255,95,86,.26);}
.opp-card[data-opp="mkt-france"]:hover,.opp-card[data-opp="mkt-france"].leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,linear-gradient(105deg,#f4b942 0%,#ff8a3d 100%) border-box;box-shadow:0 0 20px rgba(244,185,66,.26);}

/* Hero card metric rows - the 6 selected criteria (driven by nav.js from
   the same selectedCriteria state as "Define market attractiveness"),
   plus a distinct "Market attractiveness" total row spanning both
   columns beneath them. */
.opp-metric-total{grid-column:1/-1;flex-direction:row!important;align-items:center;justify-content:space-between;border-top:1px solid var(--border);margin-top:4px;padding-top:10px;}
.opp-metric-total span:first-child{font-size:11px;}
.opp-metric-total span:last-child{font-size:16px!important;color:var(--text)!important;}
.opp-card:hover .opp-metric-total span:last-child,.opp-card.leading .opp-metric-total span:last-child{color:#fff!important;}

.mkt-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.mkt-split.reverse .mkt-split-copy{order:2;}
.mkt-split.reverse .mkt-split-visual{order:1;}
.mkt-split-copy h2{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:14px;}
.mkt-split-copy > p{color:var(--text-dim);font-size:15px;line-height:1.65;margin-bottom:24px;max-width:480px;}

/* "See the whole market" - centered, no right-column graphic */
.mkt-centered-block{max-width:900px;margin:0 auto;}
.mkt-centered-block .mkt-intel-cols{max-width:820px;margin:32px auto 0;text-align:left;}

.mkt-intel-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
/* Gradient-outline boxes (dark charcoal interior, white heading text,
   standard site border-radius) - the same padding-box/border-box
   technique used by other gradient-outline cards site-wide, always on
   rather than a hover/selected-only state. */
.mkt-intel-box{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;border:1px solid transparent;border-radius:16px;padding:28px;box-shadow:0 10px 26px rgba(0,0,0,.35);}
.mkt-intel-cols h5{font-size:19px;font-weight:800;color:#fff;margin-bottom:16px;}
.mkt-intel-cols .check-list li{font-size:15.5px;padding:12px 0 12px 28px;}

/* Step 01 - interactive criteria selector (no weighting: choosing
   relevant criteria only). Neutral by default; nav.js runs a looping
   progressive-selection animation and also allows real click toggling. */
.mkt-crit-list{display:flex;flex-wrap:wrap;gap:8px;}
.mkt-crit-item{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:7px 14px 7px 10px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease;}
.mkt-crit-check{width:15px;height:15px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:transparent;flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.mkt-crit-label{transition:color .25s ease;}
.mkt-crit-item:hover .mkt-crit-check{border-color:rgba(255,255,255,.32);}
.mkt-crit-item.selected{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border-color:transparent;}
.mkt-crit-item.selected .mkt-crit-check{background:var(--gradient);border-color:transparent;color:#fff;}
.mkt-crit-item.selected .mkt-crit-label{color:#fff;}

/* Step 01 - "X of 6 selected" counter, sits directly above the reused
   homepage Analyze button/status-message component (.flow-analyze-btn/
   .flow-status-panel, defined earlier in this file - no new button
   styling needed here). */
.mkt-crit-counter{font-size:11.5px;color:var(--text-faint);text-align:center;margin:18px 0 10px;}

/* Dynamic market rankings - 5-country live ranking rows. Score bar
   stretches the full width between the country label and the score
   (not a small detached bar). */
#mktWorldRankList{display:flex;flex-direction:column;margin-bottom:16px;}
.mkt-rank-row-live{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--border);}
.mkt-rank-row-live:first-child{border-top:none;}
.mkt-rank-row-live .rank-num{flex-shrink:0;}
.mkt-rank-row-live .rank-name{flex-shrink:0;width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkt-rank-row-live .rank-bar-track{flex:1;}
.mkt-rank-row-live .rank-bar-fill{transition:width .8s ease;}
.mkt-rank-row-live .rank-score{flex-shrink:0;width:30px;text-align:right;}

.flow-analyze-btn:disabled{opacity:.45;cursor:default;}
.flow-analyze-btn.is-complete{background:rgba(47,212,188,.16);color:var(--teal);box-shadow:none;opacity:1;}
.flow-analyze-btn.is-complete .flow-btn-spinner{display:none;}

/* Select priority markets - three selectable shortlist rows. Each card
   is a single six-column grid (rank / flag / country / score label /
   score / circular selection control) so every row aligns identically
   regardless of selection state - the control column is always
   reserved, nothing shifts when a row toggles. */
.mkt-top-grid{display:flex;flex-direction:column;gap:8px;}
.mkt-top-card{display:grid;grid-template-columns:auto auto minmax(100px,1fr) auto auto auto;align-items:center;gap:10px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:10px 14px;cursor:pointer;transition:border-color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;}
.mkt-top-card:hover{border-color:rgba(255,255,255,.28);}
.mkt-top-num{font-size:12px;font-weight:800;color:var(--text-faint);}
.mkt-top-flag{font-size:17px;line-height:1;}
.mkt-top-name{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkt-top-score-label{font-size:11.5px;color:var(--text-faint);font-weight:600;white-space:nowrap;}
.mkt-top-score-value{font-size:16px;font-weight:800;color:var(--text);text-align:right;}
.mkt-top-radio{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:transparent;flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.mkt-top-card.selected{border-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;}
.mkt-top-card.selected .mkt-top-radio{background:var(--gradient);border-color:transparent;color:#fff;}
@media(max-width:480px){
  .mkt-top-card{grid-template-columns:auto auto minmax(46px,1fr) auto auto auto;gap:6px;padding:10px 12px;}
  .mkt-top-score-label{font-size:9.5px;}
  .mkt-top-score-value{font-size:14px;}
  .mkt-top-radio{width:19px;height:19px;font-size:10px;}
}

/* Mobile fallback for the routed dotted connectors - short centered
   vertical dotted line instead (the SVG-routed version is hidden below
   900px by the existing .flow-connector-svg rule). */
.mkt-mobile-connector{display:none;}
@media(max-width:900px){
  .mkt-mobile-connector{display:flex;justify-content:center;padding:6px 0;}
  .mkt-mobile-connector span{width:2px;height:36px;border-radius:2px;background:repeating-linear-gradient(to bottom,#8b6cff 0 4px,transparent 4px 9px,#5b8aff 9px 13px,transparent 13px 18px,#2fd4bc 18px 22px,transparent 22px 27px);}
}

/* Why the ranking changed */
.mkt-reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:28px auto 0;}
.mkt-reason-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:20px;}
.mkt-reason-card h5{font-size:14.5px;font-weight:700;margin-bottom:8px;color:var(--teal);}
.mkt-reason-card p{font-size:13px;color:var(--text-dim);line-height:1.6;}
.mkt-reco-subhead{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:18px 0 8px;}
.mkt-reco-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

/* Market attractiveness + Business fit = Market priority: three-stage
   equation graphic. Attractiveness is fixed/neutral (blue-forward, the
   macro+industry analysis already completed earlier on the page).
   Business fit gets the standard gradient-outline treatment (the
   company-specific layer). Priority gets the strongest emphasis - its
   leading row (France, once resolved) carries the full gradient
   outline, a brighter score, a small pill, and a checkmark. Flex-wrap
   lets the three stages compress/partially stack on tablet and fully
   stack (one per line, operators between them) on mobile without
   separate breakpoints. */
.mkt-eq-grid{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:16px;margin-top:8px;}
.mkt-eq-stage{flex:1 1 240px;min-width:220px;max-width:320px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:22px;}
.mkt-eq-stage h6{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.mkt-eq-sublabel{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:16px;}
.mkt-eq-attract{border-color:rgba(91,138,255,.3);box-shadow:0 10px 24px rgba(0,0,0,.3);}
.mkt-eq-fit{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 10px 24px rgba(0,0,0,.3);}
.mkt-eq-priority{border-color:var(--border-mid);box-shadow:0 14px 28px rgba(0,0,0,.4);}
.mkt-eq-op{flex:0 0 auto;align-self:center;font-size:22px;font-weight:800;color:var(--text-faint);padding:0 2px;}
.mkt-eq-rows{display:flex;flex-direction:column;}
.mkt-eq-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border);transition:background .3s ease,box-shadow .3s ease;border-radius:8px;}
.mkt-eq-row:first-child{border-top:none;}
.mkt-eq-left,.mkt-eq-right{display:flex;align-items:center;gap:8px;min-width:0;}
.mkt-eq-flag{font-size:16px;flex-shrink:0;}
.mkt-eq-name{font-size:13.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkt-eq-score{font-size:14px;font-weight:800;color:var(--text);flex-shrink:0;transition:opacity .3s ease,color .3s ease,font-size .3s ease;}
.mkt-eq-pill{display:none;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gradient);color:#fff;margin-right:6px;flex-shrink:0;}
.mkt-eq-check{display:none;color:var(--teal);font-weight:800;margin-right:6px;flex-shrink:0;}
.mkt-eq-row.is-priority{border-top-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border:1px solid transparent;padding:10px 12px;margin:2px 0;box-shadow:0 6px 16px rgba(139,108,255,.2);}
.mkt-eq-row.is-priority .mkt-eq-pill,.mkt-eq-row.is-priority .mkt-eq-check{display:inline-flex;align-items:center;}
.mkt-eq-row.is-priority .mkt-eq-score{color:#fff;font-size:15.5px;}
.mkt-eq-row.is-priority .mkt-eq-name{color:#fff;}
.mkt-eq-score.is-fading{opacity:0;}

/* Priority shortlist */
.mkt-priority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.mkt-priority-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:26px;text-align:center;}
.mkt-priority-card.is-priority{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 14px 28px rgba(0,0,0,.4),0 0 22px rgba(139,108,255,.26);}
.mkt-priority-num{display:block;font-size:12px;font-weight:800;color:var(--text-faint);margin-bottom:10px;}
.mkt-priority-card h4{font-size:18px;font-weight:800;margin-bottom:14px;}
.mkt-priority-score{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.mkt-priority-score span:last-child{font-weight:800;font-size:16px;color:var(--text);}

/* Where-to-how workflow stepper */
.mkt-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;}
.mkt-flow-step{display:flex;align-items:center;gap:10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:999px;padding:10px 20px;font-size:13px;font-weight:700;color:var(--text-faint);}
.mkt-flow-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.mkt-flow-step.done{color:var(--text);}
.mkt-flow-step.done .mkt-flow-icon{background:var(--teal);color:#08080e;}
.mkt-flow-step.next{color:#fff;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;border-color:transparent;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 20px rgba(139,108,255,.24);}
.mkt-flow-step.next .mkt-flow-icon{background:var(--gradient);color:#fff;}
.mkt-flow-step.upcoming .mkt-flow-icon{background:var(--bg-panel-2);color:var(--text-faint);}
.mkt-flow-arrow{color:var(--text-faint);font-size:15px;}

@media(max-width:900px){
  .mkt-split{grid-template-columns:1fr;gap:32px;}
  .mkt-split.reverse .mkt-split-copy,.mkt-split.reverse .mkt-split-visual{order:initial;}
  .mkt-rank-compare{flex-direction:column;}
  .mkt-rank-arrow{transform:rotate(90deg);}
  .mkt-priority-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .mkt-intel-cols{grid-template-columns:1fr;gap:16px;}
  .mkt-split-copy h2{font-size:24px;}
  .mkt-flow{flex-direction:column;align-items:stretch;}
  .mkt-flow-arrow{transform:rotate(90deg);text-align:center;}
  .mkt-reco-actions .btn{width:100%;}
  .mkt-reason-grid,.mkt-priority-grid{grid-template-columns:1fr;}
  .mkt-eq-stage{flex-basis:100%;max-width:100%;}
  .mkt-eq-op{padding:2px 0;}
}
@media(prefers-reduced-motion:reduce){
  .mkt-crit-item,.mkt-crit-check,.mkt-crit-label,#mktWorldRankList,.mkt-rank-row-live .rank-bar-fill{transition:none;}
  .mkt-eq-row,.mkt-eq-score{transition:none;}
}

/* ============================================================
   MACRO TRENDS & RISKS PAGE (macro-risk-trends.html only)
   Same design language as the Market Selector workflow (mockup
   panels, check-list bullets, dotted flow connectors, gradient
   outlines, .flow-analyze-btn/.flow-status-panel) adapted to
   continuous signal monitoring rather than a one-time ranking. The
   "mtr-" prefix keeps this page's own components distinct from the
   "mkt-" Market Selector components even where the treatment mirrors
   it closely. Shared generic classes (.intro-story-grid*,
   .flow-connector-*, .mkt-mobile-connector, .trio-grid,
   .diff-card.icon-card, .section-head) are reused directly rather
   than duplicated. ============================================================ */

/* Live-monitoring status pill (hero + monitor feed headers) */
.mtr-feed-panel{display:flex;flex-direction:column;}
.mtr-feed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.mtr-feed-head h6{margin-bottom:0;}
.mtr-live-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--teal);background:rgba(47,212,188,.1);border:1px solid rgba(47,212,188,.28);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.mtr-live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:mtr-pulse 1.8s ease-out infinite;}
@keyframes mtr-pulse{0%{box-shadow:0 0 0 0 rgba(47,212,188,.55);}70%{box-shadow:0 0 0 6px rgba(47,212,188,0);}100%{box-shadow:0 0 0 0 rgba(47,212,188,0);}}

/* Signal feed: persistent cards inserted at the top and pushed down
   (FLIP-animated in nav.js) - the whole list never blinks or gets
   replaced wholesale. */
.mtr-feed-list{display:flex;flex-direction:column;gap:10px;min-height:250px;}
.mtr-feed-list-lg{min-height:220px;}
.mtr-signal-card{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--border-mid);border-radius:10px;padding:14px 16px;}

/* Monitor market changes feed only (not the Hero panel, which reuses
   these same .mtr-signal-* classes and must keep its natural height):
   fixed card height + 2-line clamped title/description so the outer
   gray box never grows or shrinks as items rotate in and out - only
   the FLIP position/opacity transition should ever animate here. */
#mtrMonitorFeed.mtr-feed-list-lg{height:340px;min-height:340px;overflow:hidden;}
#mtrMonitorFeed .mtr-signal-card{height:160px;display:flex;flex-direction:column;overflow:hidden;}
#mtrMonitorFeed .mtr-signal-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:37px;}
#mtrMonitorFeed .mtr-signal-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:38px;}
#mtrMonitorFeed .mtr-signal-tag{margin-top:auto;}
.mtr-signal-card.impact-high{border-left-color:#ff5f56;}
.mtr-signal-card.impact-medium{border-left-color:var(--gold);}
.mtr-signal-card.impact-opportunity{border-left-color:var(--teal);}
.mtr-signal-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:6px;}
.mtr-signal-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.35;}
.mtr-signal-desc{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:8px;}
.mtr-signal-tag{display:inline-block;font-size:10.5px;font-weight:700;}
.mtr-signal-card.impact-high .mtr-signal-tag{color:#ff8f88;}
.mtr-signal-card.impact-medium .mtr-signal-tag{color:var(--gold);}
.mtr-signal-card.impact-opportunity .mtr-signal-tag{color:var(--teal);}

.mtr-signal-card .mtr-signal-tag{margin-top:8px;}

/* Hero graphic: PESTLE category tabs with a sliding gradient
   indicator - only one category is ever active at a time (no
   "All" state). */
.mtr-hero-tabs{position:relative;display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.mtr-hero-tab{flex:1;min-width:0;background:none;border:none;padding:0 4px 11px;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtr-hero-tab:hover{color:var(--text-dim);}
.mtr-hero-tab.is-active{color:#fff;}
.mtr-hero-tab-indicator{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--gradient);border-radius:2px;transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);}

/* Hero graphic: single-category intelligence panel. A subtle
   left-border accent (not a full-card fill) signals risk / watch /
   opportunity, matching the "color the assessment, not the card"
   requirement. Content crossfades + translates on category change
   (see nav.js), it never blinks or redraws instantly. */
.mtr-hero-intel{position:relative;min-height:184px;border-left:3px solid var(--border-mid);padding-left:14px;margin-top:18px;transition:border-color .3s ease;}
.mtr-hero-intel.tone-risk{border-left-color:#ff5f56;}
.mtr-hero-intel.tone-watch{border-left-color:var(--gold);}
.mtr-hero-intel.tone-opportunity{border-left-color:var(--teal);}
.mtr-hero-intel-inner{opacity:1;transform:translateY(0);}

/* Hero graphic: "what it could mean for you" - Global Copilot's own
   interpretation, visually separated from the news line above it so
   the graphic never reads as a plain headline carousel. */
.mtr-hero-impact-label{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);font-weight:800;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-mid);margin-bottom:3px;}
.mtr-hero-impact-text{font-size:12px;color:var(--text-dim);line-height:1.55;}

.mtr-assessment-pill{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:6px 14px;border-radius:999px;margin-top:14px;border:1px solid transparent;}
.mtr-assessment-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.mtr-assessment-pill.tone-risk{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient-danger) border-box;color:#ff8f88;}
.mtr-assessment-pill.tone-watch{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,linear-gradient(105deg,#ffb347 0%,#ff8a3d 100%) border-box;color:var(--gold);}
.mtr-assessment-pill.tone-opportunity{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;color:#fff;}

/* Hero graphic: subtle disclaimer that this is a product mockup,
   not a live production feed. */
.mtr-illustrative-label{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);text-align:center;font-size:10px;font-style:italic;color:var(--text-faint);}

/* PESTLE selection graphic */
.mtr-pestle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:6px;}
.mtr-pestle-col{min-width:0;}
.mtr-pestle-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.mtr-pestle-list{display:flex;flex-direction:column;gap:6px;}
.mtr-signal-item{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;padding:6px 10px 6px 8px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease;}
.mtr-signal-check{width:14px;height:14px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:transparent;flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.mtr-signal-label{transition:color .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtr-signal-item:hover .mtr-signal-check{border-color:rgba(255,255,255,.32);}
.mtr-signal-item.selected{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border-color:transparent;}
.mtr-signal-item.selected .mtr-signal-check{background:var(--gradient);border-color:transparent;color:#fff;}
.mtr-signal-item.selected .mtr-signal-label{color:#fff;}
.mtr-signal-counter{font-size:11.5px;color:var(--text-faint);text-align:center;margin:14px 0 10px;}

/* Response-decision graphic */
.mtr-risk-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.mtr-risk-name{font-size:13px;font-weight:700;color:var(--text);}
.mtr-risk-impact{font-size:11.5px;font-weight:700;color:var(--gold);}
.mtr-response-grid{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.mtr-response-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:14px 40px 14px 14px;cursor:pointer;transition:border-color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;}
.mtr-response-radio{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:transparent;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.mtr-response-name{font-size:13px;font-weight:700;color:var(--text);}
.mtr-response-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
.mtr-response-tag{font-size:10.5px;font-weight:700;color:var(--text-faint);}
.mtr-response-tag.is-recommended{color:var(--teal);}
.mtr-response-card.selected{border-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;}
.mtr-response-card.selected .mtr-response-radio{background:var(--gradient);border-color:transparent;color:#fff;}

/* Business-impact: six substantial consequence cards (icon + title +
   two-sentence description), still visibly smaller than a major feature
   card. Dark charcoal fill with a thin red->orange gradient-outline
   accent (the same padding-box/border-box technique used elsewhere on
   this page), never a solid red/orange fill, so it reads as risk
   exposure rather than an alarm banner. */
.mtr-danger-zone{max-width:920px;margin:0 auto;}
.mtr-danger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.mtr-danger-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient-danger) border-box;border:1px solid transparent;border-radius:14px;padding:22px 20px;}
.mtr-danger-icon{width:34px;height:34px;border-radius:9px;background:var(--gradient-danger);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(255,111,61,.28);}
.mtr-danger-icon svg{width:17px;height:17px;stroke:currentColor;}
.mtr-danger-title{font-size:15.5px;font-weight:700;color:#fff;}
.mtr-danger-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6;}

@media(max-width:900px){
  .mtr-pestle-grid{grid-template-columns:1fr 1fr;}
  .mtr-danger-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .mtr-pestle-grid{grid-template-columns:1fr;}
  .mtr-response-card{padding:12px 40px 12px 12px;}
  .mtr-danger-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .mtr-live-dot{animation:none;}
  .mtr-signal-item,.mtr-signal-check,.mtr-signal-label,.mtr-response-card,.mtr-response-radio{transition:none;}
}

/* ============================================================
   SHARED PLATFORM-PAGE PRIMITIVES
   Small generic components reused across capability pages
   (Macro Trends & Risks, Competitive Mapping, GloCo AI Growth
   Consultant) so future pages can adopt them too without
   depending on any single page's own class prefix.
   ============================================================ */
.live-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--teal);background:rgba(47,212,188,.1);border:1px solid rgba(47,212,188,.28);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:mtr-pulse 1.8s ease-out infinite;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.panel-head h6{margin-bottom:0;}

/* ============================================================
   COMPETITIVE MAPPING PAGE (competitive-mapping.html only)
   Reuses Macro Trends & Risks' structural pattern (subhero,
   browser-frame hero graphic, trio-grid concept cards,
   intro-story-grid workflow stages, flow-connector-zone,
   danger/benefit trio) with page-specific "cm-" components for
   the competitor-positioning graphics.
   ============================================================ */
/* ---------- Hero: competitor cards (name, positioning, segment,
   offering, differentiator, market-presence dots) - replaces the old
   metrics-driven opp-card rotator with compact, scannable cards. ---------- */
.cm-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;}
.cm-hero-card{display:flex;flex-direction:column;height:100%;background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:16px;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;}
.cm-hero-card.leading{border-color:transparent;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;box-shadow:0 8px 24px rgba(91,138,255,.18);}
.cm-hero-card.tone-established.leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-warning) border-box;box-shadow:0 8px 24px rgba(244,185,66,.22);}
.cm-hero-card.tone-challenger.leading{background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;box-shadow:0 8px 24px rgba(255,95,86,.22);}
.cm-hero-card-top{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--border);}
.cm-hero-logo{width:26px;height:26px;border-radius:50%;background:var(--gradient);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-hero-name{font-size:13.5px;font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-hero-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px;border:1.5px solid transparent;background:var(--bg-panel-2);color:var(--text-faint);white-space:nowrap;flex-shrink:0;}
.cm-hero-badge.tone-leader{color:var(--teal);background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient) border-box;}
.cm-hero-badge.tone-established{color:var(--gold);background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-warning) border-box;}
.cm-hero-badge.tone-challenger{color:#ff5f56;background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box,var(--gradient-danger) border-box;}
.cm-hero-position{font-size:11px;color:var(--text-dim);line-height:1.5;margin-bottom:10px;font-style:italic;}
.cm-hero-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.cm-hero-row{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;}
.cm-hero-label{color:var(--text-faint);flex-shrink:0;}
.cm-hero-value{color:var(--text-dim);font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-hero-metrics{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
.cm-hero-metric{display:flex;flex-direction:column;gap:5px;}
.cm-hero-metric-label{font-size:9.5px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.cm-hero-dots{display:flex;gap:4px;}
.cm-hero-dot{width:6px;height:6px;border-radius:50%;background:var(--border-mid);}
.cm-hero-dot.on{background:var(--gradient);}
@media(max-width:780px){.cm-hero-grid{grid-template-columns:1fr;}}

.cm-dim-tabs{position:relative;display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.cm-dim-tab{flex:1;min-width:0;background:none;border:none;padding:0 4px 11px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-dim-tab:hover{color:var(--text-dim);}
.cm-dim-tab.is-active{color:#fff;}
.cm-dim-tab-indicator{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--gradient);border-radius:2px;transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);}

.cm-spectrum{position:relative;min-height:194px;padding-top:8px;}
.cm-spectrum-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;text-align:center;margin-bottom:44px;}
.cm-spectrum-track{position:relative;height:6px;border-radius:999px;background:var(--bg-panel-2);margin:0 6px;}
.cm-spectrum-zone{position:absolute;top:-9px;bottom:-9px;border-radius:999px;background:rgba(47,212,188,.14);border:1px dashed rgba(47,212,188,.45);transition:left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1);}
.cm-spectrum-zone-label{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.cm-spectrum-pin{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--border-mid);transition:left .6s cubic-bezier(.4,0,.2,1);}
.cm-spectrum-pin-label{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:700;color:var(--text-faint);white-space:nowrap;}
.cm-spectrum-pin.is-you{background:var(--gradient);border-color:transparent;box-shadow:0 0 0 3px rgba(139,108,255,.25);}
.cm-spectrum-pin.is-you .cm-spectrum-pin-label{color:#fff;}
.cm-spectrum-axis{display:flex;justify-content:space-between;margin-top:30px;font-size:10px;color:var(--text-faint);font-weight:600;}
.cm-illustrative-label{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);text-align:center;font-size:10px;font-style:italic;color:var(--text-faint);}

.cm-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px;}
.cm-select-col{min-width:0;}
.cm-select-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.cm-select-list{display:flex;flex-direction:column;gap:6px;}
.cm-select-item{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;padding:6px 10px 6px 8px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease;}
.cm-select-check{width:14px;height:14px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:transparent;flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.cm-select-name{transition:color .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-select-item:hover .cm-select-check{border-color:rgba(255,255,255,.32);}
.cm-select-item.selected{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border-color:transparent;}
.cm-select-item.selected .cm-select-check{background:var(--gradient);border-color:transparent;color:#fff;}
.cm-select-item.selected .cm-select-name{color:#fff;}
.cm-select-counter{font-size:11.5px;color:var(--text-faint);text-align:center;margin:14px 0 10px;}

.cm-rank-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.cm-rank-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;}
.cm-rank-pos{width:22px;height:22px;border-radius:50%;background:var(--bg-panel-2);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--text-faint);flex-shrink:0;}
.cm-rank-row.is-you{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;}
.cm-rank-row.is-you .cm-rank-pos{background:var(--gradient);color:#fff;border-color:transparent;}
.cm-rank-name{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cm-rank-score{font-size:12px;font-weight:700;color:var(--text-dim);flex-shrink:0;}
.cm-rank-status{font-size:11.5px;color:var(--text-faint);text-align:center;margin-top:12px;}

.cm-opp-grid{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.cm-opp-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:14px 40px 14px 14px;cursor:pointer;transition:border-color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;}
.cm-opp-radio{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:transparent;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.cm-opp-name{font-size:13px;font-weight:700;color:var(--text);}
.cm-opp-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
.cm-opp-tag{font-size:10.5px;font-weight:700;color:var(--text-faint);}
.cm-opp-tag.is-recommended{color:var(--teal);}
.cm-opp-card.selected{border-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;}
.cm-opp-card.selected .cm-opp-radio{background:var(--gradient);border-color:transparent;color:#fff;}

/* ---------- Explore differentiation opportunities: four persistent
   cards that fade/slide in one at a time, get a subtle highlight
   while "considered", then settle on the recommended card with a
   green selection checkmark. Confidence + evidence-count keep the
   recommendation visibly grounded in the competitive analysis rather
   than looking arbitrary. ---------- */
.cm-diff-grid{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.cm-diff-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:14px 40px 14px 14px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;}
.cm-diff-card.is-visible{opacity:1;transform:translateY(0);}
.cm-diff-check{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:transparent;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.cm-diff-name{font-size:13px;font-weight:700;color:var(--text);}
.cm-diff-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
.cm-diff-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;flex-wrap:wrap;}
.cm-diff-confidence{font-size:10.5px;font-weight:700;}
.cm-diff-confidence.conf-high{color:var(--teal);}
.cm-diff-confidence.conf-medium{color:#f4b942;}
.cm-diff-signals{font-size:10.5px;color:var(--text-faint);}
.cm-diff-card.is-highlighted{border-color:rgba(139,108,255,.45);box-shadow:0 0 0 3px rgba(139,108,255,.12);}
.cm-diff-card.selected{border-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;}
.cm-diff-card.selected .cm-diff-check{background:var(--gradient);border-color:transparent;color:#fff;}
.cm-diff-evidence{font-size:10.5px;color:var(--text-faint);font-weight:600;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){.cm-diff-card{transition:none;}}

@media(max-width:900px){
  .cm-select-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .cm-spectrum-pin,.cm-spectrum-zone{transition:none;}
}

/* ============================================================
   GLOCO AI GROWTH CONSULTANT PAGE
   (gloco-ai-growth-consultant.html only)
   Reuses the same structural pattern; page-specific "gloco-"
   components represent the agent/prompt experience rather than
   a generic chatbot.
   ============================================================ */
.gloco-agent-panel{text-align:center;}
.gloco-logo-badge{position:relative;width:64px;height:78px;margin:4px auto 22px;display:flex;align-items:center;justify-content:center;}
.gloco-logo-badge img{width:42px;height:52px;position:relative;z-index:1;}
.gloco-logo-ring{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(139,108,255,.3) 0%,rgba(139,108,255,0) 70%);animation:gloco-pulse-ring 2.6s ease-out infinite;}
.gloco-prompt-bar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border-mid);border-radius:12px;padding:14px 16px;text-align:left;margin-bottom:16px;}
.gloco-prompt-text{flex:1;min-width:0;font-size:13px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gloco-mic-btn{width:30px;height:30px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(139,108,255,.3);}
.gloco-mic-btn svg{width:14px;height:14px;stroke:currentColor;}
.gloco-activity-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--text-faint);min-height:20px;margin-bottom:16px;transition:opacity .3s ease;}
.gloco-activity-dot{width:6px;height:6px;border-radius:50%;background:var(--purple);animation:mtr-pulse 1.4s ease-out infinite;flex-shrink:0;}
.gloco-rec-card{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;border:1px solid transparent;border-radius:12px;padding:16px 18px;text-align:left;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1);}
.gloco-rec-card.is-visible{opacity:1;transform:translateY(0);}
.gloco-rec-eyebrow{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);font-weight:800;margin-bottom:6px;}
.gloco-rec-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:5px;}
.gloco-rec-desc{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:10px;}
.gloco-rec-action{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--teal);}

.gloco-chip-label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:8px;}
.gloco-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.gloco-chip-row:last-of-type{margin-bottom:6px;}
.gloco-chip{font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-faint);cursor:pointer;transition:background .25s ease,border-color .25s ease,color .15s ease;-webkit-tap-highlight-color:transparent;}
.gloco-chip:hover{color:var(--text-dim);}
.gloco-chip.selected{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border-color:transparent;color:#fff;}

.gloco-option-grid{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.gloco-option-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:border-color .3s ease,background .3s ease;}
.gloco-option-card.is-selected{border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--gradient) border-box;}
.gloco-option-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.gloco-option-name{font-size:13px;font-weight:700;color:var(--text);}
.gloco-option-confidence{font-size:10.5px;font-weight:700;color:var(--text-faint);white-space:nowrap;}
.gloco-option-card.is-selected .gloco-option-confidence{color:var(--teal);}
.gloco-option-desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:10px;}
.gloco-option-bar{height:5px;border-radius:999px;background:var(--bg-panel-2);overflow:hidden;}
.gloco-option-bar-fill{height:100%;border-radius:999px;background:var(--gradient);width:0;transition:width .8s cubic-bezier(.4,0,.2,1);}

.gloco-output-grid{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.gloco-output-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:12px;padding:14px 40px 14px 14px;cursor:pointer;transition:border-color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;}
.gloco-output-icon{width:32px;height:32px;border-radius:9px;background:var(--bg-panel);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;color:var(--text-faint);flex-shrink:0;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.gloco-output-icon svg{width:16px;height:16px;stroke:currentColor;}
.gloco-output-text{flex:1;min-width:0;}
.gloco-output-name{font-size:13px;font-weight:700;color:var(--text);}
.gloco-output-desc{font-size:11.5px;color:var(--text-dim);line-height:1.45;}
.gloco-output-radio{position:absolute;top:16px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:transparent;transition:background .25s ease,border-color .25s ease,color .15s ease;}
.gloco-output-card.selected{border-color:transparent;background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;}
.gloco-output-card.selected .gloco-output-radio{background:var(--gradient);border-color:transparent;color:#fff;}
.gloco-output-card.selected .gloco-output-icon{background:var(--gradient);border-color:transparent;color:#fff;}

.gloco-outcome-strip{margin-top:8px;}

@keyframes gloco-pulse-ring{0%{transform:scale(.85);opacity:.9;}70%{transform:scale(1.35);opacity:0;}100%{opacity:0;}}

@media(prefers-reduced-motion:reduce){
  .live-dot,.gloco-activity-dot,.gloco-logo-ring{animation:none;}
  .gloco-rec-card{transition:none;}
}

/* ---------- CUSTOMER SEGMENTATION PAGE (customer-segmentation.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. Every element on
   this page (hero opp-card rotator, mkt-centered-block/mkt-intel-cols,
   mkt-crit-* criteria list, mkt-rank-row-live ranking, mkt-top-* shortlist)
   reuses the already-generic shared classes verbatim - no cseg-prefixed
   classes were needed for those. See nav.js's "CUSTOMER SEGMENTATION PAGE"
   block for the page's own IIFEs. The segment-attractiveness + business-fit
   = segment-priority equation section (and its nav.js IIFE) was removed
   per a later content request; the "Select priority segments" shortlist
   (#csegTopGrid) had its per-card flag/emoji icon removed and uses the
   scoped 5-column .mkt-top-card override below instead of the shared
   6-column definition. */
#csegTopGrid.mkt-top-grid .mkt-top-card{grid-template-columns:auto minmax(100px,1fr) auto auto auto;}
@media(max-width:480px){
  #csegTopGrid.mkt-top-grid .mkt-top-card{grid-template-columns:auto minmax(46px,1fr) auto auto auto;}
}

/* ---------- COMPETITIVE MAPPING PAGE (competitive-mapping.html only) ----------
   Rebuilt hero graphic to the shared mkt-centered-block/mkt-intel-cols
   strategic-value section (kept) plus a bespoke cm-hero-* competitor
   card grid (see above) replacing the old metrics-driven opp-card
   rotator. The How it works workflow now has four connected stages
   instead of three - Define, Map, Explore differentiation
   opportunities (new, cm-diff-* cards, see above), Identify where to
   win - linked by a three-segment flow-connector-zone. The page's own
   cm-select-*/cm-rank-*/cm-opp-* components (Steps 01/02/04) were kept
   and, for cm-rank-*, upgraded to persistent-node FLIP reordering - see
   nav.js's "COMPETITIVE MAPPING PAGE" block. The mkt-eq-* competitive
   position + differentiation fit = strategic opportunity equation
   section ("The most contested space...") was removed per a later
   content request, superseded by the differentiation-opportunities
   stage above. The old .cm-dim-tab*/.cm-spectrum* rules above are no
   longer referenced by any page but are left in place as harmless,
   unused legacy styles. */

/* ---------- GTM BUILDER PAGE (gtm-insights.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. The strategic-value
   section, connector-zone workflow stages, mkt-eq-* outcome equation,
   trio-grid "why teams use" cards, phases, and footer all reuse the
   already-generic shared classes verbatim. Two bespoke pieces needed
   page-specific classes:
   1) The hero graphic adapts the existing Segment / Value proposition /
      Channel / Product builder concept (carried forward conceptually from
      gtm-builder.html's scope-definition step, not copied structurally)
      into the shared browser-frame/product-mockup shell, using new
      .gtmi-* classes for the pill-select builder grid.
   2) The Step 02 "recommended GTM moves" widget needed its own row/
      confidence-badge classes (.gtmi-rec-*), since it shows a category +
      recommendation + confidence% per row rather than a plain ranked list.
   NOTE: classes are prefixed "gtmi-" (GTM Insights) rather than "gtm-" -
   gtm-builder.html (a separate, orphaned tool page that must stay
   untouched) already owns every "gtm-" prefixed class in this file, so a
   distinct prefix avoids any risk of this page's new rules altering
   gtm-builder.html's appearance. The "Select the GTM approach" shortlist
   (#gtmiTopGrid) had its per-card emoji icon removed and uses the scoped
   5-column .mkt-top-card override below instead of the shared 6-column
   definition (same technique as Customer Segmentation's #csegTopGrid
   above). The How it works workflow now has a fourth stage, "Generate an
   actionable plan", appended after "Select the GTM approach" - it reuses
   the homepage's exec-dash, exec-timeline, exec-pill launch-roadmap
   component verbatim (already defined once, above, for the homepage's
   "Transform strategic decisions into tactical plans" section), so no
   new CSS was needed for it. See nav.js's "GTM BUILDER PAGE" block for
   this page's own IIFEs. */
#gtmiTopGrid.mkt-top-grid .mkt-top-card{grid-template-columns:auto minmax(100px,1fr) auto auto auto;}
@media(max-width:480px){
  #gtmiTopGrid.mkt-top-grid .mkt-top-card{grid-template-columns:auto minmax(46px,1fr) auto auto auto;}
}
.gtmi-builder-grid{display:flex;flex-direction:column;gap:14px;margin-top:4px;}
.gtmi-builder-label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;margin-bottom:6px;}
.gtmi-pill-row{display:flex;flex-wrap:wrap;gap:8px;}
.gtmi-pill{font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;background:var(--bg-panel-2);border:1px solid var(--border-mid);color:var(--text-faint);cursor:pointer;transition:background .25s ease,border-color .25s ease,color .15s ease;-webkit-tap-highlight-color:transparent;}
.gtmi-pill:hover{border-color:rgba(255,255,255,.28);}
.gtmi-pill.selected{background:var(--gradient);border-color:transparent;color:#fff;}
.gtmi-builder-counter{font-size:11.5px;color:var(--text-faint);text-align:center;margin:14px 0 4px;}

.gtmi-rec-list{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.gtmi-rec-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);}
.gtmi-rec-row:first-child{border-top:none;}
.gtmi-rec-cat{flex-shrink:0;width:96px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gtmi-rec-title{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gtmi-rec-bar-track{width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;flex-shrink:0;}
.gtmi-rec-bar-fill{height:100%;border-radius:3px;background:var(--gradient);transition:width .7s ease;}
.gtmi-rec-conf{flex-shrink:0;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;width:44px;text-align:center;transition:background-color .3s ease,color .3s ease;}
.gtmi-conf-high{background:rgba(47,212,188,.14);color:var(--teal);}
.gtmi-conf-medium{background:rgba(244,185,66,.14);color:var(--gold);}
.gtmi-conf-emerging{background:rgba(255,111,61,.16);color:#ff8a5c;}
@media(max-width:480px){
  .gtmi-rec-cat{width:64px;}
  .gtmi-rec-bar-track{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .gtmi-pill,.gtmi-rec-bar-fill{transition:none;}
}

/* ---------- LAUNCH PLAN PAGE (timeline-execution.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. The strategic-
   value section, connector-zone workflow stages, mkt-eq-* outcome
   equation, trio-grid "why teams use" cards (kept from the previous
   version of this page - they already fit the framework and are
   launch-plan-specific), phases, and footer all reuse the already-
   generic shared classes verbatim. Two bespoke pieces needed page-
   specific classes, both prefixed "launch-":
   1) The hero graphic is a timeline variant (per the task's explicit
      "adapt ... or a timeline-style variant" allowance) rather than the
      opp-card rotator: a small assembling Gantt-style roadmap paired with
      the generic .ai-rec-panel/.ai-toggle/.ai-callout AI callout, with a
      rotating "highest execution risk" read mirroring the opp-card
      rotator's STRATEGIES-array rotation technique.
   2) The Step 02 "build the launch roadmap" widget needed its own row
      classes (.launch-row-owner/.launch-row-timing) since each persistent
      row shows an owner tag and a target-quarter tag alongside the
      shared .rank-num/.rank-name classes it reuses.
   See nav.js's "LAUNCH PLAN PAGE" block for this page's own IIFEs. */
.launch-gantt-header{display:grid;grid-template-columns:106px repeat(4,1fr);gap:4px;font-size:10.5px;color:var(--text-faint);font-weight:700;margin-bottom:10px;}
.launch-gantt-rows{display:flex;flex-direction:column;gap:14px;}
.launch-gantt-row{display:grid;grid-template-columns:106px 1fr;align-items:center;gap:10px;}
.launch-gantt-row-label{font-size:12px;font-weight:600;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.launch-gantt-track{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.06);}
.launch-gantt-bar{position:absolute;top:0;height:100%;border-radius:5px;background:var(--gradient);transition:left .8s ease,width .8s ease,background .3s ease;}
.launch-gantt-bar.is-risk{background:linear-gradient(105deg,#ff6f3d 0%,#f4b942 100%);}
.launch-gantt-milestone{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--teal);transform:translate(-50%,-50%);transition:left .8s ease;}

.launch-roadmap-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);}
.launch-roadmap-row:first-child{border-top:none;}
.launch-roadmap-row .rank-name{flex:1;min-width:0;}
.launch-row-owner{flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--text-faint);background:var(--bg-panel-2);border:1px solid var(--border-mid);border-radius:999px;padding:3px 10px;white-space:nowrap;}
.launch-row-timing{flex-shrink:0;width:40px;text-align:right;font-size:11.5px;font-weight:800;color:var(--text);transition:color .3s ease;}
@media(max-width:480px){
  .launch-gantt-header,.launch-gantt-row{grid-template-columns:72px 1fr;}
}
@media(prefers-reduced-motion:reduce){
  .launch-gantt-bar,.launch-gantt-milestone{transition:none;}
}

/* ---------- FINANCIAL ANALYSIS PAGE (investment-cost-mapping.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. Every section -
   hero (.opp-rec-pill/.opp-grid/.opp-card/.opp-metrics/.ai-rec-panel),
   strategic-value block (.mkt-centered-block/.mkt-intel-cols), the
   connector-zone workflow (.mkt-crit-*, .mkt-rank-row-live/.rank-*,
   .mkt-top-*, .flow-analyze-btn/.flow-status-panel), the mkt-eq-*
   outcome equation, .trio-grid "why teams use" cards, phases, and
   footer - reuses the already-generic shared classes verbatim. No new
   page-specific classes were needed; this page introduces no unique
   visual components beyond what Market Selector, Launch Plan, and the
   other rebuilt Platform pages already share. See nav.js's
   "FINANCIAL ANALYSIS PAGE" block for this page's own IIFEs. */

/* ---------- BUSINESS CASE PAGE (financial-analysis.html only) ----------
   Rebuilt to the same Market Selector 8-part page framework as
   Financial Analysis above, reusing the identical set of generic
   shared classes verbatim (.opp-*, .ai-*, .mkt-centered-block,
   .mkt-intel-cols, .mkt-crit-*, .mkt-rank-row-live/.rank-*, .mkt-top-*,
   .flow-*, .mkt-eq-*, .trio-grid, .diff-card). No new page-specific
   classes were needed. See nav.js's "BUSINESS CASE PAGE" block for
   this page's own IIFEs. */

/* ---------- EXPERT MAPPING PAGE (expert-mapping.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. Hero
   (.opp-rec-pill/.opp-grid/.opp-card/.opp-metrics/.ai-rec-panel, driven
   by expert-match data - Role, Experience, Relevant expertise, Match
   score - instead of country data, adapting this page's previous
   persona-card "expert match" language into the shared rotator),
   strategic-value block (.mkt-centered-block/.mkt-intel-cols), the
   connector-zone workflow (.mkt-crit-*, .mkt-rank-row-live/.rank-*,
   .mkt-top-*, .flow-analyze-btn/.flow-status-panel), the mkt-eq-*
   outcome equation, .trio-grid "why teams use" cards (kept from the
   previous version of this page - already expert-mapping-specific),
   phases, and footer all reuse the already-generic shared classes
   verbatim. One small page-specific override was needed, prefixed
   "xm-": the Step 02 expert-ranking list shows full expert titles
   (e.g. "Regional GM, CPG") rather than short flag+country labels, so
   the shared .rank-name's fixed 112px width (sized for country names)
   is widened for this page's rows only. See nav.js's "EXPERT MAPPING
   PAGE" block for this page's own IIFEs. */
.xm-rank-row .rank-name{width:auto;flex:1;min-width:0;white-space:normal;}

/* ---------- MARKET MONITOR PAGE (market-monitor.html only) ----------
   Rebuilt to the Market Selector 8-part page framework. Hero
   (.opp-rec-pill/.opp-grid/.opp-card/.opp-metrics/.ai-rec-panel, driven
   by market-signal data instead of country data), strategic-value block
   (.mkt-centered-block/.mkt-intel-cols), Steps 01 and 03 of the
   connector-zone workflow (.mkt-crit-*, .mkt-top-*, .flow-analyze-btn/
   .flow-status-panel), the mkt-eq-* outcome equation, .trio-grid "why
   teams use" cards (kept from the previous version of this page), the
   shared .live-pill/.live-dot/.panel-head components, phases, and
   footer all reuse the already-generic shared classes verbatim. Step 02
   ("Monitor market changes") is a bespoke continuously-updating signal
   feed - deliberately scoped to Customers/Competitors/Products/Markets/
   Pricing/Strategic signals rather than the PESTLE framework Macro
   Trends & Risks uses - so it needed its own small set of "mmon-"
   prefixed card classes (distinct from macro-risk-trends.html's own
   "mtr-" prefixed, PESTLE-specific classes - no shared names, no shared
   content). See nav.js's "MARKET MONITOR PAGE" block for this page's
   own IIFEs, including its insert-at-top FLIP feed technique. */
.mmon-feed-list{display:flex;flex-direction:column;gap:10px;min-height:230px;}
.mmon-signal-card{border:1px solid var(--border-mid);background:var(--bg-panel-2);border-radius:12px;padding:13px 15px;border-left:3px solid var(--border-mid);}
.mmon-signal-card.impact-high{border-left-color:#ff6f3d;}
.mmon-signal-card.impact-medium{border-left-color:var(--gold);}
.mmon-signal-card.impact-opportunity{border-left-color:var(--teal);}
.mmon-signal-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--text-faint);margin-bottom:5px;}
.mmon-signal-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:4px;}
.mmon-signal-desc{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:9px;}
.mmon-signal-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-panel);color:var(--text-faint);}
@media(prefers-reduced-motion:reduce){
  .mmon-signal-card{transition:none;}
}

/* ---------- KPI TRACKING PAGE (kpi-tracking.html only) ----------
   Rebuilt to the Market Selector 8-part page framework (this page
   previously only had a simple hero + PHASES structure). Hero
   (.opp-rec-pill/.opp-grid/.opp-card/.opp-metrics/.ai-rec-panel, driven
   by KPI-vs-target data instead of country data), strategic-value block
   (.mkt-centered-block/.mkt-intel-cols), the connector-zone workflow
   (.mkt-crit-*, .mkt-top-*, .flow-analyze-btn/.flow-status-panel), the
   mkt-eq-* outcome equation, .trio-grid "why teams use" cards (kept
   from the previous version of this page - already KPI-tracking-
   specific), phases, and footer all reuse the already-generic shared
   classes verbatim. Step 02 ("Monitor performance") shows Target/
   Actual/Trend/Status per KPI rather than a single ranked score, so it
   needed its own small set of "kpi-mon-" prefixed cell/header classes -
   it still reuses the shared .mkt-rank-row-live/.rank-num/.rank-name
   row shell, plus the shared .compare-pill and .stat-trend classes
   verbatim for the Status and Trend cells. See nav.js's "KPI TRACKING
   PAGE" block for this page's own IIFEs, including the persistent-row
   FLIP re-ranking technique used for Step 02. */
.kpi-mon-header{display:grid;grid-template-columns:22px 1fr 72px 72px 84px 84px;gap:10px;align-items:center;padding:0 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--text-faint);}
.kpi-mon-header-name{grid-column:2;}
.kpi-mon-row{display:grid!important;grid-template-columns:22px 1fr 72px 72px 84px 84px;gap:10px;}
.kpi-mon-row .rank-name{width:auto;white-space:normal;}
.kpi-mon-cell{font-size:12.5px;font-weight:700;color:var(--text);text-align:left;}
.kpi-mon-trend .stat-trend{font-size:11.5px;font-weight:700;white-space:nowrap;}
.kpi-mon-status .compare-pill{white-space:nowrap;}
.kpi-mon-row.is-focus{background:linear-gradient(var(--bg-panel-2),var(--bg-panel-2)) padding-box,var(--gradient) border-box;border:1px solid transparent;border-radius:10px;padding:10px 8px;margin:2px 0;}
@media(max-width:560px){
  .kpi-mon-header,.kpi-mon-row{grid-template-columns:18px 1fr 56px 56px 64px;}
  .kpi-mon-header-status,.kpi-mon-status{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .kpi-mon-row{transition:none;}
}