@font-face {
    font-family: 'DejaVu Sans Condensed';
    src: url('../fonts/DejaVuSansCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: 'Cabin';
    src: url('../fonts/Cabin-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: 'Cabin';
    src: url('../fonts/Cabin-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: 'Cabin';
    src: url('../fonts/Cabin-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap
}

:root {
    --color-bg: #faf9f5;
    --color-surface: #fff;
    --color-surface-alt: #e9f0f0;
    --color-ink: #10191f;
    --color-ink-soft: #344149;
    --color-text-muted: #506069;
    --color-primary: #007679;
    --color-accent: #00a9ab;
    --color-line: #c7d1d1;
    --color-warning: #e7c78a;
    --color-deep: #10191f;
    --color-dark-panel: #17282e;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
    --space-8: 96px;
    --text-display: clamp(3rem, 6.7vw, 6.85rem);
    --text-h1: clamp(2.85rem, 5.8vw, 6.3rem);
    --text-h2: clamp(2.1rem, 4.2vw, 4.65rem);
    --text-h3: clamp(1.55rem, 2.6vw, 2.8rem);
    --text-body: 1.09rem;
    --text-small: .85rem;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow: 0 18px 50px rgba(5, 28, 32, .1);
    --transition: 240ms ease;
    --page: 1320px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 85px
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font: 400 var(--text-body)/1.6 'Cabin', sans-serif;
    -webkit-font-smoothing: antialiased
}

body.menu-open {
    overflow: hidden
}

a {
    color: inherit
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px
}

button {
    font: inherit;
    cursor: pointer
}

img {
    display: block;
    max-width: 100%
}

.container {
    width: min(calc(100% - 48px), var(--page));
    margin-inline: auto
}

.reading-bar {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-accent);
    pointer-events: none
}

.site-header {
    position: relative;
    z-index: 30;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line)
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 77px
}

.wordmark {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.05;
    max-width: 158px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px
}

.wordmark .mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: white;
    font-size: 14px;
    flex: none
}

.header-notice {
    font: 700 .64rem/1.2 'Cabin', sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
    border: 1px solid var(--color-ink);
    padding: 7px 9px
}

.header-divider {
    height: 24px;
    width: 1px;
    background: var(--color-line)
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px
}

.site-nav a {
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition)
}

.site-nav a:hover {
    color: var(--color-primary)
}

.menu-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    width: 45px;
    height: 45px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-ink);
    box-shadow: 0 6px currentColor, 0 -6px currentColor
}

.eyebrow,
.chapter-kicker,
.overline {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.eyebrow {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--color-primary)
}

.eyebrow:before {
    content: '';
    width: 24px;
    height: 2px;
    background: currentColor
}

.hero {
    padding: var(--space-6) 0 var(--space-7);
    background: var(--color-bg)
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--color-ink);
    padding-top: 12px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: 30px;
    padding: var(--space-6) 0 var(--space-4)
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0
}

.hero h1,
h2,
.chapter-title,
.display {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .99
}

.hero h1 {
    font-size: var(--text-h1);
    max-width: 850px;
    margin: 0
}

.hero h1 .highlight {
    color: var(--color-primary)
}

.hero-deck {
    padding-left: 24px;
    border-left: 3px solid var(--color-accent)
}

.hero-deck p {
    font-size: clamp(1.22rem, 1.9vw, 1.65rem);
    line-height: 1.36;
    font-weight: 500;
    margin-bottom: 14px
}

.hero-deck .story-note {
    color: var(--color-text-muted);
    font-size: .78rem;
    margin: 0
}

.hero-photo {
    margin: 0;
    position: relative
}

.photo-frame {
    overflow: hidden;
    background: linear-gradient(145deg, #d7e3e1, #889d9f);
    position: relative
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.photo-frame img[src] {
    font-size: 0;
    color: transparent
}

.hero-photo .photo-frame {
    aspect-ratio: 1.68/1
}

.photo-label {
    position: absolute;
    bottom: 16px;
    left: 18px;
    background: rgba(16, 25, 31, .82);
    color: #fff;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 7px 10px
}

.hero-photo figcaption,
.image-caption {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: 10px
}

.image-caption b {
    color: var(--color-ink)
}

.hero-statband {
    border-bottom: 1px solid var(--color-line);
    padding: 16px 0;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 700
}

.hero-statband .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    background: var(--color-accent);
    border-radius: 50%
}

.chapter {
    padding: var(--space-7) 0
}

.chapter-index {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    color: var(--color-primary)
}

.chapter-index .num {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    letter-spacing: -.08em;
    font-size: 2rem;
    line-height: 1
}

.chapter-index .chapter-kicker {
    color: var(--color-ink-soft)
}

.narrative-grid {
    display: grid;
    grid-template-columns: 3fr 6fr 3fr;
    gap: 28px
}

.narrative-grid .text-column {
    grid-column: 2
}

.narrative-grid .sidenote {
    grid-column: 3
}

.text-column {
    max-width: 740px
}

.text-column p,
.story-copy p {
    font-size: 1.15rem;
    line-height: 1.72;
    margin: 0 0 24px
}

.text-column p:first-of-type:first-letter {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    float: left;
    font-size: 4.5em;
    line-height: .75;
    margin-right: 10px;
    margin-top: 8px;
    color: var(--color-primary)
}

h2 {
    font-size: var(--text-h2);
    max-width: 950px;
    margin-bottom: 26px
}

h3 {
    font-size: var(--text-h3);
    margin-bottom: 20px
}

.sidenote {
    align-self: start;
    border-top: 3px solid var(--color-accent);
    padding: 15px 2px;
    font-size: .89rem;
    color: var(--color-text-muted)
}

.sidenote strong {
    color: var(--color-ink);
    display: block;
    margin-bottom: 8px
}

.image-pair {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
    align-items: start;
    margin-top: 32px
}

.figure {
    margin: 0
}

.figure .photo-frame {
    aspect-ratio: 1.4
}

.image-pair .figure:nth-child(2) .photo-frame {
    aspect-ratio: .91
}

.figure figcaption {
    font-size: .8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 11px
}

.figure figcaption strong {
    color: var(--color-ink)
}

.dark-chapter {
    background: var(--color-deep);
    color: white
}

.dark-chapter .chapter-index .chapter-kicker,
.dark-chapter .sidenote strong {
    color: #fff
}

.dark-chapter .sidenote {
    color: #c3d4d6
}

.dark-chapter .chapter-index {
    color: var(--color-accent)
}

.dark-chapter h2 {
    max-width: 1020px
}

.dark-chapter .story-copy {
    max-width: 700px
}

.dark-chapter .story-copy p {
    color: #e2e9e9
}

.story-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start
}

.story-split .figure .photo-frame {
    aspect-ratio: 4/5
}

.dark-chapter .figure figcaption {
    color: #afc2c4
}

.story-turn {
    padding-top: var(--space-6)
}

.resolution-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 40px;
    align-items: center
}

.resolution-grid .figure .photo-frame {
    aspect-ratio: 1.22
}

.story-turn .resolution-grid .figure .photo-frame {
    aspect-ratio: 16/9
}

.resolution-text {
    max-width: 560px
}

.resolution-text p {
    font-size: 1.15rem;
    line-height: 1.75
}

.resolution-pull {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: clamp(1.65rem, 3.4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.055em;
    border-top: 1px solid var(--color-line);
    padding-top: 24px;
    margin-top: 26px
}

.wedding {
    background: #e9f0f0
}

.wedding-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 42px;
    align-items: center
}

.wedding .figure .photo-frame {
    aspect-ratio: 4/5
}

.wedding-copy h2 {
    max-width: 580px
}

.wedding-copy p {
    max-width: 540px;
    font-size: 1.19rem;
    line-height: 1.7
}

.wedding-copy .pullsmall {
    border-left: 3px solid var(--color-primary);
    padding-left: 18px;
    font-weight: 700;
    color: var(--color-primary)
}

.reveal {
    padding: var(--space-8) 0;
    background: var(--color-surface)
}

.reveal-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 50px;
    align-items: center
}

.reveal .figure .photo-frame {
    aspect-ratio: 1.07;
    background: linear-gradient(145deg, #e9eded, #c6d3d3)
}

.reveal h2 {
    max-width: 640px
}

.reveal p {
    font-size: 1.16rem;
    line-height: 1.7
}

.fact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0
}

.fact-strip span {
    border: 1px solid var(--color-line);
    background: var(--color-bg);
    font-size: .8rem;
    font-weight: 700;
    padding: 9px 12px
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    padding: 16px 21px;
    min-height: 52px;
    font-size: .89rem;
    font-weight: 700;
    border: 1px solid var(--color-primary);
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition)
}

.cta:hover {
    background: var(--color-deep);
    border-color: var(--color-deep);
    box-shadow: var(--shadow);
    transform: translateY(-1px)
}

.cta .arrow {
    font-size: 1.4rem;
    line-height: 1
}

.price-note {
    font-size: .8rem !important;
    margin-top: 13px;
    color: var(--color-text-muted)
}

.product-head {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    margin-bottom: 34px
}

.product-head p {
    max-width: 500px;
    font-size: 1.04rem
}

.feature-panel {
    background: var(--color-surface-alt);
    padding: var(--space-5);
    border: 1px solid var(--color-line)
}

.mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px
}

.mode-toggle button,
.scenario-tabs button {
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    padding: 12px 16px;
    font-size: .85rem;
    font-weight: 700;
    transition: all var(--transition);
    min-height: 44px
}

.mode-toggle button[aria-pressed=true],
.scenario-tabs button[aria-selected=true] {
    background: var(--color-deep);
    color: #fff;
    border-color: var(--color-deep)
}

.mode-toggle button:hover,
.scenario-tabs button:hover {
    border-color: var(--color-primary)
}

.mode-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center
}

.mode-copy h3 {
    font-size: 2.25rem
}

.mode-visual {
    background: var(--color-deep);
    color: #fff;
    min-height: 220px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.signal-icon {
    font-size: 3.4rem;
    color: var(--color-accent);
    line-height: 1
}

.mode-visual .label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

.mode-visual b {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: 1.95rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    margin-top: 20px
}

.steps-row>div {
    background: var(--color-surface);
    padding: 25px 23px
}

.steps-row .step-number {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: 2rem;
    color: var(--color-primary);
    display: block
}

.steps-row h3 {
    font: 700 1.08rem/1.25 'Cabin';
    letter-spacing: 0
}

.steps-row p {
    font-size: .9rem;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.scenarios {
    background: var(--color-deep);
    color: #fff
}

.scenarios h2 {
    max-width: 800px
}

.scenario-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px 0
}

.scenario-tabs button {
    background: var(--color-dark-panel);
    color: #fff;
    border-color: #45565c
}

.scenario-tabs button[aria-selected=true] {
    background: var(--color-accent);
    color: var(--color-deep);
    border-color: var(--color-accent)
}

.scenario-detail {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    background: var(--color-dark-panel);
    padding: 36px;
    border: 1px solid #3d535a
}

.scenario-detail .scenario-letter {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 1;
    letter-spacing: -.08em;
    color: var(--color-accent)
}

.scenario-detail h3 {
    font-size: 3rem
}

.scenario-detail p {
    font-size: 1.09rem;
    color: #d7e3e3;
    max-width: 680px
}

.scenario-detail .scenario-tip {
    border-top: 1px solid #526469;
    padding-top: 18px;
    margin-top: 25px;
    font-size: .88rem;
    color: #b4ccce
}

.limits {
    background: #e9f0f0
}

.limits-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 50px
}

.limits-heading p {
    font-size: 1.06rem;
    max-width: 440px
}

.limit-list {
    display: grid;
    gap: 13px
}

.limit-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 17px;
    padding: 21px;
    background: var(--color-surface);
    border: 1px solid var(--color-line)
}

.limit-icon {
    background: var(--color-surface-alt);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 1.3rem
}

.limit-item h3 {
    font: 700 1rem/1.4 'Cabin';
    letter-spacing: 0;
    margin-bottom: 6px
}

.limit-item p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 0
}

.checklist {
    background: var(--color-surface)
}

.checklist-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 54px;
    align-items: start
}

.checklist-intro p {
    max-width: 440px;
    font-size: 1.13rem
}

.checklist-board {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    padding: 32px;
    box-shadow: var(--shadow)
}

.checklist-board .board-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 14px;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700
}

.packing-item {
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--color-line);
    padding: 14px 0;
    cursor: pointer;
    min-height: 52px
}

.packing-item input {
    accent-color: var(--color-primary);
    width: 20px;
    height: 20px;
    flex: none;
    cursor: pointer
}

.packing-item span {
    font-size: .96rem
}

.packing-item input:checked+span {
    text-decoration: line-through;
    color: var(--color-text-muted)
}

.checklist-progress {
    background: #d8e2e2;
    height: 7px;
    margin-top: 24px;
    overflow: hidden
}

.checklist-fill {
    display: block;
    background: var(--color-primary);
    height: 100%;
    width: 0;
    transition: width var(--transition)
}

.faq-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 26px
}

.faq-head h2 {
    margin: 0
}

.faq-list {
    border-top: 1px solid var(--color-ink)
}

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

.faq-q {
    border: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    padding: 22px 45px 22px 0;
    position: relative;
    font-weight: 700;
    color: var(--color-ink);
    font-size: 1.04rem;
    min-height: 60px
}

.faq-q:after {
    content: '+';
    position: absolute;
    right: 5px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    top: 21px;
    transition: transform var(--transition)
}

.faq-q[aria-expanded=true]:after {
    content: '−'
}

.faq-a {
    max-width: 880px;
    padding: 0 44px 23px 0;
    color: var(--color-ink-soft);
    font-size: .98rem
}

.faq-a[hidden] {
    display: none
}

.final-cta {
    background: var(--color-primary);
    color: white;
    padding: var(--space-7) 0
}

.final-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: end
}

.final-cta h2 {
    font-size: clamp(2.7rem, 5.2vw, 5.5rem);
    margin: 0
}

.final-cta p {
    max-width: 420px;
    font-size: 1.04rem
}

.final-cta .cta {
    background: white;
    color: var(--color-deep);
    border-color: #fff
}

.final-cta .cta:hover {
    background: var(--color-warning)
}

.final-cta .price-note {
    color: #d8e8e8
}

.site-footer {
    background: var(--color-deep);
    color: #e5eded;
    padding: var(--space-6) 0 25px
}

.footer-main {
    display: grid;
    grid-template-columns: 5fr 3fr 4fr;
    gap: 35px;
    margin-bottom: 37px
}

.footer-brand .wordmark {
    color: white;
    margin-bottom: 18px
}

.footer-brand p {
    max-width: 330px;
    font-size: .87rem;
    color: #acbdc2
}

.footer-col h3 {
    font: 700 .72rem/1.4 'Cabin';
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px
}

.footer-col a {
    display: block;
    text-decoration: none;
    color: #d2dede;
    font-size: .87rem;
    padding: 4px 0
}

.footer-col a:hover {
    text-decoration: underline
}

.footer-col p {
    font-size: .87rem;
    color: #d2dede;
    line-height: 1.9
}

.footer-disc {
    font-size: .78rem;
    color: #b5c6c9;
    line-height: 1.7;
    max-width: 1050px;
    border-top: 1px solid #4c5c60;
    padding-top: 23px
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #4c5c60;
    padding-top: 18px;
    font-size: .72rem;
    color: #b5c6c9
}

.footer-bottom a {
    text-decoration: none
}

.cookie-banner {
    position: fixed;
    z-index: 80;
    bottom: 18px;
    left: 18px;
    width: min(430px, calc(100vw - 36px));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    background: var(--color-surface);
    padding: 24px;
    border: 1px solid var(--color-line);
    transform: translateY(calc(100% + 40px));
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition)
}

.cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}

.cookie-banner h3 {
    font: 700 1.2rem/1.2 'Cabin';
    letter-spacing: 0;
    margin-bottom: 8px
}

.cookie-banner p {
    font-size: .84rem;
    color: var(--color-ink-soft);
    margin-bottom: 18px
}

.cookie-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.cookie-btns button {
    font-size: .81rem;
    font-weight: 700;
    min-height: 43px;
    padding: 9px 14px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: white
}

.cookie-btns button.secondary {
    background: white;
    color: var(--color-primary)
}

.cookie-btns button:hover {
    filter: brightness(.85)
}

.cookie-banner a {
    font-size: .79rem;
    text-decoration: underline
}

.legal-hero {
    padding: 70px 0 50px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-line)
}

.legal-hero h1 {
    font-family: 'DejaVu Sans Condensed', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    letter-spacing: -.065em;
    line-height: 1;
    margin: 18px 0
}

.legal-hero p {
    max-width: 720px;
    color: var(--color-ink-soft)
}

.legal-content {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 20px 75px
}

.legal-content section {
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--color-line)
}

.legal-content h2 {
    font-size: clamp(1.65rem, 3.2vw, 2.2rem);
    letter-spacing: -.035em
}

.legal-content h3 {
    font: 700 1.15rem/1.4 'Cabin';
    letter-spacing: 0
}

.legal-content p,
.legal-content li {
    font-size: .99rem;
    line-height: 1.75;
    color: var(--color-ink-soft)
}

.legal-content ul {
    padding-left: 21px
}

.legal-content .notice {
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    padding: 18px 22px;
    margin: 24px 0
}

.legal-content .notice p:last-child {
    margin: 0
}

.muted {
    color: var(--color-text-muted)
}

.read-more {
    font-size: .86rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none
}

.read-more:hover {
    text-decoration: underline
}

.link-secondary {
    display: inline-block;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem
}

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

@media(max-width:980px) {
    .site-nav {
        gap: 15px
    }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-deck {
        max-width: 700px
    }

    .narrative-grid {
        grid-template-columns: 1fr 3fr
    }

    .narrative-grid .text-column {
        grid-column: 2
    }

    .narrative-grid .sidenote {
        display: none
    }

    .story-split,
    .resolution-grid,
    .wedding-grid,
    .reveal-grid,
    .product-head,
    .limits-grid,
    .checklist-grid,
    .final-grid {
        gap: 28px
    }

    .hero-photo .photo-frame {
        aspect-ratio: 1.55
    }

    .footer-main {
        grid-template-columns: 1.3fr 1fr 1fr
    }
}

@media(max-width:730px) {
    .container {
        width: min(calc(100% - 32px), var(--page))
    }

    .site-header .header-inner {
        min-height: 70px
    }

    .header-notice {
        margin-left: auto
    }

    .header-divider {
        display: none
    }

    .menu-toggle {
        display: flex;
        margin-left: 0
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        padding: 15px 16px 22px;
        border-bottom: 1px solid var(--color-line);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: var(--shadow)
    }

    .site-nav.open {
        display: flex
    }

    .site-nav a {
        padding: 13px 4px;
        border-bottom: 1px solid var(--color-line);
        min-height: 44px
    }

    .hero {
        padding: 34px 0 50px
    }

    .hero-grid {
        padding: 34px 0 26px;
        gap: 25px
    }

    .hero h1 {
        font-size: clamp(2.7rem, 11vw, 4.8rem)
    }

    .hero-deck {
        padding-left: 18px
    }

    .hero-deck p {
        font-size: 1.21rem
    }

    .hero-photo .photo-frame {
        aspect-ratio: 1.25
    }

    .chapter {
        padding: 57px 0
    }

    .narrative-grid {
        display: block
    }

    .image-pair,
    .story-split,
    .resolution-grid,
    .wedding-grid,
    .reveal-grid,
    .product-head,
    .mode-copy,
    .scenarios .scenario-detail,
    .limits-grid,
    .checklist-grid,
    .final-grid {
        grid-template-columns: 1fr
    }

    .image-pair {
        gap: 28px
    }

    .image-pair .figure:nth-child(2) .photo-frame {
        aspect-ratio: 1.4
    }

    .story-split {
        display: flex;
        flex-direction: column-reverse
    }

    .story-split .figure,
    .resolution-grid .figure,
    .wedding-grid .figure,
    .reveal-grid .figure {
        width: 100%
    }

    .wedding-grid {
        display: flex;
        flex-direction: column-reverse
    }

    .reveal-grid,
    .resolution-grid {
        display: flex;
        flex-direction: column
    }

    .reveal-grid .figure {
        order: 2
    }

    .reveal-grid .reveal-copy {
        order: 1
    }

    .steps-row {
        grid-template-columns: 1fr
    }

    .steps-row>div {
        padding: 23px
    }

    .mode-copy {
        gap: 16px
    }

    .mode-visual {
        min-height: 150px
    }

    .scenario-detail {
        padding: 26px
    }

    .scenario-detail h3 {
        font-size: 2.3rem
    }

    .scenario-detail .scenario-letter {
        font-size: 4.5rem
    }

    .footer-main {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-wrap: wrap
    }

    .checklist-board {
        padding: 22px
    }

    .chapter-index {
        margin-bottom: 18px
    }

    .hero-statband {
        gap: 12px
    }

    .faq-head {
        display: block
    }

    .faq-head p {
        margin-top: 14px
    }

    .final-cta {
        padding: 55px 0
    }
}

@media(max-width:390px) {
    .header-inner {
        gap: 9px
    }

    .wordmark {
        font-size: .99rem;
        max-width: 128px
    }

    .wordmark .mark {
        width: 26px;
        height: 26px;
        font-size: 11px
    }

    .header-notice {
        font-size: .58rem;
        padding: 6px 7px
    }

    .hero h1 {
        font-size: clamp(2.55rem, 10.9vw, 3.6rem)
    }

    h2 {
        font-size: clamp(2rem, 9vw, 3rem)
    }

    .hero-meta {
        font-size: .65rem
    }

    .cookie-banner {
        bottom: 9px;
        left: 9px;
        width: calc(100vw - 18px)
    }

    .footer-main {
        gap: 25px
    }
}

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

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