/*
 * Sequel Review - design system
 * Midnight navy desk, parchment spreads, walnut ink, honey-gold ribbons.
 */

:root {
    /* Desk & covers */
    --navy-950: #0C1122;
    --navy-900: #10172B;
    --navy-800: #141B30;
    --navy-700: #1E2847;
    --navy-600: #2A3760;

    /* Paper */
    --cream-50: #FBF5E8;
    --cream: #F4E8CF;
    --cream-200: #EADBB9;
    --tan: #E1CA9F;
    --tan-dark: #CDB283;

    /* Ink */
    --walnut: #3E2A1E;
    --walnut-900: #2A1A10;
    --walnut-600: #5A3D2B;

    /* Accents */
    --gold: #B8893E;
    --gold-light: #D9B062;
    --gold-pale: #EBCB86;
    --gold-deep: #8E6424;
    --gold-ink: #7E5A1C;
    --taupe: #A8927A;
    --taupe-light: #C9B79D;
    --plum: #5E3F63;
    --forest: #2F4A3A;
    --oxblood: #5C2A26;

    --text-on-dark: #F4E8CF;
    --text-on-dark-muted: #D8C9AC;

    /* Type */
    --font-display: "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-body: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-script: "Caveat", "Bradley Hand", "Segoe Print", cursive;
    --fs-body: 1.125rem;
    --fs-small: 1rem;
    --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
    --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --lh-body: 1.65;

    /* Layout */
    --header-h: 4.25rem;
    --container: 75rem;
    --book-max: 72rem;
    --sheet-max: 64rem;
    --section-pad: clamp(3.5rem, 7vw, 6.5rem);

    /* Surfaces */
    --parchment-texture: url("/assets/998a2e606f275138873b1639a4cb4e20.webp");
    --parchment: linear-gradient(rgba(244, 232, 207, .82), rgba(244, 232, 207, .82)), var(--parchment-texture);
    --parchment-tan: linear-gradient(rgba(225, 202, 159, .88), rgba(225, 202, 159, .88)), var(--parchment-texture);
    --shadow-book: 0 30px 55px -24px rgba(0, 0, 0, .8), 0 12px 22px -12px rgba(0, 0, 0, .55);
    --page-edges: 3px 0 0 var(--cream-200), 4px 0 0 var(--taupe-light), 6px 0 0 #E8D7B3, 7px 0 0 var(--taupe), 9px 0 0 #E2CFA8, 10px 0 0 #9C8467;

    /* Deckled paper edges for clip-path polygons */
    --deckle-top: 0 7px, 3% 2px, 7% 6px, 12% 1px, 18% 5px, 24% 2px, 31% 7px, 37% 1px, 44% 5px, 51% 2px, 58% 6px, 64% 1px, 71% 5px, 77% 2px, 84% 7px, 90% 2px, 95% 5px, 100% 1px;
    --deckle-right: calc(100% - 4px) 12%, 100% 26%, calc(100% - 3px) 41%, 100% 57%, calc(100% - 5px) 72%, 100% 88%;
    --deckle-bottom: 100% calc(100% - 6px), 95% calc(100% - 1px), 89% calc(100% - 5px), 82% calc(100% - 2px), 75% calc(100% - 7px), 68% calc(100% - 1px), 61% calc(100% - 5px), 54% calc(100% - 2px), 47% calc(100% - 6px), 40% calc(100% - 1px), 33% calc(100% - 5px), 26% calc(100% - 2px), 19% calc(100% - 6px), 12% calc(100% - 1px), 6% calc(100% - 5px), 0 calc(100% - 2px);
    --deckle-left: 4px 86%, 0 71%, 3px 55%, 0 39%, 5px 23%, 0 11%;
}

/* ============================================
   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%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom, 4.25rem) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-on-dark);
    background-color: var(--navy-800);
    background-image:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(42, 55, 96, .55), transparent 70%),
        linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.is-menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
}

strong {
    font-weight: 700;
}

img {
    display: block;
}

main {
    display: block;
}

main:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--navy-700);
    outline-offset: 3px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    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: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--cream);
    color: var(--walnut);
    font-weight: 700;
    border: 2px solid var(--gold-deep);
    border-radius: 6px;
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
}

.section {
    position: relative;
    padding-block: var(--section-pad);
    padding-inline: 1rem;
}

.section-head {
    max-width: 48rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
    color: var(--text-on-dark);
}

.section-head__title {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-h2);
    color: var(--cream);
    letter-spacing: .005em;
}

.section-head__sub {
    margin: .5rem 0 0;
    font-size: 1.125rem;
    color: var(--text-on-dark-muted);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    color: var(--walnut);
    background: var(--parchment) center / 640px repeat, var(--cream);
    border-bottom: 1px solid var(--gold);
    box-shadow: inset 0 3px 0 -1px rgba(62, 42, 30, .16), 0 4px 14px -6px rgba(0, 0, 0, .55);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: .375rem;
    max-width: var(--container);
    min-height: var(--header-h);
    margin-inline: auto;
    padding-inline: .75rem;
}

.site-brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
    color: var(--walnut);
    text-decoration: none;
    white-space: nowrap;
}

.site-brand {
    margin-right: auto;
    font-size: 1.05rem;
}

.site-brand__accent {
    color: var(--gold-ink);
}

.nav-toggle {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--walnut);
    background: transparent;
    border: 1px solid var(--taupe);
    border-radius: 8px;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, background-color .2s ease;
}

.nav-toggle__bars {
    position: relative;
}

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

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

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

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

.site-nav {
    display: none;
}

.site-nav.is-open {
    display: block;
    position: fixed;
    top: var(--header-bottom, 4.25rem);
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.75rem 1.25rem 2.5rem;
    background: var(--cream);
    border-top: 1px solid var(--gold);
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--walnut);
    text-decoration: none;
    border-bottom: 1px solid var(--taupe-light);
}

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

.header-cta {
    order: 2;
    position: relative;
    z-index: 3;
    align-self: flex-start;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: calc(var(--header-h) + .25rem);
    padding: .5rem .6rem .8rem;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--walnut-900);
    background: linear-gradient(90deg, #B98B40 0%, #DDB66A 50%, #B98B40 100%);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 3px 0 rgba(62, 42, 30, .28), 0 8px 12px -8px rgba(0, 0, 0, .6);
    cursor: pointer;
    white-space: nowrap;
}

.header-cta__tail {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: .75rem;
    fill: #C59A4E;
    pointer-events: none;
}

.header-cta:hover {
    background: linear-gradient(90deg, #C29448 0%, #E6C27A 50%, #C29448 100%);
}

@media (min-width: 400px) {
    .site-header__inner {
        gap: .75rem;
        padding-inline: 1rem;
    }

    .site-brand {
        font-size: 1.25rem;
    }

    .header-cta {
        padding-inline: 1rem;
        font-size: .95rem;
    }
}

@media (min-width: 768px) {
    .site-header__inner {
        gap: 1.25rem;
        padding-inline: 1.5rem;
    }

    .site-brand {
        font-size: clamp(1.4rem, 1rem + 1vw, 1.875rem);
    }

    .nav-toggle {
        display: none;
    }

    .site-nav,
    .site-nav.is-open {
        order: 2;
        display: block;
        position: static;
        padding: 0;
        overflow: visible;
        background: none;
        border: 0;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(.75rem, 2vw, 1.75rem);
    }

    .site-nav__link {
        min-height: 44px;
        font-size: 1rem;
        border-bottom: 0;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 2px;
        text-underline-offset: .35em;
        transition: text-decoration-color .2s ease, color .2s ease;
    }

    .site-nav__link:hover {
        text-decoration-color: var(--gold);
    }

    .header-cta {
        order: 3;
        padding-inline: 1.35rem;
        font-size: 1rem;
    }
}

/* ============================================
   BUTTONS, BADGES, TAGS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.75rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

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

.btn--gold {
    color: var(--walnut-900);
    background: linear-gradient(180deg, #E4BF72 0%, #CD9E50 50%, #BC8E42 100%);
    border-color: var(--gold-deep);
    box-shadow: inset 0 1px 0 rgba(255, 246, 220, .75), inset 0 -2px 0 rgba(90, 60, 20, .25), 0 8px 16px -10px rgba(42, 26, 16, .8);
}

.btn--gold:hover {
    background: linear-gradient(180deg, #EAC880 0%, #D4A658 50%, #C39548 100%);
}

.btn--outline {
    color: var(--walnut);
    background: var(--cream-50);
    border: 1.5px solid var(--walnut-600);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.btn--outline:hover {
    background: var(--cream-200);
}

.btn--text {
    min-height: 2.75rem;
    padding: .5rem .5rem;
    color: var(--walnut);
    background: none;
    border: 0;
    border-radius: 4px;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
}

.btn--text:hover {
    transform: none;
    color: var(--gold-ink);
}

.btn--block {
    width: 100%;
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.25rem;
    padding: .45rem 1.15rem .45rem .9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Source Sans 3", "Segoe UI", sans-serif;
    text-align: left;
    color: #FFFFFF;
    background: #000000;
    border: 1px solid #A6A6A6;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.app-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .8);
}

.app-badge__logo {
    width: 1.65rem;
    height: 1.65rem;
    fill: #FFFFFF;
    flex-shrink: 0;
}

.app-badge__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.app-badge__small {
    font-size: .875rem;
    letter-spacing: .01em;
}

.app-badge__large {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.tag {
    display: inline-block;
    margin: 0 0 .75rem;
    padding: .2rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--walnut);
    background: var(--cream);
    border: 1px solid var(--taupe);
    border-radius: 999px;
}

.note {
    padding: .85rem 1.1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--walnut);
    background: var(--cream-50);
    border: 1px solid var(--taupe);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
}

/* ============================================
   ICONS
   ============================================ */

.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ============================================
   RIBBON BOOKMARKS
   ============================================ */

.ribbon {
    --rw: 2.75rem;
    --rh: 4rem;
    --ribbon-fill: #9C6F27;
    position: relative;
    display: inline-flex;
    justify-content: center;
    flex-shrink: 0;
    width: var(--rw);
    height: var(--rh);
    color: var(--cream);
    filter: drop-shadow(0 3px 3px rgba(42, 26, 16, .35));
}

.ribbon__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--ribbon-fill);
}

.ribbon__shine { fill: rgba(255, 238, 196, .26); }
.ribbon__shade { fill: rgba(0, 0, 0, .18); }
.ribbon__fold { fill: rgba(0, 0, 0, .28); }

.ribbon__content {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--rh) * .18);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.ribbon--sm { --rw: 1.75rem; --rh: 2.75rem; }
.ribbon--md { --rw: 2.75rem; --rh: 4rem; }
.ribbon--tall { --rw: 3.25rem; --rh: 5.75rem; }
.ribbon--tab { --rw: 2.25rem; --rh: 3.25rem; }
.ribbon--doc { --rw: 2.5rem; --rh: 5rem; }

.ribbon--tab .ribbon__content .icon {
    width: 18px;
    height: 18px;
}

.ribbon--gold { --ribbon-fill: #9C6F27; }
.ribbon--navy { --ribbon-fill: #24305A; }
.ribbon--walnut { --ribbon-fill: #5A3D2B; }
.ribbon--plum { --ribbon-fill: #5E3F63; }
.ribbon--forest { --ribbon-fill: #2F4A3A; }

/* ============================================
   PAGE CURL
   ============================================ */

.page-curl {
    --curl-under: #D9C39A;
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(3.5rem, 7vw, 5rem);
    height: auto;
    z-index: 2;
    pointer-events: none;
    transform-origin: 100% 100%;
    transition: transform .35s ease;
    filter: drop-shadow(-2px -2px 3px rgba(62, 42, 30, .28));
}

.page-curl__under { fill: var(--curl-under); }
.page-curl__flap { fill: #EEE0C1; stroke: rgba(168, 146, 122, .7); stroke-width: .6; }
.page-curl__crease { fill: none; stroke: rgba(62, 42, 30, .22); stroke-width: 1.2; }

.book__page:hover > .page-curl,
.feature-item--slip:hover > .page-curl {
    transform: scale(1.12);
}

/* ============================================
   OPEN BOOK SPREADS
   Mobile: one tall parchment page with stacked edges.
   Desktop (1024+): leather cover, two pages, gutter shadow.
   ============================================ */

.book {
    position: relative;
    width: calc(100% - 10px);
    max-width: var(--book-max);
    margin-inline: auto;
    padding: 3.5rem clamp(1.25rem, 5vw, 2.75rem) clamp(2.25rem, 5vw, 3rem);
    color: var(--walnut);
    background: var(--parchment) center / 640px repeat, var(--cream);
    border-radius: 3px 10px 10px 3px;
    box-shadow: var(--page-edges), 0 26px 40px -20px rgba(0, 0, 0, .75);
}

.book::before {
    content: "";
    position: absolute;
    top: -4px;
    right: clamp(1.5rem, 8%, 3.5rem);
    z-index: 3;
    width: 1.6rem;
    height: 3rem;
    background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold-light) 45%, var(--gold-deep) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    pointer-events: none;
}

.book--no-ribbon::before {
    display: none;
}

.book__spread {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.book__page {
    position: relative;
    min-width: 0;
}

.book__page + .book__page {
    padding-top: 2rem;
    border-top: 1px solid var(--gold);
}

.book__page > .page-curl {
    display: none;
}

@media (min-width: 768px) {
    .book {
        padding-inline: clamp(2rem, 5vw, 3.5rem);
    }
}

@media (min-width: 1024px) {
    .book {
        width: 100%;
        padding: .875rem .875rem 1.4rem;
        border-radius: 12px;
        border: 1px solid #0A0F1E;
        background:
            linear-gradient(135deg, var(--walnut-600) 0 26px, transparent 26.5px),
            linear-gradient(225deg, var(--walnut-600) 0 26px, transparent 26.5px),
            linear-gradient(315deg, var(--walnut-600) 0 26px, transparent 26.5px),
            linear-gradient(45deg, var(--walnut-600) 0 26px, transparent 26.5px),
            linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
        box-shadow: var(--shadow-book), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 0 4px rgba(0, 0, 0, .25);
    }

    .book::before {
        top: -6px;
        right: 3.5rem;
        height: 3.25rem;
    }

    .book__spread {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border-radius: 4px;
        box-shadow: 0 3px 0 #EADBB9, 0 4px 0 #B49C77, 0 6px 0 #E6D5B0, 0 7px 0 #A58C67, 0 9px 0 #E2CFA7, 0 10px 0 #8F7657;
    }

    .book--triptych .book__spread {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .book__page,
    .book__page + .book__page {
        --glow-x: 100%;
        padding: clamp(2.75rem, 3.5vw, 3.75rem) clamp(2rem, 3vw, 3.5rem);
        border-top: 0;
        background:
            radial-gradient(ellipse 70% 85% at var(--glow-x) 50%, rgba(255, 244, 214, .5), transparent 70%),
            var(--parchment) center / 640px repeat,
            var(--cream);
    }

    .book__page:first-child {
        border-radius: 6px 0 0 6px;
        box-shadow: inset -28px 0 30px -22px rgba(70, 45, 25, .55);
    }

    .book__page:last-child {
        --glow-x: 0%;
        border-radius: 0 6px 6px 0;
        box-shadow: inset 28px 0 30px -22px rgba(70, 45, 25, .55);
    }

    .book__page:not(:first-child):not(:last-child) {
        --glow-x: 50%;
        box-shadow: inset 28px 0 30px -22px rgba(70, 45, 25, .5), inset -28px 0 30px -22px rgba(70, 45, 25, .5);
    }

    .book:not(.book--triptych) .book__spread::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-1px);
        background: linear-gradient(180deg, rgba(62, 42, 30, .15), rgba(62, 42, 30, .4) 50%, rgba(62, 42, 30, .15));
        pointer-events: none;
    }

    .book__page > .page-curl {
        display: block;
    }
}

/* ============================================
   ARCH-TOPPED CHAPTER TABLETS
   ============================================ */

.tablet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    max-width: var(--book-max);
    margin-inline: auto;
}

.tablet {
    position: relative;
    padding: 3.25rem 1.75rem 2.25rem;
    color: var(--walnut);
    background: var(--parchment) center / 640px repeat, var(--cream);
    border: 1px solid var(--taupe-light);
    border-radius: 50% 50% 10px 10px / 4rem 4rem 10px 10px;
    box-shadow: 0 22px 36px -20px rgba(0, 0, 0, .75);
}

.tablet::before,
.tablet::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50% 50% 6px 6px / 3.5rem 3.5rem 6px 6px;
}

.tablet::before {
    inset: 8px;
    border: 1px solid var(--taupe);
}

.tablet::after {
    inset: 12px;
    border: 1px solid var(--taupe-light);
}

.tablet__crest {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold-ink);
}

.tablet__icon {
    display: flex;
    justify-content: center;
    margin: .5rem 0 1rem;
    color: var(--walnut-600);
}

.tablet__title {
    text-align: center;
    margin-bottom: .75rem;
}

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

@media (min-width: 768px) {
    .tablet-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .tablet {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .tablet-row {
        gap: 2.5rem;
    }

    .tablet {
        padding: 3.5rem 2rem 2.5rem;
    }
}

/* ============================================
   FEATURE ITEMS
   ============================================ */

.feature-item {
    position: relative;
    color: var(--walnut);
}

.feature-item__title {
    margin-bottom: .4rem;
}

.feature-item__note {
    margin-top: .6rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--walnut-600);
}

.feature-item--ribbon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding-block: 1.25rem;
}

.feature-item--ribbon + .feature-item--ribbon {
    border-top: 1px dashed var(--taupe);
}

.feature-item__ribbon {
    margin-top: -1.25rem;
}

.feature-item--slip {
    padding: 1.4rem 3.5rem 1.6rem 1.35rem;
    background: var(--cream-50);
    border: 1px solid var(--taupe-light);
    border-radius: 6px;
    box-shadow: 0 10px 18px -14px rgba(62, 42, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.feature-item__tab {
    position: absolute;
    top: -4px;
    right: 1rem;
}

.feature-item__curl {
    --curl-under: var(--cream-200);
    right: -1px;
    bottom: -1px;
    width: 3.5rem;
}

@media (min-width: 1024px) {
    .feature-item--ribbon {
        gap: 1.4rem;
    }
}

/* ============================================
   ILLUSTRATIVE PROFILE CARDS
   ============================================ */

.profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem;
    color: var(--walnut);
    background: var(--cream-50);
    border: 1px solid var(--taupe-light);
    border-radius: 8px;
    box-shadow: 0 12px 20px -14px rgba(62, 42, 30, .65), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.profile-card__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 6px solid var(--cream);
    outline: 1px solid var(--taupe);
    background: var(--cream-200);
}

.profile-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.profile-card__glyphs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: .75rem;
    color: var(--walnut-600);
}

.profile-card__title {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .9rem;
}

.profile-card__region {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--walnut-600);
}

.profile-card__interests {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.profile-card__interests li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    border-bottom: 1px dotted var(--taupe-light);
}

.profile-card__interests .icon {
    color: var(--walnut-600);
}

.profile-card__looking {
    margin-bottom: 1.25rem;
}

.profile-card__cta {
    width: 100%;
    font-size: 1rem;
    padding-inline: 1rem;
}

@media (min-width: 540px) {
    .profile-card {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 1.5rem;
        padding: 1.15rem;
    }
}

/* ============================================
   FAQ - STACK OF BOOK SPINES
   ============================================ */

.faq-stack {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-width: 52rem;
    margin-inline: auto;
}

.faq-spine {
    --spine: var(--navy-700);
    position: relative;
}

.faq-spine:nth-child(4n+1) { --spine: #26335E; margin: 0 12px 0 0; }
.faq-spine:nth-child(4n+2) { --spine: var(--forest); margin: 0 0 0 12px; }
.faq-spine:nth-child(4n+3) { --spine: var(--oxblood); margin: 0 6px 0 6px; }
.faq-spine:nth-child(4n+4) { --spine: var(--walnut-600); margin: 0 2px 0 10px; }

.faq-spine__q {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
    padding: .9rem 4.75rem .9rem 2.4rem;
    color: var(--cream);
    list-style: none;
    cursor: pointer;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 40%, rgba(0, 0, 0, .28)),
        var(--spine);
    border-radius: 12px 4px 4px 12px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 5px 9px -5px rgba(0, 0, 0, .7);
}

.faq-spine__q::-webkit-details-marker {
    display: none;
}

.faq-spine__q::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.05rem;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-deep), var(--gold-pale) 50%, var(--gold-deep));
    box-shadow: 6px 0 0 var(--gold);
}

.faq-spine__q::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 0;
    bottom: 5px;
    width: 1.5rem;
    background: repeating-linear-gradient(180deg, #F4E8CF 0 2px, #D8C49E 2px 3px);
    border-radius: 0 3px 3px 0;
    box-shadow: inset 2px 0 3px rgba(62, 42, 30, .35);
}

.faq-spine__gilt {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.95rem;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-deep), var(--gold-pale) 50%, var(--gold-deep));
}

.faq-spine__text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cream);
}

.faq-spine__chev {
    position: absolute;
    right: 2.6rem;
    top: 50%;
    display: inline-flex;
    color: var(--gold-pale);
    transform: translateY(-50%);
    transition: transform .25s ease;
}

.faq-spine[open] .faq-spine__chev {
    transform: translateY(-50%) rotate(180deg);
}

.faq-spine[open] .faq-spine__q {
    border-radius: 12px 4px 0 0;
}

.faq-spine__q:focus-visible {
    outline: 3px solid var(--gold-pale);
    outline-offset: 3px;
}

.faq-spine__a {
    margin: 0 1.5rem .5rem 1rem;
    padding: 1.25rem 1.5rem;
    color: var(--walnut);
    background: var(--parchment) center / 640px repeat, var(--cream);
    border: 1px solid var(--taupe);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .7);
}

.faq-spine[open] .faq-spine__a {
    animation: faq-slide .28s ease-out;
}

@keyframes faq-slide {
    from {
        transform: translateY(-.5rem);
        clip-path: inset(0 0 100% 0);
    }
    to {
        transform: none;
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 479px) {
    .faq-spine:nth-child(n) {
        margin: 0;
    }

    .faq-spine__q {
        padding-left: 2.1rem;
    }

    .faq-spine__a {
        margin-inline: .5rem;
        padding: 1.1rem 1.1rem;
    }
}

/* ============================================
   CLOSING SHEET (final CTA) + FOOTER BAND
   ============================================ */

.closing {
    position: relative;
    padding: var(--section-pad) 1rem 0;
}

.closing__sheet {
    max-width: var(--sheet-max);
    margin-inline: auto;
    padding: clamp(3rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
    color: var(--walnut);
    background:
        radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(140, 95, 45, .2) 100%),
        var(--parchment) center / 640px repeat,
        var(--cream);
    clip-path: polygon(var(--deckle-top), var(--deckle-right), 100% 100%, 0 100%, var(--deckle-left));
}

.site-footer {
    padding: var(--section-pad) 1rem clamp(2.5rem, 5vw, 4rem);
}

body:has(.closing) .site-footer {
    padding-top: 0;
}

.site-footer__sheet {
    max-width: var(--sheet-max);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 4rem) clamp(2.75rem, 5vw, 3.25rem);
    font-size: 1rem;
    text-align: center;
    color: var(--walnut);
    background:
        radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(120, 80, 40, .22) 100%),
        var(--parchment-tan) center / 640px repeat,
        var(--tan);
    clip-path: polygon(var(--deckle-top), var(--deckle-right), var(--deckle-bottom), var(--deckle-left));
}

body:has(.closing) .site-footer__sheet {
    clip-path: polygon(0 0, 100% 0, var(--deckle-right), var(--deckle-bottom), var(--deckle-left));
    box-shadow: inset 0 10px 14px -12px rgba(62, 42, 30, .45);
}

.footer-brand {
    font-size: 1.5rem;
}

.site-footer__about {
    max-width: 36rem;
    margin: .5rem auto 0;
    color: var(--walnut);
}

.site-footer__rule {
    width: min(12rem, 50%);
    height: 1px;
    margin: 1.75rem auto 1.25rem;
    background: linear-gradient(90deg, transparent, var(--gold-deep) 20%, var(--gold-deep) 80%, transparent);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav li + li {
    border-left: 1px solid var(--taupe);
}

.footer-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem .9rem;
    font-family: var(--font-display);
    font-size: .9375rem;
    color: var(--walnut);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .25em;
    transition: text-decoration-color .2s ease;
}

.footer-nav__link:hover {
    text-decoration-color: var(--gold-deep);
}

.footer-nav--legal {
    margin-top: .25rem;
}

.site-footer__cta {
    margin: 1rem 0 .75rem;
}

.site-footer__fine {
    margin: .35rem 0 0;
    font-size: .9375rem;
    color: var(--walnut-600);
}

/* ============================================
   LEGAL DOCUMENT PAGES
   ============================================ */

.doc-wrap {
    position: relative;
    padding: clamp(2.5rem, 6vw, 5rem) 1rem 0;
}

.doc {
    position: relative;
    width: calc(100% - 10px);
    max-width: 54rem;
    margin-inline: auto;
    padding: clamp(3.25rem, 6vw, 4.75rem) clamp(1.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
    color: var(--walnut);
    background: var(--parchment) center / 640px repeat, var(--cream);
    border-radius: 3px 8px 8px 3px;
    box-shadow: var(--page-edges), 0 26px 44px -22px rgba(0, 0, 0, .75);
}

.doc::before,
.doc::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.doc::before {
    inset: 10px;
    border: 1px solid var(--taupe);
}

.doc::after {
    inset: 14px;
    border: 1px solid var(--taupe-light);
}

.doc__ribbon {
    position: absolute;
    top: -6px;
    right: clamp(1.5rem, 6vw, 3.5rem);
    z-index: 2;
}

.doc__body {
    position: relative;
    z-index: 1;
    max-width: 70ch;
    margin-inline: auto;
}

.doc h1 {
    padding-right: 2.5rem;
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
}

.doc__meta {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--walnut-600);
}

.doc__summary {
    font-size: 1.1875rem;
}

.doc__toc {
    margin: 2rem 0 1rem;
    padding: 1.25rem 0;
    border-block: 1px solid var(--taupe);
}

.doc__toc-title {
    margin-bottom: .5rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

.doc__toc ol {
    margin: 0;
    padding-left: 1.4rem;
}

.doc__toc li {
    padding: .2rem 0;
}

.doc__toc a {
    color: var(--walnut);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: .2em;
}

.doc h2 {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
    border-top: 1px solid var(--taupe-light);
}

.doc h3 {
    margin-top: 1.5rem;
    font-size: 1.25rem;
}

.doc ul,
.doc ol {
    padding-left: 1.4rem;
    margin: 0 0 1em;
}

.doc li {
    margin-bottom: .4rem;
}

.doc li::marker {
    color: var(--gold-ink);
}

.doc a:not([class]) {
    color: var(--walnut);
    text-decoration: underline;
    text-decoration-color: var(--gold-deep);
    text-underline-offset: .2em;
}

.doc--numbered .doc__body {
    counter-reset: doc-section;
}

.doc--numbered .doc__body h2 {
    counter-increment: doc-section;
}

.doc--numbered .doc__body h2::before {
    content: counter(doc-section, decimal-leading-zero);
    display: inline-block;
    margin-right: .6rem;
    color: var(--gold-ink);
}

.doc__back {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--taupe-light);
}

@media (min-width: 768px) {
    .doc__toc ol {
        columns: 2;
        column-gap: 2.5rem;
    }

    .doc__toc li {
        break-inside: avoid;
    }
}

.table-wrapper {
    margin: 1.25rem 0 1.5rem;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
}

.doc-table th,
.doc-table td {
    padding: .85rem 1rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--taupe-light);
}

.doc-table thead th {
    font-family: var(--font-display);
    color: var(--walnut-900);
    background: linear-gradient(180deg, #E4C27E, #D6AE62);
}

.doc-table tbody th {
    font-weight: 700;
}

@media (max-width: 599px) {
    .doc-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

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

    .doc-table tr {
        padding: .75rem 0;
        border-top: 2px solid var(--gold);
    }

    .doc-table th,
    .doc-table td {
        border: 0;
        padding: .3rem 0;
    }

    .doc-table [data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .875rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--gold-ink);
    }
}

/* ============================================
   HOMEPAGE - SHARED PAGE TYPE
   ============================================ */

.page-title {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
    color: var(--walnut);
}

.page-kicker {
    margin-bottom: .5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--gold-ink);
    letter-spacing: .02em;
}

.pull-line {
    margin-top: 1.5rem;
    padding-left: 1rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--walnut);
    border-left: 3px solid var(--gold);
}

.media-label,
.fine-print {
    font-size: 1rem;
    font-style: italic;
    color: var(--walnut-600);
}

.media-label {
    margin-bottom: .75rem;
}

.micro {
    margin: .85rem 0 0;
    font-size: 1rem;
    color: var(--walnut-600);
}

.desk-note {
    max-width: 46rem;
    margin: -1rem auto 2.5rem;
    text-align: center;
    color: var(--text-on-dark-muted);
}

.book + .book {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

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

.hero {
    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 6vw, 5rem) 1rem clamp(3.5rem, 7vw, 6rem);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--navy-900);
    background-image:
        linear-gradient(180deg, rgba(20, 27, 48, .1) 0%, rgba(20, 27, 48, .45) 80%, var(--navy-800) 100%),
        url("/assets/bbfea3bdcd9f6fb79b1a7df3266d8890.webp");
    background-size: cover;
    background-position: 50% 40%;
    background-repeat: no-repeat;
}

.hero h1 {
    font-size: clamp(2rem, 1.45rem + 2.2vw, 3.1rem);
    color: var(--walnut);
}

.hero__kicker {
    display: block;
    margin-bottom: .35rem;
    font-size: .55em;
    color: var(--gold-ink);
}

.hero__lead {
    font-size: 1.1875rem;
}

.hero .note {
    margin-top: 1.25rem;
}

.hero-meta {
    margin-top: .85rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--walnut-600);
}

.hero-book__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-photo {
    position: relative;
    width: min(100%, 26rem);
    margin: .5rem auto 2rem;
    padding: .5rem;
    background: var(--cream-50);
    border: 1px solid var(--taupe-light);
    transform: rotate(2deg);
    box-shadow: 0 12px 20px -12px rgba(62, 42, 30, .65);
}

.hero-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 30% 40%;
}

.hero-photo::before,
.hero-photo::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--parchment) center / 320px repeat, var(--cream-200);
    filter: drop-shadow(0 1px 1px rgba(62, 42, 30, .35));
}

.hero-photo::before {
    top: -5px;
    left: -5px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.hero-photo::after {
    right: -5px;
    bottom: -5px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    width: min(100%, 20rem);
}

.hero-badge {
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .hero-book__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ============================================
   ABOUT - GOAL SLIPS
   ============================================ */

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

.goal-slip {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.25rem 0;
}

.goal-slip + .goal-slip {
    border-top: 1px solid var(--gold);
}

.goal-slip img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border: 4px solid var(--cream-50);
    outline: 1px solid var(--taupe);
}

.goal-slip h3 {
    margin-bottom: .3rem;
    font-size: 1.25rem;
}

.goal-slip p {
    font-size: 1.0625rem;
    line-height: 1.5;
}

.goal-slip .page-curl {
    display: none;
}

@media (min-width: 1024px) {
    .goal-slips {
        gap: 1.25rem;
    }

    .goal-slip {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        padding: 1rem 1.25rem;
        background: var(--cream-50);
        border: 1px solid var(--taupe-light);
        border-radius: 6px;
        box-shadow: 0 10px 18px -14px rgba(62, 42, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
    }

    .goal-slip + .goal-slip {
        border-top: 1px solid var(--taupe-light);
    }

    .goal-slip:last-child {
        padding-right: 3.5rem;
    }

    .goal-slip img {
        width: 6.5rem;
        height: 6.5rem;
    }

    .goal-slip .page-curl {
        --curl-under: var(--cream-200);
        display: block;
        right: -1px;
        bottom: -1px;
        width: 3.25rem;
    }
}

/* ============================================
   HOW IT WORKS - STEPS
   ============================================ */

.steps-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.step__icon {
    display: block;
    margin-bottom: .75rem;
    color: var(--walnut-600);
}

.step h3 {
    margin-bottom: .5rem;
}

@media (max-width: 1023px) {
    .steps-book .book__spread {
        gap: 2.5rem;
    }

    .steps-book .book__spread::before {
        content: "";
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        left: calc(1.375rem - 1px);
        border-left: 2px dotted var(--gold);
        pointer-events: none;
    }

    .steps-book .book__page + .book__page {
        padding-top: 0;
        border-top: 0;
    }

    .steps-book {
        padding-top: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .step {
        display: block;
    }

    .steps-book .book__page {
        padding-top: 6rem;
    }

    .steps-book .step__ribbon {
        position: absolute;
        top: -1px;
        left: clamp(1.75rem, 2.6vw, 2.75rem);
    }

    .steps-book .step:nth-child(2) {
        transform: translateY(-4px);
    }
}

/* ============================================
   FEATURES - SLIP STACK
   ============================================ */

.slip-stack {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (min-width: 1024px) {
    .slip-stack--offset {
        margin-top: 2.75rem;
    }
}

/* ============================================
   PROS & CONS - LEDGER SPREAD
   ============================================ */

.ledger-title {
    text-align: center;
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    color: var(--walnut-900);
}

.ledger-list {
    margin: 0;
    padding-left: 1.4rem;
    list-style: disc;
}

.ledger-list li {
    margin-bottom: .8rem;
    padding-left: .25rem;
}

.ledger-list li::marker {
    font-size: 1.25em;
}

.ledger-list--gold li::marker { color: var(--gold-deep); }
.ledger-list--taupe li::marker { color: var(--taupe); }

.book--ledger .pros-page {
    position: relative;
    padding: 2rem 1.5rem;
    border-radius: 6px;
    background:
        linear-gradient(115deg, transparent 28%, rgba(255, 248, 224, .45) 44%, transparent 60%),
        linear-gradient(160deg, #F0D79C 0%, #E2BF77 45%, #D7AE60 100%);
}

.book--ledger .pros-page::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(126, 90, 28, .5);
    border-radius: 3px;
    box-shadow: 1px 1px 0 rgba(255, 248, 224, .6), inset 1px 1px 0 rgba(255, 248, 224, .5);
    pointer-events: none;
}

.book--ledger .pros-page > * {
    position: relative;
}

.rating-slip {
    max-width: 23rem;
    margin: 2rem auto 0;
    padding: 1.1rem 1.35rem;
    background: var(--cream-50);
    border: 4px double var(--taupe);
    transform: rotate(-1.5deg);
    box-shadow: 0 10px 16px -10px rgba(62, 42, 30, .6);
}

.rating-slip__score {
    margin-bottom: .35rem;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--walnut-900);
}

.rating-slip__source {
    margin-bottom: .5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--walnut-600);
}

.rating-slip a {
    color: var(--walnut);
    text-decoration-color: var(--gold-deep);
}

@media (min-width: 1024px) {
    .book--ledger .book__page.pros-page {
        padding: clamp(2.75rem, 3.5vw, 3.75rem) clamp(2rem, 3vw, 3.5rem);
        border-radius: 6px 0 0 6px;
        background:
            linear-gradient(115deg, transparent 28%, rgba(255, 248, 224, .45) 44%, transparent 60%),
            linear-gradient(160deg, #F0D79C 0%, #E2BF77 45%, #D7AE60 100%);
        box-shadow: inset -28px 0 30px -22px rgba(90, 55, 20, .55);
    }

    .book--ledger .book__page:last-child {
        background:
            radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 80, 40, .24) 100%),
            var(--parchment) center / 640px repeat,
            var(--cream);
    }
}

/* ============================================
   TRUST & SAFETY - CLASPED SPREAD
   ============================================ */

.emblem {
    display: flex;
    justify-content: center;
    margin-bottom: .75rem;
    color: var(--gold-ink);
}

.emblem .icon {
    fill: rgba(217, 176, 98, .42);
}

.trust-title {
    text-align: center;
}

.claim-list,
.tip-list {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.claim-list li,
.tip-list li {
    margin-bottom: .6rem;
}

.claim-list li::marker {
    color: var(--taupe);
}

.tip-list li::marker {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gold-ink);
}

.clasp {
    display: none;
}

@media (min-width: 1024px) {
    .clasp {
        position: absolute;
        top: 42%;
        z-index: 4;
        display: block;
        width: 4.25rem;
        height: 3rem;
        background: linear-gradient(180deg, #6B4A33 0%, #4A3122 55%, #3A2619 100%);
        border-radius: 6px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 6px 10px -6px rgba(0, 0, 0, .7);
    }

    .clasp::before {
        content: "";
        position: absolute;
        inset: 5px;
        border: 1px dashed rgba(235, 203, 134, .45);
        border-radius: 4px;
    }

    .clasp svg {
        position: absolute;
        top: 50%;
        width: 1.9rem;
        height: 1.9rem;
        transform: translateY(-50%);
    }

    .clasp--left {
        left: -1.4rem;
    }

    .clasp--left svg {
        left: .55rem;
    }

    .clasp--right {
        right: -1.4rem;
    }

    .clasp--right svg {
        right: .55rem;
    }

    .book--clasp .book__page::before {
        content: "";
        position: absolute;
        inset: 14px;
        pointer-events: none;
        background:
            linear-gradient(var(--taupe), var(--taupe)) top left / 2.5rem 1px no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) top left / 1px 2.5rem no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) top right / 2.5rem 1px no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) top right / 1px 2.5rem no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) bottom right / 2.5rem 1px no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) bottom right / 1px 2.5rem no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) bottom left / 2.5rem 1px no-repeat,
            linear-gradient(var(--taupe), var(--taupe)) bottom left / 1px 2.5rem no-repeat;
    }

    .book--clasp .book__page > * {
        position: relative;
    }

    .book--clasp .book__page {
        padding-inline: clamp(2.75rem, 3.6vw, 4rem);
    }
}

/* ============================================
   OBSERVATIONS - JOURNAL
   ============================================ */

.field-label {
    margin-bottom: .5rem;
    font-family: var(--font-script);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--walnut-600);
}

.journal-lines {
    --rule: 2rem;
    margin: 0;
    padding: 0 0 0 1.25rem;
    line-height: var(--rule);
    border-left: 2px solid rgba(150, 62, 45, .55);
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgba(110, 130, 160, .38) calc(var(--rule) - 1px) var(--rule));
}

.journal-lines p {
    margin: 0 0 var(--rule);
}

.journal-lines p:last-child,
.journal-notes li:last-child {
    margin-bottom: 0;
}

.journal-notes {
    list-style: none;
}

.journal-notes li {
    margin-bottom: var(--rule);
}

.journal-disclaimer {
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .book--journal .book__page:last-child {
        padding-top: calc(clamp(2.75rem, 3.5vw, 3.75rem) + 3rem);
    }
}

/* ============================================
   FINAL CTA
   ============================================ */

.closing__title {
    font-weight: 400;
    font-size: var(--fs-h2);
    color: var(--walnut);
}

.closing__copy {
    max-width: 38rem;
    margin-inline: auto;
}

.closing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.25rem;
    margin: 1.75rem 0 .5rem;
}

.closing__actions .btn {
    min-width: 13rem;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .faq-spine[open] .faq-spine__a {
        animation: none;
    }

    .book__page:hover > .page-curl,
    .feature-item--slip:hover > .page-curl,
    .goal-slip:hover > .page-curl,
    .btn:hover,
    .app-badge:hover {
        transform: none;
    }
}