/* ==========================================================================
   ANKIT RAWAT — PHASE 50.2 COMPOSITION SYSTEM
   Premium founder-led software company.
   ========================================================================== */

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #F7F5F0;
    --bg-alt: #EDEBE6;
    --bg-subtle: #E2E0DB;
    --bg-surface: #FFFFFF;
    --bg-dark: #161A18;
    --bg-dark-surface: #1E2421;
    --bg-dark-card: rgba(255, 255, 255, 0.04);
    --bg-card: #FFFFFF;

    --shadow-sm: 0 1px 2px 0 rgba(24, 24, 27, 0.05);
    --shadow-md: 0 4px 14px -2px rgba(24, 24, 27, 0.08), 0 2px 4px -2px rgba(24, 24, 27, 0.04);
    --shadow-lg: 0 16px 32px -4px rgba(24, 24, 27, 0.1), 0 6px 12px -2px rgba(24, 24, 27, 0.05);
    --shadow-hover: 0 24px 48px -8px rgba(24, 24, 27, 0.14);

    --line: rgba(24, 24, 27, 0.1);
    --line-subtle: rgba(24, 24, 27, 0.06);
    --line-bright: rgba(24, 24, 27, 0.18);
    --line-dark: rgba(255, 255, 255, 0.12);

    --text: #18181B;
    --text-charcoal: #27272A;
    --text-muted: #52525B;
    --text-dim: #78767A;

    --text-dark-head: #FAFAF9;
    --text-dark-body: #A1A1AA;
    --text-dark-muted: #71717A;

    --accent: #176B5B;
    --accent-hover: #1A7D6B;
    --accent-soft: #F0FDFA;
    --accent-border: #99F6E4;

    --max: 82rem;
    --max-narrow: 58rem;
    --header: 4.5rem;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   RESET & FOUNDATION
   ========================================================================== */

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

html {
    font-size: 100%;
    background-color: var(--bg);
    color: var(--text-charcoal);
    font-family: var(--font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-charcoal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

img, picture, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--text-charcoal);
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover { color: var(--text); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3.5vw, 2.5rem);
    padding-right: clamp(1rem, 3.5vw, 2.5rem);
    box-sizing: border-box;
}

.wrap--narrow { max-width: var(--max-narrow); }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 245, 240, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(22, 26, 25, 0.09);
    width: 100%;
    max-width: 100vw;
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header);
    width: 100%;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.brand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
    display: inline-block;
    flex-shrink: 0;
}

.site-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.site-nav a {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--text);
}

.site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.header-login {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-login:hover {
    background-color: var(--accent);
    color: #FFFFFF;
}

.header-login:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-login {
    display: none;
}

.site-nav .nav-login__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    background-color: var(--accent);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

.site-nav .nav-login__link:hover {
    background-color: var(--accent-hover);
    color: #FFFFFF;
}

.site-nav .nav-login__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.footer-login {
    color: var(--accent-hover) !important;
}

.footer-login:hover {
    color: #FFFFFF !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.35rem;
    font-size: 0.95rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    box-sizing: border-box;
    text-align: center;
}

.button-primary {
    background-color: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
}

.button-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #FFFFFF;
}

.button-secondary {
    background-color: transparent;
    color: var(--text);
    border-color: var(--line-bright);
}

.button-secondary:hover {
    background-color: rgba(24, 24, 27, 0.04);
    border-color: var(--text);
    color: var(--text);
}

.button-ghost {
    background-color: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.button-ghost:hover {
    background-color: rgba(24, 24, 27, 0.04);
    color: var(--text);
}

.button-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

.button-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1.5px solid var(--line-bright);
    padding-bottom: 2px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.text-link:hover {
    color: var(--text);
    border-color: var(--text);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.heading-hero {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 6.5vw, 4.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--text);
    margin: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    text-wrap: balance;
}

.heading-section {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 0.75rem;
    overflow-wrap: break-word;
    word-break: normal;
}

.subheading {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.7;
    color: var(--text-muted);
    font-weight: 450;
    margin: 0;
    max-width: 52rem;
    overflow-wrap: break-word;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.crumbs {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 1.75rem;
}

.crumbs a { color: var(--text-muted); }

/* ==========================================================================
   HOMEPAGE: HERO (Phase 52C — evidence-led split hero)
   ========================================================================== */

.p52-hero {
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem) 0;
}

.p52-hero__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
}

.p52-hero__text .heading-hero {
    max-width: 36rem;
}

.p52-hero__desc {
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: var(--text-muted);
    margin: clamp(1.25rem, 2vw, 2rem) 0 0 0;
    max-width: 30rem;
}

.p52-hero__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.p52-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: clamp(2rem, 3vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.p52-hero__visual {
    position: relative;
}

.p52-hero__caption {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.p52-hero__caption a {
    color: var(--accent);
    font-weight: 600;
}

.p52-hero__caption a:hover {
    color: var(--accent-hover);
}

/* Browser frame — premium screenshot presentation */
.p52-browser-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    background: var(--bg-surface);
}

.p52-browser-frame__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.p52-browser-frame__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-bright);
}

.p52-browser-frame__url {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.p52-browser-frame__viewport {
    overflow: hidden;
}

.p52-browser-frame__viewport img {
    width: 100%;
    height: auto;
    display: block;
}

.p52-browser-frame--sm {
    box-shadow: var(--shadow-md);
}

.p52-browser-frame--dark {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.p52-browser-frame__chrome--dark {
    background: #1a1a1a;
}

.p50-case__cols--dark { color: var(--text-dark-head); }
.h-col--dark { color: var(--text-dark-head); }
.t-col--dark { color: #B0AEB3; }

/* ==========================================================================
   HOMEPAGE: PRODUCT EVIDENCE (Phase 52C — 4 distinct compositions)
   ========================================================================== */

.p50-products {
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-top: 1px solid var(--line);
}

.p52-product {
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.p52-product + .p52-product {
    border-top: 1px solid var(--line);
}

.p52-product__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.p52-product__name--light {
    color: var(--text-dark-head);
}

.p52-product__position {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
    max-width: 34rem;
}

.p52-product__position--light {
    color: var(--text-dark-body);
}

.p52-product__capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 1.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.p52-product__capabilities--dark {
    color: var(--text-dark-muted);
}

.p52-product__links {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 0.5rem;
}

.p52-product__screenshot {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    width: 100%;
    height: auto;
    display: block;
}

.p52-product__screenshot--dark {
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hridyaa — text left, reservations evidence right */
.p52-product--hridyaa {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
}

/* AssetBulls — dark block, full bleed */
.p52-product--assetbulls {
    background: var(--bg-dark);
    border-radius: var(--radius);
    padding: clamp(3rem, 6vw, 5rem);
    margin: 0;
    border: none;
}

.p52-product--assetbulls + .p52-product {
    border-top: none;
}

.p52-product--assetbulls .p52-product__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.p52-product--assetbulls .text-link {
    color: var(--text-dark-head);
    border-color: rgba(255, 255, 255, 0.3);
}

.p52-product--assetbulls .text-link:hover {
    color: var(--text-dark-head);
    border-color: var(--text-dark-head);
}

/* AssuredGains — screenshot left, text right */
.p52-product--assured {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
}

/* WildHawk — text left, screenshot right */
.p52-product--wildhawk {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
}

/* ==========================================================================
   HOMEPAGE: ENGINEERING DISCIPLINES
   ========================================================================== */

.p50-disciplines {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-top: 1px solid var(--line);
}

.p50-disc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: clamp(2rem, 3vw, 3rem);
    background: var(--line);
}

.p50-disc-item {
    background: var(--bg);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.p50-disc-num {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
}

.p50-disc-title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.p50-disc-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1rem 0;
    max-width: 36rem;
}

/* ==========================================================================
   HOMEPAGE: FOUNDER
   ========================================================================== */

.p50-founder {
    background: var(--bg-dark);
    color: var(--text-dark-head);
    padding: clamp(3.5rem, 6vw, 6rem) 0;
}

.p50-founder__inner {
    max-width: 56rem;
}

.p50-founder__headline {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text-dark-head);
    margin: 0 0 1.5rem 0;
}

.p50-founder__body {
    font-size: 1.05rem;
    color: #94A3B8;
    line-height: 1.7;
    margin: 0 0 2rem 0;
    max-width: 48rem;
}

.p50-founder__link {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark-head);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 3px;
    transition: border-color 0.15s ease;
}

.p50-founder__link:hover {
    color: var(--text-dark-head);
    border-color: var(--text-dark-head);
}

.p50-founder__specs {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: clamp(3rem, 5vw, 5rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748B;
    text-transform: uppercase;
}

/* ==========================================================================
   PRODUCTS PAGE: FLAGSHIP CATALOG
   ========================================================================== */

.p50-catalog-item {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    border-bottom: 1px solid var(--line);
}

.p50-catalog-grid {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

.p50-catalog-grid--reverse {
    grid-template-columns: 480px 1fr;
}

.p50-catalog-screenshot {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}

.p50-catalog-screenshot img {
    width: 100%;
    height: auto;
    display: block;
}

.p50-catalog-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.p50-catalog-compact__card {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    border-top: 1px solid var(--line);
}

.p50-catalog-compact__card .mono-label { margin-bottom: 0.75rem; }

.p50-catalog-compact__card .h-product--md { margin-bottom: 0.5rem; }

.p50-catalog-compact__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.p50-catalog-compact__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.65rem;
}

.p50-catalog-compact__card .flex-between {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-subtle);
}

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing-product-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: 2.5rem;
}

.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pricing-plan-item {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p50-legal-line {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    margin-top: 2rem;
}

.p50-legal-line a {
    color: var(--text-charcoal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   SERVICES: CHAPTERS
   ========================================================================== */

.p50-chapter {
    padding: clamp(2.5rem, 4.5vw, 3.5rem) 0;
    border-top: 1px solid var(--line);
}

.p50-chapter__grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: clamp(2.5rem, 5vw, 3.5rem);
    align-items: start;
    margin-top: 2rem;
}

.p50-chapter__evidence-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

.p50-chapter__services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1.5rem;
}

.p50-chapter__services-grid a {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-charcoal);
    padding: 0.35rem 0;
    transition: color 0.15s ease;
}

.p50-chapter__services-grid a:hover {
    color: var(--text);
}

.p50-chapter__services {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.p50-chapter__services a {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-charcoal);
    padding: 0.3rem 0;
    transition: color 0.15s ease;
}

.p50-chapter__services a:hover {
    color: var(--text);
}

.p50-chapter--dark {
    background: var(--bg-dark);
    color: var(--text-dark-head);
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 4vw, 3rem);
    margin: 1.5rem 0;
    border-top: none;
}

.p50-chapter--dark a {
    color: #E4E4E7;
}

.p50-chapter--dark a:hover {
    color: #FAFAF9;
}

.p50-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 1.5rem 0;
}

.p50-svc-grid a {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-charcoal);
    transition: color 0.15s ease;
}

.p50-svc-grid a:hover {
    color: var(--text);
}

.p50-chapter--bordered {
    border-top: 2px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.p50-chapter__services--compact {
    gap: 0.35rem;
}

.p50-chapter__services--compact a {
    font-size: 0.9rem;
}

/* ==========================================================================
   WORK: SELECTED SYSTEMS
   ========================================================================== */

.p50-case {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--line);
}

.p50-case--dark {
    background: var(--bg-dark);
    color: var(--text-dark-head);
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 5vw, 4rem);
    margin: 1.5rem 0;
    border-bottom: none;
}

.p50-case__links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.p50-case__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 2rem 0;
}

.p50-case__prose {
    font-size: 1.05rem;
    color: var(--text-charcoal);
    line-height: 1.7;
    max-width: 48rem;
    margin: 1rem 0;
}

.p50-case__prose strong {
    color: var(--text);
    font-weight: 800;
}

.p52-case__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0 1rem 0;
}

.p50-case__narrative {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
    margin: 2rem 0;
}

.p50-case__narrative-text {
    font-size: 1.05rem;
    color: var(--text-charcoal);
    line-height: 1.7;
}

.p50-case--dark .p50-case__narrative-text { color: #94A3B8; }

.p50-case-frame {
    max-width: 680px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}

.p50-case-frame__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.p50-case-frame__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
}

.p50-case-frame__url {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.p50-case-frame__viewport {
    overflow: hidden;
}

.p50-case-frame__viewport img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band {
    padding: clamp(3rem, 5vw, 5rem) 0;
    background: #131918;
    border-top: none;
}

.cta-band__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-band__inner h2 {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #F3F1EC;
    margin: 0 0 0.35rem 0;
}

.cta-band__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    max-width: 30rem;
}

.cta-band__inner .actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cta-band__inner .button-secondary {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
}

.cta-band__inner .button-secondary:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    background: transparent;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--bg-dark);
    color: #94A3B8;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(3rem, 5vw, 4rem) 0 2rem 0;
    width: 100%;
    max-width: 100vw;
}

.site-footer__content {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3.5vw, 2.5rem);
}

.brand--footer { color: #FFFFFF; }

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 1.5rem 0;
}

.site-footer__nav a {
    color: #94A3B8;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer__nav a:hover { color: #FFFFFF; }

.site-footer__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.site-footer__platforms a {
    color: #64748B;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer__platforms a:hover { color: #94A3B8; }

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 1rem;
}

.site-footer__legal a {
    color: #64748B;
    font-size: 0.78rem;
    text-decoration: none;
}

.site-footer__legal a:hover { color: #94A3B8; }

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #64748B;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer__bottom a {
    color: #64748B;
    font-size: 0.8rem;
    text-decoration: none;
}

.site-footer__bottom a:hover { color: #94A3B8; }

/* ==========================================================================
   CATEGORY FILTER (Products page)
   ========================================================================== */

.category-active-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #10B981;
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================================
   TEMPLATE COMPONENT CLASSES
   ========================================================================== */

.page-pad { padding-top: 2.5rem; padding-bottom: 4rem; }
.section-gap { margin-bottom: 2.5rem; }
.section-gap-sm { margin-bottom: 2rem; }
.section-gap-lg { margin-bottom: 3rem; }
.section-gap-xl { margin-bottom: 3.5rem; }

/* Headings */
.h-product {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.75rem 0;
}
.h-product a { color: inherit; text-decoration: none; }
.h-product--dark { color: var(--text-dark-head); }
.h-product--md {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}
.h-product--md a { color: inherit; text-decoration: none; }
.h-chapter {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.75rem 0;
}
.h-chapter--dark { color: var(--text-dark-head); }
.h-chapter--sm {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.75rem 0;
}
.h-col {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

/* Body text */
.t-body {
    font-size: 1.05rem;
    color: var(--text-charcoal);
    line-height: 1.7;
    margin: 0 0 1.5rem 0;
}
.t-body--narrow { max-width: 38rem; }
.t-body--wide { max-width: 48rem; }
.t-body--xwide { max-width: 54rem; }
.t-body--full { max-width: none; }
.t-body--dark { color: #94A3B8; }
.t-body--sm { font-size: 0.95rem; }
.t-body--xs { font-size: 0.9rem; }
.t-subtitle {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin: 0 0 0.75rem 0;
}
.t-subtitle--dark { color: var(--text-muted); }
.t-col {
    font-size: 0.95rem;
    color: var(--text-charcoal);
    line-height: 1.65;
    margin: 0;
}

/* Mono labels */
.mono-label--dark { color: #5EEAD4; }
.mono-label--inline { margin-bottom: 0; }

/* Links */
.text-link--sm { font-size: 0.85rem; }
.text-link--dark {
    color: var(--text-dark-head);
    border-color: rgba(255, 255, 255, 0.3);
}
.text-link--dark:hover {
    color: var(--text-dark-head);
    border-color: var(--text-dark-head);
}
.text-link--dim { color: var(--text-dim); }

/* Header portal link */
.header-portal {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Footer description */
.footer-desc {
    color: #94A3B8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1rem 0 0 0;
    max-width: 28rem;
}

/* Layout helpers */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.flex-between--baseline { align-items: baseline; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mb-025 { margin-bottom: 0.25rem; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: 2rem; }

/* Products page: category filter */
.cat-filter {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.25rem;
}
.cat-filter__link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-underline-offset: 4px;
}
.cat-filter__link--active {
    font-weight: 800;
    color: var(--text);
    text-decoration: underline;
}

/* Pricing page */
.pricing-section {
    margin-bottom: 3rem;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
}
.pricing-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
}
.pricing-card__name {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.pricing-card__name a { color: inherit; text-decoration: none; }
.pricing-card__summary {
    color: var(--text-charcoal);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 48rem;
}
.plan-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.plan-code {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-dim);
    background: var(--bg-surface);
    border: 1px solid var(--line);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}
.plan-pricing { margin: 1rem 0; }
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.plan-amount {
    font-size: 1.75rem;
    font-weight: 850;
    color: var(--text);
    letter-spacing: -0.03em;
}
.plan-cycle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.plan-setup {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}
.plan-trial {
    display: inline-block;
    margin-top: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--accent-border);
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-size: 0.85rem;
    color: var(--text-charcoal);
    line-height: 1.55;
    border-top: 1px solid var(--line);
    padding-top: 0.85rem;
}
.plan-features li {
    margin-bottom: 0.35rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.plan-features .check {
    color: #10B981;
    font-weight: 800;
}
.plan-form { margin-top: 1rem; }
.plan-buy {
    width: 100%;
    text-align: center;
    padding: 0.6rem 1rem;
}
.plan-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.pricing-fallback {
    background: var(--bg-alt);
    border: 1px dashed var(--line-bright);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.pricing-fallback__title {
    font-weight: 800;
    color: var(--text);
    font-size: 0.95rem;
}
.pricing-fallback__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.catalog-price {
    font-size: 1.15rem;
    font-weight: 850;
    color: var(--text);
}
.catalog-price-cycle {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}
.catalog-live {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 700;
}

.empty-state {
    text-align: center;
    padding: 4rem 1rem;
}
.empty-state h3 {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.empty-state p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Work page: dark prose overrides */
.p50-case--dark .p50-case__prose { color: #94A3B8; }
.p50-case--dark .p50-case__prose strong { color: #E4E4E7; }

/* Service detail page: CSP-safe classes replacing inline styles */
.svc-body-section { padding-top: 0; padding-bottom: 3.5rem; }
.svc-body-text { font-size: 1.1rem; line-height: 1.7; color: var(--text-charcoal); }
.svc-scope-head { margin-bottom: 2rem; }
.svc-cap-head { margin-bottom: 2.5rem; }
.svc-methodology-head { margin-bottom: 2rem; }
.svc-related-head { margin-bottom: 2.5rem; }
.svc-editorial-row { grid-template-columns: 18rem 1fr; align-items: start; }
.svc-editorial-title { font-size: 1.25rem; }
.svc-editorial-desc { font-size: 1rem; }
.svc-related-link { margin-top: auto; font-weight: 600; color: var(--text); }

/* ==========================================================================
   FORM FOUNDATIONS
   ========================================================================== */

label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-sm);
    margin-top: 0.3rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

textarea { resize: vertical; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* ==========================================================================
   ART SLOTS
   ========================================================================== */

.art-slot {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.art-slot__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.art-slot--hero {
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-subtle) 100%);
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
}

.art-slot--hero .art-slot__img {
    object-position: 58% center;
}

.art-slot--wide {
    min-height: 160px;
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-subtle) 100%);
    border-radius: var(--radius-lg);
    aspect-ratio: 12 / 5;
}

.art-slot--chapter {
    min-height: 180px;
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-subtle) 100%);
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
}

.art-slot--chapter .art-slot__img {
    object-position: 62% center;
}

/* ==========================================================================
   AUTH PAGES (login, register, forgot-password, reset-password)
   ========================================================================== */

.auth-wrap {
    max-width: 28rem;
    margin: clamp(2rem, 5vw, 4rem) auto;
    padding: 0 1rem;
}

.auth-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color 0.15s ease;
}

.auth-back:hover {
    color: var(--accent);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.auth-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.auth-flash {
    padding: 0.85rem 1.15rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.93rem;
}

.auth-flash--error {
    background: #FEF2F2;
    border: 1px solid var(--line-bright);
    color: #991B1B;
}

.auth-flash--success {
    background: #F0FDF4;
    border: 1px solid var(--line-bright);
    color: #166534;
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.auth-actions a {
    color: var(--accent);
    font-weight: 600;
}

.auth-submit {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.93rem;
}

.auth-footer a {
    color: var(--accent);
    font-weight: 600;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-wrap {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.contact-header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.contact-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.75rem 0;
}

.contact-header p {
    font-size: clamp(0.975rem, 1.4vw, 1.1rem);
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 42rem;
    margin: 0;
}

.contact-notice {
    background: #F0FDF4;
    border: 1px solid var(--line-bright);
    padding: 1.15rem;
    border-radius: var(--radius-sm);
    color: #166534;
    font-weight: 600;
    margin-bottom: 2.25rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

.contact-form {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}

.contact-context {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    color: var(--text);
}

.contact-context strong { margin-right: 0.35rem; }
.contact-context .contact-context__product { color: var(--accent); font-weight: 700; }

.contact-submit {
    justify-self: start;
    margin-top: 0.5rem;
}

.contact-aside {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.contact-aside__section {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    margin-top: 1rem;
}

.contact-aside__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-dim);
    display: block;
    margin-bottom: 0.25rem;
}

.contact-aside__value {
    font-size: 0.95rem;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}

.contact-aside__value a {
    color: inherit;
    text-decoration: none;
}

.contact-aside__value--lg {
    font-size: 1rem;
    font-weight: 700;
}

.contact-aside__links {
    display: flex;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.contact-aside__links a {
    color: var(--text-charcoal);
    text-decoration: underline;
}

.contact-aside__note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.contact-aside__note strong {
    color: var(--text);
    display: block;
    margin-bottom: 0.25rem;
}

.contact-aside__note a {
    color: var(--text-charcoal);
    text-decoration: underline;
}

/* ==========================================================================
   ACCOUNT PORTAL (dashboard, nav, tables)
   ========================================================================== */

.portal-wrap {
    padding: clamp(1.5rem, 3vw, 2rem) 1rem;
}

.portal-topbar {
    background: var(--bg-dark);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: #FFFFFF;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 3px solid var(--accent);
}

.portal-topbar__account-label {
    font-size: 0.75rem;
    color: var(--text-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-topbar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    flex-shrink: 0;
}

.portal-topbar__name {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-dark-head);
    margin-top: 0.25rem;
}

.portal-topbar__ref {
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.portal-topbar__company {
    font-size: 0.9rem;
    color: var(--text-dark-muted);
}

.portal-topbar__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.portal-btn-signout {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dark-head);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
    transition: background 0.15s ease;
}

.portal-btn-signout:hover {
    background: rgba(255, 255, 255, 0.18);
}

.portal-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.portal-nav__link {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.portal-nav__link:hover {
    color: var(--text);
    background: var(--bg-alt);
}

.portal-nav__link--active {
    color: var(--accent);
    background: var(--accent-soft);
}

.portal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.portal-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.portal-stat-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 0.25rem;
}

.portal-stat-value--danger { color: #DC2626; }
.portal-stat-value--success { color: #16A34A; }

.portal-stat-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.portal-stat-note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.portal-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.portal-card + .portal-card { margin-top: 2rem; }

.portal-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.portal-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text);
    margin: 0;
}

.portal-card__action {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.portal-table-wrap { overflow-x: auto; }

.portal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.93rem;
}

.portal-table thead tr {
    border-bottom: 1px solid var(--line);
    color: var(--text-dim);
}

.portal-table th,
.portal-table td {
    padding: 0.75rem 0.5rem;
}

.portal-table tbody tr {
    border-bottom: 1px solid var(--line-subtle);
    transition: background 0.1s ease;
}

.portal-table tbody tr:hover {
    background: var(--bg-alt);
}

.portal-table a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.portal-table .portal-amount {
    font-weight: 600;
}

.portal-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.portal-badge--paid { background: #DCFCE7; color: #166534; }
.portal-badge--pending { background: #FEF3C7; color: #92400E; }
.portal-badge--cancelled { background: #FEE2E2; color: #991B1B; }

.portal-empty {
    color: var(--text-dim);
    margin: 1rem 0;
}

.portal-legal {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-top: 2rem;
}

.portal-legal h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.portal-legal p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin: 0 0 1rem;
}

.portal-legal__links {
    display: flex;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.portal-legal__links a {
    color: var(--accent);
    text-decoration: underline;
}

/* Portal: page headers */
.portal-page-header {
    margin-bottom: 1.5rem;
}

.portal-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text);
    margin: 0 0 0.25rem;
}

.portal-page-subtitle {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: 0;
}

.portal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.portal-back {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* Portal: detail layouts */
.portal-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.portal-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Portal: flash messages */
.portal-flash {
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.95rem;
}

.portal-flash--success {
    background: #F0FDF4;
    border: 1px solid #4ADE80;
    color: #166534;
}

.portal-flash--error {
    background: #FEF2F2;
    border: 1px solid #F87171;
    color: #991B1B;
}

/* Portal: commercial document layout */
.portal-doc {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    max-width: 52rem;
    margin: 0 auto;
}

.portal-doc--narrow {
    max-width: 48rem;
}

.portal-doc__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--line);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.portal-doc__brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}

.portal-doc__brand-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.portal-doc__brand-address {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

.portal-doc__brand-contact {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.portal-doc__meta {
    text-align: right;
}

.portal-doc__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--accent);
}

.portal-doc__date {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.portal-doc__receipt-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-doc__receipt-ref {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
    margin-top: 0.25rem;
}

/* Portal: billed-to / identity */
.portal-identity {
    margin-bottom: 2rem;
}

.portal-identity__label {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
}

.portal-identity__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 0.25rem;
}

.portal-identity__company {
    color: var(--text-muted);
    font-weight: 500;
}

.portal-identity__detail {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 0.25rem;
    line-height: 1.6;
}

/* Portal: section heading with action link */
.portal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.portal-section-title {
    font-size: 1.15rem;
    margin: 0;
    color: var(--text);
    font-weight: 700;
    font-family: var(--font-display);
}

.portal-section-action {
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.portal-doc-actions {
    display: flex;
    gap: 0.5rem;
}

.portal-doc-actions a {
    font-size: 0.82rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.portal-doc-actions a:hover {
    background: var(--accent-soft);
}

/* Portal: card section headers inside cards */
.portal-card__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
}

/* Portal: detail header (order/quote detail top) */
.portal-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-detail-header__meta {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Portal: totals breakdown */
.portal-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.portal-totals__inner {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.portal-totals__row {
    display: flex;
    justify-content: space-between;
    color: var(--text-dim);
}

.portal-totals__row strong {
    color: var(--text);
    font-weight: 600;
}

.portal-totals__row--discount {
    color: #059669;
}

.portal-totals__row--discount strong {
    color: #059669;
}

.portal-totals__row--grand {
    border-top: 2px solid var(--line);
    padding-top: 0.6rem;
    margin-top: 0.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}

/* Portal: tfoot totals in tables */
.portal-table tfoot tr {
    border-top: 1px solid var(--line);
}

.portal-table tfoot .portal-tfoot-label {
    text-align: right;
    color: var(--text-dim);
}

.portal-table tfoot .portal-tfoot-grand {
    border-top: 2px solid var(--line-bright);
    font-size: 1.1rem;
    font-weight: 700;
}

.portal-table .text-right {
    text-align: right;
}

.portal-table .text-center {
    text-align: center;
}

.portal-table .portal-tfoot-discount {
    color: #16A34A;
}

.portal-table .portal-tfoot-total {
    color: var(--accent);
    font-weight: 700;
}

/* Portal: extended badge variants */
.portal-badge--active { background: #DCFCE7; color: #166534; }
.portal-badge--trialing { background: #E0E7FF; color: #3730A3; }
.portal-badge--past-due { background: #FEE2E2; color: #991B1B; }
.portal-badge--paused { background: #FEF3C7; color: #92400E; }
.portal-badge--expired { background: #F1F5F9; color: var(--text-dim); }
.portal-badge--draft { background: #F1F5F9; color: var(--text-dim); }
.portal-badge--sent { background: #DBEAFE; color: #1E40AF; }
.portal-badge--accepted { background: #DCFCE7; color: #166534; }
.portal-badge--rejected { background: #FEE2E2; color: #991B1B; }
.portal-badge--converted { background: #CCFBF1; color: #0F766E; }
.portal-badge--provisioning { background: #EFF6FF; color: #1E40AF; }
.portal-badge--suspended { background: #FEF3C7; color: #92400E; }
.portal-badge--failed { background: #FEE2E2; color: #991B1B; }

/* Portal: type/service badge */
.portal-type-badge {
    display: inline-block;
    background: var(--bg-alt);
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
}

/* Portal: empty states */
.portal-empty-state {
    background: var(--bg-surface);
    border: 1px dashed var(--line-bright);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
}

.portal-empty-state__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.portal-empty-state__text {
    color: var(--text-muted);
    max-width: 26rem;
    margin: 0 auto 1.5rem;
    font-size: 0.95rem;
}

/* Portal: info grid (overview cards) */
.portal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.portal-info-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.portal-info-card__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.portal-info-card__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.portal-info-card__sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Portal: commercial terms grid */
.portal-terms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.portal-terms-grid__label {
    color: var(--text-dim);
    font-size: 0.85rem;
    display: block;
}

/* Portal: amount highlight box (receipt) */
.portal-amount-box {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.portal-amount-box__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #166534;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-amount-box__value {
    font-size: 2.25rem;
    font-weight: 800;
    color: #15803D;
    margin-top: 0.25rem;
}

.portal-amount-box__note {
    font-size: 0.85rem;
    color: #166534;
    margin-top: 0.25rem;
}

/* Portal: outstanding balance bar */
.portal-outstanding {
    margin-top: 2rem;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.portal-outstanding__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}

.portal-outstanding__amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}

/* Portal: alert boxes */
.portal-alert {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.portal-alert--warning {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
}

.portal-alert--warning .portal-alert__title {
    color: #92400E;
}

.portal-alert--warning .portal-alert__text {
    color: #78350F;
}

.portal-alert--danger {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.portal-alert--danger .portal-alert__title {
    color: #991B1B;
}

.portal-alert--danger .portal-alert__text {
    color: #7F1D1D;
}

.portal-alert__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.portal-alert__text {
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}

/* Portal: decline form (quote) */
.portal-decline-form {
    display: none;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.portal-decline-form__title {
    margin: 0 0 0.5rem;
    color: #991B1B;
    font-size: 1rem;
    font-weight: 700;
}

.portal-decline-form__text {
    font-size: 0.85rem;
    color: #7F1D1D;
    margin: 0 0 1rem;
}

.portal-decline-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #FCA5A5;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    font-family: var(--font);
}

.portal-decline-form__actions {
    display: flex;
    gap: 0.75rem;
}

/* Portal: filter tabs (services) */
.portal-filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.portal-filter-tab {
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--bg-alt);
    transition: background 0.15s ease, color 0.15s ease;
}

.portal-filter-tab:hover {
    color: var(--text);
}

.portal-filter-tab--active {
    background: var(--text);
    color: #FFFFFF;
}

/* Portal: service card */
.portal-service-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.portal-service-card__badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.portal-service-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.portal-service-card__name a {
    color: inherit;
    text-decoration: none;
}

.portal-service-card__meta {
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Portal: receipt details grid */
.portal-receipt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.portal-receipt-grid__label {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 700;
}

.portal-receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.portal-receipt-table td {
    padding: 0.25rem 0;
}

.portal-receipt-table td:first-child {
    color: var(--text-dim);
}

.portal-receipt-table td:last-child {
    font-weight: 600;
}

/* Portal: document footer notice */
.portal-doc__footer {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.portal-doc__footer a {
    color: var(--accent);
}

/* Portal: timeline/events */
.portal-timeline {
    display: grid;
    gap: 0.75rem;
}

.portal-timeline__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.portal-timeline__event {
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 700;
}

.portal-timeline__status {
    color: var(--text-dim);
    margin-left: 0.5rem;
    font-family: var(--font);
    font-weight: 400;
}

.portal-timeline__date {
    color: var(--text-dim);
}

/* Portal: terms bar */
.portal-terms-bar {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.portal-terms-bar__links {
    display: flex;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.portal-terms-bar__links a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
}

/* Portal: form layout */
.portal-form-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    max-width: 44rem;
    margin: 0 auto;
}

.portal-form-wrap--narrow {
    max-width: 32rem;
}

.portal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.portal-form-grid--3 {
    grid-template-columns: 2fr 2fr 1.5fr;
}

.portal-input--disabled {
    background: var(--bg-alt);
    cursor: not-allowed;
}

/* Portal: document section spacing */
.portal-doc-section {
    margin-bottom: 2.5rem;
}

.portal-doc-section:last-child {
    margin-bottom: 0;
}

/* Portal: button variants */
.portal-btn-danger {
    background: #DC2626;
    color: #FFFFFF;
    border: none;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
}

.portal-btn-cancel {
    color: #DC2626;
    border-color: #FCA5A5;
}

.portal-btn-accept {
    background: #059669;
    color: #FFFFFF;
}

.portal-btn-accept:hover {
    background: #047857;
}

.portal-btn-print {
    background: var(--text);
    color: #FFFFFF;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    font-family: var(--font);
    font-weight: 600;
}

/* Portal: quote description */
.portal-quote-desc {
    border-top: 1px solid var(--line-subtle);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-charcoal);
}
.portal-card__subtitle + .portal-quote-desc {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    white-space: pre-wrap;
}

/* Portal: quote reference badge */
.portal-ref-badge {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    background: var(--bg-alt);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-xs);
    font-weight: 700;
    color: var(--text);
}

/* Portal: print header row */
.portal-print-row {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.portal-print-row .portal-back {
    margin-bottom: 0;
}

/* Portal: utilities */
.portal-btn-full { width: 100%; text-align: center; box-sizing: border-box; }
.portal-card + .portal-card,
.portal-card--spaced { margin-top: 2rem; }
.portal-section-title--bordered {
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.portal-info-grid--flush { margin-bottom: 0; }
.portal-cancel-notice {
    color: #DC2626;
    font-size: 0.75rem;
    margin-top: 0.2rem;
}
.portal-mono { font-family: var(--font-mono); }
.portal-uppercase { text-transform: uppercase; }
.portal-flex-center {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.portal-service-grid {
    display: grid;
    gap: 1rem;
}
.portal-ns-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.portal-ns-divider {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-subtle);
}
.portal-cancel-box {
    margin-top: 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}
.portal-cancel-warning {
    color: #991B1B;
    margin: 0;
}
.portal-doc__footer > div + div {
    margin-top: 0.25rem;
}

/* Portal: support form */
.portal-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.portal-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.portal-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.portal-form-input {
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
}
.portal-form-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
textarea.portal-form-input {
    resize: vertical;
    min-height: 6rem;
}
.portal-form-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* Portal: support messages */
.portal-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.portal-message {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}
.portal-message--customer {
    background: var(--bg-alt);
    border-left: 3px solid var(--accent);
}
.portal-message--admin {
    background: var(--bg-surface);
    border-left: 3px solid #059669;
}
.portal-message__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.portal-message__author {
    font-weight: 700;
    color: var(--text);
}
.portal-message__time {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.portal-message__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-charcoal);
}

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */

.pdp-wrap {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.pdp-hero {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    margin-bottom: 3.5rem;
    box-shadow: var(--shadow-sm);
}

.pdp-badges {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pdp-badge {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-xs);
}

.pdp-badge--delivery {
    color: var(--text-dim);
    background: var(--bg-alt);
}

.pdp-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.pdp-lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 52rem;
    margin: 0 0 2rem 0;
}

.pdp-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pdp-overview {
    margin-bottom: 4rem;
}

.pdp-overview h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.pdp-overview__body {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-charcoal);
    max-width: 56rem;
}

.pdp-plans-section { margin-top: 3rem; }

.pdp-plans-header {
    margin-bottom: 2.5rem;
}

.pdp-plans-header .mono-label {
    margin-bottom: 0.75rem;
}

.pdp-plans-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.pdp-plans-header p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

.pdp-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.pdp-plan-card {
    background: var(--bg-surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pdp-plan-card:hover {
    border-color: var(--line-bright);
    box-shadow: var(--shadow-md);
}

.pdp-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.pdp-plan-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.pdp-plan-code {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-xs);
}

.pdp-plan-pricing {
    margin: 1.5rem 0 2rem 0;
}

.pdp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.pdp-plan-amount {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.pdp-plan-cycle {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pdp-plan-setup {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

.pdp-plan-trial {
    display: inline-block;
    margin-top: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.pdp-plan-was-price {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: line-through;
    margin-top: 0.25rem;
}

.pdp-plan-intro-badge {
    display: inline-block;
    margin-top: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.pdp-plan-features {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    margin-bottom: 2rem;
}

.pdp-plan-features__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.pdp-plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-charcoal);
}

.pdp-plan-features li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdp-plan-features .check {
    color: var(--accent);
    font-weight: bold;
}

.pdp-plan-form { margin-top: 1.5rem; }

.pdp-plan-form .button {
    width: 100%;
    text-align: center;
}

.pdp-plan-form .pdp-domain-field {
    margin-bottom: 1rem;
}

.pdp-plan-form .pdp-domain-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.pdp-empty-state {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 3rem;
    text-align: center;
}

.pdp-empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.pdp-empty-state p {
    color: var(--text-muted);
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

/* ==========================================================================
   SERVICE DETAIL PAGE (hero split, visual frame, sections)
   ========================================================================== */

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

.section { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.section.alt { background: var(--bg-alt); }

.section-head { margin-bottom: 1.5rem; }
.section-head .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}
.section-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.wrap--prose { max-width: 48rem; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 2.5rem); }

.badge-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 42rem;
    margin: 0 0 1.5rem 0;
}

.actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem 2rem;
    font-size: 0.95rem;
    color: var(--text-charcoal);
}

.list li { padding: 0.3rem 0; }

.editorial-rows {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.editorial-row {
    display: grid;
    gap: 1rem;
}

.editorial-row__title {
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.editorial-row__desc {
    color: var(--text-charcoal);
    line-height: 1.6;
    margin: 0;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}

.steps .index {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-dim);
    display: block;
    margin-bottom: 0.5rem;
}

.steps h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.steps p {
    font-size: 0.9rem;
    color: var(--text-charcoal);
    line-height: 1.6;
    margin: 0;
}

.product-spotlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.product-panel {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.product-panel h3 { margin: 0.5rem 0; }
.product-panel h3 a { color: var(--text); font-weight: 700; text-decoration: none; }
.product-panel p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 1rem; }

.badge-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-xs);
    color: var(--text-dim);
    background: var(--bg-alt);
}

.badge-tag--active { color: var(--accent); background: var(--accent-soft); }

.visual-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}

.visual-frame__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.visual-frame__chrome span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
}

.visual-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.visual-frame figcaption {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   ENGAGE PAGE
   ========================================================================== */

.engage-section {
    padding: clamp(2.5rem, 4.5vw, 3.5rem) 0;
    border-top: 1px solid var(--line);
}

.engage-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.engage-for-item {
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.engage-for-item h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem;
}

.engage-for-item p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.engage-caps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem 2.5rem;
    margin: 1.5rem 0;
}

.engage-caps-group h3 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0 0 0.5rem;
}

.engage-caps-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.engage-caps-group li {
    font-size: 0.92rem;
    color: var(--text-charcoal);
    padding: 0.2rem 0;
    line-height: 1.5;
}

.engage-model-block {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
}

.engage-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.engage-proof-item img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    width: 100%;
    height: auto;
}

.engage-proof-meta {
    margin-top: 0.75rem;
}

.engage-proof-meta h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.engage-proof-meta h3 a {
    color: var(--text);
    text-decoration: none;
}

.engage-proof-meta h3 a:hover { color: var(--accent); }

.engage-proof-meta p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

.engage-products-divider {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 2px solid var(--line-bright);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .p52-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .p52-hero__text .heading-hero { max-width: 100%; }
    .p52-hero__desc { max-width: 100%; }
    .p52-hero__proof { gap: 1rem; }
    .p52-product--hridyaa { grid-template-columns: 1fr; gap: 2.5rem; }
    .p52-product--assured { grid-template-columns: 1fr; gap: 2.5rem; }
    .p52-product--assetbulls .p52-product__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .p52-product--wildhawk { grid-template-columns: 1fr; gap: 2rem; }
    .p50-disc-grid { grid-template-columns: 1fr; }
    .p50-catalog-grid { grid-template-columns: 1fr; }
    .p50-catalog-grid--reverse { grid-template-columns: 1fr; }
    .p50-catalog-compact { grid-template-columns: 1fr; }
    .engage-proof-grid { grid-template-columns: 1fr; }
    .p50-case__cols { grid-template-columns: 1fr; gap: 1.5rem; }
    .p50-case__narrative { grid-template-columns: 1fr; }
    .p52-case__secondary { grid-template-columns: 1fr; }
    .p50-case-frame { max-width: 100%; }
    .p50-chapter__grid { grid-template-columns: 1fr; }
    .p50-svc-grid { grid-template-columns: 1fr; }
    .hero-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .site-nav { display: none; }
    .site-nav.is-open {
        display: block;
        position: absolute;
        top: var(--header);
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: 1.25rem 1.5rem;
        box-shadow: var(--shadow-md);
    }
    .site-nav.is-open ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .header-actions { display: none; }
    .nav-toggle { display: inline-flex; }
    .site-nav.is-open .nav-login {
        display: block;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--line);
    }

    .heading-hero {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.1;
    }
    .heading-section {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.15;
    }
    .subheading { font-size: 1rem; line-height: 1.6; }
    .wrap { padding-left: 1rem; padding-right: 1rem; }

    .p50-disc-num { display: inline-block; }
    .p50-founder__specs { flex-direction: column; gap: 0.75rem; }
    .p52-hero__proof { flex-direction: column; gap: 0.5rem; }
    .p52-hero__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }

    .cta-band__inner { flex-direction: column; align-items: flex-start; }

    .contact-layout { grid-template-columns: 1fr; }
    .portal-topbar { flex-direction: column; align-items: flex-start; }
    .portal-stats { grid-template-columns: 1fr 1fr; }
    .portal-detail-grid { grid-template-columns: 1fr; }
    .portal-doc__header { flex-direction: column; }
    .portal-doc__meta { text-align: left; }
    .portal-receipt-grid { grid-template-columns: 1fr; }
    .portal-terms-grid { grid-template-columns: 1fr; }
    .portal-form-grid--3 { grid-template-columns: 1fr; }
    .portal-terms-bar { flex-direction: column; align-items: flex-start; }
    .pdp-plans-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .pricing-plans-grid { grid-template-columns: 1fr; }
    .p50-case__cols { grid-template-columns: 1fr; }
    .portal-stats { grid-template-columns: 1fr; }
    .portal-form-grid { grid-template-columns: 1fr; }
    .portal-outstanding { flex-direction: column; align-items: flex-start; }
    .portal-totals__inner { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .p52-product__capabilities { gap: 0.25rem 1rem; }
}

@media (max-width: 480px) {
    .brand { font-size: 1.05rem; gap: 0.4rem; }
    .portal-nav { gap: 0.15rem; }
    .portal-nav__link { padding: 0.6rem 0.6rem; font-size: 0.82rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
    .auth-card { padding: 1.5rem; }
    .pdp-hero { padding: 1.5rem; }
    .pdp-plan-card { padding: 1.5rem; }
    .pdp-plan-amount { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ==========================================================================
   PHASE 68B: COMMERCIAL HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Commercial Product Grid (Section 2) --- */

.p68-commercial {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-top: 1px solid var(--line);
}

.p68-commercial__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.p68-commercial__card {
    background: var(--bg);
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.p68-commercial__card-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}

.p68-commercial__card-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 400;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.p68-commercial__card-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.p68-commercial__card-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1.5px solid var(--text);
    padding-bottom: 1px;
    text-decoration: none;
    display: inline-block;
    transition: color 0.15s ease, border-color 0.15s ease;
    align-self: flex-start;
    margin-top: 0.25rem;
}

.p68-commercial__card-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* --- WordPress Platform Section (Section 4) --- */

.p68-wordpress {
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
    border-top: 1px solid var(--line);
}

.p68-wordpress__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.p68-wordpress__links {
    display: flex;
    flex-direction: column;
    margin-top: 1.75rem;
}

.p68-wordpress__link {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-charcoal);
    text-decoration: none;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-subtle);
    transition: color 0.15s ease;
}

.p68-wordpress__link:first-child {
    border-top: 1px solid var(--line-subtle);
}

.p68-wordpress__link:hover {
    color: var(--accent);
}

.p68-wordpress__evidence {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.p68-wordpress__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-subtle);
}

.p68-wordpress__stat:first-child {
    padding-top: 0;
}

.p68-wordpress__stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.p68-wordpress__stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.p68-wordpress__stat-label {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* --- Engineering Services Section (Section 5) --- */

.p68-services {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-top: 1px solid var(--line);
}

.p68-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.p68-services__item {
    background: var(--bg);
    padding: clamp(1.5rem, 2.5vw, 2rem);
}

.p68-services__item-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.p68-services__item-title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.6vw, 1.2rem);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.p68-services__item-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0.85rem 0;
}

.p68-services__cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

/* --- Phase 68B Responsive --- */

@media (max-width: 1024px) {
    .p68-wordpress__inner { grid-template-columns: 1fr; }
    .p68-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .p68-commercial__grid {
        grid-template-columns: 1fr;
        background: transparent;
        gap: 0;
    }
    .p68-commercial__card {
        border-bottom: 1px solid var(--line);
    }
    .p68-commercial__card:last-child {
        border-bottom: none;
    }
}

@media (max-width: 640px) {
    .p68-services__grid {
        grid-template-columns: 1fr;
        background: transparent;
        gap: 0;
    }
    .p68-services__item {
        border-bottom: 1px solid var(--line);
    }
    .p68-services__item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   PHASE 68B.1: BRAND LOGO IMAGES
   ========================================================================== */

.brand-logo {
    display: block;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.brand-logo--long    { height: 56px; }
.brand-logo--compact { display: none; }

.brand--footer .brand-logo--long { height: 56px; }

@media (max-width: 768px) {
    .brand-logo--long    { display: none; }
    .brand-logo--compact { display: block; height: 44px; }
}

/* ==========================================================================
   PHASE 69A: PRODUCT-FIRST HOMEPAGE REDESIGN
   ========================================================================== */

/* Hero eyebrow */
.p69-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

/* Hero product visual — 2x2 grid of mini product tiles */
.p69-hero-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.p69-hero-tile {
    background: var(--bg-surface);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.p69-hero-tile__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.p69-hero-tile--service .p69-hero-tile__label {
    color: var(--text-dim);
}

.p69-hero-tile__name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.p69-hero-tile__desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
}

.p69-hero-tile__cta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line-subtle);
    margin-top: 0.1rem;
    transition: color 0.15s ease;
}

.p69-hero-tile__cta:hover { color: var(--accent); }

/* Category navigation strip */
.p69-cat-strip {
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.p69-cat-strip::-webkit-scrollbar { display: none; }

.p69-cat-strip__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.p69-cat-strip__link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid var(--line);
    transition: color 0.15s ease, background 0.15s ease;
}

.p69-cat-strip__link:first-child { border-left: 1px solid var(--line); }
.p69-cat-strip__link:hover { color: var(--accent); background: var(--bg-surface); }

/* Products section */
.p69-products {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    border-top: 1px solid var(--line);
}

.p69-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: clamp(2rem, 3.5vw, 3rem);
}

.p69-product-card {
    background: var(--bg-surface);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

.p69-product-card:hover { background: var(--bg-alt); }

.p69-product-card--service {
    background: var(--bg);
}

.p69-product-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.p69-product-card--service .p69-product-card__tag { color: var(--text-dim); }

.p69-product-card__name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.p69-product-card__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.p69-product-card__divider {
    border: none;
    border-top: 1px solid var(--line-subtle);
    margin: 0.25rem 0;
}

.p69-product-card__cta {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1.5px solid var(--text);
    padding-bottom: 1px;
    align-self: flex-start;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-top: 0.1rem;
}

.p69-product-card__cta:hover { color: var(--accent); border-color: var(--accent); }

/* Production proof — compact grid */
.p69-proof {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
    border-top: 1px solid var(--line);
}

.p69-proof__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.p69-proof__tile {
    background: var(--bg-surface);
    padding: clamp(1.1rem, 2.5vw, 1.65rem);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.p69-proof__tile-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.p69-proof__tile-name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.p69-proof__tile-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.p69-proof__tile-link {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 0.3rem;
    transition: color 0.15s ease;
}

.p69-proof__tile-link:hover { color: var(--accent); }

/* Compact founder strip */
.p69-founder-strip {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.p69-founder-strip__inner {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    flex-wrap: wrap;
}

.p69-founder-strip__body { flex: 1; min-width: 200px; }

.p69-founder-strip__tagline {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

.p69-founder-strip__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Phase 69A responsive */
@media (max-width: 1100px) {
    .p69-products__grid { grid-template-columns: repeat(2, 1fr); }
    .p69-proof__grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .p69-hero-visual { display: none; }
    .p52-hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .p69-products__grid {
        grid-template-columns: 1fr;
        background: transparent;
        gap: 0;
        border-radius: var(--radius);
    }
    .p69-product-card { border-bottom: 1px solid var(--line); }
    .p69-product-card:last-child { border-bottom: none; }
    .p69-proof__grid {
        grid-template-columns: 1fr 1fr;
    }
    .p69-cat-strip__link { padding: 0.65rem 1rem; }
}

@media (max-width: 480px) {
    .p69-proof__grid { grid-template-columns: 1fr; }
    .p69-founder-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   PHASE 70: COMMERCIAL HOMEPAGE — TECHNOLOGY PRODUCTS COMPANY
   ========================================================================== */

/* --- p70 design tokens --- */
:root {
    --p70-indigo:      #4F46E5;
    --p70-indigo-dark: #4338CA;
    --p70-indigo-50:   #EEF2FF;
    --p70-indigo-100:  #E0E7FF;
    --p70-slate-900:   #0F172A;
    --p70-slate-700:   #334155;
    --p70-slate-600:   #475569;
    --p70-slate-100:   #F1F5F9;
    --p70-white:       #FFFFFF;
    --p70-green:       #059669;
    --p70-hosting:     #0EA5E9;
    --p70-email:       #7C3AED;
    --p70-wp:          #2271B1;
    --p70-software:    #D97706;
}

/* ==========================================================================
   p70 HERO
   ========================================================================== */

.p70-hero {
    background: var(--p70-indigo-50);
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.p70-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
}

/* Left column */
.p70-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p70-indigo);
    margin-bottom: 1rem;
}

.p70-hero__h1 {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--p70-slate-900);
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.p70-hero__h1 span {
    color: var(--p70-indigo);
}

.p70-hero__sub {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    color: var(--p70-slate-600);
    line-height: 1.65;
    margin: 0 0 2rem;
    max-width: 44ch;
}

.p70-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2.25rem;
}

.p70-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--p70-indigo);
    color: var(--p70-white);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.8rem 1.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.p70-hero__cta-primary:hover {
    background: var(--p70-indigo-dark);
    transform: translateY(-1px);
}

.p70-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--p70-slate-700);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.p70-hero__cta-secondary:hover { color: var(--p70-indigo); }

.p70-hero__stats {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    flex-wrap: wrap;
}

.p70-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.p70-hero__stat-num {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--p70-slate-900);
    line-height: 1;
}

.p70-hero__stat-label {
    font-size: 0.75rem;
    color: var(--p70-slate-600);
    font-weight: 500;
}

/* Right column — product panel */
.p70-hero__panel {
    background: var(--p70-white);
    border: 1px solid var(--p70-indigo-100);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -8px rgba(79, 70, 229, 0.14), 0 4px 12px -2px rgba(79, 70, 229, 0.06);
    overflow: hidden;
}

.p70-hero__panel-head {
    padding: 1rem 1.5rem;
    background: var(--p70-indigo);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p70-hero__panel-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.p70-hero__panel-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--p70-white);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.p70-hero__panel-link:hover { opacity: 1; }

.p70-hero__panel-rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p70-hero__panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--p70-indigo-50);
    text-decoration: none;
    gap: 1rem;
    transition: background 0.12s ease;
}

.p70-hero__panel-row:last-child { border-bottom: none; }

.p70-hero__panel-row:hover { background: var(--p70-indigo-50); }

.p70-hero__panel-row-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.p70-hero__panel-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.p70-hero__panel-icon--hosting  { background: rgba(14, 165, 233, 0.12); }
.p70-hero__panel-icon--email    { background: rgba(124, 58, 237, 0.12); }
.p70-hero__panel-icon--wp       { background: rgba(34, 113, 177, 0.12); }
.p70-hero__panel-icon--software { background: rgba(217, 119, 6, 0.12);  }

.p70-hero__panel-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--p70-slate-900);
}

.p70-hero__panel-desc {
    font-size: 0.75rem;
    color: var(--p70-slate-600);
    margin-top: 0.1rem;
}

.p70-hero__panel-price {
    text-align: right;
    flex-shrink: 0;
}

.p70-hero__panel-amount {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--p70-green);
    white-space: nowrap;
}

.p70-hero__panel-period {
    font-size: 0.7rem;
    color: var(--p70-slate-600);
}

/* ==========================================================================
   p70 PRODUCTS
   ========================================================================== */

.p70-products {
    padding: clamp(3.5rem, 5.5vw, 5rem) 0;
    background: var(--p70-white);
}

.p70-products__header {
    text-align: center;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.p70-products__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p70-indigo);
    margin-bottom: 0.75rem;
}

.p70-products__h2 {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--p70-slate-900);
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.p70-products__sub {
    font-size: 1.05rem;
    color: var(--p70-slate-600);
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.6;
}

.p70-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.p70-product-card {
    border: 1px solid var(--p70-indigo-100);
    border-radius: var(--radius-lg);
    background: var(--p70-white);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}

.p70-product-card:hover {
    box-shadow: 0 12px 28px -4px rgba(79, 70, 229, 0.12);
    transform: translateY(-2px);
}

.p70-product-card__tag {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    align-self: flex-start;
}

.p70-product-card__tag--hosting  { background: rgba(14, 165, 233, 0.12);  color: #0369A1; }
.p70-product-card__tag--email    { background: rgba(124, 58, 237, 0.12);  color: #6D28D9; }
.p70-product-card__tag--wp       { background: rgba(34, 113, 177, 0.12);  color: #1E40AF; }

.p70-product-card__name {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--p70-slate-900);
    margin: 0 0 0.5rem;
}

.p70-product-card__desc {
    font-size: 0.9rem;
    color: var(--p70-slate-600);
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex: 1;
}

.p70-product-card__price {
    margin-bottom: 1.25rem;
}

.p70-product-card__price-from {
    font-size: 0.72rem;
    color: var(--p70-slate-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.p70-product-card__price-amount {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--p70-green);
    line-height: 1.1;
}

.p70-product-card__price-period {
    font-size: 0.8rem;
    color: var(--p70-slate-600);
}

.p70-product-card__price-free {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--p70-green);
    line-height: 1.2;
}

.p70-product-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.p70-product-card__features li {
    font-size: 0.85rem;
    color: var(--p70-slate-700);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

.p70-product-card__features li::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    background: var(--p70-indigo);
    border-radius: 50%;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7l3 3 5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: var(--p70-indigo);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.p70-product-card__cta {
    display: block;
    text-align: center;
    background: var(--p70-indigo);
    color: var(--p70-white);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s ease;
    margin-top: auto;
}

.p70-product-card__cta:hover { background: var(--p70-indigo-dark); }

.p70-products__footer {
    text-align: center;
}

.p70-products__all-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--p70-indigo);
    text-decoration: none;
    transition: color 0.15s;
}

.p70-products__all-link:hover { color: var(--p70-indigo-dark); text-decoration: underline; }

/* ==========================================================================
   p70 SERVICES
   ========================================================================== */

.p70-services {
    padding: clamp(3.5rem, 5.5vw, 5rem) 0;
    background: var(--p70-slate-100);
}

.p70-services__header {
    margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.p70-services__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p70-indigo);
    margin-bottom: 0.75rem;
}

.p70-services__h2 {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    font-weight: 800;
    color: var(--p70-slate-900);
    letter-spacing: -0.015em;
    margin: 0 0 0.6rem;
}

.p70-services__sub {
    font-size: 1rem;
    color: var(--p70-slate-600);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0;
}

.p70-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(79, 70, 229, 0.12);
    border: 1px solid rgba(79, 70, 229, 0.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.p70-service-card {
    background: var(--p70-white);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    transition: background 0.12s ease;
}

.p70-service-card:hover { background: var(--p70-indigo-50); }

.p70-service-card__name {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p70-slate-900);
    margin: 0 0 0.4rem;
}

.p70-service-card__desc {
    font-size: 0.82rem;
    color: var(--p70-slate-600);
    line-height: 1.55;
    margin: 0;
}

.p70-services__footer {
    text-align: center;
}

.p70-services__all-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--p70-indigo);
    text-decoration: none;
    transition: color 0.15s;
}

.p70-services__all-link:hover { color: var(--p70-indigo-dark); text-decoration: underline; }

/* ==========================================================================
   p70 TRUST / PROOF
   ========================================================================== */

.p70-trust {
    padding: clamp(3.5rem, 5.5vw, 5rem) 0;
    background: var(--p70-white);
}

.p70-trust__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--p70-indigo-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.p70-trust__stat {
    padding: 1.75rem 1.5rem;
    border-right: 1px solid var(--p70-indigo-100);
    text-align: center;
}

.p70-trust__stat:last-child { border-right: none; }

.p70-trust__stat-num {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 800;
    color: var(--p70-indigo);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.p70-trust__stat-label {
    font-size: 0.82rem;
    color: var(--p70-slate-600);
    line-height: 1.4;
    font-weight: 500;
}

.p70-trust__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p70-indigo);
    margin-bottom: 1.25rem;
    text-align: center;
}

.p70-trust__systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.p70-trust__system {
    border: 1px solid var(--p70-indigo-100);
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--p70-white);
    transition: box-shadow 0.15s ease;
}

.p70-trust__system:hover {
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.1);
}

.p70-trust__system-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--p70-slate-900);
    margin: 0 0 0.3rem;
}

.p70-trust__system-type {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p70-slate-600);
    margin-bottom: 0.5rem;
}

.p70-trust__system-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--p70-indigo);
    text-decoration: none;
    transition: color 0.12s;
}

.p70-trust__system-link:hover { color: var(--p70-indigo-dark); text-decoration: underline; }

/* ==========================================================================
   p70 FOUNDER
   ========================================================================== */

.p70-founder {
    padding: clamp(2.25rem, 3.5vw, 3rem) 0;
    background: var(--p70-slate-100);
    border-top: 1px solid var(--p70-indigo-100);
    border-bottom: 1px solid var(--p70-indigo-100);
}

.p70-founder__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
    flex-wrap: wrap;
}

.p70-founder__text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.p70-founder__byline {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 800;
    color: var(--p70-slate-900);
    margin: 0;
}

.p70-founder__desc {
    font-size: 0.88rem;
    color: var(--p70-slate-600);
    line-height: 1.55;
    margin: 0;
    max-width: 58ch;
}

.p70-founder__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--p70-slate-900);
    color: var(--p70-white);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.p70-founder__cta:hover { background: var(--p70-indigo); }

/* ==========================================================================
   p70 CTA BANNER
   ========================================================================== */

.p70-cta-banner {
    padding: clamp(3.5rem, 5.5vw, 5rem) 0;
    background: linear-gradient(135deg, var(--p70-indigo) 0%, #6366F1 50%, #818CF8 100%);
    text-align: center;
}

.p70-cta-banner__h2 {
    font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--p70-white);
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.p70-cta-banner__sub {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: rgba(255,255,255,0.82);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 auto 2.25rem;
}

.p70-cta-banner__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.p70-cta-banner__primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--p70-white);
    color: var(--p70-indigo);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.85rem 2rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.p70-cta-banner__primary:hover {
    background: var(--p70-indigo-50);
    transform: translateY(-1px);
}

.p70-cta-banner__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--p70-white);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: var(--radius);
    border: 2px solid rgba(255,255,255,0.5);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.p70-cta-banner__secondary:hover {
    border-color: var(--p70-white);
    background: rgba(255,255,255,0.1);
}

/* ==========================================================================
   Phase 70 responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .p70-trust__stats   { grid-template-columns: repeat(2, 1fr); }
    .p70-trust__systems { grid-template-columns: repeat(2, 1fr); }
    .p70-products__grid { grid-template-columns: repeat(2, 1fr); }
    .p70-trust__stat:nth-child(2) { border-right: none; }
}

@media (max-width: 900px) {
    .p70-hero__inner     { grid-template-columns: 1fr; }
    .p70-hero__panel     { display: none; }
    .p70-services__grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .p70-products__grid { grid-template-columns: 1fr; }
    .p70-services__grid { grid-template-columns: 1fr; }
    .p70-trust__stats   { grid-template-columns: repeat(2, 1fr); }
    .p70-trust__systems { grid-template-columns: repeat(2, 1fr); }
    .p70-founder__inner { flex-direction: column; align-items: flex-start; }
    .p70-trust__stat:nth-child(2) { border-right: 1px solid var(--p70-indigo-100); }
    .p70-trust__stat:nth-child(even) { border-right: none; }
    .p70-hero__stats { gap: 1.25rem; }

    /* Fix 2: hide feature lists on mobile to reduce card height */
    .p70-product-card__features { display: none; }

    /* Fix 3: hide service cards 4+ on mobile; keep "View All" link */
    .p70-service-card:nth-child(n+4) { display: none; }
}

@media (max-width: 480px) {
    .p70-trust__systems { grid-template-columns: 1fr; }
    .p70-cta-banner__actions { flex-direction: column; align-items: center; }
}

/* =============================================================
   PHASE 71A — Visual Richness & Brand Polish  (p71-* namespace)
   ============================================================= */

/* ── Hero visual composition ─────────────────────────────────── */

.p71-hero-visual {
    position: relative;
    padding: 0.5rem 1.5rem 2rem 0;
}

.p71-hero-frame {
    border-radius: 10px;
    overflow: hidden;
    background: #1c2333;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.06),
        0 8px 20px -4px rgba(0,0,0,0.15),
        0 32px 64px -12px rgba(0,0,0,0.22);
    position: relative;
    z-index: 1;
}

.p71-hero-frame__bar {
    background: #1c2333;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.p71-hero-frame__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.p71-hero-frame__dot:nth-child(1) { background: #FF5F57; }
.p71-hero-frame__dot:nth-child(2) { background: #FFBD2E; }
.p71-hero-frame__dot:nth-child(3) { background: #28CA41; }

.p71-hero-frame__url {
    margin-left: 8px;
    flex: 1;
    max-width: 220px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 2px 10px;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p71-hero-frame__screen {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.p71-hero-frame__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

/* Floating product chips */

.p71-chip {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

.p71-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.p71-chip__dot--hosting { background: #0EA5E9; }
.p71-chip__dot--email   { background: #7C3AED; }
.p71-chip__dot--wp      { background: #2271B1; }

.p71-chip__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #0F172A;
    letter-spacing: -0.01em;
}

.p71-chip__price {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #059669;
    background: #f0fdf4;
    padding: 1px 6px;
    border-radius: 4px;
}

.p71-chip--hosting { bottom: 24%; left: -14px; }
.p71-chip--email   { bottom: 7%;  right: -10px; }
.p71-chip--wp      { top: 10%;   right: -10px; }

@keyframes p71-chip-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.p71-chip--hosting { animation: p71-chip-in 0.4s ease 0.45s both; }
.p71-chip--email   { animation: p71-chip-in 0.4s ease 0.65s both; }
.p71-chip--wp      { animation: p71-chip-in 0.4s ease 0.85s both; }

@media (prefers-reduced-motion: reduce) {
    .p71-chip--hosting,
    .p71-chip--email,
    .p71-chip--wp { animation: none; }
}

/* ── Product card visual headers ─────────────────────────────── */

.p71-card-visual {
    margin-top:    clamp(-2rem, -2.5vw, -1.5rem);
    margin-left:   clamp(-2rem, -2.5vw, -1.5rem);
    margin-right:  clamp(-2rem, -2.5vw, -1.5rem);
    margin-bottom: 1.25rem;
    height: 168px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.p71-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.p70-product-card:hover .p71-card-visual img {
    transform: scale(1.04);
}

.p71-card-visual__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.p71-card-visual--hosting .p71-card-visual__overlay {
    background: linear-gradient(135deg, rgba(14,165,233,0.3) 0%, rgba(2,132,199,0.1) 100%);
}

.p71-card-visual--wp .p71-card-visual__overlay {
    background: linear-gradient(135deg, rgba(34,113,177,0.3) 0%, rgba(21,94,157,0.08) 100%);
}

/* Email card: CSS-only gradient (no photo) */
.p71-card-visual--email {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
}

.p71-card-visual--email .p71-card-visual__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
}

.p71-card-visual--email .p71-card-visual__atmark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    font-family: var(--font-mono);
    letter-spacing: -0.05em;
    user-select: none;
}

.p71-card-visual__label {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: var(--font-mono);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.22);
    padding: 2px 7px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Production proof — dark section ─────────────────────────── */

.p71-proof {
    background: #080c14;
    padding: clamp(3.5rem, 5.5vw, 5rem) 0;
}

.p71-proof__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
    flex-wrap: wrap;
}

.p71-proof__heading-group {
    flex: 1;
    min-width: 200px;
}

.p71-proof__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.5rem;
}

.p71-proof__headline {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.p71-proof__stats {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.p71-proof__stat {
    text-align: right;
}

.p71-proof__stat-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.04em;
    line-height: 1;
}

.p71-proof__stat-label {
    display: block;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.32);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: var(--font-mono);
    margin-top: 3px;
}

/* Featured system */

.p71-proof__featured {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.p71-proof__featured-frame {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 20px 48px rgba(0,0,0,0.45);
    position: relative;
}

.p71-proof__featured-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: top;
    transition: transform 0.6s ease;
}

.p71-proof__featured-frame:hover img {
    transform: scale(1.02);
}

.p71-proof__featured-meta {
    padding-bottom: 0.5rem;
}

.p71-proof__system-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.p71-proof__system-type {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.p71-proof__system-link {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}

.p71-proof__system-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}

/* Thumbnail row */

.p71-proof__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.p71-proof__thumb {
    display: block;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    transition: border-color 0.2s;
}

.p71-proof__thumb:hover {
    border-color: rgba(255,255,255,0.2);
}

.p71-proof__thumb img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.p71-proof__thumb:hover img {
    transform: scale(1.05);
}

.p71-proof__thumb-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.7rem 0.6rem;
    background: linear-gradient(to top, rgba(8,12,20,0.92) 0%, transparent 100%);
}

.p71-proof__thumb-name {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.p71-proof__thumb-type {
    display: block;
    font-size: 0.63rem;
    color: rgba(255,255,255,0.42);
    margin-top: 1px;
    font-family: var(--font-mono);
}

/* ── Services — editorial layout ─────────────────────────────── */

.p71-services__wrap {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.p71-services__statement {
    position: sticky;
    top: 2rem;
}

.p71-services__all-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--p70-indigo, #4F46E5);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: opacity 0.15s;
}

.p71-services__all-link:hover {
    opacity: 0.7;
}

.p71-services__numbered {
    display: flex;
    flex-direction: column;
}

.p71-service-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.75rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--p70-indigo-100, #e0e7ff);
    transition: padding-left 0.15s;
}

.p71-service-row:first-child {
    border-top: 1px solid var(--p70-indigo-100, #e0e7ff);
}

.p71-service-row__num {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 800;
    color: rgba(79,70,229,0.32);
    letter-spacing: 0.04em;
    padding-top: 0.2rem;
}

.p71-service-row__name {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--p70-slate-900, #0F172A);
    margin-bottom: 0.28rem;
    letter-spacing: -0.01em;
}

.p71-service-row__desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

/* ── p71 Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Show hero visual below copy on tablet — constrained and centered */
    .p71-hero-visual {
        padding: 1.5rem 1.5rem 0;
        max-width: 540px;
        margin: 0 auto;
    }
    /* Reduce to 2 chips; reposition inside container to prevent overflow */
    .p71-chip--wp { display: none; }
    .p71-chip--hosting { left: 10px; bottom: 18%; right: auto; }
    .p71-chip--email   { right: 10px; bottom: 4%; left: auto; }

    .p71-proof__featured {
        grid-template-columns: 1fr;
    }
    .p71-proof__featured-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 2rem;
        padding-bottom: 0;
    }
    .p71-proof__system-type { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .p71-services__wrap {
        grid-template-columns: 1fr;
    }
    .p71-services__statement {
        position: static;
    }
    .p71-proof__stats {
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    /* On small mobile: constrain hero visual, keep only 1 chip */
    .p71-hero-visual {
        padding: 1.25rem 1rem 0;
        max-width: 100%;
    }
    .p71-chip--email { display: none; }
    /* Reposition remaining hosting chip safely inside container */
    .p71-chip--hosting { left: 8px; bottom: 12%; }

    .p71-card-visual { height: 136px; }

    .p71-proof__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .p71-proof__stat { text-align: left; }
    .p71-proof__thumbs {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .p71-proof__thumb img { height: 120px; }
}

/* =====================================================================
   PHASE 72 — Commercial Brand / Visual Consistency Redesign
   p72-* namespace — homepage sections
   ===================================================================== */

:root {
    --p72-ivory:      #F7F5F0;
    --p72-canvas:     #EDEBE6;
    --p72-dark:       #161A18;
    --p72-green:      #176B5B;
    --p72-green-h:    #1A7D6B;
    --p72-amber:      #C58B3A;
    --p72-surface:    #FFFFFF;
    --p72-border:     rgba(22, 26, 25, 0.09);
    --p72-border-md:  rgba(22, 26, 25, 0.14);
    --p72-muted:      #5C6560;
    --p72-proof-bg:   #131918;
    --p72-proof-line: rgba(255, 255, 255, 0.07);
    --p72-proof-dim:  rgba(255, 255, 255, 0.45);
}

/* ── Hero — color & type overrides on existing p70/p71 structure ─── */

.p72-hero { background: var(--p72-ivory); }

.p72-hero .p70-hero__eyebrow { color: var(--p72-green); }

.p72-hero .p70-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.p72-hero .p70-hero__h1 span {
    font-style: italic;
    color: var(--p72-green);
}

.p72-hero .p70-hero__sub    { color: var(--p72-muted); }

.p72-hero .p70-hero__cta-primary  { background: var(--p72-green); color: #fff; }
.p72-hero .p70-hero__cta-primary:hover  { background: var(--p72-green-h); }
.p72-hero .p70-hero__cta-secondary      { color: var(--p72-dark); }
.p72-hero .p70-hero__cta-secondary:hover { color: var(--p72-green); }

.p72-hero .p70-hero__stat-num   { color: var(--p72-dark); }
.p72-hero .p70-hero__stat-label { color: var(--p72-muted); }

.p72-hero .p71-chip__dot--hosting { background: var(--p72-green); }
.p72-hero .p71-chip__dot--email   { background: var(--p72-amber); }
.p72-hero .p71-chip__dot--wp      { background: var(--p72-dark);  }

.p72-hero .p71-chip__price {
    color: var(--p72-green);
    background: rgba(23, 107, 91, 0.09);
}

/* ── Products — color & type overrides on existing p70/p71 structure ─ */

.p72-products { background: var(--p72-ivory); }

.p72-products .p70-products__eyebrow { color: var(--p72-green); }

.p72-products .p70-products__h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    letter-spacing: -0.015em;
    color: var(--p72-dark);
}

.p72-products .p70-products__sub { color: var(--p72-muted); }

.p72-products .p70-product-card {
    border-color: var(--p72-border);
    background: var(--p72-surface);
    box-shadow: 0 1px 4px rgba(22, 26, 25, 0.05);
}

.p72-products .p70-product-card:hover {
    box-shadow: 0 8px 28px -4px rgba(22, 26, 25, 0.11);
    border-color: rgba(23, 107, 91, 0.22);
}

.p72-products .p70-product-card__tag--hosting {
    background: rgba(23, 107, 91, 0.08);
    color: var(--p72-green);
}

.p72-products .p70-product-card__tag--email {
    background: rgba(197, 139, 58, 0.1);
    color: #7A4F12;
}

.p72-products .p70-product-card__tag--wp {
    background: rgba(22, 26, 25, 0.07);
    color: var(--p72-dark);
}

.p72-products .p70-product-card__name    { color: var(--p72-dark); }
.p72-products .p70-product-card__desc    { color: var(--p72-muted); }
.p72-products .p70-product-card__price-from   { color: var(--p72-amber); }
.p72-products .p70-product-card__price-amount { color: var(--p72-dark); }
.p72-products .p70-product-card__price-period { color: var(--p72-muted); }
.p72-products .p70-product-card__price-free   { color: var(--p72-dark); }
.p72-products .p70-product-card__features li  { color: var(--p72-dark); }

.p72-products .p70-product-card__features li::before {
    background-color: var(--p72-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7l3 3 5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.p72-products .p70-product-card__cta        { background: var(--p72-green); color: #fff; }
.p72-products .p70-product-card__cta:hover  { background: var(--p72-green-h); color: #fff; }
.p72-products .p70-products__all-link       { color: var(--p72-green); }
.p72-products .p70-products__all-link:hover { color: var(--p72-green-h); }

.p72-products .p71-card-visual--hosting .p71-card-visual__overlay {
    background: linear-gradient(160deg, rgba(23, 107, 91, 0.28) 0%, rgba(23, 107, 91, 0.06) 100%);
}

.p72-products .p71-card-visual--wp .p71-card-visual__overlay {
    background: linear-gradient(160deg, rgba(22, 26, 25, 0.45) 0%, rgba(22, 26, 25, 0.1) 100%);
}

.p72-products .p71-card-visual--email {
    background: linear-gradient(135deg, #2A2A1E 0%, #1A1A14 100%);
}

.p72-products .p71-card-visual--email .p71-card-visual__atmark {
    color: rgba(197, 139, 58, 0.45);
}

/* ── p72 Production Proof — full structural rebuild ───────────────── */

.p72-proof {
    background: var(--p72-proof-bg);
    padding: clamp(4rem, 6.5vw, 6rem) 0;
}

.p72-proof__intro { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.p72-proof__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--p72-green);
    margin-bottom: 0.75rem;
}

.p72-proof__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    color: #F3F1EC;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.p72-proof__sub {
    font-size: clamp(0.93rem, 1.3vw, 1.05rem);
    color: var(--p72-proof-dim);
    line-height: 1.65;
    max-width: 54ch;
    margin: 0;
}

.p72-proof__featured {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: clamp(1.75rem, 3vw, 2.75rem);
    align-items: center;
}

.p72-proof__shot {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--p72-proof-line);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.28);
    background: #0a0f0e;
}

.p72-proof__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    transition: transform 0.5s ease;
}

.p72-proof__shot:hover img { transform: scale(1.02); }

.p72-proof__meta {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0 0.5rem 0.5rem;
}

.p72-proof__sys-label {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 400;
    color: #F3F1EC;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.25rem;
}

.p72-proof__sys-type {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p72-green);
    margin: 0 0 1.1rem;
}

.p72-proof__sys-desc {
    font-size: 0.9rem;
    color: var(--p72-proof-dim);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.p72-proof__sys-caps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.p72-proof__sys-caps li {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.4;
}

.p72-proof__sys-caps li::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background: var(--p72-green);
    flex-shrink: 0;
}

.p72-proof__sys-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--p72-green);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.15s;
}

.p72-proof__sys-link:hover { color: #22A891; }

.p72-proof__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(2rem, 3vw, 2.75rem);
    border: 1px solid var(--p72-proof-line);
    border-radius: 8px;
    overflow: hidden;
}

.p72-proof__stat {
    padding: clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
    border-right: 1px solid var(--p72-proof-line);
}

.p72-proof__stat:last-child { border-right: none; }

.p72-proof__stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    color: #F3F1EC;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.p72-proof__stat-num--amber { color: var(--p72-amber); }

.p72-proof__stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
}

.p72-proof__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: clamp(2rem, 3vw, 2.5rem);
}

.p72-proof__thumb {
    display: block;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--p72-proof-line);
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p72-proof__thumb:hover {
    border-color: rgba(23, 107, 91, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.p72-proof__thumb img {
    display: block;
    width: 100%;
    height: 155px;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.p72-proof__thumb:hover img { transform: scale(1.04); }

.p72-proof__thumb-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.9rem 0.75rem;
    background: linear-gradient(to top, rgba(19, 25, 24, 0.96) 0%, transparent 100%);
}

.p72-proof__thumb-name {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: #F3F1EC;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.p72-proof__thumb-type {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.36);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── p72 Services — 3-category card structure ─────────────────────── */

.p72-services {
    background: var(--p72-ivory);
    padding: clamp(4rem, 6.5vw, 6rem) 0;
}

.p72-services__intro {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.p72-services__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--p72-green);
    margin-bottom: 0.75rem;
}

.p72-services__headline {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.2vw, 2.9rem);
    font-weight: 400;
    color: var(--p72-dark);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.9rem;
}

.p72-services__sub {
    font-size: clamp(0.93rem, 1.3vw, 1.05rem);
    color: var(--p72-muted);
    line-height: 1.65;
    max-width: 52ch;
    margin: 0 auto 1.5rem;
}

.p72-services__all-link {
    display: inline-block;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--p72-green);
    text-decoration: none;
    letter-spacing: -0.01em;
    border-bottom: 1.5px solid rgba(23, 107, 91, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.15s, color 0.15s;
}

.p72-services__all-link:hover {
    color: var(--p72-green-h);
    border-color: var(--p72-green-h);
}

.p72-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.p72-service-cat {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-top: 3px solid var(--p72-green);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}

.p72-service-cat:hover {
    box-shadow: 0 8px 24px -4px rgba(22, 26, 25, 0.09);
}

.p72-service-cat__header {
    padding: 1.1rem 1.4rem 0.8rem;
    border-bottom: 1px solid var(--p72-border);
}

.p72-service-cat__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p72-green);
}

.p72-service-cat__rows { padding: 0.25rem 0; }

.p72-service-cat__row {
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid var(--p72-border);
}

.p72-service-cat__row:last-child { border-bottom: none; }

.p72-service-cat__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.p72-service-cat__desc {
    font-size: 0.8rem;
    color: var(--p72-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── p72 Founder strip ────────────────────────────────────────────── */

.p72-founder {
    background: var(--p72-canvas);
    border-top: 1px solid var(--p72-border);
    border-bottom: 1px solid var(--p72-border);
    padding: clamp(2.25rem, 3.5vw, 3rem) 0;
}

.p72-founder__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
    flex-wrap: wrap;
}

.p72-founder__byline {
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    font-weight: 800;
    color: var(--p72-dark);
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.p72-founder__desc {
    font-size: 0.87rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}

.p72-founder__cta {
    display: inline-flex;
    align-items: center;
    background: var(--p72-dark);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.p72-founder__cta:hover {
    background: var(--p72-green);
    color: #fff;
}

/* ── p72 CTA — dark charcoal-green close ─────────────────────────── */

.p72-cta {
    background: var(--p72-proof-bg);
    padding: clamp(4rem, 6.5vw, 6rem) 0;
}

.p72-cta__inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}

.p72-cta__headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    color: #F3F1EC;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.p72-cta__sub {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    color: var(--p72-proof-dim);
    line-height: 1.65;
    max-width: 40ch;
    margin: 0 auto 2.25rem;
}

.p72-cta__btn {
    display: inline-flex;
    align-items: center;
    background: var(--p72-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: var(--radius);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background 0.15s ease, transform 0.1s ease;
}

.p72-cta__btn:hover {
    background: var(--p72-green-h);
    color: #fff;
    transform: translateY(-1px);
}

/* ── p72 responsive ───────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .p72-proof__featured { grid-template-columns: 3fr 2fr; }
}

@media (max-width: 960px) {
    .p72-proof__featured { grid-template-columns: 1fr; }
    .p72-proof__meta { padding: 1.5rem 0 0; }
    .p72-services__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .p72-proof__thumbs { grid-template-columns: 1fr; gap: 0.75rem; }
    .p72-proof__thumb img { height: 180px; }
    .p72-services__grid { grid-template-columns: 1fr; }
    .p72-founder__inner { flex-direction: column; align-items: flex-start; }
    .p72-cta__inner { text-align: left; }
    .p72-cta__sub { max-width: none; margin-left: 0; margin-right: 0; }
}

@media (max-width: 640px) {
    .p72-proof__stats { grid-template-columns: 1fr 1fr; }
    .p72-proof__stat:nth-child(2) { border-right: none; }
    .p72-proof__stat:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid var(--p72-proof-line);
    }
}

@media (max-width: 400px) {
    .p72-proof__stats { grid-template-columns: 1fr; }
    .p72-proof__stat { border-right: none; border-bottom: 1px solid var(--p72-proof-line); }
    .p72-proof__stat:last-child { border-bottom: none; }
    .p72-proof__stat:nth-child(3) { grid-column: auto; border-top: none; }
}

/* =====================================================================
   PHASE 72 — SITE-WIDE INNER PAGE DESIGN SYSTEM
   Shared components for all non-homepage public pages.
   All colours reference p72 tokens. No inline styles.
   ===================================================================== */

/* ── Breadcrumbs ─────────────────────────────────────────────────── */

.crumbs {
    font-size: 0.8rem;
    color: var(--p72-muted);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.crumbs a {
    color: var(--p72-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.crumbs a:hover { color: var(--p72-green); }

/* ── Generic inner-page hero ─────────────────────────────────────── */

.p72-page-hero {
    background: var(--p72-ivory);
    padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(2rem, 3vw, 3rem);
    border-bottom: 1px solid var(--p72-border);
}

.p72-page-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    margin-bottom: 1rem;
}

.p72-page-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--p72-dark);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.p72-page-hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--p72-muted);
    max-width: 54ch;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.p72-page-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Section utilities ───────────────────────────────────────────── */

.p72-section { background: var(--p72-ivory); }
.p72-section--canvas { background: var(--p72-canvas); }
.p72-section--dark { background: var(--p72-proof-bg); }

.p72-section-pad { padding: clamp(3rem, 5vw, 5rem) 0; }
.p72-section-pad--sm { padding: clamp(2rem, 3.5vw, 3.5rem) 0; }
.p72-section-border { border-bottom: 1px solid var(--p72-border); }
.p72-section-border--dark { border-bottom: 1px solid rgba(255,255,255,0.06); }

.p72-section-head { margin-bottom: clamp(2rem, 3vw, 2.75rem); }

.p72-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    margin-bottom: 0.65rem;
    display: block;
}

.p72-eyebrow--dark { color: var(--p72-amber); }
.p72-eyebrow--amber { color: var(--p72-amber); }

.p72-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.75vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--p72-dark);
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

.p72-h2--dark { color: #F3F1EC; }

.p72-body {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    color: var(--p72-muted);
    line-height: 1.65;
    max-width: 58ch;
}

.p72-body--dark { color: rgba(255,255,255,0.5); }

/* ── Badge / pill tag ────────────────────────────────────────────── */

.p72-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-green);
    background: rgba(23, 107, 91, 0.08);
    border: 1px solid rgba(23, 107, 91, 0.2);
    border-radius: var(--radius-full);
    padding: 0.28rem 0.8rem;
    margin-bottom: 1.25rem;
}

/* ── Services hub (index.php) ────────────────────────────────────── */

.p72-svc-chapter {
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-ivory);
}

.p72-svc-chapter:nth-child(even) { background: var(--p72-canvas); }

.p72-svc-chapter--dark {
    background: var(--p72-proof-bg);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.p72-svc-chapter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
    margin-top: 2.5rem;
}

.p72-svc-chapter__links {
    display: grid;
    gap: 0;
    margin-top: 1.5rem;
}

.p72-svc-chapter__link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--p72-dark);
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--p72-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.15s;
}

.p72-svc-chapter__link:first-child { border-top: 1px solid var(--p72-border); }

.p72-svc-chapter__link:hover { color: var(--p72-green); }

.p72-svc-chapter--dark .p72-svc-chapter__link {
    color: rgba(255,255,255,0.7);
    border-color: var(--p72-proof-line);
}

.p72-svc-chapter--dark .p72-svc-chapter__link:first-child {
    border-top-color: var(--p72-proof-line);
}

.p72-svc-chapter--dark .p72-svc-chapter__link:hover { color: #fff; }

/* ── Service show page ───────────────────────────────────────────── */

.p72-svc-hero {
    background: var(--p72-ivory);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-svc-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--p72-dark);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.p72-svc-hero__lede {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--p72-muted);
    max-width: 58ch;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.p72-svc-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.p72-svc-body {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-ivory);
}

.p72-svc-body__text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-charcoal);
}

.p72-svc-features {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    background: var(--p72-canvas);
    border-bottom: 1px solid var(--p72-border);
}

.p72-svc-features__list {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.75rem;
}

.p72-svc-features__list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.93rem;
    color: var(--text-charcoal);
    padding: 0.85rem 1rem;
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

.p72-svc-features__list li::before {
    content: "";
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background: rgba(23, 107, 91, 0.07);
    border: 1.5px solid rgba(23, 107, 91, 0.35);
    margin-top: 1px;
    flex-shrink: 0;
}

.p72-svc-steps {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    background: var(--p72-ivory);
    border-bottom: 1px solid var(--p72-border);
}

.p72-svc-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2rem);
    margin-top: 2rem;
    counter-reset: svc-step;
}

.p72-svc-step {
    counter-increment: svc-step;
    position: relative;
    padding-left: 2.5rem;
}

.p72-svc-step::before {
    content: counter(svc-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p72-green);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.p72-svc-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.45rem;
}

.p72-svc-step p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.6;
}

.p72-svc-extras {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    background: var(--p72-canvas);
    border-bottom: 1px solid var(--p72-border);
}

.p72-svc-extras__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.p72-svc-extra-card {
    padding: 1.5rem;
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    background: var(--p72-surface);
}

.p72-svc-extra-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.5rem;
}

.p72-svc-extra-card p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.55;
}

.p72-svc-related {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    background: var(--p72-canvas);
}

.p72-svc-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
    min-width: 0;
}

.p72-svc-related-card {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    transition: border-color 0.15s;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-svc-related-card:hover { border-color: var(--p72-green); }

.p72-svc-related-card__cat {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-green);
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.p72-svc-related-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-svc-related-card p {
    font-size: 0.85rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.55;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-svc-related-card__arrow {
    font-size: 0.88rem;
    color: var(--p72-green);
    margin-top: auto;
    padding-top: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Work / Case Study page ──────────────────────────────────────── */

.p72-case {
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-ivory);
}

.p72-case--dark {
    background: var(--p72-proof-bg);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.p72-case__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    margin-bottom: 0.75rem;
    display: block;
}

.p72-case--dark .p72-case__eyebrow { color: var(--p72-amber); }

.p72-case__h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--p72-dark);
    margin: 0 0 0.4rem;
}

.p72-case--dark .p72-case__h2 { color: #F3F1EC; }

.p72-case__subtitle {
    font-size: 0.82rem;
    color: var(--p72-muted);
    margin: 0 0 2rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.p72-case--dark .p72-case__subtitle { color: rgba(255,255,255,0.3); }

.p72-case__prose {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-charcoal);
    max-width: 64ch;
    margin-bottom: 2rem;
}

.p72-case--dark .p72-case__prose { color: rgba(255,255,255,0.65); }

.p72-case__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 3rem);
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--p72-border);
}

.p72-case--dark .p72-case__cols { border-top-color: var(--p72-proof-line); }

.p72-case__col-h {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-green);
    margin: 0 0 0.6rem;
}

.p72-case--dark .p72-case__col-h { color: var(--p72-amber); }

.p72-case__col-p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0;
}

.p72-case--dark .p72-case__col-p { color: rgba(255,255,255,0.45); }

.p72-case__links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.p72-case__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* ── Browser frame component (replaces p52-browser-frame) ────────── */

.p72-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--p72-border);
    background: var(--p72-canvas);
    box-shadow: 0 8px 28px rgba(22, 26, 24, 0.09);
    margin-bottom: 1.75rem;
}

.p72-frame--dark {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.p72-frame__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--p72-canvas);
    border-bottom: 1px solid var(--p72-border);
    padding: 0.6rem 0.9rem;
}

.p72-frame--dark .p72-frame__chrome {
    background: rgba(255,255,255,0.05);
    border-bottom-color: rgba(255,255,255,0.07);
}

.p72-frame__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(22, 26, 24, 0.15);
    flex-shrink: 0;
}

.p72-frame--dark .p72-frame__dot { background: rgba(255,255,255,0.12); }

.p72-frame__url {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--p72-muted);
    margin-left: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p72-frame--dark .p72-frame__url { color: rgba(255,255,255,0.28); }

.p72-frame__viewport img {
    width: 100%;
    display: block;
}

.p72-frame--sm { max-width: 100%; }

/* ── Products catalog (index.php) ────────────────────────────────── */

.p72-catalog { background: var(--p72-ivory); }

.p72-catalog-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: center;
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-catalog-card:last-child { border-bottom: none; }
.p72-catalog-card--rev { direction: rtl; }
.p72-catalog-card--rev > * { direction: ltr; }

.p72-catalog-card__img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--p72-border);
    background: var(--p72-canvas);
}

.p72-catalog-card__img img {
    width: 100%;
    display: block;
}

.p72-catalog-card__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    margin-bottom: 0.75rem;
    display: block;
}

.p72-catalog-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--p72-dark);
    margin: 0 0 0.75rem;
}

.p72-catalog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.p72-catalog-card__title a:hover { color: var(--p72-green); }

.p72-catalog-card__desc {
    font-size: 0.97rem;
    color: var(--p72-muted);
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.p72-catalog-card__price {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--p72-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.p72-catalog-card__cycle {
    font-size: 0.85rem;
    color: var(--p72-muted);
    font-weight: 400;
    margin-left: 0.2rem;
}

.p72-catalog-card__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.p72-catalog-compact-section {
    padding: clamp(2rem, 3.5vw, 3.5rem) 0;
    border-top: 1px solid var(--p72-border);
    background: var(--p72-canvas);
}

.p72-catalog-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.p72-catalog-compact-card {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-top: 3px solid var(--p72-green);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.p72-catalog-compact-card__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--p72-green);
}

.p72-catalog-compact-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
}

.p72-catalog-compact-card__title a {
    color: inherit;
    text-decoration: none;
}

.p72-catalog-compact-card__title a:hover { color: var(--p72-green); }

.p72-catalog-compact-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.p72-catalog-compact-card__tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--p72-muted);
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-full);
    padding: 0.18rem 0.55rem;
}

.p72-catalog-compact-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--p72-border);
}

.p72-catalog-compact-card__price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--p72-dark);
    font-variant-numeric: tabular-nums;
}

.p72-catalog-live {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p72-green);
}

/* ── Product detail page (PDP) ───────────────────────────────────── */

.p72-pdp { background: var(--p72-ivory); }

.p72-pdp__hero {
    padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(2rem, 3vw, 3rem);
    border-bottom: 1px solid var(--p72-border);
}

.p72-pdp__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--p72-dark);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.p72-pdp__lede {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--p72-muted);
    max-width: 54ch;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.p72-pdp__overview {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-canvas);
}

.p72-pdp__overview p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-charcoal);
}

.p72-pdp__plans {
    padding: clamp(3rem, 5vw, 5rem) 0;
    background: var(--p72-ivory);
}

.p72-pdp__plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Force balanced 4-column layout for products with exactly 4 plans */
.p72-pdp__plans-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.p72-pdp__plan-card {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.p72-pdp__plan-card:hover {
    border-color: var(--p72-green);
    box-shadow: 0 4px 20px rgba(23, 107, 91, 0.07);
}

.p72-pdp__plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.p72-pdp__plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
}

.p72-pdp__plan-code {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--p72-muted);
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.55rem;
    flex-shrink: 0;
}

.p72-pdp__plan-amount {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--p72-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.p72-pdp__plan-cycle {
    font-size: 0.9rem;
    color: var(--p72-muted);
    margin-left: 0.25rem;
}

.p72-pdp__plan-was {
    font-size: 0.85rem;
    color: var(--p72-muted);
    text-decoration: line-through;
}

.p72-pdp__plan-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p72-amber);
    background: rgba(197, 139, 58, 0.1);
    border: 1px solid rgba(197, 139, 58, 0.25);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.6rem;
}

.p72-pdp__plan-setup,
.p72-pdp__plan-trial {
    font-size: 0.82rem;
    color: var(--p72-muted);
    margin-top: 0.25rem;
}

.p72-pdp__plan-features-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-muted);
    margin-bottom: 0.65rem;
}

.p72-pdp__plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.p72-pdp__plan-features li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--text-charcoal);
    line-height: 1.45;
}

.p72-pdp__plan-features li::before {
    content: "";
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    background: rgba(23, 107, 91, 0.08);
    border: 1.5px solid rgba(23, 107, 91, 0.3);
    margin-top: 2px;
}

.p72-pdp__domain-field {
    margin-bottom: 0.75rem;
}

.p72-pdp__domain-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--p72-dark);
    margin-bottom: 0.4rem;
}

.p72-pdp__domain-field input {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--p72-border-md);
    border-radius: var(--radius-sm);
    background: var(--p72-canvas);
    color: var(--p72-dark);
}

/* BEST SELLER badge + featured card */
.p72-pdp__plan-card--featured {
    border-color: var(--p72-green);
    box-shadow: 0 4px 24px rgba(23, 107, 91, 0.12);
    position: relative;
}

.p72-pdp__best-seller {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--p72-green);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Term price disclosure (secondary, below monthly equiv) */
.p72-pdp__plan-term-price {
    font-size: 0.82rem;
    color: var(--p72-muted);
    margin-top: 0.2rem;
}

/* Commitment disclosure */
.p72-pdp__plan-commitment {
    font-size: 0.78rem;
    color: var(--p72-muted);
    margin-top: 0.15rem;
    font-style: italic;
}

/* Renewal price disclosure (tertiary, below intro badge) */
.p72-pdp__plan-renewal {
    font-size: 0.78rem;
    color: var(--p72-muted);
    margin-top: 0.4rem;
}

/* Billing footnote */
.p72-pdp__billing-footnote {
    font-size: 0.8rem;
    color: var(--p72-muted);
    margin-top: 1.5rem;
    line-height: 1.6;
}

/* Pricing page — featured plan (BEST SELLER) */
.p72-pricing-plan--featured {
    border-color: var(--p72-green);
    box-shadow: 0 4px 24px rgba(23, 107, 91, 0.12);
    position: relative;
}

.p72-pdp__empty {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.p72-pdp__empty h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.5rem;
}

.p72-pdp__empty p {
    font-size: 0.95rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* ── PDP FAQ accordion ───────────────────────────────────────────── */

.p72-pdp__faq {
    background: var(--p72-canvas);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-faq-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.p72-faq-item {
    border: 1px solid var(--p72-border);
    border-radius: 6px;
    background: var(--p72-ivory);
    overflow: hidden;
}

.p72-faq-item[open] {
    background: var(--p72-canvas);
}

.p72-faq-item__q {
    display: block;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--p72-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
    line-height: 1.4;
}

.p72-faq-item__q::marker,
.p72-faq-item__q::-webkit-details-marker { display: none; }

.p72-faq-item__q::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--p72-muted);
    transition: transform 0.15s ease;
}

.p72-faq-item[open] > .p72-faq-item__q::after {
    content: '−';
}

.p72-faq-item__a {
    padding: 0 1.25rem 1rem;
    font-size: 0.95rem;
    color: var(--p72-muted);
    line-height: 1.65;
}

/* ── WordPress hub (index.php) ───────────────────────────────────── */

.p72-wp-hero {
    background: var(--p72-ivory);
    padding: clamp(2.5rem, 4.5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-wp-hero__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 4vw, 5rem);
    align-items: center;
}

.p72-wp-disciplines {
    background: var(--p72-canvas);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-wp-disc-list {
    margin-top: 2rem;
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.p72-wp-disc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.75rem;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-surface);
    transition: background 0.15s;
    text-decoration: none;
}

a.p72-wp-disc-row:hover { background: var(--p72-canvas); }

.p72-wp-disc-row:last-child { border-bottom: none; }

.p72-wp-disc-row__num {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    padding-top: 3px;
}

.p72-wp-disc-row h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.35rem;
}

.p72-wp-disc-row p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.55;
}

.p72-wp-disc-row__arrow {
    font-size: 1rem;
    color: var(--p72-green);
    padding-top: 3px;
    flex-shrink: 0;
}

.p72-wp-plugins {
    background: var(--p72-ivory);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.p72-wp-plugins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* ── Plugin card (used on wp hub + plugin catalog) ───────────────── */

.p72-plugin-card {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-top: 3px solid var(--p72-green);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.p72-plugin-card__badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.p72-plugin-card__badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--p72-green);
    background: rgba(23, 107, 91, 0.07);
    border: 1px solid rgba(23, 107, 91, 0.18);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.6rem;
    letter-spacing: 0.04em;
}

.p72-plugin-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
}

.p72-plugin-card__title a {
    color: inherit;
    text-decoration: none;
}

.p72-plugin-card__title a:hover { color: var(--p72-green); }

.p72-plugin-card__desc {
    font-size: 0.93rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0;
}

.p72-plugin-card__caps {
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
}

.p72-plugin-card__caps-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-muted);
    margin-bottom: 0.5rem;
    display: block;
}

.p72-plugin-card__cap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.p72-plugin-card__cap-list li {
    font-size: 0.84rem;
    color: var(--text-charcoal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.p72-plugin-card__cap-list li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--p72-green);
    flex-shrink: 0;
}

.p72-plugin-card__actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--p72-border);
}

/* ── Plugin show page ────────────────────────────────────────────── */

.p72-plugin-show__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2rem, 3.5vw, 3.5rem);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.p72-plugin-show__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-charcoal);
    margin-bottom: 2rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-plugin-show__features {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
    background: var(--p72-canvas);
    border-bottom: 1px solid var(--p72-border);
}

.p72-plugin-show__feature-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
}

.p72-svc-related-card .p72-plugin-show__feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0;
    list-style: none;
    min-width: 0;
    max-width: 100%;
}

.p72-plugin-show__feature-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--text-charcoal);
    line-height: 1.55;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-plugin-show__feature-list li::before {
    content: "";
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    background: rgba(23, 107, 91, 0.07);
    border: 1.5px solid rgba(23, 107, 91, 0.35);
    margin-top: 3px;
    flex-shrink: 0;
}

.p72-plugin-show__install {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0;
    background: var(--p72-ivory);
}

.p72-plugin-show__specs {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--header) + 1.25rem);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}

.p72-plugin-show__specs-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--p72-border);
}

.p72-plugin-show__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--p72-border);
    gap: 0.75rem;
    font-size: 0.85rem;
    min-width: 0;
}

.p72-plugin-show__spec-row:last-child { border-bottom: none; }

.p72-plugin-show__spec-label {
    color: var(--p72-muted);
    flex-shrink: 0;
    min-width: 0;
}

.p72-plugin-show__spec-value {
    font-weight: 700;
    color: var(--p72-dark);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.p72-plugin-show__spec-value a {
    color: var(--p72-green);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}
}

.p72-plugin-show__spec-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ── Contact page ────────────────────────────────────────────────── */

.p72-contact__header {
    padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(2rem, 3vw, 3rem);
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-ivory);
}

.p72-contact__h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--p72-dark);
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

.p72-contact__sub {
    font-size: 1rem;
    color: var(--p72-muted);
    line-height: 1.65;
    max-width: 54ch;
    margin: 0;
}

.p72-contact__body {
    background: var(--p72-ivory);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.p72-contact__layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
}

.p72-contact__aside {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    position: sticky;
    top: calc(var(--header) + 1.25rem);
}

.p72-contact__aside-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--p72-green);
    margin-bottom: 0.35rem;
    display: block;
}

.p72-contact__aside-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--p72-dark);
    margin: 0 0 0.5rem;
}

.p72-contact__aside-note {
    font-size: 0.88rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--p72-border);
}

.p72-contact__info-block {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-contact__info-block:last-child { border-bottom: none; }

.p72-contact__info-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p72-muted);
    margin-bottom: 0.3rem;
    display: block;
}

.p72-contact__info-value {
    font-size: 0.93rem;
    color: var(--text-charcoal);
    line-height: 1.5;
    margin: 0;
}

.p72-contact__info-value a {
    color: var(--p72-green);
    text-decoration: none;
    font-weight: 600;
}

.p72-contact__info-value--lg {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--p72-dark);
}

.p72-contact__policy-links {
    display: flex;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.p72-contact__policy-links a {
    font-size: 0.78rem;
    color: var(--p72-muted);
    text-decoration: none;
}

.p72-contact__policy-links a:hover { color: var(--p72-green); }

/* ── Pricing page (Engage) ───────────────────────────────────────── */

.p72-pricing-section {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-pricing-product {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    margin-bottom: 1rem;
}

.p72-pricing-product:last-child { margin-bottom: 0; }

.p72-pricing-product__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.p72-pricing-product__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
}

.p72-pricing-product__name a {
    color: inherit;
    text-decoration: none;
}

.p72-pricing-product__name a:hover { color: var(--p72-green); }

.p72-pricing-product__summary {
    font-size: 0.9rem;
    color: var(--p72-muted);
    margin: 0 0 1.25rem;
    line-height: 1.55;
}

.p72-pricing-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (min-width: 641px) and (max-width: 1024px) {
    .p72-pricing-plan-grid { grid-template-columns: repeat(2, 1fr); }
}

.p72-pricing-plan {
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color 0.15s;
}

.p72-pricing-plan:hover { border-color: var(--p72-green); }

.p72-pricing-plan__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }

.p72-pricing-plan__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
}

.p72-pricing-plan__amount {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--p72-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.p72-pricing-plan__cycle {
    font-size: 0.82rem;
    color: var(--p72-muted);
}

.p72-pricing-plan__extras {
    font-size: 0.78rem;
    color: var(--p72-muted);
}

.p72-pricing-plan__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.p72-pricing-plan__features li {
    font-size: 0.82rem;
    color: var(--text-charcoal);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

.p72-pricing-plan__features li::before {
    content: "";
    width: 13px;
    height: 13px;
    min-width: 13px;
    border-radius: 50%;
    background: rgba(23, 107, 91, 0.07);
    border: 1.5px solid rgba(23, 107, 91, 0.28);
    margin-top: 1px;
}

.p72-pricing-plan__buy { margin-top: auto; }

.p72-pricing-fallback {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem;
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
}

.p72-pricing-fallback__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--p72-dark);
}

.p72-pricing-fallback__desc {
    font-size: 0.82rem;
    color: var(--p72-muted);
    margin-top: 0.2rem;
}

.p72-legal-line {
    font-size: 0.78rem;
    color: var(--p72-muted);
    padding: 1.5rem 0;
    border-top: 1px solid var(--p72-border);
    line-height: 1.65;
}

.p72-legal-line a {
    color: var(--p72-green);
    text-decoration: none;
}

/* ── Error pages ─────────────────────────────────────────────────── */

.p72-error-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--p72-ivory);
}

.p72-error__code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 14vw, 10rem);
    font-weight: 400;
    color: rgba(22, 26, 24, 0.08);
    line-height: 1;
    margin: 0 0 0.5rem;
    letter-spacing: -0.04em;
}

.p72-error__h1 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.65rem;
}

.p72-error__p {
    color: var(--p72-muted);
    font-size: 1rem;
    margin: 0 0 2rem;
    max-width: 38ch;
    line-height: 1.6;
}

/* ── Engage / Pricing hero ───────────────────────────────────────── */

.p72-engage-hero {
    background: var(--p72-ivory);
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(2.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--p72-border);
}

.p72-engage-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--p72-dark);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.p72-engage-hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--p72-muted);
    max-width: 58ch;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.p72-engage-section {
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
    background: var(--p72-ivory);
}

.p72-engage-section:nth-child(even) { background: var(--p72-canvas); }

.p72-engage-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.p72-engage-for-item {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.p72-engage-for-item h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.5rem;
}

.p72-engage-for-item p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.6;
}

.p72-engage-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2rem);
    margin-top: 2rem;
    counter-reset: engage-step;
}

.p72-engage-step {
    counter-increment: engage-step;
    position: relative;
    padding-left: 2.5rem;
}

.p72-engage-step::before {
    content: counter(engage-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p72-amber);
    line-height: 1.4;
}

.p72-engage-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.45rem;
}

.p72-engage-step p {
    font-size: 0.88rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.6;
}

.p72-engage-caps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.p72-engage-caps-group h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--p72-green);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.75rem;
}

.p72-engage-caps-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.p72-engage-caps-group li {
    font-size: 0.88rem;
    color: var(--text-charcoal);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--p72-border);
}

.p72-engage-caps-group li:last-child { border-bottom: none; }

.p72-engage-model {
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    border-left: 3px solid var(--p72-green);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 64ch;
}

.p72-engage-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.p72-engage-proof-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--p72-border);
    background: var(--p72-canvas);
}

.p72-engage-proof-item img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

.p72-engage-proof-meta {
    padding: 1rem 1.25rem;
}

.p72-engage-proof-meta h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.3rem;
}

.p72-engage-proof-meta h3 a {
    color: inherit;
    text-decoration: none;
}

.p72-engage-proof-meta h3 a:hover { color: var(--p72-green); }

.p72-engage-proof-meta p {
    font-size: 0.83rem;
    color: var(--p72-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Responsive for inner pages ──────────────────────────────────── */

@media (max-width: 1024px) {
    .p72-svc-chapter__grid { grid-template-columns: 1fr; }
    .p72-wp-hero__split { grid-template-columns: 1fr; }
    .p72-catalog-card { grid-template-columns: 1fr; }
    .p72-catalog-card--rev { direction: ltr; }
    .p72-plugin-show__layout { grid-template-columns: 1fr; }
    .p72-plugin-show__specs { position: static; }
    .p72-contact__layout { grid-template-columns: 1fr; }
    .p72-contact__aside { position: static; }
}

@media (max-width: 768px) {
    .p72-case__cols { grid-template-columns: 1fr; gap: 1.5rem; }
    .p72-case__secondary { grid-template-columns: 1fr; }
    .p72-catalog-card { gap: 1.5rem; }
    .p72-engage-caps-grid { grid-template-columns: 1fr 1fr; }
    .p72-engage-for-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
    .p72-pdp__plans-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .p72-pdp__plans-grid { grid-template-columns: 1fr; }
    .p72-pdp__plans-grid--four { grid-template-columns: 1fr; }
    .p72-wp-plugins__grid { grid-template-columns: 1fr; }
    .p72-pricing-plan-grid { grid-template-columns: 1fr 1fr; }
    .p72-svc-steps__grid { grid-template-columns: 1fr 1fr; }
    .p72-engage-steps { grid-template-columns: 1fr 1fr; }
    .p72-engage-caps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .p72-pricing-plan-grid { grid-template-columns: 1fr; }
    .p72-svc-steps__grid { grid-template-columns: 1fr; }
    .p72-engage-steps { grid-template-columns: 1fr; }
}

/* ── Utility helpers ─────────────────────────────────────────────── */

.p72-mt-sm  { margin-top: 1.25rem; }
.p72-mt-md  { margin-top: 1.5rem; }
.p72-mt-lg  { margin-top: 1.75rem; }

.p72-body--wide { max-width: 68ch; }
.p72-body--narrow { max-width: 480px; }

.p72-frame-caption {
    font-size: 0.78rem;
    color: var(--p72-muted);
    margin-top: 0.6rem;
}

.p72-link-accent {
    color: var(--p72-green);
    font-weight: 600;
    text-decoration: none;
}

.p72-link-accent:hover { text-decoration: underline; }

.p72-svc-chapter:last-of-type { border-bottom: none; }

.p72-section--canvas-bg { background: var(--p72-canvas); }

.p72-body--spaced { max-width: 68ch; margin-bottom: 2rem; }
.p72-mb-sm  { margin-bottom: 1rem; }
.p72-mb-xs  { margin-bottom: 0.25rem; }
.p72-mt-md-inline { display: inline-block; margin-top: 1.5rem; }
.p72-eyebrow--tight { margin-bottom: 0.2rem; }

.p72-cat-filter-wrap { padding-top: 1.5rem; padding-bottom: 0.5rem; }
.p72-empty-state-wrap { padding: 4rem 0; }
.p72-pricing-divider { padding: 2.5rem 0 1rem; border-top: 1px solid var(--p72-border); }
.p72-cat-header { margin-bottom: 1.25rem; }

/* Skip navigation link — hidden until focused */
.skip-link {
    position: absolute;
    top: -999px;
    left: 1rem;
    z-index: 9999;
    padding: 0.55rem 1.25rem;
    background: var(--p72-dark);
    color: var(--p72-ivory);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
    top: 0;
}

/* Amber badge modifier for warning/pending states */
.p72-badge--amber {
    color: var(--p72-amber);
    background: rgba(197, 139, 58, 0.1);
    border-color: rgba(197, 139, 58, 0.25);
}

/* ==========================================================================
   VISUAL IMAGERY UPGRADE SYSTEM
   ========================================================================== */

.p72-page-hero--visual {
    padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
}

.p72-page-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.p72-page-hero__text {
    min-width: 0;
}

.p72-page-hero__media {
    min-width: 0;
    position: relative;
}

.p72-hero-visual-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--p72-border);
    background: var(--p72-dark);
    box-shadow: 0 12px 32px -4px rgba(22, 26, 24, 0.12), 0 4px 12px -2px rgba(22, 26, 24, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p72-hero-visual-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -6px rgba(22, 26, 24, 0.18), 0 6px 16px -2px rgba(22, 26, 24, 0.08);
}

.p72-hero-visual-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.p72-engage-hero--visual {
    padding: clamp(2.5rem, 4.5vw, 4rem) 0;
}

.p72-engage-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.p72-engage-hero__text {
    min-width: 0;
}

.p72-engage-hero__media {
    min-width: 0;
    position: relative;
}

.p72-contact__header--visual {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.5rem;
}

.p72-contact__header-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}

.p72-contact__text {
    min-width: 0;
}

.p72-contact__media {
    min-width: 0;
    position: relative;
}

.p72-svc-visual-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--p72-border);
    background: var(--p72-dark);
    box-shadow: 0 8px 24px -4px rgba(22, 26, 24, 0.1);
    margin-top: 1.25rem;
}

.p72-svc-visual-frame--dark {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
}

.p72-svc-visual-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

@media (max-width: 860px) {
    .p72-page-hero__grid,
    .p72-engage-hero__grid,
    .p72-contact__header-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .p72-page-hero__media,
    .p72-engage-hero__media,
    .p72-contact__media {
        max-width: 580px;
    }
}


/* =============================================================
   FREE TOOLS PLATFORM — Phase A foundation styles
   All classes are additive; nothing below overrides existing rules.
   ============================================================= */

/* --- Tools index grid --- */
.p72-tools-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.p72-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

/* --- Tool card (index page) --- */
.p72-tool-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: var(--p72-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.p72-tool-card:hover {
    border-color: var(--p72-accent);
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.07);
    text-decoration: none;
}

.p72-tool-card__cat {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p72-accent);
    margin-bottom: 0.5rem;
    display: block;
}

.p72-tool-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--p72-text);
    line-height: 1.3;
}

.p72-tool-card__desc {
    font-size: 0.875rem;
    color: var(--p72-muted);
    line-height: 1.55;
    flex: 1;
    margin: 0 0 1rem;
}

.p72-tool-card__cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--p72-accent);
    margin-top: auto;
}

/* --- Tool show page --- */
.p72-tool-interface-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--p72-canvas);
    border-top: 1px solid var(--p72-border);
    border-bottom: 1px solid var(--p72-border);
}

.p72-tool-interface {
    min-height: 4rem;
    border-radius: var(--radius);
    background: var(--p72-surface);
    border: 1px solid var(--p72-border);
    padding: 1.5rem;
}

.p72-tool-privacy {
    font-size: 0.8rem;
    color: var(--p72-muted);
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    background: var(--p72-canvas);
    border-left: 3px solid var(--p72-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Tool FAQ section --- */
.p72-tool-faq-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.p72-tool-faq {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.p72-tool-faq__item {
    border: 1px solid var(--p72-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    background: var(--p72-surface);
}

.p72-tool-faq__q {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--p72-text);
    margin-bottom: 0.5rem;
}

.p72-tool-faq__a {
    font-size: 0.875rem;
    color: var(--p72-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .p72-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   FREE TOOLS PLATFORM — Phase B Interactive Component Styles
   ============================================================= */

.tool-ui {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.tool-grid {
    display: grid;
    gap: 1.25rem;
}

.tool-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.tool-grid--split {
    grid-template-columns: 1fr 1fr;
}

.tool-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .tool-grid--2col,
    .tool-grid--split,
    .tool-grid--3col {
        grid-template-columns: 1fr;
    }
}

.tool-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--p72-text, #161A19);
}

.tool-label__meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--p72-muted, #555E5A);
}

.tool-input,
.tool-textarea,
.tool-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--p72-text, #161A19);
    background: #FFFFFF;
    border: 1px solid var(--p72-border, #E4E0D8);
    border-radius: var(--radius-sm, 6px);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus {
    outline: none;
    border-color: var(--accent, #1B4332);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.15);
}

.tool-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.tool-textarea--mono,
.tool-input--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    tab-size: 2;
}

.tool-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.15rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
}

.tool-btn--primary {
    background: var(--accent, #1B4332);
    color: #FFFFFF;
    border-color: var(--accent, #1B4332);
}

.tool-btn--primary:hover {
    background: #143527;
    border-color: #143527;
}

.tool-btn--secondary {
    background: #FFFFFF;
    color: var(--p72-text, #161A19);
    border-color: var(--p72-border, #E4E0D8);
}

.tool-btn--secondary:hover {
    background: var(--p72-canvas, #F7F5F0);
    border-color: var(--p72-text, #161A19);
}

.tool-btn--ghost {
    background: transparent;
    color: var(--p72-muted, #555E5A);
    border-color: transparent;
}

.tool-btn--ghost:hover {
    background: rgba(22, 26, 24, 0.05);
    color: var(--p72-text, #161A19);
}

.tool-btn--sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* --- Segmented Controls --- */
.tool-seg {
    display: inline-flex;
    background: var(--p72-canvas, #F7F5F0);
    border: 1px solid var(--p72-border, #E4E0D8);
    border-radius: var(--radius-sm, 6px);
    padding: 0.2rem;
    gap: 0.2rem;
}

.tool-seg__btn {
    border: none;
    background: transparent;
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--p72-muted, #555E5A);
    border-radius: calc(var(--radius-sm, 6px) - 2px);
    cursor: pointer;
    transition: all 0.15s;
}

.tool-seg__btn:hover {
    color: var(--p72-text, #161A19);
}

.tool-seg__btn--active {
    background: #FFFFFF;
    color: var(--p72-text, #161A19);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --- Checkboxes & Radios --- */
.tool-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tool-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--p72-text, #161A19);
    cursor: pointer;
    user-select: none;
}

.tool-checkbox input[type="checkbox"],
.tool-checkbox input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent, #1B4332);
    cursor: pointer;
}

/* --- Status Messages --- */
.tool-status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.875rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tool-status--success {
    background: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #C8E6C9;
}

.tool-status--error {
    background: #FFEBEE;
    color: #B71C1C;
    border: 1px solid #FFCDD2;
}

.tool-status--info {
    background: #E3F2FD;
    color: #0D47A1;
    border: 1px solid #BBDEFB;
}

/* --- Output Display Card --- */
.tool-output {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--p72-border, #E4E0D8);
    border-radius: var(--radius-sm, 6px);
    background: #FFFFFF;
    overflow: hidden;
}

.tool-output__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--p72-canvas, #F7F5F0);
    border-bottom: 1px solid var(--p72-border, #E4E0D8);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--p72-muted, #555E5A);
}

.tool-output__body {
    padding: 1rem;
}

/* --- Stats Grid (Word counter, metrics) --- */
.tool-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.tool-stat-card {
    background: #FFFFFF;
    border: 1px solid var(--p72-border, #E4E0D8);
    border-radius: var(--radius-sm, 6px);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tool-stat-card__val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent, #1B4332);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tool-stat-card__lbl {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p72-muted, #555E5A);
}

/* --- Key-Value Breakdown Table --- */
.tool-breakdown {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tool-breakdown tr {
    border-bottom: 1px solid var(--p72-border, #E4E0D8);
}

.tool-breakdown tr:last-child {
    border-bottom: none;
}

.tool-breakdown td {
    padding: 0.65rem 0.75rem;
}

.tool-breakdown td:first-child {
    color: var(--p72-muted, #555E5A);
    font-weight: 500;
    width: 40%;
}

.tool-breakdown td:last-child {
    color: var(--p72-text, #161A19);
    font-weight: 600;
    text-align: right;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.tool-breakdown tr.tool-breakdown__total {
    font-size: 1.05rem;
    background: var(--p72-canvas, #F7F5F0);
}

.tool-breakdown tr.tool-breakdown__total td {
    font-weight: 700;
    color: var(--accent, #1B4332);
}

/* --- Color Converter Widgets --- */
.tool-color-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--p72-border, #E4E0D8);
    border-radius: var(--radius-sm, 6px);
    background: #FFFFFF;
}

.tool-color-swatch {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.tool-swatches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tool-swatch-chip {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    padding: 0;
}

.tool-swatch-chip:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- Password Strength Meter --- */
.tool-strength {
    height: 6px;
    border-radius: 3px;
    background: #E0E0E0;
    overflow: hidden;
    margin-top: 0.5rem;
}

.tool-strength__bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.tool-strength--weak { width: 25%; background: #E53935; }
.tool-strength--fair { width: 50%; background: #FB8C00; }
.tool-strength--good { width: 75%; background: #43A047; }
.tool-strength--strong { width: 100%; background: #1B5E20; }

/* ==========================================================================
   Phase 84 — CSP-safe tool state classes
   Replaces all element.style.x = y inline style assignments in tool JS files.
   ========================================================================== */

/* Off-screen clipboard helper textarea (replaces position/opacity inline styles) */
.tool-clipboard-helper {
    position: fixed;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Output textarea inside .tool-output card — card provides the outer border */
.tool-textarea--borderless {
    border: none;
    border-radius: 0;
}

/* Hash output textarea needs extra height for long digest strings */
.tool-textarea--hash-out {
    border: none;
    border-radius: 0;
    min-height: 70px;
}

/* Select that should fit its content rather than stretch full width */
.tool-select--auto { width: auto; }

/* Flex margin utilities */
.tool-ml-auto { margin-left: auto; }
.tool-ml-sm   { margin-left: 0.5rem; }

/* Visibility toggle (replaces display:none / display:'' inline style) */
.is-hidden { display: none; }

/* Flex column stacks */
.tool-col-inputs { display: flex; flex-direction: column; gap: 1.25rem; }
.tool-col-body   { display: flex; flex-direction: column; gap: 1rem; }
.tool-col-sm     { display: flex; flex-direction: column; gap: 0.75rem; }

/* Flex row groups */
.tool-row-center  { display: flex; align-items: center; gap: 1rem; }
.tool-row-tight   { display: flex; align-items: center; gap: 0.5rem; }
.tool-rate-group  { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-custom-rate { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Range slider fills its flex container row */
.tool-slider--flex { flex: 1; }

/* Fixed-width number inputs */
.tool-input--w75  { width: 75px; }
.tool-input--w100 { width: 100px; }

/* Styled output / result inputs */
.tool-input--password {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.tool-input--amount {
    font-size: 1.25rem;
    font-weight: 600;
}
.tool-input--accent {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent, #1B4332);
}

/* Timestamp live bar — warm canvas-toned background */
.tool-output--canvas-bg {
    background: var(--p72-canvas, #F7F5F0);
}

/* Timestamp live ticker body layout */
.tool-live-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Timestamp live value — large monospace ticker */
.tool-timestamp-val {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent, #1B4332);
    font-family: ui-monospace, monospace;
}

/* Timestamp muted UTC date string */
.tool-timestamp-date {
    font-size: 0.875rem;
    color: var(--p72-muted, #555E5A);
}

/* Monospace for breakdown table value cells */
.tool-breakdown td:last-child {
    font-family: ui-monospace, monospace;
}

/* Color converter — picker wrapper, title, row, and native input */
.tool-picker-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.tool-picker-title {
    font-weight: 600;
    font-size: 1rem;
}
.tool-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tool-color-picker-input {
    width: 44px;
    height: 36px;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* Preset swatch chip colors via data-color attribute (9 finite palette values) */
.tool-swatch-chip[data-color="#1B4332"] { background-color: #1B4332; }
.tool-swatch-chip[data-color="#F7F5F0"] { background-color: #F7F5F0; }
.tool-swatch-chip[data-color="#161A19"] { background-color: #161A19; }
.tool-swatch-chip[data-color="#C47024"] { background-color: #C47024; }
.tool-swatch-chip[data-color="#1E293B"] { background-color: #1E293B; }
.tool-swatch-chip[data-color="#10B981"] { background-color: #10B981; }
.tool-swatch-chip[data-color="#DC2626"] { background-color: #DC2626; }
.tool-swatch-chip[data-color="#FFFFFF"] { background-color: #FFFFFF; }
.tool-swatch-chip[data-color="#000000"] { background-color: #000000; }

/* ==========================================================================
   RIDEMANAGER PRODUCT PAGE  (rm-*)
   ========================================================================== */

/* Hero: app-icon variant */
.rm-hero__icon-wrap { display: flex; justify-content: center; align-items: center; }
.rm-hero__icon-wrap img {
    width: min(300px, 100%);
    height: auto;
    border-radius: 22%;
    box-shadow: 0 24px 64px -8px rgba(23, 107, 91, 0.35), 0 8px 24px -4px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rm-hero__icon-wrap img:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px -8px rgba(23, 107, 91, 0.45), 0 12px 32px -4px rgba(0, 0, 0, 0.18);
}
.rm-hero__tagline {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--text-charcoal);
    margin: 0.4rem 0 0.85rem;
    line-height: 1.4;
    text-wrap: balance;
}

/* Sections */
.rm-section { padding: clamp(3rem, 5vw, 5rem) 0; border-bottom: 1px solid var(--p72-border); }
.rm-section--alt { background: var(--p72-canvas); }
.rm-section:last-of-type { border-bottom: none; }

/* Offline comparison */
.rm-offline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.rm-offline-col { border-radius: var(--radius-lg); padding: 1.5rem; }
.rm-offline-col--yes { background: var(--accent-soft); border: 1px solid var(--accent-border); }
.rm-offline-col--no  { background: var(--bg-surface); border: 1px solid var(--p72-border); }
.rm-offline-col__head { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 1rem; }
.rm-offline-col--yes .rm-offline-col__head { color: var(--accent); }
.rm-offline-col--no  .rm-offline-col__head { color: var(--text-muted); }
.rm-offline-col ul { list-style: none; margin: 0; padding: 0; }
.rm-offline-col ul li { font-size: 0.9rem; color: var(--text-charcoal); padding: 0.4rem 0; border-bottom: 1px solid var(--line-subtle); line-height: 1.4; }
.rm-offline-col ul li:last-child { border-bottom: none; }

/* Feature cards */
.rm-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.rm-feature-card { background: var(--bg-surface); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.rm-feature-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--text); margin: 0 0 0.4rem; }
.rm-feature-card p { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* Evidence cards */
.rm-evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.rm-evidence-card { background: var(--bg-surface); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); }
.rm-evidence-card__num { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 800; margin: 0 auto 1rem; }
.rm-evidence-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--text); margin: 0 0 0.5rem; }
.rm-evidence-card p { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* Day Book ledger */
.rm-ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.rm-ledger-col { background: var(--bg-surface); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.rm-ledger-col__head { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 1rem; }
.rm-ledger-col--in  .rm-ledger-col__head { color: var(--accent); }
.rm-ledger-col--out .rm-ledger-col__head { color: #B45309; }
.rm-ledger-col ul { list-style: none; margin: 0; padding: 0; }
.rm-ledger-col ul li { font-size: 0.875rem; color: var(--text-muted); padding: 0.35rem 0; border-bottom: 1px solid var(--line-subtle); display: flex; align-items: baseline; gap: 0.5rem; }
.rm-ledger-col ul li::before { content: "\2022"; font-size: 0.65rem; flex-shrink: 0; line-height: 1.8; }
.rm-ledger-col--in  ul li::before { color: var(--accent); }
.rm-ledger-col--out ul li::before { color: #B45309; }
.rm-ledger-col ul li:last-child { border-bottom: none; }
.rm-ledger-summary { margin-top: 1.5rem; background: var(--bg-surface); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; font-size: 0.875rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.rm-ledger-summary strong { color: var(--text-charcoal); }

/* Booking workflow */
.rm-workflow { margin-top: 2.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.rm-workflow__steps { display: flex; gap: 0; min-width: max-content; align-items: flex-start; }
.rm-workflow__step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 96px; flex-shrink: 0; padding: 0 0.25rem; position: relative; }
.rm-workflow__step + .rm-workflow__step { padding-left: 1.25rem; }
.rm-workflow__step + .rm-workflow__step::before { content: "\2192"; position: absolute; left: 0.25rem; top: 0.7rem; color: var(--accent); font-size: 0.9rem; font-weight: 700; }
.rm-workflow__dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 800; margin-bottom: 0.6rem; flex-shrink: 0; }
.rm-workflow__label { font-size: 0.78rem; font-weight: 700; color: var(--text); line-height: 1.3; display: block; }
.rm-workflow__sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; display: block; line-height: 1.3; }

/* Tech specs table */
.rm-specs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.75rem; max-width: 100%; border-radius: var(--radius-lg); }
.rm-specs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border: 1px solid var(--p72-border); border-radius: var(--radius-lg); min-width: 480px; }
.rm-specs-table th { text-align: left; padding: 0.75rem 1.25rem; background: var(--p72-canvas); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--p72-border); white-space: nowrap; }
.rm-specs-table td { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--line-subtle); vertical-align: top; }
.rm-specs-table tr:last-child td { border-bottom: none; }
.rm-specs-table td:first-child { font-weight: 600; color: var(--text); font-family: var(--font-mono); font-size: 0.85rem; width: 32%; white-space: nowrap; }
.rm-specs-table td:last-child { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }

/* FAQ */
.rm-faq { margin-top: 2rem; }
.rm-faq details { border-bottom: 1px solid var(--p72-border); }
.rm-faq details:first-child { border-top: 1px solid var(--p72-border); }
.rm-faq summary { padding: 1.15rem 0; font-size: 1rem; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; user-select: none; -webkit-user-select: none; }
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--accent); font-weight: 300; flex-shrink: 0; transition: transform 0.2s ease; }
.rm-faq details[open] > summary::after { transform: rotate(45deg); }
.rm-faq details[open] > summary { color: var(--accent); }
.rm-faq__answer { padding: 0.25rem 0 1.25rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; }
.rm-faq__answer ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.rm-faq__answer ul li { margin-bottom: 0.3rem; }
.rm-faq__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Legal links */
.rm-legal { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.25rem; }
.rm-legal a { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rm-legal a:hover { color: var(--accent); }

/* Retention note */
.rm-retention-note { margin-top: 1.75rem; background: var(--p72-canvas); border: 1px solid var(--p72-border); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.rm-retention-note strong { color: var(--text-charcoal); }

/* Status pill */
.rm-status-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(23, 107, 91, 0.07); color: var(--accent); border: 1px solid rgba(23, 107, 91, 0.18); border-radius: var(--radius-full); padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 1.25rem; text-transform: uppercase; }
.rm-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Compliance grid */
.rm-compliance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.rm-compliance-col { background: var(--bg-surface); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.rm-compliance-col h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-subtle); }
.rm-compliance-col ul { list-style: none; margin: 0; padding: 0; }
.rm-compliance-col ul li { font-size: 0.875rem; color: var(--text-muted); padding: 0.35rem 0; border-bottom: 1px solid var(--line-subtle); }
.rm-compliance-col ul li:last-child { border-bottom: none; }

.rm-offline-col__note { font-size: 0.8rem; margin-top: 1rem; color: var(--text-muted); line-height: 1.5; }
.rm-retention-note--legal { margin-top: 1.5rem; }

/* ==========================================================================
   RIDEMANAGER LEGAL PAGES  (rl-*)
   ========================================================================== */
.rl-page { max-width: 56rem; padding: 3rem 0 5rem; }
.rl-breadcrumb { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 2rem; flex-wrap: wrap; }
.rl-breadcrumb a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.rl-breadcrumb a:hover { color: var(--accent); }
.rl-breadcrumb__sep { opacity: 0.4; }
.rl-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--p72-border); }
.rl-header__badge { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(23,107,91,0.07); border: 1px solid rgba(23,107,91,0.18); border-radius: var(--radius-full); padding: 0.3rem 0.8rem; margin-bottom: 0.85rem; }
.rl-header__title { font-size: clamp(1.85rem, 4vw, 2.5rem); font-weight: 800; color: var(--text); margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.rl-header__meta { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.rl-prose { line-height: 1.75; color: var(--text-muted); font-size: 1rem; }
.rl-prose section { margin-bottom: 2.5rem; }
.rl-prose h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 0.85rem; }
.rl-prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.25rem 0 0.5rem; }
.rl-prose p { margin: 0 0 0.85rem; }
.rl-prose p:last-child { margin-bottom: 0; }
.rl-prose ul, .rl-prose ol { padding-left: 1.4rem; margin: 0.5rem 0 0.85rem; }
.rl-prose li { margin-bottom: 0.45rem; }
.rl-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rl-prose strong { color: var(--text-charcoal); font-weight: 600; }
.rl-prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0; }
.rl-prose table th, .rl-prose table td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--p72-border); vertical-align: top; }
.rl-prose table th { font-weight: 700; color: var(--text); background: var(--p72-canvas); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rl-notice { background: rgba(23,107,91,0.06); border: 1px solid rgba(23,107,91,0.18); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-top: 2rem; }
.rl-notice p { margin: 0; font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; }
.rl-notice strong { color: var(--text-charcoal); }
.rl-deletion-steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: step; }
.rl-deletion-steps li { counter-increment: step; display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--p72-border); font-size: 0.95rem; color: var(--text-muted); }
.rl-deletion-steps li:last-child { border-bottom: none; }
.rl-deletion-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 800; flex-shrink: 0; margin-top: 0.05rem; }
.rl-cta-box { background: var(--p72-canvas); border: 1px solid var(--p72-border); border-radius: var(--radius-lg); padding: 2rem; margin-top: 2.5rem; text-align: center; }
.rl-cta-box p { margin: 0 0 1.25rem; font-size: 1rem; color: var(--text-muted); }
.rl-cta-box a { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: #fff; border-radius: var(--radius); padding: 0.7rem 1.5rem; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: opacity 0.15s; }
.rl-cta-box a:hover { opacity: 0.88; }

/* Responsive */
@media (max-width: 860px) {
    .rm-offline-grid,
    .rm-ledger-grid,
    .rm-compliance-grid,
    .rm-evidence-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .rm-features-grid { grid-template-columns: 1fr; }
    .rm-hero__tagline { font-size: 1rem; }
}

/* ==========================================================================
   HRIDYAA AI SEARCH READINESS OPTIMIZER (hridyaa-*)
   ========================================================================== */
.hridyaa-section {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-bottom: 1px solid var(--p72-border);
}
.hridyaa-section--alt {
    background: var(--p72-canvas);
}

/* Product Walkthrough Video Section */
.hridyaa-video-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 1.5rem;
}
.hridyaa-video-header .p72-h2 {
    margin-bottom: 0.75rem;
}
.hridyaa-video-header .p72-lead {
    margin-bottom: 0;
}
.hridyaa-video-wrapper {
    max-width: 920px;
    margin: 1.75rem auto 1.5rem;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--p72-border, #e5e7eb);
    background: #000;
}
.hridyaa-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.hridyaa-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.hridyaa-video-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--text-muted, #64748b);
    font-size: 0.95rem;
    margin: 0 auto 1.5rem;
    text-align: center;
    line-height: 1.5;
}
.hridyaa-video-meta__sep {
    color: var(--p72-border, #cbd5e1);
}
.hridyaa-video-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
@media (max-width: 640px) {
    .hridyaa-video-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hridyaa-video-actions .button {
        text-align: center;
        justify-content: center;
    }
}

/* Snapshot stats grid */
.hridyaa-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.hridyaa-stat-number {
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-stat-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-stat-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Hero Split Pricing Grid */
.hridyaa-hero-pricing {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 0.85rem;
    margin: 1.5rem 0 1rem;
    max-width: 580px;
}
.hridyaa-hero-plan {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--p72-border, #e5e7eb);
    border-radius: var(--radius-lg, 10px);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}
.hridyaa-hero-plan:hover {
    border-color: var(--line-bright, #cbd5e1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.hridyaa-hero-plan--featured {
    border: 2px solid var(--accent, #176b5b);
    background: rgba(23, 107, 91, 0.025);
    box-shadow: 0 4px 16px rgba(23, 107, 91, 0.08);
}
.hridyaa-hero-plan--featured:hover {
    border-color: var(--accent-hover, #125246);
    box-shadow: 0 6px 20px rgba(23, 107, 91, 0.12);
}
.hridyaa-hero-plan__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.hridyaa-hero-plan__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
}
.hridyaa-hero-plan--featured .hridyaa-hero-plan__title {
    color: var(--accent, #176b5b);
}
.hridyaa-hero-plan__badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--accent, #176b5b);
    border-radius: var(--radius-full, 9999px);
    padding: 0.15rem 0.5rem;
    line-height: 1.3;
}
.hridyaa-hero-plan__price-box {
    margin-bottom: 0.85rem;
}
.hridyaa-hero-plan__rate {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    line-height: 1.15;
}
.hridyaa-hero-plan__amount {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 800;
    color: var(--text, #0f172a);
    letter-spacing: -0.02em;
}
.hridyaa-hero-plan__period {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.hridyaa-hero-plan__subtext {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.25rem;
    line-height: 1.3;
}
.hridyaa-hero-plan__subtext--featured {
    color: var(--accent, #176b5b);
    font-weight: 600;
}
.hridyaa-hero-plan__cta-wrap {
    margin-top: auto;
}
.hridyaa-hero-plan__btn {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.hridyaa-hero-secondary-actions {
    margin-top: 0.75rem;
    gap: 0.65rem;
}
.hridyaa-hero-secondary-actions .button {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
}
@media (max-width: 600px) {
    .hridyaa-hero-pricing {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* Hero micro pills */
.hridyaa-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin-top: 1.25rem;
    min-width: 0;
    max-width: 100%;
}
.hridyaa-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(23, 107, 91, 0.07);
    border: 1px solid rgba(23, 107, 91, 0.18);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.75rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Formula mathematical pill */
.hridyaa-formula-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(23, 107, 91, 0.08);
    border: 1px solid rgba(23, 107, 91, 0.2);
    border-radius: var(--radius-full);
    padding: 0.35rem 0.95rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Split showcase layout (breaks card grid monotony) */
.hridyaa-split-showcase {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-split-editorial {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    max-width: 100%;
}
.hridyaa-split-item {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-item__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-item__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-matrix {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-matrix__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--p72-border);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-matrix__list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.hridyaa-split-matrix__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-subtle);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-matrix__list li > * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-split-matrix__list li:last-child {
    border-bottom: none;
}
.hridyaa-split-matrix__check {
    color: var(--accent);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Visual Score Meter Bar */
.hridyaa-score-bar {
    display: grid;
    grid-template-columns: 49fr 30fr 15fr 6fr;
    gap: 4px;
    height: 10px;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    min-width: 0;
    max-width: 100%;
}
.hridyaa-score-bar__segment {
    height: 100%;
    border-radius: 2px;
    min-width: 0;
}
.hridyaa-score-bar__segment--red { background: #dc2626; }
.hridyaa-score-bar__segment--amber { background: #d97706; }
.hridyaa-score-bar__segment--blue { background: #0284c7; }
.hridyaa-score-bar__segment--green { background: #16a34a; }

/* Benefit / Value cards */
.hridyaa-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-value-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-value-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-value-card__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 4-Step Process */
.hridyaa-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-process-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-process-badge {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(23, 107, 91, 0.3);
    flex-shrink: 0;
}
.hridyaa-process-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-process-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 5 Pillars Framework */
.hridyaa-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-pillar-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    min-width: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hridyaa-pillar-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: rgba(23, 107, 91, 0.08);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-rules {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-question {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-pillar-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    min-width: 0;
}
.hridyaa-pillar-list li {
    margin-bottom: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 100-Point Score Bands */
.hridyaa-score-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-score-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-score-card--red { border-top: 4px solid #dc2626; }
.hridyaa-score-card--amber { border-top: 4px solid #d97706; }
.hridyaa-score-card--blue { border-top: 4px solid #0284c7; }
.hridyaa-score-card--green { border-top: 4px solid #16a34a; }

.hridyaa-score-range {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: inline-block;
    margin-bottom: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-score-card--red .hridyaa-score-range { color: #dc2626; }
.hridyaa-score-card--amber .hridyaa-score-range { color: #d97706; }
.hridyaa-score-card--blue .hridyaa-score-range { color: #0284c7; }
.hridyaa-score-card--green .hridyaa-score-range { color: #16a34a; }

.hridyaa-score-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-score-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-notice-box {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-notice-box strong {
    color: var(--text);
}

/* 10 Launch Fixers Grid */
.hridyaa-fixers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-fixer-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-fixer-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-fixer-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-fixer-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-fixer-desc code {
    background: var(--p72-canvas);
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-xs);
    font-size: 0.82rem;
    color: var(--text);
    font-family: var(--font-mono);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Optimization Ledger Timeline */
.hridyaa-ledger-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.hridyaa-ledger-node {
    text-align: center;
    flex: 1 1 120px;
    min-width: 100px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-ledger-node__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.2rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-ledger-node__sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-ledger-node--revert .hridyaa-ledger-node__title {
    color: #dc2626;
}
.hridyaa-ledger-arrow {
    font-size: 1.25rem;
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
}

/* Intelligence / Bot & Referral Matrix */
.hridyaa-intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-intel-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-intel-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--p72-border);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    min-width: 0;
    max-width: 100%;
}
.hridyaa-chip {
    background: var(--p72-canvas);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-chip--bot {
    font-family: var(--font-mono);
    font-size: 0.76rem;
}

/* Compatibility & SEO Grid */
.hridyaa-compat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-compat-card {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Before & After Diff */
.hridyaa-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    min-width: 0;
}
.hridyaa-diff-card {
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-diff-card--before {
    background: #fff8f8;
    border: 2px solid #f87171;
}
.hridyaa-diff-card--after {
    background: #f6fbf7;
    border: 2px solid #4ade80;
}
.hridyaa-diff-badge {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    display: inline-block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-diff-card--before .hridyaa-diff-badge {
    background: #fee2e2;
    color: #dc2626;
}
.hridyaa-diff-card--after .hridyaa-diff-badge {
    background: #dcfce7;
    color: #16a34a;
}
.hridyaa-diff-score {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0.6rem 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-diff-card--before .hridyaa-diff-score { color: #dc2626; }
.hridyaa-diff-card--after .hridyaa-diff-score { color: #16a34a; }
.hridyaa-diff-score-denom {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-muted);
}
.hridyaa-diff-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.6;
    min-width: 0;
}
.hridyaa-diff-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-diff-list li:last-child {
    border-bottom: none;
}
.hridyaa-diff-note {
    text-align: center;
    margin-top: 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-faq-list {
    margin-top: 1.5rem;
    min-width: 0;
}

/* Strategic CTA banner */
.hridyaa-cta-banner {
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
    margin-top: 2rem;
    box-shadow: var(--shadow-md);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-cta-banner__title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-cta-banner__lede {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hridyaa-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    min-width: 0;
    max-width: 100%;
}
.hridyaa-meta-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    min-width: 0;
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hridyaa-snapshot-grid { grid-template-columns: repeat(2, 1fr); }
    .hridyaa-score-grid { grid-template-columns: repeat(2, 1fr); }
    .hridyaa-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .hridyaa-split-showcase { grid-template-columns: 1fr; }
    .hridyaa-intel-grid,
    .hridyaa-diff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hridyaa-ledger-flow { flex-direction: column; align-items: stretch; }
    .hridyaa-ledger-arrow { transform: rotate(90deg); margin: 0.25rem 0; }
}
@media (max-width: 640px) {
    .hridyaa-snapshot-grid,
    .hridyaa-score-grid,
    .hridyaa-process-grid { grid-template-columns: 1fr; }
    .hridyaa-cta-actions { flex-direction: column; }
    .hridyaa-cta-actions .button { width: 100%; text-align: center; }
}

/* ==========================================================================
   WORDPRESS PLUGIN SHOW PAGE (p72-plugin-show)
   ========================================================================== */
.p72-plugin-show__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-width: 0;
}
.p72-plugin-show__body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-top: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.p72-plugin-show__specs {
    background: var(--bg-surface);
    border: 1px solid var(--p72-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    align-self: start;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.p72-plugin-show__specs-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--p72-border);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.p72-plugin-show__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line-subtle);
    font-size: 0.875rem;
    min-width: 0;
    gap: 0.5rem;
}
.p72-plugin-show__spec-row:last-of-type {
    border-bottom: none;
}
.p72-plugin-show__spec-label {
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 0;
}
.p72-plugin-show__spec-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.p72-plugin-show__spec-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    min-width: 0;
    max-width: 100%;
}
.p72-plugin-show__features {
    padding: 3rem 0;
    min-width: 0;
}
.p72-plugin-show__feature-list {
    margin: 1.25rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    min-width: 0;
}
.p72-plugin-show__feature-list li {
    margin-bottom: 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.p72-svc-related-card .p72-plugin-show__feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    min-width: 0;
}
.p72-svc-related-card .p72-plugin-show__feature-list li {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0;
}
.p72-plugin-show__install {
    padding: 3rem 0;
    background: var(--p72-canvas);
    min-width: 0;
}
.p72-plugin-show__steps {
    margin: 1.5rem 0 2rem 1.25rem;
    padding: 0;
    line-height: 1.7;
    color: var(--text);
    font-size: 0.95rem;
    min-width: 0;
}
.p72-plugin-show__steps li {
    margin-bottom: 0.65rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 900px) {
    .p72-plugin-show__layout {
        grid-template-columns: 1fr;
    }
}

/* ── Products Studio Redesign (.p72-studio-*) ───────────────────── */

.p72-studio {
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* Hero Section */
.p72-studio-hero {
    padding: clamp(3rem, 5vw, 4.75rem) 0 clamp(2.5rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.p72-studio-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: center;
}

.p72-studio-hero__text {
    max-width: 38rem;
}

.p72-studio-hero__eyebrow {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: block;
}

.p72-studio-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 3.85rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 1.25rem;
}

.p72-studio-hero__sub {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 52ch;
}

.p72-studio-hero__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 25px 55px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05);
    background: #0B110E;
    aspect-ratio: 16 / 9;
}

.p72-studio-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Category Filter Bar */
.p72-studio-filter-wrap {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line-subtle);
    background: var(--bg);
}

/* Section Containers */
.p72-studio-section {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    border-bottom: 1px solid var(--line);
}

.p72-studio-section--alt {
    background: var(--bg-surface);
}

.p72-studio-section--subtle {
    background: var(--bg-alt);
}

.p72-studio-section-header {
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.p72-studio-section-header__eyebrow {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    display: block;
    margin-bottom: 0.5rem;
}

.p72-studio-section-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.5vw, 2.85rem);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.15;
}

.p72-studio-section-header__desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 62ch;
    line-height: 1.6;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Tier 1: Flagship Systems (Editorial Story Spreads)
   ───────────────────────────────────────────────────────────────── */
.p72-studio-featured {
    display: flex;
    flex-direction: column;
}

/* 1. Lead Feature: Hridyaa Grand Anchor Spread */
.p72-studio-lead-card {
    padding-bottom: clamp(3.5rem, 5vw, 5rem);
    margin-bottom: clamp(3.5rem, 5vw, 5rem);
    border-bottom: 1px solid var(--line);
}

.p72-studio-lead-header {
    margin-bottom: 1.5rem;
}

.p72-studio-lead-eyebrow {
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    display: block;
    margin-bottom: 0.6rem;
}

.p72-studio-lead-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.3rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.p72-studio-lead-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.p72-studio-lead-title a:hover {
    color: var(--accent);
}

.p72-studio-lead-positioning {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 600;
    color: var(--text-charcoal);
    line-height: 1.4;
    margin-bottom: 0.85rem;
}

.p72-studio-lead-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 72ch;
    margin: 0;
}

.p72-studio-lead-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0D1110;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.18);
    margin: 2rem 0 2.25rem;
}

.p72-studio-lead-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.p72-studio-lead-media:hover img {
    transform: scale(1.012);
}

/* 4-column capability strip */
.p72-studio-lead-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--line-subtle);
    border-bottom: 1px solid var(--line-subtle);
    margin-bottom: 2rem;
}

.p72-studio-lead-spec {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.p72-studio-lead-spec__code {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.p72-studio-lead-spec__val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.p72-studio-lead-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.p72-studio-lead-meta {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 2. Asymmetric Companion Platforms (AssuredGains, AssetBulls, WildHawk) */
.p72-studio-story-card {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--line-subtle);
}

.p72-studio-story-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.p72-studio-story-card--rev {
    grid-template-columns: 1fr 1.25fr;
}

.p72-studio-story-card__eyebrow {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    display: block;
    margin-bottom: 0.5rem;
}

.p72-studio-story-card__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.6rem;
}

.p72-studio-story-card__title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.p72-studio-story-card__title a:hover {
    color: var(--accent);
}

.p72-studio-story-card__positioning {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-charcoal);
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

.p72-studio-story-card__desc {
    font-size: 0.96rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.p72-studio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
}

.p72-studio-tag {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-alt);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-xs);
    padding: 0.25rem 0.65rem;
}

.p72-studio-story-card__media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0D1110;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.12);
}

.p72-studio-story-card__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.p72-studio-story-card__media:hover img {
    transform: scale(1.015);
}

/* ─────────────────────────────────────────────────────────────────
   Tier 2: Software & Products (Editorial Index Directory)
   ───────────────────────────────────────────────────────────────── */
.p72-studio-index-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.p72-studio-index-row {
    display: grid;
    grid-template-columns: 44px 110px 1fr auto auto;
    gap: 1.75rem;
    align-items: center;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line-subtle);
    transition: background 0.15s ease;
}

.p72-studio-index-row__num {
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dim);
}

.p72-studio-index-row__thumb {
    width: 110px;
    height: 62px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0D1110;
    flex-shrink: 0;
}

.p72-studio-index-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p72-studio-index-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.p72-studio-index-row__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.p72-studio-index-row__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.p72-studio-index-row__title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.p72-studio-index-row__title a:hover {
    color: var(--accent);
}

.p72-studio-index-row__badge {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-xs);
    background: var(--bg-alt);
    color: var(--text-muted);
    border: 1px solid var(--line-subtle);
}

.p72-studio-index-row__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 68ch;
}

.p72-studio-index-row__price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 110px;
    text-align: right;
}

.p72-studio-index-row__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.p72-studio-index-row__cycle {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   Tier 3: Digital Infrastructure (Engineering Specification Panels)
   ───────────────────────────────────────────────────────────────── */
.p72-studio-infra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.p72-studio-infra-panel {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: clamp(2rem, 3vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p72-studio-infra-panel:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.p72-studio-infra-panel__eyebrow {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: block;
}

.p72-studio-infra-panel__title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.p72-studio-infra-panel__title a {
    color: inherit;
    text-decoration: none;
}

.p72-studio-infra-panel__positioning {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-charcoal);
    margin-bottom: 0.75rem;
}

.p72-studio-infra-panel__desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.p72-studio-infra-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.p72-studio-infra-specs li {
    font-size: 0.9rem;
    color: var(--text-charcoal);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.p72-studio-infra-specs li span {
    color: var(--accent);
    font-weight: 700;
}

.p72-studio-infra-panel__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-subtle);
}

.p72-studio-infra-panel__price-val {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.p72-studio-infra-panel__price-cycle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

/* ─────────────────────────────────────────────────────────────────
   Tier 4: Open Source & Community Tools (Quiet Minimalist Row)
   ───────────────────────────────────────────────────────────────── */
.p72-studio-os-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.p72-studio-os-card {
    background: #F8F7F2;
    border: 1px solid #E8E6DF;
    border-radius: var(--radius-sm);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease;
}

.p72-studio-os-card:hover {
    border-color: var(--accent);
}

.p72-studio-os-card__eyebrow {
    font-family: monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: block;
    margin-bottom: 0.5rem;
}

.p72-studio-os-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.p72-studio-os-card__title a {
    color: var(--text);
    text-decoration: none;
}

.p72-studio-os-card__title a:hover {
    color: var(--accent);
}

.p72-studio-os-card__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.p72-studio-os-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #E5E3DC;
    margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────────
   Tier 5 / CTA: Tailored Systems Band
   ───────────────────────────────────────────────────────────────── */
.p72-studio-cta {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: #0B110E;
    color: #FFFFFF;
}

.p72-studio-cta__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.p72-studio-cta__content {
    max-width: 44rem;
}

.p72-studio-cta__eyebrow {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #5EEAD4;
    display: block;
    margin-bottom: 0.75rem;
}

.p72-studio-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 400;
    line-height: 1.15;
    color: #FAFAF9;
    margin: 0 0 1rem;
}

.p72-studio-cta__desc {
    font-size: 1.1rem;
    color: #A1A1AA;
    line-height: 1.6;
    margin: 0;
}

.p72-studio-cta__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.p72-studio-cta__btn-primary {
    background: #5EEAD4;
    color: #0D1210;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s ease;
}

.p72-studio-cta__btn-primary:hover {
    background: #2DD4BF;
    color: #0D1210;
}

.p72-studio-cta__btn-secondary {
    color: #D4D4D8;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.p72-studio-cta__btn-secondary:hover {
    color: #FFFFFF;
}

/* Category Filtered Header */
.p72-studio-filtered-header {
    padding: 2.5rem 0 1rem;
}

/* ─────────────────────────────────────────────────────────────────
   Responsive Media Queries
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .p72-studio-hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .p72-studio-lead-specs {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .p72-studio-story-card,
    .p72-studio-story-card--rev {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .p72-studio-story-card__media {
        order: -1;
    }
    .p72-studio-story-card__content {
        order: 1;
    }
    .p72-studio-index-row {
        grid-template-columns: 36px 90px 1fr auto;
        gap: 1.25rem;
    }
    .p72-studio-infra-grid {
        grid-template-columns: 1fr;
    }
    .p72-studio-os-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .p72-studio-hero {
        padding: 2rem 0;
    }
    .p72-studio-lead-specs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .p72-studio-cta__box {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    .p72-studio-index-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 1.5rem 0;
    }
    .p72-studio-index-row__num {
        display: none;
    }
    .p72-studio-index-row__thumb {
        width: 100%;
        height: 160px;
    }
    .p72-studio-index-row__price-col {
        align-items: flex-start;
        text-align: left;
    }
}


/* ==========================================================================
   PRICING & ENGAGEMENTS REDESIGN (p72-pricing-*)
   Founder-led Product Studio Editorial Commercial Index
   ========================================================================== */

.p72-pricing-studio {
    background-color: var(--p72-canvas);
    color: var(--p72-text);
    width: 100%;
}

/* ── Hero Section ────────────────────────────────────────────────────────── */
.p72-pricing-hero {
    padding: 3.5rem 0 3rem;
    border-bottom: 1px solid var(--p72-border);
    background: #ffffff;
}

.p72-pricing-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
}

.p72-pricing-hero__text {
    display: flex;
    flex-direction: column;
}

.p72-pricing-hero__eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--p72-muted);
    text-transform: uppercase;
    margin: 0.75rem 0 0.5rem;
}

.p72-pricing-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.75rem);
    line-height: 1.06;
    color: var(--p72-dark);
    margin: 0.5rem 0 1.25rem;
    font-weight: 400;
    letter-spacing: -0.015em;
}

.p72-pricing-hero__sub {
    font-size: 1.12rem;
    line-height: 1.6;
    color: #4b5563;
    max-width: 58ch;
    margin: 0 0 2rem;
}

.p72-pricing-nav-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--p72-border);
}

.p72-pricing-nav-strip__label {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--p72-muted);
    letter-spacing: 0.08em;
    margin-right: 0.25rem;
}

.p72-pricing-nav-strip__link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--p72-border);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--p72-dark);
    background: var(--p72-canvas);
    text-decoration: none;
    transition: all 0.15s ease;
}

.p72-pricing-nav-strip__link:hover {
    border-color: var(--p72-dark);
    background: #ffffff;
}

.p72-pricing-hero__media {
    width: 100%;
}

.p72-pricing-hero__frame {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    background: #0d1117;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.18);
}

.p72-pricing-hero__frame img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.p72-pricing-hero__caption {
    padding: 0.85rem 1.15rem;
    background: #161b22;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8b949e;
    font-size: 0.75rem;
    line-height: 1.4;
}

.p72-pricing-hero__caption-tag {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: #58a6ff;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.p72-pricing-hero__caption p {
    margin: 0;
}

/* ── Main Layout & Catalogue Chapters ────────────────────────────────────── */
.p72-pricing-main {
    padding: 3.5rem 0 5rem;
}

.p72-pricing-category {
    margin-bottom: 4.5rem;
    padding-top: 1rem;
}

.p72-pricing-category__header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--p72-border);
    margin-bottom: 2.25rem;
}

.p72-pricing-category__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.p72-pricing-category__eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--p72-green);
    font-weight: 700;
    text-transform: uppercase;
}

.p72-pricing-category__title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    color: var(--p72-dark);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.p72-pricing-category__desc {
    font-size: 1.02rem;
    color: #4b5563;
    max-width: 68ch;
    margin: 0.6rem 0 0;
    line-height: 1.55;
}

.p72-pricing-products-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* ── Product Card ────────────────────────────────────────────────────────── */
.p72-pricing-card {
    background: #ffffff;
    border: 1px solid var(--p72-border);
    border-radius: 8px;
    padding: 2.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease;
}

.p72-pricing-card:hover {
    border-color: #cbd5e1;
}

.p72-pricing-card__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.p72-pricing-card__title-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.p72-pricing-card__badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.p72-pricing-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: #e6f4ea;
    color: #137333;
    font-family: var(--font-mono, monospace);
}

.p72-pricing-badge--neutral {
    background: #f1f3f4;
    color: #5f6368;
}

.p72-pricing-card__name {
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.p72-pricing-card__name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.p72-pricing-card__name a:hover {
    color: var(--p72-green);
}

.p72-pricing-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--p72-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.p72-pricing-link:hover {
    text-decoration: underline;
}

.p72-pricing-card__summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    max-width: 75ch;
    margin: 0 0 1.75rem;
}

/* ── Plans Grid & Box ────────────────────────────────────────────────────── */
.p72-pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.p72-pricing-plans-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

.p72-pricing-plans-grid--four {
    grid-template-columns: repeat(4, 1fr);
}

.p72-pricing-plan-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fdfcfb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1.65rem 1.4rem;
    position: relative;
    transition: all 0.2s ease;
}

.p72-pricing-plan-box--featured {
    background: #ffffff;
    border: 2px solid var(--p72-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.p72-pricing-pill-badge {
    position: absolute;
    top: -11px;
    left: 1.25rem;
    background: var(--p72-dark);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.75rem;
    border-radius: 999px;
    font-family: var(--font-mono, monospace);
}

.p72-pricing-plan-box__header {
    margin-bottom: 1rem;
}

.p72-pricing-plan-box__title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.p72-pricing-plan-box__code {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.p72-pricing-plan-box__cost {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

.p72-pricing-amount-group {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.p72-pricing-currency {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--p72-dark);
}

.p72-pricing-figure {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--p72-dark);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.p72-pricing-period {
    font-size: 0.85rem;
    color: #4b5563;
    font-weight: 500;
}

.p72-pricing-effective-rate {
    margin-top: 0.45rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.p72-pricing-effective-figure {
    font-weight: 700;
    color: var(--p72-green);
}

.p72-pricing-effective-label {
    color: #6b7280;
    font-size: 0.78rem;
}

.p72-pricing-billing-detail {
    font-size: 0.78rem;
    color: #4b5563;
    margin-top: 0.45rem;
    line-height: 1.4;
}

.p72-pricing-renewal-note {
    font-size: 0.74rem;
    color: #6b7280;
    margin-top: 0.35rem;
    line-height: 1.35;
}

.p72-pricing-trial-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

/* ── Features List ───────────────────────────────────────────────────────── */
.p72-pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

.p72-pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #374151;
}

.p72-pricing-check-icon {
    color: var(--p72-green);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.p72-pricing-feature-text strong {
    font-weight: 600;
    color: var(--p72-dark);
}

/* ── CTA Row ─────────────────────────────────────────────────────────────── */
.p72-pricing-cta-row {
    margin-top: auto;
    padding-top: 0.75rem;
}

.p72-pricing-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.button--full {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 0.88rem;
    padding: 0.65rem 1.25rem;
}

.p72-pricing-footnote {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    margin-top: 1.25rem;
    max-width: 80ch;
    font-style: italic;
}

/* ── Custom / Open Source Fallback Panel ─────────────────────────────────── */
.p72-pricing-custom-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: #f9f9fb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    margin-top: 0.75rem;
}

.p72-pricing-custom-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.35rem;
}

.p72-pricing-custom-panel__sub {
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0;
    max-width: 65ch;
}

/* ── Commercial Standards ────────────────────────────────────────────────── */
.p72-pricing-standards {
    background: #ffffff;
    border: 1px solid var(--p72-border);
    border-radius: 8px;
    padding: 3.5rem 3rem;
    margin: 4.5rem 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.p72-pricing-standards__header {
    margin-bottom: 2.5rem;
}

.p72-pricing-standards__eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--p72-green);
    font-weight: 700;
}

.p72-pricing-standards__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    color: var(--p72-dark);
    margin: 0.5rem 0 0.75rem;
    font-weight: 400;
}

.p72-pricing-standards__desc {
    font-size: 1rem;
    color: #4b5563;
    max-width: 65ch;
    line-height: 1.55;
    margin: 0;
}

.p72-pricing-standards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.25rem;
}

.p72-pricing-standard-item {
    display: flex;
    flex-direction: column;
}

.p72-pricing-standard-item__num {
    font-family: var(--font-mono, monospace);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--p72-green);
    margin-bottom: 0.5rem;
}

.p72-pricing-standard-item__h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.5rem;
}

.p72-pricing-standard-item__p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── FAQ Section ─────────────────────────────────────────────────────────── */
.p72-pricing-faq {
    margin-bottom: 4.5rem;
}

.p72-pricing-faq__header {
    margin-bottom: 2.5rem;
}

.p72-pricing-faq__eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--p72-green);
    font-weight: 700;
}

.p72-pricing-faq__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    color: var(--p72-dark);
    margin: 0.5rem 0 0.75rem;
    font-weight: 400;
}

.p72-pricing-faq__sub {
    font-size: 1rem;
    color: #4b5563;
    max-width: 65ch;
    line-height: 1.55;
    margin: 0;
}

.p72-pricing-faq__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem 2.5rem;
}

.p72-pricing-faq__item {
    border-top: 1px solid var(--p72-border);
    padding-top: 1.25rem;
}

.p72-pricing-faq__q {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--p72-dark);
    margin: 0 0 0.6rem;
    line-height: 1.4;
}

.p72-pricing-faq__a {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── Founder Bespoke CTA Band ────────────────────────────────────────────── */
.p72-pricing-cta {
    background: var(--p72-dark);
    color: #ffffff;
    border-radius: 8px;
    padding: 3.5rem 3rem;
    margin-bottom: 3.5rem;
}

.p72-pricing-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.p72-pricing-cta__text {
    max-width: 65ch;
}

.p72-pricing-cta__eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: #34d399;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.p72-pricing-cta__h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin: 0 0 0.85rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.15;
}

.p72-pricing-cta__p {
    font-size: 1rem;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0;
}

.p72-pricing-cta__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Legal Line ──────────────────────────────────────────────────────────── */
.p72-pricing-legal-line {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.6;
    padding-top: 1.5rem;
    border-top: 1px solid var(--p72-border);
    margin-bottom: 2rem;
}

.p72-pricing-legal-line a {
    color: #374151;
    text-decoration: underline;
}

.p72-pricing-legal-line a:hover {
    color: var(--p72-green);
}

/* ── Responsive Adaptations ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .p72-pricing-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .p72-pricing-plans-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }
    .p72-pricing-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .p72-pricing-card {
        padding: 1.5rem;
    }
    .p72-pricing-plans-grid--three {
        grid-template-columns: 1fr;
    }
    .p72-pricing-standards {
        padding: 2.25rem 1.5rem;
    }
    .p72-pricing-cta {
        padding: 2.25rem 1.75rem;
    }
}

@media (max-width: 640px) {
    .p72-pricing-hero {
        padding: 1.75rem 0 1.5rem;
    }
    .p72-pricing-hero__h1 {
        margin: 0.35rem 0 0.75rem;
        font-size: 2.1rem;
    }
    .p72-pricing-hero__sub {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
    .p72-pricing-main {
        padding: 1.75rem 0 2.5rem;
    }
    .p72-pricing-category {
        margin-bottom: 2.25rem;
        padding-top: 0.5rem;
    }
    .p72-pricing-category__header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
    }
    .p72-pricing-products-list {
        gap: 1.5rem;
    }
    .p72-pricing-card {
        padding: 1.15rem;
    }
    .p72-pricing-card__name {
        font-size: 1.3rem;
    }
    .p72-pricing-card__summary {
        margin-bottom: 1.25rem;
        font-size: 0.9rem;
    }
    .p72-pricing-plan-box {
        padding: 1.15rem 0.95rem;
    }
    .p72-pricing-plan-box__header {
        margin-bottom: 0.75rem;
    }
    .p72-pricing-plan-box__cost {
        padding-bottom: 0.85rem;
        margin-bottom: 0.85rem;
    }
    .p72-pricing-figure {
        font-size: 1.75rem;
    }
    .p72-pricing-features-list {
        gap: 0.3rem;
        margin-bottom: 1rem;
    }
    .p72-pricing-feature-item {
        font-size: 0.76rem;
        line-height: 1.35;
        gap: 0.35rem;
    }
    .p72-pricing-standards {
        padding: 1.5rem 1.15rem;
        margin: 2.25rem 0;
    }
    .p72-pricing-standards__header {
        margin-bottom: 1.5rem;
    }
    .p72-pricing-standards__grid {
        gap: 1.25rem;
    }
    .p72-pricing-faq {
        margin-bottom: 2.25rem;
    }
    .p72-pricing-faq__header {
        margin-bottom: 1.5rem;
    }
    .p72-pricing-faq__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .p72-pricing-cta {
        padding: 1.75rem 1.15rem;
        margin-bottom: 2rem;
    }
    .p72-pricing-plans-grid--four {
        grid-template-columns: 1fr;
    }
    .p72-pricing-card__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .p72-pricing-nav-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .p72-pricing-nav-strip__link {
        width: 100%;
        text-align: left;
        padding: 0.3rem 0.75rem;
    }
}