/* ==========================================================================
   FrugalText Inside-Page Sections CSS
   Styles for sections S-012 through S-070 (shop, category, PDP, cart, checkout,
   order confirmation, buyback, my account, login/register, contact, policy,
   404, blog). Each section gets its own block below, prefixed with its S-ID.
   ========================================================================== */


/* ==========================================================================
   MASTER SECTIONS PAGE CHROME
   Shell styles for the /master-sections/ review page itself. Not part of any
   inside-page section; used only to label and anchor sections on that page.
   ========================================================================== */

.ms-main {
    background-color: var(--color-white);
    color: var(--color-neutral-800);
}

.ms-page-header {
    padding: clamp(48px, 8vw, 96px) 0;
    background-color: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
    text-align: center;
}

.ms-page-header__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.ms-page-header__eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 auto 12px;
}

.ms-page-header__title {
    font-size: var(--text-h1);
    margin: 0 auto 16px;
}

.ms-page-header__desc {
    max-width: 65ch;
    margin: 0 auto;
    color: var(--color-neutral-600);
    font-size: var(--text-body);
    line-height: 1.6;
}

.ms-toc {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
    padding: 16px 0;
}

.ms-toc__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.ms-toc__title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 8px;
}

.ms-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    max-height: 120px;
    overflow-y: auto;
}

.ms-toc__list li {
    list-style: none;
}

.ms-toc__list a {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.ms-toc__list a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.ms-section {
    padding: clamp(40px, 6vw, 80px) 0;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.ms-section__label {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    padding: 16px 20px;
    background-color: var(--color-primary-lightest);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.ms-section__sid {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    background-color: var(--color-white);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-right: 8px;
}

.ms-section__name {
    display: inline;
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0;
    margin: 0;
}

.ms-section__pages {
    margin: 8px 0 0;
    font-size: var(--text-small);
    color: var(--color-neutral-600);
}

.ms-section__status--pending {
    display: inline-block;
    margin: 8px 0 0;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-warning);
    background-color: rgba(245, 158, 11, 0.12);
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ms-section__body {
    /* each section partial renders its own root <section> - no layout here */
}

.ms-placeholder {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    background-color: var(--color-neutral-50);
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-neutral-500);
    font-style: italic;
}


/* ==========================================================================
   INSIDE-PAGE SECTION STYLES
   Each section's CSS lives below, prefixed with its S-ID comment block.
   Appended as sections come online via the master-sections build loop.
   ========================================================================== */


/* ==========================================================================
   S-012: Catalog Page Hero
   Editorial band. Compact. Breadcrumb -> H1 with accent rule -> supporting
   line -> prominent ISBN/title search. Result count to the right of the
   search on desktop, beneath on mobile. Does not compete with the grid.
   ========================================================================== */

.s012 {
    padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 32px);
    background-color: #EEF4F9;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s012__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s012__crumbs {
    margin-bottom: 16px;
}

.s012__crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s012__crumbs-item {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.s012__crumbs-item a {
    color: var(--color-neutral-500);
    transition: color var(--duration-fast) var(--ease-out);
}

.s012__crumbs-item a:hover {
    color: var(--color-primary);
}

.s012__crumbs-item [aria-current="page"] {
    color: var(--color-secondary);
    font-weight: 600;
}

.s012__crumbs-sep {
    color: var(--color-neutral-300);
    font-weight: 400;
}

.s012__heading {
    margin-bottom: clamp(20px, 3vw, 28px);
}

.s012__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--color-secondary);
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    font-weight: 600;
    font-style: italic;
}

.s012__rule {
    display: block;
    width: 56px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    margin: 0 0 14px;
}

.s012__supporting {
    max-width: 60ch;
    margin: 0;
    font-size: var(--text-body);
    color: var(--color-neutral-600);
    line-height: 1.55;
}

.s012__controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
}

@media (min-width: 768px) {
    .s012__controls {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
    }
}

.s012__search {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px 18px;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
    max-width: 640px;
    width: 100%;
}

.s012__search:focus-within {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(58, 120, 202, 0.12);
}

.s012__search-icon {
    flex-shrink: 0;
    color: var(--color-neutral-500);
    margin-right: 10px;
}

.s012__search:focus-within .s012__search-icon {
    color: var(--color-primary);
}

.s012__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 12px 4px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-900);
    outline: none;
    min-height: 44px;
}

.s012__search-input::placeholder {
    color: var(--color-neutral-400);
}

.s012__search-btn {
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 22px;
    min-height: 44px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s012__search-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

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

.s012__count {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
}

.s012__count strong {
    color: var(--color-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .s012__search {
        padding: 4px 4px 4px 14px;
    }

    .s012__search-btn {
        padding: 12px 16px;
    }
}


/* ==========================================================================
   S-013: Filter Sidebar
   Vertical reading-room spine. Italic Cormorant heading, DM Sans controls.
   Teal active-filter chips at the top, clear-all link, collapsible groups.
   Mobile: CSS-only drawer via hidden checkbox toggle.
   ========================================================================== */

.s013 {
    padding: 0;
    background-color: var(--color-white);
}

.s013__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s013__mobile-bar {
    display: none;
    padding: 12px 0 16px;
}

.s013__drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 18px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-small);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s013__drawer-trigger:hover {
    background-color: var(--color-secondary-light);
}

.s013__drawer-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.s013__drawer-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s013__scrim {
    display: none;
}

.s013__panel {
    position: relative;
    padding: clamp(24px, 3vw, 32px) 0;
    max-width: 320px;
    border-right: 1px solid var(--color-neutral-200);
    padding-right: clamp(20px, 2vw, 28px);
    background-color: var(--color-white);
}

.s013__panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s013__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s013__heading-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.s013__heading-word {
    font-style: italic;
    font-weight: 500;
}

.s013__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s013__close:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-secondary);
}

.s013__active {
    padding: 16px;
    margin-bottom: 20px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 0;
}

.s013__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
    max-width: 100%;
    min-width: 0;
}

.s013__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 12px;
    background-color: var(--color-accent-lightest);
    color: var(--color-accent-dark);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    min-width: 0;
}

.s013__chip-label {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    min-width: 0;
}

.s013__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s013__chip-remove:hover {
    background-color: var(--color-accent-dark);
    transform: scale(1.08);
}

.s013__clear {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    background: none;
    border: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s013__clear:hover {
    color: var(--color-primary-dark);
}

.s013__form {
    display: flex;
    flex-direction: column;
}

.s013__group {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s013__group[open] .s013__group-chevron {
    transform: rotate(180deg);
}

.s013__group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 4px 0;
}

.s013__group-summary::-webkit-details-marker {
    display: none;
}

.s013__group-label {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--color-secondary);
    letter-spacing: -0.005em;
}

.s013__group-chevron {
    color: var(--color-neutral-500);
    transition: transform var(--duration-fast) var(--ease-out);
}

.s013__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 0;
    margin: 0;
}

.s013__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
    position: relative;
}

.s013__option:hover {
    background-color: var(--color-neutral-50);
}

.s013__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s013__option-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
    position: relative;
}

.s013__option input[type="radio"] ~ .s013__option-box {
    border-radius: var(--radius-pill);
}

.s013__option input:checked ~ .s013__option-box {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.s013__option input[type="checkbox"]:checked ~ .s013__option-box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.s013__option input[type="radio"]:checked ~ .s013__option-box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-white);
    transform: translate(-50%, -50%);
}

.s013__option input:focus-visible ~ .s013__option-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s013__option-label {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-800);
    line-height: 1.4;
}

.s013__option-count {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
}

.s013__option--zero {
    opacity: 0.45;
    cursor: not-allowed;
}

.s013__option--zero:hover {
    background-color: transparent;
}

.s013__price {
    padding: 8px 0 0;
}

.s013__price-readout {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 16px;
}

.s013__price-sep {
    color: var(--color-neutral-400);
    font-family: var(--font-body);
    font-style: normal;
}

.s013__price-value {
    font-variant-numeric: tabular-nums;
}

/* Dual-handle range slider. Key pattern: the visible track and the
   native runnable-track are BOTH 4px tall and share the same Y position,
   so there is no possible alignment drift between what the user sees
   and where the browser places the thumb. The thumb uses margin-top: -7px
   ((4 - 18) / 2) to overflow the 4px track symmetrically - centered on
   the visible line in every browser. */
.s013__price-slider {
    position: relative;
    height: 4px;
    margin: 16px 0 14px;
}

.s013__price-track {
    position: absolute;
    inset: 0;
    height: 4px;
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-pill);
    pointer-events: none;
}

.s013__price-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-pill);
}

.s013__price-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

/* Native runnable-track at the same 4px height as the visible track
   (which sits at the same y). */
.s013__price-input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 4px;
    background: transparent;
    border: 0;
}

.s013__price-input::-moz-range-track {
    height: 4px;
    background: transparent;
    border: 0;
}

/* Thumb sits on top of the 4px track. margin-top: -7 centers the 18px
   thumb vertically on the 4px track - 7px overhang above and below. */
.s013__price-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s013__price-input::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
}

.s013__price-input::-webkit-slider-thumb:hover,
.s013__price-input::-webkit-slider-thumb:active {
    transform: scale(1.1);
    border-color: var(--color-primary-dark);
}

.s013__price-input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.s013__price-limits {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.s013__apply {
    display: none;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--color-neutral-200);
}

.s013__apply-btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s013__apply-btn:hover {
    background-color: var(--color-primary-dark);
}

/* Mobile drawer */
@media (max-width: 900px) {
    .s013__mobile-bar {
        display: flex;
    }

    .s013__panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: 88%;
        max-width: 380px;
        padding: 20px;
        padding-right: 20px;
        background-color: var(--color-white);
        border-right: none;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--duration-normal) var(--ease-spring);
    }

    .s013__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99;
        background-color: rgba(4, 30, 66, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease-out);
    }

    .s013__drawer-toggle:checked ~ .s013__panel {
        transform: translateX(0);
    }

    .s013__drawer-toggle:checked ~ .s013__scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .s013__close {
        display: inline-flex;
    }

    .s013__apply {
        display: block;
    }
}

/* Desktop guard: hard-stop mobile drawer affordances at >=901px so they can
   never leak into the sidebar column layout. Also ensures the panel sits in
   normal block flow beneath the sticky header (header z-index: 100, TOC 10). */
@media (min-width: 901px) {
    .s013__mobile-bar,
    .s013__drawer-trigger,
    .s013__close,
    .s013__scrim {
        display: none !important;
    }

    .s013__panel {
        position: relative;
        z-index: auto;
        transform: none;
        box-shadow: none;
    }
}


/* ==========================================================================
   S-014: Sort + Results Bar
   Hairline shelf above the grid. Italic Cormorant "Showing" phrasing,
   DM Sans controls. Visible without a mobile drawer.
   ========================================================================== */

.s014 {
    padding: clamp(16px, 2vw, 20px) 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s014__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.s014__count {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.4;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.s014__count-kicker {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
}

.s014__count strong {
    color: var(--color-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.s014__count-of,
.s014__count-suffix {
    color: var(--color-neutral-500);
}

.s014__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.s014__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.s014__field-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s014__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    padding: 0 38px 0 14px;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    min-height: 44px;
}

.s014__select:hover {
    border-color: var(--color-neutral-300);
}

.s014__select:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.s014__select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 10px 4px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-secondary);
    cursor: pointer;
    outline: none;
    min-width: 160px;
    min-height: 44px;
}

.s014__select--sm .s014__select-input {
    min-width: 54px;
}

.s014__select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500);
    pointer-events: none;
}

.s014__view {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}

.s014__view input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.s014__view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s014__view-btn:hover {
    color: var(--color-secondary);
}

.s014__view input:checked + .s014__view-btn {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.s014__view input:focus-visible + .s014__view-btn {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .s014__inner {
        justify-content: flex-start;
    }

    .s014__controls {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .s014__field-label {
        display: none;
    }

    .s014__view-btn span {
        display: none;
    }

    .s014__view-btn {
        padding: 8px 10px;
    }
}


/* ==========================================================================
   S-015: Product Grid
   Editorial card. Cover is the hero, italic Cormorant title, DM Sans meta,
   load-bearing "Rent from / Buy from" price lines. Entire card is one anchor.
   ========================================================================== */

.s015 {
    padding: clamp(32px, 4vw, 48px) 0;
    background-color: var(--color-white);
}

.s015__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s015__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Mobile: force 2-col layout with smaller cards instead of full-width 1-col */
@media (max-width: 640px) {
    .s015__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .s015__card {
        border-radius: var(--radius-md);
    }
    .s015__cover {
        aspect-ratio: 2 / 3;
    }
    .s015__body {
        padding: 12px 12px 14px;
    }
    .s015__eyebrow {
        font-size: 0.625rem;
    }
    .s015__title {
        font-size: 0.9375rem;
        line-height: 1.25;
    }
    .s015__author {
        font-size: 0.8125rem;
    }
    .s015__prices {
        font-size: 0.75rem;
    }
    .s015__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .s015__conditions,
    .s015__cta {
        font-size: 0.75rem;
    }
    .s015__cta {
        min-height: auto;
        padding: 4px 0;
    }
    .s015__badge {
        font-size: 0.625rem;
        padding: 4px 8px;
        top: 8px;
        left: 8px;
    }
}

.s015__grid--list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.s015__grid--list .s015__card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    align-items: stretch;
}

.s015__grid--list .s015__cover {
    aspect-ratio: 2 / 3;
    max-width: 140px;
    border-radius: var(--radius-md);
}

.s015__grid--list .s015__body {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s015__grid--list .s015__foot {
    margin-top: auto;
}

@media (max-width: 640px) {
    .s015__grid--list .s015__card {
        grid-template-columns: 100px 1fr;
        gap: 14px;
    }
}

.s015__grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 1024px) {
    .s015__grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .s015__grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.s015__item {
    list-style: none;
}

.s015__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-normal) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    min-height: 44px;
}

.s015__card:hover {
    transform: translateY(-4px);
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-card-hover);
    color: inherit;
}

.s015__card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s015__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--color-neutral-100);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.s015__cover-svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.s015__card:hover .s015__cover-svg {
    transform: scale(1.03);
}

.s015__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

.s015__badge--bestseller {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.s015__badge--low-stock {
    background-color: var(--color-warning);
    color: var(--color-neutral-900);
    border-color: var(--color-warning);
}

.s015__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px 18px 18px;
    gap: 6px;
}

.s015__series {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.s015__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
    margin: 2px 0 0;
    /* 2-line clamp safety on very long titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s015__author {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
    line-height: 1.4;
}

.s015__prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-neutral-200);
}

.s015__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.3;
}

.s015__price-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-neutral-500);
    letter-spacing: 0.02em;
}

.s015__price-value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}

.s015__price--rent .s015__price-value {
    color: var(--color-accent-dark);
}

.s015__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
}

.s015__conditions {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-neutral-600);
    padding: 4px 10px;
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
}

.s015__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: auto;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    transition: gap var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s015__card:hover .s015__cta {
    gap: 10px;
    color: var(--color-primary-dark);
}


/* ==========================================================================
   S-016: Empty Results State
   Calm editorial moment. Italic Cormorant heading, clear-filters CTA and
   ISBN/title search side-by-side, recovery strip of 4 bestsellers below.
   ========================================================================== */

.s016 {
    padding: clamp(40px, 6vw, 72px) 0;
    background-color: var(--color-neutral-50);
}

.s016__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s016__notice {
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 56px);
    padding: clamp(32px, 4vw, 48px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.s016__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    background-color: var(--color-primary-lightest);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
}

.s016__eyebrow {
    max-width: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.14em;
}

.s016__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-secondary);
    margin: 0 0 12px;
}

.s016__heading em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary);
}

.s016__support {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-600);
    margin: 0 auto 24px;
    max-width: 48ch;
    line-height: 1.55;
}

.s016__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
}

.s016__clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s016__clear:hover {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
}

.s016__search {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px 16px;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s016__search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.s016__search-icon {
    flex-shrink: 0;
    color: var(--color-neutral-500);
    margin-right: 10px;
}

.s016__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 4px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-900);
    outline: none;
    min-height: 44px;
}

.s016__search-input::placeholder {
    color: var(--color-neutral-400);
    font-style: italic;
}

.s016__search-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s016__search-btn:hover {
    background-color: var(--color-primary-dark);
}

.s016__recovery-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.s016__recovery-rule {
    flex: 1;
    height: 1px;
    background-color: var(--color-neutral-300);
}

.s016__recovery-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.s016__recovery-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-primary);
}

@media (min-width: 560px) {
    .s016__actions {
        flex-direction: row;
    }

    .s016__clear {
        flex-shrink: 0;
    }
}


/* ==========================================================================
   S-017: Pagination Control
   Italic Cormorant current-page flourish, numbered row, hairlines above/below.
   Mobile collapses to Prev / indicator / Next.
   ========================================================================== */

.s017 {
    padding: clamp(32px, 4vw, 48px) 0;
    background-color: var(--color-white);
}

.s017__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--color-neutral-200);
    padding-top: clamp(24px, 3vw, 36px);
}

.s017__summary {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.s017__summary-italic {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--color-secondary);
}

.s017__summary strong {
    color: var(--color-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.s017__nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.s017__list {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.s017__item {
    list-style: none;
}

.s017__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-neutral-700);
    background-color: var(--color-white);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    text-decoration: none;
}

.s017__link:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-secondary);
}

.s017__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s017__link--number {
    border-color: var(--color-neutral-200);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    padding: 0 8px;
}

.s017__link--current {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
    cursor: default;
    position: relative;
    padding: 0 14px;
}

.s017__link--current em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Italic serif numeral slants right at top and left at base; nudge right
       so the glyph sits optically centered inside the navy pill. */
    transform: translateX(1.5px);
}

.s017__link--current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
}

.s017__link--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.s017__link--prev,
.s017__link--next {
    padding: 0 16px;
}

.s017__ellipsis {
    display: inline-block;
    padding: 0 6px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--color-neutral-400);
    letter-spacing: 0.1em;
}

.s017__item--show-sm {
    display: none;
}

.s017__indicator {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    font-variant-numeric: tabular-nums;
}

.s017__indicator em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--color-secondary);
    line-height: 1;
}

.s017__indicator-sep {
    color: var(--color-neutral-400);
    margin: 0 2px;
}

@media (max-width: 600px) {
    .s017__item--hide-sm {
        display: none;
    }

    .s017__item--show-sm {
        display: inline-flex;
    }

    .s017__link--prev span,
    .s017__link--next span {
        display: none;
    }

    .s017__link--prev,
    .s017__link--next {
        padding: 0;
        min-width: 44px;
    }

    /* Summary ("Page 4 of 52") duplicates the mobile indicator - hide it on
       small viewports so only the indicator carries the status. */
    .s017__summary {
        display: none;
    }
}


/* ==========================================================================
   S-018: Category Information Band
   Editorial pull-quote + nav meta sidebar. Italic Cormorant lead, navy body,
   teal course chips, navy related-category links styled distinctly.
   ========================================================================== */

.s018 {
    padding: clamp(32px, 4vw, 56px) 0;
    background-color: var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s018__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s018__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 40px);
}

@media (min-width: 860px) {
    .s018__grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }
}

.s018__lede {
    position: relative;
    padding-left: clamp(16px, 2vw, 24px);
    border-left: 2px solid var(--color-primary);
}

.s018__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.s018__intro {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-secondary);
    letter-spacing: -0.005em;
    margin: 0;
    max-width: 60ch;
}

.s018__intro-open,
.s018__intro-close {
    font-style: italic;
    font-size: 1.4em;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 0;
    position: relative;
    top: 0.1em;
}

.s018__intro-open {
    margin-right: 2px;
}

.s018__intro-close {
    margin-left: 2px;
}

.s018__meta {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 28px);
    padding: clamp(20px, 2.5vw, 28px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s018__block-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 12px;
}

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

.s018__course {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    background-color: var(--color-accent-lightest);
    color: var(--color-accent-dark);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
    text-decoration: none;
}

.s018__course:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-1px);
}

.s018__related {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--color-neutral-200);
}

.s018__related li {
    list-style: none;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s018__related-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 4px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s018__related-link:hover {
    color: var(--color-primary);
}

.s018__related-link:hover .s018__related-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.s018__related-count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
}


/* ==========================================================================
   S-019: Product Hero (PDP)
   Editorial case-book frontispiece. Asymmetric 2-col grid: vellum-framed
   cover (left) + typographic stack (right). H1, ISBN, rating, and S-020
   price block must fit above the fold at 1920 desktop.
   ========================================================================== */

.s019 {
    padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
    background-color: var(--color-white);
}

.s019__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s019__crumbs {
    margin-bottom: clamp(18px, 2.5vw, 28px);
}

.s019__crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s019__crumbs-item {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.s019__crumbs-item a {
    color: var(--color-neutral-500);
    transition: color var(--duration-fast) var(--ease-out);
}

.s019__crumbs-item a:hover {
    color: var(--color-primary);
}

.s019__crumbs-item [aria-current="page"] {
    color: var(--color-secondary);
    font-weight: 700;
}

.s019__crumbs-sep {
    color: var(--color-neutral-300);
}

.s019__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

@media (min-width: 860px) {
    .s019__grid {
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
        gap: clamp(40px, 5vw, 64px);
    }
}

/* Cover column */
.s019__cover-wrap {
    margin: 0;
    position: relative;
}

.s019__cover-frame {
    position: relative;
    padding: clamp(16px, 2vw, 24px);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-neutral-50) 100%, transparent) 0%,
        color-mix(in srgb, var(--color-neutral-100) 100%, transparent) 100%
    );
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s019__cover-frame::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed color-mix(in srgb, var(--color-secondary) 14%, transparent);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.s019__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    max-width: 340px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background-color: var(--color-neutral-100);
}

.s019__zoom {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s019__zoom:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.s019__cover-caption {
    text-align: center;
    margin-top: 16px;
}

.s019__series-mark {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    padding: 4px 12px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Typographic stack */
.s019__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.s019__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 14px;
}

.s019__title {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 3.6vw, 2.875rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    margin: 0;
    text-wrap: balance;
}

.s019__rule {
    display: block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 30%, transparent) 100%);
    border-radius: var(--radius-pill);
    margin: 18px 0 14px;
}

.s019__byline {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    color: var(--color-neutral-700);
    margin: 0 0 16px;
    line-height: 1.4;
}

.s019__byline-prefix {
    font-style: italic;
    color: var(--color-neutral-500);
    margin-right: 6px;
}

.s019__byline-name {
    font-weight: 600;
    color: var(--color-secondary);
}

.s019__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 22px;
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    align-self: flex-start;
    min-height: 44px;
}

.s019__rating:hover {
    background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.s019__rating-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--color-star);
}

.s019__rating-num {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}

.s019__rating-sep {
    color: var(--color-neutral-400);
}

.s019__rating-count {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-neutral-500) 40%, transparent);
}

/* Metadata ledger */
.s019__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 18px 20px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.s019__meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.s019__meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.s019__meta-key {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s019__meta-val {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
}

.s019__isbn {
    display: inline-block;
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    padding: 2px 8px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    user-select: all;
    -webkit-user-select: all;
    cursor: text;
}

.s019__isbn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .s019__meta-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* ==========================================================================
   S-019 inline buy-box - opt-in "above the fold" PDP composition.
   Renders the condition selector, rent/buy toggle, price, qty, and Add
   to Cart directly inside the S-019 hero right column so the visitor
   sees everything they need to act without scrolling.
   ========================================================================== */

.s019__buybox {
    position: relative;
    margin-top: clamp(20px, 2.5vw, 28px);
    padding: clamp(22px, 2.2vw, 28px);
    background: linear-gradient(180deg, #FBF7EE 0%, var(--color-white) 40%);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -18px rgba(4, 30, 66, 0.25),
                0 2px 6px -2px rgba(4, 30, 66, 0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.s019__buybox-rule {
    display: block;
    width: 48px;
    height: 2px;
    margin-bottom: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    border-radius: 2px;
}

.s019__buybox-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background-color: rgba(4, 30, 66, 0.06);
    border-radius: var(--radius-sm);
}

.s019__buybox-mode-btn {
    min-height: 44px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    font-family: var(--font-body);
    color: var(--color-neutral-700);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s019__buybox-mode-label {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.125rem;
    font-weight: 600;
}

.s019__buybox-mode-btn .s019__buybox-mode-sub {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    letter-spacing: 0.02em;
}

.s019__buybox-mode-btn.is-active {
    background-color: var(--color-white);
    color: var(--color-secondary);
    box-shadow: 0 1px 2px rgba(4, 30, 66, 0.08),
                0 0 0 1px rgba(201, 169, 97, 0.35);
}

.s019__buybox-mode-btn.is-active .s019__buybox-mode-sub {
    color: var(--color-neutral-600);
}

.s019__buybox-mode-btn:hover:not(.is-active) {
    color: var(--color-secondary);
}

.s019__buybox-mode-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s019__buybox-conds {
    border: 0;
    padding: 0;
    margin: 0;
}

.s019__buybox-label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    max-width: none;
}

.s019__buybox-conds-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.s019__buybox-cond-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 12px 14px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s019__buybox-cond-tile::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s019__buybox-cond-tile:hover {
    border-color: var(--color-secondary);
    background-color: #FBF7EE;
    transform: translateY(-1px);
}

.s019__buybox-cond-input:checked + .s019__buybox-cond-tile,
.s019__buybox-cond-tile.is-selected {
    border-color: var(--color-secondary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-secondary),
                0 6px 14px -6px rgba(4, 30, 66, 0.18);
}

.s019__buybox-cond-input:checked + .s019__buybox-cond-tile::before,
.s019__buybox-cond-tile.is-selected::before {
    opacity: 1;
}

.s019__buybox-cond-input:focus-visible + .s019__buybox-cond-tile {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s019__buybox-cond-name {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.s019__buybox-cond-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--color-neutral-500);
    cursor: help;
    transition: color var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.s019__buybox-cond-info:hover,
.s019__buybox-cond-info:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.s019__buybox-cond-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    max-width: 80vw;
    padding: 12px 14px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px -8px rgba(4, 30, 66, 0.4);
    font-style: normal;
    font-family: var(--font-body);
    text-align: left;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
    white-space: normal;
}

.s019__buybox-cond-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-secondary);
}

.s019__buybox-cond-info:hover .s019__buybox-cond-tooltip,
.s019__buybox-cond-info:focus-visible .s019__buybox-cond-tooltip,
.s019__buybox-cond-info:focus-within .s019__buybox-cond-tooltip {
    opacity: 1;
    pointer-events: auto;
}

.s019__buybox-cond-tooltip-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gilt-end, #c9a961);
    margin-bottom: 4px;
}

.s019__buybox-cond-tooltip-text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-white);
}

.s019__buybox-cond-price {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}

.s019__buybox-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 6px;
    border-top: 1px solid rgba(201, 169, 97, 0.35);
}

.s019__buybox-price-amt {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.s019__buybox-price-cur {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-secondary);
    opacity: 0.8;
}

.s019__buybox-price-val {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.s019__buybox-price-note:not([hidden]) {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    max-width: none;
    margin: 0;
}

.s019__buybox-price-note em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.s019__buybox-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.s019__buybox-qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 52px;
    box-sizing: border-box;
    border: 1.5px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    overflow: hidden;
    flex-shrink: 0;
}

.s019__buybox-qty-btn {
    width: 44px;
    height: 100%;
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    color: var(--color-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s019__buybox-qty-btn:hover {
    background-color: var(--color-neutral-100);
}

.s019__buybox-qty-input {
    width: 44px;
    height: 100%;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--color-neutral-200);
    border-right: 1px solid var(--color-neutral-200);
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0;
}

.s019__buybox-qty-input::-webkit-outer-spin-button,
.s019__buybox-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.s019__buybox-qty-input[type="number"] {
    -moz-appearance: textfield;
}

.s019__buybox-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    min-height: 52px;
    padding: 0 22px;
    background: linear-gradient(180deg, var(--color-secondary) 0%, #031835 100%);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(4, 30, 66, 0.15),
                0 0 0 1px rgba(201, 169, 97, 0.25);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-position var(--duration-fast) var(--ease-out);
}

.s019__buybox-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(4, 30, 66, 0.45),
                0 0 0 1px var(--color-gilt-start);
    background: linear-gradient(180deg, #0a2855 0%, var(--color-secondary) 100%);
}

.s019__buybox-cta:focus-visible {
    outline: 2px solid var(--color-gilt-start);
    outline-offset: 2px;
}

.s019__buybox-cta svg {
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s019__buybox-cta:hover svg {
    transform: translateX(2px);
}

.s019__buybox-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 2px;
    border-top: 1px dashed var(--color-neutral-200);
    padding: 14px 0 0;
    margin-top: 4px;
}

.s019__buybox-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    max-width: none;
}

.s019__buybox-trust svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .s019__buybox-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .s019__buybox-qty-stepper {
        align-self: flex-start;
    }
}

/* S-023 Rental Terms tab content */
.s023__rental {
    font-family: var(--font-body);
    color: var(--color-neutral-800);
}

.s023__rental-lede {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.s023__rental-lede em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--color-secondary);
    display: inline-block;
    margin-right: 6px;
}

.s023__rental-terms {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 24px;
}

.s023__rental-term {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s023__rental-term:last-of-type {
    border-bottom: 0;
}

.s023__rental-term dt {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    margin: 0;
}

.s023__rental-term dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-neutral-800);
}

.s023__rental-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

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

@media (max-width: 640px) {
    .s023__rental-term {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* ==========================================================================
   S-020: Rent/Buy Toggle + Price Block
   Decisive ledger card. Pill toggle with sliding indicator, oversized
   tabular price (italic dollar glyph), full-width primary CTA. Trust line
   sits directly below so it never competes with the CTA.
   ========================================================================== */

.s020 {
    padding: clamp(20px, 3vw, 32px) 0;
    background-color: var(--color-white);
}

.s020__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
}

.s020__card {
    padding: clamp(20px, 2.5vw, 28px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Toggle */
.s020__toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px;
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
    margin-bottom: clamp(18px, 2.5vw, 24px);
}

.s020__toggle-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
    color: var(--color-neutral-600);
}

.s020__toggle-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s020__toggle-btn .s020__toggle-label {
    font-size: var(--text-body);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.s020__toggle-btn .s020__toggle-sub {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.s020__toggle-btn.is-active {
    color: var(--color-white);
}

.s020__toggle-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-spring);
    z-index: 0;
}

.s020__card[data-mode="buy"] .s020__toggle-indicator {
    transform: translateX(100%);
}

/* Price block */
.s020__price-block {
    text-align: center;
    margin-bottom: clamp(20px, 2.5vw, 28px);
    padding-bottom: clamp(18px, 2.5vw, 24px);
    border-bottom: 1px dashed var(--color-neutral-200);
}

.s020__price-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px;
}

.s020__price-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 8px;
    font-family: var(--font-heading);
    line-height: 1;
    color: var(--color-secondary);
}

.s020__price-currency {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent-dark);
    margin-right: 2px;
    align-self: flex-start;
    padding-top: 8px;
}

.s020__price-value {
    font-size: clamp(3rem, 6vw, 4rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.s020__price-note {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.4;
}

/* Row: qty + CTA */
.s020__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 14px;
}

.s020__qty {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s020__qty-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s020__qty-stepper {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.s020__qty-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    background: transparent;
    border: none;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s020__qty-btn:hover {
    background-color: var(--color-neutral-100);
}

.s020__qty-input {
    width: 44px;
    min-height: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.s020__qty-input::-webkit-outer-spin-button,
.s020__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.s020__qty-input:focus {
    outline: none;
}

.s020__qty-stepper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Primary CTA */
.s020__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-top: 18px; /* aligns with input row when qty label pushes stepper down */
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out),
                filter var(--duration-fast) var(--ease-out);
}

.s020__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary) 40%, transparent);
    filter: brightness(1.05);
}

.s020__cta:active {
    transform: translateY(0);
}

.s020__cta:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Trust line */
.s020__trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-accent-dark);
    font-weight: 500;
}

.s020__trust svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

/* Notify-me fallback (rendered as reference inside commented block; styled
   defensively so it renders cleanly if swapped in) */
.s020__notify {
    padding: clamp(24px, 3vw, 32px);
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    text-align: center;
}

.s020__notify-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-warning);
    margin: 0 0 8px;
}

.s020__notify-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 10px;
    line-height: 1.15;
}

.s020__notify-title em {
    color: var(--color-primary);
}

.s020__notify-copy {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0 auto 20px;
    max-width: 44ch;
    line-height: 1.5;
}

.s020__notify-form {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
}

.s020__notify-input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-900);
}

.s020__notify-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.s020__notify-btn {
    min-height: 48px;
    padding: 12px 20px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s020__notify-btn:hover {
    background-color: var(--color-secondary-light);
}

@media (max-width: 480px) {
    .s020__notify-form {
        flex-direction: column;
    }
}


/* ==========================================================================
   S-021: Condition Selector
   Stacked library tickets. Text + price only (no condition photos per
   launch scope). Teal selected-state left rule ties cause-effect to the
   S-020 price block. Out-of-stock conditions never render.
   ========================================================================== */

.s021 {
    padding: clamp(28px, 3.5vw, 40px) 0;
    background-color: var(--color-white);
}

.s021__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    max-width: 820px;
}

.s021__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-neutral-200);
    flex-wrap: wrap;
}

.s021__title {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.s021__title em {
    font-style: italic;
    color: var(--color-primary);
}

.s021__guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    min-height: 44px;
    padding: 8px 0;
    transition: gap var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s021__guide-link:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

.s021__set {
    border: none;
    padding: 0;
    margin: 0;
}

.s021__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.s021__item {
    list-style: none;
}

.s021__tile {
    position: relative;
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) auto 28px;
    gap: clamp(12px, 2vw, 20px);
    align-items: center;
    min-height: 72px;
    padding: 14px 18px 14px 0;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s021__tile:hover {
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.s021__input:focus-visible + .s021__tile {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s021__tile-rule {
    display: block;
    width: 6px;
    height: 100%;
    background-color: var(--color-neutral-200);
    align-self: stretch;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s021__tile.is-selected {
    border-color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.s021__tile.is-selected .s021__tile-rule {
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.s021__tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s021__tile-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.s021__tile-label {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.1;
}

.s021__tile-label em {
    font-style: italic;
}

.s021__tile-flag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    padding: 3px 8px;
    background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
    border-radius: var(--radius-pill);
}

.s021__tile-helper {
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--color-neutral-600);
    max-width: 58ch;
}

.s021__tile-prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.s021__tile-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-body);
    line-height: 1.3;
}

.s021__tile-price-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s021__tile-price-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.s021__tile-price--rent .s021__tile-price-val {
    color: var(--color-accent-dark);
}

.s021__tile-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-300);
    color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
    margin-right: 18px;
}

.s021__tile-mark svg {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s021__tile.is-selected .s021__tile-mark {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.s021__tile.is-selected .s021__tile-mark svg {
    opacity: 1;
}

.s021__foot-note {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .s021__tile {
        grid-template-columns: 6px minmax(0, 1fr) 26px;
        grid-template-rows: auto auto;
        padding: 12px 14px 12px 0;
    }

    .s021__tile-body {
        grid-column: 2;
        grid-row: 1;
    }

    .s021__tile-prices {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        gap: 14px;
        align-items: center;
        text-align: left;
        padding-top: 6px;
        border-top: 1px dashed var(--color-neutral-200);
        margin-top: 4px;
    }

    .s021__tile-mark {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        margin-top: 4px;
        margin-right: 12px;
    }
}


/* ==========================================================================
   S-022: Rental Terms Panel
   Calm terms card with left gilt rule, calendar-anchored return-date H2,
   ledger-style term list. Prominent client-review warning banner sits
   OUTSIDE the panel so Sean can't miss it during review.
   ========================================================================== */

.s022 {
    padding: clamp(24px, 3.5vw, 40px) 0;
    background-color: var(--color-white);
}

.s022__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
    max-width: 820px;
}

.s022__review-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-warning) 14%, transparent) 0 8px,
        color-mix(in srgb, var(--color-warning) 8%, transparent) 8px 16px
    );
    border: 2px solid var(--color-warning);
    border-radius: var(--radius-md);
}

.s022__review-pill {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--color-warning);
    color: var(--color-neutral-900);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.s022__review-copy {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-800);
    line-height: 1.5;
}

.s022__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.5vw, 24px);
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);
    padding-left: clamp(36px, 4vw, 48px);
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.s022__panel-rule {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
}

.s022__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s022__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin: 0;
}

.s022__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
}

.s022__title em {
    font-style: italic;
    color: var(--color-neutral-600);
    font-weight: 500;
    margin-right: 4px;
}

.s022__sub {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-600);
    margin: 0;
}

.s022__terms {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
}

@media (min-width: 720px) {
    .s022__terms {
        grid-template-columns: 1fr 1fr;
        gap: 20px 24px;
    }

    .s022__terms > div:nth-child(3) {
        grid-column: 1 / -1;
    }
}

.s022__term {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.s022__term-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.s022__term-key svg {
    color: var(--color-primary);
}

.s022__term-val {
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-neutral-700);
    margin: 0;
}

.s022__term-val--highlight {
    color: var(--color-accent-dark);
    font-weight: 500;
}

.s022__policy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: color var(--duration-fast) var(--ease-out),
                text-decoration-color var(--duration-fast) var(--ease-out);
}

.s022__policy-link:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
}


/* ==========================================================================
   S-023: Product Details Tabs
   Editorial tab-bar on a hairline navy rule. Active tab lifts with gilt
   underline + italic Cormorant. Details panel is a two-col catalog ledger,
   Description is single measured column. Condition Guide text-only.
   ========================================================================== */

.s023 {
    padding: clamp(32px, 4vw, 48px) 0;
    background-color: var(--color-white);
}

.s023__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s023__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: clamp(24px, 3vw, 36px);
    padding-bottom: 0;
}

.s023__tab {
    position: relative;
    background: transparent;
    border: none;
    padding: 14px 4px 14px;
    margin-right: clamp(12px, 2vw, 24px);
    min-height: 44px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color var(--duration-fast) var(--ease-out);
}

.s023__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.s023__tab.is-active::after {
    transform: scaleX(1);
}

.s023__tab-label {
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color var(--duration-fast) var(--ease-out);
}

.s023__tab:hover .s023__tab-label {
    color: var(--color-secondary);
}

.s023__tab.is-active .s023__tab-label {
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.s023__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.s023__panels {
    /* Panel container - panels manage their own spacing */
}

.s023__panel {
    display: none;
    animation: s023-fade 0.3s var(--ease-out);
}

.s023__panel.is-active {
    display: block;
}

@keyframes s023-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Description */
.s023__desc {
    max-width: 68ch;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s023__lede {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: 1.65;
    color: var(--color-neutral-800);
    margin: 0;
}

.s023__body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    color: var(--color-neutral-700);
    margin: 0;
}

/* Details ledger */
.s023__ledger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    max-width: 640px;
}

@media (min-width: 560px) {
    .s023__ledger {
        grid-template-columns: 1fr 1fr;
        gap: 0 clamp(20px, 3vw, 40px);
    }
}

.s023__ledger-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--color-neutral-200);
    align-items: baseline;
}

.s023__ledger-row dt {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s023__ledger-row dd {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-secondary);
    margin: 0;
    font-weight: 500;
}

.s023__mono {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    user-select: all;
}

/* Condition guide */
.s023__conditions-intro {
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-700);
    line-height: 1.6;
    margin: 0 0 20px;
}

.s023__conditions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 720px;
}

.s023__conditions-list li {
    list-style: none;
    padding: 14px 0 14px 20px;
    border-left: 2px solid var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding-right: 18px;
}

.s023__cond-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 4px;
    line-height: 1.15;
}

.s023__cond-name em {
    font-style: italic;
}

.s023__cond-copy {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    margin: 0;
    line-height: 1.55;
}

/* Shipping */
.s023__shipping {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 700px;
}

.s023__shipping li {
    list-style: none;
    padding: 0;
}

.s023__ship-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 4px;
    font-style: italic;
}

.s023__ship-copy {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.6;
    margin: 0;
    max-width: 58ch;
}

/* Mobile: keep tabs as tabs (not accordion). The tablist scrolls
   horizontally on small screens when content is wider than viewport. */
.s023__mobile-heading {
    display: none;
}

@media (max-width: 640px) {
    .s023 .s023__tablist {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .s023 .s023__tablist::-webkit-scrollbar {
        display: none;
    }
    .s023__tab {
        flex-shrink: 0;
    }
}


/* ==========================================================================
   S-024: Product Reviews
   Heavy-weight social-proof spread. Left summary: oversized italic aggregate
   score + horizontal distribution chart + Write CTA. Right: filter chips +
   review feed with navy monogram circles, teal verified badges, gilt dividers.
   ========================================================================== */

.s024 {
    padding: clamp(48px, 6vw, 80px) 0;
    background-color: var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s024__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s024__head {
    margin-bottom: clamp(28px, 4vw, 44px);
}

.s024__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.s024__title {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.s024__title em {
    font-style: italic;
    color: var(--color-accent-dark);
}

.s024__rule {
    display: block;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    border-radius: var(--radius-pill);
    margin-top: 14px;
}

.s024__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

@media (min-width: 960px) {
    .s024__grid {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        gap: clamp(40px, 5vw, 64px);
    }
}

/* Summary sidebar */
.s024__summary {
    padding: clamp(24px, 3vw, 32px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-height) + 20px);
}

@media (max-width: 959px) {
    .s024__summary {
        position: static;
    }
}

.s024__score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
}

.s024__score-num {
    font-size: clamp(3rem, 5vw, 4.25rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.s024__score-out {
    font-size: 1.125rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-neutral-500);
}

.s024__score-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-star);
    margin-bottom: 8px;
}

.s024__score-count {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0 0 22px;
    line-height: 1.4;
}

.s024__dist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.s024__dist-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
    list-style: none;
}

.s024__dist-key {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s024__dist-bar {
    display: block;
    height: 8px;
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.s024__dist-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border-radius: var(--radius-pill);
    transition: width var(--duration-normal) var(--ease-spring);
}

.s024__dist-count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-neutral-700);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.s024__write {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s024__write:hover {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
}

/* Review feed */
.s024__filter {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
}

.s024__filter-btn {
    min-height: 40px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s024__filter-btn:hover {
    color: var(--color-secondary);
}

.s024__filter-btn.is-active {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.s024__list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.s024__item {
    list-style: none;
    padding: clamp(20px, 2.5vw, 28px) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-gilt-start) 35%, var(--color-neutral-200));
}

.s024__item:first-child {
    padding-top: 0;
}

.s024__item:last-child {
    border-bottom: none;
}

.s024__item-head {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.s024__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
}

.s024__item-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s024__item-name {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.2;
}

.s024__item-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.s024__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

.s024__badge--rental {
    background-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent-dark);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.s024__badge--purchase {
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-dark);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.s024__item-sep {
    color: var(--color-neutral-300);
}

.s024__item-date {
    color: var(--color-neutral-500);
    font-weight: 500;
}

.s024__item-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--color-star);
    align-self: flex-start;
    padding-top: 4px;
}

.s024__item-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-secondary);
    margin: 0 0 8px;
    line-height: 1.25;
}

.s024__item-body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    color: var(--color-neutral-700);
    margin: 0 0 12px;
    max-width: 70ch;
}

.s024__item-cond {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 0;
    background-color: var(--color-white);
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
}

.s024__item-cond-key {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s024__item-cond-val {
    color: var(--color-secondary);
    font-weight: 500;
}

.s024__load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s024__load:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

@media (max-width: 560px) {
    .s024__item-head {
        grid-template-columns: 44px 1fr;
    }

    .s024__item-stars {
        grid-column: 1 / -1;
        padding-top: 0;
        padding-left: 58px;
    }
}


/* ==========================================================================
   S-025: Related Books
   Editorial recommendation band. Centered italic Cormorant heading flanked
   by short gilt rules. Reuses .s015__grid + .s015__card markup so pricing
   and wording stay consistent with the shop.
   ========================================================================== */

.s025 {
    padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
    background-color: var(--color-white);
}

.s025__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s025__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 24px);
    margin-bottom: 10px;
}

.s025__rule {
    display: block;
    flex: 1;
    max-width: 140px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-gilt-start) 50%,
        transparent 100%
    );
}

.s025__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.s025__title em {
    font-style: italic;
    color: var(--color-primary);
}

.s025__sub {
    text-align: center;
    margin: 0 auto clamp(28px, 3.5vw, 40px);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    letter-spacing: 0.01em;
    max-width: 56ch;
}

.s025__grid {
    /* Inherits from .s015__grid--compact; no override needed */
}

@media (max-width: 520px) {
    .s025__title {
        white-space: normal;
    }

    .s025__rule {
        max-width: 48px;
    }
}


/* ==========================================================================
   S-026: Recently Viewed
   Quieter "trail" strip intentionally tonally dropped from S-025 so the
   two read as different surfaces. Left-aligned header, Clear trail chip
   at far right, muted neutral-50 band with hairline top border.
   ========================================================================== */

.s026 {
    padding: clamp(32px, 4vw, 48px) 0 clamp(40px, 5vw, 64px);
    background-color: var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-200);
}

.s026__inner {
    width: var(--space-container);
    margin-left: auto;
    margin-right: auto;
}

.s026__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(20px, 2.5vw, 28px);
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-neutral-300);
    flex-wrap: wrap;
}

.s026__head-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s026__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s026__title {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 500;
    color: var(--color-neutral-700);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
}

.s026__title em {
    font-style: italic;
    color: var(--color-secondary);
}

.s026__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s026__clear:hover {
    background-color: var(--color-white);
    border-color: var(--color-neutral-400);
    color: var(--color-secondary);
}

.s026__clear svg {
    opacity: 0.7;
}

.s026__grid {
    /* Inherits from .s015__grid--compact; no override needed */
}

/* Subtle differentiation from S-025: cards sit on the tinted band without
   hover-lift competing - keep the hover but tone the shadow. */
.s026 .s015__card {
    background-color: var(--color-white);
}

.s026 .s015__card:hover {
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   S-027: Cart Line Items
   The Ledger. Editorial cart list - hairline navy rules, tabular DM Sans
   numerals on prices, Cormorant italic for heading and per-line total. Rent
   and Buy look unmistakably different; stock-issue uses gilt/amber, never red.
   ========================================================================== */
.s027 {
    background-color: var(--color-white);
    padding: var(--space-section) 0 var(--space-section-sm);
}

/* Empty-cart indicator used on /cart-empty-demo/. */
.ft-cart-empty {
    padding: clamp(40px, 6vw, 72px) 24px;
    text-align: center;
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
    background-color: var(--color-neutral-50);
}

.ft-cart-empty__glyph {
    color: var(--color-neutral-400);
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.ft-cart-empty__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 10px;
    max-width: none;
}

.ft-cart-empty__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-secondary);
    margin: 0 0 12px;
    line-height: 1.2;
    font-weight: 600;
    max-width: none;
}

.ft-cart-empty__title em {
    font-style: italic;
}

.ft-cart-empty__lede {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-neutral-700);
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.55;
}

.ft-cart-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    min-height: 48px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.ft-cart-empty__cta:hover,
.ft-cart-empty__cta:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-1px);
    outline: none;
}

.s027__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 1040px;
}

.s027__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

.s027__eyebrow {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 8px;
}

.s027__title {
    grid-column: 1;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.s027__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary-light);
}

.s027__count {
    grid-column: 2;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    text-align: right;
    margin: 0;
}

.s027__rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-secondary) 0%,
        var(--color-secondary) 60%,
        transparent 100%);
    opacity: 0.9;
}

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

.s027__item {
    display: grid;
    grid-template-columns: 112px 1fr auto auto;
    grid-template-areas:
        "cover details controls money";
    gap: 28px;
    align-items: start;
    padding: 32px 24px;
    border-bottom: 1px solid var(--color-neutral-200);
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s027__item:last-child {
    border-bottom: none;
}

/* Rent lines get a soft ivory tint so rent vs buy is unmistakable */
.s027__item--rent {
    background-color: color-mix(in srgb, var(--color-gilt-start) 5%, var(--color-white));
}

.s027__item--rent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    opacity: 0.6;
}

.s027__item--buy {
    background-color: var(--color-white);
}

.s027__item--flagged {
    background-color: color-mix(in srgb, var(--color-warning) 6%, var(--color-white));
}

.s027__item--flagged::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-warning) 0%, transparent 70%);
    opacity: 0.8;
}

.s027__cover {
    grid-area: cover;
    display: block;
    width: 88px;
    height: 124px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out);
    background-color: var(--color-neutral-100);
}

.s027__cover:hover {
    transform: translateY(-2px) rotate(-0.5deg);
    box-shadow: var(--shadow-lg);
}

.s027__cover .s015__cover-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.s027__details {
    grid-area: details;
    min-width: 0;
}

.s027__details-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.s027__series {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s027__mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1;
    border: 1px solid transparent;
}

.s027__mode-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.s027__mode-label {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.s027__mode-sub {
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.72;
}

.s027__mode--rent {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent-dark);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.s027__mode--rent .s027__mode-dot {
    background-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.s027__mode--buy {
    background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
    color: var(--color-secondary);
    border-color: color-mix(in srgb, var(--color-secondary) 22%, transparent);
}

.s027__mode--buy .s027__mode-dot {
    background-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 14%, transparent);
}

.s027__book-title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-secondary);
    line-height: 1.2;
    margin: 0 0 4px 0;
    max-width: 48ch;
}

.s027__book-title a {
    color: inherit;
}

.s027__book-title a:hover {
    color: var(--color-primary-dark);
}

.s027__author {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0 0 14px 0;
}

.s027__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin: 0;
}

.s027__meta-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s027__meta-row dt {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s027__meta-row dd {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.s027__meta-row--return dd {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.s027__meta-icon {
    color: var(--color-accent);
}

.s027__flag {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-secondary);
    line-height: 1.5;
}

.s027__flag svg {
    flex-shrink: 0;
    color: var(--color-warning);
    margin-top: 2px;
}

.s027__flag a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.s027__controls {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s027__qty-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 6px;
    text-align: center;
}

.s027__qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    overflow: hidden;
}

.s027__qty-btn {
    width: 36px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-secondary);
    background-color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s027__qty-btn:hover {
    background-color: var(--color-neutral-100);
}

.s027__qty-input {
    width: 44px;
    height: 44px;
    border: none;
    border-left: 1px solid var(--color-neutral-200);
    border-right: 1px solid var(--color-neutral-200);
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    text-align: center;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.s027__qty-input::-webkit-outer-spin-button,
.s027__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.s027__money {
    grid-area: money;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 140px;
}

.s027__unit {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
}

.s027__unit-label {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.s027__unit-value {
    font-weight: 500;
    color: var(--color-neutral-600);
}

.s027__line-total {
    display: flex;
    align-items: baseline;
    margin: 2px 0 6px 0;
    font-family: var(--font-body);
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.s027__line-total-cur {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 2px;
}

.s027__line-total-num {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-secondary);
    line-height: 1;
}

.s027__remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.s027__remove:hover {
    color: var(--color-error);
}

.s027__remove svg {
    opacity: 0.7;
}

.s027__foot {
    display: flex;
    justify-content: flex-start;
    padding: 32px 24px 0;
}

.s027__continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s027__continue:hover {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

/* Tablet */
@media (max-width: 860px) {
    .s027__item {
        grid-template-columns: 96px 1fr;
        grid-template-areas:
            "cover details"
            "controls money";
        gap: 20px;
        padding: 24px 16px;
    }

    .s027__controls {
        grid-area: controls;
        align-items: flex-start;
        justify-self: start;
    }

    .s027__qty-label {
        text-align: left;
    }

    .s027__money {
        grid-area: money;
        justify-self: end;
    }

    .s027__cover {
        width: 80px;
        height: 112px;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .s027__head {
        grid-template-columns: 1fr;
    }

    .s027__count {
        grid-column: 1;
        text-align: left;
    }

    .s027__title {
        font-size: 1.875rem;
    }

    .s027__item {
        grid-template-columns: 72px 1fr;
        gap: 16px;
        padding: 20px 12px;
    }

    .s027__cover {
        width: 72px;
        height: 100px;
    }

    .s027__book-title {
        font-size: 1.125rem;
    }

    .s027__line-total-num {
        font-size: 1.5rem;
    }

    .s027__meta {
        gap: 12px 20px;
    }
}


/* ==========================================================================
   S-028: Cart Summary + Checkout CTA
   The Hero Total. Order Total is the visually dominant figure on the page -
   a display-scale italic Cormorant numeral with a gilt hairline above.
   Primary CTA is a navy slab with a gilt seal; express-checkout buttons sit
   below as sub-branded neutrals so they never compete with the primary path.
   ========================================================================== */
.s028 {
    background-color: var(--color-neutral-50);
    padding: var(--space-section-sm) 0;
}

.s028__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 520px;
}

.s028__card {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.s028__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 100%);
    opacity: 0.9;
}

.s028__head {
    margin-bottom: 20px;
}

.s028__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
}

.s028__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.s028__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary-light);
}

.s028__lines {
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s028__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}

.s028__line dt {
    color: var(--color-neutral-700);
    font-weight: 500;
}

.s028__line dd {
    color: var(--color-secondary);
    font-weight: 600;
    margin: 0;
}

.s028__line--muted dt,
.s028__line--muted dd {
    color: var(--color-neutral-500);
    font-weight: 400;
}

.s028__coupon {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s028__coupon-input {
    flex: 1;
    min-height: 44px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s028__coupon-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.s028__coupon-input::placeholder {
    color: var(--color-neutral-400);
}

.s028__coupon-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s028__coupon-btn:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.s028__total-block {
    margin-bottom: 24px;
    position: relative;
}

.s028__total-rule {
    display: block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    margin-bottom: 14px;
}

.s028__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.s028__total-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0;
    padding-bottom: 6px;
}

.s028__total-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary);
}

.s028__total-cur {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    letter-spacing: -0.01em;
}

.s028__total-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(3rem, 6vw, 3.75rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--color-secondary);
}

.s028__total-note {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 8px 0 0 0;
    text-align: right;
}

.s028__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 18px 24px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}

.s028__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-white) 8%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
}

.s028__cta:hover {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.s028__cta:active {
    transform: translateY(0);
}

.s028__cta-label {
    position: relative;
    z-index: 1;
}

.s028__cta-icon {
    position: relative;
    z-index: 1;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s028__cta:hover .s028__cta-icon {
    transform: translateX(3px);
}

.s028__cta-seal {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 10px;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 30%,
        var(--color-gilt-end) 70%,
        transparent 100%);
    opacity: 0.75;
}

.s028__trust {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 16px 0 24px 0;
    padding: 0;
    list-style: none;
}

.s028__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    letter-spacing: 0.01em;
}

.s028__trust-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.s028__express {
    margin-top: 8px;
}

.s028__express-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-neutral-500);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-variant: small-caps;
}

.s028__express-label::before,
.s028__express-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-neutral-200);
}

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

.s028__express-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-200);
    background-color: var(--color-white);
    cursor: pointer;
    color: var(--color-secondary);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s028__express-btn:hover {
    border-color: var(--color-neutral-400);
    background-color: var(--color-neutral-50);
    transform: translateY(-1px);
}

.s028__express-btn--apple {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-900);
    color: var(--color-white);
}

.s028__express-btn--apple:hover {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-800);
}

.s028__express-btn--google {
    background-color: var(--color-white);
    color: var(--color-neutral-800);
}

.s028__express-btn--woo {
    background-color: color-mix(in srgb, #7F54B3 12%, var(--color-white));
    color: #5A3A8A;
    border-color: color-mix(in srgb, #7F54B3 30%, transparent);
}

.s028__express-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.s028__late-fee {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-white));
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-neutral-700);
}

.s028__late-fee svg {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.s028__late-fee a {
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Mobile */
@media (max-width: 520px) {
    .s028__card {
        padding: 24px 20px;
    }

    .s028__title {
        font-size: 1.5rem;
    }

    .s028__total-num {
        font-size: 2.75rem;
    }

    .s028__cta {
        font-size: 1rem;
        min-height: 56px;
    }

    .s028__express-row {
        grid-template-columns: 1fr;
    }

    .s028__trust {
        gap: 14px;
    }
}


/* ==========================================================================
   S-029: Cart Reassurance Block
   The Footnote. Quiet four-up reassurance band + aggregate review pull.
   Intentionally sub-ordinate to the S-028 CTA - no buttons, no hero claims.
   Thin navy rule divider, DM Sans micro-caps labels, a single italic
   Cormorant pull-quote for the rating card.
   ========================================================================== */
.s029 {
    background-color: var(--color-white);
    padding: var(--space-section-sm) 0 var(--space-section);
}

.s029__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 1040px;
}

.s029__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 32px;
}

.s029__rule {
    display: block;
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.8;
}

.s029__title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.015em;
    color: var(--color-secondary-light);
    margin: 0;
}

.s029__body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}

.s029__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s029__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.s029__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-secondary) 5%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
    color: var(--color-secondary);
}

.s029__item-text {
    flex: 1;
    min-width: 0;
}

.s029__item-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 4px 0;
}

.s029__item-body {
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-neutral-700);
    margin: 0;
}

.s029__item-body a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s029__item-body a:hover {
    border-bottom-color: var(--color-primary-dark);
}

.s029__reviews {
    padding: 24px 22px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    position: relative;
}

.s029__reviews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.7;
}

.s029__reviews-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-star);
    margin-bottom: 10px;
}

.s029__reviews-quote {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-secondary);
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.s029__reviews-quote em {
    font-style: italic;
}

.s029__reviews-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-600);
    margin: 0 0 12px 0;
    font-variant-numeric: tabular-nums;
}

.s029__reviews-meta strong {
    font-weight: 700;
    color: var(--color-secondary);
}

.s029__reviews-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    min-height: 44px;
    padding: 10px 0;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s029__reviews-link:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

/* Tablet */
@media (max-width: 860px) {
    .s029__body {
        grid-template-columns: 1fr;
        gap: 36px;
    }

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

    .s029__reviews {
        max-width: 420px;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .s029__list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .s029__head {
        gap: 14px;
        margin-bottom: 24px;
    }

    .s029__title {
        font-size: 1rem;
    }
}


/* ==========================================================================
   S-030: Checkout Progress Indicator
   Registrar ledger stepper: numbered ordinal chips on a navy hairline,
   active step carries gilt underline + italic Cormorant label, completed
   steps show a check glyph. Quiet "Return to cart" link trails right.
   ========================================================================== */

.s030 {
    padding: clamp(20px, 2.5vw, 28px) 0 clamp(12px, 1.5vw, 20px);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s030__inner {
    width: var(--space-container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.s030__track {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
    min-width: 0;
}

.s030__step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-family: var(--font-body);
    min-height: 44px;
    flex-shrink: 0;
}

.s030__step:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: clamp(24px, 4vw, 56px);
    height: 1px;
    margin: 0 clamp(12px, 2vw, 20px);
    background-color: var(--color-neutral-300);
}

.s030__step--done:not(:last-child)::after {
    background-color: var(--color-secondary);
}

.s030__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-300);
    color: var(--color-neutral-500);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s030__marker-num {
    line-height: 1;
}

.s030__step--done .s030__marker {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s030__step--active .s030__marker {
    background-color: var(--color-white);
    border-color: var(--color-gilt-end);
    color: var(--color-secondary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-gilt-start) 18%, transparent);
}

.s030__label {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-neutral-500);
    letter-spacing: 0.01em;
    transition: color var(--duration-fast) var(--ease-out);
}

.s030__step--done .s030__label {
    color: var(--color-secondary);
}

.s030__step--active .s030__label {
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
}

.s030__rule {
    position: absolute;
    left: 38px;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    border-radius: 1px;
}

.s030__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 4px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-neutral-600);
    letter-spacing: 0;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s030__back:hover {
    color: var(--color-secondary);
    gap: 10px;
}

@media (max-width: 640px) {
    .s030__inner {
        gap: 14px;
    }

    .s030__track {
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

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

    .s030__step--active .s030__label {
        font-size: 1rem;
    }

    .s030__step:not(:last-child)::after {
        width: 20px;
        margin: 0 10px;
    }

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


/* ==========================================================================
   S-031: Customer Information Form
   Matriculation form: oversized DM Sans inputs on neutral-50 fieldset,
   gilt underline focus state, Cormorant italic eyebrow-paired title.
   Account toggle frames requirement as a benefit, not a gate.
   ========================================================================== */

.s031 {
    padding: clamp(32px, 4vw, 48px) 0 clamp(16px, 2vw, 24px);
    background-color: var(--color-white);
}

.s031__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 760px;
}

.s031__head {
    margin-bottom: clamp(20px, 2.5vw, 28px);
}

.s031__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
    font-variant-numeric: tabular-nums;
}

.s031__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.s031__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 6px;
}

.s031__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
}

.s031__login {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: color var(--duration-fast) var(--ease-out),
                text-decoration-color var(--duration-fast) var(--ease-out);
}

.s031__login:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
}

.s031__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.s031__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.s031__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s031__field--password {
    margin-top: 16px;
}

.s031__label {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.s031__required {
    color: var(--color-gilt-end);
    font-weight: 700;
}

.s031__optional {
    font-weight: 400;
    color: var(--color-neutral-500);
    font-size: 0.8125rem;
    margin-left: 4px;
}

.s031__input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-secondary);
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-300);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.s031__input::placeholder {
    color: var(--color-neutral-400);
    font-weight: 400;
}

.s031__input:hover {
    border-color: var(--color-neutral-300);
    background-color: var(--color-white);
}

.s031__input:focus {
    outline: none;
    background-color: var(--color-white);
    border-color: var(--color-primary);
    border-bottom-color: var(--color-gilt-end);
    border-bottom-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.s031__input[aria-invalid="true"] {
    border-color: var(--color-error);
    background-color: color-mix(in srgb, var(--color-error) 4%, var(--color-white));
}

.s031__help {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.5;
}

.s031__error {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-error);
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 4px;
}

.s031__account {
    margin-top: clamp(20px, 2.5vw, 28px);
    padding: 18px 20px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-left: 3px solid var(--color-gilt-end);
    border-radius: var(--radius-md);
}

.s031__toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    min-height: 44px;
    padding: 2px 0;
}

.s031__toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s031__toggle-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    border-radius: var(--radius-sm);
    color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s031__toggle-input:checked + .s031__toggle-box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s031__toggle-input:focus-visible + .s031__toggle-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s031__toggle-input:disabled + .s031__toggle-box {
    opacity: 0.9;
    cursor: not-allowed;
}

.s031__toggle-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s031__toggle-title {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.4;
}

.s031__toggle-sub {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    line-height: 1.55;
}

@media (max-width: 560px) {
    .s031__row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .s031__title {
        font-size: 1.5rem;
    }
}


/* ==========================================================================
   S-032: Shipping Address Form
   Dispatch slip: two-column address grid on desktop, stacked on mobile.
   Google Places autocomplete input gets a leading map-pin glyph. State
   select and zip sit on a tight tri-column under city.
   ========================================================================== */

.s032 {
    padding: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
    background-color: var(--color-white);
}

.s032__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 760px;
}

.s032__head {
    margin-bottom: clamp(18px, 2.5vw, 24px);
}

.s032__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
    font-variant-numeric: tabular-nums;
}

.s032__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.s032__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 6px;
}

.s032__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
}

.s032__form {
    margin-top: 4px;
}

.s032__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 16px;
}

.s032__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s032__field--half {
    grid-column: span 6;
}

.s032__field--full {
    grid-column: 1 / -1;
}

.s032__field--city {
    grid-column: span 6;
}

.s032__field--state {
    grid-column: span 3;
}

.s032__field--zip {
    grid-column: span 3;
}

.s032__label {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.s032__required {
    color: var(--color-gilt-end);
    font-weight: 700;
}

.s032__optional {
    font-weight: 400;
    color: var(--color-neutral-500);
    font-size: 0.8125rem;
    margin-left: 4px;
}

.s032__input,
.s032__select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-secondary);
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-300);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.s032__select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-600) 50%), linear-gradient(135deg, var(--color-neutral-600) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 14px) 52%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

.s032__input::placeholder {
    color: var(--color-neutral-400);
    font-weight: 400;
}

.s032__input:hover,
.s032__select:hover {
    border-color: var(--color-neutral-300);
    background-color: var(--color-white);
}

.s032__input:focus,
.s032__select:focus {
    outline: none;
    background-color: var(--color-white);
    border-color: var(--color-primary);
    border-bottom-color: var(--color-gilt-end);
    border-bottom-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.s032__autocomplete {
    position: relative;
    display: flex;
    align-items: center;
}

.s032__autocomplete-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gilt-end);
    pointer-events: none;
}

.s032__input--autocomplete {
    padding-left: 40px;
}

.s032__help {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 0;
    line-height: 1.5;
}

.s032__error {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-error);
    margin: 0;
    line-height: 1.5;
}

.s032__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-height: 44px;
    padding: 10px 0 2px;
}

.s032__toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s032__toggle-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    border-radius: var(--radius-sm);
    color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s032__toggle-input:checked + .s032__toggle-box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s032__toggle-input:focus-visible + .s032__toggle-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s032__toggle-label {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-secondary);
}

.s032__country-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0 0;
    padding: 10px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-700);
}

.s032__country-note svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .s032__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .s032__field--half,
    .s032__field--city,
    .s032__field--state,
    .s032__field--zip {
        grid-column: 1 / -1;
    }

    .s032__title {
        font-size: 1.5rem;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .s032__field--city {
        grid-column: span 12;
    }

    .s032__field--state {
        grid-column: span 6;
    }

    .s032__field--zip {
        grid-column: span 6;
    }
}


/* ==========================================================================
   S-033: Shipping Method Selection
   Courier manifest: full-width radio cards with icon, carrier + method,
   italic Cormorant ETA, tabular-right price. Selected card lifts with
   gilt left rule + navy fill. Free-return-rental note sits under the list.
   ========================================================================== */

.s033 {
    padding: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
    background-color: var(--color-white);
}

.s033__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 760px;
}

.s033__head {
    margin-bottom: clamp(16px, 2.5vw, 22px);
}

.s033__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
    font-variant-numeric: tabular-nums;
}

.s033__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.s033__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 6px;
}

.s033__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
}

.s033__group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s033__option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 16px 22px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    min-height: 64px;
    overflow: hidden;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s033__option:hover {
    border-color: var(--color-neutral-400);
    background-color: var(--color-neutral-50);
}

.s033__option--selected {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 3%, var(--color-white));
    box-shadow: 0 2px 8px rgba(4, 30, 66, 0.08);
}

.s033__option-rule {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s033__option--selected .s033__option-rule {
    opacity: 1;
}

.s033__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s033__radio:focus-visible ~ .s033__option-marker {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s033__option-marker {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s033__option--selected .s033__option-marker {
    border-color: var(--color-secondary);
}

.s033__option-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s033__option--selected .s033__option-dot {
    transform: scale(1);
}

.s033__option-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s033__option-head {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.s033__option-carrier {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s033__option-name {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0;
}

.s033__option-eta {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
}

.s033__option-eta em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary);
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
}

.s033__option-note,
.s033__option-threshold {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    line-height: 1.45;
    margin-top: 2px;
}

.s033__option-threshold {
    color: var(--color-accent-dark);
    font-weight: 500;
}

.s033__option-price {
    font-family: var(--font-body);
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.s033__option-price-cur {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 1px;
}

.s033__option-price-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s033__option-price-was {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-400);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.s033__option-price-now {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-accent-dark);
    letter-spacing: -0.01em;
}

.s033__return {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-white));
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.s033__return svg {
    color: var(--color-accent-dark);
    flex-shrink: 0;
    margin-top: 2px;
}

.s033__return em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent-dark);
    font-size: 1rem;
    margin-right: 4px;
    letter-spacing: -0.005em;
}

@media (max-width: 560px) {
    .s033__option {
        padding: 14px 16px 14px 18px;
        gap: 12px;
    }

    .s033__option-price-num,
    .s033__option-price-now {
        font-size: 1.25rem;
    }

    .s033__title {
        font-size: 1.5rem;
    }
}


/* ==========================================================================
   S-034: Payment Method Block
   The Vault. Navy-bordered card with gilt hairline + corner lock glyph.
   Saved-card row with tabular Visa brand mark, last-four in tabular nums.
   Stripe Elements placeholder row mimics the real iframe look. Rental
   save-card explanation framed as transparency, not legalese.
   ========================================================================== */

.s034 {
    padding: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
    background-color: var(--color-white);
}

.s034__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 760px;
}

.s034__head {
    margin-bottom: clamp(18px, 2.5vw, 24px);
}

.s034__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
}

.s034__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.s034__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 6px;
}

.s034__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
}

.s034__panel {
    position: relative;
    padding: clamp(20px, 2.5vw, 28px);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(4, 30, 66, 0.06);
    overflow: hidden;
}

.s034__panel-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 60%,
        var(--color-gilt-start) 100%);
    opacity: 0.9;
}

.s034__panel-lock {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-neutral-50);
    color: var(--color-secondary);
}

.s034__saved {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.s034__expiry-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background-color: #FFF7E6;
    border-left: 3px solid #B45309;
    border-radius: var(--radius-sm);
    color: #7C4A0E;
}

.s034__expiry-warning svg {
    flex-shrink: 0;
    color: #B45309;
    margin-top: 1px;
}

.s034__expiry-warning-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s034__expiry-warning-title {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #7C4A0E;
    margin: 0;
}

.s034__expiry-warning-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #7C4A0E;
    margin: 0;
}

.s034__saved-option {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 56px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s034__saved-option:hover {
    border-color: var(--color-neutral-400);
}

.s034__saved-option--selected {
    background-color: var(--color-white);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

.s034__saved-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s034__saved-marker {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.s034__saved-option--selected .s034__saved-marker {
    border-color: var(--color-secondary);
}

.s034__saved-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s034__saved-option--selected .s034__saved-dot {
    transform: scale(1);
}

.s034__saved-brand {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
}

.s034__saved-brand-mark {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #1A1F71;
    font-style: italic;
}

.s034__saved-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s034__saved-name {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.s034__saved-dots {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-neutral-500);
    letter-spacing: 0.02em;
}

.s034__saved-last4 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: 0.04em;
}

.s034__saved-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    font-variant-numeric: tabular-nums;
}

.s034__saved-check {
    color: var(--color-accent-dark);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s034__saved-option--selected .s034__saved-check {
    opacity: 1;
}

.s034__saved-new {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
}

.s034__saved-new svg {
    color: var(--color-gilt-end);
}

.s034__stripe {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.s034__stripe-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.s034__stripe-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s034__stripe-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s034__stripe-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 14px;
    background-color: var(--color-neutral-50);
    border: 1.5px solid var(--color-neutral-200);
    border-bottom: 2px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s034__stripe-input:hover {
    background-color: var(--color-white);
    border-color: var(--color-neutral-300);
}

.s034__stripe-placeholder {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-neutral-400);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.s034__stripe-brands {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.s034__stripe-brand {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-neutral-500);
    padding: 3px 6px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 3px;
    background-color: var(--color-white);
}

.s034__save-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-left: 3px solid var(--color-gilt-end);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 56px;
    margin-bottom: 16px;
}

.s034__save-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s034__save-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    border-radius: var(--radius-sm);
    color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s034__save-input:checked + .s034__save-box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s034__save-input:focus-visible + .s034__save-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s034__save-input:disabled + .s034__save-box {
    opacity: 0.9;
}

.s034__save-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s034__save-title {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-secondary);
}

.s034__save-reason {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-600);
    line-height: 1.5;
}

.s034__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--color-neutral-200);
    list-style: none;
}

.s034__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    letter-spacing: 0.01em;
}

.s034__trust-item svg {
    color: var(--color-accent-dark);
    flex-shrink: 0;
}

.s034__trust-mark {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    color: #635BFF;
    background-color: color-mix(in srgb, #635BFF 8%, var(--color-white));
    border: 1px solid color-mix(in srgb, #635BFF 22%, transparent);
    border-radius: 3px;
    text-transform: lowercase;
}

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

    .s034__saved-option {
        grid-template-columns: auto 1fr auto;
    }

    .s034__saved-brand {
        grid-column: 2 / 3;
        grid-row: 1;
        justify-self: start;
    }

    .s034__saved-body {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-left: 34px;
    }

    .s034__saved-check {
        grid-column: 3;
        grid-row: 1;
    }

    .s034__title {
        font-size: 1.5rem;
    }
}


/* ==========================================================================
   S-035: Consent Block (Rentals)
   Sworn statement. Attorney-pending copy pinned to a warning-amber striped
   review banner (S-022 mirror). Each consent = large 22px check on white
   card, small-caps eyebrow, Cormorant italic subject, verbatim ACF body.
   Place Order CTA in navy slab + gilt seal, disabled until all checks on.
   ========================================================================== */

.s035 {
    padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px);
    background-color: var(--color-white);
}

.s035__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 760px;
}

.s035__review-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-warning) 14%, transparent) 0 8px,
        color-mix(in srgb, var(--color-warning) 8%, transparent) 8px 16px
    );
    border: 2px solid var(--color-warning);
    border-radius: var(--radius-md);
}

.s035__review-pill {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--color-warning);
    color: var(--color-neutral-900);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.s035__review-copy {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-800);
    line-height: 1.55;
}

.s035__head {
    margin-bottom: clamp(18px, 2.5vw, 24px);
}

.s035__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
}

.s035__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.s035__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 6px;
}

.s035__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0;
}

.s035__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s035__consent {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s035__consent:hover {
    border-color: var(--color-neutral-400);
    background-color: var(--color-neutral-50);
}

.s035__consent:has(.s035__consent-input:checked) {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 3%, var(--color-white));
    box-shadow: 0 2px 8px rgba(4, 30, 66, 0.06);
}

.s035__consent--terms {
    background-color: var(--color-neutral-50);
}

.s035__consent-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.s035__consent-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    border-radius: var(--radius-sm);
    color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s035__consent-input:checked + .s035__consent-box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s035__consent-input:focus-visible + .s035__consent-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s035__consent--info {
    cursor: default;
    background-color: var(--color-neutral-50);
}

.s035__consent--info:hover {
    background-color: var(--color-neutral-50);
    border-color: var(--color-neutral-200);
}

.s035__consent-box--info {
    background-color: color-mix(in srgb, var(--color-gilt-end) 12%, var(--color-white));
    border-color: var(--color-gilt-end);
    color: var(--color-gilt-end);
}

.s035__consent-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s035__consent-key {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s035__consent-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.s035__consent-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 4px;
}

.s035__consent-copy {
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-700);
    line-height: 1.6;
    margin: 0;
}

.s035__consent-meta {
    margin-top: 2px;
}

.s035__consent-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: color var(--duration-fast) var(--ease-out),
                text-decoration-color var(--duration-fast) var(--ease-out);
}

.s035__consent-link:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary-dark);
}

.s035__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    margin-top: 12px;
    padding: 18px 24px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}

.s035__cta:hover:not(:disabled) {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.s035__cta:active:not(:disabled) {
    transform: translateY(0);
}

.s035__cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.s035__cta-label {
    position: relative;
    z-index: 1;
}

.s035__cta-icon {
    position: relative;
    z-index: 1;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s035__cta:hover:not(:disabled) .s035__cta-icon {
    transform: translateX(3px);
}

.s035__cta-seal {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 10px;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 30%,
        var(--color-gilt-end) 70%,
        transparent 100%);
    opacity: 0.75;
}

.s035__cta-help {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 8px 0 0 0;
    text-align: center;
}

@media (max-width: 560px) {
    .s035__consent {
        padding: 16px;
        gap: 12px;
    }

    .s035__consent-title {
        font-size: 1.125rem;
    }

    .s035__consent-copy {
        font-size: 0.9375rem;
    }

    .s035__title {
        font-size: 1.5rem;
    }

    .s035__cta {
        font-size: 1rem;
        min-height: 56px;
    }
}


/* ==========================================================================
   S-036: Order Summary Sidebar
   Ledger column. Direct descendant of S-028 treatment: gilt hairline at
   top of white card, DM Sans tabular line rows, italic Cormorant total
   figure as visual anchor. Sticky on desktop; mobile collapses via
   button toggle. Compact book thumbnails with rent/buy mode badge.
   ========================================================================== */

.s036 {
    padding: clamp(24px, 3vw, 40px) 0;
    background-color: var(--color-white);
}

.s036__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 420px;
}

.s036__card {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.s036__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 100%);
    opacity: 0.9;
    z-index: 1;
}

.s036__toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    background-color: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--color-neutral-200);
    cursor: pointer;
    font-family: var(--font-body);
    min-height: 56px;
    text-align: left;
}

.s036__toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s036__toggle-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s036__toggle-sum {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.s036__toggle-icon {
    color: var(--color-neutral-600);
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s036__toggle[aria-expanded="false"] .s036__toggle-icon {
    transform: rotate(-90deg);
}

.s036__body {
    padding: clamp(22px, 3vw, 30px) clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 28px);
}

.s036__head {
    margin-bottom: 18px;
}

.s036__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 4px 0;
}

.s036__title {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.s036__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 4px;
}

.s036__items {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0 0 4px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s036__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

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

.s036__item-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 72px;
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.s036__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s036__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

.s036__item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s036__item-mode {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.s036__item-mode--rent {
    color: var(--color-accent-dark);
    background-color: var(--color-accent-lightest);
}

.s036__item-mode--buy {
    color: var(--color-primary-dark);
    background-color: var(--color-primary-lightest);
}

.s036__item-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.s036__item-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    line-height: 1.4;
}

.s036__item-dot {
    margin: 0 4px;
    color: var(--color-neutral-400);
}

.s036__item-price {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 2px;
}

.s036__return-date {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-white));
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
}

.s036__return-date svg {
    color: var(--color-accent-dark);
    flex-shrink: 0;
    margin-top: 2px;
}

.s036__return-date em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent-dark);
    font-size: 0.9375rem;
    display: inline;
    margin-right: 4px;
}

.s036__return-date-sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: 2px;
}

.s036__lines {
    margin: 0 0 16px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s036__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}

.s036__line dt {
    color: var(--color-neutral-700);
    font-weight: 500;
}

.s036__line dd {
    color: var(--color-secondary);
    font-weight: 600;
    margin: 0;
}

.s036__line--muted dt,
.s036__line--muted dd {
    color: var(--color-neutral-500);
    font-weight: 400;
}

.s036__total-block {
    margin: 0 0 16px 0;
    padding-top: 4px;
}

.s036__total-rule {
    display: block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    margin-bottom: 12px;
}

.s036__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.s036__total-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0;
    padding-bottom: 6px;
}

.s036__total-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary);
}

.s036__total-cur {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    letter-spacing: -0.01em;
}

.s036__total-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2.5rem, 5vw, 3rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--color-secondary);
}

.s036__total-note {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin: 8px 0 0 0;
    text-align: right;
}

.s036__trust {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 14px 0 0 0;
    padding: 12px 0 0 0;
    border-top: 1px solid var(--color-neutral-200);
    list-style: none;
}

.s036__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-neutral-600);
    letter-spacing: 0.01em;
}

.s036__trust-item svg {
    color: var(--color-accent-dark);
    flex-shrink: 0;
}

@media (min-width: 961px) {
    .s036__card {
        position: sticky;
        top: 24px;
    }
}

@media (max-width: 960px) {
    .s036__inner {
        max-width: 560px;
    }

    .s036__toggle {
        display: flex;
    }

    .s036__body {
        display: none;
    }

    .s036__card[data-expanded="true"] .s036__body,
    .s036__card:not([data-expanded]) .s036__body {
        display: block;
    }
}

@media (max-width: 520px) {
    .s036__body {
        padding: 20px 18px 22px;
    }

    .s036__total-num {
        font-size: 2.25rem;
    }

    .s036__item-title {
        font-size: 0.9375rem;
    }
}


/* ==========================================================================
   S-037: Order Confirmation Hero
   The Quiet Receipt. Completion surface, not a handoff. Big Cormorant
   italic gratitude line on calm off-white, gilt hairline beneath, order
   number as its own copyable ledger chip, compact fact strip, and a
   prominent italic rental-return date block on accent wash.
   ========================================================================== */
.s037 {
    padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
    background-color: var(--color-neutral-50);
    background-image:
        radial-gradient(ellipse at top right,
            color-mix(in srgb, var(--color-gilt-start) 6%, transparent) 0%,
            transparent 55%);
}

.s037__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 860px;
}

.s037__panel {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 44px) clamp(28px, 4vw, 40px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.s037__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 100%);
    opacity: 0.9;
}

.s037__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin: 0 0 20px 0;
}

.s037__eyebrow-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-white));
    color: var(--color-accent-dark);
    flex-shrink: 0;
}

.s037__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    margin: 0 0 22px 0;
}

.s037__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondary-light);
    background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--color-gilt-start) 22%, transparent) 62%, color-mix(in srgb, var(--color-gilt-start) 22%, transparent) 92%, transparent 92%);
    padding: 0 4px;
}

.s037__title-sub {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    color: var(--color-neutral-700);
    letter-spacing: -0.005em;
    margin-top: 6px;
}

.s037__rule {
    display: block;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    margin: 0 0 26px 0;
    opacity: 0.8;
}

.s037__order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin: 0 0 28px 0;
}

.s037__order-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.s037__order-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s037__order-id {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.s037__order-id-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    user-select: all;
}

.s037__order-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-700);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s037__order-copy:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.s037__order-copy-icon {
    flex-shrink: 0;
}

.s037__order-copy-done {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent-dark);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
    pointer-events: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.s037__order-copy[data-copied="true"] .s037__order-copy-done {
    opacity: 1;
    transform: translateY(0);
}

.s037__email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.s037__email svg {
    color: var(--color-neutral-500);
    flex-shrink: 0;
}

.s037__email strong {
    color: var(--color-secondary);
    font-weight: 600;
    word-break: break-all;
}

.s037__facts {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 32px;
    align-items: baseline;
    margin: 0 0 26px 0;
    padding: 16px 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s037__fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.s037__fact dt {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s037__fact dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}

.s037__fact-total {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.625rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-secondary);
}

.s037__fact-cur {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-neutral-600);
    letter-spacing: -0.01em;
}

.s037__return {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-white));
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.s037__return-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    border-radius: 50%;
    color: var(--color-accent-dark);
}

.s037__return-body {
    flex: 1;
    min-width: 0;
}

.s037__return-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin: 0 0 2px 0;
}

.s037__return-date {
    margin: 0 0 4px 0;
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.4vw, 1.625rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-secondary);
    letter-spacing: -0.015em;
}

.s037__return-date em {
    font-style: italic;
}

.s037__return-sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.s037__next {
    margin: 24px 0 0 0;
}

.s037__next-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 2px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    letter-spacing: 0;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 6px;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s037__next-link:hover {
    color: var(--color-secondary);
    gap: 12px;
}

.s037__next-link em {
    font-style: italic;
}

.s037__next-arrow {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .s037__facts {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .s037__order-row {
        gap: 14px;
    }

    .s037__order-copy {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 480px) {
    .s037__panel {
        padding: 26px 20px 24px;
    }

    .s037__order-id-text {
        font-size: 1rem;
    }
}


/* ==========================================================================
   S-038: Order Details Block
   The Paper Receipt. Two-column ledger: items on the left reusing the
   S-036 line-item pattern, stacked shipped-to + shipping + payment
   blocks on the right. Full-width totals dl beneath both columns with
   a gilt rule above the Order Total row. Quiet "View full order
   details" link trails at the foot.
   ========================================================================== */
.s038 {
    background-color: var(--color-white);
    padding: clamp(40px, 5vw, 64px) 0;
}

.s038__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 960px;
}

.s038__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.s038__rule {
    display: block;
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.8;
}

.s038__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s038__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.15;
}

.s038__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-neutral-600);
    margin-right: 4px;
}

.s038__grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s038__col-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 14px 0;
}

.s038__items {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s038__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

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

.s038__item-thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 72px;
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.s038__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s038__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

.s038__item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s038__item-mode {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.s038__item-mode--rent {
    color: var(--color-accent-dark);
    background-color: var(--color-accent-lightest);
}

.s038__item-mode--buy {
    color: var(--color-primary-dark);
    background-color: var(--color-primary-lightest);
}

.s038__item-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.s038__item-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    line-height: 1.4;
}

.s038__item-dot {
    margin: 0 4px;
    color: var(--color-neutral-400);
}

.s038__item-price {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 2px;
}

.s038__rental-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-white));
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.s038__rental-note svg {
    color: var(--color-accent-dark);
    flex-shrink: 0;
    margin-top: 3px;
}

.s038__rental-note a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s038__rental-note a:hover {
    border-bottom-color: var(--color-primary-dark);
}

.s038__meta-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 22px 24px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.s038__meta-block {
    margin: 0;
}

.s038__address {
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-neutral-700);
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.s038__address-name {
    color: var(--color-secondary);
    font-weight: 700;
    letter-spacing: 0.005em;
}

.s038__meta-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-neutral-800);
    line-height: 1.5;
}

.s038__meta-value--pay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.s038__pay-brand {
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: 0.01em;
}

.s038__pay-mask {
    color: var(--color-neutral-400);
    letter-spacing: 0.25em;
    font-size: 0.875rem;
}

.s038__pay-last4 {
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: 0.06em;
}

.s038__totals {
    margin: 28px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin-left: auto;
}

.s038__total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}

.s038__total-line dt {
    color: var(--color-neutral-700);
    font-weight: 500;
}

.s038__total-line dd {
    margin: 0;
    color: var(--color-secondary);
    font-weight: 600;
}

.s038__total-line--muted dt,
.s038__total-line--muted dd {
    color: var(--color-neutral-500);
    font-weight: 400;
}

.s038__total-line--final {
    position: relative;
    padding-top: 16px;
    margin-top: 4px;
    align-items: baseline;
}

.s038__total-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.8;
}

.s038__total-line--final dt {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.s038__total-line--final dd {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    line-height: 1;
}

.s038__total-cur {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-neutral-600);
    letter-spacing: -0.01em;
}

.s038__full-link-wrap {
    margin: 28px 0 0 0;
    text-align: right;
}

.s038__full-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 2px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s038__full-link:hover {
    color: var(--color-primary-dark);
    gap: 12px;
}

@media (max-width: 820px) {
    .s038__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .s038__totals {
        margin-left: 0;
        max-width: 100%;
    }

    .s038__full-link-wrap {
        text-align: left;
    }
}


/* ==========================================================================
   S-039: Next Steps Block
   The Footnote Band. Echoes S-029: thin gilt rule, DM Sans micro-caps
   labels, numbered timeline-style list in the order things actually
   happen. One underlined text-link CTA so it does not compete with the
   S-037 Hero; support mailto trails as a single plain line.
   ========================================================================== */
.s039 {
    background-color: var(--color-neutral-50);
    padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
}

.s039__inner {
    width: var(--space-container);
    margin: 0 auto;
    max-width: 880px;
}

.s039__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}

.s039__rule {
    display: block;
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.8;
}

.s039__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0;
}

.s039__title {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-secondary-light);
    margin: 0;
}

.s039__title em {
    font-style: italic;
    color: var(--color-secondary);
}

.s039__list {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s039__step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s039__step:last-child {
    border-bottom: none;
}

.s039__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
}

.s039__step.is-done .s039__step-num {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.s039__step.is-active .s039__step-num {
    background-color: var(--color-white);
    border-color: color-mix(in srgb, var(--color-gilt-end) 60%, transparent);
    color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gilt-start) 14%, transparent);
}

.s039__step.is-upcoming .s039__step-num {
    background-color: var(--color-neutral-50);
    border-color: var(--color-neutral-200);
    color: var(--color-neutral-500);
    box-shadow: none;
}

.s039__step-check {
    display: block;
}

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

.s039__step-body {
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

.s039__step.is-upcoming .s039__step-label {
    color: var(--color-neutral-400);
}

.s039__step.is-upcoming .s039__step-body-text {
    color: var(--color-neutral-600);
}

.s039__step-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px 0;
}

.s039__step-body-text {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-neutral-800);
    margin: 0;
}

.s039__step-body-text a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s039__step-body-text a:hover {
    border-bottom-color: var(--color-primary-dark);
}

.s039__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding-top: 20px;
    border-top: 1px solid var(--color-neutral-200);
}

.s039__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.s039__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 2px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-gilt-end);
    padding-bottom: 6px;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring),
                border-color var(--duration-fast) var(--ease-out);
}

.s039__cta:hover {
    color: var(--color-primary-dark);
    gap: 12px;
    border-bottom-color: var(--color-primary);
}

.s039__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 2px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    letter-spacing: 0;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 6px;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s039__cta-secondary:hover {
    color: var(--color-secondary);
    gap: 12px;
}

.s039__cta-secondary em {
    font-style: italic;
}

.s039__cta-secondary-arrow {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}

.s039__support {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    line-height: 1.5;
}

.s039__support a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s039__support a:hover {
    border-bottom-color: var(--color-primary-dark);
}

@media (max-width: 520px) {
    .s039__step {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 16px 0;
    }

    .s039__step-num {
        width: 36px;
        height: 36px;
        font-size: 0.9375rem;
    }

    .s039__step-check {
        width: 16px;
        height: 16px;
    }

    .s039__step-body-text {
        font-size: 1rem;
    }

    .s039__cta,
    .s039__cta-secondary {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================
   S-040 Buyback Hero - "The Ledger Counter"
   Two-column editorial hero with a quiet sample-quote slip.
   ============================================================ */

.s040 {
    padding: var(--space-section) 0;
    background-color: #FAF7F1;
    background-image:
        radial-gradient(ellipse at 88% 18%, rgba(201, 169, 97, 0.10), transparent 52%),
        radial-gradient(ellipse at 8% 82%, rgba(4, 30, 66, 0.05), transparent 48%);
}

.s040__inner {
    width: var(--space-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.s040__lede {
    position: relative;
    padding-top: 28px;
}

.s040__rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-radius: var(--radius-pill);
}

.s040__eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s040__title {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s040__title em {
    font-style: italic;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.s040__title-break {
    display: block;
}

.s040__sub {
    margin: 0 0 28px;
    max-width: 48ch;
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: 1.55;
    color: var(--color-neutral-700);
}

.s040__sub strong {
    color: var(--color-secondary);
    font-weight: 600;
}

.s040__trust {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.s040__trust-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.s040__trust-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gilt-end);
    letter-spacing: 0.04em;
}

.s040__trust-text {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-neutral-700);
}

.s040__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-bottom: 20px;
}

.s040__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 14px 26px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s040__cta-primary:hover,
.s040__cta-primary:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.s040__cta-primary:hover .s040__cta-arrow {
    transform: translateX(4px);
}

.s040__cta-arrow {
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s040__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 2px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 6px;
    transition: color var(--duration-fast) var(--ease-out);
}

.s040__cta-secondary:hover {
    color: var(--color-secondary);
}

.s040__foot {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-neutral-600);
}

.s040__foot-mark {
    color: var(--color-star);
    font-weight: 700;
    margin-right: 4px;
}

/* Slip card */
.s040__slip {
    position: relative;
    padding: 28px 28px 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(4, 30, 66, 0.04) 31px,
            rgba(4, 30, 66, 0.04) 32px
        );
}

.s040__slip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.s040__slip-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s040__slip-tag {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s040__slip-ticket {
    margin: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--color-secondary);
}

.s040__slip-body {
    display: grid;
    grid-template-columns: 96px 1fr;
    row-gap: 10px;
    column-gap: 16px;
    margin-bottom: 18px;
}

.s040__slip-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    align-self: baseline;
}

.s040__slip-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-secondary);
    align-self: baseline;
}

.s040__slip-value--mono {
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.02em;
}

.s040__slip-rule {
    height: 1px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.55;
    margin: 4px 0 18px;
}

.s040__slip-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.s040__slip-total-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s040__slip-total-value {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-secondary);
}

.s040__slip-total-dash {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--color-gilt-end);
    margin: 0 4px;
}

.s040__slip-note {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    text-align: right;
}

.s040__slip-note em {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-neutral-600);
}

@media (max-width: 880px) {
    .s040__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .s040__slip {
        max-width: 520px;
    }
}

@media (max-width: 520px) {
    .s040__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .s040__sub {
        font-size: var(--text-body);
    }

    .s040__cta-primary,
    .s040__cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .s040__slip {
        padding: 24px 20px 20px;
    }

    .s040__slip-body {
        grid-template-columns: 84px 1fr;
    }
}

/* ============================================================
   S-041 Buyback How-It-Works - "The Margin Notes"
   Horizontal 4-step ledger with gilt hairline dividers.
   ============================================================ */

.s041 {
    padding: var(--space-section) 0;
    background-color: var(--color-white);
}

.s041__inner {
    width: var(--space-container);
    margin: 0 auto;
}

.s041__head {
    position: relative;
    padding-top: 28px;
    margin-bottom: 48px;
    max-width: 680px;
}

.s041__rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-radius: var(--radius-pill);
}

.s041__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s041__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-h2);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s041__title em {
    font-style: italic;
    color: var(--color-gilt-end);
}

.s041__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s041__step {
    position: relative;
    padding: 28px 24px 28px 0;
}

.s041__step + .s041__step {
    padding-left: 24px;
}

.s041__step + .s041__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background-image: linear-gradient(180deg,
        transparent 0%,
        var(--color-gilt-start) 30%,
        var(--color-gilt-end) 70%,
        transparent 100%);
    opacity: 0.7;
}

.s041__step-num {
    display: inline-block;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--color-gilt-end);
    margin-bottom: 14px;
}

.s041__step-body {
    display: block;
}

.s041__step-label {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.s041__step-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-neutral-700);
}

.s041__reassure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
    padding: 20px 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 20px;
}

.s041__reassure-lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s041__reassure-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.s041__reassure-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--color-secondary);
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--color-primary) 40%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 40%, transparent) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 4px;
    min-height: 44px;
    align-items: center;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring),
                background-image var(--duration-fast) var(--ease-out);
}

.s041__reassure-link:hover {
    color: var(--color-primary-dark);
    gap: 12px;
    background-image: linear-gradient(90deg,
        var(--color-primary) 0%,
        var(--color-primary) 100%);
}

.s041__reassure-arrow {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0;
}

.s041__trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-700);
}

.s041__trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

@media (max-width: 880px) {
    .s041__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .s041__step:nth-child(2)::before {
        display: block;
    }

    .s041__step:nth-child(3) {
        border-top: 1px solid var(--color-neutral-200);
    }

    .s041__step:nth-child(3)::before,
    .s041__step:nth-child(4)::before {
        top: 24px;
    }

    .s041__step:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 520px) {
    .s041__steps {
        grid-template-columns: 1fr;
    }

    .s041__step {
        padding: 24px 0;
        border-top: 1px solid var(--color-neutral-200);
    }

    .s041__step:first-child {
        border-top: none;
    }

    .s041__step + .s041__step {
        padding-left: 0;
    }

    .s041__step + .s041__step::before {
        display: none;
    }

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

/* ============================================================
   S-042 Textbook Buyback Form - "The Quote Slip"
   Carbon-copy ledger aesthetic; one compact row per ISBN.
   ============================================================ */

.s042 {
    padding: var(--space-section) 0;
    background-color: #FAF7F1;
}

.s042__inner {
    width: var(--space-container);
    max-width: 960px;
    margin: 0 auto;
}

.s042__head {
    position: relative;
    padding-top: 28px;
    margin-bottom: 32px;
}

.s042__rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-radius: var(--radius-pill);
}

.s042__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s042__title {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-h2);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s042__title em {
    font-style: italic;
    color: var(--color-gilt-end);
}

.s042__intro {
    margin: 0;
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-neutral-700);
    line-height: 1.6;
}

.s042__form {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(20px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.s042__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s042__legend {
    padding: 0 0 10px;
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-secondary);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s042__hint {
    margin: -4px 0 4px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.s042__grid {
    display: grid;
    gap: 16px;
}

.s042__grid--contact {
    grid-template-columns: 1.2fr 1.4fr 1fr;
}

.s042__grid--school {
    grid-template-columns: 1.2fr 0.8fr;
}

.s042__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.s042__label {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.s042__req {
    color: var(--color-star);
    font-weight: 700;
    letter-spacing: 0;
}

.s042__opt {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-neutral-500);
}

.s042__input,
.s042__textarea,
.s042__select {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s042__input:focus,
.s042__textarea:focus,
.s042__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.s042__input--mono {
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.02em;
}

.s042__textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.s042__select-wrap {
    position: relative;
    display: block;
}

.s042__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    min-height: 44px;
    cursor: pointer;
}

.s042__select-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500);
    pointer-events: none;
}

.s042__cond-hint {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-neutral-600);
    min-height: 1em;
}

.s042__file-wrap {
    position: relative;
    display: block;
}

.s042__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.s042__file-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 72px;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-secondary);
    background-color: var(--color-neutral-50);
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s042__file:hover + .s042__file-cta,
.s042__file:focus + .s042__file-cta {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lightest);
}

/* Rows */
.s042__rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.s042__row {
    position: relative;
    padding: 20px 20px 22px;
    background-color: #FBF9F3;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background-image: linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px),
        color-mix(in srgb, var(--color-gilt-end) 35%, transparent) 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 100%;
}

.s042__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background-image: linear-gradient(180deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-top-right-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
}

.s042__row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s042__row-num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s042__row-num em {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-gilt-end);
    margin-left: 6px;
}

.s042__row-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s042__row-remove:hover,
.s042__row-remove:focus-visible {
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
    background-color: color-mix(in srgb, var(--color-error) 5%, transparent);
    outline: none;
}

.s042__row-grid {
    display: grid;
    gap: 14px 16px;
    grid-template-columns: 1.3fr 1fr;
    grid-template-areas: "isbn condition";
}

.s042__field--isbn { grid-area: isbn; }
.s042__field--condition { grid-area: condition; }

/* Add-another button */
.s042__add {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 6px;
    padding: 12px 18px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px dashed var(--color-gilt-end);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    align-self: flex-start;
}

.s042__add:hover,
.s042__add:focus-visible {
    background-color: color-mix(in srgb, var(--color-gilt-start) 8%, var(--color-white));
    border-color: var(--color-gilt-start);
    outline: none;
}

.s042__add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-image: linear-gradient(135deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0;
}

/* Radios */
.s042__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.s042__radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px 10px 14px;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s042__radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.s042__radio-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-neutral-400);
    border-radius: 50%;
    background-color: var(--color-white);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s042__radio-mark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-image: linear-gradient(135deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s042__radio input:checked ~ .s042__radio-mark {
    border-color: var(--color-gilt-end);
}

.s042__radio input:checked ~ .s042__radio-mark::after {
    transform: scale(1);
}

.s042__radio:has(input:checked) {
    border-color: var(--color-gilt-end);
    background-color: color-mix(in srgb, var(--color-gilt-start) 6%, var(--color-white));
}

.s042__radio-label {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.s042__field--payout-account {
    margin-top: 14px;
    max-width: 520px;
}

/* Foot / submit */
.s042__foot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-neutral-200);
}

.s042__consent {
    margin: 0;
    grid-column: 1 / 2;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    line-height: 1.5;
}

.s042__consent a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s042__consent a:hover {
    border-bottom-color: var(--color-primary-dark);
}

.s042__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    grid-column: 2 / 3;
    min-height: 52px;
    padding: 14px 30px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-secondary);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s042__submit:hover,
.s042__submit:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    outline: none;
    transform: translateY(-1px);
}

.s042__foot-note {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    text-align: right;
}

.s042__foot-note em {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-neutral-600);
}

@media (max-width: 880px) {
    .s042__grid--contact {
        grid-template-columns: 1fr 1fr;
    }

    .s042__grid--contact .s042__field:nth-child(3) {
        grid-column: 1 / -1;
    }

    .s042__grid--school {
        grid-template-columns: 1fr;
    }

    .s042__row-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "isbn"
            "condition";
    }

    .s042__foot {
        grid-template-columns: 1fr;
    }

    .s042__submit {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .s042__foot-note {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .s042__grid--contact {
        grid-template-columns: 1fr;
    }

    .s042__grid--contact .s042__field:nth-child(3) {
        grid-column: auto;
    }

    .s042__row {
        padding: 18px 16px 20px;
    }

    .s042__row-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "isbn"
            "condition";
    }

    .s042__submit {
        width: 100%;
    }
}

/* ============================================================
   S-043 FAQ Accordion (Reusable) - "The Commonplace Book"
   Numbered figure markers; gilt hairline dividers; plus/minus
   toggle; native <details>/<summary> for full a11y.
   ============================================================ */

.s043 {
    padding: var(--space-section) 0;
    background-color: var(--color-white);
}

.s043__inner {
    width: var(--space-container);
    max-width: 820px;
    margin: 0 auto;
}

.s043__head {
    position: relative;
    padding-top: 28px;
    margin-bottom: 32px;
    text-align: center;
}

.s043__rule {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-radius: var(--radius-pill);
}

.s043__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s043__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-h2);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s043__title em {
    font-style: italic;
    color: var(--color-gilt-end);
}

.s043__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--color-neutral-200);
}

.s043__item {
    border-bottom: 1px solid var(--color-neutral-200);
    position: relative;
}

.s043__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-gilt-end) 32%, transparent) 28%,
        color-mix(in srgb, var(--color-gilt-end) 32%, transparent) 72%,
        transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.s043__item:has(.s043__details[open])::after {
    opacity: 1;
}

.s043__details {
    position: relative;
}

.s043__summary {
    list-style: none;
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    align-items: baseline;
    gap: 16px;
    padding: 22px 4px;
    cursor: pointer;
    min-height: 52px;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s043__summary::-webkit-details-marker {
    display: none;
}

.s043__summary:hover {
    background-color: color-mix(in srgb, var(--color-gilt-start) 5%, transparent);
}

.s043__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.s043__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--color-gilt-end);
    letter-spacing: 0.02em;
    align-self: center;
}

.s043__q {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-secondary);
    align-self: center;
}

.s043__toggle {
    position: relative;
    width: 22px;
    height: 22px;
    align-self: center;
    justify-self: end;
    color: var(--color-gilt-end);
}

.s043__toggle-h,
.s043__toggle-v {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: currentColor;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    transition: transform var(--duration-normal) var(--ease-spring),
                opacity var(--duration-normal) var(--ease-out);
}

.s043__toggle-v {
    transform: translate(-50%, -50%) rotate(90deg);
}

.s043__details[open] .s043__toggle-v {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.s043__details[open] .s043__toggle {
    color: var(--color-secondary);
}

.s043__answer {
    padding: 0 4px 24px 68px;
    max-width: 62ch;
}

.s043__answer p {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-neutral-700);
    letter-spacing: 0.005em;
}

.s043__answer p a {
    color: var(--color-primary-dark);
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.s043__answer p a:hover {
    border-bottom-color: var(--color-primary-dark);
}

.s043__foot {
    margin: 28px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-neutral-600);
}

.s043__foot a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: 6px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 4px;
    transition: color var(--duration-fast) var(--ease-out),
                gap var(--duration-fast) var(--ease-spring);
}

.s043__foot a:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

.s043__foot-arrow {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary);
    margin-left: 4px;
    letter-spacing: 0;
}

@media (max-width: 520px) {
    .s043__summary {
        grid-template-columns: 36px 1fr 24px;
        gap: 12px;
        padding: 18px 2px;
    }

    .s043__num {
        font-size: 1.1875rem;
    }

    .s043__q {
        font-size: var(--text-body);
    }

    .s043__answer {
        padding: 0 2px 20px 48px;
    }

    .s043__answer p {
        font-size: 1.0625rem;
    }
}


/* ==========================================================================
   Wave 7 - My Account + Rental Management (S-044..S-050)
   Aesthetic: The Law Library Ledger. Navy ink, gilt hairlines, Cormorant
   italic voice, DM Sans tabular precision. Status chips on semantic tokens.
   ========================================================================== */

/* Shared semantic chip palette for S-044..S-050 */
.s046__chip,
.s047__chip,
.s049__chip,
.s050__chip,
.s045__card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* chip variants */
.s046__chip--ok, .s047__chip--ok, .s049__chip--ok, .s050__chip--ok {
    background-color: var(--color-accent-lightest);
    color: var(--color-accent-dark);
    border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.s046__chip--warn, .s047__chip--warn, .s049__chip--warn, .s050__chip--warn,
.s045__card-badge--warn {
    background-color: color-mix(in srgb, var(--color-warning) 12%, var(--color-white));
    color: #8A5A00;
    border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
}
.s046__chip--bad, .s047__chip--bad, .s049__chip--bad, .s050__chip--bad {
    background-color: color-mix(in srgb, var(--color-error) 10%, var(--color-white));
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}
.s046__chip--info, .s047__chip--info, .s049__chip--info, .s050__chip--info {
    background-color: var(--color-primary-lightest);
    color: var(--color-primary-dark);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.s047__chip--done, .s049__chip--done, .s050__chip--done {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-300);
}
.s047__chip--muted, .s049__chip--muted, .s050__chip--muted {
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-500);
    border-color: var(--color-neutral-200);
}


/* ==========================================================================
   S-044 Account Navigation - The Ledger Tab
   ========================================================================== */

.s044 {
    width: min(92%, 320px);
    margin: 0 auto;
    padding: 40px 0;
    font-family: var(--font-body);
}

.s044__rail {
    position: relative;
    padding: 28px 24px 24px 28px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s044__rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background-image: linear-gradient(180deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    border-radius: 2px;
}

.s044__id {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 16px;
}

.s044__id-hi {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px;
}

.s044__id-name {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--color-secondary);
    margin: 0;
}

.s044__id-sub {
    margin: 2px 0 0;
    font-size: var(--text-small);
    color: var(--color-neutral-600);
}

.s044__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s044__item {
    position: relative;
}

.s044__link {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 8px;
    color: var(--color-neutral-700);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s044__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-neutral-400);
    text-align: center;
}

.s044__label {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.s044__cursor { display: none; }

.s044__link:hover {
    background-color: var(--color-neutral-50);
    color: var(--color-secondary);
}

.s044__item--current .s044__link {
    background-color: var(--color-secondary);
    color: var(--color-white);
    position: relative;
}

.s044__item--current .s044__num {
    color: var(--color-gilt-start);
}

.s044__item--current .s044__link::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 1px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.85;
}

.s044__logout-wrap {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--color-error) 25%, var(--color-neutral-200));
}

.s044__logout {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 44px;
    padding: 10px 8px;
    color: var(--color-error);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.s044__logout:hover {
    color: var(--color-error);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.s044__logout-arrow {
    letter-spacing: 0;
    font-weight: 700;
}

/* Mobile chip strip */
.s044__mobile { display: none; }

@media (max-width: 900px) {
    .s044 {
        width: 100%;
        padding: 16px 0 8px;
    }
    .s044__rail { display: none; }
    .s044__mobile {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .s044__mobile-scroll {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 16px;
        scrollbar-width: none;
    }
    .s044__mobile-scroll::-webkit-scrollbar { display: none; }
    .s044__chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: var(--radius-pill);
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--color-neutral-700);
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
    }
    .s044__chip--current {
        background-color: var(--color-secondary);
        color: var(--color-white);
        border-color: var(--color-secondary);
    }
    .s044__chip--logout {
        color: var(--color-error);
        border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-neutral-200));
    }
}


/* ==========================================================================
   S-045 Account Dashboard Overview - The Student's Docket
   ========================================================================== */

.s045 {
    padding: clamp(40px, 5vw, 64px) 0;
    background-color: var(--color-white);
    font-family: var(--font-body);
}

.s045__inner {
    width: var(--space-container);
    margin: 0 auto;
}

.s045__head {
    max-width: 720px;
    margin-bottom: 36px;
}

.s045__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.s045__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-secondary);
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}

.s045__title em {
    font-style: italic;
    background-image: linear-gradient(180deg, transparent 65%,
        color-mix(in srgb, var(--color-gilt-start) 25%, transparent) 65%,
        color-mix(in srgb, var(--color-gilt-start) 25%, transparent) 92%,
        transparent 92%);
    padding: 0 2px;
}

.s045__lede {
    color: var(--color-neutral-600);
    font-size: 1.0625rem;
    max-width: 62ch;
    margin: 0;
}

.s045__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

.s045__card {
    position: relative;
    padding: 24px 22px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s045__card::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 14px;
    height: 1px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.45;
}

.s045__card--urgent {
    border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
    background-color: color-mix(in srgb, var(--color-warning) 4%, var(--color-white));
}

.s045__card-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 10px;
}

.s045__card-figure {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--color-secondary);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.s045__card-note {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.s045__quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.s045__ql {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "kicker arrow"
        "label arrow"
        "desc desc";
    gap: 4px 12px;
    align-items: start;
    padding: 22px 22px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    color: var(--color-neutral-700);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s045__ql:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    color: var(--color-neutral-700);
}

.s045__ql-kicker {
    grid-area: kicker;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.s045__ql-label {
    grid-area: label;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-secondary);
}

.s045__ql-desc {
    grid-area: desc;
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin-top: 8px;
}

.s045__ql-arrow {
    grid-area: arrow;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
    align-self: start;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s045__ql:hover .s045__ql-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
    .s045__cards, .s045__quicklinks { grid-template-columns: 1fr; }
}


/* ==========================================================================
   S-046 Active Rentals Summary - The Circulation Slip
   ========================================================================== */

.s046 {
    padding: clamp(40px, 5vw, 56px) 0;
    font-family: var(--font-body);
}

.s046__inner {
    width: var(--space-container);
    margin: 0 auto;
}

.s046__head {
    position: relative;
    padding-top: 22px;
    margin-bottom: 28px;
}

.s046__rule {
    position: absolute;
    top: 0; left: 0;
    width: 72px; height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
}

.s046__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.s046__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.15;
}

.s046__title em { font-style: italic; }

.s046__seeall {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
}

.s046__seeall-arrow, .s046__btn-link-arrow, .s046__hint-arrow {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
}

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

.s046--compact .s046__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.s046__item {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 24px 24px 22px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s046__item--urgent {
    border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
    background-color: color-mix(in srgb, var(--color-warning) 3%, var(--color-white));
}

.s046__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--color-gilt-end);
    border-right: 1px solid var(--color-neutral-200);
    padding-right: 16px;
    padding-top: 4px;
}

.s046__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "cover meta deadline"
        "actions actions actions";
    gap: 18px 24px;
    min-width: 0;
}

.s046__cover {
    grid-area: cover;
    width: 80px;
    height: 110px;
    border-radius: var(--radius-sm);
    background-image: linear-gradient(135deg,
        var(--color-secondary) 0%,
        var(--color-secondary-light) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-gilt-start) 45%, transparent),
                var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.s046__cover::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 8px;
    width: 1px;
    background-image: linear-gradient(180deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    opacity: 0.6;
}

.s046__cover-spine {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-white);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.s046__meta { grid-area: meta; min-width: 0; }

.s046__book-title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-secondary);
    margin: 0 0 4px;
}

.s046__book-author {
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    margin: 0 0 14px;
    font-style: italic;
}

.s046__facts {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 28px;
    margin: 0;
}

.s046__fact { display: flex; gap: 6px; align-items: baseline; min-width: 0; }

.s046__fact dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s046__fact dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    font-weight: 500;
}

.s046__deadline {
    grid-area: deadline;
    text-align: right;
    min-width: 160px;
}

.s046__deadline-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 4px;
}

.s046__deadline-date {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0 0 2px;
    line-height: 1.1;
}

.s046__deadline-count {
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    margin: 0 0 10px;
    font-style: italic;
}

.s046__item--urgent .s046__deadline-count { color: #8A5A00; }

.s046__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-neutral-200);
    flex-wrap: wrap;
}

.s046__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: var(--color-secondary);
    color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s046__btn:hover {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
    transform: translateY(-1px);
}

.s046__btn-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    min-height: 44px;
    align-items: center;
}

.s046__consolidated-hint {
    margin-top: 28px;
    padding: 16px 20px;
    background-color: var(--color-primary-lightest);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-700);
    font-size: 0.9375rem;
}

.s046__consolidated-hint a {
    color: var(--color-secondary);
    font-weight: 600;
    margin-left: 4px;
}

.s046__consolidated-hint--top {
    margin-top: 28px;
    margin-bottom: 32px;
}

.s046__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--color-neutral-50);
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
}

.s046__empty-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 6px;
    font-style: italic;
}

.s046__empty-note {
    color: var(--color-neutral-600);
    margin: 0 0 16px;
}

@media (max-width: 820px) {
    .s046--compact .s046__list { grid-template-columns: 1fr; }
    .s046__item { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
    .s046__num {
        border-right: none;
        padding-right: 0;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--color-neutral-200);
        width: 100%;
    }
    .s046__body {
        grid-template-columns: 1fr;
        grid-template-areas: "cover" "meta" "deadline" "actions";
    }
    .s046__cover {
        width: 64px;
        height: 88px;
    }
    .s046__cover-spine { font-size: 1.25rem; }
    .s046__deadline { text-align: left; }
    .s046__facts { grid-template-columns: 1fr; gap: 4px; }
}


/* ==========================================================================
   S-047 Recent Orders Summary - The Ticket Stub Strip
   ========================================================================== */

.s047 {
    padding: clamp(40px, 5vw, 56px) 0;
    background-color: var(--color-neutral-50);
    font-family: var(--font-body);
}

.s047__inner {
    width: var(--space-container);
    margin: 0 auto;
}

.s047__head {
    position: relative;
    padding-top: 22px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
}

.s047__rule {
    position: absolute;
    top: 0; left: 0;
    width: 72px; height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
}

.s047__eyebrow {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.s047__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.15;
}

.s047__title em { font-style: italic; }

.s047__seeall {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    justify-self: end;
}

.s047__seeall-arrow {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
}

.s047__list {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.s047__row + .s047__row {
    border-top: 1px solid var(--color-neutral-200);
}

.s047__row-link {
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 0.8fr) minmax(100px, 0.7fr) minmax(130px, 0.9fr) minmax(80px, 0.6fr) 24px;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    color: var(--color-neutral-800);
    min-height: 64px;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s047__row-link:hover {
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-800);
}

.s047__col--num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.s047__num-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s047__num-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.01em;
}

.s047__col--date {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: var(--color-neutral-700);
}

.s047__mode {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-700);
    background-color: var(--color-white);
}

.s047__mode--rental { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); color: var(--color-primary-dark); background-color: var(--color-primary-lightest); }
.s047__mode--purchase { border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); color: var(--color-accent-dark); background-color: var(--color-accent-lightest); }
.s047__mode--mixed { border-color: color-mix(in srgb, var(--color-gilt-start) 55%, transparent); color: var(--color-gilt-end); background-color: color-mix(in srgb, var(--color-gilt-start) 10%, var(--color-white)); }
.s047__mode--sellback { border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent); color: var(--color-secondary); background-color: color-mix(in srgb, var(--color-secondary) 5%, var(--color-white)); }

.s047__col--total {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-align: right;
}

.s047__col--arrow {
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s047__row-link:hover .s047__col--arrow { transform: translateX(4px); }

.s047__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--color-white);
    border: 1px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
}

.s047__empty-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 6px;
    font-style: italic;
}

.s047__empty-note { color: var(--color-neutral-600); margin: 0 0 16px; }

@media (max-width: 860px) {
    .s047__row-link {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 16px 18px;
    }
    .s047__col--num { grid-column: 1 / -2; grid-row: 1; }
    .s047__col--total { grid-column: -2 / -1; grid-row: 1; align-self: start; justify-self: end; }
    .s047__col--date {
        grid-column: 1;
        grid-row: 2;
        font-size: var(--text-small);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .s047__col--date::after {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: var(--color-neutral-400);
    }
    .s047__col--mode {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        align-self: center;
    }
    .s047__col--status {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
    }
    .s047__col--arrow { display: none; }
}


/* ==========================================================================
   S-048 Consolidated Return Workflow - The Shipping Manifest
   ========================================================================== */

.s048 {
    padding: clamp(40px, 5vw, 56px) 0;
    font-family: var(--font-body);
}

.s048__inner {
    width: min(92%, 820px);
    margin: 0 auto;
}

.s048__frame {
    position: relative;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.s048__head {
    position: relative;
    padding-top: 18px;
    margin-bottom: 24px;
}

.s048__rule {
    position: absolute;
    top: 0; left: 0;
    width: 72px; height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
}

.s048__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.s048__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 10px;
    line-height: 1.15;
}

.s048__title em { font-style: italic; }

.s048__lede {
    color: var(--color-neutral-600);
    margin: 0;
    max-width: 58ch;
    font-size: 1rem;
}

.s048__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 8px;
}

.s048__count {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-neutral-600);
    font-weight: 500;
}

.s048__count-n {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1875rem;
    color: var(--color-secondary);
    margin-right: 2px;
}

.s048__toggle-all {
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    padding: 8px 14px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.s048__toggle-all:hover { color: var(--color-primary-dark); }

.s048__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.s048__list { display: flex; flex-direction: column; }

.s048__item + .s048__item { border-top: 1px solid var(--color-neutral-200); }

.s048__label {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    min-height: 44px;
}

.s048__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.s048__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-neutral-400);
    background-color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s048__box-check {
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s048__checkbox:checked + .s048__box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.s048__checkbox:checked + .s048__box .s048__box-check { opacity: 1; }

.s048__checkbox:focus-visible + .s048__box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s048__book { min-width: 0; }

.s048__book-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--color-secondary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.s048__book-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
}

.s048__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-neutral-400);
}

.s048__selected {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--color-neutral-400);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 3px;
}

.s048__checkbox:checked ~ .s048__selected {
    opacity: 1;
    color: var(--color-gilt-end);
}

.s048__cta-wrap {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-neutral-200);
    text-align: center;
}

.s048__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 32px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s048__cta:hover {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
}

.s048__cta.is-disabled,
.s048__cta[disabled] {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-500);
    cursor: not-allowed;
    transform: none;
}

.s048__foot {
    margin: 14px 0 0;
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
}

.s048__confirm {
    margin: 16px 0 0;
    padding: 12px 16px;
    background-color: var(--color-accent-lightest);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-accent-dark);
    text-align: left;
    font-size: 0.9375rem;
}

@media (max-width: 560px) {
    .s048__label { grid-template-columns: 24px 1fr; gap: 14px; }
    .s048__selected { grid-column: 2; justify-self: start; }
}


/* ==========================================================================
   S-049 Rental History Table - The Card Catalog
   ========================================================================== */

.s049 {
    padding: clamp(40px, 5vw, 64px) 0;
    background-color: var(--color-white);
    font-family: var(--font-body);
}

.s049__inner {
    width: var(--space-container);
    margin: 0 auto;
}

.s049__head {
    position: relative;
    padding-top: 22px;
    margin-bottom: 24px;
    max-width: 640px;
}

.s049__rule {
    position: absolute;
    top: 0; left: 0;
    width: 72px; height: 2px;
    background-image: linear-gradient(90deg,
        var(--color-gilt-start) 0%,
        var(--color-gilt-end) 100%);
}

.s049__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.s049__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 10px;
    line-height: 1.15;
}

.s049__title em { font-style: italic; }

.s049__lede {
    color: var(--color-neutral-600);
    margin: 0;
    font-size: 1rem;
    max-width: 58ch;
}

.s049__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 0;
}

.s049__tool {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s049__tool-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s049__select,
.s049__input {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-neutral-800);
    min-width: 200px;
}

.s049__select:focus-visible,
.s049__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.s049__export {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    min-height: 44px;
    align-items: center;
    padding: 10px 0;
}

.s049__export-arrow {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
}

.s049__table-wrap {
    overflow-x: auto;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s049__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.s049__th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    padding: 16px 14px;
    border-bottom: 1px solid var(--color-neutral-300);
    background-color: var(--color-neutral-50);
    white-space: nowrap;
}

.s049__th--right { text-align: right; }

.s049__th--sortable {
    cursor: pointer;
    user-select: none;
}

.s049__th--sortable span:first-child { margin-right: 6px; }

.s049__sort {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.s049__row + .s049__row td { border-top: 1px solid var(--color-neutral-100); }

.s049__row:hover {
    background-color: var(--color-neutral-50);
}

.s049__td {
    padding: 14px 14px;
    color: var(--color-neutral-800);
    vertical-align: middle;
}

.s049__th--cover { width: 64px; padding-left: 14px; padding-right: 8px; }

.s049__td--cover {
    width: 64px;
    padding-left: 14px;
    padding-right: 8px;
}

.s049__cover {
    position: relative;
    display: block;
    width: 44px;
    height: 60px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark, var(--color-primary)) 100%);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.s049__cover::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    height: 1px;
    background-color: var(--color-gilt-end, #c9a961);
    opacity: 0.7;
    z-index: 2;
}

.s049__cover-spine {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-white);
    text-transform: uppercase;
    z-index: 1;
}

.s049__cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    background: transparent;
}

.s049__td--title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: var(--color-secondary);
    font-weight: 500;
    min-width: 220px;
    padding-right: 18px;
}

.s049__book-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    color: var(--color-secondary);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s049__book-title:hover,
.s049__book-title:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s049__td--author {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    min-width: 140px;
}

.s049__td--isbn {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-700);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.s049__td--right { text-align: right; }

.s049__order-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.01em;
}

.s049__order-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s049__foot {
    margin: 16px 0 0;
    font-size: var(--text-small);
    color: var(--color-neutral-500);
    font-style: italic;
}

@media (max-width: 860px) {
    .s049__table thead { display: none; }
    .s049__table,
    .s049__table tbody,
    .s049__row,
    .s049__td { display: block; width: 100%; }
    .s049__row {
        padding: 16px;
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        background-color: var(--color-white);
    }
    .s049__row + .s049__row td { border-top: none; }
    .s049__td {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 12px;
        padding: 6px 0;
        align-items: baseline;
    }
    .s049__td::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-neutral-500);
    }
    .s049__td--cover {
        display: block;
        width: 44px;
        padding: 0 0 10px;
    }
    .s049__td--cover::before { display: none; }
    .s049__td--title {
        font-size: 1rem;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-neutral-100);
        margin-bottom: 6px;
        min-width: 0;
    }
    .s049__td--title::before { align-self: center; }
    .s049__td--right { text-align: left; }
    .s049__tools { flex-direction: column; align-items: stretch; gap: 12px; }
    .s049__export { margin-left: 0; }
    .s049__select, .s049__input { width: 100%; min-width: 0; }
}


/* ==========================================================================
   S-050 Late Fee Status Block - The Accounting Record
   ========================================================================== */

.s050 {
    padding: clamp(40px, 5vw, 56px) 0;
    font-family: var(--font-body);
}

.s050__inner {
    width: min(92%, 900px);
    margin: 0 auto;
}

.s050__frame {
    position: relative;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 36px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.s050__rule {
    position: absolute;
    left: 24px;
    right: 24px;
    height: 2px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-warning) 70%, transparent) 20%,
        color-mix(in srgb, var(--color-warning) 70%, transparent) 80%,
        transparent 100%);
}

.s050__rule--top { top: 0; }
.s050__rule--bottom { bottom: 0; }

.s050__head { margin-bottom: 20px; }

.s050__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8A5A00;
    margin: 0 0 10px;
}

.s050__title {
    font-family: var(--font-heading);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 10px;
    line-height: 1.15;
}

.s050__title em { font-style: italic; }

.s050__lede {
    color: var(--color-neutral-700);
    margin: 0;
    font-size: 1rem;
    max-width: 62ch;
    line-height: 1.6;
}

.s050__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 24px 0;
    padding: 18px 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s050__summary-item {
    padding: 0 16px;
    border-right: 1px solid var(--color-neutral-200);
}

.s050__summary-item:last-child { border-right: none; }

.s050__summary-item dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin: 0 0 6px;
}

.s050__summary-item dd {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1;
    margin: 0;
}

.s050__summary-item--pending dd { color: #8A5A00; }

.s050__grace-sub {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-neutral-500);
    margin-left: 6px;
    font-style: italic;
}

.s050__fees { display: flex; flex-direction: column; margin: 0; }

.s050__fee {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 18px 0;
    align-items: center;
}

.s050__fee + .s050__fee { border-top: 1px solid var(--color-neutral-100); }

.s050__fee-book {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--color-secondary);
    margin: 0 0 4px;
}

.s050__fee-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    margin: 0;
}

.s050__fee-meta em {
    color: var(--color-neutral-800);
    font-weight: 500;
}

.s050__fee-order {
    color: var(--color-primary);
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.s050__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-neutral-400);
}

.s050__fee-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.s050__fee-amount {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin: 0;
    line-height: 1;
}

.s050__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-neutral-200);
    flex-wrap: wrap;
}

.s050__policy {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    min-height: 44px;
    align-items: center;
}

.s050__policy-arrow {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
}

.s050__dispute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s050__dispute:hover {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
    transform: translateY(-1px);
}

.s050__foot {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    line-height: 1.55;
    max-width: 62ch;
}

@media (max-width: 700px) {
    .s050__summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .s050__summary-item {
        padding: 8px 0;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .s050__summary-item:last-child { border-bottom: none; }
    .s050__fee { grid-template-columns: 1fr; gap: 10px; }
    .s050__fee-right { align-items: flex-start; text-align: left; flex-direction: row; gap: 12px; }
    .s050__actions { flex-direction: column; align-items: stretch; }
    .s050__policy { justify-content: flex-start; }
    .s050__dispute { width: 100%; }
}


/* ==========================================================================
   S-051, S-052, S-053 Auth Forms - The Editorial Gate
   Shared ivory canvas, gilt hairline flourish, Cormorant italic headline.
   ========================================================================== */

.s051,
.s052,
.s053 {
    padding: clamp(48px, 6vw, 80px) 0;
    font-family: var(--font-body);
    background-color: #FBF7EE; /* ivory - no raw hex elsewhere; kept to one canvas token. */
    background-image:
        radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--color-gilt-start) 7%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 100%, color-mix(in srgb, var(--color-primary) 4%, transparent) 0%, transparent 60%);
}

.s051__inner,
.s052__inner,
.s053__inner {
    width: min(92%, 540px);
    margin: 0 auto;
}

/* The card ------------------------------------------------------------ */

.s051__card,
.s052__card,
.s053__card {
    position: relative;
    padding: clamp(32px, 4.5vw, 48px) clamp(24px, 4vw, 40px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 0 rgba(4, 30, 66, 0.02),
        0 20px 48px -28px rgba(4, 30, 66, 0.18);
}

/* Gilt hairline flourish crowning the card ---------------------------- */

.s051__rule,
.s052__rule,
.s053__rule {
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 2px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 20%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 80%,
        transparent 100%);
    opacity: 0.9;
}

/* Heading cluster ----------------------------------------------------- */

.s051__head,
.s052__head,
.s053__head {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 32px);
    padding-top: 8px;
}

.s051__eyebrow,
.s052__eyebrow,
.s053__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    margin: 0 0 12px;
    font-family: var(--font-body);
}

.s051__title,
.s052__title,
.s053__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.6vw, 2.25rem);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.s051__title em,
.s052__title em,
.s053__title em {
    font-style: italic;
    color: var(--color-secondary);
}

.s051__lede,
.s052__lede,
.s053__lede {
    color: var(--color-neutral-600);
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 42ch;
}

/* Form surface -------------------------------------------------------- */

.s051__form,
.s052__form,
.s053__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Reserved error region: always present so no layout shift on validate */

.s051__error,
.s052__error,
.s053__error {
    min-height: 20px;
    padding: 0 2px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-error);
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.s051__error.is-visible,
.s052__error.is-visible,
.s053__error.is-visible {
    opacity: 1;
    padding: 10px 14px;
    background-color: color-mix(in srgb, var(--color-error) 8%, var(--color-white));
    border-left: 3px solid var(--color-error);
    border-radius: var(--radius-md);
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Field + label ------------------------------------------------------- */

.s051__field,
.s052__field,
.s053__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s051__label,
.s052__label,
.s053__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
    font-family: var(--font-body);
}

.s052__label--optional {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.s052__label-tag {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    font-family: var(--font-body);
}

.s051__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.s051__forgot {
    font-size: 0.8125rem;
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s051__forgot:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Inputs -------------------------------------------------------------- */

.s051__input,
.s052__input,
.s053__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s051__input::placeholder,
.s052__input::placeholder,
.s053__input::placeholder {
    color: var(--color-neutral-400);
}

.s051__input:hover,
.s052__input:hover,
.s053__input:hover {
    border-color: var(--color-neutral-400);
}

.s051__input:focus,
.s052__input:focus,
.s053__input:focus,
.s051__input:focus-visible,
.s052__input:focus-visible,
.s053__input:focus-visible {
    outline: none;
    background-color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Password show/hide toggle ------------------------------------------ */

.s051__password-wrap,
.s052__password-wrap {
    position: relative;
}

.s051__input--password,
.s052__input--password {
    padding-right: 56px;
}

.s051__password-toggle,
.s052__password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    color: var(--color-neutral-500);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s051__password-toggle:hover,
.s052__password-toggle:hover {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.s051__password-toggle:focus-visible,
.s052__password-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.s051__eye--hide,
.s052__eye--hide { display: none; }

.s051__password-toggle[aria-pressed="true"] .s051__eye--show,
.s052__password-toggle[aria-pressed="true"] .s052__eye--show { display: none; }

.s051__password-toggle[aria-pressed="true"] .s051__eye--hide,
.s052__password-toggle[aria-pressed="true"] .s052__eye--hide { display: block; }

/* Password strength meter (S-052 only) ------------------------------- */

.s052__strength {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.s052__strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.s052__strength-bar {
    height: 3px;
    background-color: var(--color-neutral-200);
    border-radius: 2px;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.s052__strength-bar.is-on {
    background-color: var(--color-gilt-start);
}

.s052__strength[data-strength="weak"] .s052__strength-bar.is-on {
    background-color: #D97757;
}

.s052__strength[data-strength="fair"] .s052__strength-bar.is-on {
    background-color: var(--color-gilt-start);
}

.s052__strength[data-strength="strong"] .s052__strength-bar.is-on,
.s052__strength[data-strength="very-strong"] .s052__strength-bar.is-on {
    background-color: var(--color-teal);
}

.s052__strength-text {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-neutral-600);
    line-height: 1.4;
}

/* Grid row (first/last name) ----------------------------------------- */

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

/* Checkbox (remember me + consent) ----------------------------------- */

.s051__row {
    display: flex;
    align-items: center;
    margin: 4px 0 8px;
}

.s051__check,
.s052__consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-neutral-700);
}

.s051__check input[type="checkbox"],
.s052__consent input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.s051__check-box,
.s052__consent .s052__check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-400);
    border-radius: 4px;
    color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s051__check-box svg,
.s052__consent .s052__check-box svg {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-spring);
}

.s051__check input:checked + .s051__check-box,
.s052__consent input:checked + .s052__check-box {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.s051__check input:checked + .s051__check-box svg,
.s052__consent input:checked + .s052__check-box svg {
    opacity: 1;
}

.s051__check input:focus-visible + .s051__check-box,
.s052__consent input:focus-visible + .s052__check-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.s051__check-label {
    padding-top: 2px;
}

.s052__consent-label {
    padding-top: 2px;
}

.s052__consent-label a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.s052__consent-label a:hover {
    text-decoration-color: var(--color-primary);
}

/* Submit button ------------------------------------------------------- */

.s051__submit,
.s052__submit,
.s053__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: 4px;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s051__submit:hover,
.s052__submit:hover,
.s053__submit:hover {
    background-color: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -14px rgba(4, 30, 66, 0.55);
}

.s051__submit:focus-visible,
.s052__submit:focus-visible,
.s053__submit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.s051__submit-arrow,
.s052__submit-arrow,
.s053__submit-arrow {
    font-weight: 700;
    letter-spacing: 0;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.s051__submit:hover .s051__submit-arrow,
.s052__submit:hover .s052__submit-arrow,
.s053__submit:hover .s053__submit-arrow {
    transform: translateX(3px);
}

/* Alt link below the form -------------------------------------------- */

.s051__alt,
.s052__alt,
.s053__alt {
    text-align: center;
    margin: 8px 0 0;
    font-size: 0.9375rem;
    color: var(--color-neutral-600);
}

.s051__alt-link,
.s052__alt-link,
.s053__alt-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    transition: color var(--duration-fast) var(--ease-out);
}

.s051__alt-link:hover,
.s052__alt-link:hover,
.s053__alt-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s053__alt-arrow {
    font-weight: 700;
    letter-spacing: 0;
}

/* S-053 success state ------------------------------------------------- */

.s053__card--success {
    background-color: color-mix(in srgb, var(--color-teal) 4%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-teal) 22%, var(--color-neutral-200));
}

.s053__rule--success {
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--color-teal) 20%,
        var(--color-teal) 80%,
        transparent 100%);
    opacity: 0.55;
}

.s053__success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-teal) 12%, var(--color-white));
    color: var(--color-teal);
    border: 1px solid color-mix(in srgb, var(--color-teal) 25%, transparent);
}

.s053__eyebrow--success {
    color: var(--color-teal);
}

.s053__title--success {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.s053__lede strong {
    color: var(--color-primary);
    font-weight: 600;
}

.s053__tips {
    list-style: none;
    margin: 20px 0 16px;
    padding: 16px 18px;
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s053__tips li {
    position: relative;
    padding-left: 18px;
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    line-height: 1.5;
}

.s053__tips li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-gilt-start);
}

/* S-053 review-mode divider (showcase only) -------------------------- */

.s053__review-divider {
    position: relative;
    margin: 36px 0;
    text-align: center;
}

.s053__review-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-neutral-300);
}

.s053__review-label {
    position: relative;
    display: inline-block;
    padding: 4px 14px;
    background-color: #FBF7EE;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    letter-spacing: 0.02em;
}

/* Mobile 375 ---------------------------------------------------------- */

@media (max-width: 520px) {
    .s051__card,
    .s052__card,
    .s053__card {
        padding: 28px 20px 32px;
    }
    .s051__rule,
    .s052__rule,
    .s053__rule {
        left: 20px;
        right: 20px;
    }
    .s052__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .s051__label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .s051__forgot {
        margin-top: -2px;
    }
    .s051__submit,
    .s052__submit,
    .s053__submit {
        min-height: 48px;
    }
}

/* ==========================================================================
   WAVE 9 - Contact: S-054 Hero, S-055 Form, S-056 Details Panel
   Editorial warmth. Ivory canvases, gilt hairlines, Cormorant italic
   titles, approachable copy. Form is the primary path - details panel
   is a calm companion, not a competitor.
   ========================================================================== */

/* S-054 Contact Hero -------------------------------------------------- */

.s054 {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 20px clamp(48px, 6vw, 72px);
    background-color: #FBF7EE;
    overflow: hidden;
}

.s054::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(201, 169, 97, 0.08), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(13, 148, 136, 0.06), transparent 48%);
    pointer-events: none;
}

.s054__inner {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.s054__head {
    text-align: center;
    margin-bottom: 44px;
}

.s054__rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 30%, var(--color-gilt-end) 70%, transparent);
}

.s054__eyebrow {
    max-width: none;
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.22em;
}

.s054__title {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.5rem, 6.5vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s054__title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 400;
}

.s054__lede {
    margin: 0 auto 22px;
    max-width: 560px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.s054__trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 16px;
    background-color: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-accent-dark);
    font-weight: 500;
    letter-spacing: 0.01em;
}

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

.s054__pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    opacity: 0.5;
    animation: s054-pulse 2.2s ease-out infinite;
}

@keyframes s054-pulse {
    0% { transform: scale(0.6); opacity: 0.65; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.s054__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 760px;
    margin: 0 auto 28px;
}

.s054__chip {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 14px;
    padding: 18px 22px;
    min-height: 72px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-secondary);
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s054__chip::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-spring);
}

.s054__chip:hover,
.s054__chip:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.s054__chip:hover::after,
.s054__chip:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.s054__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s054__chip-label {
    grid-column: 1 / 2;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.s054__chip-desc {
    grid-column: 1 / 2;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    line-height: 1.45;
}

.s054__chip-arrow {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-accent);
    transition: transform var(--duration-fast) var(--ease-out);
}

.s054__chip:hover .s054__chip-arrow,
.s054__chip:focus-visible .s054__chip-arrow {
    transform: translateX(3px);
}

.s054__fineprint {
    max-width: none;
    margin: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-neutral-600);
}

.s054__inline-link {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
}

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

/* S-055 Contact Form -------------------------------------------------- */

.s055 {
    padding: clamp(48px, 6vw, 80px) 20px clamp(56px, 7vw, 96px);
    background-color: var(--color-white);
}

/* Inside the demo layout, the demo wrapper already handles horizontal
   padding; drop the section's own 20px side padding so the form fills
   its column. */
.ft-demo-layout__main > .s055,
.ft-demo-layout__sidebar > .s055 {
    padding-left: 0;
    padding-right: 0;
}

.s055__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.s055__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.s055__form-wrap {
    background-color: var(--color-white);
    padding: 36px 36px 40px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s055__head {
    margin-bottom: 28px;
}

.s055__rule {
    display: block;
    width: 48px;
    height: 1px;
    margin: 0 0 18px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s055__eyebrow {
    max-width: none;
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.2em;
}

.s055__title {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.875rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--color-secondary);
}

.s055__title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 400;
}

.s055__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-neutral-700);
}

.s055__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s055__error {
    min-height: 20px;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-error);
    line-height: 1.4;
    transition: padding var(--duration-fast) var(--ease-out);
}

.s055__error.is-visible {
    padding: 10px 14px;
    background-color: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--radius-md);
}

.s055__row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.s055__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s055__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
}

.s055__label--opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.s055__label-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    letter-spacing: 0.01em;
}

.s055__input {
    width: 100%;
    padding: 12px 14px;
    min-height: 48px;
    background-color: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-secondary);
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s055__input::placeholder {
    color: var(--color-neutral-400);
}

.s055__input:hover {
    border-color: var(--color-neutral-300);
}

.s055__input:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}

.s055__textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.55;
    padding-top: 14px;
}

.s055__select-wrap {
    position: relative;
}

.s055__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: none;
}

.s055__select.is-prefilled {
    border-color: var(--color-accent);
    background-color: var(--color-accent-lightest);
}

.s055__select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500);
    pointer-events: none;
}

.s055__consent {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 4px 8px;
    padding: 4px 0;
    cursor: pointer;
    min-height: 44px;
    position: relative;
}

.s055__consent-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.s055__consent-box {
    grid-column: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-300);
    border-radius: 5px;
    color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s055__consent-box svg {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-spring);
}

.s055__consent-input:checked + .s055__consent-box {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.s055__consent-input:checked + .s055__consent-box svg {
    opacity: 1;
    transform: scale(1);
}

.s055__consent-input:focus-visible + .s055__consent-box {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
    border-color: var(--color-accent);
}

.s055__consent-text {
    grid-column: 2 / 3;
    padding-top: 2px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-neutral-700);
}

.s055__inline-link {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
}

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

.s055__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.s055__submit {
    margin-top: 4px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    min-height: 52px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s055__submit:hover,
.s055__submit:focus-visible {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    outline: none;
}

.s055__submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3), var(--shadow-md);
}

.s055__submit:active {
    transform: translateY(0);
}

.s055__submit-arrow {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out);
}

.s055__submit:hover .s055__submit-arrow,
.s055__submit:focus-visible .s055__submit-arrow {
    transform: translateX(3px);
}

/* S-055 Aside "What happens next" */

.s055__aside {
    position: sticky;
    top: 120px;
}

.s055__aside-card {
    padding: 28px 26px 32px;
    background-color: #FBF7EE;
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: var(--radius-lg);
    position: relative;
}

.s055__aside-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    border-radius: 0 0 2px 2px;
}

.s055__aside-eyebrow {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s055__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.s055__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}

.s055__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid rgba(201, 169, 97, 0.4);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--color-gilt-end);
    font-weight: 500;
}

.s055__step-title {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.005em;
}

.s055__step-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-neutral-700);
}

/* S-055 Success state */

.s055__success {
    max-width: 720px;
    margin: 0 auto;
}

.s055__success-card {
    position: relative;
    padding: 44px 36px 40px;
    background-color: #FBF7EE;
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: var(--radius-lg);
    text-align: center;
}

.s055__success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: rgba(13, 148, 136, 0.12);
    color: var(--color-accent);
}

.s055__rule--success {
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 30%, var(--color-gilt-end) 70%, transparent);
    margin: 0 auto 18px;
}

.s055__title--success {
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
}

.s055__success-tips {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 22px 0;
    border-top: 1px solid rgba(201, 169, 97, 0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    line-height: 1.55;
}

.s055__success-tips li {
    position: relative;
    padding-left: 18px;
}

.s055__success-tips li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-gilt-start);
}

/* S-055 review-mode divider */

.s055__review-divider {
    position: relative;
    margin: 48px 0;
    text-align: center;
}

.s055__review-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-neutral-300);
}

.s055__review-label {
    position: relative;
    display: inline-block;
    padding: 4px 14px;
    background-color: var(--color-white);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    letter-spacing: 0.02em;
}

/* S-056 Contact Details Panel ---------------------------------------- */

.s056 {
    padding: clamp(48px, 6vw, 80px) 20px clamp(64px, 8vw, 104px);
    background-color: #FBF7EE;
}

.s056__inner {
    max-width: 560px;
    margin: 0 auto;
}

.s056__card {
    position: relative;
    padding: 40px 32px 36px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s056__head {
    margin-bottom: 24px;
}

.s056__rule {
    display: block;
    width: 56px;
    height: 1px;
    margin: 0 0 18px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s056__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s056__title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--color-secondary);
}

.s056__title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 400;
}

.s056__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-neutral-700);
}

.s056__mailto {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 22px 0 24px;
    padding: 16px 20px;
    min-height: 64px;
    background-color: var(--color-accent-lightest);
    border: 1px solid rgba(13, 148, 136, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s056__mailto:hover,
.s056__mailto:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.14);
    outline: none;
}

.s056__mailto:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s056__mailto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-white);
    border-radius: 50%;
    color: var(--color-accent-dark);
}

.s056__mailto-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s056__mailto-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.s056__mailto-addr {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-secondary);
    word-break: break-all;
}

.s056__mailto-arrow {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-accent);
    transition: transform var(--duration-fast) var(--ease-out);
}

.s056__mailto:hover .s056__mailto-arrow,
.s056__mailto:focus-visible .s056__mailto-arrow {
    transform: translateX(3px);
}

.s056__rows {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s056__row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid var(--color-neutral-200);
}

.s056__row:first-child {
    border-top: none;
    padding-top: 4px;
}

.s056__row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #FBF7EE;
    border-radius: 50%;
    color: var(--color-gilt-end);
}

.s056__row-label {
    margin: 0 0 2px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s056__row-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* S-056 stylized CSS-only "map" - no external tile service */

.s056__map {
    position: relative;
    margin: 0 0 24px;
    aspect-ratio: 16 / 10;
    max-height: 260px;
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.s056__map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.s056__map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(4, 30, 66, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(4, 30, 66, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center;
}

.s056__map-roads {
    position: absolute;
    inset: 0;
}

.s056__map-road {
    position: absolute;
    background-color: rgba(201, 169, 97, 0.32);
}

.s056__map-road--h {
    left: 8%;
    right: 8%;
    top: 54%;
    height: 3px;
    border-radius: 2px;
    transform: rotate(-3deg);
    transform-origin: left center;
}

.s056__map-road--v {
    top: 12%;
    bottom: 12%;
    left: 46%;
    width: 3px;
    border-radius: 2px;
    transform: rotate(5deg);
    transform-origin: top center;
}

.s056__map-pin {
    position: absolute;
    top: 46%;
    left: 48%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
}

.s056__map-pin-dot {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-white), 0 2px 6px rgba(13, 148, 136, 0.4);
}

.s056__map-pin-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    opacity: 0.5;
    animation: s056-pin-pulse 2.4s ease-out infinite;
}

@keyframes s056-pin-pulse {
    0% { transform: scale(0.6); opacity: 0.7; }
    70% { transform: scale(2.0); opacity: 0; }
    100% { transform: scale(2.0); opacity: 0; }
}

.s056__map-cap {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
}

.s056__map-cap-marker {
    color: var(--color-accent);
    font-size: 0.625rem;
}

.s056__social {
    padding-top: 20px;
    border-top: 1px solid var(--color-neutral-200);
}

.s056__social-label {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s056__social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.s056__social-link {
    display: inline-block;
    padding: 6px 0;
    min-height: 32px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-neutral-300);
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s056__social-link:hover,
.s056__social-link:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
    outline: none;
}

.s056__social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* Wave 9 responsive ---------------------------------------------------- */

@media (max-width: 960px) {
    .s055__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .s055__aside {
        position: static;
    }
}

@media (max-width: 640px) {
    .s054 {
        padding-top: clamp(56px, 12vw, 72px);
    }
    .s054__chips {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .s054__chip {
        padding: 16px 18px;
        min-height: 68px;
    }
    .s054__trust {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    .s055__form-wrap {
        padding: 24px 20px 28px;
    }
    .s055__row--two {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .s055__submit {
        width: 100%;
        justify-content: center;
        min-height: 52px;
    }
    .s055__success-card {
        padding: 36px 22px 32px;
    }
    .s055__success-tips {
        padding-left: 6px;
        padding-right: 6px;
    }
    .s056__card {
        padding: 28px 20px 28px;
    }
    .s056__mailto {
        padding: 14px 16px;
        gap: 12px;
    }
    .s056__mailto-addr {
        font-size: 0.9375rem;
    }
}

@media (max-width: 400px) {
    .s054__title {
        font-size: clamp(2.125rem, 10vw, 2.75rem);
    }
    .s055__consent-text {
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   WAVE 10 - Policy + 404: S-057 Policy Intro, S-058 Policy Block,
   S-059 Condition Guide, S-060 404 Recovery
   Editorial law-journal treatment. Ivory canvases, gilt hairlines,
   Cormorant italic display, DM Sans long-form body at a 680px measure.
   Policy body is readable by design - dense text handled with care.
   ========================================================================== */

/* S-057 Policy Page Intro --------------------------------------------- */

.s057 {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 20px clamp(32px, 4vw, 48px);
    background-color: #FBF7EE;
    overflow: hidden;
}

.s057::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(201, 169, 97, 0.07), transparent 44%),
        radial-gradient(circle at 82% 78%, rgba(13, 148, 136, 0.05), transparent 48%);
    pointer-events: none;
}

.s057__inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}

.s057__head {
    text-align: center;
    margin-bottom: 36px;
}

.s057__rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 30%, var(--color-gilt-end) 70%, transparent);
}

.s057__eyebrow {
    max-width: none;
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.22em;
}

.s057__title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.5rem, 6.5vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s057__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 6px 14px;
    background-color: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.18);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-accent-dark);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.s057__meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
}

.s057__lede {
    margin: 0 auto;
    max-width: 620px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-neutral-700);
}

.s057__toc {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    z-index: 5;
    margin-top: 32px;
    padding: 16px 20px 14px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.2) blur(6px);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.s057__toc-label {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s057__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.s057__toc-item {
    margin: 0;
    padding: 0;
}

.s057__toc-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s057__toc-link:hover,
.s057__toc-link:focus-visible {
    background-color: rgba(201, 169, 97, 0.08);
    border-color: var(--color-gilt-end);
    color: var(--color-accent-dark);
    outline: none;
}

.s057__toc-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.s057__toc-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--color-gilt-end);
    letter-spacing: 0.02em;
}

.s057__toc-text {
    font-weight: 500;
}

@media (max-width: 768px) {
    .s057__toc {
        position: relative;
        top: auto;
    }
    .s057__toc-list {
        flex-direction: column;
        gap: 4px;
    }
    .s057__toc-link {
        width: 100%;
        padding: 12px 14px;
    }
}

/* S-058 Policy Section Block ------------------------------------------ */

.s058 {
    padding: clamp(32px, 4vw, 56px) 20px clamp(48px, 6vw, 80px);
    background-color: var(--color-white);
}

.s058__inner {
    max-width: 760px;
    margin: 0 auto;
}

.s058__block {
    padding: 32px 0 40px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s058__block:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.s058__block:first-of-type {
    padding-top: 8px;
}

.s058__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s058__heading {
    position: relative;
    margin: 0 0 20px;
    padding-left: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-secondary);
    scroll-margin-top: calc(var(--header-height) + 100px);
}

.s058__anchor {
    display: none;
}

.s058__body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-neutral-800);
}

.s058__p {
    margin: 0 0 18px;
}

.s058__p:last-child {
    margin-bottom: 0;
}

.s058__sub {
    margin: 28px 0 12px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--color-secondary);
}

.s058__body ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.s058__body li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.s058__callout {
    margin: 24px 0 4px;
    padding: 20px 22px 18px;
    background-color: rgba(201, 169, 97, 0.08);
    border-left: 3px solid var(--color-gilt-end);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.s058__callout-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.s058__callout-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-gilt-end);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

.s058__callout-body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-neutral-800);
}

/* S-059 Condition Guide ----------------------------------------------- */

.s059 {
    position: relative;
    padding: clamp(56px, 7vw, 88px) 20px clamp(56px, 7vw, 88px);
    background-color: var(--color-neutral-50);
    overflow: hidden;
}

.s059::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(201, 169, 97, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(13, 148, 136, 0.05), transparent 45%);
    pointer-events: none;
}

.s059__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.s059__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
}

.s059__rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 30%, var(--color-gilt-end) 70%, transparent);
}

.s059__eyebrow {
    max-width: none;
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.22em;
}

.s059__title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 2.875rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s059__title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 400;
}

.s059__lede {
    margin: 0 auto;
    max-width: 580px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.s059__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.s059__tier {
    margin: 0;
    padding: 0;
}

.s059__tier-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-spring);
}

.s059__tier-link:hover,
.s059__tier-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-gilt-end);
    box-shadow: 0 12px 28px -18px rgba(23, 23, 34, 0.45);
    outline: none;
}

.s059__tier-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s059__spine {
    position: relative;
    height: 96px;
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
    overflow: hidden;
}

.s059__tier[data-spine="new"] .s059__spine {
    background: linear-gradient(180deg, #1f3a5f 0%, #0f2140 100%);
}

.s059__tier[data-spine="like-new"] .s059__spine {
    background: linear-gradient(180deg, #2c4a4b 0%, #14292a 100%);
}

.s059__tier[data-spine="very-good"] .s059__spine {
    background: linear-gradient(180deg, #4a3b2a 0%, #251c11 100%);
}

.s059__tier[data-spine="good"] .s059__spine {
    background: linear-gradient(180deg, #513324 0%, #28180e 100%);
}

.s059__tier[data-spine="acceptable"] .s059__spine {
    background: linear-gradient(180deg, #4a3730 0%, #241a16 100%);
}

.s059__spine-top,
.s059__spine-bottom {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 20%, var(--color-gilt-end) 80%, transparent);
    opacity: 0.85;
}

.s059__spine-top {
    top: 14px;
}

.s059__spine-bottom {
    bottom: 14px;
}

.s059__spine-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: rgba(251, 247, 238, 0.92);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.s059__spine-wear {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
}

.s059__spine-wear--new {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
}

.s059__spine-wear--like-new {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 30%),
        linear-gradient(90deg, transparent 92%, rgba(0, 0, 0, 0.25) 100%);
}

.s059__spine-wear--very-good {
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0, transparent 6px,
            rgba(255, 255, 255, 0.04) 6px, rgba(255, 255, 255, 0.04) 7px),
        linear-gradient(90deg, transparent 90%, rgba(0, 0, 0, 0.3) 100%);
}

.s059__spine-wear--good {
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0, transparent 4px,
            rgba(255, 255, 255, 0.05) 4px, rgba(255, 255, 255, 0.05) 5px),
        radial-gradient(ellipse at 20% 40%, rgba(0, 0, 0, 0.35), transparent 50%),
        linear-gradient(90deg, transparent 88%, rgba(0, 0, 0, 0.35) 100%);
}

.s059__spine-wear--acceptable {
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0, transparent 3px,
            rgba(255, 255, 255, 0.06) 3px, rgba(255, 255, 255, 0.06) 4px),
        radial-gradient(ellipse at 25% 60%, rgba(0, 0, 0, 0.4), transparent 45%),
        radial-gradient(ellipse at 75% 30%, rgba(0, 0, 0, 0.3), transparent 40%),
        linear-gradient(90deg, transparent 85%, rgba(0, 0, 0, 0.4) 100%);
}

.s059__card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px 20px 22px;
}

.s059__tier-num {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-gilt-end);
    letter-spacing: 0.04em;
}

.s059__tier-name {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--color-secondary);
}

.s059__tier-tag {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-neutral-600);
    line-height: 1.4;
}

.s059__criteria {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

.s059__criterion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 9px;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-neutral-800);
}

.s059__criterion:last-child {
    margin-bottom: 0;
}

.s059__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: rgba(13, 148, 136, 0.12);
    color: var(--color-accent-dark);
}

.s059__criterion-text {
    flex-grow: 1;
}

.s059__fineprint {
    margin: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-neutral-600);
}

.s059__inline-link {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
}

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

@media (max-width: 1024px) {
    .s059__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .s059__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .s059__spine {
        height: 72px;
    }
    .s059__spine-label {
        font-size: 1rem;
    }
}

/* S-060 404 Recovery Block -------------------------------------------- */

.s060 {
    position: relative;
    padding: clamp(64px, 9vw, 112px) 20px clamp(56px, 7vw, 96px);
    background-color: #FBF7EE;
    overflow: hidden;
}

.s060::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(201, 169, 97, 0.09), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(13, 148, 136, 0.07), transparent 44%);
    pointer-events: none;
}

.s060__inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.s060__head {
    margin-bottom: 40px;
}

.s060__mark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.s060__mark-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(4rem, 12vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--color-gilt-end);
    background: linear-gradient(180deg, var(--color-gilt-start), var(--color-gilt-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.s060__mark-rule {
    display: block;
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gilt-start) 30%, var(--color-gilt-end) 70%, transparent);
}

.s060__eyebrow {
    max-width: none;
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing so the text is optically centered */
    padding-left: 0.22em;
}

.s060__title {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s060__title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 400;
}

.s060__lede {
    margin: 0 auto;
    max-width: 560px;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.s060__search {
    margin: 0 auto 36px;
    max-width: 640px;
    text-align: left;
}

.s060__search-label {
    display: block;
    margin: 0 0 10px;
    padding-left: 2px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.s060__search-field {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 4px 4px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s060__search-field:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}

.s060__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-neutral-500);
}

.s060__search-input {
    flex-grow: 1;
    padding: 14px 12px;
    min-width: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-secondary);
    appearance: none;
}

.s060__search-input::-webkit-search-decoration,
.s060__search-input::-webkit-search-cancel-button {
    appearance: none;
    display: none;
}

.s060__search-input:focus {
    outline: none;
}

.s060__search-input::placeholder {
    color: var(--color-neutral-500);
    font-style: italic;
}

.s060__search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    background: var(--color-neutral-100);
    border: 0;
    border-radius: 50%;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s060__search-clear:hover,
.s060__search-clear:focus-visible {
    background-color: var(--color-neutral-200);
    color: var(--color-secondary);
    outline: none;
}

.s060__search-clear[hidden] {
    display: none;
}

.s060__search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 22px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s060__search-submit:hover,
.s060__search-submit:focus-visible {
    background-color: var(--color-accent-dark);
    transform: translateY(-1px);
    outline: none;
}

.s060__search-submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s060__or {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    text-align: center;
    max-width: none;
}

.s060__dests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.s060__dest {
    margin: 0;
    padding: 0;
}

.s060__dest-link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding: 18px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-spring);
}

.s060__dest-link::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 10px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-spring);
}

.s060__dest-link:hover,
.s060__dest-link:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -18px rgba(23, 23, 34, 0.4);
    outline: none;
}

.s060__dest-link:hover::after,
.s060__dest-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.s060__dest-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s060__dest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: rgba(201, 169, 97, 0.12);
    border-radius: 50%;
    color: var(--color-accent-dark);
}

.s060__dest-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.s060__dest-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.005em;
}

.s060__dest-desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    line-height: 1.45;
}

.s060__dest-arrow {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-accent);
    transition: transform var(--duration-fast) var(--ease-out);
}

.s060__dest-link:hover .s060__dest-arrow,
.s060__dest-link:focus-visible .s060__dest-arrow {
    transform: translateX(3px);
}

@media (max-width: 640px) {
    .s060__dests {
        grid-template-columns: 1fr;
    }
    .s060__search-field {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        padding: 10px;
        align-items: center;
        border-radius: 22px;
    }
    .s060__search-icon {
        grid-row: 1;
        grid-column: 1;
        padding-left: 8px;
    }
    .s060__search-input {
        grid-row: 1;
        grid-column: 2;
        padding: 10px 10px;
        width: 100%;
    }
    .s060__search-clear {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        margin-right: 0;
    }
    .s060__search-submit {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 400px) {
    .s058__body {
        font-size: 1rem;
    }
    .s058__heading {
        font-size: 1.5rem;
    }
    .s059__tier-name {
        font-size: 1.25rem;
    }
}


/* ==========================================================================
   WAVE 11 - Blog Archive (S-061..S-064)
   Aesthetic: small law-review quarterly on ivory stock. Cormorant italic
   headlines, uppercase DM Sans metadata, gilt hairlines, and a thin red
   rule as the category mark. No stock photography; post covers are a
   typographic plate with a Cormorant initial and issue number.
   ========================================================================== */

/* ---------- S-061: Blog Archive Intro ---------------------------------- */

.s061 {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px);
    background-color: #FBF7EE; /* ivory paper canvas (same token as S-051..053) */
    background-image:
        radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--color-gilt-start) 8%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 100%, color-mix(in srgb, var(--color-secondary) 4%, transparent) 0%, transparent 60%);
    font-family: var(--font-body);
}

.s061__inner {
    width: min(92%, 960px);
    margin: 0 auto;
}

.s061__masthead {
    position: relative;
    padding: clamp(28px, 4vw, 48px) 0;
    text-align: center;
}

.s061__rule {
    display: block;
    height: 1px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 25%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 75%,
        transparent 100%);
    opacity: 0.75;
}

.s061__rule--top { margin-bottom: clamp(18px, 2vw, 28px); }
.s061__rule--bottom { margin-top: clamp(28px, 3.5vw, 40px); }

.s061__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 14px;
    max-width: none;
    margin: 0 0 clamp(18px, 2.5vw, 28px);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
    /* Offset trailing letter-spacing on last item so the row is optically centered */
    padding-left: 0.24em;
}

.s061__meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-gilt-start);
    opacity: 0.7;
}

.s061__title {
    margin: 0 0 clamp(20px, 2.5vw, 28px);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    font-weight: 500;
    color: var(--color-secondary);
    letter-spacing: -0.015em;
}

.s061__title-line-1,
.s061__title-line-2 {
    display: block;
}

.s061__title-line-2 {
    font-style: italic;
    margin-top: 0.05em;
}

.s061__title em {
    font-style: italic;
    color: var(--color-accent-dark);
}

.s061__lede {
    max-width: 640px;
    margin: 0 auto clamp(20px, 2.5vw, 28px);
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.s061__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.s061__credentials {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid color-mix(in srgb, var(--color-gilt-end) 25%, transparent);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1;
    color: var(--color-neutral-700);
}

.s061__credentials-mark {
    color: var(--color-gilt-end);
    flex-shrink: 0;
}

.s061__cta {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 10px;
    height: 44px;
    padding: 0 22px 0 24px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s061__cta:hover,
.s061__cta:focus-visible {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
    transform: translateY(-1px);
    outline: none;
}

.s061__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s061__cta-arrow {
    transition: transform var(--duration-fast) var(--ease-out);
}

.s061__cta:hover .s061__cta-arrow,
.s061__cta:focus-visible .s061__cta-arrow {
    transform: translateX(3px);
}

@media (max-width: 640px) {
    .s061__title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
    .s061__meta {
        font-size: 0.625rem;
        letter-spacing: 0.2em;
    }
    .s061__lede {
        font-size: 1rem;
    }
}


/* ---------- S-062: Blog Post Grid -------------------------------------- */

.s062 {
    padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
    background-color: #FBF7EE;
    font-family: var(--font-body);
}

.s062__inner {
    width: min(92%, 1200px);
    margin: 0 auto;
}

.s062__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 2.5vw, 36px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.s062__card {
    display: flex;
    margin: 0;
    padding: 0;
}

.s062__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-gilt-end) 18%, var(--color-neutral-200));
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-spring);
}

.s062__link:hover,
.s062__link:focus-visible {
    border-color: var(--color-gilt-end);
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -22px rgba(4, 30, 66, 0.3);
    outline: none;
}

.s062__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Cover plate - typographic, no stock imagery */
.s062__cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-secondary);
    background-image:
        linear-gradient(135deg,
            var(--color-secondary) 0%,
            var(--color-secondary-light) 55%,
            var(--color-secondary-lighter) 100%);
}

/* Per-category accent tint on cover corner */
.s062__card--study .s062__cover {
    background-image:
        linear-gradient(135deg, var(--color-secondary) 0%, #1a3d6e 60%, #2a5590 100%);
}

.s062__card--life .s062__cover {
    background-image:
        linear-gradient(135deg, #1f2937 0%, #374151 55%, #4b5563 100%);
}

.s062__card--rentals .s062__cover {
    background-image:
        linear-gradient(135deg, #0A766C 0%, #0D9488 55%, #14B8A6 100%);
}

.s062__card--news .s062__cover {
    background-image:
        linear-gradient(135deg, #6b2c1f 0%, #8b3c2b 55%, #a8574a 100%);
}

.s062__cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 12px,
            rgba(255, 255, 255, 0.015) 12px,
            rgba(255, 255, 255, 0.015) 13px
        );
    pointer-events: none;
}

.s062__cover-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(5rem, 12vw, 8rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.02em;
    transition: transform var(--duration-normal) var(--ease-spring);
}

.s062__link:hover .s062__cover-initial,
.s062__link:focus-visible .s062__cover-initial {
    transform: translate(-50%, -50%) scale(1.04);
}

.s062__cover-rule {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    height: 1px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.7) 20%,
        rgba(201, 169, 97, 0.9) 50%,
        rgba(201, 169, 97, 0.7) 80%,
        transparent 100%);
}

.s062__cover-mark {
    position: absolute;
    top: 16px;
    left: 24px;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.8);
}

.s062__cover-issue {
    position: absolute;
    top: 16px;
    right: 24px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(201, 169, 97, 0.95);
}

/* Card body */
.s062__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
}

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

.s062__tag-rule {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #b8342a;
    flex-shrink: 0;
}

.s062__tag-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b8342a;
}

.s062__card--rentals .s062__tag-rule,
.s062__card--rentals .s062__tag-label { color: var(--color-accent-dark); }
.s062__card--rentals .s062__tag-rule { background-color: var(--color-accent-dark); }

.s062__card--life .s062__tag-rule,
.s062__card--life .s062__tag-label { color: var(--color-secondary); }
.s062__card--life .s062__tag-rule { background-color: var(--color-secondary); }

.s062__card--study .s062__tag-rule,
.s062__card--study .s062__tag-label { color: var(--color-gilt-end); }
.s062__card--study .s062__tag-rule { background-color: var(--color-gilt-end); }

.s062__title {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    font-weight: 500;
    font-style: italic;
    color: var(--color-secondary);
    letter-spacing: -0.005em;
    transition: color var(--duration-fast) var(--ease-out);
    /* clamp to 3 lines for visual rhythm */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s062__link:hover .s062__title,
.s062__link:focus-visible .s062__title {
    color: var(--color-accent-dark);
}

.s062__excerpt {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-neutral-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s062__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--color-neutral-200);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
}

.s062__author {
    font-weight: 600;
    color: var(--color-secondary);
}

.s062__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-neutral-400);
    flex-shrink: 0;
}

.s062__read {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 960px) {
    .s062__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .s062__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .s062__title {
        font-size: 1.3125rem;
    }
    .s062__cover-initial {
        font-size: 5.5rem;
    }
}


/* ---------- S-063: Blog Category Filter Bar ---------------------------- */

.s063 {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 14px 0;
    background-color: #FBF7EE;
    border-top: 1px solid color-mix(in srgb, var(--color-gilt-end) 18%, var(--color-neutral-200));
    border-bottom: 1px solid color-mix(in srgb, var(--color-gilt-end) 18%, var(--color-neutral-200));
    font-family: var(--font-body);
    transition: background-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                padding var(--duration-normal) var(--ease-out);
}

.s063--stuck {
    background-color: rgba(251, 247, 238, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px -8px rgba(4, 30, 66, 0.1);
    padding: 10px 0;
}

.s063__sentinel {
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.s063__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(92%, 1200px);
    margin: 0 auto;
}

.s063__eyebrow {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s063__scroller {
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

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

.s063__list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    white-space: nowrap;
}

.s063__item {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.s063__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-pill);
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s063__chip:hover,
.s063__chip:focus-visible {
    border-color: var(--color-gilt-end);
    color: var(--color-secondary);
    transform: translateY(-1px);
    outline: none;
}

.s063__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s063__chip--active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s063__chip--active:hover,
.s063__chip--active:focus-visible {
    background-color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    color: var(--color-white);
}

.s063__chip-label {
    font-family: var(--font-body);
}

.s063__chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-pill);
}

.s063__chip--active .s063__chip-count {
    color: var(--color-secondary);
    background-color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
    .s063__inner {
        gap: 12px;
    }
    .s063__eyebrow {
        display: none;
    }
    .s063__chip {
        padding: 8px 14px;
    }
}


/* ---------- S-064: Blog Sidebar ---------------------------------------- */

.s064 {
    padding: 0;
    font-family: var(--font-body);
}

.s064__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 40px);
    width: 100%;
}

.s064__block {
    position: relative;
    padding: clamp(20px, 2.2vw, 28px);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}

.s064__block--news {
    background-color: #FBF7EE;
    border-color: color-mix(in srgb, var(--color-gilt-end) 22%, var(--color-neutral-200));
}

.s064__block--buyback {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.s064__block-rule {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 20%,
        var(--color-gilt-end) 50%,
        var(--color-gilt-start) 80%,
        transparent 100%);
    opacity: 0.85;
}

.s064__block--buyback .s064__block-rule {
    background-image: linear-gradient(90deg,
        transparent 0%,
        var(--color-gilt-start) 20%,
        var(--color-gilt-start) 50%,
        var(--color-gilt-start) 80%,
        transparent 100%);
    opacity: 1;
}

.s064__eyebrow {
    margin: 8px 0 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s064__block--buyback .s064__eyebrow {
    color: var(--color-gilt-start);
}

.s064__eyebrow--accent {
    color: var(--color-gilt-start);
}

.s064__block-heading {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.4375rem);
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-secondary);
    letter-spacing: -0.005em;
}

.s064__block--buyback .s064__block-heading {
    color: var(--color-white);
}

.s064__block-heading em {
    font-style: italic;
    color: var(--color-accent-dark);
}

.s064__block--buyback .s064__block-heading em {
    color: var(--color-gilt-start);
}

.s064__block-body {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-neutral-700);
}

.s064__block--buyback .s064__block-body {
    color: rgba(255, 255, 255, 0.82);
}

/* Newsletter */
.s064__news-form {
    margin: 0;
}

.s064__news-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s064__news-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-secondary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s064__news-input::placeholder {
    color: var(--color-neutral-500);
    font-style: italic;
}

.s064__news-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}

.s064__news-form--error .s064__news-input {
    border-color: var(--color-error);
}

.s064__news-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s064__news-submit:hover,
.s064__news-submit:focus-visible {
    background-color: var(--color-secondary-light);
    transform: translateY(-1px);
    outline: none;
}

.s064__news-submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s064__news-arrow {
    transition: transform var(--duration-fast) var(--ease-out);
}

.s064__news-submit:hover .s064__news-arrow,
.s064__news-submit:focus-visible .s064__news-arrow {
    transform: translateX(3px);
}

.s064__news-mini {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.s064__news-ok {
    margin: 0;
    padding: 12px 14px;
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

/* Popular posts list */
.s064__pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s064__pop-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-neutral-100);
}

.s064__pop-item:last-child {
    border-bottom: 0;
}

.s064__pop-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out);
}

.s064__pop-link:hover,
.s064__pop-link:focus-visible {
    outline: none;
    transform: translateX(2px);
}

.s064__pop-link:hover .s064__pop-title,
.s064__pop-link:focus-visible .s064__pop-title {
    color: var(--color-accent-dark);
}

.s064__pop-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-gilt-end);
    font-variant-numeric: tabular-nums;
}

.s064__pop-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s064__pop-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--color-secondary);
    transition: color var(--duration-fast) var(--ease-out);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s064__pop-meta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

/* Category list */
.s064__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s064__cat-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-neutral-100);
}

.s064__cat-item:last-child {
    border-bottom: 0;
}

.s064__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color var(--duration-fast) var(--ease-out),
                padding-left var(--duration-fast) var(--ease-out);
}

.s064__cat-link::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    margin-right: 0;
    background-color: var(--color-gilt-end);
    transition: width var(--duration-fast) var(--ease-out),
                margin-right var(--duration-fast) var(--ease-out);
}

.s064__cat-link:hover,
.s064__cat-link:focus-visible {
    outline: none;
    color: var(--color-accent-dark);
}

.s064__cat-link:hover::before,
.s064__cat-link:focus-visible::before {
    width: 18px;
    margin-right: 10px;
}

.s064__cat-label {
    flex-grow: 1;
}

.s064__cat-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-neutral-500);
    letter-spacing: 0.05em;
}

/* Buyback CTA */
.s064__bb-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    background-color: var(--color-gilt-start);
    color: var(--color-secondary);
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s064__bb-cta:hover,
.s064__bb-cta:focus-visible {
    background-color: #d9bc75;
    color: var(--color-secondary);
    transform: translateY(-1px);
    outline: none;
}

.s064__bb-cta:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 3px;
}

.s064__bb-arrow {
    transition: transform var(--duration-fast) var(--ease-out);
}

.s064__bb-cta:hover .s064__bb-arrow,
.s064__bb-cta:focus-visible .s064__bb-arrow {
    transform: translateX(3px);
}

.s064__bb-trust {
    margin: 12px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* Sidebar as layout peer: when placed inside a two-column parent, the
   parent sets the column. On mobile the parent stacks and the sidebar
   reads after main content. These rules just ensure the sidebar block
   itself never overflows and spacing is correct. */
@media (max-width: 900px) {
    .s064__inner {
        max-width: 100%;
    }
}


/* =====================================================================
   WAVE 12 - Blog Single Post (S-065..S-070)
   Editorial single-post reading surface. Builds on S-058 body typography
   and S-062 card grammar (typographic cover, gilt rules, Cormorant italic).
   ===================================================================== */

/* S-065 Blog Single Post Hero ---------------------------------------- */

.s065 {
    padding: clamp(32px, 4vw, 56px) 20px clamp(36px, 4vw, 56px);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s065__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.s065__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 900px) {
    .s065__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 56px;
    }
}

.s065__meta {
    order: 2;
}

@media (min-width: 900px) {
    .s065__meta {
        order: 1;
    }
}

.s065__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 6px 2px;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s065__chip-rule {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    border-radius: 1px;
}

.s065__chip:hover,
.s065__chip:focus-visible {
    color: var(--color-accent-dark);
    outline: none;
}

.s065__chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.s065__title {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.s065__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-neutral-700);
}

.s065__author {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--color-secondary);
    text-decoration: none;
    min-height: 44px;
    padding: 8px 0;
    transition: color var(--duration-fast) var(--ease-out);
}

.s065__author:hover,
.s065__author:focus-visible {
    color: var(--color-accent-dark);
    outline: none;
}

.s065__author:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.s065__author-name {
    font-weight: 600;
}

.s065__author-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-neutral-600);
}

.s065__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-neutral-400);
}

.s065__date,
.s065__read {
    font-size: 0.9375rem;
    color: var(--color-neutral-700);
}

.s065__updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-neutral-600);
}

.s065__updated time {
    font-weight: 600;
    color: var(--color-neutral-700);
}

.s065__updated-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-success);
}

.s065__cover {
    position: relative;
    order: 1;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 420px;
    justify-self: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 45%),
        linear-gradient(145deg, var(--color-secondary) 0%, var(--color-secondary-light) 60%, var(--color-secondary-lighter) 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(4, 30, 66, 0.35);
    display: grid;
    grid-template-rows: 1fr auto auto auto;
    padding: 32px 28px;
    color: var(--color-white);
}

@media (min-width: 900px) {
    .s065__cover {
        order: 2;
        max-width: 100%;
        aspect-ratio: 3 / 4;
    }
}

.s065--study .s065__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 45%),
        linear-gradient(145deg, var(--color-secondary) 0%, var(--color-primary-dark) 70%, var(--color-primary) 100%);
}

.s065--rentals .s065__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 45%),
        linear-gradient(145deg, var(--color-accent-dark) 0%, var(--color-accent) 70%, var(--color-accent-light) 100%);
}

.s065--news .s065__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 45%),
        linear-gradient(145deg, #5A3A1E 0%, #8C7444 60%, var(--color-gilt-start) 100%);
}

.s065--life .s065__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.32) 0%, transparent 45%),
        linear-gradient(145deg, var(--color-secondary) 0%, #3A2A5F 55%, #6A4B8E 100%);
}

.s065__cover-initial {
    align-self: end;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(9rem, 22vw, 14rem);
    line-height: 0.88;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.2);
}

.s065__cover-rule {
    display: block;
    width: 56px;
    height: 1px;
    margin: 20px 0 14px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s065__cover-mark {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.82);
}

.s065__cover-issue {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.62);
}

.s065__toc {
    margin: 40px 0 0;
    padding: 24px 28px 22px;
    background-color: #FBF7EE;
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: var(--radius-md);
    position: relative;
}

.s065__toc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    transform: translateY(-1px);
}

.s065__toc-label {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s065__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 24px;
}

@media (min-width: 700px) {
    .s065__toc-list {
        grid-template-columns: 1fr 1fr;
    }
}

.s065__toc-item {
    margin: 0;
}

.s065__toc-link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s065__toc-link:hover,
.s065__toc-link:focus-visible {
    color: var(--color-accent-dark);
    outline: none;
}

.s065__toc-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.s065__toc-num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gilt-end);
    min-width: 24px;
}

.s065__toc-text {
    flex: 1;
}

/* S-066 Blog Article Body ------------------------------------------- */

.s066 {
    padding: clamp(40px, 5vw, 72px) 20px clamp(48px, 6vw, 88px);
    background-color: var(--color-white);
}

.s066__inner {
    max-width: 680px;
    margin: 0 auto;
}

.s066__article {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-neutral-800);
}

@media (min-width: 700px) {
    .s066__article {
        font-size: 1.125rem;
    }
}

.s066__p {
    margin: 0 0 22px;
}

.s066__p--lede {
    margin-bottom: 28px;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--color-neutral-900);
}

@media (min-width: 700px) {
    .s066__p--lede {
        font-size: 1.3125rem;
        line-height: 1.65;
    }
}

/* Drop cap on the lede, first letter only. Serif, gilt tint. */
.s066__p--lede::first-letter {
    font-family: var(--font-heading);
    font-weight: 500;
    float: left;
    font-size: 4.25rem;
    line-height: 0.9;
    margin: 6px 10px 0 0;
    color: var(--color-gilt-end);
}

.s066__h2 {
    margin: 40px 0 18px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-secondary);
    scroll-margin-top: calc(var(--header-height) + 40px);
}

.s066__h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s066__h3 {
    margin: 28px 0 12px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--color-secondary);
}

.s066__ol {
    counter-reset: s066-ol;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.s066__ol-item {
    counter-increment: s066-ol;
    position: relative;
    margin: 0 0 14px;
    padding-left: 44px;
    min-height: 32px;
}

.s066__ol-item::before {
    content: counter(s066-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.0625rem;
    color: var(--color-gilt-end);
    width: 32px;
    text-align: right;
    letter-spacing: 0.02em;
}

.s066__ul {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.s066__ul-item {
    position: relative;
    margin: 0 0 10px;
    padding-left: 22px;
}

.s066__ul-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-gilt-end);
}

.s066__figure {
    margin: 32px 0;
}

.s066__figure-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background:
        linear-gradient(145deg, var(--color-secondary) 0%, var(--color-secondary-light) 70%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 22px;
    color: var(--color-white);
}

.s066__figure-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.2), transparent 50%);
    pointer-events: none;
}

.s066__figure-mark {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.82);
    margin-right: 16px;
    position: relative;
}

.s066__figure-caption-mini {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.s066__figcaption {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-neutral-600);
    padding-left: 14px;
    border-left: 2px solid var(--color-neutral-200);
}

.s066__pullquote {
    position: relative;
    margin: 40px 0;
    padding: 22px 18px;
    text-align: center;
}

@media (min-width: 700px) {
    .s066__pullquote {
        margin: 48px -36px;
        padding: 28px 48px;
    }
}

.s066__pullquote-bracket {
    position: absolute;
    top: 0;
    width: 48px;
    height: 100%;
    pointer-events: none;
}

.s066__pullquote-bracket::before,
.s066__pullquote-bracket::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s066__pullquote-bracket--left {
    left: 0;
}

.s066__pullquote-bracket--left::before {
    top: 0;
    left: 0;
    width: 24px;
    height: 1px;
}

.s066__pullquote-bracket--left::after {
    top: 0;
    left: 0;
    width: 1px;
    height: 36px;
}

.s066__pullquote-bracket--right {
    right: 0;
}

.s066__pullquote-bracket--right::before {
    bottom: 0;
    right: 0;
    width: 24px;
    height: 1px;
}

.s066__pullquote-bracket--right::after {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 36px;
}

.s066__pullquote-text {
    margin: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-secondary);
}

.s066__pullquote-cite {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s066__citation {
    margin: 32px 0;
    padding: 20px 22px 18px;
    background-color: rgba(13, 148, 136, 0.05);
    border-left: 3px solid var(--color-accent-dark);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.s066__citation-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.s066__citation-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background-color: var(--color-accent-dark);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

.s066__citation-body {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-neutral-800);
}

.s066__citation-source {
    margin: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
}

.s066__inline-cta {
    margin: 40px 0;
    padding: 28px 28px 26px;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.s066__inline-cta--buyback {
    background:
        linear-gradient(145deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
    color: var(--color-white);
}

.s066__inline-cta--buyback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s066__inline-cta--newsletter {
    background-color: #FBF7EE;
    border: 1px solid rgba(201, 169, 97, 0.35);
    color: var(--color-secondary);
}

.s066__inline-cta-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-start);
}

.s066__inline-cta--newsletter .s066__inline-cta-eyebrow {
    color: var(--color-gilt-end);
}

.s066__inline-cta-heading {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.375rem, 2.5vw, 1.625rem);
    line-height: 1.2;
    color: inherit;
}

.s066__inline-cta-body {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: inherit;
    opacity: 0.92;
}

.s066__inline-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s066__inline-cta--newsletter .s066__inline-cta-btn {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.s066__inline-cta-btn:hover,
.s066__inline-cta-btn:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.s066__inline-cta-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s066__inline-cta-arrow {
    position: relative;
    width: 18px;
    height: 1px;
    background-color: currentColor;
    transition: width var(--duration-fast) var(--ease-out);
}

.s066__inline-cta-arrow::before {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.s066__inline-cta-btn:hover .s066__inline-cta-arrow,
.s066__inline-cta-btn:focus-visible .s066__inline-cta-arrow {
    width: 26px;
}

/* S-066 - safeguard internal links for long-form reading flow */
.s066__article a:not(.s066__inline-cta-btn) {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--ease-out);
}

.s066__article a:hover:not(.s066__inline-cta-btn),
.s066__article a:focus-visible:not(.s066__inline-cta-btn) {
    color: var(--color-secondary);
}

/* S-067 Author Bio Card --------------------------------------------- */

.s067 {
    padding: clamp(32px, 4vw, 56px) 20px clamp(32px, 4vw, 56px);
    background-color: var(--color-white);
}

.s067__inner {
    max-width: 760px;
    margin: 0 auto;
}

.s067__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "avatar meta"
        "bio bio"
        "links links";
    gap: 20px 24px;
    padding: 28px 28px 24px;
    background-color: #FBF7EE;
    border: 1px solid rgba(201, 169, 97, 0.28);
    border-radius: var(--radius-md);
    position: relative;
}

.s067__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
    transform: translateY(-1px);
}

@media (min-width: 640px) {
    .s067__card {
        grid-template-areas:
            "avatar meta"
            "avatar bio"
            "links links";
        gap: 6px 28px;
    }
}

.s067__avatar {
    grid-area: avatar;
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), transparent 55%),
        linear-gradient(145deg, var(--color-gilt-start) 0%, var(--color-gilt-end) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    box-shadow: 0 12px 24px -12px rgba(140, 116, 68, 0.4);
}

.s067__avatar-initial {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 2.75rem;
    line-height: 1;
    margin-top: -2px;
}

.s067__avatar-ring {
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(201, 169, 97, 0.45);
    border-radius: 50%;
    pointer-events: none;
}

.s067__meta {
    grid-area: meta;
    align-self: center;
}

.s067__eyebrow {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s067__name {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--color-secondary);
}

.s067__title {
    margin: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-neutral-600);
}

.s067__bio {
    grid-area: bio;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-neutral-800);
}

.s067__links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid rgba(201, 169, 97, 0.28);
}

.s067__all-posts,
.s067__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s067__all-posts:hover,
.s067__all-posts:focus-visible,
.s067__linkedin:hover,
.s067__linkedin:focus-visible {
    color: var(--color-accent-dark);
    outline: none;
}

.s067__all-posts:focus-visible,
.s067__linkedin:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.s067__all-posts-arrow {
    position: relative;
    width: 14px;
    height: 1px;
    background-color: currentColor;
    transition: width var(--duration-fast) var(--ease-out);
}

.s067__all-posts-arrow::before {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.s067__all-posts:hover .s067__all-posts-arrow,
.s067__all-posts:focus-visible .s067__all-posts-arrow {
    width: 22px;
}

.s067__linkedin-icon {
    color: var(--color-neutral-600);
    transition: color var(--duration-fast) var(--ease-out);
}

.s067__linkedin:hover .s067__linkedin-icon,
.s067__linkedin:focus-visible .s067__linkedin-icon {
    color: var(--color-accent-dark);
}

/* S-068 Related Posts Carousel -------------------------------------- */

.s068 {
    padding: clamp(40px, 5vw, 72px) 20px clamp(32px, 4vw, 56px);
    background-color: var(--color-neutral-50);
    position: relative;
}

.s068__inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.s068__head {
    margin: 0 0 32px;
    text-align: left;
}

.s068__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s068__heading {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--color-secondary);
}

.s068__rule {
    display: block;
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

/* Desktop 3-up grid */
.s068__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 700px) {
    .s068__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 1000px) {
    .s068__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }
}

/* Mobile: horizontal swipeable rail */
@media (max-width: 699px) {
    .s068__rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 40px 20px 0;
        margin: 0 -20px;
        padding-left: 20px;
        scrollbar-width: none;
    }

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

    .s068__card {
        scroll-snap-align: start;
    }

    /* Right-edge fade hint removed on mobile; the partial-next-card peek
       plus the "Swipe to browse" label already signal horizontal scroll. */
}

.s068__card {
    margin: 0;
    list-style: none;
}

.s068__link {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.s068__link:hover,
.s068__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -18px rgba(4, 30, 66, 0.2);
    border-color: rgba(201, 169, 97, 0.4);
    outline: none;
}

.s068__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s068__cover {
    position: relative;
    aspect-ratio: 5 / 3;
    display: grid;
    grid-template-rows: 1fr auto auto auto;
    padding: 20px 22px 18px;
    color: var(--color-white);
    overflow: hidden;
}

.s068__card--study .s068__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.3), transparent 40%),
        linear-gradient(145deg, var(--color-secondary), var(--color-primary-dark) 70%, var(--color-primary));
}

.s068__card--rentals .s068__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25), transparent 40%),
        linear-gradient(145deg, var(--color-accent-dark), var(--color-accent) 70%, var(--color-accent-light));
}

.s068__card--news .s068__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25), transparent 40%),
        linear-gradient(145deg, #5A3A1E, var(--color-gilt-end) 60%, var(--color-gilt-start));
}

.s068__card--life .s068__cover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25), transparent 40%),
        linear-gradient(145deg, var(--color-secondary), #3A2A5F 55%, #6A4B8E);
}

.s068__cover-initial {
    align-self: end;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(5rem, 10vw, 7rem);
    line-height: 0.88;
    color: rgba(255, 255, 255, 0.95);
}

.s068__cover-rule {
    display: block;
    width: 36px;
    height: 1px;
    margin: 12px 0 8px;
    background: linear-gradient(90deg, var(--color-gilt-start), var(--color-gilt-end));
}

.s068__cover-mark {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.8);
}

.s068__cover-issue {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.s068__body {
    display: block;
    padding: 20px 22px 22px;
}

.s068__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.s068__tag-rule {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 1px;
}

.s068__card--rentals .s068__tag-rule {
    background-color: var(--color-accent-dark);
}

.s068__card--news .s068__tag-rule {
    background-color: var(--color-gilt-end);
}

.s068__card--life .s068__tag-rule {
    background-color: #6A4B8E;
}

.s068__tag-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
}

.s068__title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.22;
    color: var(--color-secondary);
}

.s068__excerpt {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-neutral-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s068__byline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
}

.s068__author {
    font-weight: 600;
    color: var(--color-neutral-700);
}

.s068__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-neutral-400);
}

.s068__swipe-hint {
    display: none;
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    text-align: right;
}

@media (max-width: 699px) {
    .s068__swipe-hint {
        display: block;
    }
}

/* S-069 Share to Social Strip --------------------------------------- */

.s069 {
    padding: clamp(24px, 3vw, 40px) 20px clamp(24px, 3vw, 40px);
    background-color: var(--color-white);
}

.s069__inner {
    max-width: 760px;
    margin: 0 auto;
}

.s069__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.s069__label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    width: 100%;
    justify-content: center;
}

.s069__label-rule {
    flex: 1;
    max-width: 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.5), transparent);
}

.s069__buttons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}

.s069__btn-wrap {
    margin: 0;
}

.s069__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s069__btn:hover,
.s069__btn:focus-visible {
    transform: translateY(-1px);
    color: var(--color-secondary);
    border-color: var(--color-gilt-end);
    outline: none;
}

.s069__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.s069__btn--native {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.s069__btn--native:hover,
.s069__btn--native:focus-visible {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
    border-color: var(--color-secondary-light);
}

.s069__btn--x .s069__btn-icon,
.s069__btn--linkedin .s069__btn-icon,
.s069__btn--copy .s069__btn-icon {
    color: var(--color-neutral-700);
    transition: color var(--duration-fast) var(--ease-out);
}

.s069__btn:hover .s069__btn-icon,
.s069__btn:focus-visible .s069__btn-icon {
    color: var(--color-gilt-end);
}

.s069__btn--native .s069__btn-icon {
    color: var(--color-white);
}

.s069__btn--native:hover .s069__btn-icon,
.s069__btn--native:focus-visible .s069__btn-icon {
    color: var(--color-white);
}

.s069__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.s069__btn-label {
    display: inline-block;
}

.s069__toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-success);
    background-color: rgba(22, 163, 74, 0.08);
    border-radius: var(--radius-pill);
}

.s069__toast-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-success);
}

/* S-070 Previous / Next Post Navigation ----------------------------- */

.s070 {
    padding: clamp(32px, 4vw, 56px) 20px clamp(48px, 6vw, 80px);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-neutral-200);
}

.s070__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.s070__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    position: relative;
}

@media (min-width: 800px) {
    .s070__nav {
        grid-template-columns: 1fr 1px 1fr;
        gap: 0;
    }
}

.s070__divider {
    display: none;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--color-neutral-200) 30%, var(--color-neutral-200) 70%, transparent);
}

@media (min-width: 800px) {
    .s070__divider {
        display: block;
    }
}

.s070__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    min-height: 120px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

@media (min-width: 800px) {
    .s070__card {
        border: 0;
        border-radius: 0;
        padding: 8px 28px;
        min-height: 140px;
    }
}

.s070__card--empty {
    pointer-events: none;
    opacity: 0;
}

.s070__card--next {
    text-align: right;
    align-items: flex-end;
}

.s070__card:hover,
.s070__card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(201, 169, 97, 0.5);
    outline: none;
}

@media (min-width: 800px) {
    .s070__card:hover,
    .s070__card:focus-visible {
        transform: none;
        border-color: transparent;
    }
}

.s070__card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

.s070__direction {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gilt-end);
}

.s070__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-gilt-end);
    transition: transform var(--duration-fast) var(--ease-out);
}

.s070__card:hover .s070__arrow--prev,
.s070__card:focus-visible .s070__arrow--prev {
    transform: translateX(-4px);
}

.s070__card:hover .s070__arrow--next,
.s070__card:focus-visible .s070__arrow--next {
    transform: translateX(4px);
}

.s070__category {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s070__title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.2;
    color: var(--color-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--duration-fast) var(--ease-out);
}

.s070__card:hover .s070__title,
.s070__card:focus-visible .s070__title {
    color: var(--color-accent-dark);
}

.s070__footline {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

/* Mobile - tighten title to single line with ellipsis on very small widths */
@media (max-width: 420px) {
    .s070__title {
        -webkit-line-clamp: 2;
        font-size: 1.125rem;
    }
}


/* ==========================================================================
   DEMO LAYOUT - Two-column compositions for inside-page demo templates.
   Scoped to .ft-demo-layout so section internals (which ship at full
   container width by default) collapse to their column width when composed
   side-by-side by ms_render_demo_layout().
   ========================================================================== */

.ft-demo-layout {
    width: min(94%, 1440px);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(24px, 3vw, 40px) 0;
    align-items: start;
}

.ft-demo-layout--sidebar-left {
    grid-template-columns: minmax(200px, 240px) 1fr;
}

.ft-demo-layout--sidebar-right {
    grid-template-columns: 1fr minmax(280px, 380px);
}

/* Contact: 60/40 split (form main, details sidebar). */
.ft-demo-page--contact .ft-demo-layout--sidebar-right {
    grid-template-columns: 3fr 2fr;
}

.ft-demo-layout__sidebar,
.ft-demo-layout__main {
    min-width: 0;
}

.ft-demo-layout__main {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
}

.ft-demo-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 32px);
    position: sticky;
    top: calc(var(--header-height) + 16px);
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

/* Sections placed inside a column collapse their own full-container widths
   and drop their outer vertical padding (handled by the grid gap instead). */
.ft-demo-layout__sidebar > section,
.ft-demo-layout__main > section {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background-color: transparent;
}

.ft-demo-layout__sidebar [class$="__inner"],
.ft-demo-layout__main [class$="__inner"] {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Mobile: stack columns and drop the sticky sidebar. */
@media (max-width: 900px) {
    .ft-demo-layout--sidebar-left,
    .ft-demo-layout--sidebar-right,
    .ft-demo-page--contact .ft-demo-layout--sidebar-right {
        grid-template-columns: 1fr;
    }
    .ft-demo-layout__sidebar {
        position: static;
    }
}


/* ==========================================================================
   Account sub-pages - shared visual vocabulary across S-071..S-074.
   ========================================================================== */

.s071, .s072, .s073, .s074 {
    padding: clamp(24px, 3vw, 40px) 0;
    background-color: var(--color-white);
}

.s071__inner, .s072__inner, .s073__inner, .s074__inner {
    width: 100%;
}

.s071__head, .s072__head, .s073__head, .s074__head {
    margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.s071__eyebrow, .s072__eyebrow, .s073__eyebrow, .s074__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    max-width: none;
}

.s071__title, .s072__title, .s073__title, .s074__title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-secondary);
}

.s071__title em, .s072__title em, .s073__title em, .s074__title em {
    font-style: italic;
    color: var(--color-primary);
}

.s071__lede, .s072__lede, .s073__lede, .s074__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-neutral-600);
    max-width: 52ch;
    line-height: 1.5;
}

/* ==========================================================================
   S-071 Orders history
   ========================================================================== */

.s071__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-neutral-200);
}

.s071__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-height: 36px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.s071__filter:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.s071__filter.is-active {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.s071__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border-radius: var(--radius-pill);
}

.s071__filter.is-active .s071__filter-count {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.s071__table {
    display: grid;
    grid-template-rows: auto;
    gap: 0;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.s071__thead {
    display: grid;
    grid-template-columns: 110px 130px 1fr 90px 110px 80px;
    gap: 16px;
    padding: 12px 18px;
    background-color: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.s071__th {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

.s071__th--total {
    text-align: right;
}

.s071__th--action {
    text-align: right;
}

.s071__row {
    display: grid;
    grid-template-columns: 110px 130px 1fr 90px 110px 80px;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-neutral-200);
    align-items: center;
}

.s071__row:last-child {
    border-bottom: 0;
}

.s071__row:hover {
    background-color: var(--color-neutral-50);
}

.s071__cell {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    min-width: 0;
    overflow-wrap: anywhere;
}

.s071__cell-mono {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
}

.s071__cell-date {
    color: var(--color-neutral-600);
}

.s071__cell--total {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-secondary);
}

.s071__cell--action {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.s071__cancel {
    background: none;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s071__cancel:hover {
    border-color: #C03030;
    color: #C03030;
    background-color: #FCEEEE;
}

.s071__cancel-window {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--color-neutral-600);
    letter-spacing: 0.02em;
}

.s071__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.s071__status--processing { background-color: #FFF7E6; color: #B45309; }
.s071__status--shipped { background-color: #E6F4FA; color: #0B5E7A; }
.s071__status--delivered { background-color: #E8F5EE; color: #116A3D; }
.s071__status--returned { background-color: var(--color-neutral-100); color: var(--color-neutral-600); }

.s071__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.s071__action:hover {
    color: var(--color-primary-dark);
}

@media (max-width: 820px) {
    .s071__thead { display: none; }
    .s071__row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 16px 18px;
    }
    .s071__cell--total, .s071__cell--action {
        text-align: left;
    }
}

/* ==========================================================================
   S-072 Addresses
   ========================================================================== */

.s072__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.s072__card {
    padding: 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s072__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.s072__card-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    max-width: none;
}

.s072__card-default {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    background-color: var(--color-accent-lightest);
    color: var(--color-accent-dark);
    border-radius: var(--radius-pill);
}

.s072__card-body {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-neutral-800);
    flex: 1;
}

.s072__card-line {
    margin: 0 0 2px;
    max-width: none;
}

.s072__card-line--name {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.s072__card-phone {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-neutral-200);
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    max-width: none;
}

.s072__card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-neutral-200);
}

.s072__card-link {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.s072__card-link:hover {
    border-bottom-color: currentColor;
}

.s072__card-link--destructive {
    color: #B91C1C;
    margin-left: auto;
}

.s072__add {
    padding: 20px;
    background-color: var(--color-white);
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    min-height: 180px;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s072__add:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background-color: var(--color-neutral-50);
}

.s072__add-plus {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary);
}

/* ==========================================================================
   S-073 Payment methods
   ========================================================================== */

.s073__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s073__item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
}

.s073__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--color-white);
}

.s073__brand-name {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.s073__number {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-neutral-600);
    font-variant-numeric: tabular-nums;
    max-width: none;
}

.s073__number-dots {
    letter-spacing: 2px;
}

.s073__number-last4 {
    margin-left: 6px;
    font-weight: 700;
    color: var(--color-secondary);
}

.s073__meta {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    max-width: none;
}

.s073__meta-key {
    font-weight: 600;
    color: var(--color-neutral-500);
    margin-right: 4px;
}

.s073__meta-sep {
    margin: 0 6px;
}

.s073__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.s073__default {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    background-color: var(--color-accent-lightest);
    color: var(--color-accent-dark);
    border-radius: var(--radius-pill);
}

.s073__link {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.s073__link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s073__link--destructive {
    color: #B91C1C;
}

.s073__link--disabled {
    color: var(--color-neutral-400);
    cursor: not-allowed;
    text-decoration: line-through;
}

.s073__trust--note {
    margin-top: 6px;
}

.s073__item--add {
    padding: 0;
    border: 0;
    background: transparent;
    grid-template-columns: 1fr;
}

.s073__add {
    width: 100%;
    padding: 16px 20px;
    background-color: var(--color-white);
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-neutral-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    min-height: 56px;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.s073__add:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background-color: var(--color-neutral-50);
}

.s073__add-plus {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.s073__trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 12px 16px;
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    max-width: none;
}

.s073__trust svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .s073__item {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .s073__brand {
        width: 80px;
    }
}

/* ==========================================================================
   S-074 Account details form
   ========================================================================== */

.s074__form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.s074__fieldset {
    padding: 20px;
    margin: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s074__legend {
    padding: 0 8px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.s074__row {
    display: grid;
    gap: 16px;
}

.s074__row--two {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
    .s074__row--two {
        grid-template-columns: 1fr;
    }
}

.s074__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s074__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.s074__label-opt {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    letter-spacing: 0.02em;
}

.s074__input {
    min-height: 44px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.s074__input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.s074__field-hint {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    max-width: none;
}

.s074__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.s074__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    min-height: 48px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.s074__submit:hover {
    background-color: var(--color-primary);
    transform: translateY(-1px);
}

.s074__danger {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #B91C1C;
    text-decoration: none;
}

.s074__danger:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}