/* ============================================================================
   Global Data — "Solutions" CPT styles (hub archive + single). SELF-CONTAINED.
   Same token system as use-cases.css — no dependency on portal.css. Pairs with
   solutions.js. Tokens: primary #13ec80 / accessible green #047857 / Manrope /
   Material Symbols Outlined. Markup scoped under .solutions.

   Preview tweak hooks (set by solutions.js / the tweaks panel):
     body[data-sol-density="compact"]  — tighter cards
     body[data-sol-hero="dark"]        — dark hero band
     .solutions inline --p/--green…    — accent swap
   ============================================================================ */

/* ---- design tokens (scoped) ---- */
.solutions{
  --p:#13ec80; --p-dark:#0eb561;
  --green:#047857; --green-700:#065f46; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --deep:#06281a;
  --alert:#b45309; --alert-soft:#fffbeb; --alert-line:#fde68a;
}
.solutions .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  width:1em; height:1em; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; }

/* ---- brand badge / eyebrow ---- */
.solutions .pt-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-soft); padding:7px 14px; border-radius:100px; border:1px solid var(--green-line); }
.solutions .pt-badge .material-symbols-outlined{ font-size:15px; }
.solutions .pt-dot{ width:7px; height:7px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:pt-pulse 1.8s infinite; }
@keyframes pt-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

/* ---- hero mesh ---- */
.solutions .pt-hero-mesh{ background-color:#fff;
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 12% 8%,rgba(4,120,87,.08),transparent 40%); }
/* dark hero treatment (tweak) */
body[data-sol-hero="dark"] .solutions .pt-hero-mesh{ background-color:#06281a;
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.20),transparent 48%),radial-gradient(circle at 90% 10%,rgba(4,120,87,.35),transparent 45%); }
body[data-sol-hero="dark"] .solutions .pt-hero-mesh h1,
body[data-sol-hero="dark"] .solutions .pt-hero-mesh .sol-hero-accent{ color:#fff; }
body[data-sol-hero="dark"] .solutions .pt-hero-mesh .sol-hero-accent em{ color:var(--p); font-style:normal; }
body[data-sol-hero="dark"] .solutions .pt-hero-mesh p{ color:rgba(255,255,255,.78); }
body[data-sol-hero="dark"] .solutions .pt-hero-mesh .pt-badge{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); }
body[data-sol-hero="dark"] .solutions .pt-hero-mesh .pt-btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }

/* ---- buttons ---- */
.solutions .pt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.solutions .pt-btn .material-symbols-outlined{ font-size:18px; }
.solutions .pt-btn-primary{ background:var(--p); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.solutions .pt-btn-primary:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.solutions .pt-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--line); color:var(--green-700); }
.solutions .pt-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.solutions .pt-btn-on-dark{ background:#fff; color:#06281a; }
.solutions .pt-btn-on-dark:hover{ background:var(--p); transform:translateY(-2px); }
.solutions .pt-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.solutions .pt-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- reveal on scroll (gated on JS; shows end-state if script never runs) ---- */
.solutions .pt-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.pt-anim .solutions .pt-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.solutions .pt-reveal.in{ opacity:1; transform:none; }
.solutions .pt-reveal.d1{ transition-delay:.08s } .solutions .pt-reveal.d2{ transition-delay:.16s } .solutions .pt-reveal.d3{ transition-delay:.24s }

/* ============================================================================
   Bookmark sidebar nav (single template — hover-to-expand)
   ============================================================================ */
.fc-bookmark-nav{ position:absolute; left:0; top:0; transform:translateY(-50%); width:56px; max-height:84vh;
  transition:width .4s cubic-bezier(.32,.72,0,1); z-index:100; border-radius:0 20px 20px 0; overflow:hidden;
  display:flex; flex-direction:column; background:rgba(255,255,255,.85); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6); border-left:none; box-shadow:0 10px 40px -12px rgba(15,23,42,.22); }
.fc-bookmark-nav:hover{ width:264px; }
.fc-bookmark-nav .nav-label{ opacity:0; white-space:nowrap; max-width:0; overflow:hidden; margin-left:0;
  transition:max-width .4s ease,opacity .3s ease,margin .4s ease; }
.fc-bookmark-nav:hover .nav-label{ opacity:1; max-width:180px; margin-left:12px; }
.fc-bookmark-nav.is-closed{ width:56px!important; }
.fc-bookmark-nav.is-closed .nav-label{ opacity:0!important; max-width:0!important; margin-left:0!important; }
.tab-progress-container{ position:absolute; right:0; top:0; bottom:0; width:3px; background:rgba(15,23,42,.06); }
.tab-progress-bar{ width:100%; background:#13ec80; height:0%; }
.nav-link.active{ background:#ecfdf5; color:#065f46; font-weight:600; }
.nav-link.active .material-symbols-outlined{ color:#047857; }
.bottom-action-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  transition:all .3s ease; padding:0; background:#0b1220; color:#fff; }
.fc-bookmark-nav:hover .bottom-action-btn{ width:100%; justify-content:flex-start; padding:0 12px; }
.fc-bookmark-nav.is-closed .bottom-action-btn{ width:38px!important; justify-content:center!important; padding:0!important; }
.mesh-gradient{ background-image:radial-gradient(at 0% 0%,rgba(19,236,128,.06) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(4,120,87,.04) 0,transparent 50%); }
@media (max-width:1023px){ .fc-bookmark-nav{ display:none; } }

/* ============================================================================
   HUB: intent picker (the organising device)
   ============================================================================ */
.solutions .sol-intents{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:1024px){ .solutions .sol-intents{ grid-template-columns:repeat(5,1fr); } }
.solutions .sol-intent{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px; text-decoration:none; box-shadow:0 2px 10px -4px rgba(15,23,42,.06); cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solutions .sol-intent:hover{ transform:translateY(-3px); border-color:var(--green-line); box-shadow:0 16px 34px -16px rgba(15,23,42,.2); }
.solutions .sol-intent .ii{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); transition:.25s; }
.solutions .sol-intent:hover .ii{ background:var(--p); border-color:var(--p); color:var(--deep); }
/* color:inherit so the glyph follows .ii (green, dark on hover) instead of
   being caught by the generic `.sol-intent span` grey below */
.solutions .sol-intent .ii .material-symbols-outlined{ font-size:22px; color:inherit; }
.solutions .sol-intent b{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3; }
.solutions .sol-intent span{ font-size:12px; color:var(--muted); font-weight:600; line-height:1.45; }
.solutions .sol-intent .go{ margin-top:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--green-700); }
.solutions .sol-intent .go .material-symbols-outlined{ font-size:14px; color:inherit; transition:transform .25s ease; }
.solutions .sol-intent:hover .go .material-symbols-outlined{ transform:translateX(3px); }

/* ============================================================================
   HUB: group header
   ============================================================================ */
.solutions .sol-group-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.solutions .sol-group-head .gi{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.solutions .sol-group-head .gi .material-symbols-outlined{ font-size:23px; }
.solutions .sol-group-head h2{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.2; }
.solutions .sol-group-head p{ font-size:14px; color:var(--muted); font-weight:600; margin-top:3px; }

/* ============================================================================
   HUB: solution card (+ "Available in" footer)
   ============================================================================ */
.solutions .sol-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:24px; height:100%; text-decoration:none; box-shadow:0 2px 10px -4px rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solutions .sol-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.solutions .sol-card .fi{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); margin-bottom:16px; transition:.25s; }
.solutions .sol-card:hover .fi{ background:var(--p); border-color:var(--p); color:var(--deep); }
.solutions .sol-card .fi .material-symbols-outlined{ font-size:25px; }
.solutions .sol-card h3{ font-size:17px; font-weight:800; color:var(--ink); line-height:1.3; }
.solutions .sol-card p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:8px; }
.solutions .sol-card .go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px;
  font-size:13px; font-weight:800; color:var(--green-700); }
.solutions .sol-card .go .material-symbols-outlined{ font-size:16px; transition:transform .25s ease; }
.solutions .sol-card:hover .go .material-symbols-outlined{ transform:translateX(4px); }
.solutions .sol-card .sol-avail{ display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:11px; font-weight:700; color:var(--muted); line-height:1.5; }
.solutions .sol-card .sol-avail .material-symbols-outlined{ font-size:14px; color:var(--faint); }
/* merged-page flag (preview note only) */
.solutions .sol-card .sol-flag{ position:absolute; top:16px; right:16px; font-size:9.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-soft); border:1px solid var(--green-line);
  border-radius:100px; padding:4px 10px; }

/* compact density (tweak) */
body[data-sol-density="compact"] .solutions .sol-card{ padding:16px; border-radius:14px; }
body[data-sol-density="compact"] .solutions .sol-card .fi{ width:38px; height:38px; border-radius:10px; margin-bottom:11px; }
body[data-sol-density="compact"] .solutions .sol-card .fi .material-symbols-outlined{ font-size:20px; }
body[data-sol-density="compact"] .solutions .sol-card h3{ font-size:15px; }
body[data-sol-density="compact"] .solutions .sol-card p{ font-size:12.5px; margin-top:6px; }
body[data-sol-density="compact"] .solutions .sol-card .go{ padding-top:10px; font-size:12px; }
body[data-sol-density="compact"] .solutions .sol-card .sol-avail{ margin-top:9px; padding-top:9px; font-size:10.5px; }
body[data-sol-density="compact"] .solutions .sol-grid{ gap:14px!important; }
@media (min-width:1280px){ body[data-sol-density="compact"] .solutions .sol-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ============================================================================
   HUB: use-case cross-link strip ("problem-first pages")
   ============================================================================ */
.solutions .sol-uc-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; padding:14px 16px;
  border:1px dashed var(--green-line); border-radius:14px; background:var(--green-soft); }
.solutions .sol-uc-strip .lbl{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green-700); margin-right:4px; }
.solutions .sol-uc-strip .lbl .material-symbols-outlined{ font-size:16px; }
.solutions .sol-uc-strip a{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--green-700);
  background:#fff; border:1px solid var(--green-line); border-radius:100px; padding:6px 13px; text-decoration:none; transition:.2s; }
.solutions .sol-uc-strip a:hover{ background:var(--p); border-color:var(--p); color:var(--deep); }
.solutions .sol-uc-strip a .material-symbols-outlined{ font-size:14px; }

/* ============================================================================
   HUB: filter chips (flat "filterable grid" mode)
   ============================================================================ */
.solutions .sol-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.solutions .sol-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--body);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 17px; cursor:pointer; font-family:inherit; transition:.2s; }
.solutions .sol-chip .material-symbols-outlined{ font-size:16px; color:var(--muted); }
.solutions .sol-chip:hover{ border-color:var(--green-line); color:var(--green-700); }
.solutions .sol-chip.on{ background:var(--deep); border-color:var(--deep); color:#fff; }
.solutions .sol-chip.on .material-symbols-outlined{ color:var(--p); }

/* ============================================================================
   HUB: API endpoint catalogue
   ============================================================================ */
.solutions .sol-api-cat{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); break-inside:avoid; margin-bottom:16px; }
.solutions .sol-api-cat summary{ display:flex; align-items:center; gap:11px; padding:15px 18px; cursor:pointer; list-style:none; user-select:none; }
.solutions .sol-api-cat summary::-webkit-details-marker{ display:none; }
.solutions .sol-api-cat summary .ci{ width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.solutions .sol-api-cat summary .ci .material-symbols-outlined{ font-size:19px; }
.solutions .sol-api-cat summary h3{ flex:1; font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3; }
.solutions .sol-api-cat summary .ct{ font-size:11px; font-weight:800; color:var(--muted); background:var(--surface-3); border:1px solid var(--line);
  border-radius:100px; padding:3px 9px; }
.solutions .sol-api-cat summary .tg{ width:26px; height:26px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--muted); transition:background .25s ease, color .25s ease, transform .3s ease; }
.solutions .sol-api-cat summary .tg .material-symbols-outlined{ font-size:17px; }
.solutions .sol-api-cat[open] summary .tg{ background:var(--p); color:var(--deep); transform:rotate(45deg); }
.solutions .sol-api-cat .eps{ display:flex; flex-wrap:wrap; gap:7px; padding:2px 18px 16px 18px; }
.solutions .sol-api-cat .eps a{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--body);
  background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:6px 12px; text-decoration:none; transition:.2s; }
.solutions .sol-api-cat .eps a:hover{ background:var(--green-soft); border-color:var(--green-line); color:var(--green-700); }
.solutions .sol-api-cat .eps a .material-symbols-outlined{ font-size:13px; color:var(--faint); }
.solutions .sol-api-cols{ column-count:1; column-gap:16px; }
@media (min-width:768px){ .solutions .sol-api-cols{ column-count:2; } }
@media (min-width:1280px){ .solutions .sol-api-cols{ column-count:3; } }

/* ============================================================================
   SINGLE (LEGACY — unused since the July 2026 spec-sheet redesign; kept for
   reference only): hero verification panel (per-solution visual)
   ============================================================================ */
.solutions .sol-panel{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.18); max-width:440px; margin-inline:auto; }
.solutions .sol-pl-top{ display:flex; align-items:center; gap:9px; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.solutions .sol-pl-top .material-symbols-outlined{ font-size:18px; color:var(--green); }
.solutions .sol-pl-top b{ font-size:13px; font-weight:800; color:var(--ink); }
.solutions .sol-pl-top .lv{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700); }
.solutions .sol-pl-top .lv::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.6); animation:pt-pulse 1.6s infinite; }
.solutions .sol-pl-subject{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line); background:#fff; }
.solutions .sol-pl-subject .av{ width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); border:1px solid var(--line); color:var(--muted); }
.solutions .sol-pl-subject .av .material-symbols-outlined{ font-size:20px; }
.solutions .sol-pl-subject b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
.solutions .sol-pl-subject span{ font-size:11px; color:var(--muted); font-weight:600; }
.solutions .sol-pl-subject .scan{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.solutions .sol-pl-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft); transition:background .35s ease; }
.solutions .sol-pl-row .ic{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--faint); border:1px solid var(--line); transition:background .35s ease, color .35s ease, border-color .35s ease; }
.solutions .sol-pl-row .ic .material-symbols-outlined{ font-size:18px; }
.solutions .sol-pl-row .tx{ flex:1; min-width:0; }
.solutions .sol-pl-row .tx b{ display:block; font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.solutions .sol-pl-row .tx span{ font-size:10.5px; color:var(--muted); font-weight:600; }
.solutions .sol-pl-row .st{ margin-left:auto; flex:none; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border-radius:100px; padding:4px 10px; background:var(--surface-3); color:var(--faint); border:1px solid var(--line);
  transition:background .35s ease, color .35s ease, border-color .35s ease; }
.solutions .sol-pl-row.on .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.solutions .sol-pl-row.on .st{ background:var(--green-soft); color:var(--green-700); border-color:var(--green-line); }
.solutions .sol-pl-row.on.hit .ic{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
.solutions .sol-pl-row.on.hit .st{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
.solutions .sol-pl-row.flash{ background:rgba(19,236,128,.10); }
.solutions .sol-pl-row.hit.flash{ background:rgba(180,83,9,.06); }
.solutions .sol-pl-match{ display:flex; align-items:center; gap:10px; margin:12px 16px; padding:11px 13px; border-radius:12px;
  background:var(--green-soft); border:1px solid var(--green-line); opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease; }
.solutions .sol-pl-match.on{ opacity:1; transform:none; }
.solutions .sol-pl-match .material-symbols-outlined{ font-size:19px; color:var(--green); }
.solutions .sol-pl-match b{ font-size:12px; font-weight:800; color:var(--green-700); }
.solutions .sol-pl-match span{ font-size:11px; font-weight:600; color:var(--green); }
.solutions .sol-pl-match .pc{ margin-left:auto; font-size:12px; font-weight:800; color:var(--green-700); }
.solutions .sol-pl-foot{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface-2); font-size:11.5px; font-weight:600; color:var(--green-700); }
.solutions .sol-pl-foot .material-symbols-outlined{ font-size:16px; color:var(--green); }
html:not(.pt-anim) .solutions .sol-pl-row .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
html:not(.pt-anim) .solutions .sol-pl-row .st{ background:var(--green-soft); color:var(--green-700); border-color:var(--green-line); }
html:not(.pt-anim) .solutions .sol-pl-match{ opacity:1; transform:none; }

/* hero stat chips */
.solutions .sol-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.solutions .sol-stat{ display:flex; align-items:center; gap:9px; padding:10px 15px; border-radius:12px; background:rgba(255,255,255,.8);
  border:1px solid var(--line); }
.solutions .sol-stat .material-symbols-outlined{ font-size:19px; color:var(--green); }
.solutions .sol-stat b{ font-size:14px; font-weight:800; color:var(--ink); }
.solutions .sol-stat span{ font-size:11.5px; color:var(--muted); font-weight:600; }
body[data-sol-hero="dark"] .solutions .sol-stat{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
body[data-sol-hero="dark"] .solutions .sol-stat b{ color:#fff; }
body[data-sol-hero="dark"] .solutions .sol-stat span{ color:rgba(255,255,255,.65); }

/* ============================================================================
   SINGLE (LEGACY — unused since the spec-sheet redesign): card grids
   ============================================================================ */
.solutions .sol-inc{ display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solutions .sol-inc:hover{ transform:translateY(-3px); border-color:var(--green-line); box-shadow:0 16px 34px -16px rgba(15,23,42,.18); }
.solutions .sol-inc .fi{ width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.solutions .sol-inc .fi .material-symbols-outlined{ font-size:23px; }
.solutions .sol-inc h3{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.3; }
.solutions .sol-inc p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:6px; }
.solutions .sol-inc ul{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.solutions .sol-inc li{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; font-weight:600; color:var(--body); line-height:1.5; }
.solutions .sol-inc li .material-symbols-outlined{ font-size:15px; color:var(--green); margin-top:2px; }

/* ============================================================================
   SINGLE: feature cards / product spotlight / FAQ / CTA band
   ============================================================================ */
.solutions .sol-feat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; height:100%;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solutions .sol-feat-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.solutions .sol-feat-card .fi{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); margin-bottom:16px; transition:.25s; }
.solutions .sol-feat-card:hover .fi{ background:var(--p); border-color:var(--p); color:var(--deep); }
.solutions .sol-feat-card .fi .material-symbols-outlined{ font-size:25px; }
.solutions .sol-feat-card h3{ font-size:17px; font-weight:800; color:var(--ink); }
.solutions .sol-feat-card p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:10px; }

.solutions .sol-spot{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px;
  height:100%; box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solutions .sol-spot:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.solutions .sol-spot .sl{ height:34px; display:flex; align-items:center; margin-bottom:18px; }
.solutions .sol-spot .sl img{ max-height:100%; width:auto; display:block; }
.solutions .sol-spot .sl .fallback{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800; color:var(--ink); }
.solutions .sol-spot .sl .fallback .material-symbols-outlined{ font-size:24px; color:var(--green); }
.solutions .sol-spot .role{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); margin-bottom:8px; }
.solutions .sol-spot p{ font-size:14px; color:var(--body); line-height:1.6; }
.solutions .sol-spot .go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:18px; font-size:13.5px; font-weight:800; color:var(--green-700); text-decoration:none; }
.solutions .sol-spot .go .material-symbols-outlined{ font-size:16px; transition:transform .25s ease; }
.solutions .sol-spot .go:hover .material-symbols-outlined{ transform:translateX(4px); }
.solutions .sol-spot.lead{ border-color:var(--green-line); background:linear-gradient(180deg,#fff, var(--green-soft)); }

.solutions .sol-faq{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); }
.solutions .sol-faq + .sol-faq{ margin-top:12px; }
.solutions .sol-faq summary{ display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; list-style:none; user-select:none; }
.solutions .sol-faq summary::-webkit-details-marker{ display:none; }
.solutions .sol-faq summary h3{ font-size:15.5px; font-weight:800; color:var(--ink); flex:1; line-height:1.35; }
.solutions .sol-faq summary .tg{     width: 28px;
    height: 28px;
    border-radius: 999px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    color: var(--muted);
    transition: background .25s ease, color .25s ease, transform .3s ease; }
.solutions .sol-faq summary .tg .material-symbols-outlined{ font-size:18px; }
.solutions .sol-faq[open] summary .tg{     background: var(--p);
    color: var(--deep);
    transform: rotate(45deg);}
.solutions .sol-faq .ans{ padding:0 20px 20px 20px; font-size:14px; color:var(--body); line-height:1.65; }
.solutions .sol-faq .ans p + p{ margin-top:10px; }

.solutions .sol-band{ position:relative; overflow:hidden; border-radius:20px; background:#065f46; }
.solutions .sol-band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.18),transparent 45%),radial-gradient(circle at bottom right,rgba(19,236,128,.12),transparent 45%); }
.solutions .sol-band > div{ position:relative; z-index:1; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .solutions *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .solutions .pt-reveal{ opacity:1!important; transform:none!important; }
  .solutions .sol-pl-match{ opacity:1!important; transform:none!important; }
}

/* ============================================================================
   SINGLE — SPEC-SHEET SYSTEM (July 2026 redesign)
   Register: technical datasheet. Left-aligned section heads with a right-hand
   note, bordered check rows, hairline spec grids, real tables, deep-green
   product showcase, mono details. All containers 16px radius.
   ============================================================================ */
.solutions{ --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }

/* section head: h2 left, note right */
.solutions .sol-shead{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:40px; }
.solutions .sol-shead h2{ font-size:26px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
@media (min-width:1024px){ .solutions .sol-shead h2{ font-size:30px; } }
.solutions .sol-shead .note{ margin-left:auto; font-size:13.5px; color:var(--muted); font-weight:600; max-width:340px; text-align:right; }
.solutions .sol-shead .note a{ color:var(--green); }
.solutions .sol-shead .note a:hover{ color:var(--green-700); }
@media (max-width:767px){ .solutions .sol-shead .note{ margin-left:0; text-align:left; max-width:none; } }

/* hero meta strip */
.solutions .sol-meta{ display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.75); backdrop-filter:blur(4px); margin-top:44px; }
.solutions .sol-meta > div{ padding:18px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.solutions .sol-meta > div:nth-child(2n){ border-right:none; }
.solutions .sol-meta > div:nth-last-child(-n+2){ border-bottom:none; }
@media (min-width:1024px){
  .solutions .sol-meta{ grid-template-columns:repeat(4,1fr); }
  .solutions .sol-meta > div{ border-bottom:none; border-right:1px solid var(--line); }
  .solutions .sol-meta > div:last-child{ border-right:none; }
}
.solutions .sol-meta .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.solutions .sol-meta .v{ font-size:16px; font-weight:800; color:var(--ink); margin-top:6px; }
.solutions .sol-meta .v em{ font-style:normal; color:var(--green); }

/* checks: bordered rows in one rounded container */
.solutions .sol-checks{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.solutions .sol-check{ display:grid; grid-template-columns:56px 260px 1fr; gap:24px; padding:28px; border-bottom:1px solid var(--line); }
.solutions .sol-check:last-child{ border-bottom:none; }
@media (max-width:1023px){ .solutions .sol-check{ grid-template-columns:56px 1fr; } .solutions .sol-check .desc{ grid-column:2; } }
.solutions .sol-check .ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.solutions .sol-check .ic .material-symbols-outlined{ font-size:22px; }
.solutions .sol-check h3{ font-size:17px; font-weight:800; color:var(--ink); }
.solutions .sol-check .what{ font-size:12.5px; font-weight:600; color:var(--muted); margin-top:6px; line-height:1.5; }
.solutions .sol-check .desc{ font-size:14.5px; color:var(--body); line-height:1.65; }
.solutions .sol-check .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.solutions .sol-check .src{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--green-700);
  background:var(--green-soft); border:1px solid var(--green-line); border-radius:8px; padding:3px 9px; }

/* spec grid: hairline two-column icon cells */
.solutions .sol-docgrid{ display:grid; grid-template-columns:1fr; gap:0 32px; }
@media (min-width:768px){ .solutions .sol-docgrid{ grid-template-columns:1fr 1fr; } }
.solutions .sol-docgrid .cell{ display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line-soft);
  font-size:14px; font-weight:600; color:var(--body); }
.solutions .sol-docgrid .cell > .material-symbols-outlined{ font-size:17px; color:var(--green); }
.solutions .sol-docgrid .cell .tag{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint); text-align:right; }

/* spec table */
.solutions .sol-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; min-width:640px; }
.solutions .sol-table th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:500; }
.solutions .sol-table td{ font-size:13.5px; padding:13px 18px; border-bottom:1px solid var(--line-soft); color:var(--body); vertical-align:top; }
.solutions .sol-table tr:last-child td{ border-bottom:none; }
.solutions .sol-table td b{ color:var(--ink); font-weight:800; }

/* products: showcase split */
.solutions .sol-prods{ display:grid; grid-template-columns:1fr; gap:24px; align-items:stretch; }
@media (min-width:1024px){ .solutions .sol-prods{ grid-template-columns:1.15fr 1fr; } }
.solutions .sol-showcase{ position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--deep); color:#fff;
  border-radius:20px; padding:40px 42px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
.solutions .sol-showcase:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -22px rgba(6,40,26,.55); }
.solutions .sol-showcase::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 85% 12%,rgba(19,236,128,.2),transparent 48%),radial-gradient(circle at 5% 95%,rgba(4,120,87,.4),transparent 50%); }
.solutions .sol-showcase > *{ position:relative; z-index:1; }
.solutions .sol-showcase .nm{ display:flex; align-items:center; gap:12px; }
.solutions .sol-showcase .nm .material-symbols-outlined{ font-size:28px; color:var(--p); }
.solutions .sol-showcase .nm b{ font-size:26px; font-weight:800; letter-spacing:-.015em; color:#fff; }
.solutions .sol-showcase .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--p); margin-top:16px; }
.solutions .sol-showcase p{ font-size:15px; line-height:1.7; color:rgba(255,255,255,.78); margin-top:10px; max-width:480px; }
.solutions .sol-showcase .caps{ display:flex; flex-direction:column; gap:9px; margin-top:24px; }
.solutions .sol-showcase .caps span{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:11px 15px; }
.solutions .sol-showcase .caps .material-symbols-outlined{ font-size:17px; color:var(--p); }
.solutions .sol-showcase .go{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:26px; font-size:14px; font-weight:800; color:var(--p); }
.solutions .sol-showcase .go .material-symbols-outlined{ font-size:17px; transition:transform .2s ease; }
.solutions .sol-showcase:hover .go .material-symbols-outlined{ transform:translateX(4px); }
.solutions .sol-others{ display:flex; flex-direction:column; gap:16px; }
.solutions .sol-other{ flex:1; display:grid; grid-template-columns:52px 1fr 22px; gap:16px; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:22px 24px; text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.solutions .sol-other:hover{ transform:translateY(-3px); border-color:var(--green-line); box-shadow:0 16px 36px -18px rgba(15,23,42,.22); }
.solutions .sol-other .ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.solutions .sol-other .ic .material-symbols-outlined{ font-size:24px; }
.solutions .sol-other b{ display:block; font-size:16px; font-weight:800; color:var(--ink); }
.solutions .sol-other .role{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--green-700); margin-top:4px; }
.solutions .sol-other p{ font-size:13px; color:var(--body); line-height:1.55; margin-top:6px; }
.solutions .sol-other > .material-symbols-outlined{ font-size:18px; color:var(--faint); transition:transform .2s ease, color .2s ease; }
.solutions .sol-other:hover > .material-symbols-outlined{ transform:translateX(3px); color:var(--green); }

/* API endpoint chips */
.solutions .sol-eps{ display:flex; flex-wrap:wrap; gap:8px; }
.solutions .sol-eps a{ font-family:var(--mono); font-size:12px; color:var(--body); background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; text-decoration:none; transition:.15s; }
.solutions .sol-eps a:hover{ border-color:var(--green-line); background:var(--green-soft); color:var(--green-700); }
.solutions .sol-eps a b{ color:var(--green-700); font-weight:700; }

/* FAQ: per-item rounded cards with pill toggle (matches use-case FAQ) */
.solutions .sol-qa{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.solutions .sol-qa + .sol-qa{ margin-top:12px; }
.solutions .sol-qa summary{ display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; list-style:none; user-select:none; }
.solutions .sol-qa summary::-webkit-details-marker{ display:none; }
.solutions .sol-qa summary h3{ font-size:15.5px; font-weight:800; color:var(--ink); flex:1; line-height:1.35; }
.solutions .sol-qa summary .tg{ width:28px; height:28px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--green); transition:transform .25s ease, background .25s ease, color .25s ease; }
.solutions .sol-qa summary .tg .material-symbols-outlined{ font-size:18px; }
.solutions .sol-qa[open] summary .tg{ background:var(--p); color:var(--deep); transform:rotate(45deg); }
.solutions .sol-qa .ans{ padding:0 20px 20px 20px; font-size:14px; color:var(--body); line-height:1.65; }
.solutions .sol-qa .ans p + p{ margin-top:10px; }
/* Longer, structured answers: lists and inline emphasis inside .ans */
.solutions .sol-qa .ans ul,
.solutions .sol-qa .ans ol{ margin:10px 0 0; padding-left:20px; }
.solutions .sol-qa .ans ul{ list-style:disc; }
.solutions .sol-qa .ans ol{ list-style:decimal; }
.solutions .sol-qa .ans li + li{ margin-top:6px; }
.solutions .sol-qa .ans li::marker{ color:var(--green); }
.solutions .sol-qa .ans strong{ font-weight:700; color:var(--ink); }
.solutions .sol-qa .ans a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
