/*
 * Latisoul - stone-brutalist design system
 * Canonical design tokens live in this file.
 */

:root {
    /* Ground */
    --ground: #2a1a1c;
    --ground-deep: #1e1113;
    --ground-raise: #3a2427;
    --ink: #140b0c;

    /* Stone */
    --concrete: #b6afa9;
    --concrete-light: #d6d0ca;
    --concrete-dark: #6f6762;
    --sand: #c7a588;
    --rust: #8e3a2d;
    --rust-dark: #6a271d;
    --rust-light: #b5513f;

    /* Light & glow */
    --copper: #ff9a5c;
    --copper-hot: #ffc08f;
    --peach: #f6d9c3;
    --peach-title: #f2c4a2;
    --parchment: #f0dcc7;
    --mint: #46e0a0;

    /* Text */
    --text-on-dark: #f6e7dc;
    --text-muted-dark: #dcc6b9;
    --text-on-stone: #2a1a1c;
    --text-muted-stone: #45302f;
    --on-rust: #fde8d8;
    --link-on-stone: #6a2418;

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Shape */
    --outline: 3px solid var(--ink);
    --shadow-hard: 6px 6px 0 var(--ink);
    --shadow-hard-lg: 8px 8px 0 var(--ink);
    --radius-stone: 14px 6px 18px 8px / 8px 16px 6px 14px;
    --radius-chunk: 10px 4px 12px 6px / 6px 10px 4px 10px;

    /* Layout */
    --container: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --header-bottom: 64px;

    /* Textures */
    --tex-concrete: url("/assets/c9beff381de1bd63892efd5f885182c8.webp");
    --tex-rust: url("/assets/62338d688edeec3dd21989d487d81165.webp");
    --tint-concrete: linear-gradient(rgba(222, 216, 210, 0.32), rgba(222, 216, 210, 0.32));
    --tint-sand: linear-gradient(rgba(206, 150, 104, 0.42), rgba(206, 150, 104, 0.42));
    --tint-rust: linear-gradient(rgba(92, 28, 18, 0.34), rgba(92, 28, 18, 0.34));
    --tint-grey: linear-gradient(rgba(64, 56, 54, 0.62), rgba(64, 56, 54, 0.62));

    /* Glow */
    --glow-copper: drop-shadow(0 0 3px rgba(255, 154, 92, 0.95)) drop-shadow(0 0 10px rgba(255, 120, 60, 0.55));
    --glow-copper-strong: drop-shadow(0 0 5px rgba(255, 176, 120, 1)) drop-shadow(0 0 18px rgba(255, 120, 60, 0.8));

    /* Icons for list markers */
    --i-check: url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%273.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%2012.5l5%205L20%206%27%2F%3E%3C%2Fsvg%3E");
    --i-x: url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%273.4%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E");

    interpolate-size: allow-keywords;
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */

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

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

[class*="grid"] > *,
[class*="flex"] > * {
    min-width: 0;
}

pre, code, .code-block, [class*="code"] {
    max-width: 100%;
    overflow-x: auto;
}

pre code,
.code-block code {
    display: block;
    min-width: 0;
}

.table-wrapper,
[class*="table-"] {
    max-width: 100%;
    overflow-x: auto;
}

p, li, td, th {
    overflow-wrap: break-word;
}

details {
    height: fit-content;
}

:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

input, textarea, select {
    max-width: 100%;
}

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-on-dark);
    background-color: var(--ground);
    background-image:
        radial-gradient(1100px 620px at 50% -8%, rgba(92, 46, 40, 0.55), transparent 70%),
        radial-gradient(900px 600px at 100% 60%, rgba(70, 34, 30, 0.45), transparent 70%);
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.15rem, 7.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
h3 { font-size: clamp(1.125rem, 2.4vw, 1.3rem); font-weight: 700; }

p { margin: 0 0 1em; }

a {
    color: var(--copper-hot);
    text-underline-offset: 0.15em;
}

a:hover { color: #ffd6b5; }

:focus-visible {
    outline: 3px solid var(--copper);
    outline-offset: 3px;
}

img { display: block; }

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 100;
    padding: 10px 16px;
    font-weight: 700;
    color: var(--ink);
    background: var(--peach);
    border: var(--outline);
    text-decoration: none;
}

.skip-link:focus { top: 12px; color: var(--ink); }

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: clamp(48px, 8vw, 96px);
}

.section-title {
    color: var(--peach-title);
    font-size: clamp(1.75rem, 5vw, 2.6rem);
    margin-bottom: 12px;
}

.section-intro {
    color: var(--text-muted-dark);
    max-width: 62ch;
    margin-bottom: 28px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--copper-hot);
    margin-bottom: 10px;
}

/* Links on stone surfaces */
.slab__face a:not([class]),
.callout a:not([class]),
.faq-item__a a:not([class]),
.plaque a:not([class]),
.table-frame a:not([class]),
.ledge--concrete a:not([class]),
.ledge--sand a:not([class]),
.trust-tile a:not([class]) {
    color: var(--link-on-stone);
    font-weight: 700;
}

.slab--rust .slab__face a:not([class]) { color: var(--on-rust); }

/* Icons */
.icon {
    width: 1.5em;
    height: 1.5em;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================
   SURFACES & SIGNATURE MOTIF
   ============================================ */

.surface-concrete {
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 480px;
}

.surface-rust {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 420px;
}

/* Chipped slab: outer draws outline + hard shadow around the clipped face */
.slab {
    position: relative;
    filter:
        drop-shadow(3px 0 0 var(--ink))
        drop-shadow(-3px 0 0 var(--ink))
        drop-shadow(0 3px 0 var(--ink))
        drop-shadow(0 -3px 0 var(--ink))
        drop-shadow(8px 8px 0 var(--ink));
}

.slab__face {
    position: relative;
    padding: clamp(24px, 5vw, 48px);
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 520px;
    clip-path: polygon(0 1.2%, 2.5% 0, calc(100% - 58px) 0, 100% 46px, 100% 97.5%, 97% 100%, 5% 100%, 0 calc(100% - 20px));
}

.slab--rust .slab__face {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
}

.crack {
    position: absolute;
    pointer-events: none;
    color: rgba(38, 26, 26, 0.55);
    overflow: visible;
}

.crack path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glow {
    color: var(--copper);
    filter: var(--glow-copper);
    animation: glow-pulse 3.4s ease-in-out infinite;
}

/* Copper vein network - full-coverage SVG layer authored per page */
.veins {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
    filter: drop-shadow(0 0 4px rgba(255, 154, 92, 0.95)) drop-shadow(0 0 14px rgba(255, 110, 50, 0.6));
    animation: vein-pulse 4s ease-in-out infinite;
}

.veins path {
    fill: none;
    stroke: var(--copper);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.veins path.core {
    stroke: var(--copper-hot);
    stroke-width: 1.2;
}

.veins path.thin { stroke-width: 1.8; }

.live-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 50%;
    background: var(--mint);
    border: 2px solid var(--ink);
    animation: live-ping 1.8s ease-out infinite;
}

.sticker {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--ink);
    background: var(--peach);
    border: 2px solid var(--ink);
    border-radius: 6px 3px 7px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-4deg);
}

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

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 26px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 360px;
    border: var(--outline);
    border-radius: var(--radius-chunk);
    box-shadow: 5px 5px 0 var(--ink);
    text-shadow: 0 1px 0 rgba(40, 10, 6, 0.6);
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
    color: var(--on-rust);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}

.btn:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--ink);
    transition-duration: 0.05s;
}

.btn--sm {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 1rem;
    box-shadow: 4px 4px 0 var(--ink);
}

.btn--lg {
    min-height: 60px;
    padding: 14px 36px;
    font-size: 1.3rem;
}

.btn--sparks { margin-right: 56px; }

.btn__sparks {
    position: absolute;
    left: calc(100% - 4px);
    top: 50%;
    width: 64px;
    height: 40px;
    translate: 0 -50%;
    color: var(--copper);
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(255, 154, 92, 0.95)) drop-shadow(0 0 8px rgba(255, 110, 50, 0.6));
}

.btn__sparks path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.btn:hover .btn__sparks path,
.btn:focus-visible .btn__sparks path {
    animation: spark-flicker 0.6s steps(4) infinite;
}

.section-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 32px;
}

.section-cta--center { align-items: center; text-align: center; }

.section-cta__note {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted-dark);
}

/* Tick row */
.tick-row {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-on-stone);
}

.tick-row li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tick-row__icon {
    width: 1.15em;
    height: 1.15em;
    color: var(--rust-dark);
    stroke-width: 3;
}

.tick-row--dark { color: var(--text-on-dark); justify-content: center; }
.tick-row--dark .tick-row__icon { color: var(--copper); filter: var(--glow-copper); }

/* Chips (stone stickers) */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    background-color: var(--concrete-light);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 320px;
    border: 2px solid var(--ink);
    border-radius: 8px 4px 9px 5px;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.12s, box-shadow 0.12s;
}

.chip:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.chip.is-active {
    background-color: var(--copper-hot);
    background-image: none;
    box-shadow: 3px 3px 0 var(--ink), 0 0 16px rgba(255, 154, 92, 0.8);
}

/* Callout */
.callout {
    position: relative;
    padding: 24px 22px 24px 38px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 480px;
    border: var(--outline);
    border-radius: 6px 12px 8px 4px;
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}

.callout::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 300px;
    border-right: 3px solid var(--ink);
}

/* Lists */
.checklist,
.xlist {
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
    display: grid;
    gap: 10px;
}

.checklist li,
.xlist li {
    position: relative;
    padding-left: 34px;
}

.checklist li::before,
.xlist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 22px;
    height: 22px;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
    background: var(--copper);
}

.xlist li::before {
    -webkit-mask-image: var(--i-x);
    mask-image: var(--i-x);
    background: #3b3536;
}

.surface-concrete .checklist li::before,
.slab__face .checklist li::before { background: var(--rust-dark); }

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 520px;
    border-bottom: 3px solid var(--ink);
    box-shadow: 0 5px 0 rgba(10, 5, 6, 0.55);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: auto;
    text-decoration: none;
}

.site-brand__text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #3a2829;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6), -1px -1px 0 rgba(0, 0, 0, 0.45);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions .header-cta { display: none; }

.nav-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background-color: var(--concrete-light);
    border: var(--outline);
    border-radius: 8px 4px 9px 5px;
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.nav-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, background-color 0.2s;
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav {
    position: fixed;
    top: var(--header-bottom);
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 55;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px var(--gutter) 40px;
    background-color: var(--ground-deep);
    visibility: hidden;
    transform: translateY(-12px);
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.site-nav.is-open {
    visibility: visible;
    transform: none;
    transition: transform 0.22s ease, visibility 0s;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 10px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
    text-decoration: none;
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 420px;
    border: var(--outline);
    border-radius: var(--radius-stone);
    box-shadow: 4px 4px 0 var(--ink);
}

.site-nav__link:hover { color: var(--ink); }

.site-nav__link[aria-current="page"] {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
}

.site-nav__cta {
    margin-top: 28px;
    display: grid;
    justify-items: start;
    gap: 12px;
}

.site-nav__note {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted-dark);
}

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

.site-footer {
    margin-top: clamp(24px, 5vw, 56px);
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 520px;
    border-top: 3px solid var(--ink);
    box-shadow: 0 -5px 0 rgba(10, 5, 6, 0.55);
}

.site-footer__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding-block: 36px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
}

.footer-heart {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    justify-items: center;
    text-align: center;
}

.footer-heart__icon {
    width: 64px;
    height: 64px;
}

.footer-heart__brand {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: #3a2829;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6), -1px -1px 0 rgba(0, 0, 0, 0.4);
}

.footer-heart__tagline {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted-stone);
}

.footer-group__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rust-dark);
}

.footer-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--text-on-stone);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.footer-link:hover,
.footer-link[aria-current="page"] { color: var(--link-on-stone); }

.site-footer__legal {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding-block: 16px 28px;
    border-top: 2px solid rgba(20, 11, 12, 0.5);
    font-size: 0.9375rem;
    color: var(--text-muted-stone);
    text-align: center;
}

.site-footer__legal p { margin: 0 0 6px; }

.age-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.age-badge {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 30px;
    padding: 0 8px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--on-rust);
    background-color: var(--rust);
    border: 2px solid var(--ink);
    border-radius: 6px;
}

/* ============================================
   HERO (shared basics)
   ============================================ */

.hero {
    position: relative;
    padding-block: clamp(24px, 5vw, 64px) clamp(40px, 7vw, 80px);
}

.hero__art {
    position: relative;
    z-index: 1;
}

.hero__art img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.hero__title { color: var(--text-on-stone); }

.hero__sub {
    font-size: 1.0625rem;
    color: var(--text-muted-stone);
    max-width: 52ch;
}

.hero__micro {
    margin: 12px 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted-stone);
}

/* ============================================
   COUNTER PILLAR
   ============================================ */

.counter-pillar__face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px 18px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 420px;
    border: var(--outline);
    border-radius: 22px 10px 26px 14px / 14px 24px 10px 20px;
    box-shadow: var(--shadow-hard);
}

.counter-pillar__heart {
    width: 46px;
    height: 46px;
}

.flap-board {
    display: flex;
    gap: 8px;
}

.flap-row {
    display: flex;
    gap: 4px;
}

.flap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2.6rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: #f1e8e2;
    background: linear-gradient(#4d4746 50%, #3a3433 50%);
    border: 2px solid var(--ink);
    border-radius: 6px;
    box-shadow: 2px 3px 0 var(--ink);
    perspective: 200px;
}

.flap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--ink);
}

.flap > span {
    display: block;
    animation: flap-flip 3.2s ease-in-out infinite;
    transform-origin: 50% 50%;
}

.flap-row .flap:nth-child(2) > span { animation-delay: 0.25s; }
.flap-row .flap:nth-child(3) > span { animation-delay: 0.5s; }
.flap-row + .flap-row .flap:nth-child(1) > span { animation-delay: 0.75s; }
.flap-row + .flap-row .flap:nth-child(2) > span { animation-delay: 1s; }
.flap-row + .flap-row .flap:nth-child(3) > span { animation-delay: 1.25s; }

.counter-pillar__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.05;
    color: var(--text-on-stone);
}

/* ============================================
   PROFILE CARDS & CAROUSEL
   ============================================ */

.carousel {
    position: relative;
}

.carousel__track {
    --card-gap: 26px;
    display: flex;
    gap: var(--card-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(50% - 50vw);
    padding: 22px max(var(--gutter), calc(50vw - 620px)) 36px;
    scroll-padding-inline: max(var(--gutter), calc(50vw - 620px));
    scrollbar-width: none;
    cursor: grab;
}

.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.carousel__track:focus-visible { outline-offset: -6px; }

.carousel__arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 56px;
    height: 56px;
    place-items: center;
    padding: 0;
    color: var(--ink);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 300px;
    border: var(--outline);
    border-radius: 12px 6px 14px 8px;
    box-shadow: 4px 4px 0 var(--ink);
    translate: 0 -50%;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.carousel__arrow .icon { width: 28px; height: 28px; stroke-width: 3; }
.carousel__arrow:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.carousel__arrow:disabled { cursor: default; background-color: var(--concrete-dark); background-image: none; color: #2a2324; }
.carousel__arrow--prev { left: 8px; }
.carousel__arrow--next { right: 8px; }

.profile-card {
    --rot: 0deg;
    --lift: 0px;
    position: relative;
    flex: 0 0 clamp(220px, 68vw, 268px);
    scroll-snap-align: center;
    padding: 14px 14px 18px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 420px;
    border: var(--outline);
    border-radius: var(--radius-stone);
    box-shadow: var(--shadow-hard);
    transform: translateY(var(--lift)) rotate(calc(var(--rot) + var(--tilt, 0deg)));
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    cursor: pointer;
}

.profile-card:nth-child(odd) { --rot: -1.6deg; }

.profile-card:nth-child(even) {
    --rot: 1.4deg;
    background-color: var(--sand);
    background-image: var(--tint-sand), var(--tex-concrete);
}

.profile-card:hover,
.profile-card:focus-within {
    --lift: -6px;
    box-shadow: 9px 9px 0 var(--ink);
}

/* copper bridge toward the next card */
.profile-card::after {
    content: "";
    position: absolute;
    top: 56%;
    left: calc(100% + 3px);
    width: calc(var(--card-gap, 26px) - 2px);
    height: 3px;
    background: var(--copper);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--copper), 0 0 14px rgba(255, 110, 50, 0.65);
    pointer-events: none;
}

.profile-card:last-child::after { display: none; }

.profile-card__fuse {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    overflow: visible;
    filter: var(--glow-copper);
    transition: filter 0.2s ease;
}

.profile-card__fuse path {
    fill: none;
    stroke: var(--copper);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.profile-card:hover .profile-card__fuse,
.profile-card:focus-within .profile-card__fuse { filter: var(--glow-copper-strong); }

.profile-card__photo {
    position: relative;
    aspect-ratio: 640 / 760;
    overflow: hidden;
    background: #6b5a57;
    border: 3px solid var(--ink);
    border-radius: 10px 6px 12px 8px;
}

.profile-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    -webkit-user-drag: none;
    user-select: none;
}

.profile-card__sticker {
    position: absolute;
    left: 8px;
    top: 10px;
}

.profile-card__badge {
    position: absolute;
    right: 8px;
    top: 10px;
    padding: 3px 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 200px;
    border: 2px solid var(--ink);
    border-radius: 5px 3px 6px 4px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(3deg);
}

.profile-card__body { padding: 12px 4px 0; }

.profile-card__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 0.9375rem;
}

.profile-card__meta {
    display: grid;
    gap: 2px;
    margin: 0 0 10px;
}

.profile-card__meta > div {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.profile-card__meta dt {
    min-width: 58px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-muted-stone);
}

.profile-card__meta dd {
    margin: 0;
    font-weight: 700;
}

.profile-card__tags {
    list-style: none;
    margin: 0;
    padding: 0 56px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-card__tags li {
    padding: 2px 10px;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--concrete-light);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.profile-card__like {
    position: absolute;
    right: 12px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 200px;
    border: var(--outline);
    border-radius: 10px 6px 12px 7px;
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.profile-card__like .icon { width: 24px; height: 24px; fill: currentColor; }
.profile-card__like:hover .icon { animation: heart-beat 0.7s ease-in-out infinite; }
.profile-card__like:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ============================================
   STEP LEDGES
   ============================================ */

.ledges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.ledge {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    padding: 18px 18px 20px;
    border: var(--outline);
    border-radius: 6px 22px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard);
    margin-top: -3px;
}

.ledge:nth-child(1) { width: 88%; z-index: 3; }
.ledge:nth-child(2) { width: 94%; z-index: 2; }
.ledge:nth-child(3) { width: 100%; z-index: 1; }

.ledge--concrete {
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
}

.ledge--sand {
    color: var(--text-on-stone);
    background-color: var(--sand);
    background-image: var(--tint-sand), var(--tex-concrete);
    background-size: auto, 460px;
}

.ledge--rust {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 420px;
}

.ledge__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 8vw, 3.6rem);
    line-height: 0.9;
    color: #625a56;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55), -1px -1px 0 rgba(0, 0, 0, 0.4);
}

.ledge--sand .ledge__num { color: #6d5341; }
.ledge--rust .ledge__num { color: #4a1912; text-shadow: 1px 1px 0 rgba(255, 190, 160, 0.35), -1px -1px 0 rgba(0, 0, 0, 0.45); }

.ledge__icon {
    display: grid;
    place-items: center;
    color: var(--rust-dark);
}

.ledge__icon .icon { width: 40px; height: 40px; }
.ledge__icon.glow { color: var(--copper); }

.ledge__title { margin: 0 0 2px; font-size: 1.15rem; }
.ledge__text { margin: 0; font-size: 1rem; }

/* ============================================
   TRUST TILES
   ============================================ */

.trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 20px;
}

.trust-tile {
    display: grid;
    justify-items: center;
    text-align: center;
    color: var(--text-on-stone);
}

.trust-tile__icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin-bottom: 10px;
    color: var(--on-rust);
    border: var(--outline);
    border-radius: 12px 6px 14px 8px;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform 0.12s, box-shadow 0.12s;
}

.trust-tile__icon .icon { width: 44px; height: 44px; }

.trust-tile__icon--rust {
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 240px;
}

.trust-tile__icon--grey {
    background-color: #5a5250;
    background-image: var(--tint-grey), var(--tex-concrete);
    background-size: auto, 240px;
}

.trust-tile__icon--mint {
    box-shadow: 5px 5px 0 var(--ink), 0 0 22px rgba(70, 224, 160, 0.55);
}

.trust-tile:hover .trust-tile__icon {
    transform: translate(4px, 4px);
    box-shadow: 1px 1px 0 var(--ink);
}

.trust-tile:hover .trust-tile__icon--mint {
    box-shadow: 1px 1px 0 var(--ink), 0 0 26px rgba(70, 224, 160, 0.7);
}

.trust-tile__title { margin: 0 0 4px; font-size: 1.2rem; }
.trust-tile__text { margin: 0; font-size: 1rem; color: var(--text-muted-stone); max-width: 30ch; }

/* ============================================
   STORY PLAQUES & STAGE
   ============================================ */

.plaque {
    padding: 12px;
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 360px;
    border: var(--outline);
    border-radius: 6px 10px 4px 8px;
    box-shadow: var(--shadow-hard);
}

.plaque__inner {
    padding: 18px 18px 16px;
    color: var(--text-on-stone);
    background: var(--parchment);
    border: 2px solid var(--ink);
    border-radius: 3px;
    box-shadow: inset 0 0 0 4px rgba(180, 140, 110, 0.25);
}

.plaque__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.plaque__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    color: var(--peach);
    background: #5c4442;
    border: 2px solid var(--ink);
    border-radius: 6px;
}

.plaque__avatar .icon { width: 32px; height: 32px; }

.plaque__label {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a2c20;
}

.plaque__title { margin: 0; font-size: 1.15rem; }
.plaque__text { margin: 0; font-size: 1rem; }

.plaque-stage {
    position: relative;
    isolation: isolate;
    padding-block: 0 clamp(48px, 8vw, 80px);
}

.plaque-stage__title {
    text-align: center;
    padding-top: clamp(40px, 7vw, 64px);
}

.plaque-stage__visual {
    height: clamp(260px, 62vw, 400px);
    background-image: var(--stage-bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 62%;
    border-block: 3px solid var(--ink);
}

.plaque-stage__grid {
    display: grid;
    gap: 24px;
    margin-top: 28px;
}

.plaque-stage__note {
    text-align: center;
    color: var(--text-muted-dark);
    margin: 24px auto 0;
    max-width: 60ch;
}

.plaque-stage .section-cta { align-items: center; text-align: center; }

/* ============================================
   STONE TABLES
   ============================================ */

.table-frame {
    padding: 10px;
    background-color: var(--concrete-dark);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 420px;
    border: var(--outline);
    border-radius: 10px 4px 12px 6px;
    box-shadow: var(--shadow-hard-lg);
}

.table-scroll {
    overflow-x: auto;
    border: 3px solid var(--ink);
    border-radius: 4px;
}

.stone-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-on-stone);
}

.stone-table--wide { min-width: 640px; }

.stone-table caption {
    caption-side: bottom;
    padding: 10px 6px 2px;
    font-size: 0.875rem;
    text-align: left;
    color: var(--text-on-stone);
    background: var(--concrete-light);
}

.stone-table th,
.stone-table td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 2px solid rgba(20, 11, 12, 0.5);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 420px;
}

.stone-table thead th {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    vertical-align: bottom;
    border-bottom: 3px solid var(--ink);
}

.stone-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 700;
    background-color: var(--concrete-light);
    border-right: 3px solid var(--ink);
}

.stone-table .is-brand {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 380px;
    border-left: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
}

.stone-table tbody tr:last-child th,
.stone-table tbody tr:last-child td { border-bottom: 0; }

.cell-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 6px;
    vertical-align: -5px;
    stroke-width: 3;
}

.cell-icon--yes { color: var(--copper-hot); filter: var(--glow-copper); }
.cell-icon--no { color: #3b3536; }

.th-icon {
    display: block;
    width: 34px;
    height: 34px;
    margin-top: 6px;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.faq-item {
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
    border: var(--outline);
    border-radius: 8px 4px 10px 6px;
    box-shadow: 5px 5px 0 var(--ink);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px 12px 18px;
    list-style: none;
    cursor: pointer;
}

.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::marker { content: ""; }

.faq-item__summary:focus-visible {
    outline: 3px solid var(--copper);
    outline-offset: 3px;
}

.faq-item__q {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-on-stone);
}

.faq-item__chev {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    background: var(--concrete-light);
    border: 2px solid var(--ink);
    border-radius: 7px 4px 8px 5px;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.2s ease;
}

.faq-item__chev .icon { width: 22px; height: 22px; stroke-width: 3; }
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }

.faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.2s ease, content-visibility 0.2s allow-discrete;
}

.faq-item[open]::details-content { block-size: auto; }

.faq-item__a {
    padding: 2px 18px 18px 30px;
    border-top: 2px dashed rgba(20, 11, 12, 0.45);
    margin-inline: 12px;
    padding-top: 12px;
}

.faq-item__a > :last-child { margin-bottom: 0; }

/* ============================================
   SUNBURST CTA
   ============================================ */

.burst {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 64px 24px;
}

.burst__rays {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: min(460px, 130%);
    height: auto;
    translate: -50% -50%;
    color: var(--copper);
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(255, 154, 92, 0.7));
    animation: spin 70s linear infinite;
    transition: filter 0.25s ease;
}

.burst__rays line {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.burst:hover .burst__rays { filter: drop-shadow(0 0 6px rgba(255, 170, 110, 1)) drop-shadow(0 0 16px rgba(255, 120, 60, 0.7)); }

.cta-section__inner {
    display: grid;
    justify-items: center;
    text-align: center;
}

.cta-section__line {
    font-size: 1.15rem;
    color: var(--text-muted-dark);
    max-width: 48ch;
    margin: 0;
}

.cta-section__note {
    margin: 4px 0 0;
    color: var(--text-muted-dark);
}

/* ============================================
   REVEAL
   ============================================ */

.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--d, 0ms);
}

.js .reveal--left { transform: translateX(-64px); }

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Pause loops offscreen / when tab is hidden */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after,
.is-doc-hidden *,
.is-doc-hidden *::before,
.is-doc-hidden *::after {
    animation-play-state: paused !important;
}

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 154, 92, 0.9)) drop-shadow(0 0 8px rgba(255, 120, 60, 0.45)); }
    50% { filter: drop-shadow(0 0 5px rgba(255, 176, 120, 1)) drop-shadow(0 0 18px rgba(255, 120, 60, 0.8)); }
}

@keyframes vein-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 154, 92, 0.85)) drop-shadow(0 0 10px rgba(255, 110, 50, 0.45)); }
    50% { filter: drop-shadow(0 0 5px rgba(255, 176, 120, 1)) drop-shadow(0 0 18px rgba(255, 110, 50, 0.75)); }
}

@keyframes live-ping {
    0% { box-shadow: 0 0 0 0 rgba(70, 224, 160, 0.75); }
    100% { box-shadow: 0 0 0 10px rgba(70, 224, 160, 0); }
}

@keyframes spark-flicker {
    0% { stroke-dashoffset: 0; }
    25% { stroke-dashoffset: 18; }
    50% { stroke-dashoffset: 4; }
    75% { stroke-dashoffset: 30; }
    100% { stroke-dashoffset: 0; }
}

@keyframes flap-flip {
    0%, 84% { transform: rotateX(0deg); }
    90% { transform: rotateX(90deg); }
    96%, 100% { transform: rotateX(0deg); }
}

@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.2); }
}

@keyframes spin {
    to { rotate: 360deg; }
}

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

@media (min-width: 400px) {
    .header-actions .header-cta { display: inline-flex; }
}

@media (min-width: 480px) {
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .site-header__inner { min-height: 76px; gap: 16px; }
    .site-brand__text { font-size: 2.1rem; }

    .nav-toggle { display: none; }

    .site-nav {
        position: static;
        visibility: visible;
        transform: none;
        transition: none;
        overflow: visible;
        padding: 0;
        background: none;
        height: auto;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .site-nav__link {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 1rem;
        color: #2f2122;
        background: none;
        border: 2px solid transparent;
        border-radius: 8px 4px 9px 5px;
        box-shadow: none;
        transition: background-color 0.12s, box-shadow 0.12s, border-color 0.12s;
    }

    .site-nav__link:hover {
        color: var(--ink);
        background-color: var(--concrete-light);
        border-color: var(--ink);
        box-shadow: 3px 3px 0 var(--ink);
    }

    .site-nav__link[aria-current="page"] {
        color: var(--ink);
        background: none;
        box-shadow: inset 0 -4px 0 var(--rust);
    }

    .site-nav__cta { display: none; }

    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        padding-block: 40px 24px;
    }

    .footer-heart { grid-column: 2; grid-row: 1; }
    .footer-group--left { grid-column: 1; grid-row: 1; }
    .footer-group--right { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
    .footer-group--right .footer-group__list { justify-items: end; }

    .footer-heart__icon { width: 76px; height: 76px; }

    .ledge { padding: 20px 26px 22px; gap: 10px 20px; }
    .ledge:nth-child(1) { width: 74%; }
    .ledge:nth-child(2) { width: 87%; }

    .stone-table { font-size: 1rem; }
    .stone-table th,
    .stone-table td { padding: 14px 16px; }

    .faq-item__q { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
    .site-nav__list { gap: 10px; }
    .site-nav__link { padding: 8px 14px; }

    .carousel__arrow { display: grid; }

    .profile-card { flex-basis: 248px; }

    .counter-pillar__face {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 18px;
        padding: 26px 16px 28px;
        min-height: 100%;
        border-radius: 34px 18px 40px 22px / 26px 36px 18px 30px;
    }

    .counter-pillar__heart { width: 64px; height: 64px; }

    .flap-board { flex-direction: column; gap: 22px; align-items: center; }
    .flap { width: 2.3rem; height: 3rem; font-size: 1.8rem; }

    .counter-pillar__label {
        flex-direction: column;
        text-align: center;
        font-size: 1.5rem;
    }

    .plaque-stage {
        padding-block: 72px 80px;
        min-height: 620px;
    }

    .plaque-stage__visual {
        position: absolute;
        inset: 0;
        height: auto;
        z-index: -1;
        background-position: 50% 50%;
    }

    .plaque-stage__title { color: var(--ink); padding-top: 0; }

    .plaque-stage__grid {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 0.62fr) minmax(0, 1fr);
        align-items: center;
        margin-top: 40px;
    }

    .plaque-stage__grid > :nth-child(2) { grid-column: 3; }

    .plaque-stage__note { color: var(--ink); font-weight: 700; }
}

@media (min-width: 1280px) {
    .profile-card { flex-basis: 260px; }
}

/* ============================================
   HOMEPAGE
   ============================================ */

.home-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.home-hero__veins { display: none; }
.home-hero__veins path { vector-effect: non-scaling-stroke; }

.home-hero__collage {
    width: min(100%, 460px);
    justify-self: center;
}

.home-hero__slab,
.home-hero__pillar {
    position: relative;
    z-index: 1;
}

.home-hero__slab { display: flex; }
.home-hero__slab .slab__face { flex: 1; }

.home-hero__crack {
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero__crack path { vector-effect: non-scaling-stroke; }

.home-hero__copy { position: relative; }

.hero-slab__heart {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

.home-hero .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }

/* Steps + trust split */
.home-split {
    --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-block: clamp(48px, 8vw, 96px);
    overflow-x: clip;
}

.home-split > * { min-width: 0; }
.home-split > section { overflow: visible; }

.home-steps__head,
.home-steps .section-cta { padding-inline: var(--edge); }

.home-steps .ledges { padding-right: var(--gutter); }

.home-steps .ledge {
    margin-left: -3px;
    padding-left: calc(var(--gutter) + 3px);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.home-trust { padding-inline: var(--gutter); }

.home-trust__title {
    color: var(--text-on-stone);
    font-size: clamp(1.75rem, 5vw, 2.4rem);
    margin-bottom: 8px;
}

.home-trust__intro {
    color: var(--text-muted-stone);
    margin-bottom: 26px;
}

.home-trust__more {
    margin: 28px 0 0;
    font-size: 1rem;
    color: var(--text-on-stone);
}

.home-trust .section-cta { margin-top: 20px; }

/* Stories */
.home-stories {
    --stage-bg: url("/assets/aad492e6e45ac3dc586201ac6acdd745.webp");
}

/* Comparison + FAQ */
.home-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 8vw, 72px);
    padding-block: clamp(48px, 8vw, 96px) 0;
}

.home-pair > * { min-width: 0; }
.home-pair > .section { padding-block: 0; }

.home-compare__table { min-width: 540px; }

.home-compare__table thead th {
    position: relative;
    overflow: hidden;
}

.home-compare__th {
    position: relative;
    display: block;
}

.home-compare__crack {
    top: 0;
    left: 0;
    width: 70px;
    height: 60px;
}

.home-compare__crack--right { left: auto; right: 0; }
.home-compare__table .is-brand .crack { color: rgba(30, 8, 4, 0.6); }

.th-icon--broken { color: #3b3536; }

/* ============================================
   LOCAL SINGLES
   ============================================ */

/* Hero */
.ls-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.ls-hero__veins { display: none; }
.ls-hero__veins path { vector-effect: non-scaling-stroke; }

.ls-hero__collage {
    width: min(100%, 500px);
    justify-self: center;
}

.ls-hero__slab {
    position: relative;
    z-index: 1;
    display: flex;
}

.ls-hero__slab .slab__face { flex: 1; }

.ls-hero__crack {
    inset: 0;
    width: 100%;
    height: 100%;
}

.ls-hero__crack path { vector-effect: non-scaling-stroke; }

.ls-hero__copy { position: relative; }

.ls-hero .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }

.ls-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 12px;
}

.ls-hero__pin {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    color: var(--copper);
    filter: var(--glow-copper);
}

.ls-hero__pin .icon { width: 28px; height: 28px; stroke-width: 2.4; }

.ls-hero__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ls-hero__ring circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-dasharray: 120 8;
}

/* How-to tablets */
.ls-tablets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.ls-tablet {
    position: relative;
    padding: 20px 20px 22px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
    border: var(--outline);
    border-radius: 6px 22px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard);
}

.ls-tablet:nth-child(even) {
    background-color: var(--sand);
    background-image: var(--tint-sand), var(--tex-concrete);
}

.ls-tablet__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ls-tablet__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.6rem, 12vw, 5rem);
    line-height: 0.85;
    color: #625a56;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55), -1px -1px 0 rgba(0, 0, 0, 0.4);
}

.ls-tablet:nth-child(even) .ls-tablet__num { color: #6d5341; }

.ls-tablet__icon {
    width: 44px;
    height: 44px;
    color: var(--rust-dark);
}

.ls-tablet__title { margin: 0 0 6px; font-size: 1.2rem; }
.ls-tablet p:last-child { margin: 0; }

/* Activity feed pillar */
.ls-feed__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

.ls-pillar {
    position: relative;
    width: min(100%, 440px);
    justify-self: center;
    padding-inline: 22px;
}

.ls-pillar .ls-pillar__vein {
    inset: 0 auto 0 auto;
    top: 0;
    bottom: 0;
    width: 22px;
    height: 100%;
}

.ls-pillar .ls-pillar__vein path { vector-effect: non-scaling-stroke; }
.ls-pillar .ls-pillar__vein--left { left: 0; }
.ls-pillar .ls-pillar__vein--right { right: 0; }

.ls-pillar__face {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 22px 16px 18px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
    border: var(--outline);
    border-radius: 18px 8px 22px 10px / 10px 20px 8px 16px;
    box-shadow: var(--shadow-hard-lg);
}

.ls-pillar__cap { width: 56px; height: 56px; }

.ls-pillar__label { margin: 0; }

.ls-feed__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    gap: 10px;
}

.ls-feed__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    font-weight: 700;
    line-height: 1.3;
    background: var(--concrete-light);
    border: 2px solid var(--ink);
    border-radius: 8px 4px 9px 5px;
    box-shadow: 3px 3px 0 var(--ink);
}

.ls-feed__row.is-new { animation: feed-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

.ls-feed__icon {
    width: 26px;
    height: 26px;
    color: var(--rust-dark);
}

.ls-pillar__note {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted-stone);
}

/* Expect checklist ledge */
.ls-expect__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.ls-note { color: var(--text-muted-dark); max-width: 62ch; }

.ls-ledge {
    list-style: none;
    margin: 0;
    padding: 24px 20px;
    display: grid;
    gap: 16px;
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 420px;
    border: var(--outline);
    border-radius: 6px 22px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard-lg);
}

.ls-ledge li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ls-ledge__check {
    width: 30px;
    height: 30px;
    margin-top: -2px;
    color: var(--copper-hot);
    stroke-width: 3.4;
    filter: var(--glow-copper);
}

.js .ls-ledge .ls-ledge__check { transform: scale(0); }

.js .ls-ledge li.is-visible .ls-ledge__check {
    animation: stamp-in 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s both;
}

/* Cities table */
.ls-cities-frame { position: relative; }

.ls-cities__crack {
    z-index: 2;
    width: 70px;
    height: 60px;
}

.ls-cities__crack--tl { top: 0; left: 0; }
.ls-cities__crack--br { bottom: 0; right: 0; }

.ls-cities thead th {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 380px;
}

.ls-cities tbody tr:nth-child(even) > * {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--tint-concrete), var(--tex-concrete);
    background-size: auto, auto, 420px;
}

.ls-cities tbody th[scope="row"] { font-family: var(--font-display); font-weight: 800; }

/* Safety tiles */
.ls-safe {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.ls-safe__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
    border: var(--outline);
    border-radius: 6px 18px 8px 4px / 4px 10px 8px 6px;
    box-shadow: var(--shadow-hard);
}

.ls-safe__item .trust-tile__icon {
    flex: none;
    width: 64px;
    height: 64px;
    margin: 0;
}

.ls-safe__item .trust-tile__icon .icon { width: 36px; height: 36px; }
.ls-safe__item h3 { margin: 0 0 4px; font-size: 1.15rem; }
.ls-safe__item p { margin: 0; }

/* Stories */
.ls-stories {
    --stage-bg: url("/assets/5becfd91a1cf95b9aa207c5a5a2f4bb1.webp");
}

.ls-stories .plaque-stage__visual { background-position: 50% 85%; }
.ls-stories .section-cta { margin-top: 20px; }

/* FAQ */
.ls-faq .faq-list { max-width: 860px; }

@keyframes feed-in {
    from { transform: translateY(36px); }
    to { transform: none; }
}

@keyframes stamp-in {
    0% { transform: scale(2.4) rotate(-14deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 767px) {
    .ls-cities thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ls-cities,
    .ls-cities tbody,
    .ls-cities tr,
    .ls-cities th,
    .ls-cities td { display: block; width: 100%; }

    .ls-cities tbody tr {
        margin-bottom: 14px;
        border: 3px solid var(--ink);
        border-radius: 8px 4px 10px 6px;
        box-shadow: 4px 4px 0 var(--ink);
        overflow: hidden;
    }

    .ls-cities tbody th[scope="row"] {
        position: static;
        font-size: 1.15rem;
        border-right: 0;
        color: var(--on-rust);
        background-color: var(--rust);
        background-image: var(--tint-rust), var(--tex-rust);
        background-size: auto, 380px;
    }

    .ls-cities tbody tr:nth-child(even) > th { background-image: var(--tint-rust), var(--tex-rust); background-size: auto, 380px; }

    .ls-cities tbody td { border-bottom: 2px solid rgba(20, 11, 12, 0.5); }

    .ls-cities td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rust-dark);
    }

    .ls-cities caption { display: block; }
}

@media (min-width: 768px) {
    .ls-tablets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-tablet { padding: 24px 26px 26px; }

    .ls-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-safe__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .ls-ledge { padding: 30px 32px; }
}

@media (min-width: 1024px) {
    .ls-hero__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
        gap: 32px;
    }

    .ls-hero__veins { display: block; }
    .ls-hero__collage { width: 100%; }
    .ls-hero .hero__title { font-size: clamp(2.2rem, 3.2vw, 3rem); }

    .ls-feed__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
    }

    .ls-pillar { justify-self: end; }

    .ls-expect__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 56px;
    }

    .ls-stories__inner {
        display: flex;
        flex-direction: column;
    }

    .ls-stories__panel {
        width: min(100%, 620px);
        margin: 0 auto;
        padding: 26px 32px 30px;
        text-align: center;
        color: var(--text-on-stone);
        background-color: var(--concrete);
        background-image: var(--tint-concrete), var(--tex-concrete);
        background-size: auto, 480px;
        border: var(--outline);
        border-radius: 8px 4px 10px 6px;
        box-shadow: var(--shadow-hard);
    }

    .ls-stories__panel .plaque-stage__title { margin-bottom: 8px; }
    .ls-stories__panel .plaque-stage__note { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .js .ls-ledge .ls-ledge__check { transform: none; }
}

.home-pair__more {
    margin: 20px 0 0;
    color: var(--text-muted-dark);
}

@media (min-width: 768px) {
    .home-hero__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .home-hero__collage { width: 100%; }
    .home-hero__pillar { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 42fr) minmax(0, 40fr) minmax(0, 14fr);
        align-items: stretch;
        gap: 24px;
    }

    .home-hero__veins { display: block; }
    .home-hero__collage { align-self: center; }
    .home-hero__pillar { grid-column: auto; }
    .home-hero__pillar .counter-pillar { height: 100%; }
    .home-hero .hero__title { font-size: clamp(2.2rem, 3.1vw, 2.9rem); }

    .home-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 40px;
    }

    .home-steps .ledges { padding-right: 0; }
    .home-steps .ledge { padding-left: calc(var(--edge) + 3px); }

    .home-trust { padding-inline: 0; }
    .home-trust .slab { margin-right: -3px; }
    .home-trust .slab__face { padding-right: calc(var(--edge) + 16px); }

    .home-stories__inner {
        display: flex;
        flex-direction: column;
    }

    .home-stories .plaque-stage__grid { order: 3; }
    .home-stories .plaque-stage__note { margin-top: 8px; }

    .home-pair {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal,
    .js .reveal--left {
        opacity: 1;
        transform: none;
    }

    .glow { filter: var(--glow-copper); }
    .profile-card { transform: rotate(var(--rot)); }
    .faq-item::details-content { transition: none; }
}

/* ============================================
   BEST DATING SITES
   ============================================ */

/* Hero */
.bs-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.bs-hero__veins { display: none; }
.bs-hero__veins path { vector-effect: non-scaling-stroke; }

.bs-hero__art {
    width: min(100%, 460px);
    justify-self: center;
}

.bs-hero__slab {
    position: relative;
    z-index: 1;
    display: flex;
}

.bs-hero__slab .slab__face { flex: 1; }

.bs-hero__crack {
    inset: 0;
    width: 100%;
    height: 100%;
}

.bs-hero__crack path { vector-effect: non-scaling-stroke; }

.bs-hero__copy { position: relative; }

.bs-hero__scale {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

.bs-hero .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }

.bs-updated {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted-stone);
}

.bs-hero__chips { margin-bottom: 24px; }
.bs-hero__chips li:nth-child(odd) { transform: rotate(-1.4deg); }
.bs-hero__chips li:nth-child(even) { transform: rotate(1.2deg); }

.bs-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Quick answer */
.bs-quick { max-width: 920px; }

.bs-lead {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 3.6vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-on-stone);
}

.callout .checklist li::before { background: var(--rust-dark); }
.bs-quick__more { margin: 0; }

/* Criteria ledges */
.bs-ledges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.bs-ledge {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    color: var(--text-on-stone);
    border: var(--outline);
    border-radius: 6px 22px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard);
}

.bs-ledge--concrete {
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
}

.bs-ledge--sand {
    background-color: var(--sand);
    background-image: var(--tint-sand), var(--tex-concrete);
    background-size: auto, 460px;
}

.bs-ledge__icon {
    display: grid;
    place-items: center;
    color: var(--rust-dark);
}

.bs-ledge__icon .icon { width: 40px; height: 40px; }
.bs-ledge h3 { margin: 0 0 4px; font-size: 1.15rem; }
.bs-ledge p { margin: 0; font-size: 1rem; }

.bs-ledge__stamp {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--copper-hot);
    background: var(--ground-deep);
    border: 2px solid var(--ink);
    border-radius: 8px 4px 9px 5px;
    box-shadow: 2px 2px 0 var(--ink);
}

.bs-ledge__stamp .icon {
    width: 26px;
    height: 26px;
    stroke-width: 3.4;
    filter: var(--glow-copper);
}

.js .bs-ledge .bs-ledge__stamp { transform: scale(0); }

.js .bs-ledge.is-visible .bs-ledge__stamp {
    animation: stamp-in 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both;
}

/* Comparison table */
.bs-compare.home-compare__table { min-width: 800px; }
.bs-compare .th-icon--broken { color: #3b3536; }
.bs-compare .is-brand .th-icon { color: var(--copper-hot); }
.bs-compare th[scope="col"]:first-child { vertical-align: bottom; }

.bs-dash {
    display: inline-block;
    width: 22px;
    margin-right: 6px;
    font-weight: 800;
    text-align: center;
    color: #3b3536;
}

.bs-note {
    margin: 22px 0 0;
    max-width: 66ch;
    color: var(--text-muted-dark);
}

/* Free vs paid panels */
.bs-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.bs-panel {
    padding: 24px 22px;
    border: var(--outline);
    border-radius: 6px 20px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard-lg);
}

.bs-panel--free {
    color: var(--text-on-dark);
    background-color: #3f3837;
}

.bs-panel--paid {
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 480px;
}

.bs-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.bs-panel__head h3 { margin: 0; font-size: 1.4rem; }
.bs-panel__icon { width: 36px; height: 36px; stroke-width: 3; }
.bs-panel--free .bs-panel__icon { color: var(--mint); filter: drop-shadow(0 0 6px rgba(70, 224, 160, 0.6)); }
.bs-panel--paid .bs-panel__icon { color: var(--rust-dark); }
.bs-panel--free .checklist li::before { background: var(--mint); }
.bs-panel .checklist { margin-bottom: 0; }

.bs-lock {
    --i-lock: url("data:image/svg+xml,%3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%275%27%20y=%2711%27%20width=%2714%27%20height=%2710%27%20rx=%272%27%2F%3E%3Cpath%20d=%27M8%2011V7a4%204%200%200%201%208%200v4%27%2F%3E%3C%2Fsvg%3E");
}

.bs-lock li::before {
    -webkit-mask-image: var(--i-lock);
    mask-image: var(--i-lock);
    background: var(--rust-dark);
}

.bs-tips { max-width: 920px; }
.bs-tips h3 { margin-bottom: 14px; font-size: 1.35rem; }

.bs-tips__list {
    list-style: none;
    counter-reset: tip;
    margin: 0 0 1em;
    padding: 0;
    display: grid;
    gap: 14px;
}

.bs-tips__list li {
    position: relative;
    counter-increment: tip;
    padding-left: 46px;
}

.bs-tips__list li::before {
    content: counter(tip);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--on-rust);
    background-color: var(--rust);
    border: 2px solid var(--ink);
    border-radius: 6px 3px 7px 4px;
    box-shadow: 2px 2px 0 var(--ink);
}

.bs-tips > :last-child { margin-bottom: 0; }

/* Red and green flags */
.bs-flags {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.bs-flags__col {
    position: relative;
    overflow: hidden;
    padding: 26px 22px;
    border: var(--outline);
    border-radius: 6px 18px 10px 4px / 4px 12px 8px 6px;
    box-shadow: var(--shadow-hard-lg);
}

.bs-flags__col h3 { margin-bottom: 14px; font-size: 1.4rem; }

.bs-flags__col--red {
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 480px;
}

.bs-flags__col--green {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 420px;
}

.bs-flags__crack { width: 90px; height: 80px; }
.bs-flags__crack--tr { top: 0; right: 0; }
.bs-flags__crack--bl { bottom: 0; left: 0; }

.bs-flags__col > :not(.crack) { position: relative; z-index: 1; }
.bs-flags__col--green .checklist li::before {
    background: var(--copper-hot);
    filter: var(--glow-copper);
}

.bs-flags__note { margin: 20px 0 0; }
.bs-flags__col--green a:not([class]) { color: var(--on-rust); font-weight: 700; }

/* Who it suits: sticker cards */
.bs-stickers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
}

.bs-stickers > li { display: flex; }
.bs-stickers > li:nth-child(1) { --r: -1.2deg; }
.bs-stickers > li:nth-child(2) { --r: 1deg; }
.bs-stickers > li:nth-child(3) { --r: 0.8deg; }
.bs-stickers > li:nth-child(4) { --r: -1deg; }

.bs-sticker {
    flex: 1;
    padding: 22px 20px;
    color: var(--text-on-stone);
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 460px;
    border: var(--outline);
    border-radius: 8px 18px 6px 14px / 14px 6px 16px 8px;
    box-shadow: var(--shadow-hard);
    transform: rotate(var(--r, 0deg));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.bs-stickers > li:nth-child(even) .bs-sticker {
    background-color: var(--sand);
    background-image: var(--tint-sand), var(--tex-concrete);
}

.bs-sticker:hover {
    transform: translate(-3px, -5px) rotate(0deg);
    box-shadow: 10px 10px 0 var(--ink);
}

.bs-sticker__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.bs-sticker__head h3 { margin: 0; font-size: 1.25rem; }

.bs-sticker__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 200px;
    border: 2px solid var(--ink);
    border-radius: 8px 4px 9px 5px;
    box-shadow: 3px 3px 0 var(--ink);
}

.bs-sticker__icon .icon { width: 30px; height: 30px; }
.bs-sticker p { margin: 0 0 10px; }
.bs-sticker p:last-child { margin-bottom: 0; }
.bs-sticker a:not([class]) { color: var(--link-on-stone); font-weight: 700; }

/* Trust slab */
.bs-trust { max-width: 980px; margin-inline: auto; }

/* FAQ */
.bs-faq .faq-list { max-width: 860px; }
.faq-item__a .checklist li::before { background: var(--rust-dark); }

.bs-proscons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 24px;
    margin-top: 12px;
}

.bs-proscons__title { margin: 0 0 8px; }
.bs-proscons .checklist,
.bs-proscons .xlist { margin-bottom: 8px; }

@media (min-width: 768px) {
    .bs-hero__art { width: min(100%, 520px); }
    .bs-hero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

    .bs-ledge { padding: 20px 26px; gap: 18px; }

    .bs-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .bs-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .bs-hero__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        align-items: center;
        gap: 32px;
    }

    .bs-hero__veins { display: block; }
    .bs-hero__art { grid-column: 2; grid-row: 1; width: 100%; }
    .bs-hero__slab { grid-column: 1; grid-row: 1; }
    .bs-hero .hero__title { font-size: clamp(2.2rem, 3.2vw, 3rem); }

    .bs-ledges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .bs-ledge:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .js .bs-ledge .bs-ledge__stamp { transform: none; }
    .bs-sticker:hover { transform: rotate(var(--r, 0deg)); }
}

/* ============================================
   FAQ
   ============================================ */

/* Hero */
.faq-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.faq-hero__art {
    order: -1;
    width: min(100%, 340px);
    justify-self: center;
}

.faq-hero__slab {
    position: relative;
    z-index: 1;
    display: flex;
}

.faq-hero__slab .slab__face { flex: 1; }

.faq-hero__crack {
    inset: 0;
    width: 100%;
    height: 100%;
}

.faq-hero__crack path { vector-effect: non-scaling-stroke; }
.faq-hero__copy { position: relative; }
.faq-hero .hero__title { font-size: clamp(2rem, 8vw, 3rem); }

/* Sticky topic strip */
.faq-strip {
    position: sticky;
    top: var(--header-bottom);
    z-index: 40;
    background-color: var(--concrete);
    background-image: var(--tint-concrete), var(--tex-concrete);
    background-size: auto, 520px;
    border-block: 3px solid var(--ink);
    box-shadow: 0 4px 0 rgba(10, 5, 6, 0.55);
}

.faq-strip__list {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: min(100%, var(--container));
    margin-inline: auto;
    padding: 10px var(--gutter) 13px;
    scrollbar-width: none;
}

.faq-strip__list::-webkit-scrollbar { display: none; }
.faq-strip .chip { white-space: nowrap; }

/* Quick answers */
.faq-quick .stone-table thead th {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 380px;
}

.faq-quick .stone-table tbody th[scope="row"] { width: 36%; }
.faq-quick .cell-icon--yes { color: var(--rust-dark); filter: none; }

/* Groups */
.faq-group {
    padding-block: clamp(28px, 5vw, 48px);
    scroll-margin-top: calc(var(--header-bottom) + 56px);
}

.faq-group__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.faq-group__head .section-title { margin: 0; }

.faq-group__tiles {
    display: flex;
    flex: none;
    gap: 10px;
}

.faq-group__tile {
    flex: none;
    width: 60px;
    height: 60px;
    margin: 0;
}

.faq-group__tile .icon { width: 34px; height: 34px; }
.faq-group__tile .icon.glow { color: var(--copper-hot); }

.faq-group .faq-list { max-width: 860px; }
.faq-group .section-cta { margin-top: 28px; }

.faq-ledges {
    max-width: 640px;
    margin-bottom: 28px;
}

.faq-ledges .ledge__title { font-size: 1.05rem; }
.faq-ledges .ledge__text { font-size: 0.9375rem; }

/* Pros and cons split */
.faq-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.faq-split__col {
    padding: 16px;
    border: 3px solid var(--ink);
    border-radius: 6px 14px 8px 4px;
    box-shadow: 3px 3px 0 var(--ink);
}

.faq-split__col h4 { margin: 0 0 10px; font-size: 1.1rem; }
.faq-split__col .checklist,
.faq-split__col .xlist { margin: 0; }

.faq-split__col--pro {
    color: var(--on-rust);
    background-color: var(--rust);
    background-image: var(--tint-rust), var(--tex-rust);
    background-size: auto, 360px;
}

.faq-split__col--con {
    color: var(--text-on-stone);
    background-color: var(--concrete-light);
}

.faq-item__a .faq-split__col--pro .checklist li::before {
    background: var(--copper-hot);
}

/* Help slab */
.faq-help .section-title { color: var(--on-rust); }

.faq-help__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 60px;
    height: 60px;
}

.faq-help__icon .icon { width: 48px; height: 48px; }

@media (min-width: 768px) {
    .faq-hero__art { width: min(100%, 400px); }
    .faq-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .faq-group__tile { width: 68px; height: 68px; }
}

@media (min-width: 1024px) {
    .faq-hero__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        align-items: center;
        gap: 32px;
    }

    .faq-hero__art { order: 0; width: 100%; }
    .faq-hero .hero__title { font-size: clamp(2.2rem, 3.2vw, 3rem); }
}