/* ── Services pages: additions on top of the reused pricing CSS ── */
.tier-pos { font-style: italic; color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.6rem; }
.price-usd { display: block; font-family: var(--font-num); font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-top: 0.35rem; letter-spacing: 0.03em; }
.price-note { display: inline-block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 100px; padding: 0.25rem 0.8rem; margin-top: 0.7rem; }

/* Project-minimum banner */
.min-banner { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 2rem; padding: 0.9rem 1.6rem; border: 1px solid var(--accent-dim); background: rgba(216,180,254,0.05); border-radius: 100px; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: #fff; letter-spacing: 0.01em; }
.min-banner b { color: var(--accent); font-weight: 700; }
.min-banner .usd { color: var(--text-muted); font-size: 0.82rem; }

/* Service section header + link */
.svc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.svc-tagline { font-style: italic; color: var(--text-muted); font-size: clamp(1rem,1.6vw,1.25rem); margin-top: 1rem; max-width: 620px; line-height: 1.5; }
.svc-detail-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: gap 0.3s; }
.svc-detail-link:hover { gap: 0.9rem; }
.svc-section { border-top: 1px solid rgba(255,255,255,0.06); }
/* Capability header with imagery (alternating sides) */
.svc-head--media { display:grid; grid-template-columns:1.1fr 0.9fr; gap:3.2rem; align-items:center; }
.svc-head--media .svc-head-text { display:flex; flex-direction:column; align-items:flex-start; }
.svc-head--media .svc-detail-link { margin-top:1.7rem; }
.svc-head-media { position:relative; }
.svc-head-media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,0.08); filter:contrast(1.03) brightness(0.94); box-shadow:0 24px 60px rgba(0,0,0,0.4); transition:transform 0.6s var(--ease-out); display:block; }
.svc-head-media:hover img { transform:scale(1.03); }
.svc-head-media::after { content:''; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 70px rgba(139,92,246,0.14); pointer-events:none; }
.svc-head--flip .svc-head-text { order:2; }
.svc-head--flip .svc-head-media { order:1; }
@media (max-width:860px){ .svc-head--media{ grid-template-columns:1fr; gap:1.6rem; margin-bottom:1.6rem; } .svc-head--media .svc-head-media{ order:-1 !important; } .svc-head--media .svc-detail-link{ margin-top:1.2rem; } .svc-head-media img{ aspect-ratio:16/9; } }

/* Qualifier form */
.qform-wrap { max-width: 760px; margin: 3rem auto 0; width: 100%; }
.qform { display: flex; flex-direction: column; gap: 1.5rem; }
.qform-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
/* DENYLIST, NOT AN ALLOWLIST — this rule used to enumerate types and the same bug landed twice.
   input[type=tel] was missing first, so the phone field inherited none of the shared box styling and
   rendered as a bare browser input beside its styled siblings. Then the new Company website field
   arrived as input[type=url] and did exactly the same thing. Listing what is excluded means the next
   field type added to this form is styled by default instead of shipping visibly broken.
   .wt-cc-search is excluded on purpose. It is the search box INSIDE the country dropdown panel, an
   input[type=text] like any other, so this rule would hand it a 12px-radius bordered box and 1.1rem
   padding inside a 15rem panel — on /start only. It carries its own styling in Assets/site.css. */
.qform input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.wt-cc-search), .qform textarea, .qform select { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1rem 1.1rem; color: #fff; font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s; }
/* Four fields in a three-column grid left the last one stranded alone on a second row. */
.qform-row > .qform-wide { grid-column: 1 / -1; }
.qform input:focus, .qform textarea:focus, .qform select:focus { outline: none; border-color: var(--accent); }
.qform textarea { min-height: 130px; resize: vertical; }
.qform label.fld { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem; display: block; }
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: block; text-align: center; padding: 0.75rem 0.6rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); cursor: pointer; transition: all 0.2s; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }
.qform-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #000; border: none; padding: 1.15rem 2rem; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.qform-submit:hover { transform: scale(1.02); box-shadow: 0 8px 40px rgba(168,85,247,0.3); }
.qform-err { display:none; margin:0 0 1rem; padding:0.8rem 1rem; border-radius:8px;
    background:rgba(239,68,68,0.09); border:1px solid rgba(239,68,68,0.4); color:#fca5a5;
    font-family:var(--font-body); font-size:0.9rem; font-weight:600; line-height:1.45; }
.qform-soft { display: none; background: rgba(216,180,254,0.06); border: 1px solid var(--accent-dim); border-radius: 12px; padding: 1.2rem 1.4rem; color: #fff; font-size: 0.95rem; line-height: 1.7; }
.qform-soft a { color: var(--accent); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent-dim); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.qform-soft a:hover { color: #fff; text-decoration-color: #fff; }
.qform-done { display: none; text-align: center; padding: 2rem; }
.qform-done h3 { font-family: var(--font-head); font-size: clamp(1.5rem,3vw,2.2rem); text-transform: uppercase; margin-bottom: 1rem; }
.qform-done p { color: var(--text-muted); font-size: 1.05rem; }
@media (max-width: 720px) {
  .qform-row { grid-template-columns: 1fr; }
  .chip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── FAQ (reused on detail pages) ── */
.faq-list { margin-top: 3rem; max-width: 820px; }
.faq-item { opacity: 0; transform: translateX(-24px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.faq-item.in-view { opacity: 1; transform: translateX(0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.7rem 0; background: none; border: none; color: #fff; text-align: left; font-family: var(--font-head); font-size: clamp(0.85rem,1.5vw,1.15rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; gap: 2rem; transition: color 0.3s; }
.faq-question:hover { color: var(--accent); }
.faq-icon { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s; color: var(--accent); }
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--accent); background: var(--accent-dim); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }
.faq-answer-inner { padding-bottom: 1.7rem; font-size: 1rem; line-height: 1.7; color: var(--text-muted); font-weight: 500; max-width: 700px; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ── Detail-page proof / client strip ── */
.proof-line { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; max-width: 640px; margin-top: 1rem; }
.client-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.5rem; }
.client-chip { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 0.6rem 1.3rem; }

/* ── Core (shared by pricing.php + service.php) ── */
html { overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { background-color: var(--bg); color: var(--text-main); font-family: var(--font-body); overflow-x: hidden; font-size: 18px; }

/* ══ KIASA signature reveal — cinematic rise + blur-clear + micro-scale ══
   Overrides the base .fade-up on the funnel pages (pricing / start / service).
   Triggered by the existing IntersectionObserver in site.js (adds .in-view), so
   there's no JS dependency and nothing to break if a CDN hiccups. */
.fade-up { opacity:0; transform:translateY(36px) scale(0.985); filter:blur(6px); }
.fade-up.in-view { opacity:1; transform:none; filter:blur(0);
    transition:opacity 0.9s var(--ease-out), transform 1.05s var(--ease-out), filter 0.8s var(--ease-out); }
/* Section media wipes up as it clears (a touch more theatrical than the text). */
.svc-head-media.fade-up { clip-path:inset(0 0 12% 0); transform:translateY(30px) scale(0.99); }
.svc-head-media.fade-up.in-view { clip-path:inset(0 0 0% 0); transform:none;
    transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out), clip-path 1.1s var(--ease-out); }
/* Cards inherit the blur so the whole page reveals as one system. Each .in-view
   rule restates the whole transition rather than just transition-property: these
   cards also animate on :hover, and a bare property list would leave hover running
   at the reveal's ~1s durations. */
.pricing-card, .metric, .step, .testi-card, .addon-card, .faq-item { filter:blur(6px); }
.pricing-card.in-view, .step.in-view, .testi-card.in-view, .addon-card.in-view, .faq-item.in-view { filter:blur(0);
    transition:opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.35s, background 0.35s; }
.metric.in-view { filter:blur(0);
    transition:opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.35s, background 0.35s, box-shadow 0.35s; }
@media (prefers-reduced-motion: reduce) {
    .fade-up, .svc-head-media.fade-up, .pricing-card, .metric, .step, .testi-card, .addon-card, .faq-item { filter:none !important; transform:none !important; opacity:1 !important; clip-path:none !important; }
}
.kicker { font-family: var(--font-body); font-weight: 600; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1.5rem; display: inline-block; border: 1px solid var(--accent-dim); padding: 0.6rem 1.5rem; border-radius: 50px; background: rgba(216,180,254,0.05); }
h2 { font-family: var(--font-head); font-size: clamp(2rem,4vw,3.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-transform: uppercase; }
section { padding: 12vh 6vw; display: flex; flex-direction: column; justify-content: center; position: relative; }
.page-hero { min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 14vh 6vw 8vh; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(139,92,246,0.10) 0%, transparent 68%); pointer-events:none; z-index:1; }
.page-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,2,4,0.5) 0%, transparent 32%, transparent 46%, rgba(2,2,4,0.92) 100%); pointer-events:none; z-index:1; }
.page-hero > * { position: relative; z-index: 2; }
.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.5; z-index: 0; pointer-events: none; filter: contrast(1.05) brightness(0.95); }
.page-hero h1 { font-family: var(--font-head); font-size: clamp(2.3rem,5.5vw,5rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.page-desc { font-family: var(--font-body); font-size: clamp(1rem,1.4vw,1.2rem); color: var(--text-muted); font-weight: 500; max-width: 640px; line-height: 1.7; margin-top: 1.5rem; }
.breadcrumb { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 2rem; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.pricing-card { opacity: 0; transform: perspective(800px) translateY(50px) scale(0.97); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; display: flex; flex-direction: column; transition: border-color 0.4s, transform 0.4s; position: relative; overflow: hidden; }
.pricing-card.in-view { opacity: 1; transform: perspective(800px) translateY(0) scale(1); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out), border-color 0.4s; }
.pricing-card:hover { border-color: var(--accent-dim); transform: translateY(-6px); }
.pricing-card.popular { border-color: var(--accent); background: rgba(216,180,254,0.04); }
.pricing-card.popular::before { content: 'Recommended'; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.35rem 1.3rem; border-radius: 100px; white-space: nowrap; z-index: 3; }
.pricing-card-body { padding: 2.6rem 2.5rem 3rem; display: flex; flex-direction: column; flex: 1; }
.pricing-name { font-family: var(--font-head); font-size: clamp(1.2rem,2vw,1.7rem); font-weight: 700; text-transform: uppercase; margin-bottom: 0.7rem; }
.pricing-price { margin-bottom: 1.8rem; }
.pricing-amount { font-family: var(--font-num); font-size: clamp(1.7rem,3vw,2.5rem); font-weight: 700; color: #fff; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.2rem; flex: 1; }
.pricing-features li { font-size: 0.95rem; color: rgba(255,255,255,0.7); font-weight: 500; padding-left: 1.5rem; position: relative; line-height: 1.5; }
.pricing-features li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(168,85,247,0.4); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; align-items: start; }
.pricing-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 1rem 2rem; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.pricing-btn-primary { background: #fff; color: #000; }
.pricing-btn-primary:hover { transform: scale(1.04); box-shadow: 0 8px 40px rgba(168,85,247,0.3); }
.pricing-btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.pricing-btn-secondary:hover { border-color: var(--accent); transform: scale(1.04); }
.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.addon-card { opacity: 0; transform: translateY(25px); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 2rem; text-align: center; }
.addon-card.in-view { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.3s, background 0.3s; }
.addon-card:hover { border-color: var(--accent-dim); background: rgba(216,180,254,0.03); }
.addon-card h4 { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.addon-card p { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; line-height: 1.5; }
.addon-price { font-family: var(--font-num); font-size: 0.82rem; color: var(--accent); font-weight: 700; margin-top: 0.9rem; letter-spacing: 0.04em; }
.page-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.8rem; padding: 12vh 6vw; }
.page-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.06) 0%, transparent 70%); pointer-events:none; }
.cta-btn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #000; padding: 1.2rem 3rem; border: none; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 1; }
.cta-btn:hover { transform: scale(1.05); box-shadow: 0 8px 40px rgba(168,85,247,0.3); }
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .addons-grid { grid-template-columns: repeat(2, 1fr); } section { padding: 9vh max(20px, 5vw); } }
/* NB: no `.svc-head { display:block }` here — it would out-rank `.svc-head--media
   { display:grid }` on source order (both 0,1,0) and collapse the capability grid. */
@media (max-width: 600px) { .page-hero h1 { font-size: clamp(1.8rem, 9vw, 3rem); } .cta-btn { font-size: 0.78rem; padding: 0.9rem 1.8rem; letter-spacing: 0.12em; } .svc-detail-link { margin-top: 1rem; } }

/* ══════════════════════════════════════════════════════════════════════════
   Arounda-style discovery layout — onboarding card, founder card, trust,
   process. Violet accent + dark gradient glow. Prices intentionally absent.
   ══════════════════════════════════════════════════════════════════════════ */

.tier-cadence { display:inline-block; vertical-align:middle; font-family:var(--font-body); font-size:0.6rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-dim); border-radius:100px; padding:0.2rem 0.6rem; margin-left:0.5rem; }

/* ── Ambient page glow (soft violet/blue like the reference) ── */
.glow-wrap { position:relative; overflow:hidden; }
.glow-wrap::before { content:''; position:absolute; top:-10%; right:-5%; width:60vw; height:60vw; max-width:780px; max-height:780px; background:radial-gradient(circle at 60% 40%, rgba(99,102,241,0.16) 0%, rgba(139,92,246,0.10) 35%, transparent 68%); pointer-events:none; z-index:0; filter:blur(10px); }
.glow-wrap > * { position:relative; z-index:1; }

/* ── The onboarding split card (the hero of the page) ── */
.onboard-section { padding-top:16vh; }
.onboard { display:grid; grid-template-columns:0.82fr 1.18fr; gap:0; margin-top:3rem; border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.015); box-shadow:0 40px 120px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); }

/* Left: founder card */
.ob-founder { position:relative; padding:2.8rem 2.6rem; background:linear-gradient(160deg, rgba(139,92,246,0.16) 0%, rgba(20,16,34,0.6) 46%, rgba(2,2,4,0.85) 100%); display:flex; flex-direction:column; }
.ob-founder::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(168,85,247,0.12); pointer-events:none; }
.ob-id { display:flex; align-items:center; gap:1.1rem; }
.ob-ava { width:82px; height:82px; border-radius:50%; object-fit:cover; object-position:center 18%; border:2px solid rgba(216,180,254,0.4); flex-shrink:0; background:#111; }
.ob-name { font-family:var(--font-head); font-size:1.15rem; font-weight:700; letter-spacing:0.02em; color:#fff; line-height:1.2; }
.ob-role { font-family:var(--font-body); font-size:0.82rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-top:0.4rem; }
.ob-checks { list-style:none; margin:2.2rem 0 0; display:flex; flex-direction:column; gap:1.1rem; }
.ob-checks li { display:flex; align-items:flex-start; gap:0.8rem; font-family:var(--font-body); font-size:0.98rem; font-weight:500; color:rgba(255,255,255,0.88); line-height:1.4; }
.ob-checks svg { flex-shrink:0; margin-top:2px; color:var(--accent); }
.ob-contact { margin-top:auto; padding-top:2.4rem; }
.ob-contact-label { font-family:var(--font-body); font-size:0.68rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem; }
.ob-contact a { display:flex; align-items:center; gap:0.75rem; color:#fff; text-decoration:none; font-family:var(--font-body); font-weight:600; font-size:0.98rem; padding:0.6rem 0; transition:color 0.3s; }
.ob-contact a:hover { color:var(--accent); }
.ob-contact a svg { color:var(--accent); flex-shrink:0; }

/* Right: form card */
.ob-form { padding:2.8rem 2.8rem 3rem; background:rgba(255,255,255,0.02); }
.ob-form h2 { font-size:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:2rem; }
.ob-form .qform { gap:1.6rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
.pill { position:relative; }
.pill input { position:absolute; opacity:0; pointer-events:none; }
.pill span { display:block; padding:0.7rem 1.2rem; border:1px solid rgba(255,255,255,0.14); border-radius:100px; font-size:0.85rem; font-weight:600; color:rgba(255,255,255,0.78); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.pill span:hover { border-color:var(--accent-dim); }
.pill input:checked + span { background:var(--accent); border-color:var(--accent); color:#000; font-weight:700; }
/* Keyboard focus must be visible — the native input is opacity:0, so style the sibling. */
.pill input:focus-visible + span, .chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; }
.ob-note { font-size:0.8rem; color:var(--text-muted); line-height:1.6; }
.ob-note a { color:var(--accent); }

/* ── Trust metrics band ── */
.trust-band { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3.5rem; }
.metric { text-align:center; padding:2.4rem 1.4rem; border:1px solid rgba(255,255,255,0.07); border-radius:18px; background:rgba(255,255,255,0.015); transition:transform 0.35s var(--ease-out), border-color 0.35s, background 0.35s, box-shadow 0.35s; position:relative; overflow:hidden; }
.metric::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(216,180,254,0.10), transparent 70%); opacity:0; transition:opacity 0.35s; pointer-events:none; }
.metric:hover { transform:translateY(-6px); border-color:var(--accent-dim); background:rgba(216,180,254,0.03); box-shadow:0 18px 50px rgba(0,0,0,0.35); }
.metric:hover::after { opacity:1; }
.metric-num { font-family:var(--font-num); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:700; color:#fff; line-height:1; position:relative; }
.metric-num span { color:var(--accent); }
.metric-label { font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-top:0.8rem; position:relative; transition:color 0.35s; }
.metric:hover .metric-label { color:#fff; }

/* ── Client logo / wordmark strip ── */
/* ── Client wordmark marquee (continuous scroll, pauses on hover) ── */
.client-marquee { position:relative; overflow:hidden; margin-top:2.6rem; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.client-marquee-track { display:flex; align-items:center; gap:3.5rem; width:max-content; animation:wtClientScroll 40s linear infinite; will-change:transform; }
.client-marquee:hover .client-marquee-track { animation-play-state:paused; }
@keyframes wtClientScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.client-marquee .lw { font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; font-size:clamp(0.95rem,1.6vw,1.35rem); color:rgba(255,255,255,0.5); white-space:nowrap; transition:color 0.3s, transform 0.3s; }
.client-marquee .lw:hover { color:#fff; transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .client-marquee-track { animation:none; flex-wrap:wrap; justify-content:center; width:100%; gap:1.6rem 2.6rem; } }
/* Legacy static strip (still used if wt_client_marquee isn't called) */
.logo-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2.5rem 3.5rem; margin-top:2.5rem; opacity:0.85; }
.logo-strip .lw { font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; font-size:clamp(1rem,1.8vw,1.4rem); color:rgba(255,255,255,0.55); transition:color 0.3s; white-space:nowrap; }
.logo-strip .lw:hover { color:#fff; }

/* ── Process steps ── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3.5rem; }
.step { position:relative; padding-top:1.5rem; border-top:2px solid rgba(216,180,254,0.25); }
.step-n { font-family:var(--font-num); font-size:0.8rem; font-weight:700; letter-spacing:0.2em; color:var(--accent); }
.step h4 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; text-transform:uppercase; margin:1rem 0 0.7rem; letter-spacing:0.01em; }
.step p { font-size:0.92rem; color:var(--text-muted); line-height:1.6; font-weight:500; }

/* ── Marketing hero (2-col: copy + illustration) ── */
/* minmax(0, …) is the load-bearing part, not the ratio. A bare `1fr` track is really
   minmax(auto, 1fr), and that `auto` floor is the track's MIN-CONTENT — the longest unbreakable
   word in it. At 1440px the headline's min-content is ~760px, so the copy column simply took what
   it wanted and the art column got whatever was left: the declared ratio was ignored entirely and
   the frame resolved to 458px inside a column that should have been 641px. minmax(0, …) removes
   that floor so the fr ratio is actually honoured. Same root cause as the mobile clipping fix
   below — a grid track refusing to go below min-content — just with a different symptom.
   Padding trimmed 6vw -> 5vw for a little more total width. */
.mkt-hero { min-height:88vh; display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:3rem; align-items:center; padding:16vh 5vw 6vh; }
/* Ceiling lowered 4.6rem -> 3.5rem. With the floor removed above, the copy column is ~590px at
   1440px, and "REMEMBERING" is ~10.6px wide per 1px of font-size — so anything above ~56px would
   spill straight back out of the column. This is the trade that buys the art column its width. */
.mkt-hero h1 { font-family:var(--font-head); font-size:clamp(2.4rem,4.4vw,3.5rem); font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; line-height:1.05; }
.mkt-hero h1 em { font-family:var(--font-head); font-style:italic; color:var(--accent); text-transform:none; letter-spacing:-0.01em; }
.mkt-hero .page-desc { max-width:520px; margin-top:1.8rem; }
.hero-cta-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; align-items:center; }
.mkt-hero-art { position:relative; }
/* The hero art is the .hero-shots stack (see below), not a bare <img>. Styling
   `.mkt-hero-art img` here would also match each .hero-shot and re-apply heroFloat
   on top of the frame's own. */
/* `translate`, NOT `transform`. A running CSS animation wins the cascade for whatever property it
   animates, so while this used transform the cursor tilt in pricing.php could never render — it would
   be silently overwritten every frame. Using the independent property leaves transform free for the
   tilt, and the two compose (translate is applied before transform per Transforms Level 2). The
   visual is unchanged: still a 14px rise over 7s. */
@keyframes heroFloat { 0%,100%{ translate:0 0 } 50%{ translate:0 -14px } }
.hero-trust { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2.4rem; font-family:var(--font-body); font-size:0.9rem; color:var(--text-muted); font-weight:600; }
.hero-trust .stars { color:var(--accent); letter-spacing:0.15em; }
.hero-trust b { color:#fff; font-weight:700; }

/* ── Comparison table ── */
.cmp-wrap { margin-top:3.5rem; border:1px solid rgba(255,255,255,0.08); border-radius:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; background:rgba(255,255,255,0.015); scrollbar-width:thin; scrollbar-color:rgba(216,180,254,0.35) transparent; }
.cmp-wrap::-webkit-scrollbar { height:5px; }
.cmp-wrap::-webkit-scrollbar-track { background:transparent; }
.cmp-wrap::-webkit-scrollbar-thumb { background:rgba(216,180,254,0.3); border-radius:4px; }
.cmp { width:100%; min-width:660px; border-collapse:collapse; }
.cmp th, .cmp td { padding:1.15rem 1.4rem; text-align:center; border-bottom:1px solid rgba(255,255,255,0.06); }
.cmp thead th { font-family:var(--font-head); font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.7); }
.cmp thead th.cmp-us { color:var(--accent); font-size:0.95rem; }
.cmp tbody th { text-align:left; font-family:var(--font-body); font-weight:600; color:rgba(255,255,255,0.85); font-size:0.95rem; }
.cmp td.cmp-us, .cmp th.cmp-us { background:rgba(216,180,254,0.06); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background:rgba(255,255,255,0.02); }
.cmp tbody tr:hover td.cmp-us { background:rgba(216,180,254,0.09); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom:none; }
.cmp .yes { color:var(--accent); }
.cmp .no { color:rgba(255,255,255,0.45); }
.cmp .part { color:var(--text-muted); font-size:0.85rem; font-weight:600; }
.cmp svg { vertical-align:middle; }

@media (max-width: 900px) {
    .mkt-hero { grid-template-columns:1fr; min-height:auto; padding:13vh max(20px, 5vw) 7vh; gap:2rem; }
    /* A grid item defaults to min-width:auto, which means it refuses to shrink below its
       min-content width — the widest unbreakable word in it. The h1's longest word
       ("REMEMBERING" on /pricing) measured 405.75px at the clamp's 2.4rem floor, so the column
       blew past a 350px content box and the hero sat 8px off BOTH edges of a 390px screen.
       Because html/body are overflow-x:clip the page could not be scrolled to reveal it — the
       text was simply sheared off at the left edge, which is what it looked like on a phone.
       min-width:0 lets the column shrink; the font floor below is what makes the word actually
       fit once it can. Both are needed — min-width:0 alone just moves the overflow inside the h1. */
    .mkt-hero-copy, .mkt-hero-art { min-width:0; }
    /* Floor the heading to something that fits the narrowest common phone. At 360px this gives
       ~29px, and the longest word lands inside the gutter instead of through it. */
    .mkt-hero h1 { font-size:clamp(1.85rem, 8vw, 2.9rem); overflow-wrap:break-word; }
    /* width:100% is load-bearing. `margin:0 auto` suppresses justify-self:stretch on a
       grid item, so without it the item shrink-to-fits — and every descendant here is
       either width:100% or position:absolute, giving an intrinsic width of 0. The whole
       hero then collapses to 0x0 and no screenshot paints. */
    .mkt-hero-art { order:-1; width:100%; max-width:400px; margin:0 auto; }
    .mkt-hero .page-desc { margin-top:1.3rem; }
    .hero-cta-row { margin-top:2rem; }
    .hero-trust { margin-top:1.8rem; font-size:0.82rem; gap:0.6rem 1rem; }
    /* Keep every section on the same left gutter as `section` above. */
    .page-cta { padding:10vh max(20px, 5vw); }
    .page-hero { padding:12vh max(20px, 5vw) 7vh; min-height:auto; }
    .onboard { grid-template-columns:1fr; }
    .ob-founder { order:2; }
    .trust-band { grid-template-columns:repeat(2,1fr); }
    .steps { grid-template-columns:repeat(2,1fr); gap:2.2rem; }
}
/* ── Results mini-band ── */
.results-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; margin:0 auto; padding:1.3rem 1.8rem; border:1px solid rgba(255,255,255,0.08); border-radius:100px; background:rgba(255,255,255,0.015); max-width:min(920px,94vw); }
.results-band .rb { display:inline-flex; align-items:baseline; gap:0.5rem; font-family:var(--font-body); font-size:0.92rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.results-band .rb b { font-family:var(--font-num); font-size:1.15rem; font-weight:700; color:#fff; }
.results-band .rb b span { color:var(--accent); }
.results-band .rb-dot { width:5px; height:5px; border-radius:50%; background:var(--accent-dim); }
@media(max-width:640px){ .results-band{ border-radius:20px; gap:0.8rem 1.4rem; } .results-band .rb-dot{ display:none; } }

/* ── Hero real-screenshot rotation ── */
/* Every hero source in Assets/Pieces/web is 1128x1400 — PORTRAIT, ratio 0.806. The frame used to be
   4/3 (1.333) landscape, so object-fit:cover threw away roughly 40% of each screenshot's height and
   you saw a narrow horizontal band of a tall piece. Moving the frame to 4/4.6 (0.870) sits close to
   the source ratio, so almost the whole render is visible — the display case, the site inside it and
   the plinth glow — and the frame is far taller on the page at the same time. Keep this near 0.8-0.9
   if the artwork set changes; going back toward landscape re-crops the work. */
.hero-shots { position:relative; width:100%; aspect-ratio:4/4.6; border-radius:20px; }
.hero-shots-frame { position:absolute; inset:0; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.09); box-shadow:0 40px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05); animation:heroFloat 7s ease-in-out infinite; }
/* Crop from the MIDDLE, not the top. These are full-page website screenshots: anchoring to the top
   showed little more than the header/hero band, so the work itself never appeared. */
/* `translate` joins the transition list so the parallax eases instead of snapping; it is deliberately
   short (0.3s) while the Ken Burns `transform` stays at 6s. The settled scale is 1.025 rather than 1
   purely to give the parallax somewhere to move: the frame is overflow:hidden, and at exactly 1.0 a
   5px drift would expose the edge. 2.5% is imperceptible — this is headroom, not a design change. */
.hero-shots-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:0; transition:opacity 1.1s var(--ease-out), transform 6s var(--ease-out), translate 0.3s var(--ease-out); transform:scale(1.06); }
.hero-shots-frame img.on { opacity:1; transform:scale(1.025); }

/* Click-to-advance affordance. The class is added by pricing.php only on a fine pointer at >=1024px,
   so a phone never shows a pointer cursor for behaviour it does not have. There is no <a> and no
   <button> here on purpose — the dots are the keyboard control, and the case is a mouse convenience. */
.hero-shots-frame.is-clickable { cursor:pointer; }

/* Minimal dots — 6px, muted, the active one accent and slightly wider. No labels, no chrome.
   Sits in .mkt-hero-art below .hero-shots, not inside it. */
.hero-dots { display:flex; gap:0.5rem; justify-content:center; margin-top:1.1rem; }
.hero-dot { width:6px; height:6px; padding:0; border:none; border-radius:100px; background:rgba(255,255,255,0.22); cursor:pointer; transition:background 0.3s, width 0.3s var(--ease-out); }
.hero-dot:hover { background:rgba(216,180,254,0.6); }
.hero-dot.on { background:var(--accent); width:18px; }
.hero-dot:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.hero-shots-glow { position:absolute; inset:-12%; z-index:-1; background:radial-gradient(circle at 60% 40%, rgba(139,92,246,0.22), transparent 62%); filter:blur(12px); }
/* pointer-events:none — the tag sits over the case and would otherwise punch a dead patch out of the
   bottom-left of the click-to-advance target. */
.hero-shots-tag { pointer-events:none; position:absolute; left:1rem; bottom:1rem; z-index:2; font-family:var(--font-body); font-size:0.66rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; background:rgba(10,10,18,0.6); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); border-radius:100px; padding:0.4rem 0.9rem; }
@media(prefers-reduced-motion:reduce){ .hero-shots-frame{ animation:none; } .hero-shots-frame img{ transition:opacity 0.4s; transform:none; } }

/* ── Process step icons ── */
.step-ic { width:44px; height:44px; border-radius:12px; border:1px solid var(--accent-dim); background:rgba(216,180,254,0.06); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.step-ic svg { width:22px; height:22px; }

/* ── Comparison column-header icons ── */
.cmp thead .cmp-ic { width:30px; height:30px; margin:0 auto 0.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.7); }
.cmp thead th.cmp-us .cmp-ic { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
.cmp thead .cmp-ic svg { width:16px; height:16px; }
.cmp thead .cmp-hlabel { display:block; }

/* ── Testimonials band ── */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.testi-card { opacity:0; transform:translateY(25px); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:2.2rem 2rem; display:flex; flex-direction:column; transition:border-color 0.35s, transform 0.35s, background 0.35s; }
.testi-card.in-view { opacity:1; transform:translateY(0); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), border-color 0.35s, background 0.35s; }
.testi-card:hover { border-color:var(--accent-dim); background:rgba(216,180,254,0.03); transform:translateY(-4px); }
.testi-quote { font-family:var(--font-body); font-size:0.98rem; line-height:1.7; color:rgba(255,255,255,0.85); font-weight:500; flex:1; }
.testi-quote::before { content:'\201C'; color:var(--accent); font-family:var(--font-head); font-size:2rem; line-height:0; vertical-align:-0.35em; margin-right:0.15em; }
.testi-author { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,0.07); }
.testi-author strong { display:block; font-family:var(--font-head); font-size:0.92rem; font-weight:700; text-transform:uppercase; color:#fff; letter-spacing:0.02em; }
.testi-author span { font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
@media(max-width:860px){ .testi-grid{ grid-template-columns:1fr; } }

/* ── Form: phone + WhatsApp toggle ── */
.qform-phone { display:flex; gap:0.7rem; flex-wrap:wrap; align-items:stretch; }
.qform-phone input[type=tel] { flex:1; min-width:180px; }
.wa-toggle { position:relative; display:inline-flex; align-items:center; }
.wa-toggle input { position:absolute; opacity:0; pointer-events:none; }
.wa-toggle span { display:inline-flex; align-items:center; gap:0.5rem; white-space:nowrap; padding:0 1.1rem; height:100%; min-height:52px; border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:rgba(255,255,255,0.75); font-family:var(--font-body); font-weight:600; font-size:0.9rem; cursor:pointer; transition:all 0.2s; }
.wa-toggle span svg { color:#25d366; }
.wa-toggle input:checked + span { background:rgba(37,211,102,0.12); border-color:rgba(37,211,102,0.5); color:#fff; }
.wa-toggle input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:520px){ .wa-toggle span{ min-height:48px; } }

@media (max-width: 600px) {
    .ob-form, .ob-founder { padding:2rem 1.5rem; }
    .trust-band { grid-template-columns:repeat(2,1fr); gap:0.8rem; }
    .steps { grid-template-columns:1fr; }
    .logo-strip { gap:1.6rem 2.2rem; }
}

/* ── Comparison table, mobile: fit all 4 columns, kill the horizontal scroll ──
   Appended last on purpose: every rule below ties or out-ranks the base .cmp
   rules above and wins by source order. Nothing here touches .fade-up/.in-view
   or any reveal-managed property (opacity/transform/filter/transition). */
@media (max-width: 740px) {
    .cmp-wrap { margin-top:2.4rem; border-radius:16px; scrollbar-width:none; }
    .cmp-wrap::-webkit-scrollbar { display:none; width:0; height:0; }
    .cmp { min-width:0; table-layout:fixed; }
    .cmp th, .cmp td { padding:0.8rem 0.4rem; }
    /* Syncopate is far too wide under ~11px — headers drop to Rajdhani
       (the table's own body font) so FREELANCER fits a ~55px column. */
    .cmp thead th { font-family:var(--font-body); padding:0.95rem 0.2rem 0.75rem; letter-spacing:0.01em; overflow-wrap:anywhere; }
    .cmp thead th, .cmp thead th.cmp-us { font-size:clamp(0.52rem, 2.6vw, 0.68rem); }
    .cmp thead th:first-child { width:41%; padding-left:0.9rem; }
    .cmp thead .cmp-hlabel { line-height:1.3; }
    .cmp thead .cmp-ic { width:24px; height:24px; margin:0 auto 0.4rem; }
    .cmp thead .cmp-ic svg { width:13px; height:13px; }
    .cmp tbody th { font-size:clamp(0.74rem, 2.4vw, 0.88rem); line-height:1.45; padding-left:0.9rem; padding-right:0.55rem; }
    .cmp .yes svg { width:16px; height:16px; }
    .cmp .no svg { width:13px; height:13px; }
    /* 'Sometimes' can't fit a ~55px cell — swap to ±. The word stays in the
       accessibility tree (font-size:0, not display:none); the glyph is marked
       decorative where CSS alt-text is supported. */
    .cmp .part { font-size:0; letter-spacing:0; }
    .cmp .part::after { content:"±"; content:"±" / ""; font-size:1rem; line-height:1; font-weight:700; }
    /* Markup-free glyph legend inside the rounded wrap. */
    .cmp-wrap::after { content:"✓ included · ± sometimes · ✕ not included"; display:block; padding:0.7rem 1rem 0.8rem; text-align:center; font-family:var(--font-body); font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); border-top:1px solid rgba(255,255,255,0.06); }
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTION LAYER — added 10 Aug 2026
   Appended deliberately: every rule here is equal-specificity with the one it
   refines, so source order does the overriding and no !important is needed.
   Built from the tokens already in use — var(--accent), var(--accent-dim),
   var(--ease-out), 0.3s as the hover default — so nothing introduces a new
   motion language. Reduced-motion is handled in one block at the end.

   HOVER USES `translate`, NOT `transform`, ON REVEALED CARDS. Those cards
   choreograph their entrance with `transform` over 0.9s, and a hover that
   reuses `transform` inherits that duration — a 6px lift taking almost a
   second, which reads as lag rather than polish. `translate` is a separate
   animatable property, so hover can be 0.3s while the reveal stays 0.9s.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tier cards: the page's conversion surface ───────────────────────────────
   RESTATED AT .in-view SPECIFICITY, and that is the whole trick. Declaring the
   hover transition on `.pricing-card` alone (0,1,0) loses to the existing
   `.pricing-card.in-view` (0,2,0) at line ~170, whose list has no `translate` —
   so the lift applied instantly with no easing on every card a visitor can
   actually reach. Restating the full list here fixes it, and while restating,
   `filter` goes back in: line 149 blurs these cards 6px and the .in-view rule
   at 170 dropped filter from its transition, so the signature blur-clear reveal
   the comment at 134-148 describes was snapping on 22 cards. */
.pricing-card { transition: border-color 0.4s, transform 0.4s, translate 0.3s var(--ease-out), box-shadow 0.35s; }
.pricing-card.in-view { transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out), filter 0.8s var(--ease-out), border-color 0.4s, translate 0.3s var(--ease-out), box-shadow 0.35s; }
.pricing-card:hover { translate: 0 -6px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
/* The recommended card rests on a full-strength accent border. Left alone its
   hover is the only one on the page with no border feedback at all, because
   `.pricing-card.popular` and `.pricing-card:hover` are both (0,2,0) and
   .popular wins on source order. Give it a glow instead of a border change. */
.pricing-card.popular:hover { box-shadow: 0 20px 60px rgba(168,85,247,0.22); }
/* No `.pricing-card:hover .pricing-btn-secondary` rule. It read well — the card
   previewing its own CTA — but at (0,3,0) it outranks `.pricing-btn-secondary:hover`
   (0,2,0), and the pointer is necessarily over the card whenever it is over the
   button. Hovering a tier CTA directly would have shown the DIM border instead of
   the full accent it showed before, i.e. weaker feedback at the moment of intent. */

/* ── Process steps: four cards that had no hover at all, and a transition
      already declared and paid for on .step.in-view ─────────────────────── */
.step { transition: border-color 0.35s, translate 0.3s var(--ease-out); }
.step.in-view { transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.35s, background 0.35s, translate 0.3s var(--ease-out); }
.step:hover { border-top-color: var(--accent); translate: 0 -4px; }
.step:hover .step-ic { border-color: var(--accent); background: rgba(216,180,254,0.10); box-shadow: 0 0 24px rgba(216,180,254,0.18); }
.step-ic { transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }

/* ── Results band: the same four figures as the metrics band, which has the
      best hover on the page. The inconsistency was visible. ─────────────── */
.results-band .rb { transition: color 0.3s, translate 0.3s var(--ease-out); border-radius: 10px; }
.results-band .rb:hover { translate: 0 -3px; color: #fff; }
.results-band .rb:hover .rb-dot { box-shadow: 0 0 14px rgba(216,180,254,0.7); }
.rb-dot { transition: box-shadow 0.3s; }

/* ── Comparison table: the highlight worked but snapped, with no transition
      declared on the cells it changes. ─────────────────────────────────── */
.cmp td, .cmp th { transition: background 0.25s, color 0.25s; }
.cmp tbody tr:hover th { color: #fff; }

/* ── Testimonials: same reveal-duration problem as the tier cards, same fix,
      and the same missing `filter` restored ─────────────────────────────── */
.testi-card { transition: border-color 0.35s, transform 0.35s, translate 0.3s var(--ease-out), background 0.35s, box-shadow 0.35s; }
.testi-card.in-view { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.8s var(--ease-out), border-color 0.35s, background 0.35s, translate 0.3s var(--ease-out), box-shadow 0.35s; }
.testi-card:hover { translate: 0 -4px; box-shadow: 0 18px 44px rgba(0,0,0,0.34); }

/* ── FAQ: the hit area is the full-width button but only the text responded.
      The tint needs its own horizontal padding — .faq-question is `1.7rem 0`,
      so an un-inset background paints edge to edge with the text flush against
      the rounded corners. Negative margin keeps the text where it was.
      OPEN STATE IS A CLASS, NOT AN ATTRIBUTE: both pages call
      classList.toggle('open') on .faq-item, so `.faq-item[open]` matched
      nothing, and `[aria-expanded]` exists only on /pricing — on the eight
      /service pages hovering an OPEN question rotated the icon back to 90°,
      which reads as closing it. Scoped to :not(.open). ─────────────────── */
.faq-question { transition: color 0.3s, background 0.3s; border-radius: 10px; padding-inline: 1rem; margin-inline: -1rem; }
.faq-question:hover { background: rgba(216,180,254,0.045); }
.faq-item:not(.open) .faq-question:hover .faq-icon { border-color: var(--accent); background: rgba(216,180,254,0.12); transform: rotate(90deg); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Capability blocks: the image scales on hover, so it already reads as
      clickable. It is not a link, and the "Full details →" arrow sits in the
      same text run as the label, so the existing `gap` hover animates nothing.
      pricing.php now wraps the arrow in its own span; this moves it. ────── */
/* `gap` is neutralised here on purpose. Line 59's `.svc-detail-link:hover { gap: 0.9rem }`
   was a genuine no-op while the anchor was one text run — now that the arrow is its own
   flex item it WORKS, and 0.5→0.9rem (+6.4px) stacked on the intended translateX(5px)
   gave an ~11px shift, roughly double the house idiom. Keep the transform, drop the gap. */
.svc-detail-link { transition: color 0.3s; }
.svc-detail-link:hover { gap: 0.5rem; color: #fff; }
.svc-detail-link .arw { display: inline-block; transition: transform 0.3s var(--ease-out); }
.svc-detail-link:hover .arw { transform: translateX(5px); }
/* display:block is belt-and-braces — it is a grid item so it blockifies anyway,
   but it is now an <a>, and the flip/order rules should not depend on that. The
   border and shadow live on the img, not this wrapper, so hover targets the img. */
.svc-head-media { display: block; }
.svc-head-media img { transition: transform 0.6s var(--ease-out), border-color 0.4s, box-shadow 0.4s; }
.svc-head-media:hover img { border-color: var(--accent-dim); box-shadow: 0 28px 70px rgba(0,0,0,0.5); }

/* ── Buttons: shift the arrow the final CTA already contains, and give the
      breadcrumb — the first link a visitor meets — any response at all. ─── */
.cta-btn svg { transition: transform 0.3s var(--ease-out); }
.cta-btn:hover svg { transform: translateX(5px); }
.breadcrumb a { transition: color 0.3s, text-shadow 0.3s; }
.breadcrumb a:hover { color: #fff; text-shadow: 0 0 18px rgba(216,180,254,0.55); }
/* No .addon-card rule here on purpose. $WT_ADDONS (pricing-data.php:184) is populated but nothing
   renders the markup on any page — the existing .addon-card styles at ~188 are already dead. Verified
   by querying a live /pricing render: zero matches. Adding hover to it would be dead CSS on top of
   dead CSS. Wire the markup up first and this block is where the hover belongs. */

/* ── Headings and text: the page's section labels look exactly like filter
      chips — accent pill, border, tinted background — and did nothing at all.
      Movement is kept small (2-4px) because these are reading surfaces, not
      controls: enough to feel alive, not enough to disturb a line of text. ── */
.kicker { transition: border-color 0.3s, background 0.3s, color 0.3s, translate 0.3s var(--ease-out), box-shadow 0.3s; }
.kicker:hover { border-color: var(--accent); background: rgba(216,180,254,0.12); translate: 0 -2px; box-shadow: 0 6px 22px rgba(216,180,254,0.14); }
.svc-section h2, .page-cta h2 { transition: translate 0.35s var(--ease-out), text-shadow 0.35s; }
.svc-section h2:hover, .page-cta h2:hover { translate: 4px 0; text-shadow: 0 0 34px rgba(216,180,254,0.30); }
.svc-tagline { transition: color 0.3s, translate 0.3s var(--ease-out); }
.svc-tagline:hover { color: #fff; translate: 3px 0; }
/* Tier card headings ride their own card rather than responding separately —
   the card is the hit target, so a second independent hover would fight it. */
.pricing-name { transition: color 0.3s, translate 0.3s var(--ease-out); }
.pricing-card:hover .pricing-name { color: var(--accent); translate: 2px 0; }
.pricing-features li { transition: color 0.3s; }
.pricing-card:hover .pricing-features li { color: rgba(255,255,255,0.85); }
.step h4 { transition: color 0.3s, translate 0.3s var(--ease-out); }
.step:hover h4 { color: var(--accent); translate: 2px 0; }
.metric-value { transition: text-shadow 0.35s; }
.metric:hover .metric-value { text-shadow: 0 0 26px rgba(216,180,254,0.35); }

/* ══ HERO COPY + ATMOSPHERE — added 10 Aug 2026 ═══════════════════════════════
   Every effect below is armed by a class that pricing.php adds in script, so with
   JavaScript off the h1, the accent line and the trust row render exactly as they
   did before. Word stagger reuses index.html's manifesto idiom verbatim: opacity
   only, --i inline, `display:inline`. No transforms on text. */

/* H1 word reveal. .words-in cancels the block fade so the words carry the entrance
   rather than both running at once and cancelling each other out visually. */
.mkt-hero h1.words-in { opacity:1 !important; transform:none !important; }
.h1-word { display:inline; opacity:0; transition:opacity 0.5s var(--ease-out) calc(var(--i) * 0.045s); }
.mkt-hero h1.words-go .h1-word { opacity:1; }

/* One-pass sweep across the accent line. background-clip:text plus a transparent
   fill is how this works and also how it goes catastrophically wrong — if the
   animation never runs the text is INVISIBLE, not merely unanimated. Guards: the
   gradient is only declared inside .sweep (a class script adds solely when motion
   is allowed), it is accent at both ends so any resting position is legible, and
   animation-fill-mode is `both`. Do not lift these properties out of .sweep. */
.mkt-hero h1.sweep em {
    background-image:linear-gradient(100deg, var(--accent) 0%, var(--accent) 32%, #ffffff 50%, var(--accent) 68%, var(--accent) 100%);
    background-size:250% 100%; background-position:100% 0; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:heroSweep 1.5s var(--ease-out) 0.7s both;
}
@keyframes heroSweep { from { background-position:100% 0 } to { background-position:0 0 } }

/* Stars fill left to right; the numbers count up in script. tabular-nums keeps the
   digits equal width, and script pins each <b> to its final width before counting,
   so the sentence cannot reflow while the numbers change. */
.hero-trust .star { opacity:0; transition:opacity 0.3s var(--ease-out) calc(var(--i) * 0.09s); }
.hero-trust.stars-go .star { opacity:1; }
.hero-trust b { font-variant-numeric:tabular-nums; }

/* The glow follows the pointer by moving, not by re-rendering the gradient: the
   `at` position lives inside background-image and cannot be transitioned, so it
   would step per mousemove. Translating the element is smooth and compositor-only. */
.hero-shots-glow { transition:translate 0.35s var(--ease-out); }

/* ── Reduced motion: keep every colour, border and glow cue, drop every
      movement — including the scale hovers that predate this block, which the
      page never covered. Line ~155's blanket rule names .svc-head-media.fade-up,
      the WRAPPER, so the img's own scale(1.03) was never caught. ────────── */
@media (prefers-reduced-motion: reduce) {
    .pricing-card:hover, .step:hover, .testi-card:hover, .results-band .rb:hover,
    .kicker:hover, .svc-section h2:hover, .page-cta h2:hover, .svc-tagline:hover,
    .pricing-card:hover .pricing-name, .step:hover h4 { translate: none !important; }
    .svc-detail-link:hover .arw, .cta-btn:hover svg,
    .faq-item:not(.open) .faq-question:hover .faq-icon,
    .svc-head-media:hover img, .pricing-btn:hover, .pricing-btn-primary:hover,
    .pricing-btn-secondary:hover, .cta-btn:hover, .qform-submit:hover { transform: none !important; }
    /* heroFloat is a continuous ambient loop and was never covered — the blanket rule at ~155 lists
       neither .hero-shots-frame nor, since it moved to `translate`, the property it animates. The
       showcase still cross-fades on dot click; it simply stops drifting on its own. */
    .hero-shots-frame { animation: none !important; translate: none !important; }
    .hero-shots-frame img { transition: opacity 1.1s var(--ease-out) !important; }
    /* Hero copy: show everything at once. .sweep is never added under reduced motion, so the accent
       line keeps its plain colour and never enters the transparent-fill state at all. */
    .h1-word, .hero-trust .star { opacity: 1 !important; transition: none !important; }
    .hero-shots-glow, .mkt-hero-art { translate: none !important; transition: none !important; }
}