/* ==========================================================================
   WEBLOOM PUBLIC SITE — customer-facing homepage styles.
   Reuses the shared Webloom design tokens (graphite / ivory / gold — no
   generic SaaS blue) so the public site, admin dashboard, and login screen
   stay visually consistent. This file only owns page background + navbar
   for now; homepage sections are added here one at a time.
========================================================================== */

/* Shared design tokens are loaded explicitly via a <link> tag in the
   layout, before this stylesheet — see public/assets/webloom-shared/webloom-tokens.css. */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body.webloom-public {
    min-height: 100vh;

    font-family:
        Inter,
        "Segoe UI Variable",
        "Segoe UI",
        system-ui,
        sans-serif;

    background: var(--bg);
    color: var(--text);

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* subtle warm depth backdrop, no blue glow — matches the login/admin identity */
body.webloom-public::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 12% 8%, rgba(var(--accent-rgb), .07), transparent 42%),
        radial-gradient(circle at 88% 18%, rgba(var(--accent-rgb), .05), transparent 46%),
        radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), .04), transparent 55%);

    pointer-events: none;
}

.public-main {
    position: relative;
    z-index: 1;

    min-height: calc(100vh - 84px);
}

/* ======================================
   NAVBAR
====================================== */

.public-nav {
    position: sticky;
    top: 0;
    z-index: 50;

    border-bottom: 1px solid var(--border);

    background: rgba(11, 11, 10, .72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.public-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    height: 84px;

    display: flex;
    align-items: center;
    gap: 32px;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    flex-shrink: 0;
}

.public-brand-mark {
    width: auto;
    height: 50px;
    object-fit: contain;
}

.public-brand-name {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.2px;
    color: var(--text);
    white-space: nowrap;
}

.public-brand-suffix {
    margin-left: 4px;
    color: var(--accent);
    font-weight: 700;
}

.public-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.public-nav-links a {
    position: relative;

    color: var(--muted);

    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;

    padding: 8px 0;

    transition: color .18s ease;
}

.public-nav-links a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;

    background: var(--accent);

    transition: right .22s ease;
}

.public-nav-links a:hover,
.public-nav-links a:focus-visible {
    color: var(--text);
}

.public-nav-links a:hover::after,
.public-nav-links a:focus-visible::after {
    right: 0;
}

.public-nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.public-link-btn {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--soft);
    white-space: nowrap;

    transition: color .18s ease;
}

.public-link-btn:hover,
.public-link-btn:focus-visible {
    color: var(--accent);
}

/* Set from the server (request()->routeIs('customer.*')) — never derived
   from the homepage's scroll position, so it's correct on every page.
   --accent already flips to the theme-correct gold on its own (see
   html[data-theme="light"] in webloom-tokens.css), so no extra override
   is needed here. */
.public-link-btn.is-active {
    color: var(--accent);
}

.public-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 42px;
    padding: 0 22px;

    border: 1px solid var(--accent-border);
    border-radius: 10px;

    background: var(--accent);
    color: var(--accent-contrast);

    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.public-cta:hover,
.public-cta:focus-visible {
    transform: translateY(-1px);

    background: var(--accent-hover);

    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.public-cta:active {
    transform: translateY(0) scale(.98);
}

.public-link-btn:focus-visible,
.public-cta:focus-visible,
.public-nav-links a:focus-visible,
.public-nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ======================================
   THEME TOGGLE
   Icon visibility (.icon-sun / .icon-moon) is driven purely by
   html[data-theme] via the shared rules in webloom-tokens.css.
====================================== */

.public-theme-toggle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--text);
    background: transparent;
    cursor: pointer;

    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.public-theme-toggle:hover {
    color: var(--accent);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.public-nav-panel .public-theme-toggle {
    align-self: flex-start;
    margin-top: 4px;
}


/* ======================================
   MOBILE TOGGLE + PANEL
====================================== */

.public-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface-elevated);

    cursor: pointer;
}

.public-nav-toggle span {
    width: 18px;
    height: 1.5px;

    background: var(--text);

    transition: transform .2s ease, opacity .2s ease;
}

.public-nav.is-open .public-nav-toggle span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}

.public-nav.is-open .public-nav-toggle span:nth-child(2) {
    opacity: 0;
}

.public-nav.is-open .public-nav-toggle span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

.public-nav-panel {
    display: none;
    flex-direction: column;
    gap: 4px;

    padding: 10px clamp(20px, 4vw, 48px) 22px;

    border-top: 1px solid var(--border);
    background: var(--bg-2);
}

.public-nav-panel a {
    padding: 13px 4px;

    color: var(--soft);

    font-size: 14.5px;
    font-weight: 600;

    border-bottom: 1px solid var(--border);
}

.public-nav-panel a.public-cta {
    margin-top: 10px;
    border-bottom: none;
    text-align: center;
}

@media (max-width: 900px) {
    .public-nav-links,
    .public-nav-actions {
        display: none;
    }

    .public-nav-toggle {
        display: flex;
    }

    .public-nav.is-open .public-nav-panel {
        display: flex;
    }
}

@media (max-width: 480px) {
    .public-nav-inner {
        height: 72px;
    }

    .public-brand-name {
        font-size: 15.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-nav-links a::after,
    .public-cta,
    .public-nav-toggle span {
        transition: none;
    }
}

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

.hero {
    position: relative;
    overflow: hidden;

    padding: clamp(64px, 9vw, 116px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 84px);
}

.hero-glow {
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 720px;
    z-index: 0;

    background:
        radial-gradient(circle at 22% 30%, rgba(var(--accent-rgb), .16), transparent 55%),
        radial-gradient(circle at 82% 10%, rgba(var(--accent-rgb), .1), transparent 50%);

    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;

    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-eyebrow,
.hero-headline,
.hero-subtext,
.hero-actions,
.hero-visual {
    animation: heroFadeUp .7s var(--ease, ease) both;
}

.hero-eyebrow { animation-delay: .02s; }
.hero-headline { animation-delay: .12s; }
.hero-subtext { animation-delay: .22s; }
.hero-actions { animation-delay: .32s; }
.hero-visual { animation-delay: .22s; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.hero-headline {
    margin: 24px 0 0;

    max-width: 640px;

    font-size: clamp(36px, 5vw, 66px);
    line-height: 1.08;
    letter-spacing: -1.6px;
    font-weight: 800;
    color: var(--text);
}

.hero-headline .hero-headline-accent {
    background: linear-gradient(100deg, var(--primary-2), var(--accent) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-subtext {
    margin: 22px 0 0;

    max-width: 460px;

    color: var(--muted);

    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 38px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 52px;
    padding: 0 30px;

    border-radius: 11px;

    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.hero-btn-primary {
    border: 1px solid var(--accent-border);
    background: var(--accent);
    color: var(--accent-contrast);
}

.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

.hero-btn-ghost {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.hero-btn-ghost:hover,
.hero-btn-ghost:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.hero-btn:active {
    transform: translateY(0) scale(.98);
}

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

/* ======================================
   HERO VISUAL — POS window mockup
   Pure HTML/CSS placeholder shapes only; no real product data yet.
====================================== */

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-visual::before {
    content: "";

    position: absolute;
    inset: -12%;
    z-index: 0;

    background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 62%);
    filter: blur(50px);

    pointer-events: none;
}

.pos-window {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 460px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface-elevated);

    box-shadow: var(--shadow-lg);

    overflow: hidden;

    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}

.pos-window-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;

    height: 38px;
    padding: 0 14px;

    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.pos-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.pos-dot-red { background: var(--danger); }
.pos-dot-yellow { background: var(--warning); }
.pos-dot-green { background: var(--success); }

.pos-window-title {
    margin-left: 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
}

.pos-window-body {
    display: flex;
    min-height: 340px;
}

.pos-sidebar {
    width: 60px;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    padding: 18px 0;

    background: var(--bg);
    border-right: 1px solid var(--border);
}

.pos-sidebar-logo {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;

    border: 1px solid var(--border-strong);
    border-radius: 8px;

    background: var(--accent-soft);
}

.pos-nav-item {
    width: 28px;
    height: 28px;

    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.pos-nav-item.is-active {
    border: 1px solid var(--border-strong);
    background: var(--accent-soft);
}

.pos-main {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 18px;
}

.pos-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pos-stat-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface);
}

.pos-skel-line {
    height: 7px;
    border-radius: 4px;
    background: var(--border);
}

.pos-skel-line.is-wide { width: 70%; }
.pos-skel-line.is-narrow { width: 40%; }

.pos-skel-line.is-value {
    height: 12px;
    width: 55%;
    background: linear-gradient(90deg, var(--accent), var(--primary-2));
    opacity: .55;
}

.pos-chart-card {
    flex: 1;
    min-height: 100px;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface);
}

.pos-chart-bar {
    flex: 1;

    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    opacity: .8;
}

.pos-list-card {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface);
}

.pos-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pos-list-row::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;

    border-radius: 5px;
    background: var(--border);
}

.pos-list-row::after {
    content: "";
    flex: 1;
    height: 7px;

    border-radius: 4px;
    background: var(--border);
}

@media (max-width: 1050px) {
    .hero-inner {
        grid-template-columns: 1fr;
        max-width: 640px;
        text-align: center;
    }

    .hero-headline,
    .hero-subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 8px;
    }

    .pos-window {
        max-width: 420px;
        transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
    }
}

@media (max-width: 560px) {
    .hero-btn {
        flex: 1 1 auto;
    }

    .pos-window-body {
        min-height: 300px;
    }

    .pos-sidebar {
        width: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-headline,
    .hero-subtext,
    .hero-actions,
    .hero-visual {
        animation: none;
    }
}

/* ==========================================================================
   SCROLL-IN REVEAL — shared utility, driven by IntersectionObserver in
   webloom-public.js. Elements start hidden only once JS confirms it can
   reveal them (JS adds .reveal-ready first), so content is never stuck
   invisible if JavaScript fails to load.
========================================================================== */

[data-reveal].reveal-ready {
    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity .6s var(--ease, ease),
        transform .6s var(--ease, ease);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal].reveal-ready {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   VALUE STRIP — quick highlights directly under the hero.
   One unified glass shell divided into 4 columns, rather than separate
   boxed cards, to read as a single premium strip.
========================================================================== */

.value-strip {
    position: relative;

    padding: clamp(8px, 2vw, 24px) clamp(20px, 4vw, 48px) clamp(90px, 9vw, 130px);

    background: linear-gradient(180deg, rgba(var(--accent-rgb), .05), transparent 45%);
}

.value-strip-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.value-strip-shell {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 20px);

    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;
}

.value-item {
    position: relative;

    padding: clamp(26px, 3vw, 34px) clamp(22px, 2.4vw, 30px);

    transition:
        background .25s ease,
        transform .25s ease;
}

.value-item:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 18%;
    right: 0;
    bottom: 18%;

    width: 1px;

    background: var(--border);
}

.value-item::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background: radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb), .12), transparent 60%);

    opacity: 0;

    transition: opacity .3s ease;
}

.value-item:hover,
.value-item:focus-within {
    background: var(--surface-hover);
    transform: translateY(-4px);
}

.value-item:hover::before,
.value-item:focus-within::before {
    opacity: 1;
}

.value-icon {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    margin-bottom: 18px;

    border: 1px solid var(--border-strong);
    border-radius: 12px;

    background: var(--accent-soft);
    color: var(--accent);

    transition: transform .25s ease;
}

.value-item:hover .value-icon {
    transform: translateY(-2px) scale(1.04);
}

.value-icon svg {
    width: 22px;
    height: 22px;
}

.value-title {
    position: relative;
    z-index: 1;

    margin: 0 0 8px;

    color: var(--text);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.value-desc {
    position: relative;
    z-index: 1;

    margin: 0;
    max-width: 220px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1050px) and (min-width: 641px) {
    .value-strip-shell {
        grid-template-columns: repeat(2, 1fr);
    }

    .value-item::after {
        display: none;
    }

    .value-item:nth-child(odd) {
        border-right: 1px solid var(--border);
    }

    .value-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 640px) {
    .value-strip-shell {
        grid-template-columns: 1fr;
    }

    .value-item {
        border-bottom: 1px solid var(--border);
    }

    .value-item::after {
        display: none;
    }

    .value-item:last-child {
        border-bottom: none;
    }

    .value-desc {
        max-width: none;
    }
}

/* ==========================================================================
   FEATURE SECTION — reusable left-copy/right-visual layout.
   "Point of Sale" is the first of a series (Inventory, Reports, …) that
   will reuse this same .feature-section / .feature-grid scaffold.
========================================================================== */

.feature-section {
    position: relative;

    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 48px);

    border-top: 1px solid var(--border);
}

.feature-section-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.feature-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}

.feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.feature-headline {
    margin: 22px 0 0;

    max-width: 460px;

    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.14;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--text);
}

.feature-headline-accent {
    background: linear-gradient(100deg, var(--primary-2), var(--accent) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.feature-copy-text {
    margin: 18px 0 0;

    max-width: 420px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}

.feature-points {
    list-style: none;

    margin: 30px 0 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-point {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--soft);

    font-size: 14px;
    font-weight: 600;
}

.feature-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    border: 1px solid var(--border-strong);
    border-radius: 7px;

    background: var(--accent-soft);
    color: var(--accent);
}

.feature-point-icon svg {
    width: 13px;
    height: 13px;
}

/* ======================================
   POS CHECKOUT PREVIEW — reuses the .pos-window chrome (title bar + dots)
   introduced in the hero, styled as a separate two-pane checkout screen.
   Placeholder shapes only — no real prices, products, or logic.
====================================== */

.feature-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.feature-visual::before {
    content: "";

    position: absolute;
    inset: -12%;
    z-index: 0;

    background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 62%);
    filter: blur(50px);

    pointer-events: none;
}

.pos-checkout-window {
    max-width: 620px;
    transform: none;
}

.pos-checkout-body {
    display: flex;
    min-height: 380px;
}

.pos-checkout-catalog {
    flex: 1.3;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 18px;

    border-right: 1px solid var(--border);
}

.pos-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;

    height: 38px;
    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--bg-2);
    color: var(--muted);
}

.pos-search-bar svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pos-search-placeholder {
    font-size: 12px;
    color: var(--muted);
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pos-product-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface);

    transition: border-color .2s ease, transform .2s ease;
}

.pos-product-tile:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.pos-product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    border-radius: 7px;

    background: var(--accent-soft);
    color: var(--accent);
    opacity: .8;
}

.pos-product-thumb svg {
    width: 16px;
    height: 16px;
}

.pos-product-tile .pos-skel-line {
    height: 6px;
}

.pos-cart-panel {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 18px;

    background: var(--bg-2);
}

.pos-cart-header {
    margin-bottom: 14px;

    color: var(--text);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pos-cart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    flex: 1;
}

.pos-cart-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pos-cart-name {
    flex: 1;
    min-width: 0;
    height: 7px;

    border-radius: 4px;
    background: var(--border);
}

.pos-qty-control {
    display: flex;
    align-items: center;
    gap: 6px;

    flex-shrink: 0;

    padding: 3px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--surface);
}

.pos-qty-control span {
    width: 16px;

    color: var(--text);
    text-align: center;

    font-size: 10px;
    font-weight: 700;
}

.pos-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border-radius: 4px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1;
}

.pos-cart-price {
    flex-shrink: 0;
    width: 32px;
    height: 7px;

    border-radius: 4px;
    background: var(--border);
}

.pos-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 16px;
    padding-top: 16px;

    border-top: 1px solid var(--border);
}

.pos-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}

.pos-summary-row .pos-skel-line {
    width: 40px;
    height: 7px;
}

.pos-summary-total {
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
}

.pos-summary-total .pos-skel-line.is-value {
    width: 56px;
    height: 11px;
}

.pos-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    margin-top: 16px;

    border: 1px solid var(--accent-border);
    border-radius: 9px;

    background: var(--accent);
    color: var(--accent-contrast);

    font-size: 13px;
    font-weight: 750;
    letter-spacing: .01em;
}

@media (max-width: 1050px) {
    .feature-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
    }

    .feature-headline,
    .feature-copy-text {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-points {
        align-items: center;
    }

    .feature-point {
        justify-content: center;
    }

    .pos-checkout-window {
        max-width: 480px;
    }

    /* stacked layout always reads copy before visual, regardless of which
       side the visual sits on at desktop width */
    .feature-grid--reverse .feature-copy {
        order: -1;
    }
}

@media (max-width: 640px) {
    .pos-checkout-body {
        flex-direction: column;
        min-height: 0;
    }

    .pos-checkout-catalog {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .pos-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   FEATURE GRID — REVERSE MODIFIER
   Alternates a .feature-section to visual-left / copy-right. DOM order is
   visual first, then copy — the reversed column ratio below places the
   visual on the left at desktop widths with no `order` juggling needed;
   the stacked breakpoint above puts copy back on top for reading order.
========================================================================== */

@media (min-width: 1051px) {
    .feature-grid--reverse {
        grid-template-columns: 1.15fr .85fr;
    }
}

/* ==========================================================================
   INVENTORY PREVIEW — reuses the .pos-window chrome (title bar + dots)
   and .pos-search-bar / .pos-skel-line primitives from the POS checkout
   preview. Placeholder shapes and generic demo numbers only — no real
   product data.
========================================================================== */

.pos-inventory-window {
    max-width: 600px;
    transform: none;
}

.pos-inventory-body {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 18px;
}

.pos-inventory-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pos-inventory-toolbar .pos-search-bar {
    flex: 1 1 160px;
    min-width: 0;
}

.inv-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inv-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 32px;
    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--muted);

    font-size: 11.5px;
    font-weight: 650;
}

.inv-filter-chip.is-active {
    border-color: var(--border-strong);
    background: var(--accent-soft);
    color: var(--accent);
}

.inv-table {
    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);

    overflow: hidden;
}

.inv-table-head,
.inv-table-row {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr .8fr 1fr .6fr;
    gap: 10px;
    align-items: center;
}

.inv-table-head {
    padding: 10px 16px;

    background: var(--bg-2);
    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.inv-table-row {
    padding: 12px 16px;

    border-bottom: 1px solid var(--border);

    transition: background .2s ease;
}

.inv-table-row:last-child {
    border-bottom: none;
}

.inv-table-row:hover {
    background: var(--surface-hover);
}

.inv-cell-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.inv-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 28px;
    height: 28px;

    border-radius: 7px;

    background: var(--accent-soft);
    color: var(--accent);
}

.inv-product-icon svg {
    width: 14px;
    height: 14px;
}

.inv-cell-product .pos-skel-line {
    height: 7px;
    flex: 1;
}

.inv-cell-sku .pos-skel-line {
    height: 7px;
    width: 70%;
}

.inv-qty {
    color: var(--text);

    font-size: 12.5px;
    font-weight: 700;
}

.inv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}

.inv-badge-in {
    background: var(--success-soft);
    color: var(--success);
}

.inv-badge-low {
    background: var(--warning-soft);
    color: var(--warning);
}

.inv-badge-out {
    background: var(--danger-soft);
    color: var(--danger);
}

.inv-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;

    width: 26px;
    height: 26px;

    border: 1px solid var(--border);
    border-radius: 7px;

    color: var(--muted);

    transition: color .18s ease, border-color .18s ease;
}

.inv-table-row:hover .inv-action-btn {
    color: var(--accent);
    border-color: var(--border-strong);
}

.inv-action-btn svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 1050px) {
    .pos-inventory-window {
        max-width: 480px;
    }

    /* the window itself is already narrower from here down (not just at
       the final mobile breakpoint), so the table needs to collapse in
       step with it rather than waiting for a viewport-width breakpoint
       that no longer matches the window's actual rendered width */
    .inv-table-head,
    .inv-table-row {
        grid-template-columns: 2fr .8fr 1fr .6fr;
    }

    .inv-cell-sku {
        display: none;
    }
}

/* ==========================================================================
   SALES & REPORTS PREVIEW — reuses the .pos-window chrome, .pos-stat-card /
   .pos-chart-card primitives from the hero, and .pos-skel-line throughout.
   Placeholder shapes and generic demo counts only — no real sales figures.
========================================================================== */

.pos-reports-window {
    max-width: 600px;
    transform: none;
}

.pos-reports-body {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 18px;
}

/* .pos-chart-bar's inline height is a percentage, which only resolves
   against a containing block with a definite (non-auto) height. In the
   hero it inherits one through a flex-row/flex-column chain; here there
   is no such chain, so the chart needs its own explicit height instead
   of the shared flex:1/min-height fallback. */
.pos-reports-body .pos-chart-card {
    flex: none;
    height: 140px;
}

.rep-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rep-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 30px;
    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--muted);

    font-size: 11.5px;
    font-weight: 650;
}

.rep-filter-chip.is-active {
    border-color: var(--border-strong);
    background: var(--accent-soft);
    color: var(--accent);
}

.rep-kpi-label {
    display: block;
    margin-bottom: 10px;

    color: var(--muted);

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rep-kpi-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rep-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rep-delta svg {
    width: 11px;
    height: 11px;
}

.rep-delta .pos-skel-line {
    width: 22px;
    height: 6px;
}

.rep-delta.is-up {
    color: var(--success);
}

.rep-delta.is-up .pos-skel-line {
    background: var(--success);
    opacity: .35;
}

.rep-delta.is-down {
    color: var(--warning);
}

.rep-delta.is-down .pos-skel-line {
    background: var(--warning);
    opacity: .35;
}

.rep-table {
    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);

    overflow: hidden;
}

.rep-table-head,
.rep-table-row {
    display: grid;
    grid-template-columns: 2fr .7fr 1fr .8fr;
    gap: 10px;
    align-items: center;
}

.rep-table-head {
    padding: 10px 16px;

    background: var(--bg-2);
    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rep-table-row {
    padding: 11px 16px;

    border-bottom: 1px solid var(--border);

    transition: background .2s ease;
}

.rep-table-row:last-child {
    border-bottom: none;
}

.rep-table-row:hover {
    background: var(--surface-hover);
}

.rep-cell-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rep-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    border-radius: 7px;

    background: var(--accent-soft);
    color: var(--accent);
}

.rep-product-icon svg {
    width: 13px;
    height: 13px;
}

.rep-cell-product .pos-skel-line {
    height: 7px;
    flex: 1;
}

.rep-units {
    color: var(--text);

    font-size: 12.5px;
    font-weight: 700;
}

.rep-cell-revenue .pos-skel-line {
    height: 7px;
    width: 70%;
}

@media (max-width: 1050px) {
    .pos-reports-window {
        max-width: 480px;
    }

    /* the window is already narrower from here down, not just at the
       final mobile breakpoint, so the table must collapse in step with
       it rather than a viewport-width point that no longer matches the
       window's actual rendered width (see the same fix on .inv-table) */
    .rep-table-head,
    .rep-table-row {
        grid-template-columns: 2fr .9fr .8fr;
    }

    .rep-cell-revenue {
        display: none;
    }
}

/* ==========================================================================
   LOCAL NETWORK PREVIEW — reuses the .pos-window chrome. A small
   host-and-terminals topology diagram, not a generic infographic: one
   main POS machine with 2-3 terminals wired to it via plain CSS
   connector lines (classic org-chart technique — a vertical drop from
   the host, a horizontal bar, then a vertical drop into each terminal).
   No cloud/internet imagery — everything routes through the host only.
========================================================================== */

.pos-network-window {
    max-width: 560px;
    transform: none;
}

.pos-network-body {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px 24px 26px;
}

.net-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 420px;
}

.net-host {
    position: relative;
    align-self: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 16px 28px;

    border: 1px solid var(--border-strong);
    border-radius: 14px;

    background: var(--surface-elevated);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

.net-host-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid var(--border-strong);
    border-radius: 12px;

    background: var(--accent-soft);
    color: var(--accent);
}

.net-host-icon svg {
    width: 22px;
    height: 22px;
}

.net-pulse {
    position: absolute;
    top: -3px;
    right: -3px;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: var(--success);
}

.net-pulse::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;
    background: var(--success);

    animation: netPulse 1.8s ease-out infinite;
}

@keyframes netPulse {
    from {
        opacity: .55;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2.6);
    }
}

.net-host-label {
    color: var(--text);

    font-size: 13px;
    font-weight: 750;
    letter-spacing: -.1px;
}

.net-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    padding: 3px 10px;

    border-radius: 999px;

    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.net-badge-host {
    background: var(--accent-soft);
    color: var(--accent);
}

.net-badge-online {
    background: var(--success-soft);
    color: var(--success);
}

.net-connector {
    position: relative;

    width: 100%;
    height: 34px;
}

.net-connector::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 1px;
    height: 16px;

    background: var(--border-strong);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), .3);

    transform: translateX(-50%);
}

.net-connector::after {
    content: "";

    position: absolute;
    top: 16px;
    left: 16.667%;
    right: 16.667%;

    height: 1px;

    background: var(--border-strong);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), .3);
}

.net-terminals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.net-terminal {
    position: relative;

    padding-top: 18px;
}

.net-terminal::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 1px;
    height: 18px;

    background: var(--border-strong);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), .3);

    transform: translateX(-50%);
}

.net-terminal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 14px 8px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);

    transition: border-color .2s ease, transform .2s ease;
}

.net-terminal:hover .net-terminal-card {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.net-terminal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--bg-2);
    color: var(--muted);
}

.net-terminal-icon svg {
    width: 16px;
    height: 16px;
}

.net-terminal-label {
    color: var(--soft);

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .pos-network-window {
        max-width: 480px;
    }
}

@media (max-width: 480px) {
    .net-terminal-label {
        font-size: 10px;
    }

    .net-badge {
        padding: 3px 7px;
        font-size: 8.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .net-pulse::after {
        animation: none;
        opacity: 0;
    }
}

/* ==========================================================================
   PRICING — 3-column plan comparison. Prices are an intentional dashed
   "Coming Soon" placeholder, not real figures, so the layout already
   fits the eventual price without reshuffling later.
========================================================================== */

.pricing-section {
    position: relative;
    overflow: hidden;

    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 48px);

    border-top: 1px solid var(--border);
}

.pricing-section::before {
    content: "";

    position: absolute;
    inset: -10% -10% auto -10%;
    z-index: 0;
    height: 600px;

    background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .08), transparent 60%);

    pointer-events: none;
}

.pricing-section-inner {
    position: relative;
    z-index: 1;

    max-width: 1320px;
    margin: 0 auto;
}

.pricing-header {
    max-width: 640px;
    margin: 0 auto;

    text-align: center;
}

.pricing-cycle-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 24px;
    padding: 5px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
}

.pricing-cycle-toggle button {
    padding: 9px 18px;

    border: none;
    border-radius: 999px;
    background: transparent;

    color: var(--muted);

    font-size: 13.5px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;

    transition: background .18s ease, color .18s ease;
}

.pricing-cycle-toggle button.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
}

.pricing-cycle-save {
    margin-left: 6px;

    font-size: 11px;
    font-weight: 700;
    color: var(--success);
}

.pricing-cycle-toggle button.is-active .pricing-cycle-save {
    color: var(--accent-contrast);
    opacity: .75;
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.pricing-headline {
    margin: 22px 0 0;

    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.18;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--text);
}

.pricing-copy-text {
    margin: 16px auto 0;

    max-width: 460px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}

.pricing-grid {
    margin-top: 56px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 32px 28px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 20px);

    background: var(--surface);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.pricing-card:hover {
    transform: translateY(-6px);

    border-color: var(--border-strong);
    background: var(--surface-hover);

    box-shadow: var(--shadow);
}

.pricing-card.is-featured {
    padding-top: 40px;

    border-color: var(--accent);
    background: var(--surface-elevated);

    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), var(--shadow-lg);
}

.pricing-card.is-featured:hover {
    transform: translateY(-6px);
    border-color: var(--accent);

    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .28), var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    padding: 5px 14px;

    border-radius: 999px;

    background: var(--accent);
    color: var(--accent-contrast);

    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);

    transform: translateX(-50%);
}

.pricing-plan-name {
    display: block;

    color: var(--text);

    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.pricing-price {
    margin: 18px 0;
}

.pricing-price-amount {
    color: var(--text);

    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.pricing-price-period {
    margin-left: 4px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 600;
}

.pricing-price-placeholder {
    display: inline-flex;
    align-items: center;

    padding: 8px 16px;

    border: 1px dashed var(--border-strong);
    border-radius: 999px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pricing-features {
    list-style: none;

    margin: 22px 0 0;
    padding: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 13px;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--soft);

    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}

.pricing-feature.is-primary {
    color: var(--text);
    font-weight: 750;
}

.pricing-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    margin-top: 1px;

    width: 20px;
    height: 20px;

    border: 1px solid var(--border-strong);
    border-radius: 6px;

    background: var(--accent-soft);
    color: var(--accent);
}

.pricing-feature-icon svg {
    width: 11px;
    height: 11px;
}

.pricing-feature-label {
    flex: 1;
}

/* AI does not exist yet — this must never look like an already-available
   feature, so it's dimmed and tagged instead of sharing the plain
   checkmark treatment every real, shipped feature gets. */
.pricing-feature.is-future {
    color: var(--muted);
}

.pricing-feature.is-future .pricing-feature-icon {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--muted);
}

.pricing-feature-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface-2);
    color: var(--muted);

    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    vertical-align: middle;
}

.pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 48px;
    margin-top: 28px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 750;
    letter-spacing: .01em;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.pricing-cta-ghost {
    border: 1px solid var(--border);
    background: var(--surface-elevated);
    color: var(--text);
}

.pricing-cta-ghost:hover,
.pricing-cta-ghost:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.pricing-cta-primary {
    border: 1px solid var(--accent-border);
    background: var(--accent);
    color: var(--accent-contrast);
}

.pricing-cta-primary:hover,
.pricing-cta-primary:focus-visible {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.pricing-cta:active {
    transform: translateY(0) scale(.98);
}

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

@media (max-width: 1050px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-cta {
        transition: none;
    }
}

/* ==========================================================================
   FAQ — accordion, one answer open at a time. The panel animates via the
   CSS grid 0fr/1fr technique (smooth height without a fixed max-height),
   while aria-expanded/aria-hidden are kept in sync by JS for assistive
   tech, independent of the purely visual collapse.
========================================================================== */

.faq-section {
    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 48px);

    border-top: 1px solid var(--border);
}

.faq-section-inner {
    max-width: 820px;
    margin: 0 auto;
}

.faq-header {
    max-width: 640px;
    margin: 0 auto;

    text-align: center;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.faq-headline {
    margin: 22px 0 0;

    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.2;
    letter-spacing: -.8px;
    font-weight: 800;
    color: var(--text);
}

.faq-list {
    margin-top: 48px;

    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    margin: 0;
}

.faq-trigger {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 22px 4px;

    border: 0;
    background: none;

    color: var(--text);
    text-align: left;

    font: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.faq-trigger:hover {
    color: var(--accent);
}

.faq-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 28px;
    height: 28px;

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--muted);

    transition:
        transform .3s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.faq-icon svg {
    width: 14px;
    height: 14px;
}

.faq-item.is-open .faq-trigger {
    color: var(--accent);
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);

    border-color: var(--border-strong);
    background: var(--accent-soft);
    color: var(--accent);
}

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows .35s ease;
}

.faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-answer {
    margin: 0;
    padding: 0 4px 22px;

    max-width: 680px;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.7;
}

.faq-answer a {
    color: var(--soft);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-answer a:hover,
.faq-answer a:focus-visible {
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .faq-icon,
    .faq-panel {
        transition: none;
    }
}

/* ==========================================================================
   SUPPORT / CONTACT CTA — the final, most visually impactful panel before
   the footer. A bordered, glowing card rather than a plain content
   section, but still no large gimmicky motion.
========================================================================== */

.support-section {
    position: relative;

    padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 48px);

    border-top: 1px solid var(--border);
}

.support-panel {
    position: relative;

    max-width: 920px;
    margin: 0 auto;

    padding: clamp(48px, 7vw, 76px) clamp(28px, 6vw, 64px);

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg, 20px);

    background: var(--surface-elevated);

    box-shadow: var(--shadow-lg);

    text-align: center;
    overflow: hidden;
}

.support-panel::before {
    content: "";

    position: absolute;
    inset: -20%;
    z-index: 0;

    background:
        radial-gradient(circle at 25% 15%, rgba(var(--accent-rgb), .16), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(var(--accent-rgb), .1), transparent 55%);

    pointer-events: none;
}

.support-panel > * {
    position: relative;
    z-index: 1;
}

.support-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.support-headline {
    margin: 22px 0 0;

    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--text);
}

.support-copy-text {
    margin: 18px auto 0;

    max-width: 520px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}

.support-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 34px;
}

.support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    height: 52px;
    padding: 0 30px;

    border-radius: 11px;

    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.support-btn-primary {
    border: 1px solid var(--accent-border);
    background: var(--accent);
    color: var(--accent-contrast);
}

.support-btn-primary:hover,
.support-btn-primary:focus-visible {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

.support-btn-ghost {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.support-btn-ghost:hover,
.support-btn-ghost:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.support-btn:active {
    transform: translateY(0) scale(.98);
}

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

@media (max-width: 560px) {
    .support-btn {
        flex: 1 1 auto;
    }
}

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

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-2);

    padding: 56px clamp(20px, 4vw, 48px) 26px;
}

.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: clamp(32px, 5vw, 64px);

    padding-bottom: 40px;
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: auto;
    height: 32px;
    object-fit: contain;
}

.footer-brand-name {
    color: var(--text);

    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.2px;
}

.footer-brand-suffix {
    margin-left: 4px;
    color: var(--accent);
    font-weight: 700;
}

.footer-tagline {
    margin: 14px 0 0;

    color: var(--muted);

    font-size: 13px;
    font-style: italic;
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--border);
    border-radius: 10px;

    color: var(--muted);

    transition:
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.footer-social:hover,
.footer-social:focus-visible {
    color: var(--accent);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}

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

.footer-nav-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.footer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav-title {
    margin-bottom: 2px;

    color: var(--text);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.footer-nav-group a {
    color: var(--muted);

    font-size: 13.5px;
    font-weight: 600;

    transition: color .18s ease;
}

.footer-nav-group a:hover,
.footer-nav-group a:focus-visible {
    color: var(--accent);
}

.footer-bottom {
    padding-top: 22px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 12px;
    text-align: center;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 560px) {
    .footer-nav-groups {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 380px) {
    .footer-nav-groups {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SHARED UTILITY-PAGE HEADER — Purchase, Contact, and any future page
   that needs the eyebrow / headline / subtext pattern already used on
   the homepage's feature and pricing sections.
========================================================================== */

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 16px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.page-headline {
    margin: 22px 0 0;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--text);
}

.page-subtext {
    margin: 16px auto 0;

    max-width: 520px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}

/* ==========================================================================
   FORM SYSTEM — shared by Purchase, Customer Login/Register, and Contact.
   Premium bordered inputs consistent with the rest of the storefront;
   deliberately distinct from the admin login's own input styling since
   the two live in separate stylesheets and separate visual contexts.
========================================================================== */

.webloom-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    color: var(--soft);

    font-size: 12px;
    font-weight: 650;
}

.form-optional {
    color: var(--muted);
    font-weight: 500;
}

.form-error {
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 550;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;

    padding: 0 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface-elevated);
    color: var(--text);

    font: inherit;
    font-size: 14px;

    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-input,
.form-select {
    height: 48px;
}

.form-textarea {
    min-height: 130px;
    padding: 14px 16px;
    resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--muted);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-strong);
}

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

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

.form-inline-link {
    color: var(--soft);

    font-size: 12.5px;
    font-weight: 650;
}

.form-inline-link:hover,
.form-inline-link:focus-visible {
    color: var(--accent);
}

.form-checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--soft);

    font-size: 12.5px;

    cursor: pointer;
    user-select: none;
}

.form-checkbox-row input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.checkbox-box {
    position: relative;
    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    border: 1px solid var(--border);
    border-radius: 5px;

    background: var(--surface-elevated);

    transition: border-color .16s ease;
}

.checkbox-box::after {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--accent) content-box;

    clip-path: polygon(20% 50%, 40% 68%, 82% 24%, 92% 34%, 40% 88%, 10% 58%);

    opacity: 0;

    transition: opacity .14s ease;
}

.form-checkbox-row input:checked + .checkbox-box {
    border-color: var(--border-strong);
}

.form-checkbox-row input:checked + .checkbox-box::after {
    opacity: 1;
}

.form-checkbox-row input:focus-visible + .checkbox-box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.webloom-btn-primary,
.webloom-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    height: 50px;

    border-radius: 10px;

    font: inherit;
    font-size: 14.5px;
    font-weight: 750;
    letter-spacing: .01em;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.webloom-btn-primary {
    border: 1px solid var(--accent-border);
    background: var(--accent);
    color: var(--accent-contrast);
}

.webloom-btn-primary:hover,
.webloom-btn-primary:focus-visible {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.webloom-btn-primary:disabled,
.webloom-btn-ghost:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.webloom-btn-ghost {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.webloom-btn-ghost:hover,
.webloom-btn-ghost:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.webloom-btn-primary:active,
.webloom-btn-ghost:active {
    transform: translateY(0) scale(.99);
}

.webloom-btn-primary:focus-visible,
.webloom-btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Applied by webloom-public.js / webloom-customer.js right after a valid
   form submit, so a double-click can't fire the request twice. Hides the
   button's own label/icon (color: transparent also blanks any inline SVG
   using currentColor) and overlays a small spinner instead of changing
   the button's actual text content. */
.webloom-btn-primary.is-loading,
.webloom-btn-ghost.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.webloom-btn-primary.is-loading::after,
.webloom-btn-ghost.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;

    border: 2px solid var(--accent-contrast);
    border-right-color: transparent;
    border-radius: 50%;

    animation: webloom-spin .6s linear infinite;
}

.webloom-btn-ghost.is-loading::after {
    border-color: var(--text);
    border-right-color: transparent;
}

@keyframes webloom-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .form-input,
    .form-select,
    .form-textarea,
    .checkbox-box,
    .checkbox-box::after,
    .webloom-btn-primary,
    .webloom-btn-ghost {
        transition: none;
    }
}

/* ==========================================================================
   AUTH PAGES — Customer Login / Register. A single centered card, not the
   split two-pane layout the admin login uses, so the storefront and the
   admin console read as two clearly different products sharing one brand.
========================================================================== */

.auth-page {
    position: relative;
    overflow: hidden;

    min-height: calc(100vh - 84px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(48px, 8vw, 96px) 20px;
}

.auth-page::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 18% 12%, rgba(var(--accent-rgb), .08), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(var(--accent-rgb), .06), transparent 50%);

    pointer-events: none;
}

.auth-card-solo {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 440px;

    padding: clamp(32px, 5vw, 48px);

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);

    box-shadow: var(--shadow-lg);
}

.auth-card-wide {
    max-width: 560px;
}

.auth-card-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 28px;
}

.auth-mark {
    width: auto;
    height: 34px;
    object-fit: contain;
}

.auth-brand-name {
    color: var(--text);

    font-size: 15px;
    font-weight: 750;
}

.auth-brand-suffix {
    margin-left: 4px;
    color: var(--accent);
    font-weight: 700;
}

.auth-title {
    margin: 0;

    color: var(--text);

    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.auth-subtitle-text {
    margin: 8px 0 26px;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.6;
}

.auth-switch {
    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    text-align: center;

    font-size: 13px;
}

.auth-switch a {
    color: var(--accent);
    font-weight: 700;
}

.auth-switch a:hover,
.auth-switch a:focus-visible {
    color: var(--primary-2);
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   AUTH SPLIT — Login / Register cinematic composition. A "premium rail"
   marketing panel paired with a glass auth card. Both themes get a fully
   designed, luxury composition of their own: Dark Mode stays the graphite/
   gold cinematic look below; Light Mode gets its own warm-ivory/champagne
   composition (see the html[data-theme="light"] .auth-split override
   further down) so the page reads as continuous with the light navbar
   above it instead of a dark panel bolted underneath it.
========================================================================== */

.auth-split {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: calc(100vh - 84px);

    /* The supplied architectural photo (see --auth-bg-dark in
       webloom-tokens.css) — real pixels, not a CSS-simulated scene.
       left/center anchoring means "cover" only ever crops from the
       image's plain right-hand wall, never the architecture on the left,
       regardless of viewport aspect ratio. background-color is just the
       one-frame fallback before the image paints. */
    background: var(--auth-bg-dark) left center / cover no-repeat;
    background-color: #0b0a08;

    /* Dark Mode composition (the default — see html[data-theme="light"]
       .auth-split below for the Light Mode values). Every token consumed
       anywhere inside .auth-split (tabs, labels, inputs, buttons, links,
       feature cards) is pinned to an explicit value here rather than left
       to inherit from :root, so this section's palette never depends on
       where in the page it's mounted (inheritance carries these down to
       every descendant). */
    --text: #f2efe8;
    --text-soft: #d8d3c7;
    --muted: #a39d8e;
    --border: #35312a;
    --border-strong: rgba(184, 148, 95, .4);
    --accent-rgb: 184, 148, 95;
    --primary: #b8945f;
    --primary-2: #caa66f;
    --accent: var(--primary);
    --accent-hover: var(--primary-2);
    --primary-hover: var(--primary-2);
    --soft: var(--text-soft);
    --primary-soft: rgba(184, 148, 95, .16);
    --accent-soft: var(--primary-soft);
    --accent-dark: #8d6c3d;
    --accent-contrast: #171410;
    --surface-elevated: rgba(0, 0, 0, .28);
    --surface-hover: rgba(0, 0, 0, .36);

    color: #f2efe8;
}

.auth-visual {
    position: relative;
    /* was hidden -- the standalone brand mark is now nudged well outside
       this panel's own box (see .auth-brand-mark's transform below), and
       hidden would clip it. Nothing else here relies on clipping: the
       ::after scrim is inset: 0, so it never exceeds this box either way. */
    overflow: visible;

    display: flex;
    align-items: center;
    /* Three visual zones read left-to-right within this one grid column:
       marketing copy, then the standalone brand mark filling the open
       middle area, then (outside .auth-visual entirely) the auth card in
       .auth-split's second grid column, which this rule never touches. */
    gap: clamp(24px, 4vw, 56px);

    /* Right padding is intentionally much smaller than the other sides:
       the brand mark lives against this edge, and shrinking it (was the
       same clamp(32px, 4vw, 64px) as the rest) is what actually lets the
       mark sit close to the card boundary — .auth-brand-mark's own
       padding-right alone couldn't overcome this panel-level padding. */
    padding: clamp(32px, 4vw, 64px) clamp(2px, 0.6vw, 8px) clamp(32px, 4vw, 64px) clamp(32px, 4vw, 64px);

    /* Extends this panel's own box past the grid column boundary into
       .auth-split's second (card) column — safe because .auth-form-side
       centers the card within its column with generous slack on typical
       desktop widths, so this reaches into that empty gutter rather than
       the card itself. Scales down at narrower widths, where that slack
       is smaller, to stay clear of the card. */
    margin-right: clamp(-140px, -8vw, -40px);
}

/* A soft readability scrim over the area where the eyebrow/headline sit
   (upper-left, over both supplied photos' brightest — busy ceiling-light —
   patch) so overlaid text stays legible. This is readability assistance
   only, per the brief: the architecture underneath must stay clearly
   visible, so it's a soft radial fade, not a panel-wide wash. */
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 640px 460px at 24% 30%, rgba(4, 3, 2, .5), transparent 68%);
    pointer-events: none;
}

.auth-visual-content {
    position: relative;
    z-index: 1;
    /* Narrower than before (was 460px) now that the panel also has to make
       room for the standalone brand mark beside it, and shifted off the
       column's left edge so it reads as sitting inside the architecture
       rather than pinned to the viewport edge. flex-shrink: 0 keeps this
       width (and the headline's wrap) stable regardless of how much room
       .auth-brand-mark ends up with — that flex-1 box is the one that
       should absorb any tight-space squeeze, not the marketing copy. */
    flex-shrink: 0;
    max-width: 420px;
    margin-left: clamp(12px, 5vw, 64px);
}

/* Readability insurance for text sitting directly on the photo (not
   inside a card): a soft dark halo in Dark Mode, flipped to a soft light
   halo in the Light Mode override further down — same idea as the
   ::after scrim above, just per-glyph instead of area-wide. */
.auth-visual-headline,
.auth-visual-copy {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.auth-visual-headline {
    margin: 18px 0 16px;

    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    /* var(--text), not a hardcoded near-white — .auth-split repins --text
       per theme, so this reads correctly in both Dark and Light Mode. */
    color: var(--text);
}

.auth-visual-headline .is-accent {
    color: var(--webloom-gold-300);
}

html[data-theme="light"] .auth-visual-headline .is-accent {
    /* --webloom-gold-300 is a fixed, pale brand token tuned for a dark
       backdrop — too low-contrast against the light composition, so Light
       Mode uses the richer, theme-aware accent instead. */
    color: var(--accent-dark);
}

.auth-visual-copy {
    max-width: 360px;
    margin: 0;

    color: var(--text-soft);

    font-size: 15px;
    line-height: 1.65;
}

.auth-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 40px 0 0;
}

.auth-feature-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid rgba(var(--accent-rgb), .16);
    border-radius: 14px;

    /* Slightly stronger tint/blur than a flat CSS backdrop needed, since
       these now sit over a real (busier) photo rather than a plain
       gradient. */
    background: rgba(var(--accent-rgb), .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* a faint top rim-light, like a glass edge catching light — echoes the
       reference's glossy surfaces without any extra markup. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-theme="light"] .auth-feature-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.auth-feature-icon {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;
    background: rgba(var(--accent-rgb), .16);
    color: var(--webloom-gold-300);
}

html[data-theme="light"] .auth-feature-icon {
    color: var(--primary);
}

.auth-feature-icon svg {
    width: 17px;
    height: 17px;
}

.auth-feature-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-feature-body strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
}

.auth-feature-body span {
    color: var(--muted);

    font-size: 12px;
    line-height: 1.5;
}

/* Standalone brand moment — the open middle zone between the marketing
   copy and the auth card (see partials/auth-brand-mark.blade.php). Fills
   the flex space .auth-visual-content doesn't use; flex-end (was center)
   pushes it toward that zone's right edge, right up near the card
   boundary, rather than the middle of the marketing column. */
.auth-brand-mark {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 1 1 auto;
    min-width: 0;
    padding-right: clamp(2px, 0.6vw, 10px);
    /* nudges the mark up off dead-center toward the marketing headline's
       vertical level, per the marked reference. */
    margin-top: -32px;
    /* additional requested offset: 1in left, 4in up, then 2in back down
       (96px/-384px/+192px net -192px at the CSS reference 96px/in), on
       top of the flex position/margin above. */
    transform: translate(-96px, -192px);
}

.auth-brand-mark-img {
    height: clamp(64px, 8vw, 120px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* the mark's own artwork is untouched — this is a drop-shadow on the
       rendered element, not a filter over the logo's pixels, so it never
       recolors or distorts it. */
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .4));
}

/* ==========================================================================
   BRAND MARK — universal theme-aware Webloom emblem (see
   partials/brand-mark.blade.php). Every visual logo placement site-wide
   (navbar, footer, customer topbar/sidebar, error page, auth cards, and
   the auth split screen's standalone mark above) renders through that one
   partial and is switched here in one place. Same show/hide-by-theme
   technique already used for the navbar's sun/moon icons (webloom-tokens.css
   .theme-toggle .icon-sun/.icon-moon), just swapping which raster loads
   instead of which glyph. logodark.png is the default (every one of these
   surfaces defaults to Dark Mode's own composition first).
========================================================================== */
.brand-mark-light {
    display: none;
}

html[data-theme="light"] .brand-mark-dark {
    display: none;
}

html[data-theme="light"] .brand-mark-light {
    display: inline;
}

.auth-form-side {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(32px, 5vw, 64px) 24px;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 440px;

    padding: clamp(28px, 4vw, 40px);

    border: 1px solid var(--border-strong);
    border-radius: 22px;

    background: rgba(23, 21, 17, .58);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184, 148, 95, .1), 0 0 54px rgba(184, 148, 95, .16);
}

/* Chrome/Edge paint autofilled inputs with their own internal UA
   background (pale blue, or yellow depending on platform heuristics) that
   plain `background`/`background-color` CSS cannot override — the fields
   inside .auth-card were falling back to that default instead of staying
   on the card's own surface colour. These are the Dark Mode values (the
   default); see the html[data-theme="light"] override below for Light
   Mode's own autofill colours. The fix is the standard trick: paint over
   the UA layer with a huge
   inset box-shadow in the real input colour, force the text/caret colour
   since -webkit-autofill also overrides those, and defer the browser's
   own background-color transition indefinitely so it never has a chance
   to flash through. --webloom-graphite-800 is the same dark surface a
   normal (non-autofilled) dark-mode input already uses, so filled and
   unfilled fields look identical. */
.auth-card .form-input:-webkit-autofill,
.auth-card .form-input:-webkit-autofill:hover,
.auth-card .form-input:-webkit-autofill:focus,
.auth-card .form-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f2efe8 !important;
    -webkit-box-shadow: 0 0 0 1000px var(--webloom-graphite-800) inset !important;
    box-shadow: 0 0 0 1000px var(--webloom-graphite-800) inset !important;
    caret-color: #caa66f;
    border-color: var(--border) !important;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}

.auth-card .form-input:-webkit-autofill:focus {
    border-color: var(--accent) !important;
}

/* Non-Chromium fallback (Firefox etc.) via the standard :autofill
   pseudo-class — these engines already respect plain background/color on
   autofilled fields, so no inset-shadow trick is needed. */
.auth-card .form-input:autofill {
    background-color: var(--webloom-graphite-800);
    color: #f2efe8;
    caret-color: #caa66f;
}

/* ==========================================================================
   AUTH SPLIT — LIGHT MODE COMPOSITION
   The supplied light architectural photo (see --auth-bg-light in
   webloom-tokens.css) in place of the Dark Mode one, with every token
   .auth-split's descendants consume re-pinned to warm-ivory/champagne
   equivalents (same technique as the Dark Mode block above — this
   selector has higher specificity than the bare `.auth-split` rule, so it
   always wins once html[data-theme="light"] is set, regardless of source
   order). Result: the page reads continuous with the light navbar above
   it instead of a dark panel bolted underneath it.
========================================================================== */
html[data-theme="light"] .auth-split {
    background: var(--auth-bg-light) left center / cover no-repeat;
    background-color: #f3ede0;

    --text: #211d15;
    --text-soft: #4a4335;
    --muted: #78715f;
    --border: #e4d7ba;
    --border-strong: rgba(152, 114, 68, .4);
    --accent-rgb: 152, 114, 68;
    --primary: #9c7132;
    --primary-2: #7e5726;
    --accent: var(--primary);
    --accent-hover: var(--primary-2);
    --primary-hover: var(--primary-2);
    --soft: var(--text-soft);
    --primary-soft: rgba(152, 114, 68, .14);
    --accent-soft: var(--primary-soft);
    --accent-dark: #6b4c22;
    --accent-contrast: #fffaf0;
    --surface-elevated: #f6efdd;
    --surface-hover: #fff8ea;

    color: #211d15;
}

/* Light Mode's own readability scrim — a soft warm-ivory wash rather than
   the Dark Mode version's dark one, over the same upper-left area (both
   supplied photos put their brightest, busiest patch — the ceiling
   lights — roughly there). Optional per the brief (dark-on-light text is
   already reasonably legible), kept subtle on purpose. */
html[data-theme="light"] .auth-visual::after {
    background: radial-gradient(ellipse 640px 460px at 24% 30%, rgba(255, 253, 247, .38), transparent 68%);
}

/* Flip the Dark Mode text-shadow direction: a light halo lifts dark
   charcoal text off a bright photo, where a dark halo would just look
   like a smudge. */
html[data-theme="light"] .auth-visual-headline,
html[data-theme="light"] .auth-visual-copy {
    text-shadow: 0 2px 14px rgba(255, 253, 247, .75);
}

html[data-theme="light"] .auth-brand-mark-img {
    filter: drop-shadow(0 10px 26px rgba(60, 44, 16, .22));
}

/* Premium light glass card — thin champagne hairline, soft depth shadow,
   faint outer glow, matching the "luminous border" system used across the
   rest of the light-mode site (see --border-accent / --luminous-shadow in
   webloom-tokens.css) rather than a one-off recipe. */
html[data-theme="light"] .auth-card {
    background: rgba(255, 253, 247, .74);
    border-color: rgba(152, 114, 68, .35);
    /* the supplied photo's right side is a very bright, near-white wall —
       a touch more ambient shadow than the sitewide light-card recipe
       keeps the card visually separated from it. */
    box-shadow:
        0 20px 50px rgba(60, 44, 16, .16),
        0 0 0 1px rgba(152, 114, 68, .12),
        0 0 44px rgba(152, 114, 68, .14);
}

/* Light Mode autofill colours — same paint-over-the-UA-layer technique as
   the Dark Mode rule above, just using the light input surface/text
   colours instead. */
html[data-theme="light"] .auth-card .form-input:-webkit-autofill,
html[data-theme="light"] .auth-card .form-input:-webkit-autofill:hover,
html[data-theme="light"] .auth-card .form-input:-webkit-autofill:focus,
html[data-theme="light"] .auth-card .form-input:-webkit-autofill:active {
    -webkit-text-fill-color: #211d15 !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-elevated) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-elevated) inset !important;
    caret-color: #9c7132;
    border-color: var(--border) !important;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}

html[data-theme="light"] .auth-card .form-input:-webkit-autofill:focus {
    border-color: var(--accent) !important;
}

html[data-theme="light"] .auth-card .form-input:autofill {
    background-color: var(--surface-elevated);
    color: #211d15;
    caret-color: #9c7132;
}

.auth-tabs {
    display: flex;
    gap: 28px;
    margin-bottom: 26px;

    border-bottom: 1px solid var(--border);
}

.auth-tab {
    position: relative;
    padding-bottom: 14px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 650;

    transition: color .18s ease;
}

.auth-tab:hover,
.auth-tab:focus-visible {
    color: var(--text);
}

.auth-tab.is-active {
    color: var(--text);
    font-weight: 750;
}

.auth-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.auth-legal-note {
    margin: -4px 0 4px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}

.auth-legal-note a {
    color: var(--soft);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-legal-note a:hover,
.auth-legal-note a:focus-visible {
    color: var(--accent);
}

/* ==========================================================================
   AUTH OAUTH ROW — "or continue with" divider + Google / Microsoft / GitHub
   buttons. Visual only: buttons are type="button" with no href/action (see
   partials/auth-oauth-row.blade.php), so nothing can navigate or submit
   until real OAuth routes exist. The "Coming soon" label is a CSS tooltip
   (hover/focus) with a JS-driven click fallback for touch devices, in
   webloom-public.js.
========================================================================== */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 22px 0;

    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-oauth-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.auth-oauth-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-elevated);
    /* Buttons don't inherit color from their ancestors by default in the
       UA stylesheet, which broke the GitHub icon's fill="currentColor" —
       it was resolving to black instead of the theme's text colour. */
    color: var(--text);

    cursor: pointer;

    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.auth-oauth-btn:hover,
.auth-oauth-btn:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.auth-oauth-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-oauth-btn:active {
    transform: translateY(0);
}

.auth-oauth-icon {
    width: 19px;
    height: 19px;
}

.auth-oauth-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    padding: 5px 10px;
    border-radius: 7px;

    background: var(--text);
    color: var(--accent-contrast);

    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transition: opacity .16s ease, transform .16s ease;
}

.auth-oauth-btn:hover .auth-oauth-tip,
.auth-oauth-btn:focus-visible .auth-oauth-tip,
.auth-oauth-btn.is-tip-visible .auth-oauth-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .auth-oauth-btn,
    .auth-oauth-tip {
        transition: none;
    }
}

/* form field icons + password visibility toggle */

.form-input-group {
    position: relative;
}

.form-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    color: var(--muted);
    pointer-events: none;
}

.form-input-icon svg {
    width: 17px;
    height: 17px;
}

.form-input.has-icon {
    padding-left: 42px;
}

.form-input.has-toggle {
    padding-right: 42px;
}

.form-input-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: none;
    border-radius: 8px;
    background: none;

    color: var(--muted);
    cursor: pointer;

    transition: color .16s ease, background .16s ease;
}

.form-input-toggle:hover,
.form-input-toggle:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
}

.form-input-toggle svg {
    width: 18px;
    height: 18px;
}

.form-input-toggle .icon-eye-closed {
    display: none;
}

.form-input-toggle.is-visible .icon-eye-open {
    display: none;
}

.form-input-toggle.is-visible .icon-eye-closed {
    display: block;
}

@media (max-width: 1024px) {
    .auth-split {
        grid-template-columns: .85fr 1fr;
    }

    /* Three zones (marketing / brand mark / card — card is the separate
       second grid column, untouched here) get tight at tablet widths.
       Top-aligning (was center) keeps the mark level with the headline
       instead of drifting down to the vertical middle of the whole panel,
       where it would sit right beside the feature cards with no room to
       breathe — top alignment plus a wider gap keeps clear separation. */
    .auth-visual {
        align-items: flex-start;
        gap: 28px;
    }

    .auth-visual-content {
        max-width: 300px;
        margin-left: clamp(8px, 3vw, 32px);
    }

    .auth-brand-mark {
        margin-top: 4px;
    }

    .auth-brand-mark-img {
        height: clamp(40px, 5vw, 60px);
    }

    .auth-visual-headline {
        font-size: clamp(26px, 4vw, 36px);
    }

    .auth-feature-grid {
        margin-top: 26px;
    }

    /* The register card's two-column rows (name/business, email/phone,
       password/confirm) get cramped once the form side itself shrinks to
       make room for the marketing panel — stack them a step earlier than
       the generic .form-row breakpoint so placeholders never clip. */
    .auth-card .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    /* Mobile keeps a compact version of the visual side (brand mark,
       headline) instead of hiding it outright, so the page still reads as
       branded and the supplied background stays visible — but drops the
       copy line and feature cards so the form stays the primary,
       uncluttered focus. The readability scrim (::after) stays active
       since the headline still sits directly on the photo here too. */
    .auth-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .auth-visual {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 28px 20px 20px;
    }

    .auth-visual-content {
        max-width: none;
        margin-left: 0;
    }

    /* Above the headline (order: -1) instead of the panel's own natural
       source order, and small/centered — a clean brand moment without
       competing with the headline for space on a narrow screen. */
    .auth-brand-mark {
        order: -1;
        align-self: center;
        flex: 0 0 auto;
        margin-bottom: 20px;
    }

    .auth-brand-mark-img {
        height: 48px;
    }

    .auth-visual-copy,
    .auth-feature-grid {
        display: none;
    }

    .auth-visual-headline {
        margin: 12px 0 0;
        font-size: clamp(22px, 6vw, 28px);
    }

    .auth-form-side {
        min-height: auto;
        padding: 28px 20px 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-input-toggle {
        transition: none;
    }
}

/* ==========================================================================
   CHECKOUT (PURCHASE) PAGE
========================================================================== */

.checkout-section {
    padding: clamp(48px, 7vw, 90px) clamp(20px, 4vw, 48px) clamp(80px, 9vw, 120px);
}

.checkout-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.checkout-intro {
    max-width: 640px;
    margin: 0 auto;

    text-align: center;
}

.checkout-grid {
    margin-top: 52px;

    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
}

.checkout-panel {
    padding: clamp(28px, 4vw, 36px);

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);
}

.panel-title {
    margin: 0 0 22px;

    color: var(--text);

    font-size: 17px;
    font-weight: 750;
}

.checkout-summary-panel {
    position: sticky;
    top: 104px;

    border-color: var(--border-strong);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-lg);
}

.summary-product {
    display: flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 20px;
    margin-bottom: 20px;

    border-bottom: 1px solid var(--border);
}

.summary-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border: 1px solid var(--border-strong);
    border-radius: 12px;

    background: var(--accent-soft);
    color: var(--accent);
}

.summary-product-icon svg {
    width: 21px;
    height: 21px;
}

.summary-product-name {
    display: block;

    color: var(--text);

    font-size: 15px;
    font-weight: 750;
}

.summary-plan-name {
    display: block;
    margin-top: 2px;

    color: var(--accent);

    font-size: 12.5px;
    font-weight: 650;
}

.summary-change-plan {
    color: var(--muted);
    font-weight: 500;
}

.summary-change-plan a {
    color: var(--soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.summary-change-plan a:hover {
    color: var(--accent);
}

.summary-features {
    list-style: none;

    margin: 0 0 22px;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 11px;
}

.summary-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--soft);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.summary-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    margin-top: 1px;

    width: 20px;
    height: 20px;

    border: 1px solid var(--border-strong);
    border-radius: 6px;

    background: var(--accent-soft);
    color: var(--accent);
}

/* AI does not exist yet — same muted/tagged treatment as the pricing
   cards, so this order summary never implies it's already available. */
.summary-features li.is-future {
    color: var(--muted);
}

.summary-features li.is-future .summary-feature-icon {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--muted);
}

.summary-feature-icon svg {
    width: 11px;
    height: 11px;
}

.summary-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding-top: 18px;

    border-top: 1px solid var(--border);
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 12.5px;
    font-weight: 600;
}

.summary-total {
    padding-top: 10px;
    margin-top: 2px;

    border-top: 1px dashed var(--border);

    color: var(--text);

    font-size: 14.5px;
    font-weight: 750;
}

.checkout-summary-panel .webloom-btn-primary {
    margin-top: 22px;
}

.checkout-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 11.5px;
    line-height: 1.6;
}

.checkout-secure-note svg {
    flex-shrink: 0;
    margin-top: 1px;

    width: 14px;
    height: 14px;

    color: var(--muted);
}

.checkout-account-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 18px 20px;
    border-radius: var(--radius-sm);

    background: var(--surface-elevated);
    border: 1px solid var(--border);
}

.checkout-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-size: 14px;
}

.checkout-account-row span {
    color: var(--muted);
}

.checkout-account-row strong {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

.checkout-guest-note {
    margin: 0;
    padding: 18px 20px;
    border-radius: var(--radius-sm);

    background: var(--surface-elevated);
    border: 1px solid var(--border);

    color: var(--soft);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .checkout-summary-panel {
        position: static;
    }
}

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

.contact-section {
    padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 48px) clamp(90px, 9vw, 120px);
}

.contact-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

.contact-copy .page-headline,
.contact-copy .page-subtext {
    margin-left: 0;
    margin-right: 0;
}

.contact-alt {
    margin-top: 32px;
    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.contact-alt-label {
    display: block;
    margin-bottom: 10px;

    color: var(--muted);

    font-size: 12px;
}

/* CONTACT METHODS — WhatsApp / Call / Instagram, WhatsApp visually primary
   as the fastest way to reach Webloom. */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 32px;
    padding-top: 24px;

    border-top: 1px solid var(--border);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);

    text-decoration: none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.contact-method:hover,
.contact-method:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.contact-method-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: var(--accent);
    background: var(--accent-soft);
}

.contact-method-icon svg {
    width: 20px;
    height: 20px;
}

.contact-method-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-method-title {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
}

.contact-method-value {
    color: var(--muted);
    font-size: 12px;
}

/* WhatsApp is the featured quick-contact option — called out only via a
   stronger border/background wash, not a different icon treatment, so all
   three contact icons keep the same optical weight and colour. */
.contact-method-primary {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

@media (max-width: 1050px) {
    .contact-methods {
        align-items: stretch;
    }
}

@media (max-width: 1050px) {
    .contact-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    .contact-copy {
        text-align: center;
    }

    .contact-copy .page-headline,
    .contact-copy .page-subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-alt {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   LEGAL PAGES — Privacy Policy / Terms of Service
========================================================================== */

.legal-section-wrap {
    padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px) clamp(90px, 9vw, 120px);
}

.legal-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px);

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.legal-draft-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 14px;

    border: 1px dashed var(--border-strong);
    border-radius: 999px;

    background: var(--warning-soft);
    color: var(--warning);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.legal-draft-badge svg {
    width: 13px;
    height: 13px;
}

.legal-title {
    margin: 18px 0 4px;

    color: var(--text);

    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 800;
}

.legal-updated {
    color: var(--muted);

    font-size: 13px;
    font-style: italic;
}

.legal-intro-note {
    margin-top: 22px;
    padding: 16px 18px;

    border: 1px solid var(--border-strong);
    border-radius: 12px;

    background: var(--accent-soft);
    color: var(--soft);

    font-size: 13px;
    line-height: 1.7;
}

.legal-body {
    margin-top: 44px;

    display: flex;
    flex-direction: column;
    gap: 34px;
}

.legal-section h2 {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 18px;
    font-weight: 750;
}

.legal-section p {
    margin: 0;

    color: var(--muted);

    font-size: 13.5px;
    line-height: 1.75;
}

.legal-section a {
    color: var(--soft);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-section a:hover,
.legal-section a:focus-visible {
    color: var(--accent);
}

/* ==========================================================================
   LIGHT MODE — LUMINOUS BORDER SYSTEM
   A thin champagne hairline + a faint outer glow + a soft depth shadow,
   applied to the major public-site content cards/panels only (never every
   small element) — see --border-accent / --luminous-shadow in
   webloom-tokens.css for the shared recipe both themes read from.
========================================================================== */
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .checkout-panel,
html[data-theme="light"] .checkout-summary-panel,
html[data-theme="light"] .contact-method,
html[data-theme="light"] .legal-inner,
html[data-theme="light"] .support-panel,
html[data-theme="light"] .auth-card-solo {
    border-color: var(--border-accent);
    box-shadow: var(--luminous-shadow);
}

html[data-theme="light"] .pricing-card.is-featured {
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 44px rgba(var(--accent-rgb), .22);
}