/* ==========================================================================
   FAMECLOCK HOW PAGE — MODERN GLASS / BLUE EDITION
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --how-accent: #2f6bff;
    --how-accent-2: #66a6ff;
    --how-accent-soft: rgba(47, 107, 255, 0.10);
    --how-accent-glow: rgba(47, 107, 255, 0.18);
    --how-gold: #d97706;
    --how-gold-soft: rgba(217, 119, 6, 0.12);
    --how-text: #1e293b;
    --how-muted: #64748b;
    --how-border: rgba(255, 255, 255, 0.84);
    --how-panel: rgba(255, 255, 255, 0.64);
    --how-panel-strong: rgba(255, 255, 255, 0.82);
    --how-bg-1: #ffffff;
    --how-bg-2: #e8f0f4;
    --how-bg-3: #e0e8ec;
    --how-shadow: 0 24px 60px rgba(47, 107, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.75);
    --how-radius-xl: 34px;
    --how-radius-lg: 26px;
    --how-radius-md: 20px;
    --how-max: 1240px;
}

/* neutralize old sci-fi elements */
#sciFiBg,
.cyber-grid,
.soft-vignette,
canvas {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body.how-page {
    margin: 0;
    color: var(--how-text);
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at 12% 10%, rgba(47, 107, 255, 0.12), transparent 26%),
        radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.80), transparent 24%),
        radial-gradient(circle at 76% 78%, rgba(217, 119, 6, 0.07), transparent 22%),
        linear-gradient(135deg, var(--how-bg-1) 0%, var(--how-bg-2) 34%, #f8fbfc 55%, var(--how-bg-3) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

.how-shell {
    position: relative;
    padding-bottom: 80px;
}

.container {
    width: min(var(--how-max), calc(100% - 36px)) !important;
    max-width: var(--how-max) !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 2;
}

.glass-card {
    background: var(--how-panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--how-border);
    border-radius: var(--how-radius-lg);
    box-shadow: var(--how-shadow);
}

/* subnav */
.how-subnav {
    position: sticky;
    top: 78px;
    z-index: 90;
    padding: 14px 0 0;
}

.how-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: 0 18px 45px rgba(47, 107, 255, 0.08);
}

.how-subnav-links,
.how-subnav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.how-subnav-links a {
    color: var(--how-muted);
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 999px;
    transition: 0.24s ease;
}

.how-subnav-links a:hover {
    color: var(--how-accent);
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.16);
}

/* hero */
.how-hero {
    padding: 34px 0 22px;
}

.hero-frame {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 420px);
    gap: 26px;
    padding: 34px;
    border-radius: 38px;
    background: linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.46));
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow:
        0 28px 70px rgba(47, 107, 255, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.82);
    position: relative;
    overflow: hidden;
}

.hero-frame::before {
    content: "";
    position: absolute;
    inset: auto auto -80px -50px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.16), transparent 68%);
    pointer-events: none;
}

.hero-frame::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.88), transparent 65%);
    pointer-events: none;
}

.hero-copy,
.hero-side {
    position: relative;
    z-index: 1;
}

.hero-badge,
.section-kicker,
.phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid rgba(47, 107, 255, 0.18);
    background: rgba(255, 255, 255, 0.86);
    color: var(--how-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.hero-title {
    margin: 22px 0 16px;
    color: var(--how-text);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.35rem, 5vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    max-width: 740px;
    margin: 0;
    color: var(--how-muted);
    font-size: 1.08rem;
    line-height: 1.75;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--how-accent);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.hero-link-inline:hover {
    text-decoration: underline;
}

.how-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 16px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    white-space: nowrap;
}

.how-btn:hover {
    transform: translateY(-2px);
}

.how-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, rgba(47, 107, 255, 0.98), rgba(102, 166, 255, 0.95));
    box-shadow: 0 16px 28px rgba(47, 107, 255, 0.22);
}

.how-btn-ghost {
    color: var(--how-accent);
    background: rgba(255,255,255,0.84);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.14);
}

.how-btn-gold {
    color: #111827;
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.95), rgba(217, 119, 6, 0.95));
    box-shadow: 0 16px 30px rgba(217, 119, 6, 0.22);
}

.hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(255,255,255,0.88);
    color: var(--how-text);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.hero-chip i {
    color: var(--how-accent);
}

.hero-chip-gold i {
    color: var(--how-gold);
}

.hero-side {
    display: grid;
    gap: 16px;
    align-content: start;
}

.hero-stat {
    padding: 24px 24px 22px;
    border-radius: 24px;
    background: rgba(255,255,255,0.74);
}

.hero-stat.gold {
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,247,237,0.92));
}

.hero-stat-label {
    display: block;
    margin-bottom: 12px;
    color: #71809a;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.hero-stat-value {
    color: var(--how-text);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.45rem);
    line-height: 1.1;
}

/* sections */
.how-section {
    padding: 46px 0;
}

.how-section-compact {
    padding-top: 26px;
    padding-bottom: 26px;
}

.how-section-highlight {
    padding-top: 52px;
    padding-bottom: 52px;
}

.section-head {
    max-width: 860px;
    margin-bottom: 26px;
}

.section-head.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head h2 {
    margin: 16px 0 12px;
    color: var(--how-text);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.section-head p {
    margin: 0;
    color: var(--how-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

/* cards */
.card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(47, 107, 255, 0.95), rgba(102, 166, 255, 0.92));
    color: #fff;
    box-shadow: 0 12px 24px rgba(47, 107, 255, 0.20);
    font-size: 1.2rem;
}

.overview-grid,
.two-col-support,
.compare-grid,
.embed-head,
.faq-cta {
    display: grid;
    gap: 22px;
}

.overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
}

.overview-card,
.overview-diagram,
.persona-card,
.support-card,
.utility-card,
.embed-card,
.trust-card,
.compare-card,
.phase-card,
.optional-card,
.faq-contact,
.faq-item {
    padding: 28px;
}

.overview-card h3,
.persona-card h3,
.support-card h3,
.utility-card h3,
.embed-card h3,
.trust-card h3,
.compare-card h3,
.faq-contact h3 {
    margin: 0 0 10px;
    color: var(--how-text);
    font-size: 1.22rem;
    line-height: 1.3;
}

.overview-card p,
.persona-card p,
.support-card p,
.utility-card p,
.embed-card p,
.trust-card p,
.compare-card p,
.faq-contact p {
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
    font-size: 0.98rem;
}

.muted {
    margin-top: 12px !important;
    color: #7b879a !important;
    font-size: 0.94rem !important;
}

.persona-grid,
.utility-grid,
.trust-grid {
    display: grid;
    gap: 22px;
}

.persona-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
}

.utility-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-diagram {
    display: grid;
    gap: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(247,250,252,0.92));
}

.diagram-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.diagram-pill,
.diagram-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.12);
    color: var(--how-text);
    font-weight: 700;
}

.diagram-pill i,
.diagram-mini-pill i {
    color: var(--how-accent);
}

.diagram-arrow {
    color: #8ca0bb;
    font-size: 1rem;
}

.diagram-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compare-grid,
.two-col-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-card-bad {
    background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,243,243,0.90));
    box-shadow: 0 22px 56px rgba(239, 68, 68, 0.08);
}

.compare-card-good {
    background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(239,246,255,0.92));
    box-shadow: 0 24px 60px rgba(47, 107, 255, 0.10);
}

.compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.compare-head h3 {
    margin: 0;
    font-size: 1.18rem;
}

.compare-card-bad .compare-head h3,
.compare-card-bad .compare-list li::before {
    color: #dc2626;
}

.compare-card-good .compare-head h3,
.compare-card-good .compare-list li::before {
    color: var(--how-accent);
}

.compare-head span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.compare-card-bad .compare-head span {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

.compare-card-good .compare-head span {
    background: rgba(47, 107, 255, 0.10);
    color: var(--how-accent);
}

.compare-list,
.support-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.compare-list li,
.support-list li {
    position: relative;
    padding-left: 28px;
    color: var(--how-muted);
    line-height: 1.72;
}

.compare-list li + li,
.support-list li + li {
    margin-top: 12px;
}

.compare-list li::before,
.support-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.12rem;
    line-height: 1.2;
}

.support-list li::before {
    color: var(--how-accent);
}

.phase-card {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,247,237,0.92));
}

.phase-card p {
    flex: 1 1 520px;
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
}

.phase-card p strong {
    color: var(--how-text);
}

.phase-badge {
    color: var(--how-gold);
    border-color: rgba(217, 119, 6, 0.16);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.step-card {
    position: relative;
    min-height: 260px;
}

.step-no {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: rgba(47, 107, 255, 0.12);
}

.step-card p {
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
}

.two-col-support {
    margin-top: 22px;
}

.inline-note {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
}

.inline-note.good {
    color: var(--how-accent);
    background: rgba(47, 107, 255, 0.10);
}

.inline-note.bad {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.10);
}

.inline-note.warn {
    color: var(--how-gold);
    background: rgba(217, 119, 6, 0.10);
}

.embed-card {
    margin-top: 22px;
}

.embed-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.embed-code {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.92);
    color: #dbeafe;
    font-family: 'Courier New', monospace;
    font-size: 0.92rem;
    line-height: 1.65;
    word-break: break-all;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.trust-disclaimer {
    margin: 22px auto 0;
    max-width: 900px;
    text-align: center;
    color: #7b879a;
    line-height: 1.72;
}

.optional-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.optional-head-left,
.optional-head-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.optional-head-left strong {
    display: block;
    color: var(--how-text);
    font-size: 1.1rem;
}

.optional-head-left small,
.optional-head-right span {
    display: block;
    color: var(--how-muted);
    font-size: 0.92rem;
}

.optional-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--how-gold-soft);
    color: var(--how-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.14);
}

.optional-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.36s ease;
}

.optional-grid {
    margin-top: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.optional-footer {
    margin: 16px 0 0;
    color: var(--how-muted);
    line-height: 1.72;
}

.faq-wrap {
    max-width: 920px;
    margin: 0 auto;
}

.faq-item + .faq-item {
    margin-top: 14px;
}

.faq-item {
    cursor: pointer;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--how-text);
    font-size: 1rem;
    font-weight: 700;
}

.faq-q .chev,
.optional-head-right .chev {
    color: var(--how-muted);
    transition: transform 0.25s ease;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.34s ease;
    color: var(--how-muted);
    line-height: 1.72;
}

.faq-item.active .faq-q .chev {
    transform: rotate(180deg);
    color: var(--how-accent);
}

.faq-item.active .faq-a {
    margin-top: 14px;
}

.faq-contact {
    margin-top: 18px;
    text-align: center;
}

.faq-contact a {
    color: var(--how-accent);
    text-decoration: none;
    font-weight: 700;
}

.faq-cta {
    justify-content: center;
    margin-top: 22px;
}

/* responsive */

.steps-context-callout {
    margin-top: 22px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(244,248,255,0.96));
}

.steps-context-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.steps-context-callout .card-icon {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.steps-context-copy {
    display: grid;
    gap: 8px;
}

.steps-context-copy h3 {
    margin: 0;
    color: var(--how-text);
    font-size: 1.08rem;
    line-height: 1.3;
}

.steps-context-copy p {
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
    font-size: 0.98rem;
    max-width: 920px;
}

.steps-context-callout .how-btn {
    justify-self: end;
}

@media (max-width: 980px) {
    .steps-context-callout {
        grid-template-columns: 1fr;
    }

    .steps-context-callout .how-btn {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .steps-context-main {
        flex-direction: column;
        gap: 14px;
    }

    .steps-context-callout .how-btn {
        width: 100%;
    }
}

.hero-frame-rebuild {
    align-items: start;
}

.hero-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.hero-proof-card {
    min-height: 100%;
    background: rgba(255,255,255,0.78);
}

.hero-story-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(244,248,255,0.96));
}

.hero-story-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(47, 107, 255, 0.10);
    color: var(--how-accent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.hero-story-card h3 {
    margin: 16px 0 10px;
    color: var(--how-text);
    font-size: 1.34rem;
    line-height: 1.3;
}

.hero-story-card p {
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
}

.hero-story-flow {
    margin-top: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-story-flow span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.14);
    color: var(--how-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.hero-story-flow i {
    color: #8ca0bb;
}

.clarity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.clarity-card .how-btn {
    margin-top: 16px;
}

.explainer-band {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.explainer-band .phase-badge {
    margin-bottom: 14px;
}

.explainer-band-copy {
    min-width: 0;
}

.explainer-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.steps-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.deliverables-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tools-band {
    margin-top: 24px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(247,250,252,0.94));
}

.tools-band-head {
    max-width: 860px;
    margin-bottom: 22px;
}

.tools-band-head h3 {
    margin: 16px 0 10px;
    color: var(--how-text);
    font-size: 1.34rem;
    line-height: 1.3;
}

.tools-band-head p {
    margin: 0;
    color: var(--how-muted);
    line-height: 1.72;
    font-size: 0.98rem;
}

.trust-chip-row {
    margin-bottom: 22px;
}

/* Desktop-only refinement for rewritten HOW hero */
@media (min-width: 1181px) {
    .hero-frame.hero-frame-rebuild {
        grid-template-columns: minmax(0, 1.58fr) minmax(320px, 390px);
        gap: 34px;
    }

    .hero-frame-rebuild .hero-title {
        max-width: 720px;
        font-size: clamp(2.95rem, 3.2vw, 4.05rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }

    .hero-frame-rebuild .hero-subtitle {
        max-width: 60ch;
    }
}

@media (min-width: 1181px) and (max-width: 1360px) {
    .hero-frame-rebuild .hero-title {
        font-size: clamp(2.72rem, 2.9vw, 3.55rem);
    }
}

@media (max-width: 1180px) {
    .hero-proof-grid,
    .clarity-grid,
    .steps-grid-five,
    .deliverables-grid,
    .explainer-band {
        grid-template-columns: 1fr;
    }

    .explainer-band-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 1180px) {
    .hero-frame,
    .overview-grid,
    .compare-grid,
    .steps-grid,
    .persona-grid,
    .utility-grid,
    .trust-grid,
    .two-col-support,
    .optional-grid,
    .embed-head {
        grid-template-columns: 1fr;
    }

    .hero-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .step-card {
        min-height: unset;
    }
}

@media (max-width: 920px) {
    .how-subnav {
        display: none;
    }

    .how-hero {
        padding-top: 20px;
    }

    .hero-frame {
        padding: 24px;
        border-radius: 30px;
    }

    .hero-chip-row {
        gap: 10px;
    }

    .hero-side {
        grid-template-columns: 1fr;
    }

    .diagram-line {
        align-items: stretch;
    }

    .diagram-arrow {
        width: 100%;
        text-align: center;
        transform: rotate(90deg);
    }

    .diagram-feature-grid {
        grid-template-columns: 1fr;
    }

    .phase-card {
        align-items: flex-start;
    }

    .optional-head,
    .optional-head-left,
    .optional-head-right {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(var(--how-max), calc(100% - 22px)) !important;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle,
    .section-head p {
        font-size: 0.96rem;
    }

    .hero-chip,
    .diagram-pill,
    .diagram-mini-pill {
        width: 100%;
    }

    .how-btn {
        width: 100%;
    }

    .hero-actions,
    .how-subnav-cta {
        width: 100%;
    }

    .faq-q {
        font-size: 0.96rem;
    }

    .overview-card,
    .overview-diagram,
    .persona-card,
    .support-card,
    .utility-card,
    .embed-card,
    .trust-card,
    .compare-card,
    .phase-card,
    .optional-card,
    .faq-contact,
    .faq-item {
        padding: 22px;
    }
}

/* === HOW CONVERSION POLISH PASS / FameClock premium sales page === */

:root {
    --how-conv-text: #11233d;
    --how-conv-copy: #5d718a;
    --how-conv-line: rgba(214, 226, 240, 0.94);
    --how-conv-surface: rgba(255, 255, 255, 0.84);
    --how-conv-surface-strong: rgba(255, 255, 255, 0.94);
    --how-conv-shadow: 0 22px 54px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.04);
    --how-conv-shadow-hover: 0 30px 68px rgba(15, 23, 42, 0.12), 0 16px 36px rgba(59, 130, 246, 0.10);
    --how-conv-focus: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

body.how-page {
    color: var(--how-conv-text);
    background:
        radial-gradient(circle at 10% 8%, rgba(59, 130, 246, 0.16), transparent 26%),
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.92), transparent 22%),
        radial-gradient(circle at 78% 72%, rgba(245, 158, 11, 0.10), transparent 24%),
        linear-gradient(135deg, #f6fbff 0%, #edf4fb 30%, #f8fbff 56%, #edf2f7 100%);
    background-attachment: fixed;
}

body.how-page .how-shell {
    position: relative;
    padding-bottom: 110px;
}

body.how-page .container {
    width: min(var(--how-max), calc(100% - 40px)) !important;
}

body.how-page #overview,
body.how-page #steps,
body.how-page #youget,
body.how-page #utilities,
body.how-page #trust,
body.how-page #faq {
    position: relative;
    isolation: isolate;
    scroll-margin-top: 132px;
}

body.how-page #overview::before,
body.how-page #youget::before,
body.how-page #trust::before,
body.how-page #faq::before {
    content: "";
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-top: 1px solid rgba(220, 230, 242, 0.76);
    border-bottom: 1px solid rgba(220, 230, 242, 0.76);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08)),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 24%);
}

body.how-page #utilities::before {
    content: "";
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-top: 1px solid rgba(226, 232, 240, 0.82);
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06)),
        radial-gradient(circle at 85% 30%, rgba(245, 158, 11, 0.10), transparent 24%);
}

body.how-page .how-subnav {
    top: 82px;
    padding-top: 16px;
}

body.how-page .how-subnav-inner {
    padding: 14px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255,255,255,0.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

body.how-page .how-subnav-links,
body.how-page .how-subnav-cta {
    gap: 8px;
}

body.how-page .how-subnav-links a {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    color: #657991;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    border: 1px solid transparent;
}

body.how-page .how-subnav-links a:hover,
body.how-page .how-subnav-links a:focus-visible {
    color: var(--how-accent);
    background: rgba(255,255,255,0.96);
    border-color: rgba(59, 130, 246, 0.14);
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.08);
    outline: none;
}

body.how-page .how-hero {
    padding: 40px 0 30px;
}

body.how-page .hero-frame {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 430px);
    gap: 30px;
    padding: 42px;
    border-radius: 40px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.10), transparent 22%),
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,251,255,0.82) 46%, rgba(241,246,253,0.92) 100%);
    border: 1px solid rgba(255,255,255,0.96);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.90);
}

body.how-page .hero-frame::before {
    width: 380px;
    height: 380px;
    inset: auto auto -120px -80px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 68%);
}

body.how-page .hero-frame::after {
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.96), transparent 66%);
}

body.how-page .hero-badge,
body.how-page .section-kicker,
body.how-page .phase-badge {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(96, 165, 250, 0.18);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.06);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

body.how-page .hero-title {
    margin: 20px 0 18px;
    max-width: 13ch;
    color: #10233d;
    font-size: clamp(2.65rem, 5vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

body.how-page .hero-subtitle {
    max-width: 68ch;
    color: var(--how-conv-copy);
    font-size: 1.04rem;
    line-height: 1.78;
}

body.how-page .hero-actions {
    gap: 14px;
    margin-top: 30px;
}

body.how-page .how-btn {
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    font-size: 0.80rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

body.how-page .how-btn:hover {
    transform: translateY(-3px);
}

body.how-page .how-btn:focus-visible {
    outline: none;
    box-shadow: var(--how-conv-focus), 0 16px 28px rgba(15, 23, 42, 0.10);
}

body.how-page .how-btn-primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(96, 165, 250, 0.96));
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
}

body.how-page .how-btn-primary:hover {
    box-shadow: 0 24px 40px rgba(37, 99, 235, 0.28);
}

body.how-page .how-btn-ghost {
    color: var(--how-accent);
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(59, 130, 246, 0.14);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

body.how-page .hero-chip-row {
    margin-top: 28px;
    gap: 10px;
}

body.how-page .hero-chip {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(214, 226, 240, 0.96);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
    color: #536882;
    font-size: 0.82rem;
    font-weight: 800;
}

body.how-page .hero-proof-grid {
    gap: 18px;
    margin-top: 28px;
}

body.how-page .hero-proof-card,
body.how-page .overview-card,
body.how-page .overview-diagram,
body.how-page .persona-card,
body.how-page .support-card,
body.how-page .utility-card,
body.how-page .embed-card,
body.how-page .trust-card,
body.how-page .compare-card,
body.how-page .phase-card,
body.how-page .optional-card,
body.how-page .faq-contact,
body.how-page .faq-item,
body.how-page .explainer-band,
body.how-page .tools-band,
body.how-page .steps-context-callout {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--how-conv-line) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.92)) !important;
    box-shadow: var(--how-conv-shadow) !important;
}

body.how-page .hero-proof-card::before,
body.how-page .overview-card::before,
body.how-page .overview-diagram::before,
body.how-page .persona-card::before,
body.how-page .support-card::before,
body.how-page .utility-card::before,
body.how-page .embed-card::before,
body.how-page .trust-card::before,
body.how-page .compare-card::before,
body.how-page .phase-card::before,
body.how-page .optional-card::before,
body.how-page .faq-contact::before,
body.how-page .faq-item::before,
body.how-page .explainer-band::before,
body.how-page .tools-band::before,
body.how-page .steps-context-callout::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.96) 0%, rgba(96, 165, 250, 0.86) 48%, rgba(245, 158, 11, 0.80) 100%);
    opacity: 0.96;
}

body.how-page .hero-proof-card,
body.how-page .overview-card,
body.how-page .overview-diagram,
body.how-page .persona-card,
body.how-page .support-card,
body.how-page .utility-card,
body.how-page .embed-card,
body.how-page .trust-card,
body.how-page .compare-card,
body.how-page .phase-card,
body.how-page .optional-card,
body.how-page .faq-contact {
    padding: 30px;
}

body.how-page .step-card {
    position: relative;
    min-height: 300px;
    padding: 30px;
    border-radius: 28px;
    border: 1px solid var(--how-conv-line) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.92)) !important;
    box-shadow: var(--how-conv-shadow) !important;
    overflow: hidden;
}

body.how-page .step-card::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.96) 0%, rgba(96, 165, 250, 0.86) 48%, rgba(245, 158, 11, 0.80) 100%);
}

body.how-page .step-card:hover,
body.how-page .hero-proof-card:hover,
body.how-page .overview-card:hover,
body.how-page .overview-diagram:hover,
body.how-page .persona-card:hover,
body.how-page .support-card:hover,
body.how-page .utility-card:hover,
body.how-page .embed-card:hover,
body.how-page .trust-card:hover,
body.how-page .compare-card:hover,
body.how-page .optional-card:hover,
body.how-page .faq-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--how-conv-shadow-hover) !important;
}

body.how-page .card-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.92));
    border: 1px solid rgba(96, 165, 250, 0.16);
    box-shadow: 0 14px 30px rgba(59, 130, 246, 0.08);
    color: var(--how-accent);
    font-size: 1.16rem;
}

body.how-page .section-head {
    max-width: 920px;
    margin-bottom: 32px;
}

body.how-page .section-head h2 {
    margin: 18px 0 14px;
    color: #10233d;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

body.how-page .section-head p,
body.how-page .overview-card p,
body.how-page .overview-diagram p,
body.how-page .persona-card p,
body.how-page .support-card p,
body.how-page .utility-card p,
body.how-page .embed-card p,
body.how-page .trust-card p,
body.how-page .compare-card p,
body.how-page .phase-card p,
body.how-page .optional-card p,
body.how-page .faq-contact p,
body.how-page .faq-a,
body.how-page .muted {
    color: var(--how-conv-copy) !important;
    line-height: 1.74;
}

body.how-page .overview-card h3,
body.how-page .persona-card h3,
body.how-page .support-card h3,
body.how-page .utility-card h3,
body.how-page .embed-card h3,
body.how-page .trust-card h3,
body.how-page .compare-card h3,
body.how-page .faq-contact h3,
body.how-page .step-card h3,
body.how-page .hero-proof-card h3 {
    color: var(--how-conv-text);
    line-height: 1.24;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.how-page .hero-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-content: start;
}

body.how-page .hero-story-card {
    grid-column: auto;
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.94)) !important;
}

body.how-page .hero-story-kicker {
    min-height: 34px;
    padding: 0 12px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--how-accent);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

body.how-page .hero-story-card h3 {
    margin: 16px 0 10px;
    max-width: 18ch;
    color: #10233d;
    font-size: 1.42rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

body.how-page .hero-story-flow {
    gap: 8px;
    margin-top: 20px;
}

body.how-page .hero-story-flow span {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(214, 226, 240, 0.96);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
    color: #334861;
    font-size: 0.84rem;
    font-weight: 800;
}

body.how-page .hero-story-flow i {
    color: #8aa0bd;
}

body.how-page .hero-stat {
    min-height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 24px 22px;
    border-radius: 24px;
    border: 1px solid var(--how-conv-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.92));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

body.how-page .hero-stat::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.94), rgba(96, 165, 250, 0.86));
}

body.how-page .hero-stat.gold::before {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.96), rgba(251, 191, 36, 0.82));
}

body.how-page .hero-stat-label {
    margin-bottom: 12px;
    color: #73839b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

body.how-page .hero-stat-value {
    color: #10233d;
    font-size: clamp(1.8rem, 2.2vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.05em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.92);
}

body.how-page .clarity-grid,
body.how-page .steps-grid-five,
body.how-page .deliverables-grid,
body.how-page .utility-grid,
body.how-page .trust-grid,
body.how-page .two-col-support,
body.how-page .persona-grid,
body.how-page .compare-grid,
body.how-page .hero-proof-grid {
    gap: 18px;
}

body.how-page .step-no {
    top: 18px;
    right: 18px;
    color: rgba(37, 99, 235, 0.10);
    font-size: 2.55rem;
    letter-spacing: -0.05em;
}

body.how-page .inline-note {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

body.how-page .inline-note.good {
    background: linear-gradient(180deg, rgba(236,253,245,0.98), rgba(220,252,231,0.92));
}

body.how-page .inline-note.warn {
    background: linear-gradient(180deg, rgba(255,251,235,0.98), rgba(254,243,199,0.92));
}

body.how-page .inline-note.bad {
    background: linear-gradient(180deg, rgba(254,242,242,0.98), rgba(254,226,226,0.92));
}

body.how-page .explainer-band,
body.how-page .tools-band,
body.how-page .steps-context-callout {
    padding: 30px;
}

body.how-page .explainer-band-actions,
body.how-page .faq-cta {
    gap: 12px;
}

body.how-page .trust-chip-row {
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

body.how-page .trust-chip-row .hero-chip {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.92));
    color: #45607e;
    font-weight: 900;
}

body.how-page .diagram-line {
    min-height: 68px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.92));
    border: 1px solid rgba(226, 232, 240, 0.94);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

body.how-page .diagram-pill,
body.how-page .diagram-mini-pill {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(214, 226, 240, 0.96);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
    color: #344b64;
}

body.how-page .faq-wrap {
    display: grid;
    gap: 16px;
}

body.how-page .faq-item {
    padding: 24px 26px;
    cursor: pointer;
}

body.how-page .faq-q {
    color: #10233d;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

body.how-page .faq-q .chev {
    color: #7a8da6;
}

body.how-page .faq-item.active {
    border-color: rgba(96, 165, 250, 0.24) !important;
    box-shadow: 0 24px 48px rgba(59, 130, 246, 0.10) !important;
}

body.how-page .faq-item.active .faq-a {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.94);
}

body.how-page .faq-contact {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.94)) !important;
}

body.how-page .faq-contact a {
    color: var(--how-accent);
    font-weight: 800;
}

body.how-page .optional-footer,
body.how-page .trust-disclaimer {
    color: #667b94;
}

body.how-page .how-btn:focus-visible,
body.how-page .how-subnav-links a:focus-visible {
    outline: none;
    box-shadow: var(--how-conv-focus), 0 12px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1280px) {
    body.how-page .hero-frame {
        padding: 36px;
    }

    body.how-page .hero-title {
        max-width: 15ch;
    }
}

@media (max-width: 1180px) {
    body.how-page .hero-frame {
        grid-template-columns: 1fr;
    }

    body.how-page .hero-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.how-page .hero-story-card {
        grid-column: 1 / -1;
    }

    body.how-page .hero-proof-grid,
    body.how-page .clarity-grid,
    body.how-page .steps-grid-five,
    body.how-page .deliverables-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    body.how-page .how-subnav {
        display: none;
    }

    body.how-page .hero-frame {
        padding: 28px;
        border-radius: 30px;
    }

    body.how-page .hero-side,
    body.how-page .hero-proof-grid,
    body.how-page .clarity-grid,
    body.how-page .steps-grid-five,
    body.how-page .deliverables-grid,
    body.how-page .utility-grid,
    body.how-page .trust-grid,
    body.how-page .two-col-support,
    body.how-page .persona-grid,
    body.how-page .compare-grid,
    body.how-page .embed-head {
        grid-template-columns: 1fr;
    }

    body.how-page .step-card {
        min-height: unset;
    }

    body.how-page .hero-title {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    body.how-page .container {
        width: min(var(--how-max), calc(100% - 22px)) !important;
    }

    body.how-page .how-hero {
        padding-top: 20px;
    }

    body.how-page .hero-frame,
    body.how-page .hero-proof-card,
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .persona-card,
    body.how-page .support-card,
    body.how-page .utility-card,
    body.how-page .embed-card,
    body.how-page .trust-card,
    body.how-page .compare-card,
    body.how-page .phase-card,
    body.how-page .optional-card,
    body.how-page .faq-contact,
    body.how-page .faq-item,
    body.how-page .step-card,
    body.how-page .explainer-band,
    body.how-page .tools-band,
    body.how-page .steps-context-callout {
        border-radius: 24px;
    }

    body.how-page .hero-frame {
        padding: 22px 18px;
    }

    body.how-page .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.02;
    }

    body.how-page .section-head h2 {
        font-size: clamp(1.72rem, 8vw, 2.3rem);
    }

    body.how-page .hero-subtitle,
    body.how-page .section-head p,
    body.how-page .overview-card p,
    body.how-page .overview-diagram p,
    body.how-page .persona-card p,
    body.how-page .support-card p,
    body.how-page .utility-card p,
    body.how-page .embed-card p,
    body.how-page .trust-card p,
    body.how-page .compare-card p,
    body.how-page .faq-contact p,
    body.how-page .faq-a,
    body.how-page .muted {
        font-size: 0.95rem;
        line-height: 1.68;
    }

    body.how-page .hero-chip,
    body.how-page .diagram-pill,
    body.how-page .diagram-mini-pill,
    body.how-page .hero-story-flow span {
        width: 100%;
        justify-content: center;
    }

    body.how-page .hero-story-flow i {
        display: none;
    }

    body.how-page .hero-actions,
    body.how-page .explainer-band-actions,
    body.how-page .faq-cta,
    body.how-page .how-subnav-cta {
        width: 100%;
    }

    body.how-page .how-btn {
        width: 100%;
        min-height: 50px;
        padding: 0 18px;
    }

    body.how-page .hero-proof-card,
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .persona-card,
    body.how-page .support-card,
    body.how-page .utility-card,
    body.how-page .embed-card,
    body.how-page .trust-card,
    body.how-page .compare-card,
    body.how-page .phase-card,
    body.how-page .optional-card,
    body.how-page .faq-contact,
    body.how-page .faq-item,
    body.how-page .step-card,
    body.how-page .explainer-band,
    body.how-page .tools-band,
    body.how-page .steps-context-callout {
        padding: 22px;
    }

    body.how-page .faq-item {
        padding: 20px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.how-page .how-btn,
    body.how-page .how-subnav-links a,
    body.how-page .step-card,
    body.how-page .hero-proof-card,
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .persona-card,
    body.how-page .support-card,
    body.how-page .utility-card,
    body.how-page .embed-card,
    body.how-page .trust-card,
    body.how-page .compare-card,
    body.how-page .optional-card,
    body.how-page .faq-item {
        transition: none !important;
    }
}

/* === HOW HERO FULL-WIDTH PROOF GRID + MARKET FLOOR FIX === */

body.how-page .hero-frame.hero-frame-rebuild {
    row-gap: 26px;
}

body.how-page .hero-proof-grid--full {
    grid-column: 1 / -1;
    margin-top: 2px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

body.how-page .hero-proof-grid--full .hero-proof-card {
    height: 100%;
}

body.how-page .hero-proof-grid--full .hero-proof-card p {
    max-width: none;
}

@media (max-width: 1180px) {
    body.how-page .hero-proof-grid--full {
        grid-column: auto;
        margin-top: 24px;
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   how.php — storefront premium refinement
   Safe visual polish only
   ========================================================================== */

body.how-page{
    background:
        radial-gradient(circle at 8% 8%, rgba(47,107,255,.14), transparent 24%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.86), transparent 22%),
        radial-gradient(circle at 78% 76%, rgba(217,119,6,.08), transparent 18%),
        linear-gradient(135deg, #f8fbff 0%, #edf4f8 36%, #f9fbfd 58%, #e8eff4 100%);
}

.how-shell{
    padding-bottom:96px;
}

.how-subnav{
    padding:18px 0 0;
}

.how-subnav-inner{
    gap:20px;
    padding:16px 18px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.92);
    background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.68) 100%);
    box-shadow:
        0 22px 50px rgba(47,107,255,.10),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.how-subnav-links{
    gap:8px;
}

.how-subnav-links a{
    position:relative;
    padding:10px 15px;
    border-radius:999px;
    color:#6d7f96;
    background:transparent;
    transition:
        transform .18s ease,
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.how-subnav-links a:hover{
    transform:translateY(-1px);
    color:#2456d8;
    background:rgba(255,255,255,.92);
    box-shadow:
        inset 0 0 0 1px rgba(47,107,255,.14),
        0 10px 20px rgba(47,107,255,.08);
}

.how-subnav-cta{
    gap:12px;
}

.how-subnav-cta .how-btn{
    min-height:48px;
    padding:0 20px;
}

.how-hero{
    padding:42px 0 30px;
}

.hero-frame.hero-frame-rebuild{
    grid-template-columns:minmax(0,1.42fr) minmax(320px,430px);
    gap:28px;
    padding:40px;
    border-radius:42px;
    background:
        radial-gradient(circle at top left, rgba(79,124,255,.12) 0%, rgba(79,124,255,0) 34%),
        linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.56) 100%);
    border:1px solid rgba(255,255,255,.92);
    box-shadow:
        0 32px 78px rgba(47,107,255,.12),
        inset 0 1px 0 rgba(255,255,255,.82);
}

.hero-copy{
    max-width:760px;
}

.hero-title{
    margin:24px 0 18px;
    max-width:13.5ch;
    text-wrap:balance;
}

.hero-subtitle{
    max-width:720px;
    font-size:1.06rem;
    line-height:1.82;
    color:#60748d;
}

.hero-actions{
    gap:14px;
    margin-top:30px;
}

.hero-actions .how-btn{
    min-height:54px;
    padding:0 24px;
    border-radius:18px;
}

.hero-chip-row{
    gap:10px;
    margin-top:24px;
}

.hero-chip{
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.92);
    background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(248,251,255,.86) 100%);
    box-shadow:0 10px 22px rgba(15,23,42,.05);
}

.hero-side{
    gap:14px;
}

.hero-story-card{
    padding:28px;
    border-radius:28px;
    border:1px solid rgba(221,230,240,.96);
    background:
        radial-gradient(circle at top left, rgba(79,124,255,.12) 0%, rgba(79,124,255,0) 34%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.98) 100%);
    box-shadow:0 18px 38px rgba(15,23,42,.06);
}

.hero-story-kicker{
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    background:#eef4ff;
    color:#2f6bff;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hero-story-card h3{
    margin:16px 0 10px;
    color:#132238;
    font-size:1.36rem;
    line-height:1.18;
    letter-spacing:-.02em;
    text-wrap:balance;
}

.hero-story-card p{
    margin:0;
    color:#60748d;
    line-height:1.72;
}

.hero-story-flow{
    margin-top:18px;
    gap:10px;
}

.hero-story-flow span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(221,230,240,.96);
    color:#22324a;
    font-size:.82rem;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
}

.hero-story-flow i{
    color:#8ea0b6;
}

.hero-stat{
    padding:22px 22px 20px;
    border-radius:24px;
    border:1px solid rgba(221,230,240,.96);
    background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,251,255,.98) 100%);
    box-shadow:0 14px 30px rgba(15,23,42,.05);
}

.hero-stat.gold{
    background:
        radial-gradient(circle at top left, rgba(255,232,204,.54) 0%, rgba(255,232,204,0) 34%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,248,240,.98) 100%);
}

.hero-stat-label{
    margin-bottom:10px;
    color:#789;
}

.hero-stat-value{
    letter-spacing:-.03em;
}

.hero-proof-grid--full{
    gap:18px;
    margin-top:10px;
}

.hero-proof-card{
    min-height:100%;
    border-radius:26px;
    border:1px solid rgba(221,230,240,.96);
    background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,251,255,.98) 100%);
    box-shadow:0 14px 28px rgba(15,23,42,.05);
}

.how-section{
    position:relative;
    padding:58px 0;
}

.how-section-highlight .container,
.how-section-faq .container{
    padding:34px;
    border-radius:36px;
    background:
        radial-gradient(circle at top left, rgba(79,124,255,.08) 0%, rgba(79,124,255,0) 30%),
        linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.38) 100%);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:
        0 20px 46px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.66);
}

.how-section-compact .container{
    padding:8px 0 0;
}

.section-head{
    max-width:900px;
    margin-bottom:32px;
}

.section-head.centered{
    max-width:960px;
}

.section-head h2{
    margin:18px 0 14px;
    text-wrap:balance;
}

.section-head p{
    color:#61748a;
    line-height:1.82;
}

.clarity-grid,
.persona-grid,
.utility-grid,
.trust-grid,
.steps-grid,
.hero-proof-grid,
.hero-proof-grid--full{
    align-items:stretch;
}

.overview-card,
.overview-diagram,
.persona-card,
.support-card,
.utility-card,
.embed-card,
.trust-card,
.compare-card,
.phase-card,
.optional-card,
.faq-contact,
.faq-item{
    border-radius:28px;
    border:1px solid rgba(221,230,240,.96);
    background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,251,255,.98) 100%);
    box-shadow:0 14px 28px rgba(15,23,42,.05);
    transition:
        transform .18s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}

@media (hover:hover){
    .overview-card:hover,
    .overview-diagram:hover,
    .persona-card:hover,
    .support-card:hover,
    .utility-card:hover,
    .embed-card:hover,
    .trust-card:hover,
    .compare-card:hover,
    .phase-card:hover,
    .faq-contact:hover,
    .faq-item:hover{
        transform:translateY(-2px);
        border-color:rgba(187,201,219,.96);
        box-shadow:0 22px 42px rgba(15,23,42,.08);
    }
}

.card-icon{
    width:56px;
    height:56px;
    margin-bottom:16px;
    border-radius:18px;
    box-shadow:0 14px 28px rgba(47,107,255,.20);
}

.optional-card{
    border-radius:30px;
    background:
        radial-gradient(circle at top left, rgba(255,232,204,.44) 0%, rgba(255,232,204,0) 30%),
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,250,243,.98) 100%);
}

.optional-head{
    gap:20px;
}

.optional-head strong{
    display:block;
    color:#132238;
    font-size:1.08rem;
    line-height:1.25;
    letter-spacing:-.01em;
}

.optional-head small{
    display:block;
    margin-top:4px;
    color:#6c7e94;
    line-height:1.55;
    font-size:.92rem;
}

.optional-head-right{
    color:#8ea0b6;
    font-weight:800;
    white-space:nowrap;
}

.optional-body{
    transition:max-height .36s ease, opacity .24s ease;
}

.faq-wrap{
    max-width:980px;
}

.faq-item{
    padding:24px 24px 20px;
    overflow:hidden;
}

.faq-item + .faq-item{
    margin-top:14px;
}

.faq-item.active{
    border-color:rgba(79,124,255,.20);
    box-shadow:0 20px 40px rgba(79,124,255,.10);
}

.faq-q{
    font-size:1.04rem;
    line-height:1.45;
    color:#132238;
}

.faq-q .chev{
    color:#8ea0b6;
    transition:transform .2s ease, color .2s ease;
}

.faq-item.active .faq-q .chev{
    transform:rotate(180deg);
    color:#2f6bff;
}

.faq-a{
    color:#61748a;
    line-height:1.78;
}

.faq-cta{
    margin-top:22px;
}

.how-btn{
    border-radius:18px;
}

.how-btn-primary{
    background:linear-gradient(135deg, #2f6bff 0%, #5b8dff 54%, #7caeff 100%);
    box-shadow:0 18px 32px rgba(47,107,255,.24);
}

.how-btn-ghost{
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,251,255,.96) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(47,107,255,.12),
        0 10px 22px rgba(15,23,42,.04);
}

.how-btn-gold{
    box-shadow:0 18px 32px rgba(217,119,6,.22);
}

@media (max-width:1180px){
    .hero-frame.hero-frame-rebuild{
        grid-template-columns:minmax(0,1fr);
    }

    .hero-title{
        max-width:16ch;
    }

    .hero-proof-grid--full{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }
}

@media (max-width:980px){
    .how-subnav{
        top:72px;
    }

    .how-subnav-inner{
        align-items:flex-start;
    }

    .how-section-highlight .container,
    .how-section-faq .container{
        padding:28px;
        border-radius:30px;
    }

    .clarity-grid,
    .steps-grid,
    .persona-grid,
    .trust-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .utility-grid,
    .hero-proof-grid--full{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width:760px){
    .container{
        width:min(var(--how-max), calc(100% - 24px)) !important;
    }

    .how-subnav{
        position:relative;
        top:auto;
        padding-top:14px;
    }

    .how-subnav-inner{
        padding:14px;
        border-radius:24px;
    }

    .how-subnav-links,
    .how-subnav-cta,
    .hero-actions,
    .hero-chip-row{
        width:100%;
    }

    .how-subnav-cta .how-btn,
    .hero-actions .how-btn{
        width:100%;
    }

    .hero-frame.hero-frame-rebuild{
        padding:26px 20px;
        border-radius:30px;
    }

    .hero-title{
        max-width:none;
        font-size:clamp(2.05rem, 8vw, 3rem);
    }

    .hero-subtitle{
        font-size:1rem;
        line-height:1.72;
    }

    .how-section{
        padding:44px 0;
    }

    .how-section-highlight .container,
    .how-section-faq .container{
        padding:22px 18px;
        border-radius:24px;
    }

    .overview-grid,
    .clarity-grid,
    .steps-grid,
    .persona-grid,
    .utility-grid,
    .trust-grid,
    .hero-proof-grid,
    .hero-proof-grid--full{
        grid-template-columns:1fr;
    }

    .overview-card,
    .overview-diagram,
    .persona-card,
    .support-card,
    .utility-card,
    .embed-card,
    .trust-card,
    .compare-card,
    .phase-card,
    .optional-card,
    .faq-contact,
    .faq-item{
        padding:22px 18px;
        border-radius:24px;
    }

    .hero-story-card,
    .hero-stat{
        border-radius:22px;
    }

    .faq-item{
        padding:20px 18px 18px;
    }

    .faq-q{
        font-size:.98rem;
    }
}

@media (max-width:480px){
    .how-shell{
        padding-bottom:72px;
    }

    .hero-frame.hero-frame-rebuild{
        padding:22px 16px;
        border-radius:26px;
    }

    .hero-story-flow{
        gap:8px;
    }

    .hero-story-flow span{
        font-size:.78rem;
        padding:8px 10px;
    }

    .card-icon{
        width:50px;
        height:50px;
        border-radius:16px;
        font-size:1.08rem;
    }

    .hero-chip{
        width:100%;
        justify-content:flex-start;
    }

    .how-btn,
    .how-subnav-cta .how-btn,
    .hero-actions .how-btn{
        min-height:50px;
        font-size:.82rem;
        letter-spacing:.06em;
    }
}
/* ==========================================================================
   how.php — flagship storefront refinement pass 2
   Safe visual polish only / no routing or SEO changes
   ========================================================================== */

body.how-page .hero-frame.hero-frame-rebuild{
    border-radius:40px;
    box-shadow:
        0 34px 84px rgba(37,99,235,.12),
        inset 0 1px 0 rgba(255,255,255,.86);
}

body.how-page .hero-copy{
    max-width:780px;
}

body.how-page .hero-proof-grid--full{
    margin-top:14px;
    gap:20px;
}

body.how-page .hero-proof-card{
    min-height:100%;
    padding:30px;
}

body.how-page .hero-proof-card h3{
    margin:0 0 10px;
    color:#10233d;
    font-size:1.16rem;
    line-height:1.28;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .hero-proof-card p{
    margin:0;
    color:#60748d;
    line-height:1.72;
}

body.how-page .clarity-grid{
    gap:20px;
}

body.how-page .clarity-card,
body.how-page .step-card,
body.how-page .persona-card,
body.how-page .utility-card,
body.how-page .trust-card{
    min-height:100%;
}

body.how-page .clarity-card,
body.how-page .step-card{
    padding:30px;
}

body.how-page .clarity-card h3,
body.how-page .step-card h3{
    margin:0 0 12px;
    color:#10233d;
    font-size:1.16rem;
    line-height:1.28;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .step-card{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.10) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.92) 100%) !important;
}

body.how-page .step-card::before{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    top:0;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,.96) 0%, rgba(96,165,250,.86) 100%);
    opacity:.96;
}

body.how-page .step-no{
    top:16px;
    right:18px;
    font-size:2.3rem;
    color:rgba(37,99,235,.12);
}

body.how-page .persona-grid,
body.how-page .utility-grid,
body.how-page .trust-grid{
    gap:20px;
}

body.how-page .persona-card,
body.how-page .utility-card,
body.how-page .trust-card{
    padding:30px;
}

body.how-page .persona-card h3,
body.how-page .utility-card h3,
body.how-page .trust-card h3{
    margin:0 0 10px;
    color:#10233d;
    line-height:1.28;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .persona-card p,
body.how-page .utility-card p,
body.how-page .trust-card p{
    color:#60748d;
    line-height:1.74;
}

body.how-page .explainer-band--cta{
    grid-template-columns:minmax(0,1.15fr) auto;
    gap:22px;
    padding:32px;
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.14) 0%, transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(244,248,255,.94) 100%) !important;
    box-shadow:
        0 24px 54px rgba(37,99,235,.10),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.how-page .explainer-band--cta .phase-badge{
    box-shadow:0 10px 22px rgba(37,99,235,.08);
}

body.how-page .explainer-band-copy p{
    max-width:70ch;
    color:#4f637d;
    font-size:1rem;
    line-height:1.8;
}

body.how-page .explainer-band-actions{
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

body.how-page .explainer-band-actions .how-btn{
    min-width:210px;
}

body.how-page .embed-card{
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.08) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.94) 100%) !important;
}

body.how-page .embed-code{
    border-radius:20px;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 16px 28px rgba(15,23,42,.14);
}

body.how-page .faq-wrap{
    max-width:1040px;
    gap:18px;
}

body.how-page .faq-item{
    padding:26px 28px;
}

body.how-page .faq-q{
    font-size:1.02rem;
    line-height:1.5;
}

body.how-page .faq-a{
    color:#5f738b;
}

body.how-page .faq-endcap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    gap:18px;
    margin-top:8px;
    align-items:stretch;
}

body.how-page .faq-contact--support{
    margin-top:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    padding:30px;
}

body.how-page .faq-contact--support h3{
    margin:0 0 10px;
    color:#10233d;
    font-size:1.24rem;
    line-height:1.24;
    letter-spacing:-.02em;
}

body.how-page .faq-contact--support p{
    margin:0 0 12px;
    color:#60748d;
    line-height:1.72;
}

body.how-page .faq-contact--support a{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    color:#2563eb;
    font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.10);
}

body.how-page .faq-cta--band{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
    padding:30px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16) 0%, transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(239,246,255,.94) 100%) !important;
}

body.how-page .faq-cta--band .how-btn{
    width:100%;
    min-height:58px;
    font-size:.84rem;
    letter-spacing:.10em;
    box-shadow:0 22px 38px rgba(37,99,235,.22);
}

@media (max-width:1180px){
    body.how-page .explainer-band--cta{
        grid-template-columns:1fr;
    }

    body.how-page .explainer-band-actions{
        justify-content:flex-start;
    }

    body.how-page .faq-endcap{
        grid-template-columns:1fr;
    }
}

@media (max-width:920px){
    body.how-page .hero-proof-grid--full,
    body.how-page .clarity-grid,
    body.how-page .steps-grid-five{
        grid-template-columns:1fr;
    }

    body.how-page .hero-proof-card,
    body.how-page .clarity-card,
    body.how-page .step-card,
    body.how-page .persona-card,
    body.how-page .utility-card,
    body.how-page .trust-card,
    body.how-page .faq-contact--support,
    body.how-page .faq-cta--band{
        padding:26px;
    }
}

@media (max-width:640px){
    body.how-page .hero-proof-card,
    body.how-page .clarity-card,
    body.how-page .step-card,
    body.how-page .persona-card,
    body.how-page .utility-card,
    body.how-page .trust-card,
    body.how-page .explainer-band--cta,
    body.how-page .faq-contact--support,
    body.how-page .faq-cta--band{
        padding:22px 18px;
        border-radius:24px;
    }

    body.how-page .explainer-band-actions{
        width:100%;
    }

    body.how-page .explainer-band-actions .how-btn,
    body.how-page .faq-cta--band .how-btn{
        width:100%;
        min-width:0;
    }

    body.how-page .faq-item{
        padding:22px 18px;
    }

    body.how-page .faq-q{
        font-size:.98rem;
    }
}
/* ==========================================================================
   how.php — flagship pass 3
   Hero proof density + section rhythm + FAQ endcap
   ========================================================================== */

body.how-page .hero-proof-grid--premium{
    gap:20px;
    margin-top:12px;
}

body.how-page .hero-proof-card{
    position:relative;
    overflow:hidden;
    padding:30px;
    min-height:100%;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.10) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.94) 100%) !important;
    border:1px solid rgba(226,232,240,.96) !important;
    box-shadow:
        0 18px 34px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.how-page .hero-proof-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, rgba(37,99,235,.96) 0%, rgba(96,165,250,.86) 100%);
    opacity:.96;
}

body.how-page .hero-proof-card--repeat::before{
    background:linear-gradient(90deg, rgba(37,99,235,.88) 0%, rgba(14,165,233,.84) 100%);
}

body.how-page .hero-proof-card--control::before{
    background:linear-gradient(90deg, rgba(59,130,246,.88) 0%, rgba(139,92,246,.84) 100%);
}

body.how-page .hero-proof-card__eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:30px;
    margin-bottom:16px;
    padding:0 10px;
    border-radius:999px;
    background:#eef4ff;
    color:#2563eb;
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.12em;
    line-height:1;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.10);
}

body.how-page .hero-proof-card h3{
    margin:0 0 10px;
    color:#10233d;
    font-size:1.16rem;
    line-height:1.26;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .hero-proof-card p{
    margin:0;
    color:#5f738b;
    line-height:1.74;
}

body.how-page .section-head{
    max-width:940px;
    margin-bottom:34px;
}

body.how-page .section-head.centered{
    max-width:980px;
}

body.how-page .section-head h2{
    color:#10233d;
    letter-spacing:-.045em;
}

body.how-page .section-head p{
    max-width:72ch;
    margin-left:auto;
    margin-right:auto;
    color:#60748d;
}

body.how-page .how-section + .how-section{
    padding-top:54px;
}

body.how-page .clarity-grid,
body.how-page .steps-grid-five,
body.how-page .persona-grid,
body.how-page .utility-grid,
body.how-page .trust-grid{
    gap:20px;
}

body.how-page .step-card{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.10) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.94) 100%) !important;
}

body.how-page .step-card::before{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    top:0;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,.96) 0%, rgba(96,165,250,.86) 100%);
}

body.how-page .step-card h3,
body.how-page .persona-card h3,
body.how-page .utility-card h3,
body.how-page .trust-card h3{
    margin:0 0 10px;
    color:#10233d;
    line-height:1.26;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .step-card p,
body.how-page .persona-card p,
body.how-page .utility-card p,
body.how-page .trust-card p{
    color:#60748d;
    line-height:1.74;
}

body.how-page .explainer-band--premium{
    grid-template-columns:minmax(0,1.18fr) auto;
    gap:22px;
    padding:32px;
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.14) 0%, transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(244,248,255,.94) 100%) !important;
    box-shadow:
        0 24px 56px rgba(37,99,235,.10),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.how-page .explainer-band--premium .phase-badge{
    box-shadow:0 10px 22px rgba(37,99,235,.08);
}

body.how-page .explainer-band--premium .explainer-band-copy p{
    max-width:72ch;
    color:#4f637d;
    font-size:1rem;
    line-height:1.82;
}

body.how-page .explainer-band--premium .explainer-band-actions{
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

body.how-page .explainer-band--premium .explainer-band-actions .how-btn{
    min-width:210px;
}

body.how-page .faq-wrap{
    max-width:1040px;
    gap:18px;
}

body.how-page .faq-item{
    padding:26px 28px;
}

body.how-page .faq-a{
    color:#5f738b;
}

body.how-page .faq-endcap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    gap:18px;
    margin-top:10px;
    align-items:stretch;
}

body.how-page .faq-contact--support{
    margin-top:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    padding:30px;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.12) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.94) 100%) !important;
}

body.how-page .faq-contact--support h3{
    margin:0 0 10px;
    color:#10233d;
    font-size:1.22rem;
    line-height:1.24;
    letter-spacing:-.02em;
}

body.how-page .faq-contact--support p{
    margin:0 0 12px;
    color:#60748d;
    line-height:1.72;
}

body.how-page .faq-contact--support a{
    display:inline-flex;
    align-items:center;
    width:fit-content;
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    color:#2563eb;
    font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.10);
}

body.how-page .faq-cta--panel{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
    padding:30px;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16) 0%, transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(239,246,255,.94) 100%) !important;
}

body.how-page .faq-cta--panel .how-btn{
    width:100%;
    min-height:58px;
    font-size:.84rem;
    letter-spacing:.10em;
    box-shadow:0 22px 38px rgba(37,99,235,.22);
}

@media (max-width:1180px){
    body.how-page .explainer-band--premium{
        grid-template-columns:1fr;
    }

    body.how-page .explainer-band--premium .explainer-band-actions{
        justify-content:flex-start;
    }

    body.how-page .faq-endcap{
        grid-template-columns:1fr;
    }
}

@media (max-width:920px){
    body.how-page .hero-proof-grid--premium,
    body.how-page .clarity-grid,
    body.how-page .steps-grid-five{
        grid-template-columns:1fr;
    }

    body.how-page .hero-proof-card,
    body.how-page .step-card,
    body.how-page .explainer-band--premium,
    body.how-page .faq-contact--support,
    body.how-page .faq-cta--panel{
        padding:26px;
    }
}

@media (max-width:640px){
    body.how-page .hero-proof-card,
    body.how-page .step-card,
    body.how-page .explainer-band--premium,
    body.how-page .faq-contact--support,
    body.how-page .faq-cta--panel{
        padding:22px 18px;
        border-radius:24px;
    }

    body.how-page .explainer-band--premium .explainer-band-actions,
    body.how-page .explainer-band--premium .explainer-band-actions .how-btn,
    body.how-page .faq-cta--panel .how-btn{
        width:100%;
        min-width:0;
    }

    body.how-page .faq-item{
        padding:22px 18px;
    }
}
/* ==========================================================================
   how.php — subnav + hero CTA + trust authority polish
   ========================================================================== */

body.how-page .how-subnav{
    padding-top:18px;
}

body.how-page .how-subnav-inner{
    position:relative;
    gap:18px;
    padding:16px 18px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.94);
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.12) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.70) 100%);
    box-shadow:
        0 22px 52px rgba(37,99,235,.10),
        inset 0 1px 0 rgba(255,255,255,.82);
}

body.how-page .how-subnav-links{
    gap:8px;
}

body.how-page .how-subnav-links a{
    min-height:40px;
    padding:0 14px;
    font-size:.78rem;
    letter-spacing:.10em;
    color:#6a7f98;
    background:transparent;
}

body.how-page .how-subnav-links a:hover{
    color:#2456d8;
    background:rgba(255,255,255,.94);
    box-shadow:
        inset 0 0 0 1px rgba(37,99,235,.12),
        0 10px 20px rgba(37,99,235,.08);
}

body.how-page .how-subnav-cta{
    gap:10px;
    margin-left:auto;
}

body.how-page .how-subnav-cta .how-btn{
    min-height:46px;
    padding:0 18px;
    border-radius:16px;
    font-size:.78rem;
    letter-spacing:.10em;
}

body.how-page .hero-actions{
    gap:12px;
    align-items:center;
}

body.how-page .hero-actions .how-btn{
    min-height:56px;
    padding:0 24px;
    border-radius:18px;
}

body.how-page .hero-actions .how-btn-primary{
    box-shadow:0 22px 38px rgba(37,99,235,.24);
}

body.how-page .hero-actions .how-btn-ghost{
    color:#1b3359;
    border:1px solid rgba(37,99,235,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.94) 100%);
    box-shadow:0 12px 24px rgba(15,23,42,.05);
}

body.how-page .hero-actions .how-btn-primary:hover{
    box-shadow:0 26px 42px rgba(37,99,235,.28);
}

body.how-page .trust-chip-row--authority{
    justify-content:center;
    gap:12px;
    margin-bottom:26px;
}

body.how-page .trust-chip-row--authority .hero-chip{
    min-height:42px;
    padding:0 14px;
    border:1px solid rgba(214,226,240,.96);
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,252,.92) 100%);
    color:#45607e;
    font-size:.82rem;
    font-weight:900;
    box-shadow:0 10px 18px rgba(15,23,42,.04);
}

body.how-page .trust-grid--authority{
    gap:20px;
}

body.how-page .trust-card--authority{
    position:relative;
    overflow:hidden;
    padding:30px;
    min-height:100%;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.10) 0%, transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.94) 100%) !important;
    border:1px solid rgba(226,232,240,.96) !important;
    box-shadow:
        0 18px 34px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.84) !important;
}

body.how-page .trust-card--authority::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, rgba(37,99,235,.96) 0%, rgba(96,165,250,.82) 100%);
    opacity:.96;
}

body.how-page .trust-card--authority h3{
    margin:0 0 10px;
    color:#10233d;
    line-height:1.26;
    letter-spacing:-.02em;
    text-wrap:balance;
}

body.how-page .trust-card--authority p{
    color:#60748d;
    line-height:1.74;
}

body.how-page .trust-card--authority .inline-note{
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:800;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.84);
}

body.how-page .trust-card--authority .inline-note.good{
    background:linear-gradient(180deg, rgba(236,253,245,.98) 0%, rgba(220,252,231,.92) 100%);
}

body.how-page .trust-card--authority .inline-note.warn{
    background:linear-gradient(180deg, rgba(255,251,235,.98) 0%, rgba(254,243,199,.92) 100%);
}

body.how-page .trust-card--authority .inline-note.bad{
    background:linear-gradient(180deg, rgba(254,242,242,.98) 0%, rgba(254,226,226,.92) 100%);
}

body.how-page .trust-disclaimer{
    max-width:920px;
    margin:24px auto 0;
    padding:16px 18px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(248,251,255,.90) 100%);
    border:1px solid rgba(226,232,240,.94);
    color:#667b94;
    box-shadow:0 10px 20px rgba(15,23,42,.04);
}

@media (max-width:980px){
    body.how-page .how-subnav-inner{
        align-items:flex-start;
    }

    body.how-page .how-subnav-cta{
        margin-left:0;
    }
}

@media (max-width:760px){
    body.how-page .how-subnav{
        position:relative;
        top:auto;
        padding-top:14px;
    }

    body.how-page .how-subnav-inner{
        padding:14px;
        border-radius:24px;
    }

    body.how-page .how-subnav-links,
    body.how-page .how-subnav-cta,
    body.how-page .hero-actions{
        width:100%;
    }

    body.how-page .how-subnav-cta .how-btn,
    body.how-page .hero-actions .how-btn{
        width:100%;
    }

    body.how-page .trust-card--authority{
        padding:24px 18px;
        border-radius:24px;
    }

    body.how-page .trust-disclaimer{
        padding:14px 16px;
        border-radius:16px;
    }
}

/* ==========================================================================
   how.php — final normalization cleanup
   Keeps latest storefront passes stable and reduces cascade fights
   ========================================================================== */

body.how-page .hero-proof-grid--premium,
body.how-page .trust-grid--authority,
body.how-page .faq-endcap,
body.how-page .explainer-band--premium,
body.how-page .explainer-band-actions,
body.how-page .faq-contact--support,
body.how-page .faq-cta--panel,
body.how-page .hero-proof-card,
body.how-page .trust-card--authority{
    min-width:0;
}

body.how-page .faq-endcap > *,
body.how-page .explainer-band--premium > *{
    min-width:0;
}

body.how-page .hero-side{
    align-content:start;
}

body.how-page .hero-proof-card,
body.how-page .trust-card--authority,
body.how-page .faq-contact--support,
body.how-page .faq-cta--panel{
    box-sizing:border-box;
}

@media (max-width:1180px){
    body.how-page .faq-endcap{
        grid-template-columns:1fr;
    }

    body.how-page .explainer-band--premium{
        grid-template-columns:1fr;
    }
}

@media (max-width:920px){
    body.how-page .hero-side{
        grid-template-columns:1fr;
    }

    body.how-page .hero-proof-grid--premium,
    body.how-page .trust-grid--authority{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    body.how-page .hero-actions,
    body.how-page .how-subnav-cta,
    body.how-page .explainer-band-actions{
        width:100%;
    }

    body.how-page .hero-actions .how-btn,
    body.how-page .how-subnav-cta .how-btn,
    body.how-page .explainer-band-actions .how-btn,
    body.how-page .faq-cta--panel .how-btn{
        width:100%;
        min-width:0;
    }

    body.how-page .hero-proof-card,
    body.how-page .trust-card--authority,
    body.how-page .faq-contact--support,
    body.how-page .faq-cta--panel{
        padding:22px 18px;
        border-radius:24px;
    }
}
/* ==========================================================================
   how.php — final hero-only polish
   Top-fold density, CTA clarity, stat balance
   ========================================================================== */

body.how-page .hero-frame.hero-frame-rebuild{
    row-gap:30px;
}

body.how-page .hero-copy{
    max-width:760px;
}

body.how-page .hero-title{
    margin:18px 0 16px;
    max-width:12.2ch;
    font-size:clamp(2.75rem, 5vw, 5.25rem);
    line-height:.96;
    letter-spacing:-.05em;
    text-wrap:balance;
}

body.how-page .hero-subtitle{
    max-width:64ch;
    font-size:1.02rem;
    line-height:1.82;
    color:#566b84;
}

body.how-page .hero-actions{
    gap:12px;
    margin-top:26px;
}

body.how-page .hero-actions .how-btn{
    min-height:56px;
    padding:0 24px;
    border-radius:18px;
}

body.how-page .hero-actions .how-btn-primary{
    box-shadow:0 24px 42px rgba(37,99,235,.24);
}

body.how-page .hero-actions .how-btn-ghost{
    color:#1a3358;
    border:1px solid rgba(37,99,235,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.94) 100%);
    box-shadow:0 12px 24px rgba(15,23,42,.05);
}

body.how-page .hero-chip-row{
    gap:10px;
    margin-top:22px;
}

body.how-page .hero-chip{
    min-height:40px;
    padding:0 14px;
    font-size:.81rem;
    font-weight:800;
    color:#4e647d;
}

body.how-page .hero-side{
    gap:16px;
    align-content:start;
}

body.how-page .hero-story-card{
    padding:30px;
}

body.how-page .hero-story-card h3{
    max-width:16ch;
    font-size:1.38rem;
    line-height:1.18;
}

body.how-page .hero-story-card p{
    color:#5d728a;
}

body.how-page .hero-story-flow{
    gap:8px;
    margin-top:18px;
}

body.how-page .hero-story-flow span{
    min-height:40px;
    padding:0 13px;
    font-size:.8rem;
    font-weight:800;
}

body.how-page .hero-stat{
    min-height:150px;
    padding:24px 22px 22px;
}

body.how-page .hero-stat-label{
    margin-bottom:10px;
    font-size:.71rem;
    letter-spacing:.13em;
    color:#72849d;
}

body.how-page .hero-stat-value{
    font-size:clamp(1.9rem, 2.2vw, 2.7rem);
    line-height:.98;
    letter-spacing:-.06em;
    color:#10233d;
}

@media (max-width:1180px){
    body.how-page .hero-title{
        max-width:14ch;
        font-size:clamp(2.45rem, 5.6vw, 4.1rem);
    }

    body.how-page .hero-subtitle{
        max-width:68ch;
    }
}

@media (max-width:920px){
    body.how-page .hero-frame.hero-frame-rebuild{
        row-gap:22px;
    }

    body.how-page .hero-title{
        max-width:none;
        font-size:clamp(2.2rem, 8vw, 3.35rem);
    }

    body.how-page .hero-subtitle{
        max-width:none;
        font-size:.98rem;
        line-height:1.74;
    }

    body.how-page .hero-chip-row{
        gap:8px;
    }

    body.how-page .hero-story-card,
    body.how-page .hero-stat{
        border-radius:24px;
    }
}

@media (max-width:640px){
    body.how-page .hero-frame.hero-frame-rebuild{
        padding:24px 18px;
    }

    body.how-page .hero-title{
        font-size:clamp(2rem, 9vw, 2.8rem);
        line-height:.98;
    }

    body.how-page .hero-actions,
    body.how-page .hero-chip-row{
        width:100%;
    }

    body.how-page .hero-actions .how-btn{
        width:100%;
        min-width:0;
    }

    body.how-page .hero-chip{
        width:100%;
        justify-content:flex-start;
    }

    body.how-page .hero-story-card,
    body.how-page .hero-stat{
        padding:22px 18px;
    }

    body.how-page .hero-story-card h3{
        max-width:none;
        font-size:1.26rem;
    }

    body.how-page .hero-stat{
        min-height:auto;
    }
}
/* ==========================================================================
   index.php — spotlight / trending / timeline refinement
   Premium showcase cluster polish
   ========================================================================== */

body.index-modern.index-wow .trending-container{
    align-items:stretch !important;
    gap:18px !important;
    padding:20px 22px !important;
    border-radius:24px !important;
    background:
        radial-gradient(circle at top left, rgba(248,113,113,.08) 0%, transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.94) 100%) !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 20px 40px rgba(15,23,42,.06) !important;
}

body.index-modern.index-wow .trending-title{
    flex:0 0 180px;
    align-items:flex-start !important;
    justify-content:center;
    text-align:left;
    font-size:.78rem !important;
    line-height:1.4;
    letter-spacing:.14em !important;
    color:#be123c !important;
}

body.index-modern.index-wow .trending-grid{
    gap:12px !important;
    align-items:stretch;
}

body.index-modern.index-wow .trend-card{
    min-height:84px;
    padding:14px 14px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.95) 100%) !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 12px 22px rgba(15,23,42,.05) !important;
}

body.index-modern.index-wow .t-time{
    font-size:1rem;
    letter-spacing:-.03em;
}

body.index-modern.index-wow .t-owner{
    font-size:.92rem;
    color:#1d4ed8 !important;
}

body.index-modern.index-wow .t-hypes{
    min-height:30px;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:.74rem !important;
    letter-spacing:.02em;
}

body.index-modern.index-wow .spotlight-bar-container{
    max-width:1160px !important;
    margin:42px auto 18px !important;
    border-radius:30px !important;
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.12) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,250,240,.94) 100%) !important;
    border:1px solid rgba(245,158,11,.22) !important;
    box-shadow:
        0 28px 56px rgba(217,119,6,.10),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.index-modern.index-wow .spotlight-header{
    padding:18px 20px !important;
    gap:14px !important;
}

body.index-modern.index-wow .spotlight-header-left{
    gap:10px !important;
}

body.index-modern.index-wow .spotlight-user-badge{
    padding:6px 14px 6px 6px !important;
    border-radius:18px !important;
}

body.index-modern.index-wow .sp-avatar{
    width:38px;
    height:38px;
    font-size:1rem;
}

body.index-modern.index-wow .sp-name{
    font-size:.92rem;
    letter-spacing:.01em;
}

body.index-modern.index-wow .spotlight-stage{
    padding:22px 20px !important;
}

body.index-modern.index-wow .spotlight-body{
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.18));
}

body.index-modern.index-wow .sp-banner-img{
    height:380px !important;
}

body.index-modern.index-wow .sp-text-content{
    min-height:260px;
    padding:44px 30px !important;
    justify-content:center;
}

body.index-modern.index-wow .sp-kicker{
    font-size:.74rem !important;
    letter-spacing:.14em !important;
}

body.index-modern.index-wow .sp-quote{
    max-width:760px;
    font-size:clamp(1.45rem, 3vw, 2.2rem) !important;
    line-height:1.38 !important;
    letter-spacing:-.03em;
}

body.index-modern.index-wow .sp-link-box{
    max-width:760px;
    min-height:54px;
    padding:14px 16px !important;
    border-radius:18px !important;
    box-shadow:0 12px 24px rgba(15,23,42,.05);
}

body.index-modern.index-wow .spotlight-footer{
    padding:16px 20px 20px !important;
    gap:14px !important;
}

body.index-modern.index-wow .sp-footer-pill{
    min-height:38px;
    padding:0 12px !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid rgba(226,232,240,.94) !important;
    font-size:.76rem !important;
}

body.index-modern.index-wow .sp-footer-actions{
    gap:10px !important;
}

body.index-modern.index-wow .sp-action-btn{
    min-height:44px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    font-size:.78rem !important;
    font-weight:800 !important;
}

body.index-modern.index-wow .sp-action-btn--primary{
    box-shadow:0 18px 30px rgba(37,99,235,.18) !important;
}

body.index-modern.index-wow .sp-action-btn--ghost{
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
    color:#14263f !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 10px 20px rgba(15,23,42,.04) !important;
}

body.index-modern.index-wow .spotlight-archive-wrap{
    max-width:1160px !important;
    margin:-6px auto 30px !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.92)) !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 16px 32px rgba(15,23,42,.05) !important;
}

body.index-modern.index-wow .spotlight-archive-summary{
    padding:18px 20px !important;
}

body.index-modern.index-wow .spotlight-archive-title{
    font-size:.78rem !important;
    letter-spacing:.14em !important;
}

body.index-modern.index-wow .spotlight-archive-subtitle{
    color:#66788f !important;
    font-size:.9rem !important;
}

body.index-modern.index-wow .spotlight-archive-panel{
    padding:0 18px 18px !important;
}

body.index-modern.index-wow .spotlight-archive-grid{
    gap:14px !important;
}

body.index-modern.index-wow .spotlight-archive-card{
    padding:16px !important;
    border-radius:20px !important;
    min-height:100%;
}

body.index-modern.index-wow .spotlight-archive-media,
body.index-modern.index-wow .spotlight-archive-text{
    border-radius:16px !important;
}

body.index-modern.index-wow .spotlight-archive-cta{
    margin-top:auto;
    font-size:.78rem !important;
    letter-spacing:.06em !important;
}

body.index-modern.index-wow .timeline-section-title{
    margin:8px 0 16px !important;
    justify-content:flex-start !important;
    font-size:1.04rem !important;
    letter-spacing:-.02em !important;
}

body.index-modern.index-wow .timeline-wrapper{
    padding-bottom:8px !important;
}

body.index-modern.index-wow .timeline-track{
    gap:12px !important;
    padding:0 !important;
}

body.index-modern.index-wow .timeline-card{
    min-height:112px;
    border-radius:18px !important;
    padding:16px 10px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.95) 100%) !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 12px 22px rgba(15,23,42,.05) !important;
}

body.index-modern.index-wow .timeline-card .tl-time{
    font-size:1rem;
    letter-spacing:-.03em;
}

body.index-modern.index-wow .timeline-card .tl-owner{
    font-size:.9rem;
    line-height:1.35;
}

body.index-modern.index-wow .timeline-card .tl-label{
    margin-top:8px;
    min-height:28px;
    padding:0 8px;
    border-radius:999px;
    font-size:.66rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

@media (max-width:1100px){
    body.index-modern.index-wow .trending-container{
        flex-direction:column;
        align-items:stretch !important;
    }

    body.index-modern.index-wow .trending-title{
        flex:0 0 auto;
        width:100%;
    }

    body.index-modern.index-wow .sp-footer-actions{
        width:100%;
    }
}

@media (max-width:820px){
    body.index-modern.index-wow .trending-grid{
        grid-template-columns:1fr !important;
    }

    body.index-modern.index-wow .spotlight-header,
    body.index-modern.index-wow .spotlight-footer{
        flex-direction:column;
        align-items:flex-start !important;
    }

    body.index-modern.index-wow .sp-footer-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100%;
    }

    body.index-modern.index-wow .sp-action-btn{
        width:100%;
        justify-content:center;
    }

    body.index-modern.index-wow .sp-banner-img{
        height:300px !important;
    }

    body.index-modern.index-wow .sp-text-content{
        min-height:220px;
        padding:32px 20px !important;
    }

    body.index-modern.index-wow .timeline-track{
        display:flex !important;
        width:max-content;
        min-width:max-content;
    }

    body.index-modern.index-wow .timeline-card{
        min-width:112px;
        max-width:132px;
        width:auto;
    }
}

@media (max-width:640px){
    body.index-modern.index-wow .trending-container{
        padding:16px !important;
        border-radius:20px !important;
    }

    body.index-modern.index-wow .trend-card{
        min-height:76px;
        padding:12px !important;
        border-radius:16px !important;
    }

    body.index-modern.index-wow .spotlight-bar-container{
        margin:30px auto 14px !important;
        border-radius:24px !important;
    }

    body.index-modern.index-wow .spotlight-header,
    body.index-modern.index-wow .spotlight-stage,
    body.index-modern.index-wow .spotlight-footer{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    body.index-modern.index-wow .sp-banner-img{
        height:240px !important;
    }

    body.index-modern.index-wow .sp-quote{
        font-size:clamp(1.16rem, 6vw, 1.6rem) !important;
    }

    body.index-modern.index-wow .spotlight-archive-wrap{
        margin:0 auto 24px !important;
        border-radius:20px !important;
    }

    body.index-modern.index-wow .spotlight-archive-summary{
        padding:16px !important;
    }

    body.index-modern.index-wow .spotlight-archive-panel{
        padding:0 16px 16px !important;
    }

    body.index-modern.index-wow .spotlight-archive-grid{
        grid-template-columns:1fr !important;
    }

    body.index-modern.index-wow .timeline-card{
        min-width:104px;
        max-width:124px;
        min-height:104px;
    }
}


/* === HOW STEP 2 / AD LANDING DECLUTTER === */

body.how-page .how-subnav-cta .how-btn-ghost,
body.how-page .explainer-band-actions .how-btn-ghost{
    display:none !important;
}

body.how-page .tools-band{
    display:none !important;
}

body.how-page .explainer-band--premium{
    grid-template-columns:1fr !important;
    align-items:start;
}

body.how-page .explainer-band-actions{
    justify-content:flex-start !important;
    margin-top:8px;
}

body.how-page .explainer-band-copy p{
    max-width:68ch;
}

body.how-page #utilities .section-head{
    max-width:860px;
    margin-bottom:24px;
}

body.how-page #utilities .persona-grid{
    margin-top:0;
}

body.how-page .faq-endcap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    gap:18px;
    margin-top:18px;
    align-items:stretch;
}

body.how-page .faq-contact--support,
body.how-page .faq-cta--panel{
    min-height:100%;
}

body.how-page .faq-cta--panel{
    display:flex;
    align-items:center;
    justify-content:center;
}

body.how-page .faq-cta--panel .how-btn{
    width:100%;
}

@media (max-width:1180px){
    body.how-page .faq-endcap{
        grid-template-columns:1fr;
    }
}

@media (max-width:760px){
    body.how-page .hero-link-inline{
        margin-top:12px;
    }
}


/* === HOW STEP 3 / COMPACT SALES FLOW === */

/* Hide low-priority “why / utilities” content for ad landing */
body.how-page .how-subnav-links a[href="#utilities"]{
    display:none !important;
}

body.how-page #utilities{
    display:none !important;
}

/* Tighten section rhythm */
body.how-page .how-section{
    padding:34px 0;
}

body.how-page .how-section-highlight{
    padding-top:40px;
    padding-bottom:40px;
}

body.how-page .how-section-compact{
    padding-top:20px;
    padding-bottom:20px;
}

/* Make the 5-step explainer breathe more on desktop */
body.how-page .steps-grid-five{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    align-items:stretch;
}

body.how-page .step-card{
    min-height:260px !important;
}

/* Make “what you get” easier to scan */
body.how-page .deliverables-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

/* Reduce repeated visual weight in middle sections */
body.how-page .overview-card,
body.how-page .overview-diagram,
body.how-page .support-card,
body.how-page .trust-card,
body.how-page .step-card,
body.how-page .faq-item,
body.how-page .faq-contact,
body.how-page .faq-cta--panel{
    box-shadow:0 16px 34px rgba(15,23,42,.06) !important;
}

/* Keep the step CTA area focused */
body.how-page .steps-context-callout{
    margin-top:18px;
    padding:26px 28px;
}

body.how-page .steps-context-copy p{
    max-width:64ch;
}

/* Better breathing around the FAQ ending panel */
body.how-page .faq-contact--support,
body.how-page .faq-cta--panel{
    padding:26px !important;
}

@media (max-width: 1360px){
    body.how-page .steps-grid-five{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 920px){
    body.how-page .deliverables-grid{
        grid-template-columns:1fr !important;
    }

    body.how-page .steps-grid-five{
        grid-template-columns:1fr !important;
    }

    body.how-page .how-section{
        padding:28px 0;
    }
}


/* === HOW STEP 4 / FINAL CTA CLOSE === */

body.how-page .faq-endcap{
    margin-top:24px;
    align-items:stretch;
}

body.how-page .faq-contact--support{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.94)) !important;
    border:1px solid rgba(214,226,240,0.96) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.06) !important;
}

body.how-page .faq-contact--support h3{
    font-size:1.24rem;
    line-height:1.2;
    letter-spacing:-.02em;
}

body.how-page .faq-contact--support p{
    max-width:54ch;
    margin-left:auto;
    margin-right:auto;
}

body.how-page .faq-cta--panel{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 34%),
        linear-gradient(135deg, rgba(239,246,255,.98) 0%, rgba(219,234,254,.92) 100%) !important;
    border:1px solid rgba(96,165,250,.22) !important;
    box-shadow:
        0 26px 58px rgba(37,99,235,.14),
        0 12px 24px rgba(15,23,42,.06) !important;
}

body.how-page .faq-cta--panel::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(37,99,235,.98) 0%, rgba(96,165,250,.92) 52%, rgba(245,158,11,.82) 100%);
}

body.how-page .faq-cta--panel .how-btn{
    min-height:58px;
    width:100%;
    padding:0 22px;
    border-radius:18px;
    font-size:.84rem;
    font-weight:900;
    letter-spacing:.10em;
    box-shadow:0 18px 34px rgba(37,99,235,.22);
}

body.how-page .faq-cta--panel .how-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 24px 42px rgba(37,99,235,.28);
}

body.how-page .faq-cta--panel .how-btn + .how-btn{
    margin-top:10px;
}

body.how-page #faq .section-head{
    margin-bottom:26px;
}

body.how-page #faq .section-head p{
    max-width:62ch;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width: 920px){
    body.how-page .faq-contact--support p{
        max-width:none;
    }

    body.how-page .faq-cta--panel .how-btn{
        min-height:54px;
    }
}


/* === HOW STEP 6 / MIDDLE FLOW COMPRESSION === */

/* Hide low-priority Why section from ad landing */
body.how-page .how-subnav-links a[href="#why"]{
    display:none !important;
}

body.how-page #why{
    display:none !important;
}

/* Remove repetitive comparison/explanation layer */
body.how-page .compare-grid,
body.how-page .phase-card{
    display:none !important;
}

/* Make overview tighter and easier to scan */
body.how-page .overview-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) !important;
    gap:18px !important;
}

body.how-page .section-head{
    margin-bottom:24px !important;
}

body.how-page .overview-card,
body.how-page .overview-diagram,
body.how-page .support-card,
body.how-page .trust-card{
    padding:26px !important;
}

/* Support area: less spread, faster read */
body.how-page .two-col-support{
    gap:18px !important;
    margin-top:18px !important;
}

body.how-page .support-list li,
body.how-page .compare-list li{
    line-height:1.64 !important;
}

/* Overview / support visual rhythm */
body.how-page #overview .section-head p,
body.how-page #steps .section-head p,
body.how-page #youget .section-head p,
body.how-page #trust .section-head p{
    max-width:64ch;
}

/* On medium screens, prefer single-column clarity */
@media (max-width: 1180px){
    body.how-page .overview-grid{
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 920px){
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .support-card,
    body.how-page .trust-card{
        padding:22px !important;
    }
}


/* === HOW STEP 7 / MOBILE CONVERSION POLISH === */

@media (max-width: 640px){
    body.how-page .hero-frame{
        padding:20px 16px !important;
    }

    body.how-page .hero-badge{
        min-height:34px;
        padding:0 12px;
        font-size:.68rem;
        letter-spacing:.10em;
    }

    body.how-page .hero-title{
        font-size:clamp(1.88rem, 8.8vw, 2.75rem) !important;
        line-height:1.02 !important;
        margin:16px 0 14px !important;
        max-width:100% !important;
    }

    body.how-page .hero-subtitle{
        font-size:.95rem !important;
        line-height:1.66 !important;
        max-width:100% !important;
    }

    body.how-page .hero-actions{
        margin-top:22px !important;
    }

    body.how-page .hero-actions .how-btn,
    body.how-page .faq-cta--panel .how-btn{
        min-height:52px !important;
        font-size:.78rem !important;
        letter-spacing:.08em !important;
        padding:0 16px !important;
    }

    body.how-page .hero-chip-row{
        margin-top:18px !important;
        gap:8px !important;
    }

    body.how-page .hero-chip{
        min-height:40px;
        padding:10px 12px !important;
        font-size:.80rem !important;
    }

    body.how-page .hero-story-card{
        padding:22px !important;
    }

    body.how-page .hero-story-card h3{
        font-size:1.18rem !important;
        max-width:none !important;
    }

    body.how-page .hero-story-card p{
        font-size:.94rem !important;
        line-height:1.64 !important;
    }

    body.how-page .section-head h2{
        line-height:1.08 !important;
    }
}

/* ==========================================================================
   HOW PAGE RESIDUAL CONVERGENCE PASS V8
   Final premium tightening without structural changes
   ========================================================================== */

body.how-page .how-shell{
    width:min(1260px, calc(100% - 32px)) !important;
    padding-bottom:84px !important;
}

body.how-page .how-subnav{
    top:92px !important;
    padding:12px !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,249,255,.82)) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 20px 40px rgba(15,23,42,.07) !important;
    backdrop-filter:blur(16px) saturate(138%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(138%) !important;
}

body.how-page .how-subnav-inner,
body.how-page .how-subnav-links{
    gap:10px !important;
}

body.how-page .how-subnav-links a,
body.how-page .how-subnav-cta{
    min-height:46px !important;
    padding:0 16px !important;
    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.14) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)) !important;
    box-shadow:0 10px 20px rgba(15,23,42,.04) !important;
}

body.how-page .how-subnav-links a:hover,
body.how-page .how-subnav-links a.is-active,
body.how-page .how-subnav-cta:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(47,107,255,.20) !important;
    box-shadow:0 16px 28px rgba(15,23,42,.07) !important;
}

body.how-page .hero-frame{
    position:relative !important;
    overflow:hidden !important;
    border-radius:36px !important;
    background:
        radial-gradient(circle at top right, rgba(47,107,255,.10), transparent 28%),
        radial-gradient(circle at bottom left, rgba(212,164,58,.08), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,249,255,.90)) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 30px 62px rgba(15,23,42,.08) !important;
}

body.how-page .hero-frame::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-80px;
    width:300px;
    height:300px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(47,107,255,.12) 0%, rgba(47,107,255,0) 72%);
    pointer-events:none;
}

body.how-page .hero-copy{
    max-width:720px !important;
}

body.how-page .hero-badge{
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:rgba(47,107,255,.08) !important;
    border:1px solid rgba(47,107,255,.14) !important;
    color:#2563eb !important;
    box-shadow:0 10px 20px rgba(47,107,255,.06) !important;
}

body.how-page .hero-title{
    font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif !important;
    font-size:clamp(2.3rem, 4.8vw, 4.2rem) !important;
    line-height:.98 !important;
    letter-spacing:-.05em !important;
    max-width:11ch !important;
}

body.how-page .hero-subtitle{
    max-width:62ch !important;
    color:#61708f !important;
    font-size:1.03rem !important;
    line-height:1.78 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
}

body.how-page .hero-actions,
body.how-page .explainer-band-actions,
body.how-page .faq-contact,
body.how-page .trust-chip-row{
    gap:10px !important;
}

body.how-page .hero-actions .how-btn,
body.how-page .faq-cta--panel .how-btn,
body.how-page .how-btn{
    min-height:50px !important;
    padding:0 18px !important;
    border-radius:16px !important;
    box-shadow:0 14px 26px rgba(15,23,42,.06) !important;
}

body.how-page .hero-chip-row{
    gap:10px !important;
}

body.how-page .hero-chip{
    min-height:40px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(148,163,184,.16) !important;
    color:#314256 !important;
    box-shadow:0 10px 20px rgba(15,23,42,.04) !important;
}

body.how-page .hero-stat{
    min-height:104px !important;
    padding:18px 18px !important;
    border-radius:22px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.92)) !important;
    border:1px solid rgba(148,163,184,.16) !important;
    box-shadow:0 14px 28px rgba(15,23,42,.05) !important;
}

body.how-page .hero-stat-label{
    color:#7a8aa2 !important;
    font-size:.72rem !important;
    letter-spacing:.14em !important;
}

body.how-page .hero-stat-value{
    letter-spacing:-.03em !important;
}

body.how-page .hero-story-card,
body.how-page .hero-proof-card,
body.how-page .overview-card,
body.how-page .overview-diagram,
body.how-page .support-card,
body.how-page .trust-card,
body.how-page .utility-card,
body.how-page .persona-card,
body.how-page .optional-card,
body.how-page .embed-card,
body.how-page .faq-item,
body.how-page .explainer-band,
body.how-page .faq-cta--panel,
body.how-page .faq-contact--support,
body.how-page .faq-endcap{
    border-radius:28px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.91)) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 18px 36px rgba(15,23,42,.05) !important;
}

body.how-page .hero-story-card,
body.how-page .hero-proof-card{
    backdrop-filter:blur(12px) saturate(132%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(132%) !important;
}

body.how-page .hero-story-card h3,
body.how-page .section-head h2,
body.how-page .step-card h3,
body.how-page .faq-q,
body.how-page .trust-card h3,
body.how-page .utility-card h3,
body.how-page .persona-card h3,
body.how-page .overview-card h3,
body.how-page .support-card h3{
    font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif !important;
    letter-spacing:-.025em !important;
    text-transform:none !important;
    color:#132238 !important;
}

body.how-page .section-head{
    margin-bottom:26px !important;
}

body.how-page .section-head h2{
    font-size:clamp(1.45rem, 2.2vw, 2.1rem) !important;
    line-height:1.08 !important;
}

body.how-page .section-head p,
body.how-page .hero-story-card p,
body.how-page .faq-a,
body.how-page .overview-card p,
body.how-page .support-card p,
body.how-page .trust-card p,
body.how-page .utility-card p,
body.how-page .persona-card p,
body.how-page .optional-card p,
body.how-page .embed-card p{
    color:#61708f !important;
    font-family:'Inter','Segoe UI',Roboto,Arial,sans-serif !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    line-height:1.74 !important;
}

body.how-page .steps-grid-five{
    gap:18px !important;
}

body.how-page .step-card{
    padding:24px !important;
    border-radius:26px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.92)) !important;
    border:1px solid rgba(148,163,184,.16) !important;
    box-shadow:0 16px 30px rgba(15,23,42,.05) !important;
}

body.how-page .step-card:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(47,107,255,.18) !important;
    box-shadow:0 24px 40px rgba(15,23,42,.08) !important;
}

body.how-page .step-no{
    width:46px !important;
    height:46px !important;
    border-radius:16px !important;
    box-shadow:0 12px 22px rgba(47,107,255,.16) !important;
}

body.how-page .faq-item{
    padding:22px !important;
}

body.how-page .faq-q{
    line-height:1.34 !important;
}

body.how-page .faq-a{
    margin-top:10px !important;
}

body.how-page .explainer-band--premium,
body.how-page .trust-card--authority{
    background:
        radial-gradient(circle at top right, rgba(47,107,255,.08), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.92)) !important;
}

body.how-page .faq-contact--support,
body.how-page .faq-cta--panel,
body.how-page .faq-endcap{
    box-shadow:0 20px 38px rgba(15,23,42,.06) !important;
}

@media (max-width: 980px){
    body.how-page .how-shell{
        width:min(100% - 24px, 100%) !important;
    }

    body.how-page .hero-frame{
        border-radius:30px !important;
    }

    body.how-page .hero-story-card,
    body.how-page .hero-proof-card,
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .support-card,
    body.how-page .trust-card,
    body.how-page .utility-card,
    body.how-page .persona-card,
    body.how-page .optional-card,
    body.how-page .embed-card,
    body.how-page .faq-item,
    body.how-page .explainer-band,
    body.how-page .faq-cta--panel,
    body.how-page .faq-contact--support,
    body.how-page .faq-endcap{
        border-radius:24px !important;
    }

    body.how-page .step-card{
        padding:20px !important;
        border-radius:22px !important;
    }
}

@media (max-width: 640px){
    body.how-page .how-subnav{
        top:84px !important;
        padding:10px !important;
        border-radius:20px !important;
    }

    body.how-page .how-subnav-links a,
    body.how-page .how-subnav-cta{
        min-height:44px !important;
        padding:0 14px !important;
        border-radius:14px !important;
    }

    body.how-page .hero-frame{
        border-radius:26px !important;
    }

    body.how-page .hero-title{
        max-width:none !important;
        letter-spacing:-.04em !important;
    }

    body.how-page .hero-subtitle{
        font-size:.96rem !important;
        line-height:1.7 !important;
    }

    body.how-page .hero-story-card,
    body.how-page .hero-proof-card,
    body.how-page .overview-card,
    body.how-page .overview-diagram,
    body.how-page .support-card,
    body.how-page .trust-card,
    body.how-page .utility-card,
    body.how-page .persona-card,
    body.how-page .optional-card,
    body.how-page .embed-card,
    body.how-page .faq-item,
    body.how-page .explainer-band,
    body.how-page .faq-cta--panel,
    body.how-page .faq-contact--support,
    body.how-page .faq-endcap{
        border-radius:20px !important;
    }

    body.how-page .step-card{
        padding:18px !important;
        border-radius:20px !important;
    }

    body.how-page .hero-actions .how-btn,
    body.how-page .faq-cta--panel .how-btn,
    body.how-page .how-btn{
        width:100% !important;
        justify-content:center !important;
    }
}

/* === RoadmapBeauty RB16B How Cohesive Structure Desktop Polish ===
   Scope:
   - CSS-only visual/structure polish for how.php.
   - Keeps existing FameClock light premium identity.
   - No PHP, no JS, no DB, no routes, no multilingual changes.
*/

body.how-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(0,210,255,.10), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(255,215,0,.075), transparent 26%),
        linear-gradient(180deg, #eef5ff 0%, #f8fbff 38%, #eef5ff 100%) !important;
}

body.how-page .how-shell {
    width: min(100%, 1440px) !important;
    margin-inline: auto !important;
    padding-bottom: 54px !important;
}

body.how-page .container {
    width: min(1180px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
}

body.how-page .how-subnav {
    top: 76px !important;
    z-index: 40 !important;
    width: min(1180px, calc(100% - 48px)) !important;
    margin: 14px auto 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(203,213,225,.74) !important;
    box-shadow: 0 16px 44px rgba(15,23,42,.07) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body.how-page .how-subnav-inner {
    min-height: 58px !important;
    padding: 8px !important;
    gap: 12px !important;
}

body.how-page .how-subnav-links {
    gap: 6px !important;
    min-width: 0 !important;
}

body.how-page .how-subnav-links a {
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    color: #172238 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.how-page .how-subnav-links a:hover,
body.how-page .how-subnav-links a:focus-visible {
    color: #2563eb !important;
    background: rgba(239,246,255,.88) !important;
    border-color: rgba(59,130,246,.26) !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.07) !important;
}

body.how-page .how-subnav-cta .how-btn {
    min-height: 42px !important;
    border-radius: 999px !important;
    padding-inline: 16px !important;
}

body.how-page .how-hero {
    padding: 24px 0 18px !important;
}

body.how-page .hero-frame.hero-frame-rebuild {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
    gap: clamp(22px, 3vw, 38px) !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: clamp(30px, 4vw, 54px) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(0,210,255,.105), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(255,215,0,.075), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(248,250,252,.72)) !important;
    border: 1px solid rgba(203,213,225,.78) !important;
    box-shadow: 0 26px 76px rgba(15,23,42,.095) !important;
}

body.how-page .hero-frame.hero-frame-rebuild::before {
    opacity: .62 !important;
}

body.how-page .hero-copy {
    max-width: 760px !important;
    min-width: 0 !important;
}

body.how-page .hero-badge,
body.how-page .section-kicker,
body.how-page .phase-badge {
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    background: rgba(239,246,255,.88) !important;
    border: 1px solid rgba(59,130,246,.28) !important;
    color: #2563eb !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.07) !important;
}

body.how-page .hero-title {
    max-width: 12.6ch !important;
    margin-top: 18px !important;
    color: #172238 !important;
    letter-spacing: -.055em !important;
    line-height: .92 !important;
    text-shadow: none !important;
}

body.how-page .hero-subtitle {
    max-width: 64ch !important;
    margin-top: 18px !important;
    color: #52627a !important;
    line-height: 1.7 !important;
}

body.how-page .hero-actions {
    margin-top: 22px !important;
    gap: 10px !important;
}

body.how-page .hero-link-inline {
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(203,213,225,.82) !important;
    color: #172238 !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
}

body.how-page .hero-link-inline:hover {
    color: #2563eb !important;
    border-color: rgba(59,130,246,.30) !important;
    background: rgba(239,246,255,.88) !important;
    transform: translateY(-1px) !important;
}

body.how-page .hero-chip-row {
    margin-top: 20px !important;
    gap: 9px !important;
}

body.how-page .hero-chip {
    min-width: 0 !important;
    min-height: 38px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(203,213,225,.78) !important;
    color: #172238 !important;
    box-shadow: 0 7px 16px rgba(15,23,42,.04) !important;
}

body.how-page .hero-side {
    display: grid !important;
    gap: 14px !important;
    align-content: stretch !important;
    min-width: 0 !important;
}

body.how-page .hero-story-card {
    display: grid !important;
    align-content: center !important;
    min-height: 100% !important;
    padding: clamp(22px, 2.4vw, 30px) !important;
}

body.how-page .hero-story-card h3 {
    color: #172238 !important;
    letter-spacing: -.03em !important;
    line-height: 1.05 !important;
}

body.how-page .hero-story-kicker {
    color: #2563eb !important;
    letter-spacing: .14em !important;
}

body.how-page .hero-story-flow {
    margin-top: 18px !important;
    gap: 8px !important;
}

body.how-page .hero-story-flow span {
    min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(239,246,255,.86) !important;
    border: 1px solid rgba(59,130,246,.22) !important;
    color: #2563eb !important;
}

body.how-page .how-section {
    padding: 28px 0 !important;
}

body.how-page .how-section > .container,
body.how-page .how-section-highlight .container,
body.how-page .how-section-faq .container,
body.how-page .how-section-compact .container {
    border-radius: 30px !important;
}

body.how-page .section-head {
    max-width: 780px !important;
    margin: 0 auto 24px !important;
}

body.how-page .section-head h2 {
    color: #172238 !important;
    letter-spacing: -.04em !important;
    line-height: 1.04 !important;
    text-wrap: balance !important;
}

body.how-page .section-head p {
    max-width: 72ch !important;
    margin-inline: auto !important;
    color: #607089 !important;
    line-height: 1.65 !important;
}

body.how-page .clarity-grid,
body.how-page .steps-grid-five,
body.how-page .deliverables-grid,
body.how-page .utility-grid,
body.how-page .trust-grid,
body.how-page .two-col-support {
    gap: 18px !important;
}

body.how-page .clarity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.how-page .steps-grid-five {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.how-page .deliverables-grid,
body.how-page .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.how-page .two-col-support {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 18px !important;
}

body.how-page .clarity-card,
body.how-page .support-card,
body.how-page .utility-card,
body.how-page .trust-card,
body.how-page .step-card,
body.how-page .embed-card,
body.how-page .optional-card,
body.how-page .faq-item,
body.how-page .faq-contact,
body.how-page .faq-cta--panel,
body.how-page .explainer-band {
    min-width: 0 !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(203,213,225,.76) !important;
    box-shadow: 0 16px 42px rgba(15,23,42,.075) !important;
}

body.how-page .clarity-card:hover,
body.how-page .support-card:hover,
body.how-page .utility-card:hover,
body.how-page .trust-card:hover,
body.how-page .step-card:hover,
body.how-page .embed-card:hover,
body.how-page .optional-card:hover,
body.how-page .faq-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(59,130,246,.30) !important;
    box-shadow: 0 22px 54px rgba(37,99,235,.105) !important;
}

body.how-page .card-icon {
    border-radius: 18px !important;
    background: rgba(239,246,255,.88) !important;
    border: 1px solid rgba(59,130,246,.24) !important;
    color: #2563eb !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.08) !important;
}

body.how-page .step-no {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.62) !important;
}

body.how-page .inline-note {
    border-radius: 999px !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-shadow: 0 7px 16px rgba(15,23,42,.04) !important;
}

body.how-page .explainer-band {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 18px !important;
    padding: clamp(20px, 2.2vw, 28px) !important;
}

body.how-page .explainer-band-copy {
    min-width: 0 !important;
}

body.how-page .explainer-band-copy p {
    max-width: 72ch !important;
}

body.how-page .embed-card {
    margin-top: 18px !important;
    padding: clamp(20px, 2.2vw, 28px) !important;
}

body.how-page .embed-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
}

body.how-page .embed-code {
    margin-top: 16px !important;
    border-radius: 18px !important;
    background: rgba(248,250,252,.84) !important;
    border: 1px solid rgba(226,232,240,.82) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
}

body.how-page .trust-chip-row {
    justify-content: center !important;
    margin-bottom: 18px !important;
}

body.how-page .trust-disclaimer,
body.how-page .optional-footer {
    color: #64748b !important;
    line-height: 1.55 !important;
}

body.how-page .optional-head {
    border-radius: 24px !important;
}

body.how-page .optional-head-left,
body.how-page .optional-head-right {
    min-width: 0 !important;
}

body.how-page .faq-wrap {
    display: grid !important;
    gap: 10px !important;
}

body.how-page .faq-item {
    padding: 20px 22px !important;
}

body.how-page .faq-q {
    color: #172238 !important;
}

body.how-page .faq-a {
    color: #607089 !important;
    line-height: 1.65 !important;
}

body.how-page .faq-endcap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

body.how-page .faq-contact--support,
body.how-page .faq-cta--panel {
    min-width: 0 !important;
    padding: 22px !important;
}

body.how-page .how-btn {
    border-radius: 999px !important;
    letter-spacing: .03em !important;
}

body.how-page .how-btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: rgba(37,99,235,.36) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(37,99,235,.18) !important;
}

body.how-page .how-btn-primary:hover {
    box-shadow: 0 18px 38px rgba(37,99,235,.24) !important;
}

@media (max-width: 1180px) {
    body.how-page .hero-frame.hero-frame-rebuild,
    body.how-page .explainer-band,
    body.how-page .embed-head,
    body.how-page .faq-endcap {
        grid-template-columns: 1fr !important;
    }

    body.how-page .steps-grid-five,
    body.how-page .deliverables-grid,
    body.how-page .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.how-page .clarity-grid {
        grid-template-columns: 1fr !important;
    }

    body.how-page .hero-title {
        max-width: 13.5ch !important;
    }
}

@media (max-width: 760px) {
    body.how-page .container,
    body.how-page .how-subnav {
        width: min(100%, calc(100% - 24px)) !important;
    }

    body.how-page .how-subnav {
        border-radius: 22px !important;
    }

    body.how-page .how-subnav-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body.how-page .how-subnav-links {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.how-page .how-subnav-links::-webkit-scrollbar {
        display: none !important;
    }

    body.how-page .how-subnav-links a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.how-page .how-hero {
        padding-top: 18px !important;
    }

    body.how-page .hero-frame.hero-frame-rebuild {
        padding: 22px 16px !important;
        border-radius: 26px !important;
    }

    body.how-page .hero-title {
        max-width: 100% !important;
        font-size: clamp(2.35rem, 12vw, 4.2rem) !important;
        line-height: .95 !important;
    }

    body.how-page .hero-chip-row,
    body.how-page .trust-chip-row {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 3px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.how-page .hero-chip-row::-webkit-scrollbar,
    body.how-page .trust-chip-row::-webkit-scrollbar {
        display: none !important;
    }

    body.how-page .hero-chip {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.how-page .steps-grid-five,
    body.how-page .deliverables-grid,
    body.how-page .trust-grid,
    body.how-page .two-col-support {
        grid-template-columns: 1fr !important;
    }

    body.how-page .faq-endcap {
        grid-template-columns: 1fr !important;
    }
}
/* === /RoadmapBeauty RB16B How Cohesive Structure Desktop Polish === */

/* === RoadmapBeauty RB16C How Steps Card Micro Fix ===
   Scope:
   - CSS-only fix for How steps card number/icon collision.
   - No PHP, no JS, no DB, no routes, no multilingual changes.
   - Keeps FameClock cohesive light premium style.
*/

body.how-page .steps-grid-five {
    align-items: stretch !important;
}

body.how-page .steps-grid-five .step-card {
    position: relative !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 22px 18px 20px !important;
    min-height: 250px !important;
}

body.how-page .steps-grid-five .step-card .step-no {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 34px !important;
    min-width: 38px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    z-index: 2 !important;
    box-shadow: 0 10px 18px rgba(37,99,235,.16) !important;
}

body.how-page .steps-grid-five .step-card .card-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    margin: 0 0 2px !important;
    position: relative !important;
    z-index: 1 !important;
}

body.how-page .steps-grid-five .step-card h3 {
    margin-top: 6px !important;
    padding-right: 28px !important;
    font-size: .98rem !important;
    line-height: 1.22 !important;
    letter-spacing: -.02em !important;
}

body.how-page .steps-grid-five .step-card p {
    font-size: .90rem !important;
    line-height: 1.62 !important;
    color: #607089 !important;
}

@media (min-width: 981px) and (max-width: 1280px) {
    body.how-page .steps-grid-five {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.how-page .steps-grid-five .step-card {
        min-height: 220px !important;
    }
}

@media (max-width: 760px) {
    body.how-page .steps-grid-five .step-card {
        min-height: 0 !important;
        padding: 18px 16px !important;
    }

    body.how-page .steps-grid-five .step-card h3 {
        padding-right: 34px !important;
    }
}
/* === /RoadmapBeauty RB16C How Steps Card Micro Fix === */

/* ==========================================================================
   CRO: How page exact-minute demo
   Educational placement after steps, not a heavy commercial hero block.
   ========================================================================== */

.how-direct-finder {
    margin: 26px 0 0;
    padding: 20px;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(300px, 420px);
    gap: 18px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.82), rgba(244,248,255,0.94)),
        radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 42%);
}

.how-direct-finder__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--how-accent);
    background: rgba(47, 107, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.14);
}

.how-direct-finder__copy {
    min-width: 0;
}

.how-direct-finder__copy span {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--how-accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.how-direct-finder__copy strong {
    display: block;
    color: var(--how-text);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.25;
}

.how-direct-finder__copy p {
    margin: 6px 0 0;
    color: var(--how-muted);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.55;
}

.how-direct-finder__controls {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.how-direct-finder__input {
    min-height: 54px;
    padding: 0 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.how-direct-finder__input i {
    color: var(--how-accent);
}

#howDirectTimeInput {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--how-text);
    font: 900 1.18rem/1 'Inter', sans-serif;
    letter-spacing: 0.08em;
    text-align: center;
}

#howDirectTimeInput::placeholder {
    color: rgba(100, 116, 139, 0.58);
}

#howDirectTimeInput[aria-invalid="true"] {
    color: #dc2626;
}

.how-direct-finder__button {
    min-height: 54px;
    border: 0;
    border-radius: 18px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(47,107,255,0.96));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(47, 107, 255, 0.22);
    font: 900 0.80rem/1 'Inter', sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.how-direct-finder__button:hover,
.how-direct-finder__button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 18px 34px rgba(47, 107, 255, 0.28);
}

.how-direct-finder__error {
    grid-column: 1 / 3;
    min-height: 1.1em;
    margin: -2px 0 0;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 800;
}

.how-direct-finder__quick {
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.how-direct-finder__quick a {
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 107, 255, 0.08);
    border: 1px solid rgba(47, 107, 255, 0.16);
    color: var(--how-accent);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.how-direct-finder__quick a:hover,
.how-direct-finder__quick a:focus-visible {
    background: rgba(47, 107, 255, 0.13);
    border-color: rgba(47, 107, 255, 0.26);
}

@media (max-width: 980px) {
    .how-direct-finder {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .how-direct-finder__icon {
        margin: 0 auto;
    }

    .how-direct-finder__controls {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .how-direct-finder__quick {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .how-direct-finder {
        padding: 16px;
        border-radius: 24px;
    }

    .how-direct-finder__controls {
        grid-template-columns: 1fr;
    }

    .how-direct-finder__error,
    .how-direct-finder__quick {
        grid-column: 1;
    }

    .how-direct-finder__button {
        width: 100%;
    }
}


/* FC_MOBILE_HOW_COMFORT_START
   Purpose: make /how calmer, clearer and easier on mobile.
   Scope: how page mobile only.
   Safe: CSS-only, no text, no /lang, no DB, no checkout, no routing changes.
*/
@media (max-width: 767px) {
    body.how-page {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
    }

    body.how-page .how-shell,
    body.how-page .container {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.how-page .how-subnav {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        padding: 8px 0 !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    body.how-page .how-subnav-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    body.how-page .how-subnav-links {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.how-page .how-subnav-links::-webkit-scrollbar {
        display: none !important;
    }

    body.how-page .how-subnav-links a {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 8px 11px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
    }

    body.how-page .how-subnav-cta {
        width: 100% !important;
    }

    body.how-page .how-subnav-cta .how-btn {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }

    body.how-page .how-hero {
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }

    body.how-page .hero-frame,
    body.how-page .hero-frame-rebuild {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px !important;
        border-radius: 26px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.how-page .hero-copy,
    body.how-page .hero-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.how-page .hero-title {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.07em !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page .hero-subtitle {
        font-size: 0.98rem !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page .hero-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 14px !important;
    }

    body.how-page .how-btn,
    body.how-page .hero-link-inline {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    body.how-page .hero-chip-row,
    body.how-page .trust-chip-row {
        width: 100% !important;
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.how-page .hero-chip-row::-webkit-scrollbar,
    body.how-page .trust-chip-row::-webkit-scrollbar {
        display: none !important;
    }

    body.how-page .hero-chip {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 0.72rem !important;
    }

    body.how-page .hero-story-card,
    body.how-page .glass-card,
    body.how-page .support-card,
    body.how-page .step-card,
    body.how-page .utility-card,
    body.how-page .trust-card,
    body.how-page .embed-card,
    body.how-page .phase-card,
    body.how-page .faq-item,
    body.how-page .faq-contact,
    body.how-page .how-direct-finder {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.how-page .hero-story-flow {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        text-align: center !important;
    }

    body.how-page .hero-story-flow i {
        transform: rotate(90deg) !important;
        opacity: 0.55 !important;
    }

    body.how-page .how-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    body.how-page .section-head {
        margin-bottom: 16px !important;
    }

    body.how-page .section-head h2 {
        font-size: clamp(1.45rem, 7vw, 2.1rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page .section-head p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    body.how-page .clarity-grid,
    body.how-page .steps-grid,
    body.how-page .steps-grid-five,
    body.how-page .two-col-support,
    body.how-page .utility-grid,
    body.how-page .deliverables-grid,
    body.how-page .trust-grid,
    body.how-page .trust-grid--authority {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.how-page .step-card {
        padding: 15px !important;
        min-height: 0 !important;
    }

    body.how-page .step-no {
        font-size: 0.72rem !important;
        min-height: 28px !important;
        padding: 6px 9px !important;
        border-radius: 999px !important;
    }

    body.how-page .card-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 15px !important;
        font-size: 0.95rem !important;
    }

    body.how-page .glass-card h3,
    body.how-page .support-card h3,
    body.how-page .step-card h3,
    body.how-page .utility-card h3,
    body.how-page .trust-card h3 {
        font-size: 1.03rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page .glass-card p,
    body.how-page .support-card p,
    body.how-page .step-card p,
    body.how-page .utility-card p,
    body.how-page .trust-card p {
        font-size: 0.9rem !important;
        line-height: 1.48 !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page .explainer-band,
    body.how-page .embed-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 15px !important;
    }

    body.how-page .explainer-band-actions,
    body.how-page .embed-head {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.how-page .how-direct-finder {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 15px !important;
        margin-top: 16px !important;
    }

    body.how-page .how-direct-finder__copy,
    body.how-page .how-direct-finder__controls {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.how-page .how-direct-finder__controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.how-page .how-direct-finder__input,
    body.how-page .how-direct-finder__button {
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
    }

    body.how-page .how-direct-finder__input input {
        font-size: 16px !important;
    }

    body.how-page .how-direct-finder__quick {
        width: 100% !important;
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.how-page .how-direct-finder__quick::-webkit-scrollbar {
        display: none !important;
    }

    body.how-page .how-direct-finder__quick a {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    body.how-page .faq-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.how-page .faq-q {
        min-height: 48px !important;
        padding: 14px !important;
        gap: 10px !important;
        line-height: 1.25 !important;
    }

    body.how-page .faq-a {
        padding-left: 14px !important;
        padding-right: 14px !important;
        line-height: 1.5 !important;
    }

    body.how-page .faq-cta,
    body.how-page .faq-cta--panel {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
        text-align: center !important;
    }

    body.how-page img,
    body.how-page video,
    body.how-page iframe,
    body.how-page canvas,
    body.how-page svg {
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    body.how-page .how-shell,
    body.how-page .container {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;
    }

    body.how-page .hero-frame,
    body.how-page .hero-frame-rebuild,
    body.how-page .how-direct-finder,
    body.how-page .glass-card,
    body.how-page .support-card,
    body.how-page .step-card,
    body.how-page .utility-card,
    body.how-page .trust-card,
    body.how-page .embed-card,
    body.how-page .phase-card,
    body.how-page .faq-item,
    body.how-page .faq-contact {
        border-radius: 20px !important;
    }

    body.how-page .hero-frame,
    body.how-page .hero-frame-rebuild,
    body.how-page .how-direct-finder {
        padding: 13px !important;
    }
}
/* FC_MOBILE_HOW_COMFORT_END */


/* FC_MOBILE_HOW_CLICK_EXPAND_FIX_START
   Purpose: prevent "Click to expand" / optional disclosure text from being cut on mobile portrait.
   Scope: /how mobile only.
   Safe: CSS-only, no text, no /lang, no DB, no checkout, no routing changes.
*/
@media (max-width: 767px) {
    body.how-page .optional-head {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        white-space: normal !important;
        text-align: left !important;
    }

    body.how-page .optional-head > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.how-page .optional-head span,
    body.how-page .optional-head strong,
    body.how-page .optional-head em,
    body.how-page .optional-head small {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.18 !important;
    }

    body.how-page .optional-head i,
    body.how-page .optional-head svg {
        flex: 0 0 auto !important;
        justify-self: end !important;
    }
}

@media (max-width: 380px) {
    body.how-page .optional-head {
        grid-template-columns: minmax(0, 1fr) 22px !important;
        gap: 8px !important;
        padding: 11px 12px !important;
        min-height: 46px !important;
    }

    body.how-page .optional-head span,
    body.how-page .optional-head strong,
    body.how-page .optional-head em,
    body.how-page .optional-head small {
        font-size: 0.86rem !important;
        line-height: 1.16 !important;
    }
}
/* FC_MOBILE_HOW_CLICK_EXPAND_FIX_END */


/* FC_MOBILE_HOW_STICKY_FINDER_START
   Purpose: mobile-only shortcut back to /how direct minute finder.
   Scope: how page mobile only.
   Safe: no new text, no /lang changes, no DB, no checkout, no routing changes.
*/
body.how-page .how-mobile-sticky-finder {
    display: none;
}

@media (max-width: 767px) {
    body.how-page {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    body.how-page .how-mobile-sticky-finder {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 999;
        min-height: 56px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 20px;
        padding: 9px 12px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(47, 107, 255, 0.94)),
            radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 46%);
        color: #fff;
        box-shadow:
            0 18px 45px rgba(15, 23, 42, 0.28),
            inset 0 1px 0 rgba(255,255,255,0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(18px + env(safe-area-inset-bottom)));
        pointer-events: none;
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
        box-sizing: border-box;
    }

    body.how-page .how-mobile-sticky-finder.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    body.how-page .how-mobile-sticky-finder__icon,
    body.how-page .how-mobile-sticky-finder__arrow {
        width: 36px;
        height: 36px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.12);
        color: #fff;
        flex: 0 0 auto;
    }

    body.how-page .how-mobile-sticky-finder__copy {
        min-width: 0;
        color: #fff;
        font-size: 0.88rem;
        font-weight: 950;
        line-height: 1.12;
        letter-spacing: -0.01em;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.how-page .how-mobile-sticky-finder:active {
        transform: translateY(1px);
    }

    body.how-page .floating-help-btn,
    body.how-page #help-trigger.floating-help-btn {
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    body.how-page .how-mobile-sticky-finder {
        left: 9px;
        right: 9px;
        min-height: 54px;
        border-radius: 18px;
    }

    body.how-page .how-mobile-sticky-finder__icon,
    body.how-page .how-mobile-sticky-finder__arrow {
        width: 33px;
        height: 33px;
        border-radius: 12px;
    }

    body.how-page .how-mobile-sticky-finder__copy {
        font-size: 0.82rem;
    }
}
/* FC_MOBILE_HOW_STICKY_FINDER_END */

/* ==========================================================================
   FC_HOW_D9_DESKTOP_POLISH_START
   How page desktop education polish. >=1025px only.
   ========================================================================== */
@media (min-width: 1025px) {
    body.how-page .container,
    body.how-page .how-shell {
        width: min(calc(100% - 48px), 1220px) !important;
        max-width: 1220px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.how-page .how-hero,
    body.how-page .how-section,
    body.how-page .glass-card,
    body.how-page .explainer-band {
        border-radius: 32px !important;
        box-shadow:
            0 28px 78px rgba(15,23,42,0.08),
            0 1px 0 rgba(255,255,255,0.90) inset !important;
    }

    body.how-page h1,
    body.how-page .how-title {
        font-size: clamp(2.75rem, 4.2vw, 5rem) !important;
        line-height: 0.96 !important;
        letter-spacing: -0.06em !important;
        overflow-wrap: anywhere !important;
    }

    body.how-page h2,
    body.how-page .section-title {
        font-size: clamp(1.75rem, 2.2vw, 2.5rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    body.how-page p,
    body.how-page li,
    body.how-page .section-subtitle,
    body.how-page .how-lead {
        line-height: 1.65 !important;
    }

    body.how-page .clarity-grid,
    body.how-page .steps-grid {
        gap: 18px !important;
    }

    body.how-page .how-btn,
    body.how-page .how-direct-finder__button,
    body.how-page .how-subnav-cta {
        min-height: 46px !important;
        border-radius: 16px !important;
    }
}
/* ==========================================================================
   FC_HOW_D9_DESKTOP_POLISH_END
   ========================================================================== */