/* POS2026 — site styles (moved out of index.html) */
/* =========================================================
   POS2026 — Design tokens
   ========================================================= */
:root{
  --primary:#0A4DDB;
  --secondary:#102A56;
  --sidebar:#0B1F3A;
  --accent:#EAF2FF;
  --cyan:#00C2FF;

  --bg:#F4F7FC;
  --panel:#FFFFFF;
  --ink:#102A56;
  --mut:#64748B;
  --border:#E2E8F0;

  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;

  /* derived tints (from the palette above) */
  --primary-dark:#083DB0;
  --tint:#F7FAFF;
  --line-soft:#D6E2F5;
  --on-dark:#B8C7E0;

  /* typography */
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;   /* one family site-wide; headings use the heavier weights */
  --fs-body:1rem;
  --fs-small:.9375rem;   /* 15px floor for body copy */
  --fs-h2:clamp(2rem,4vw,3.25rem);
  --fs-h3:clamp(1.25rem,2vw,1.5rem);

  /* spacing */
  --gutter:clamp(20px,5vw,64px);
  --section:clamp(72px,10vw,136px);
  --gap:24px;
  --radius:10px;
  --radius-sm:8px;
  --max:1240px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.6s;
  --dur-fast:.22s;

  --nav-h:72px;
  --mobile-bar:0px;
}
@media (max-width:760px){ :root{ --mobile-bar:84px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; color:var(--secondary); margin:0; line-height:1.15; letter-spacing:-.02em; }
p{ margin:0; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; }
input,select,textarea{ font-size:16px; }
.num{ font-variant-numeric:tabular-nums; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:4px; }
.skip-link{ position:absolute; left:16px; top:-60px; background:var(--secondary); color:#fff; padding:12px 16px; border-radius:var(--radius-sm); z-index:1000; }
.skip-link:focus{ top:16px; }

.container{ width:calc(100% - 2 * var(--gutter)); max-width:var(--max); margin:0 auto; padding-left:0; padding-right:0; }   /* keeps a side gutter on phones */
section{ padding:var(--section) 0; position:relative; }

/* Eyebrow + section headings */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:18px; }
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--primary); }
.section-head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.section-head h2{ font-size:var(--fs-h2); margin-bottom:18px; }
.section-head p{ font-size:1.125rem; color:var(--mut); max-width:620px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.section-head.center .eyebrow::before{ display:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-weight:600; font-size:.9375rem; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-secondary{ background:var(--panel); color:var(--secondary); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--secondary); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:#fff; }
.btn-light{ background:#fff; color:var(--secondary); }
.btn-light:hover{ background:var(--accent); }
.btn:active{ transform:translateY(1px); }

/* =========================================================
   Scroll progress + Navigation
   ========================================================= */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:1001; pointer-events:none; }
.progress span{ display:block; height:100%; width:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.nav.is-scrolled{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); border-bottom-color:var(--border); }
.nav .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--secondary); font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; }
.logo:hover{ text-decoration:none; }
.logo img{ height:36px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; color:var(--secondary); font-weight:600; font-size:.9375rem; border-radius:var(--radius-sm); }
.nav-links a:hover{ background:var(--accent); text-decoration:none; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
@media (max-width:900px){ .nav-links{ display:none; } }
@media (max-width:480px){ .nav-cta{ display:none; } }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px));
  padding-bottom:calc(clamp(56px,8vw,112px) + var(--mobile-bar));
  background:linear-gradient(180deg,#FFFFFF 0%,var(--bg) 100%);
  overflow:hidden;
}
.hero-grid-bg{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px; opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse at 72% 45%,#000 0%,transparent 60%); mask-image:radial-gradient(ellipse at 72% 45%,#000 0%,transparent 60%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ font-size:clamp(3rem,6.5vw,6rem); line-height:1.04; letter-spacing:-.035em; max-width:14ch; margin-bottom:24px; }
/* Two-column hero: the display face at the full 6.5vw clamp wraps the 44-character headline to 5 lines beside the illustration,
   so the size is capped here to honour the three-line maximum while keeping the column wide. */
@media (min-width:981px){ .hero h1{ font-size:clamp(3rem,4.4vw,4.25rem); } }
.hero h1 em{ font-style:normal; color:var(--primary); }
.hero-lead{ font-size:clamp(1.0625rem,1.4vw,1.25rem); color:var(--mut); max-width:560px; margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--mut); font-size:var(--fs-small); font-weight:600; }
.hero-pills li{ display:inline-flex; align-items:center; gap:8px; }
.hero-pills svg{ width:16px; height:16px; color:var(--primary); flex:none; }
.hero-art{ position:relative; width:100%; }
.hero-art svg{ width:100%; height:auto; }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero h1{ max-width:16ch; }
  .hero-art{ max-width:640px; }
}
@media (max-width:480px){
  .hero-art .hero-label{ display:none; }
  .hero h1{ font-size:clamp(2.5rem,11.5vw,3rem); }
}

/* =========================================================
   Ecosystem diagram
   ========================================================= */
.eco{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.eco-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(32px,5vw,72px); align-items:center; }
.eco-list li{ display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; padding:14px 0; border-top:1px solid var(--border); }
.eco-list li:last-child{ border-bottom:1px solid var(--border); }
.eco-list .k{ width:36px; height:36px; border-radius:8px; background:var(--accent); color:var(--primary); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.875rem; }
.eco-list strong{ display:block; font-family:var(--font-display); font-weight:600; color:var(--secondary); margin-bottom:2px; }
.eco-list p{ color:var(--mut); font-size:var(--fs-small); }
.eco-diagram{ background:var(--tint); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(12px,2vw,24px); }
.eco-diagram svg{ width:100%; height:auto; }
@media (max-width:980px){ .eco-wrap{ grid-template-columns:1fr; } .eco-diagram{ order:-1; } }
/* On narrow phones the diagram scales to ~0.6x, so the secondary captions are hidden and the node labels stay legible */
@media (max-width:640px){ .eco-diagram .e-s{ display:none; } .eco-diagram .e-t{ font-size:16px; } }

/* =========================================================
   Features — editorial grid
   ========================================================= */
.feat-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); }
.group{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(22px,3vw,36px); position:relative; transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
.group:hover{ border-color:var(--primary); box-shadow:inset 0 2px 0 var(--primary); }
.group-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.group-head h3{ font-size:var(--fs-h3); }
.group-head .tag{ font-family:var(--font-display); font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); font-weight:600; white-space:nowrap; padding-top:6px; }
.group-intro{ color:var(--mut); margin-bottom:22px; max-width:56ch; }
.feature{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; }
.feature .ico{ width:44px; height:44px; border-radius:8px; background:var(--accent); color:var(--primary); display:grid; place-items:center; }
.feature .ico svg{ width:22px; height:22px; }
.feature h4{ font-size:1.0625rem; font-weight:600; margin-bottom:4px; }
.feature p{ color:var(--mut); font-size:var(--fs-small); }
.feature-list{ display:grid; gap:20px; }
.feature-list.two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }

.group.lead{ grid-column:span 7; background:var(--sidebar); color:#fff; border-color:var(--sidebar); }
.group.lead h3,.group.lead h4{ color:#fff; }
.group.lead .group-intro,.group.lead .feature p{ color:var(--on-dark); }
.group.lead .tag{ color:var(--cyan); }
.group.lead .feature .ico{ background:rgba(255,255,255,.08); color:var(--cyan); }
.group.lead:hover{ border-color:var(--cyan); box-shadow:inset 0 2px 0 var(--cyan); }
.group.lead .lead-art{ margin:0 0 26px; }
.group.lead .lead-art svg{ width:100%; height:auto; }
@media (max-width:480px){ .group.lead .lead-art .la-t{ display:none; } }
.group.ops{ grid-column:span 5; }
.group.people{ grid-column:span 7; }
.group.bi{ grid-column:span 5; }
.group.global{ grid-column:span 12; }
.group.global .feature-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){
  .group.lead,.group.ops,.group.people,.group.bi,.group.global{ grid-column:span 12; }
  .group.global .feature-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .feature-list.two,.group.global .feature-list{ grid-template-columns:1fr; }
}

/* =========================================================
   How it works
   ========================================================= */
.how{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); position:relative; }
.steps::before{ content:""; position:absolute; left:40px; right:40px; top:40px; height:1px; background:var(--line-soft); }
.step{ position:relative; }
.step-art{ width:80px; height:80px; border-radius:12px; background:var(--panel); border:1px solid var(--border); display:grid; place-items:center; margin-bottom:22px; position:relative; }
.step-art svg{ width:46px; height:46px; }
.step-n{ position:absolute; top:-10px; right:-10px; width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--font-display); font-size:.75rem; font-weight:700; display:grid; place-items:center; }
.step h3{ font-size:1.25rem; margin-bottom:8px; }
.step p{ color:var(--mut); font-size:var(--fs-small); }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; } .steps::before{ display:none; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* =========================================================
   Benefits
   ========================================================= */
.benefits{ background:var(--secondary); color:#fff; }
.benefits h2,.benefits h3{ color:#fff; }
.benefits .section-head p{ color:var(--on-dark); }
.benefits .eyebrow{ color:var(--cyan); } .benefits .eyebrow::before{ background:var(--cyan); }
.ben-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.ben-list{ counter-reset:ben; }
.ben-list li{ display:grid; grid-template-columns:40px 1fr; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.14); align-items:start; }
.ben-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.ben-list li::before{ counter-increment:ben; content:counter(ben,decimal-leading-zero); font-family:var(--font-display); font-weight:600; color:var(--cyan); font-size:.9375rem; padding-top:4px; font-variant-numeric:tabular-nums; }
.ben-list strong{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.0625rem; margin-bottom:4px; }
.ben-list p{ color:var(--on-dark); font-size:var(--fs-small); }
.ben-art{ position:sticky; top:calc(var(--nav-h) + 24px); }
.ben-art svg{ width:100%; height:auto; }
@media (max-width:980px){ .ben-grid{ grid-template-columns:1fr; } .ben-art{ position:static; max-width:560px; } }

/* =========================================================
   Global readiness
   ========================================================= */
.global-sec{ background:var(--panel); border-bottom:1px solid var(--border); }
.global-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.global-art svg{ width:100%; height:auto; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chips li{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border:1px solid var(--border); border-radius:6px; background:var(--tint); font-weight:600; font-size:var(--fs-small); color:var(--secondary); }
.chips li i{ font-style:normal; color:var(--primary); font-family:var(--font-display); font-size:.8125rem; }
.global-note{ margin-top:28px; padding-top:18px; border-top:1px solid var(--border); color:var(--ink); font-size:1.0625rem; max-width:52ch; }
@media (max-width:980px){ .global-wrap{ grid-template-columns:1fr; } .global-art{ order:-1; max-width:560px; } }

/* =========================================================
   Pricing
   ========================================================= */
.price-panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); overflow:hidden; }
.price-copy{ padding:clamp(28px,4vw,56px); }
.price-copy h3{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:14px; }
.price-copy p{ color:var(--mut); margin-bottom:22px; max-width:52ch; }
.price-includes{ display:grid; gap:12px; margin-bottom:28px; }
.price-includes li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-small); }
.price-includes svg{ width:20px; height:20px; color:var(--success); flex:none; margin-top:2px; }
.price-side{ background:var(--sidebar); color:#fff; padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.price-side h3{ color:#fff; font-size:1.25rem; }
.price-side p{ color:var(--on-dark); font-size:var(--fs-small); }
.price-side .note{ margin-top:8px; padding:12px 14px; border:1px dashed rgba(255,255,255,.3); border-radius:var(--radius-sm); font-size:.875rem; color:var(--on-dark); }
.price-side .note code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--cyan); font-size:.8125rem; word-break:break-all; }
@media (max-width:860px){ .price-panel{ grid-template-columns:1fr; } }

/* =========================================================
   Closing CTA + Footer
   ========================================================= */
.closing{ background:var(--primary); color:#fff; overflow:hidden; }
.closing-geo{ position:absolute; inset:0; pointer-events:none; }
.closing-geo svg{ width:100%; height:100%; }
.closing .container{ position:relative; text-align:center; max-width:880px; }
.closing h2{ color:#fff; font-size:clamp(2.25rem,5vw,4rem); margin-bottom:18px; }
.closing p{ color:#DCE8FF; font-size:1.125rem; margin:0 auto 32px; max-width:560px; }
.closing-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.footer{ background:var(--sidebar); color:var(--on-dark); padding:64px 0 calc(32px + var(--mobile-bar)); font-size:var(--fs-small); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer .logo{ background:#fff; padding:8px 14px; border-radius:var(--radius-sm); margin-bottom:16px; }
.footer .logo img{ height:30px; }
.footer .footer-h{ color:#fff; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.footer ul{ display:grid; gap:0; }
.footer a{ color:var(--on-dark); display:inline-flex; align-items:center; min-height:44px; }
.footer a:hover{ color:#fff; }
.footer-desc{ max-width:38ch; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
.footer-bottom .cfg{ color:#8EA3C7; font-size:.875rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }

/* =========================================================
   Sticky mobile CTA bar (760px and below only)
   ========================================================= */
.mobile-bar{ display:none; }
@media (max-width:760px){
  .mobile-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:950; gap:10px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--border); }
  .mobile-bar .btn{ flex:1; min-height:48px; padding:0 12px; }
}

/* =========================================================
   Motion helpers — .js is added by script; without JS nothing is hidden
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Inline SVG illustration styles (hero, ecosystem, checkout strip, benefits, global)
   ========================================================= */
.h-line{ stroke:#D6E2F5; stroke-width:1.5; fill:none; }
.h-line.accent{ stroke:#0A4DDB; stroke-dasharray:4 6; stroke-width:1.5; }
.h-tile{ fill:#FFFFFF; stroke:#E2E8F0; stroke-width:1.5; }
.h-ink{ stroke:#102A56; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.h-blue{ stroke:#0A4DDB; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.h-blue-fill{ fill:#0A4DDB; }
.h-pale{ fill:#EAF2FF; }
.h-cyan{ fill:#00C2FF; }
.h-navy{ fill:#102A56; }
.h-label{ font-family:'Manrope',system-ui,sans-serif; font-size:12px; font-weight:700; fill:#64748B; letter-spacing:.06em; text-transform:uppercase; }
.e-box{ fill:#FFFFFF; stroke:#E2E8F0; stroke-width:1.5; }
.e-box.hi{ fill:#EAF2FF; stroke:#0A4DDB; }
.e-box.dark{ fill:#0B1F3A; stroke:#0B1F3A; }
.e-t{ font-family:'Manrope',system-ui,sans-serif; font-size:13.5px; font-weight:600; fill:#102A56; }
.e-t.light{ fill:#FFFFFF; }
.e-s{ font-family:'Manrope',system-ui,sans-serif; font-size:10.5px; font-weight:600; fill:#64748B; }
.e-path{ fill:none; stroke:#0A4DDB; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; marker-end:url(#arr); }
.e-ic{ fill:none; stroke:#0A4DDB; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.e-ic.w{ stroke:#00C2FF; }
.la-l{ stroke:rgba(255,255,255,.22); stroke-width:1.5; fill:none; }
.la-s{ stroke:#00C2FF; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.la-w{ stroke:#FFFFFF; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.la-t{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; fill:#B8C7E0; letter-spacing:.08em; }
.b-l{ stroke:rgba(255,255,255,.16); stroke-width:1.5; fill:none; }
.b-c{ stroke:#00C2FF; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.b-w{ stroke:#FFFFFF; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.b-f{ fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.18); stroke-width:1.5; }
.g-ring{ fill:none; stroke:#D6E2F5; stroke-width:1.5; }
.g-l{ fill:none; stroke:#0A4DDB; stroke-width:1.5; stroke-dasharray:3 6; }
.g-n{ fill:#FFFFFF; stroke:#E2E8F0; stroke-width:1.5; }
.g-n.hi{ fill:#EAF2FF; stroke:#0A4DDB; }
.g-t{ font-family:'Manrope',sans-serif; font-size:15px; font-weight:600; fill:#102A56; text-anchor:middle; }
.g-t.sm{ font-size:12px; fill:#64748B; font-family:'Manrope',sans-serif; font-weight:700; }

/* =========================================================
   Interaction layer — hover, focus and micro-interactions
   ========================================================= */
.btn{ position:relative; overflow:hidden; isolation:isolate; transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform .28s var(--ease),box-shadow .28s var(--ease); will-change:transform; }
.btn > *{ position:relative; z-index:1; }
.btn::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-130%); transition:transform .7s var(--ease); pointer-events:none; }
.btn:hover::after,.btn:focus-visible::after{ transform:translateX(130%); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary:hover{ box-shadow:0 10px 24px -10px rgba(10,77,219,.65); }
.btn-secondary:hover{ background:var(--accent); border-color:var(--primary); color:var(--primary); box-shadow:0 10px 24px -14px rgba(16,42,86,.4); }
.btn-light:hover{ box-shadow:0 12px 28px -12px rgba(11,31,58,.5); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn:active{ transform:translateY(0) scale(.98); transition-duration:.08s; }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-ghost::after,.btn-light::after{ background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); }

/* Nav links: underline grows from the left */
.nav-links a{ position:relative; background:none; }
.nav-links a::after{ content:""; position:absolute; left:14px; right:14px; bottom:9px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); }
.nav-links a:hover{ background:transparent; color:var(--primary); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); }
.logo{ transition:transform .3s var(--ease); }
.logo:hover{ transform:translateY(-1px); }

/* Feature groups: lift, icon tiles fill on hover */
.group{ transition:border-color var(--dur-fast),box-shadow .32s var(--ease),transform .32s var(--ease); }
/* While GSAP drives an element's transform, its CSS transform transition is switched off */
[data-anim]{ transition-property:border-color,box-shadow,background,color!important; }
.group:hover{ transform:translateY(-4px); box-shadow:inset 0 2px 0 var(--primary),0 20px 40px -24px rgba(16,42,86,.35); }
.group.lead:hover{ box-shadow:inset 0 2px 0 var(--cyan),0 24px 48px -24px rgba(11,31,58,.7); }
.feature{ padding:6px; margin:-6px; border-radius:var(--radius-sm); transition:background .25s var(--ease); }
.feature:hover{ background:var(--tint); }
.group.lead .feature:hover{ background:rgba(255,255,255,.05); }
.feature .ico{ transition:background .25s var(--ease),color .25s var(--ease),transform .3s var(--ease); }
.feature:hover .ico{ background:var(--primary); color:#fff; transform:translateY(-2px); }
.group.lead .feature:hover .ico{ background:var(--cyan); color:var(--sidebar); }
.feature .ico svg{ transition:transform .3s var(--ease); }
.feature:hover .ico svg{ transform:scale(1.08); }

/* Ecosystem list rows */
.eco-list li{ transition:background .25s var(--ease),padding-left .3s var(--ease); border-radius:var(--radius-sm); }
.eco-list li:hover{ background:var(--tint); padding-left:8px; }
.eco-list .k{ transition:background .25s var(--ease),color .25s var(--ease); }
.eco-list li:hover .k{ background:var(--primary); color:#fff; }
.eco-diagram .e-box{ transition:fill .25s var(--ease),stroke .25s var(--ease); }
.eco-diagram .eco-node:hover .e-box{ fill:var(--accent); stroke:var(--primary); }
.eco-diagram .eco-node:hover .e-box.dark{ fill:var(--secondary); stroke:var(--cyan); }

/* Steps */
.steps::before{ transform:scaleX(var(--line,1)); transform-origin:left; }
.step-art{ transition:border-color .25s var(--ease),box-shadow .32s var(--ease),background .25s var(--ease); }
.step:hover .step-art{ border-color:var(--primary); background:var(--tint); box-shadow:0 16px 30px -20px rgba(10,77,219,.6); }
.step-n{ transition:transform .3s var(--ease); }
.step:hover .step-n{ transform:scale(1.15); }

/* Benefits rows */
.ben-list li{ transition:background .25s var(--ease),padding-left .3s var(--ease); border-radius:var(--radius-sm); }
.ben-list li:hover{ background:rgba(255,255,255,.05); padding-left:10px; }

/* Global chips + facts */
.chips li{ transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease); }
.chips li:hover{ border-color:var(--primary); background:var(--accent); transform:translateY(-2px); }
.global-art .glob-node circle{ transition:transform .3s var(--ease),fill .25s var(--ease); transform-box:fill-box; transform-origin:center; }
.global-art .glob-node:hover circle{ transform:scale(1.12); fill:var(--accent); }

/* Pricing */
.price-panel{ transition:box-shadow .35s var(--ease),transform .35s var(--ease); }
.price-panel:hover{ box-shadow:0 30px 60px -36px rgba(16,42,86,.4); transform:translateY(-3px); }
.price-includes li{ transition:padding-left .25s var(--ease); }
.price-includes li:hover{ padding-left:4px; }

/* Footer links slide */
.footer a{ transition:color .2s,transform .25s var(--ease); }
.footer ul a:hover{ transform:translateX(4px); }

/* Section-head reveal pieces (driven by JS; untouched without JS) */
.js .section-head .eyebrow::before{ transform-origin:left; }

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after,.btn svg,.group,.feature,.feature .ico,.step-art,.step-art svg,.chips li,.price-panel,.footer a,.logo,.nav-links a::after{ transition:none!important; }
  .btn:hover,.group:hover,.step:hover .step-art,.price-panel:hover,.chips li:hover{ transform:none!important; }
}
@media (hover:none){
  .btn:hover,.group:hover,.price-panel:hover{ transform:none; }
}

/* Buttons driven by the magnetic pointer effect must not CSS-transition their transform */
.btn.is-magnetic{ transition-property:background,color,border-color,box-shadow; }
.btn.is-magnetic:hover{ box-shadow:0 12px 26px -10px rgba(10,77,219,.6); }

/* =========================================================
   Footer legal links
   ========================================================= */
.footer-legal{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.footer-legal a{ min-height:44px; }

/* =========================================================
   Legal / policy pages (privacy, terms, refund)
   ========================================================= */
.legal-hero{ padding:calc(var(--nav-h) + clamp(40px,6vw,80px)) 0 clamp(36px,5vw,56px); background:var(--panel); border-bottom:1px solid var(--border); }
.legal-hero h1{ font-size:clamp(2.25rem,5vw,3.75rem); margin-bottom:16px; max-width:18ch; }
.legal-hero .lead{ font-size:1.125rem; color:var(--mut); max-width:60ch; }
.legal-meta{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:20px; font-size:var(--fs-small); color:var(--mut); }
.legal-meta strong{ color:var(--secondary); font-weight:600; }
.legal-body{ padding:clamp(40px,6vw,72px) 0 calc(clamp(56px,8vw,96px) + var(--mobile-bar)); }
.legal-grid{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.toc{ position:sticky; top:calc(var(--nav-h) + 24px); }
.toc h2{ font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:10px; }
.toc a{ display:flex; align-items:center; min-height:44px; padding:6px 12px; border-left:2px solid var(--border); color:var(--mut); font-weight:600; font-size:var(--fs-small); transition:color .2s,border-color .2s,background .2s; }
.toc a:hover,.toc a.is-active{ color:var(--primary); border-left-color:var(--primary); background:var(--accent); text-decoration:none; }
.legal-content{ max-width:76ch; }
.legal-content h2{ font-size:clamp(1.375rem,2vw,1.75rem); margin:clamp(40px,5vw,56px) 0 14px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:1.125rem; margin:26px 0 8px; }
.legal-content p,.legal-content li{ color:var(--ink); line-height:1.7; }
.legal-content p{ margin-bottom:14px; }
.legal-content ul,.legal-content ol{ margin:0 0 16px; padding-left:24px; }
.legal-content ul{ list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ margin-bottom:8px; }
.legal-content li::marker{ color:var(--primary); }
.legal-content a{ font-weight:600; }
.legal-content .callout{ background:var(--accent); border-left:3px solid var(--primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:16px 18px; margin:20px 0; }
.legal-content .callout p:last-child{ margin-bottom:0; }
.legal-content .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 20px; }
.legal-content table{ width:100%; min-width:520px; border-collapse:collapse; font-size:var(--fs-small); }
.legal-content th,.legal-content td{ text-align:left; padding:12px 14px; border:1px solid var(--border); vertical-align:top; }
.legal-content th{ background:var(--tint); font-family:var(--font-display); font-weight:600; color:var(--secondary); }
.legal-cta{ margin-top:clamp(40px,5vw,64px); padding:clamp(22px,3vw,32px); background:var(--sidebar); color:#fff; border-radius:var(--radius); display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between; }
.legal-cta h2{ color:#fff; font-size:1.25rem; margin:0 0 4px; }
.legal-cta p{ color:var(--on-dark); margin:0; }
@media (max-width:900px){
  .legal-grid{ grid-template-columns:minmax(0,1fr); } /* minmax(0) so the scrollable table cannot widen the page */
  .toc{ position:static; }
  .toc ul{ display:flex; flex-wrap:wrap; gap:6px; }
  .toc a{ border:1px solid var(--border); border-left-width:1px; border-radius:6px; padding:0 14px; min-height:44px; }
  .toc a:hover,.toc a.is-active{ border-color:var(--primary); }
}

/* =========================================================
   Photography — shared frame
   ========================================================= */
.photo{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:var(--accent); isolation:isolate; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.03); }
.photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(160deg,rgba(10,77,219,.12),rgba(16,42,86,.32)); mix-blend-mode:multiply; pointer-events:none; }
.photo::after{ content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(16,42,86,.08); pointer-events:none; }
.module-figure{ margin:0; }
.photo-caption{ display:flex; align-items:center; gap:10px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border); font-family:var(--font-display); font-weight:600; font-size:.875rem; color:var(--secondary); }
.photo-caption .ico{ width:28px; height:28px; border-radius:6px; background:var(--accent); color:var(--primary); display:grid; place-items:center; }
.photo-caption .ico svg{ width:16px; height:16px; }

/* =========================================================
   Built-for band (dark navy, photo tiles)
   ========================================================= */
.band{ background:var(--sidebar); color:#fff; }
.band h2{ color:#fff; }
.band .section-head p{ color:var(--on-dark); }
.band .eyebrow{ color:var(--cyan); } .band .eyebrow::before{ background:var(--cyan); }
.band-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.tile{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--secondary); aspect-ratio:3/4; isolation:isolate; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03); transition:transform .9s var(--ease); }
.tile::before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,77,219,.14),rgba(16,42,86,.34)); mix-blend-mode:multiply; }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,31,58,0) 35%,rgba(11,31,58,.92) 100%); }
.tile-body{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:1; }
.tile-body h3{ color:#fff; font-size:1.25rem; margin-bottom:6px; }
.tile-body p{ color:var(--on-dark); font-size:var(--fs-small); max-width:28ch; }
.tile-body .k{ display:inline-block; font-family:var(--font-display); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; }
.tile:hover img{ transform:scale(1.05); }
@media (max-width:980px){ .band-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .band-grid{ grid-template-columns:1fr; } .tile{ aspect-ratio:4/3; } }

/* =========================================================
   Feature modules — photo-led deep dives
   ========================================================= */
.module-index{ display:flex; flex-wrap:wrap; gap:8px; margin:-16px 0 clamp(40px,6vw,72px); }
.module-index a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--border); border-radius:6px; background:var(--panel); color:var(--secondary); font-weight:600; font-size:var(--fs-small); transition:border-color .2s,background .2s,color .2s,transform .25s var(--ease); }
.module-index a:hover{ border-color:var(--primary); background:var(--accent); color:var(--primary); text-decoration:none; transform:translateY(-2px); }
.module-index a span{ font-family:var(--font-display); font-size:.75rem; color:var(--primary); }
.module{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,5vw,80px); align-items:center; padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 16px); }
.module:first-of-type{ border-top:0; padding-top:0; }
.module.flip .module-media{ order:2; }
.module-media{ position:relative; }
.module-media .photo{ aspect-ratio:4/3; }
.module-media .photo img{ transform:scale(1.08); }   /* head-room for the scroll parallax */
.module-media .lead-art{ margin-top:18px; background:var(--sidebar); border-radius:var(--radius); padding:18px 18px 8px; }
.module-media .lead-art svg{ width:100%; height:auto; }
.module-copy .eyebrow{ margin-bottom:14px; }
.module-copy h3{ font-size:clamp(1.75rem,3vw,2.5rem); margin-bottom:14px; }
.module-copy > p{ color:var(--mut); font-size:1.0625rem; margin-bottom:28px; max-width:58ch; }
.fd-list{ display:grid; gap:22px; }
.fd{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; }
.fd .ico{ width:44px; height:44px; border-radius:8px; background:var(--accent); color:var(--primary); display:grid; place-items:center; transition:background .25s var(--ease),color .25s var(--ease),transform .3s var(--ease); }
.fd .ico svg{ width:22px; height:22px; }
.fd:hover .ico{ background:var(--primary); color:#fff; transform:translateY(-2px); }
.fd h4{ font-size:1.0625rem; margin-bottom:4px; }
.fd > div > p{ color:var(--mut); font-size:var(--fs-small); margin-bottom:8px; }
.fd ul{ display:grid; gap:4px; }
.fd li{ position:relative; padding-left:18px; font-size:var(--fs-small); color:var(--ink); }
.fd li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--cyan); }
.module-copy .btn{ margin-top:28px; }
@media (max-width:980px){
  .module{ grid-template-columns:1fr; gap:28px; }
  .module.flip .module-media{ order:0; }
  .module-media .photo{ aspect-ratio:16/10; }
}
@media (max-width:640px){ .fd{ grid-template-columns:40px 1fr; gap:12px; } .fd .ico{ width:40px; height:40px; } }

/* =========================================================
   Contact / demo request
   ========================================================= */
.contact{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.contact-form{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(22px,3vw,36px); display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:grid; gap:6px; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:.875rem; color:var(--secondary); }
.field label span{ color:var(--danger); }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink); background:var(--tint); border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color .2s,box-shadow .2s,background .2s; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--accent); }
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.form-foot small{ color:var(--mut); font-size:.875rem; }
.form-status{ display:none; padding:12px 14px; border-radius:var(--radius-sm); font-size:var(--fs-small); font-weight:600; }
.form-status.ok{ display:block; background:#EAF7EE; color:#166534; border:1px solid #BBE5C8; }
.form-status.err{ display:block; background:#FDECEC; color:#991B1B; border:1px solid #F5C2C2; }
.contact-side{ display:grid; gap:14px; }
.contact-list{ display:grid; }
.contact-row{ display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; padding:18px 0; border-top:1px solid var(--border); }
.contact-row:last-child{ border-bottom:1px solid var(--border); }
.contact-row .glyph{ width:28px; height:28px; color:var(--primary); display:grid; place-items:center; }
.contact-row .glyph svg{ width:22px; height:22px; }
.contact-row h3{ font-size:1rem; margin-bottom:4px; }
.contact-row p{ color:var(--mut); font-size:var(--fs-small); }
.contact-row a{ word-break:break-word; }
.contact-side .photo{ aspect-ratio:4/3; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* =========================================================
   Feature pages
   ========================================================= */
.fhero{ padding:calc(var(--nav-h) + clamp(40px,6vw,88px)) 0 clamp(48px,6vw,88px); background:linear-gradient(180deg,#FFFFFF 0%,var(--bg) 100%); border-bottom:1px solid var(--border); }
.fhero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.fhero h1{ font-size:clamp(2.5rem,4.2vw,3.75rem); line-height:1.06; letter-spacing:-.03em; margin-bottom:20px; max-width:19ch; }
.fhero h1 em{ font-style:normal; color:var(--primary); }
.fhero .lead{ font-size:clamp(1.0625rem,1.3vw,1.2rem); color:var(--mut); max-width:56ch; margin-bottom:28px; }
.fhero .hero-actions{ margin-bottom:28px; }
.fhero-list{ display:flex; flex-wrap:wrap; gap:6px 22px; padding-top:18px; border-top:1px solid var(--border); }
.fhero-list a{ display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--secondary); font-weight:600; font-size:var(--fs-small); }
.fhero-list a::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--primary); }
.fhero-list a:hover{ color:var(--primary); text-decoration:none; }
.fhero-media .photo{ aspect-ratio:5/4; }
@media (max-width:980px){ .fhero-grid{ grid-template-columns:1fr; } .fhero h1{ max-width:none; } .fhero-media .photo{ aspect-ratio:16/10; } }

.foverview{ background:var(--panel); border-bottom:1px solid var(--border); }
.frail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border-top:1px solid var(--border); }
.frail li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:24px 24px 24px 0; border-bottom:1px solid var(--border); align-items:start; }
.frail-n{ font-family:var(--font-display); font-weight:700; color:var(--primary); font-size:.9375rem; padding-top:4px; font-variant-numeric:tabular-nums; }
.frail h3{ font-size:1.0625rem; margin-bottom:6px; }
.frail h3 a{ color:var(--secondary); }
.frail h3 a:hover{ color:var(--primary); text-decoration:none; }
.frail p{ color:var(--mut); font-size:var(--fs-small); }

.fdeep,.features{ background:var(--bg); overflow-x:clip; }   /* module rows slide in from the side; clip the frame, not the page */
.fdeep .module{ scroll-margin-top:calc(var(--nav-h) + 16px); }
.fdeep .module-copy h2{ font-size:clamp(1.75rem,3vw,2.5rem); margin-bottom:14px; }
.fsteps-wrap{ margin-top:18px; padding:20px 22px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.fsteps-wrap h4{ font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:12px; }
.fsteps{ counter-reset:fs; display:grid; gap:10px; }
.fsteps li{ position:relative; padding-left:38px; font-size:var(--fs-small); color:var(--ink); line-height:1.55; }
.fsteps li::before{ counter-increment:fs; content:counter(fs); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.75rem; display:grid; place-items:center; }
.connects{ margin-top:24px; padding-top:16px; border-top:1px solid var(--border); color:var(--mut); font-size:var(--fs-small); }
.connects strong{ color:var(--secondary); font-weight:600; margin-right:4px; }

.faq{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.faq-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(32px,5vw,72px); align-items:start; }
.faq-grid .section-head{ margin-bottom:0; position:sticky; top:calc(var(--nav-h) + 24px); }
.faq-list{ border-top:1px solid var(--border); }
.faq-list details{ border-bottom:1px solid var(--border); }
.faq-list summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:16px 0; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--secondary); transition:color .2s; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover{ color:var(--primary); }
.faq-list summary svg{ width:20px; height:20px; flex:none; color:var(--primary); transition:transform .3s var(--ease); }
.faq-list details[open] summary svg{ transform:rotate(180deg); }
.faq-a{ padding:0 0 20px; max-width:66ch; }
.faq-a p{ color:var(--ink); line-height:1.7; }
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr; } .faq-grid .section-head{ position:static; margin-bottom:24px; } }

.related{ background:var(--bg); }
.related-list{ border-top:1px solid var(--border); }
.related-list li{ border-bottom:1px solid var(--border); }
.related-list a{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 24px; gap:16px 24px; align-items:center; padding:20px 0; color:var(--secondary); transition:padding-left .3s var(--ease),color .2s; }
.related-list a:hover{ text-decoration:none; color:var(--primary); padding-left:10px; }
.related-t{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; }
.related-d{ color:var(--mut); font-size:var(--fs-small); }
.related-list svg{ width:22px; height:22px; color:var(--primary); transition:transform .3s var(--ease); }
.related-list a:hover svg{ transform:translateX(4px); }
@media (max-width:640px){ .related-list a{ grid-template-columns:minmax(0,1fr) 24px; } .related-d{ grid-column:1 / -1; } }

/* "Learn more" links on the home page module rows */
.link-more{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:22px; font-family:var(--font-display); font-weight:600; color:var(--primary); }
.link-more svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.link-more:hover{ text-decoration:none; }
.link-more:hover svg{ transform:translateX(4px); }
.module-copy .link-more + .btn{ margin-left:16px; }

/* =========================================================
   Mega header — desktop panel, tablet/mobile drawer
   ========================================================= */
.nav.is-open{ background:#fff; border-bottom-color:var(--border); }
.nav-item{ display:inline-flex; }
.nav-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; background:none; border:0; cursor:pointer; color:var(--secondary); font-family:var(--font-body); font-weight:600; font-size:.9375rem; border-radius:var(--radius-sm); position:relative; }
.nav-btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.nav-btn[aria-expanded="true"]{ color:var(--primary); }
.nav-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-btn::after{ content:""; position:absolute; left:14px; right:14px; bottom:9px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); }
.nav-btn:hover::after,.nav-btn[aria-expanded="true"]::after{ transform:scaleX(1); }
.nav-btn:hover{ color:var(--primary); }

.mega{ position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-shadow:0 30px 60px -40px rgba(11,31,58,.45); z-index:5; }
.mega[hidden]{ display:none; }
.nav .mega-grid{ display:grid; align-items:start; justify-content:normal; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); padding-top:28px; padding-bottom:32px; }
.mega-col .mega-h{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.mega-modules ul{ display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; }
.mega-modules a{ display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:start; padding:10px 10px; border-radius:var(--radius-sm); color:var(--secondary); transition:background .2s; }
.mega-modules a:hover{ background:var(--tint); text-decoration:none; }
.mega-ico{ grid-row:1 / span 2; width:36px; height:36px; border-radius:8px; background:var(--accent); color:var(--primary); display:grid; place-items:center; transition:background .2s,color .2s; }
.mega-ico svg{ width:20px; height:20px; }
.mega-modules a:hover .mega-ico{ background:var(--primary); color:#fff; }
.mega-t{ font-family:var(--font-display); font-weight:600; font-size:.9375rem; line-height:1.3; }
.mega-d{ color:var(--mut); font-size:.875rem; line-height:1.45; margin-top:2px; }
.mega-plain li a{ display:flex; align-items:center; min-height:40px; color:var(--secondary); font-weight:600; font-size:.9375rem; padding:0 2px; border-bottom:1px solid transparent; }
.mega-plain li a:hover{ color:var(--primary); text-decoration:none; }
.mega-note{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); color:var(--mut); font-size:.875rem; }
.nav-signin{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--secondary); font-weight:600; font-size:.9375rem; }
.nav-signin:hover{ color:var(--primary); text-decoration:none; }

/* Burger */
.nav-burger{ display:none; width:44px; height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.nav-burger span{ display:block; height:2px; background:var(--secondary); border-radius:2px; transition:transform .3s var(--ease),opacity .2s; transform-origin:center; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer */
.drawer{ position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:4; border-top:1px solid var(--border); }
.drawer[hidden]{ display:none; }
.nav .drawer-inner{ display:block; height:auto; padding-top:12px; padding-bottom:calc(32px + var(--mobile-bar)); }
.drawer-group summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:52px; font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--secondary); cursor:pointer; border-bottom:1px solid var(--border); }
.drawer-group summary::-webkit-details-marker{ display:none; }
.drawer-group summary svg{ width:20px; height:20px; color:var(--primary); transition:transform .3s var(--ease); }
.drawer-group[open] summary svg{ transform:rotate(180deg); }
.drawer-group ul{ padding:8px 0 10px; border-bottom:1px solid var(--border); }
.drawer-group li a{ display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; min-height:52px; padding:8px 0; color:var(--secondary); }
.drawer-group li a:hover{ text-decoration:none; color:var(--primary); }
.drawer-group li a > span:last-child{ display:grid; }
.drawer-group .drawer-all{ display:flex; grid-template-columns:none; min-height:44px; font-weight:600; color:var(--primary); }
.drawer-links li a{ display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--border); font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--secondary); }
.drawer-links li a:hover{ color:var(--primary); text-decoration:none; }
.drawer-cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:20px; }
.drawer-cta .btn{ width:100%; }
html.menu-open, html.menu-open body{ overflow:hidden; }   /* scroll lock only while the drawer is open */

@media (max-width:900px){
  .nav-burger{ display:flex; }
  .nav-signin{ display:none; }
  .nav .container{ gap:12px; }
}
@media (max-width:480px){
  .nav-cta{ display:none; }   /* logo + menu button only; the sticky bar carries the main action */
}
@media (min-width:901px){ .drawer{ display:none!important; } }
@media (max-width:400px){ .drawer-cta{ grid-template-columns:1fr; } }

/* =========================================================
   Store badges, download band, 16-module menus
   ========================================================= */
.store-badges{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; }
.store-badge{ display:inline-flex; align-items:center; height:44px; border-radius:6px; transition:transform .3s var(--ease),opacity .2s; }
.store-badge img{ height:44px; width:auto; display:block; }
.store-badge:hover{ transform:translateY(-2px); }
.store-badge.is-soon{ opacity:.6; cursor:default; }
.closing .store-badges{ justify-content:center; margin-top:28px; }
.footer .store-badges{ margin-top:18px; }
.hero .store-badges{ margin-top:26px; }

.download{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.download-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.download-copy h2{ font-size:var(--fs-h2); margin-bottom:18px; }
.download-copy > p{ font-size:1.125rem; color:var(--mut); max-width:52ch; }
.download-note{ margin-top:18px; font-size:var(--fs-small)!important; }
.download .photo{ aspect-ratio:4/3; }
@media (max-width:980px){ .download-grid{ grid-template-columns:1fr; } }

/* module links inside the home page feature rows */
.fd-more{ display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-top:4px; font-weight:600; font-size:var(--fs-small); color:var(--primary); }
.fd-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.fd-more:hover{ text-decoration:none; } .fd-more:hover svg{ transform:translateX(4px); }

/* mega menu: sixteen modules in four columns */
.nav .mega-grid{ grid-template-columns:minmax(0,3.2fr) minmax(200px,1fr); gap:clamp(32px,4vw,56px); }   /* modules span the panel; one Platform column on the right */
.mega-modules ul{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 16px; }
.mega-modules a{ align-items:start; }
.mega-col:not(.mega-modules){ padding-left:clamp(24px,3vw,40px); border-left:1px solid var(--border); }
.mega-modules a{ grid-template-columns:32px 1fr; padding:8px 8px; }
.mega-ico{ width:32px; height:32px; }
.mega-ico svg{ width:18px; height:18px; }
.mega-t{ font-size:.875rem; }
.mega-d{ font-size:.8125rem; }
@media (max-width:1200px){ .mega-modules ul{ grid-template-columns:repeat(3,minmax(0,1fr)); } .nav .mega-grid{ grid-template-columns:minmax(0,2.6fr) minmax(190px,1fr); } }
@media (max-width:1024px){ .mega-modules ul{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* footer: modules in two columns, wider first column */
.footer-grid{ grid-template-columns:1.4fr 1.6fr 1fr 1fr; }
.footer-modules{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }