/* WEBSITE-V2 / ServicePageV2 — GENERIC component styles (owner M6 §9: generic, reusable; NOT per-service).
   Reuses design-system-v0 tokens (--color-brand-primary etc.) + existing .sh-* buttons/wrap. All classes
   are .spv2-* so they can render ANY service page, not just eContract. No eContract-specific selector. */
:root { --spv2-blue: var(--color-brand-primary, #0066B3); --spv2-ink:#0f172a; --spv2-muted:#64748b; --spv2-line:#e2e8f0; --spv2-bg-soft:#f4faff; }
.spv2-page { display:block; }
.spv2-muted { color:var(--spv2-muted); }
.spv2-sub { color:var(--spv2-muted); margin:.25rem 0 0; }
.spv2-sechead { margin:0 0 14px; }
.spv2-sechead h2 { margin:0; font-size:1.4rem; color:var(--spv2-ink); }
.spv2-page section { padding:22px 0; border-top:1px solid var(--spv2-line); }
.spv2-hero { border-top:0; }
.spv2-hero-sub { max-width:60ch; }

/* staging flag */
.spv2-staging-flag { margin:10px 0; padding:6px 12px; border-radius:8px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:.82rem; font-weight:600; }

/* C2 trust bar */
.spv2-summary-text { max-width:70ch; color:#334155; }
.spv2-trustbar { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:12px 0 0; }
.spv2-trust-chip { background:var(--spv2-bg-soft); border:1px solid #cfe6fb; color:#075985; border-radius:999px; padding:5px 12px; font-size:.85rem; font-weight:600; }

/* C3 pricing */
.spv2-pricing { background:linear-gradient(180deg,var(--spv2-bg-soft),#fff); }
.spv2-price-tablewrap { overflow-x:auto; border:1px solid var(--spv2-line); border-radius:12px; }
.spv2-price-table { width:100%; border-collapse:collapse; min-width:560px; }
.spv2-price-table th, .spv2-price-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--spv2-line); font-size:.95rem; }
.spv2-price-table thead th { background:#f8fafc; color:var(--spv2-muted); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.02em; }
.spv2-price-table tbody tr:last-child td, .spv2-price-table tbody tr:last-child th { border-bottom:0; }
.spv2-pkg { font-weight:800; color:var(--spv2-blue); }
.spv2-price-cell { font-weight:700; color:var(--spv2-ink); white-space:nowrap; }
.spv2-price-contact .spv2-price-cell { color:var(--spv2-muted); font-weight:600; }
.spv2-price-cta { text-align:right; }
.spv2-btn-sm { padding:6px 14px; font-size:.85rem; }
.spv2-price-foot { margin:10px 0 0; font-size:.9rem; }
.spv2-price-safe { font-size:1.1rem; font-weight:700; color:var(--spv2-blue); }

/* advisor embedded */
.spv2-advisor { margin:14px 0 0; padding:12px 16px; background:#fff; border:1px dashed #bfdbfe; border-radius:10px; font-size:.95rem; }
.spv2-advisor-q { color:var(--spv2-muted); }
.spv2-advisor-cta { font-weight:700; color:var(--spv2-blue); text-decoration:none; }
.spv2-advisor-cta:hover { text-decoration:underline; }

/* generic grids */
.spv2-uc-grid, .spv2-deploy-grid, .spv2-addon-grid, .spv2-hub-grid, .spv2-case-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.spv2-uc-card, .spv2-deploy-card, .spv2-addon-card, .spv2-hub-card, .spv2-case-card { background:#fff; border:1px solid var(--spv2-line); border-radius:12px; padding:16px; }
.spv2-uc-card h3, .spv2-deploy-card h3, .spv2-addon-card h3, .spv2-hub-card h3 { margin:0 0 6px; font-size:1.05rem; color:var(--spv2-ink); }
.spv2-uc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.spv2-tag { background:#f1f5f9; color:#475569; border-radius:6px; padding:2px 8px; font-size:.78rem; }
.spv2-deploy-price, .spv2-addon-price { font-weight:800; color:var(--spv2-blue); margin:6px 0; }
.spv2-hub-card { text-decoration:none; color:inherit; transition:border-color .15s; }
.spv2-hub-card:hover { border-color:var(--spv2-blue); }

/* C11 model flow */
.spv2-model-flow { display:flex; flex-wrap:wrap; gap:10px; list-style:none; counter-reset:s; padding:0; margin:0; }
.spv2-model-flow li { counter-increment:s; background:#fff; border:1px solid var(--spv2-line); border-radius:10px; padding:12px 14px 12px 40px; position:relative; flex:1 1 180px; font-size:.9rem; }
.spv2-model-flow li::before { content:counter(s); position:absolute; left:12px; top:12px; width:22px; height:22px; border-radius:50%; background:var(--spv2-blue); color:#fff; font-weight:700; font-size:.8rem; display:grid; place-items:center; }

/* C14 final cta */
.spv2-finalcta { background:linear-gradient(180deg,#f8fafc,#fff); }
.spv2-finalcta-inner { text-align:center; }
.spv2-cta-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0; }

/* C15 sticky (SSR present; JS toggles .on on scroll — no-JS keeps it visible) */
.spv2-sticky { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px; align-items:center; justify-content:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97); border-top:1px solid var(--spv2-line); box-shadow:0 -4px 16px rgba(0,0,0,.06); }
.spv2-sticky-label { font-weight:800; color:var(--spv2-blue); margin-right:auto; }
@media (min-width:961px){ .spv2-sticky { transform:translateY(110%); transition:transform .2s; } .spv2-sticky.on { transform:translateY(0); } }

/* PATCH-01 — generic StickyConversionV2 anti-occlusion (NOT eContract-specific):
   the fixed bottom bar must never permanently cover content, a price row, or a CTA, and anchor
   jumps must clear BOTH the fixed shell header (top) and this bar (bottom). --spv2-sticky-h is set
   by the sticky JS to the bar's real height ONLY while it occupies the viewport (mobile: always;
   desktop: only when .on), so no dead space is reserved when the bar is hidden. */
body { padding-bottom: var(--spv2-sticky-h, 0px); }
/* Single anchor-offset source (scroll-padding on the scroll container) — clears the fixed shell
   header at the top and the sticky bar at the bottom for every hash jump / scrollIntoView.
   Do NOT also add scroll-margin on the sections (it would compound with this and over-shoot). */
html { scroll-padding-top: 120px; scroll-padding-bottom: calc(var(--spv2-sticky-h, 0px) + 16px); }

/* mobile: table → stacked cards */
@media (max-width:640px){
  .spv2-price-table { min-width:0; }
  .spv2-price-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .spv2-price-table, .spv2-price-table tbody, .spv2-price-table tr, .spv2-price-table th, .spv2-price-table td { display:block; }
  .spv2-price-tablewrap { overflow:visible; border:0; }
  .spv2-price-table tr { border:1px solid var(--spv2-line); border-radius:12px; margin-bottom:12px; padding:8px 12px; }
  .spv2-price-table td, .spv2-price-table th { border:0; padding:5px 0; }
  .spv2-price-table td[data-label]::before { content:attr(data-label) ": "; color:var(--spv2-muted); font-weight:600; }
  .spv2-pkg { font-size:1.1rem; }
  .spv2-price-cta { text-align:left; margin-top:6px; }
  .spv2-page section { padding:18px 0; }
  .spv2-sticky { flex-wrap:wrap; }
  .spv2-sticky-label { width:100%; margin:0 0 4px; font-size:.9rem; }
  .spv2-sticky .sh-btn { flex:1; text-align:center; }
}

/* PATCH-01B — generic floating-control coordination. On the always-on-sticky regime (mobile/tablet,
   <961px) hide the shared-shell bottom floats while the C15 sticky bar occupies, so no floating
   control can overlap any interactive page control at ANY scroll position (fixed floats + full-width
   CTAs make x-axis overlap unavoidable otherwise). Mirrors the existing body.sqs-open pattern.
   Desktop keeps the floats but the sticky JS lifts them above the bar. No eContract-specific selectors. */
body.spv2-hide-floats #scrollToTopBtn,
body.spv2-hide-floats #fdcl-fab,
body.spv2-hide-floats #fdcl-hint,
body.spv2-hide-floats #fdcl-menu,
body.spv2-hide-floats #fdcl-toast,
body.spv2-hide-floats #fdcl-backdrop { display: none !important; }

/* PHASE-F tap-target polish (M6 scope, generic): pricing CTAs to WCAG 2.5.5 AAA 44px on mobile. */
@media (max-width:600px){
  .spv2-page [data-spv2-pkg],
  .spv2-page .spv2-price-cta a{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
}