/* ============================================================================
   Global Data — "Use Cases" CPT styles (hub archive + single). SELF-CONTAINED.
   Tokens + the small pt-* base layer are defined here directly — no dependency
   on portal.css. Pairs with use-cases.js. Tokens: primary #13ec80 / accessible
   green #047857 / Manrope / Material Symbols Outlined. Markup scoped under
   .usecases (local scope hook only).
   ============================================================================ */

/* ---- design tokens (scoped) ---- */
.usecases{
  --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;
}
.usecases .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 ---- */
.usecases .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); }
.usecases .pt-badge .material-symbols-outlined{ font-size:15px; }
.usecases .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 ---- */
.usecases.pt-hero-mesh, .usecases .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%); }

/* ---- buttons ---- */
.usecases .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; }
.usecases .pt-btn .material-symbols-outlined{ font-size:18px; }
.usecases .pt-btn-primary{ background:var(--p); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.usecases .pt-btn-primary:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.usecases .pt-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--line); color:var(--green-700); }
.usecases .pt-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.usecases .pt-btn-on-dark{ background:var(--p); color:#06281a; }
.usecases .pt-btn-on-dark:hover{ background:#fff; transform:translateY(-2px); }
.usecases .pt-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.usecases .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) ---- */
.usecases .pt-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.pt-anim .usecases .pt-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.usecases .pt-reveal.in{ opacity:1; transform:none; }
.usecases .pt-reveal.d1{ transition-delay:.08s } .usecases .pt-reveal.d2{ transition-delay:.16s } .usecases .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: theme group header
   ============================================================================ */
.usecases .uc-group-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.usecases .uc-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); }
.usecases .uc-group-head .gi .material-symbols-outlined{ font-size:23px; }
.usecases .uc-group-head h2{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.2; }
.usecases .uc-group-head p{ font-size:14px; color:var(--muted); font-weight:600; margin-top:3px; }

/* ============================================================================
   HUB: use case card
   ============================================================================ */
.usecases .uc-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; }
.usecases .uc-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.usecases .uc-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; }
.usecases .uc-card:hover .fi{ background:var(--p); border-color:var(--p); color:var(--deep); }
.usecases .uc-card .fi .material-symbols-outlined{ font-size:25px; }
.usecases .uc-card h3{ font-size:17px; font-weight:800; color:var(--ink); line-height:1.3; }
.usecases .uc-card p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:8px; }
.usecases .uc-card .go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px;
  font-size:13px; font-weight:800; color:var(--green-700); }
.usecases .uc-card .go .material-symbols-outlined{ font-size:16px; transition:transform .25s ease; }
.usecases .uc-card:hover .go .material-symbols-outlined{ transform:translateX(4px); }
/* proposed-addition flag (hub preview only — candidates from the API pages) */
.usecases .uc-card .uc-flag{ position:absolute; top:16px; right:16px; font-size:9.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--alert); background:var(--alert-soft); border:1px solid var(--alert-line);
  border-radius:100px; padding:4px 10px; }
.usecases .uc-card.is-proposed{ border-style:dashed; }

/* ============================================================================
   SINGLE: hero screening panel (per-use-case visual — watchlist variant)
   ============================================================================ */
.usecases .uc-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; }
.usecases .uc-pl-top{ display:flex; align-items:center; gap:9px; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.usecases .uc-pl-top .material-symbols-outlined{ font-size:18px; color:var(--green); }
.usecases .uc-pl-top b{ font-size:13px; font-weight:800; color:var(--ink); }
.usecases .uc-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); }
.usecases .uc-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; }
/* subject row (who is being screened) */
.usecases .uc-pl-subject{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line); background:#fff; }
.usecases .uc-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); }
.usecases .uc-pl-subject .av .material-symbols-outlined{ font-size:20px; }
.usecases .uc-pl-subject b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
.usecases .uc-pl-subject span{ font-size:11px; color:var(--muted); font-weight:600; }
.usecases .uc-pl-subject .scan{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* check rows (each list checked in sequence) */
.usecases .uc-pl-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft); transition:background .35s ease; }
.usecases .uc-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; }
.usecases .uc-pl-row .ic .material-symbols-outlined{ font-size:18px; }
.usecases .uc-pl-row .tx{ flex:1; min-width:0; }
.usecases .uc-pl-row .tx b{ display:block; font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.25; }
.usecases .uc-pl-row .tx span{ font-size:10.5px; color:var(--muted); font-weight:600; }
.usecases .uc-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; }
.usecases .uc-pl-row.on .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.usecases .uc-pl-row.on .st{ background:var(--green-soft); color:var(--green-700); border-color:var(--green-line); }
.usecases .uc-pl-row.on.hit .ic{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
.usecases .uc-pl-row.on.hit .st{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
.usecases .uc-pl-row.flash{ background:rgba(19,236,128,.10); }
.usecases .uc-pl-row.hit.flash{ background:rgba(180,83,9,.06); }
/* match strip (appears when the hit row lands) */
.usecases .uc-pl-match{ display:flex; align-items:center; gap:10px; margin:12px 16px; padding:11px 13px; border-radius:12px;
  background:var(--alert-soft); border:1px solid var(--alert-line); opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease; }
.usecases .uc-pl-match.on{ opacity:1; transform:none; }
.usecases .uc-pl-match .material-symbols-outlined{ font-size:19px; color:var(--alert); }
.usecases .uc-pl-match b{ font-size:12px; font-weight:800; color:var(--alert); }
.usecases .uc-pl-match span{ font-size:11px; font-weight:600; color:#92400e; }
.usecases .uc-pl-match .pc{ margin-left:auto; font-size:12px; font-weight:800; color:var(--alert); }
.usecases .uc-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); }
.usecases .uc-pl-foot .material-symbols-outlined{ font-size:16px; color:var(--green); }
/* no-JS / pre-anim fallback: panel shows completed end-state */
html:not(.pt-anim) .usecases .uc-pl-row .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
html:not(.pt-anim) .usecases .uc-pl-row .st{ background:var(--green-soft); color:var(--green-700); border-color:var(--green-line); }
html:not(.pt-anim) .usecases .uc-pl-row.hit .ic{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
html:not(.pt-anim) .usecases .uc-pl-row.hit .st{ background:var(--alert-soft); color:var(--alert); border-color:var(--alert-line); }
html:not(.pt-anim) .usecases .uc-pl-match{ opacity:1; transform:none; }

/* hero stat chips */
.usecases .uc-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.usecases .uc-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); }
.usecases .uc-stat .material-symbols-outlined{ font-size:19px; color:var(--green); }
.usecases .uc-stat b{ font-size:14px; font-weight:800; color:var(--ink); }
.usecases .uc-stat span{ font-size:11.5px; color:var(--muted); font-weight:600; }

/* ============================================================================
   SINGLE: feature cards (why-it-matters / related)
   ============================================================================ */
.usecases .uc-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; }
.usecases .uc-feat-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.usecases .uc-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; }
.usecases .uc-feat-card:hover .fi{ background:var(--p); border-color:var(--p); color:var(--deep); }
.usecases .uc-feat-card .fi .material-symbols-outlined{ font-size:25px; }
.usecases .uc-feat-card h3{ font-size:17px; font-weight:800; color:var(--ink); }
.usecases .uc-feat-card p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:10px; }

/* ============================================================================
   SINGLE: product spotlight
   ============================================================================ */
.usecases .uc-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; }
.usecases .uc-spot:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.usecases .uc-spot .sl{ height:34px; display:flex; align-items:center; margin-bottom:18px; }
.usecases .uc-spot .sl img{ max-height:100%; width:auto; display:block; }
.usecases .uc-spot .sl .fallback{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800; color:var(--ink); }
.usecases .uc-spot .sl .fallback .material-symbols-outlined{ font-size:24px; color:var(--green); }
.usecases .uc-spot .role{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); margin-bottom:8px; }
.usecases .uc-spot p{ font-size:14px; color:var(--body); line-height:1.6; }
.usecases .uc-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; }
.usecases .uc-spot .go .material-symbols-outlined{ font-size:16px; transition:transform .25s ease; }
.usecases .uc-spot .go:hover .material-symbols-outlined{ transform:translateX(4px); }
.usecases .uc-spot.lead{ border-color:var(--green-line); background:linear-gradient(180deg,#fff, var(--green-soft)); }

/* ============================================================================
   SINGLE: FAQ accordion
   ============================================================================ */
.usecases .uc-faq{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); }
.usecases .uc-faq + .uc-faq{ margin-top:12px; }
.usecases .uc-faq summary{ display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; list-style:none; user-select:none; }
.usecases .uc-faq summary::-webkit-details-marker{ display:none; }
.usecases .uc-faq summary h3{ font-size:15.5px; font-weight:800; color:var(--ink); flex:1; line-height:1.35; }
.usecases .uc-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; }
.usecases .uc-faq summary .tg .material-symbols-outlined{ font-size:18px; }
.usecases .uc-faq[open] summary .tg{ background:var(--p); color:var(--deep); transform:rotate(45deg); }
.usecases .uc-faq .ans{ padding:0 20px 20px 20px; font-size:14px; color:var(--body); line-height:1.65; }
.usecases .uc-faq .ans p + p{ margin-top:10px; }
/* Longer, structured answers: lists and inline emphasis inside .ans */
.usecases .uc-faq .ans ul,
.usecases .uc-faq .ans ol{ margin:10px 0 0; padding-left:20px; }
.usecases .uc-faq .ans ul{ list-style:disc; }
.usecases .uc-faq .ans ol{ list-style:decimal; }
.usecases .uc-faq .ans li + li{ margin-top:6px; }
.usecases .uc-faq .ans li::marker{ color:var(--green); }
.usecases .uc-faq .ans strong{ font-weight:700; color:var(--ink); }
.usecases .uc-faq .ans a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ============================================================================
   SINGLE: demo CTA band + dark surfaces
   ============================================================================ */
.usecases .uc-band{ position:relative; overflow:hidden; border-radius:20px; background:#0f172a; }
.usecases .uc-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%); }
.usecases .uc-band > div{ position:relative; z-index:1; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .usecases *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .usecases .pt-reveal{ opacity:1!important; transform:none!important; }
  .usecases .uc-pl-match{ opacity:1!important; transform:none!important; }
}