/* ============================================================
   SecureHold WP — Solutions pages, shared stylesheet
   Loaded on all five /solutions/ pages (hub + 4 verticals),
   scoped under .sh-homepage .sh-solutions like every other
   page-specific stylesheet on this site (see
   stripe-security-deposits.css for the same pattern).

   Ported from the Claude Design standalone exports, then
   deduplicated against homepage.css: every rule already
   provided by the site-wide stylesheet (buttons, section
   chrome, nav, footer, FAQ, plan cards, etc.) was dropped
   rather than redeclared. What remains here is genuinely new:
   hero variants, comparison/deposit-split components, limits
   cards, review card, workflow rail, segment cards and the
   screenshot-placeholder block.
   Fonts: Inter Tight, Inter, JetBrains Mono — already loaded
   site-wide via wp_enqueue_style( 'sh-site-fonts' ), not
   redeclared here.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */

/* ── Reset ─────────────────────────────────────────────────── */

/* ── Typography helpers ────────────────────────────────────── */

/* ── Layout helpers ────────────────────────────────────────── */

/* ── Buttons ────────────────────────────────────────────────── */

/* ── Section chrome ─────────────────────────────────────────── */

/* .section-label / .section-label-bar deliberately NOT redeclared here.
   QA (finishing pass) found the prototype's own version of this component
   (20x2px gray bar, gray text) rendering instead of the real one already
   defined in homepage.css (5x5px blue dot, blue text) — same class names,
   different values, and this file's extra .sh-solutions scope made it win.
   Removing it lets the real site-wide badge apply unmodified everywhere:
   hero eyebrows already used it correctly; only these section eyebrows
   were affected. See solutions-shared.css's .section--dark override below
   for how it adapts on the dark final-CTA section (mirrors stripe-page). */

@media (max-width: 767px) { .sh-homepage .sh-solutions .section-head-block { margin-bottom: 36px; } }

/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */

/* Logo */

/* Nav links */

.sh-homepage .sh-solutions .nav-links a:hover { color: var(--slate-900); background: var(--slate-100); }

/* Nav CTA */
.sh-homepage .sh-solutions .nav-cta { margin-left: auto; }

/* Hamburger */

/* Mobile drawer */

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.sh-homepage .sh-solutions .hero {
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 64px);
  padding-bottom: 96px;
  background: linear-gradient(160deg, #fff 0%, var(--slate-100) 100%);
  position: relative; overflow: hidden;
}

/* ── Hero mockup ───────────────────────────────────────────── */

/* Metabox */

/* Admin toast */

/* ═══════════════════════════════════════════════════════════
   PROBLEM SECTION
   ═══════════════════════════════════════════════════════════ */

/* Pain cards */

/* ═══════════════════════════════════════════════════════════
   SOLUTION — STEP SELECTOR
   ═══════════════════════════════════════════════════════════ */

/* Preview panel — dark */

.sh-homepage .sh-solutions .step-panel { display: none; animation: panelIn .3s cubic-bezier(.4,0,.2,1) both; }

/* ═══════════════════════════════════════════════════════════
   FEATURES BENTO
   ═══════════════════════════════════════════════════════════ */

/* Strategy pills */

/* Rule tree */

/* Capture snippet */

/* Auto-release timeline */

/* Deposits tab */

/* Audit snippet */

/* ═══════════════════════════════════════════════════════════
   USE CASES
   ═══════════════════════════════════════════════════════════ */

/* Preview panel — light */
.sh-homepage .sh-solutions .uc-preview {
  border: 1px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.07);
  background: #fff; min-height: 320px; display: flex; flex-direction: column;
  animation: panelIn .3s cubic-bezier(.4,0,.2,1) both;
}

@media (max-width: 500px) { .sh-homepage .sh-solutions .uc-preview-body { padding: 20px 16px; } }

/* Workflow strip */

/* Scenario chips */

@media (max-width: 500px) { .sh-homepage .sh-solutions .uc-preview-cta { padding: 0 16px 18px; } }

/* Use case panels */

/* ═══════════════════════════════════════════════════════════
   FREE VS PRO
   ═══════════════════════════════════════════════════════════ */

/* Comparison table */

/* ═══════════════════════════════════════════════════════════
   INTEGRATION
   ═══════════════════════════════════════════════════════════ */

/* Architecture diagram */

/* ═══════════════════════════════════════════════════════════
   TRUST
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* ===== NEXT STYLE TAG ===== */

/* SecureHold WP — Equipment Rental vertical page.
   Additive layer on securehold.css. No new tokens, no new palette. */

/* :not(.btn) so this plain-text-link default never outranks .btn--primary's
   white text — a real bug found in QA: both rules had the same specificity
   base, and this one's extra tag selector made it win regardless of order.
   Excluded from .section--dark entirely (below): the same rule was making
   final-btn-primary/secondary, the hub's final-links-row and the "Support"
   link in .final-trust render blue-on-navy instead of their intended white
   or muted-white — a second real bug found in the finishing-pass QA. */
.sh-homepage .sh-solutions a:not(.btn):not(.final-btn-primary):not(.final-btn-secondary) { color: var(--brand); }
.sh-homepage .sh-solutions a:not(.btn):not(.final-btn-primary):not(.final-btn-secondary):hover { color: var(--brand-hover); }
/* .final-btn-primary/secondary excluded above (no .btn class of their own,
   so they'd otherwise get colored blue by the rule above, at a specificity
   the equivalent-looking ".final-btn-primary { color:#fff }" in
   homepage.css can't out-rank: both have 3 classes, but the a:not(.btn)
   rule's extra type selector (a) breaks the tie in its own favor). Letting
   them fall through untouched restores homepage.css's own white / muted-
   white colors for both buttons. Real bug found in the finishing-pass QA:
   the primary button's text was invisible, blue-on-blue. */
.sh-homepage .sh-solutions .section--dark a:not(.final-btn-primary):not(.final-btn-secondary) { color: inherit; }
.sh-homepage .sh-solutions .section--dark a:hover { color: #fff; }
.sh-homepage .sh-solutions .section--dark a:focus-visible { outline-color: #fff; }

/* ── HERO ─────────────────────────────────────────────── */
.sh-homepage .sh-solutions .hero--vertical { min-height: 0; padding-top: calc(var(--nav-h) + 52px); padding-bottom: 80px; }
@media (max-width: 767px) { .sh-homepage .sh-solutions .hero--vertical { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 52px; } }
.sh-homepage .sh-solutions .hero--vertical .hero-inner { grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .hero--vertical .hero-inner { grid-template-columns: 1fr; gap: 40px; } }
.sh-homepage .sh-solutions .hero--vertical .hero-h1 { font-size: clamp(31px, 3.8vw, 46px); }
.sh-homepage .sh-solutions .hero--vertical .hero-lead { font-size: 16.5px; margin-bottom: 32px; }
.sh-homepage .sh-solutions .hero-eyebrow--wrap { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }

/* Deposit split card — the €150 / €800 scenario */
.sh-homepage .sh-solutions .dep-split { max-width: 400px; margin-left: auto; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 0 0 1px rgba(15,23,42,.03), 0 12px 40px rgba(15,23,42,.1), 0 28px 72px rgba(15,23,42,.07); }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .dep-split { margin: 0 auto; } }
.sh-homepage .sh-solutions .dep-split-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--slate-900); }
.sh-homepage .sh-solutions .dep-split-head-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 12.5px; color: #fff; letter-spacing: -.01em; }
.sh-homepage .sh-solutions .dep-split-head-order { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,.45); }
.sh-homepage .sh-solutions .dep-line { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sh-homepage .sh-solutions .dep-line + .dep-line { border-top: 1px solid var(--slate-100); }
.sh-homepage .sh-solutions .dep-line-label { font-size: 13px; font-weight: 600; color: var(--slate-600); }
.sh-homepage .sh-solutions .dep-line-sub { font-size: 11.5px; color: var(--slate-400); margin-top: 3px; }
.sh-homepage .sh-solutions .dep-line-right { text-align: right; flex-shrink: 0; }
.sh-homepage .sh-solutions .dep-amount { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -.03em; line-height: 1; color: var(--slate-900); }
.sh-homepage .sh-solutions .dep-amount--held { color: var(--brand); }
.sh-homepage .sh-solutions .dep-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.sh-homepage .sh-solutions .dep-tag--charged { background: var(--slate-100); color: var(--slate-600); }
.sh-homepage .sh-solutions .dep-tag--held { background: var(--brand-light); color: var(--brand); }
.sh-homepage .sh-solutions .dep-line--held { background: linear-gradient(180deg, rgba(238,244,255,.7) 0%, rgba(238,244,255,.35) 100%); }
.sh-homepage .sh-solutions .dep-split-foot { padding: 13px 20px; background: var(--slate-50); border-top: 1px solid var(--slate-200); display: flex; align-items: center; gap: 8px; }
.sh-homepage .sh-solutions .dep-split-foot span { font-size: 12px; line-height: 1.5; color: var(--slate-500); }
.sh-homepage .sh-solutions .dep-split-foot b { color: var(--slate-700); font-weight: 600; }
.sh-homepage .sh-solutions .dep-split-actions { display: flex; gap: 7px; padding: 0 20px 18px; }
@media (max-width: 420px) { .sh-homepage .sh-solutions .dep-amount { font-size: 23px; } }

/* ── DEFINITION ───────────────────────────────────────── */
.sh-homepage .sh-solutions .def-block { max-width: 720px; }
.sh-homepage .sh-solutions .def-answer { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.55; letter-spacing: -.015em; color: var(--slate-900); padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); text-wrap: pretty; }
.sh-homepage .sh-solutions .def-answer + .def-answer { margin-top: 18px; }

/* ── COMPARISON ───────────────────────────────────────── */
.sh-homepage .sh-solutions .scenario-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; padding: 14px 22px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); margin: 0 auto 20px; width: fit-content; max-width: 100%; }
.sh-homepage .sh-solutions .scenario-bar-item { display: flex; align-items: baseline; gap: 8px; }
.sh-homepage .sh-solutions .scenario-bar-label { font-size: 12.5px; color: var(--slate-500); }
.sh-homepage .sh-solutions .scenario-bar-value { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; color: var(--slate-900); letter-spacing: -.02em; }
.sh-homepage .sh-solutions .scenario-bar-sep { width: 1px; height: 22px; background: var(--slate-200); }
@media (max-width: 599px) { .sh-homepage .sh-solutions .scenario-bar-sep { display: none; } }

.sh-homepage .sh-solutions .cmp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; min-height: 62px; }
@media (max-width: 767px) { .sh-homepage .sh-solutions .cmp-head { min-height: 0; } }
.sh-homepage .sh-solutions .cmp-head .comparison-col-badge { margin-bottom: 0; order: -1; }
.sh-homepage .sh-solutions .cmp-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--slate-800); }
.sh-homepage .sh-solutions .comparison-col--new .cmp-title { color: var(--brand); }
.sh-homepage .sh-solutions .cmp-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; }
.sh-homepage .sh-solutions .cmp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-100); }
.sh-homepage .sh-solutions .cmp-row-label { font-size: 13px; color: var(--slate-500); }
.sh-homepage .sh-solutions .cmp-row-value { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--slate-700); text-align: right; }
.sh-homepage .sh-solutions .cmp-row-value--blue { color: var(--brand); }
.sh-homepage .sh-solutions .cmp-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 12px; margin-bottom: 20px; }
.sh-homepage .sh-solutions .cmp-total--old { background: var(--slate-100); }
.sh-homepage .sh-solutions .cmp-total--new { background: var(--brand-light); }
.sh-homepage .sh-solutions .cmp-total-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-500); }
.sh-homepage .sh-solutions .comparison-col--new .cmp-total-label { color: var(--brand); }
.sh-homepage .sh-solutions .cmp-total-value { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.03em; color: var(--slate-900); line-height: 1.1; text-align: right; }
.sh-homepage .sh-solutions .cmp-total-value small { display: block; font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; margin-top: 3px; }
.sh-homepage .sh-solutions .cmp-list { display: flex; flex-direction: column; gap: 11px; }
.sh-homepage .sh-solutions .cmp-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.6; color: var(--slate-600); }
.sh-homepage .sh-solutions .cmp-list li svg { flex-shrink: 0; margin-top: 3px; }
.sh-homepage .sh-solutions .cmp-note { font-size: 12px; line-height: 1.6; color: var(--slate-400); margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--slate-200); }
.sh-homepage .sh-solutions .cmp-caption { text-align: center; font-size: 13px; color: var(--slate-500); margin-top: -28px; }

/* ── WORKFLOW RAIL ────────────────────────────────────── */
/* max-width + margin:auto: at full desktop width this grid previously
   stretched edge-to-edge across .sh-wrap (~1200px) with no cap, which on
   the 6- and 7-step variants especially read as thin, sparse, "too spread
   out" rather than a composed section. Containing and centering it here
   applies to every step count (4/6/7) since the modifiers below only
   change grid-template-columns, not this margin. Real issue found in the
   finishing-pass QA (workflow sections asked to be visually centered). */
.sh-homepage .sh-solutions .wf-rail { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 4px auto 8px; }
.sh-homepage .sh-solutions .wf-step { display: flex; flex-direction: column; }
.sh-homepage .sh-solutions .wf-node-row { display: flex; align-items: center; width: 100%; margin-bottom: 16px; }
.sh-homepage .sh-solutions .wf-node { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; background: var(--brand); border: 2px solid var(--brand); color: #fff; box-shadow: 0 0 0 5px rgba(47,91,255,.1); }
.sh-homepage .sh-solutions .wf-line { flex: 1; height: 2px; background: var(--slate-200); }
.sh-homepage .sh-solutions .wf-step:last-child .wf-line { visibility: hidden; }
.sh-homepage .sh-solutions .wf-body { padding-right: 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sh-homepage .sh-solutions .wf-kicker { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--slate-900); }
.sh-homepage .sh-solutions .wf-desc { font-size: 13.5px; line-height: 1.6; color: var(--slate-500); }
.sh-homepage .sh-solutions .wf-fork { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sh-homepage .sh-solutions .wf-fork-item { display: flex; align-items: flex-start; gap: 9px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.sh-homepage .sh-solutions .wf-fork-item--release { background: #f0fdf4; border: 1px solid rgba(21,128,61,.2); color: #15803d; }
.sh-homepage .sh-solutions .wf-fork-item--capture { background: var(--brand-light); border: 1px solid rgba(47,91,255,.22); color: var(--brand); }
.sh-homepage .sh-solutions .wf-fork-item b { font-weight: 700; }
.sh-homepage .sh-solutions .wf-fork-item svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .wf-rail { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .sh-homepage .sh-solutions .wf-step:nth-child(2) .wf-line { visibility: hidden; } }
@media (max-width: 767px) {
  .sh-homepage .sh-solutions .wf-rail { grid-template-columns: 1fr; row-gap: 0; }
  .sh-homepage .sh-solutions .wf-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; padding-bottom: 28px; }
  .sh-homepage .sh-solutions .wf-step:last-child { padding-bottom: 0; }
  .sh-homepage .sh-solutions .wf-node-row { flex-direction: column; align-items: center; grid-row: 1 / span 2; height: 100%; margin-bottom: 0; }
  .sh-homepage .sh-solutions .wf-line, .sh-homepage .sh-solutions .wf-step:nth-child(2) .wf-line { visibility: visible; width: 2px; height: auto; flex: 1; min-height: 24px; margin-top: 8px; }
  .sh-homepage .sh-solutions .wf-step:last-child .wf-line { visibility: hidden; }
  .sh-homepage .sh-solutions .wf-body { padding-right: 0; padding-top: 6px; }
}

/* Screenshot frame */
.sh-homepage .sh-solutions .shot { margin-top: 56px; }
.sh-homepage .sh-solutions .shot-frame { background: var(--slate-800); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 16px 48px rgba(15,23,42,.12); }
.sh-homepage .sh-solutions .shot-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #293548; border-bottom: 1px solid rgba(255,255,255,.06); }
.sh-homepage .sh-solutions .shot-bar-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,.4); }
.sh-homepage .sh-solutions .shot-slot { background: var(--slate-100); aspect-ratio: 16 / 8; }
@media (max-width: 767px) { .sh-homepage .sh-solutions .shot-slot { aspect-ratio: 4 / 3; } }

/* Screenshot placeholder — real product screenshots are not yet
   available for these pages (see the integration report). Renders
   visibly in preview so the empty slot is obvious rather than an
   invisible gap; never meant to ship to a public page as-is. */
.sh-homepage .sh-solutions .shot-slot--placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--slate-300); border-radius: var(--radius-lg);
  padding: 20px;
}
.sh-homepage .sh-solutions .shot-slot-placeholder-text { font-size: 12.5px; line-height: 1.5; color: var(--slate-500); max-width: 40em; }
.sh-homepage .sh-solutions .shot-caption { font-size: 12.5px; line-height: 1.6; color: var(--slate-400); margin-top: 12px; text-align: center; }

/* Real screenshot: keep native proportions, never crop or stretch —
   the .shot-slot box is a fixed aspect ratio but real captures don't
   always match it exactly, so the image is centered and letterboxed
   on the shared slate background instead of distorted. */
.sh-homepage .sh-solutions .shot-slot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* ── LIMITS ───────────────────────────────────────────── */
.sh-homepage .sh-solutions .limit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .limit-grid { grid-template-columns: 1fr; } }
.sh-homepage .sh-solutions .limit-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.sh-homepage .sh-solutions .limit-card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--slate-100); border: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: center; }
.sh-homepage .sh-solutions .limit-card-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--slate-900); }
.sh-homepage .sh-solutions .limit-card-body { font-size: 13.5px; line-height: 1.7; color: var(--slate-600); text-wrap: pretty; }
.sh-homepage .sh-solutions .limit-card-body + .limit-card-body { margin-top: -4px; }
.sh-homepage .sh-solutions .limit-strong { display: flex; align-items: flex-start; gap: 8px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; font-weight: 600; color: var(--slate-700); }
.sh-homepage .sh-solutions .req-list { display: flex; flex-direction: column; gap: 8px; }
.sh-homepage .sh-solutions .req-list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--slate-700); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 8px; padding: 8px 12px; }
.sh-homepage .sh-solutions .req-list li code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--slate-500); }

/* Authorization window strip — deliberately unlabelled duration */
.sh-homepage .sh-solutions .authwin { display: flex; align-items: stretch; gap: 4px; margin-top: 2px; }
.sh-homepage .sh-solutions .authwin-seg { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sh-homepage .sh-solutions .authwin-bar { height: 6px; border-radius: 3px; }
.sh-homepage .sh-solutions .authwin-seg--start .authwin-bar { background: var(--brand); flex: 0 0 6px; }
.sh-homepage .sh-solutions .authwin-seg--window { flex: 2.2; }
.sh-homepage .sh-solutions .authwin-seg--window .authwin-bar { background: repeating-linear-gradient(90deg, rgba(47,91,255,.35) 0 6px, transparent 6px 12px); }
.sh-homepage .sh-solutions .authwin-seg--act .authwin-bar { background: #15803d; }
.sh-homepage .sh-solutions .authwin-seg--exp .authwin-bar { background: var(--slate-300); }
.sh-homepage .sh-solutions .authwin-label { font-size: 10.5px; line-height: 1.35; font-weight: 600; color: var(--slate-500); }
.sh-homepage .sh-solutions .authwin-seg--window .authwin-label { color: var(--brand); }
.sh-homepage .sh-solutions .authwin-seg--act .authwin-label { color: #15803d; }

/* ── SEGMENTS ─────────────────────────────────────────── */
.sh-homepage .sh-solutions .seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .sh-homepage .sh-solutions .seg-grid { grid-template-columns: 1fr; } }
.sh-homepage .sh-solutions .seg-card { background: #fff; border: 1px solid var(--slate-200); border-top: 3px solid var(--slate-200); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 11px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.sh-homepage .sh-solutions .seg-card:hover { box-shadow: 0 4px 20px rgba(15,23,42,.09); transform: translateY(-2px); border-top-color: var(--brand); }
.sh-homepage .sh-solutions .seg-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; }
.sh-homepage .sh-solutions .seg-card-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 16px; color: var(--slate-900); line-height: 1.3; }
.sh-homepage .sh-solutions .seg-card-body { font-size: 13.5px; line-height: 1.65; color: var(--slate-600); }
.sh-homepage .sh-solutions .seg-closer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 22px; border: 1px dashed var(--slate-300); border-radius: 12px; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; color: var(--slate-600); text-wrap: pretty; }

/* ── PLANS ────────────────────────────────────────────── */
.sh-homepage .sh-solutions .plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .sh-homepage .sh-solutions .plan-cols { grid-template-columns: 1fr; } }
.sh-homepage .sh-solutions .plan-card { background: #fff; border: 1.5px solid var(--slate-200); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.sh-homepage .sh-solutions .plan-card--pro { border-color: rgba(47,91,255,.3); border-top: 3px solid var(--brand); box-shadow: 0 4px 24px rgba(47,91,255,.07); }
.sh-homepage .sh-solutions .plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-homepage .sh-solutions .plan-name { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--slate-900); }
.sh-homepage .sh-solutions .plan-lead { font-size: 14px; line-height: 1.65; color: var(--slate-600); }
.sh-homepage .sh-solutions .plan-list { display: flex; flex-direction: column; gap: 9px; }
.sh-homepage .sh-solutions .plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.55; color: var(--slate-700); }
.sh-homepage .sh-solutions .plan-list li svg { flex-shrink: 0; margin-top: 3px; }
.sh-homepage .sh-solutions .rule-examples { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sh-homepage .sh-solutions .rule-examples-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }
.sh-homepage .sh-solutions .rule-ex-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--slate-200); border-radius: 8px; padding: 9px 12px; }
.sh-homepage .sh-solutions .rule-ex-product { font-size: 13px; font-weight: 600; color: var(--slate-700); }
.sh-homepage .sh-solutions .rule-ex-amount { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--brand-light); color: var(--brand); padding: 3px 8px; border-radius: 4px; }
.sh-homepage .sh-solutions .rule-examples-note { font-size: 11.5px; line-height: 1.55; color: var(--slate-400); }

/* ── REVIEW ───────────────────────────────────────────── */
.sh-homepage .sh-solutions .review-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .sh-homepage .sh-solutions .review-layout { grid-template-columns: 1fr; } }
.sh-homepage .sh-solutions .review-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.sh-homepage .sh-solutions .review-stars { display: flex; align-items: center; gap: 8px; }
.sh-homepage .sh-solutions .review-stars-icons { display: flex; gap: 2px; }
.sh-homepage .sh-solutions .review-stars-label { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.sh-homepage .sh-solutions .review-quote { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.45; letter-spacing: -.02em; color: var(--slate-900); text-wrap: pretty; }
.sh-homepage .sh-solutions .review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--slate-500); padding-top: 4px; border-top: 1px solid var(--slate-100); padding-top: 18px; }
.sh-homepage .sh-solutions .review-meta b { color: var(--slate-800); font-weight: 600; }
.sh-homepage .sh-solutions .review-meta-sep { color: var(--slate-300); }
.sh-homepage .sh-solutions .review-side { display: flex; flex-direction: column; gap: 12px; }
.sh-homepage .sh-solutions .side-link { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px; padding: 16px 18px; text-decoration: none; transition: box-shadow .2s, border-color .2s, transform .2s; }
.sh-homepage .sh-solutions .side-link:hover { box-shadow: 0 4px 18px rgba(15,23,42,.08); border-color: var(--slate-300); transform: translateY(-1px); }
.sh-homepage .sh-solutions .side-link-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-homepage .sh-solutions .side-link-title, .sh-homepage .sh-solutions .side-link-sub { display: block; }
.sh-homepage .sh-solutions .side-link-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 14px; color: var(--slate-900); line-height: 1.3; }
.sh-homepage .sh-solutions .side-link-sub { font-size: 12px; color: var(--slate-500); margin-top: 2px; }

/* ── FINAL CTA — test steps ───────────────────────────── */
.sh-homepage .sh-solutions .test-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 auto 36px; text-align: left; }
@media (max-width: 767px) { .sh-homepage .sh-solutions .test-steps { grid-template-columns: 1fr; } }
.sh-homepage .sh-solutions .test-step { display: flex; align-items: flex-start; gap: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 13px 15px; }
.sh-homepage .sh-solutions .test-step-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgba(147,180,255,.9); flex-shrink: 0; padding-top: 1px; }
.sh-homepage .sh-solutions .test-step-text { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); }

/* dark section overrides (mirrors stripe-deposits page) */
.sh-homepage .sh-solutions .section--dark .section-h2 { color: #fff; }
.sh-homepage .sh-solutions .section--dark .section-h2 em { color: #93b4ff; }
.sh-homepage .sh-solutions .section--dark .section-label { color: rgba(255,255,255,.4); }
.sh-homepage .sh-solutions .section--dark .section-label-bar { background: rgba(255,255,255,.3); }
.sh-homepage .sh-solutions .section--dark .section-body { color: rgba(255,255,255,.55); }

/* Final-CTA eyebrow ("Stripe test mode"): homepage.css's own rule colors
   the whole label translucent blue, which reads poorly on this section's
   navy background. The label's leading dot is a separately-colored inline
   SVG (fill="rgba(47,91,255,.7)"), unaffected by this — only the text
   changes, to a legible near-white. Real bug found in the finishing-pass QA. */
.sh-homepage .sh-solutions .final-cta-eyebrow { color: rgba(255,255,255,.85); }

/* breadcrumb */
.sh-homepage .sh-solutions .crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--slate-400); margin-bottom: 18px; flex-wrap: wrap; }
.sh-homepage .sh-solutions .crumbs a { color: var(--slate-500); text-decoration: none; }
.sh-homepage .sh-solutions .crumbs a:hover { color: var(--brand); }
.sh-homepage .sh-solutions .crumbs span { color: var(--slate-300); }