@font-face {
  font-family: "Jost";
  src: url("media/Jost.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("media/DMSerifDisplay.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --page: #FFFFFF;
  --ink: #2E2B27;
  --ink-soft: #6D513B;
  --line: rgb(46 43 39 / .16);
  --blush: #E7CCBA;
  --butter: #DCC3A3;
  --sage: #A2A487;
  --on-ink: #F2EADF;
  --hover: #55573F;
  --accent: #A4502A;
  --danger: oklch(46% .16 25);
  --font: "Jost", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "DM Serif Display", Georgia, serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(20px, 4.45vw, 64px);
  --max: 1440px;
  --section-space: clamp(72px, 8vw, 128px);
  --sheet-radius: clamp(20px, 2.4vw, 32px);
  --sticker-shadow: drop-shadow(0 1.5px 1.5px oklch(28.6% .031 38 / .16));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.55 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
p, li { text-wrap: pretty; }
h1, h2 { font-family: var(--font-heading); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.05; letter-spacing: -.015em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--butter); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; z-index: 20; left: var(--gutter); top: 12px; padding: 12px 16px; border-radius: 8px; background: var(--butter); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; min-inline-size: 240px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 650 17px/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out); }
.button:active:not([aria-disabled]) { transform: scale(.97); }
.button[aria-disabled] { cursor: progress; }
@media (hover: hover) and (pointer: fine) { .button:hover:not([aria-disabled]) { background: var(--hover); } }
.checkout { position: relative; display: grid; justify-items: start; gap: 8px; }
.checkout-error { max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--danger); }
.checkout-error:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.checkout-note { color: var(--ink-soft); }
.checkout-cancel { min-height: 44px; min-width: 44px; margin-left: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink); font: inherit; cursor: pointer; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--max); min-height: 84px; margin: 0 auto; padding: 14px var(--gutter); }
.wordmark { display: flex; align-items: center; gap: 20px; min-height: 44px; text-decoration: none; }
.wordmark img { width: 180px; height: auto; }
.header-nav { display: flex; align-items: center; gap: 30px; }
.header-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 550; text-decoration: none; }
.header-nav .club-link { position: relative; isolation: isolate; overflow: hidden; padding: 0 16px; border-radius: 999px; background: var(--blush); color: var(--ink); font-weight: 700; }
.club-link span { position: relative; z-index: 1; }
.header-nav .club-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .header-nav a:hover { text-decoration: underline; } }

main { max-width: var(--max); margin: 0 auto; }

.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); grid-template-areas: "title sheet" "buy sheet"; column-gap: clamp(36px, 5vw, 88px); row-gap: 32px; padding: clamp(8px, 1.6vw, 24px) var(--gutter) var(--section-space); }
.hero-title { grid-area: title; align-self: end; display: grid; gap: 22px; }
.lead { max-width: 25em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; }
.hero-buy { grid-area: buy; align-self: start; display: grid; justify-items: start; gap: 18px; }
.price { display: flex; align-items: baseline; gap: 10px; font-size: clamp(40px, 3.4vw, 52px); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -.02em; }
.price span, .offer-price span { font-size: 16px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--ink-soft); }
.hero-trust { max-width: 26em; color: var(--ink-soft); font-size: 15px; }
.hero-sheet { grid-area: sheet; justify-self: end; align-self: center; width: clamp(420px, calc(100svh - 200px), 100%); display: grid; gap: 4px; padding: clamp(14px, 1.4vw, 20px) clamp(12px, 1.5vw, 24px) clamp(10px, 1.2vw, 18px); border-radius: var(--sheet-radius); background: var(--blush); }
.hero-sheet figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding-left: 6px; color: oklch(36% .045 30); font-size: 15px; font-weight: 550; }
.sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(4px, .8vw, 12px); }
.sheet-sticker img { width: 100%; height: auto; filter: var(--sticker-shadow); }
.sheet-sticker:nth-child(4n + 1) { rotate: -2.5deg; }
.sheet-sticker:nth-child(4n + 3) { rotate: 2deg; }

.library { padding: 0 var(--gutter) var(--section-space); }
.section-head { display: grid; gap: 14px; max-width: 46em; margin-bottom: 36px; }
.section-head p { max-width: 36em; color: var(--ink-soft); font-size: 18px; }
.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 0; padding: clamp(20px, 3vw, 44px) clamp(8px, 2vw, 32px); border-radius: var(--sheet-radius); background: var(--butter); }
.tile { flex: 0 0 20%; min-width: 0; padding: 0 clamp(4px, .9vw, 14px); }
.tile picture, .tile .sticker-peel { display: block; }
.tile img { width: 100%; height: auto; filter: var(--sticker-shadow); }
.tile figcaption { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; }
.styles { padding: 0 var(--gutter) var(--section-space); }
.style-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 44px); padding: clamp(20px, 3vw, 44px) clamp(14px, 2.6vw, 44px); border-radius: var(--sheet-radius); background: var(--sage); }
.style { display: grid; gap: 4px; margin: 0; }
.style-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.style-pair picture, .style-pair .sticker-peel { display: block; min-width: 0; }
.style-pair img { width: 100%; height: auto; filter: var(--sticker-shadow); }
.style figcaption { color: var(--ink); font-size: 15px; line-height: 1.4; text-align: center; }
.style figcaption strong { display: block; color: var(--ink); font-size: 17px; font-weight: 700; }
.idea-slot { display: grid; aspect-ratio: 1; padding: 9.5% 16% 10.5%; }
.idea-slot p { display: grid; place-items: center; border-radius: 24px; background: oklch(99.3% .003 40 / .55); color: var(--ink-soft); font-weight: 700; font-size: 17px; text-align: center; }

.likeness { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "visual copy"; align-items: center; gap: clamp(32px, 5vw, 88px); padding: 0 var(--gutter) var(--section-space); }
.likeness-copy { grid-area: copy; display: grid; gap: 22px; }
.likeness-copy > p { max-width: 27em; font-size: 18px; }
.quote { display: grid; gap: 12px; }
.quote p { font-family: var(--font-heading); font-size: clamp(30px, 2.8vw, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.quote footer { color: var(--ink-soft); font-size: 15px; font-weight: 550; }
realtor-transformation { grid-area: visual; display: block; min-width: 0; }

.in-use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 48px; margin: 0 var(--gutter); padding: clamp(56px, 6vw, 88px) clamp(28px, 5vw, 80px) 0; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; background: var(--sage); overflow: hidden; }
.in-use-copy { display: grid; align-self: center; gap: 22px; padding-bottom: clamp(40px, 5vw, 72px); }
.in-use-copy p { max-width: 25em; font-size: 18px; }
.in-use-copy .phone-hint { color: var(--ink); font-size: 15px; }
.phone-figure { position: relative; min-width: 0; width: min(100%, 520px); justify-self: center; }
.phone-scene { position: relative; width: 100%; aspect-ratio: 1320 / 1805; overflow: hidden; container-type: inline-size; }
.phone-hand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phone-display { position: absolute; inset: 0; mask-image: url("media/phone-screen-stories.png?v=6"); mask-size: 100% 100%; mask-repeat: no-repeat; pointer-events: none; }

.offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); padding: clamp(40px, 5vw, 80px) clamp(28px, 5vw, 80px); background: var(--ink); color: var(--on-ink); border-radius: 0 0 var(--sheet-radius) var(--sheet-radius); margin: 0 var(--gutter); }
.offer-main { display: grid; justify-items: start; align-content: start; gap: 22px; }
.offer-price { display: flex; align-items: baseline; gap: 12px; font-size: clamp(52px, 4.4vw, 64px); font-weight: 800; font-stretch: 90%; line-height: 1; letter-spacing: -.02em; }
.offer .offer-price span { color: var(--blush); }
.offer-list { display: grid; gap: 10px; font-size: 19px; }
.offer-list li, .intake li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.offer-list li::before, .intake li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blush); transform: translateY(-1px); }
.offer .button { margin-top: 8px; background: var(--blush); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .offer .button:hover:not([aria-disabled]) { background: oklch(90% .05 29); } }
.offer .checkout-error { color: oklch(84% .09 29); }
.offer .checkout-note { color: oklch(86% .02 40); }
.offer .checkout-cancel { background: transparent; color: var(--on-ink); border-color: oklch(97.5% .012 40 / .35); }
.offer :focus-visible { outline-color: var(--blush); }
.offer-next { display: grid; align-content: start; gap: 16px; padding-top: 10px; color: oklch(91% .014 40); }
.offer-next h3 { color: var(--on-ink); }
.offer-next a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); font-weight: 600; overflow-wrap: anywhere; }
.intake { display: grid; gap: 10px; margin: 4px 0 8px; color: var(--on-ink); font-size: 18px; }
.offer-next p { max-width: 32em; }
.receipt { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 40px; border-radius: var(--sheet-radius); }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 40px; color: var(--ink-soft); font-size: 15px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand { margin-right: auto; color: var(--ink); font-weight: 650; text-decoration: none; }
.media-credit { max-width: 80ch; margin-top: 16px; font-size: 13px; line-height: 1.6; }

.privacy-page { max-width: 44em; margin: 64px auto; padding: 0 var(--gutter) 64px; }
.privacy-page > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; }
.privacy-page h1 { margin-top: 40px; font-size: clamp(34px, 4vw, 46px); line-height: 1.05; }
.privacy-page p { margin-top: 16px; font-size: 17px; line-height: 1.65; }
.privacy-page .privacy-updated { margin-top: 28px; color: var(--ink-soft); font-size: 15px; }

@media (max-width: 1100px) {
  .wordmark span { display: none; }
  .header-nav { gap: 22px; }
  .tile { flex-basis: 25%; }
}
@media (max-width: 900px) {
  .style-sheet { grid-template-columns: minmax(0, 1fr); }
  .style { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; column-gap: 24px; }
  .style figcaption { text-align: left; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sheet" "buy"; row-gap: 26px; }
  .hero-title { align-self: start; gap: 18px; }
  .hero-sheet { width: 100%; justify-self: stretch; }
  .sheet-wide { display: none; }
  .sheet-sticker:nth-child(4n + 1), .sheet-sticker:nth-child(4n + 3) { rotate: none; }
  .sheet-sticker:nth-child(odd) { rotate: -2deg; }
  .sheet-sticker:nth-child(3n) { rotate: 2deg; }
  .hero-buy { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 28px; row-gap: 14px; }
  .hero-buy .hero-trust { grid-column: 1 / -1; }
  .likeness { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual"; }
  .in-use { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .in-use-copy { padding-bottom: 8px; }
  .phone-figure { width: min(100%, 400px); }
  .offer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .header-nav a[href^="https"] { display: none; }
}
@media (max-width: 599px) {
  .style { grid-template-columns: minmax(0, 1fr); }
  .style figcaption { text-align: center; }
  body { font-size: 16px; }
  .site-header { min-height: 68px; gap: 10px; padding-block: 10px; }
  .wordmark img { width: 140px; }
  .header-nav { gap: 18px; }
  .hero { row-gap: 20px; padding-top: 4px; }
  h1 { font-size: clamp(44px, 12.4vw, 58px); }
  .lead { font-size: 17px; }
  .hero-sheet { padding: 10px 8px 6px; }
  .hero-sheet figcaption { font-size: 14px; }
  .hero-buy { grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; column-gap: 16px; justify-items: stretch; }
  .hero-buy .price { font-size: 38px; flex-direction: column; gap: 2px; }
  .hero-buy .button { min-inline-size: 0; width: 100%; }
  .hero-buy .hero-trust { font-size: 14px; }
  .section-head { margin-bottom: 26px; }
  .section-head p, .likeness-copy > p, .in-use-copy p { font-size: 16px; }
  .gallery { gap: 16px 0; padding: 14px 6px 20px; }
  .tile { flex-basis: 33.333%; padding: 0 4px; }
  .tile figcaption { font-size: 14px; }
  .idea-slot p { border-radius: 16px; font-size: 14px; }
  .quote p { font-size: 30px; }
  .in-use { margin-inline: 0; padding: 44px 22px 0; border-radius: 0; }
  .offer { margin-inline: 0; padding: 40px 22px; border-radius: 0; }
  .offer-list, .intake { font-size: 17px; }
  .offer .checkout { justify-self: stretch; justify-items: stretch; }
  .offer .button { width: 100%; min-inline-size: 0; }
  .footer-links { gap: 0 22px; }
  .footer-brand { flex-basis: 100%; }
  .media-credit { font-size: 14px; }
}

@media (max-width: 360px) {
  .hero-sheet figcaption { font-size: 13px; }
  .hero-buy { column-gap: 12px; }
  .hero-buy .price { font-size: 32px; }
  .hero-buy .button { padding-inline: 14px; font-size: 16px; }
  .lead { font-size: 16px; }
}

.ig-story { position: absolute; left: 17.5%; top: 4.64%; width: 43%; aspect-ratio: 1376 / 2989; overflow: hidden; background: oklch(18% .02 40); color: oklch(99% .005 40); font: 400 2cqw/1.3 var(--font); pointer-events: auto; }
.ig-story:focus-visible { outline: none; }
.ig-story:focus-visible::after { content: ""; position: absolute; inset: 6px; z-index: 4; border: 4px solid oklch(99% .005 40); border-radius: 18px; box-shadow: 0 0 0 3px oklch(18% .02 40), inset 0 0 0 3px oklch(18% .02 40); pointer-events: none; }
.ig-slides, .ig-slide, .ig-interior, .ig-chrome { position: absolute; inset: 0; width: 100%; height: 100%; }
.ig-slide[hidden], .ig-interior[hidden] { display: none; }
.ig-interior { object-fit: cover; }
.ig-chrome { pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .78), transparent 38%, transparent 68%, rgb(0 0 0 / .78)); }
.ig-identity { position: absolute; top: 15.5%; left: 5%; right: 5%; display: flex; align-items: center; gap: 1cqw; font-weight: 500; text-shadow: 0 1px 2px rgb(0 0 0 / .9), 0 0 10px rgb(0 0 0 / .45); }
.ig-identity img { width: 3.2cqw; height: 3.2cqw; object-fit: cover; border-radius: 50%; }
.ig-progress { position: absolute; top: 9%; left: 5%; right: 5%; display: flex; gap: 4px; height: 2px; pointer-events: none; }
.ig-progress span { flex: 1; background: rgb(255 255 255 / .45); }
.ig-progress [aria-current] { background: oklch(99% .005 40); }
.ig-sticker { position: absolute; left: 50%; bottom: 7.7%; width: 78%; height: auto; transform: translateX(-50%); pointer-events: none; }
.sticker-coffee, .sticker-laptop { bottom: 16.2%; }
.sticker-pointing { left: -2%; width: 70%; bottom: 10.6%; transform: none; }
.sticker-sold { width: 74%; bottom: 7.9%; }
.ig-reply { position: absolute; bottom: 7%; left: 5%; right: 9%; display: flex; gap: 1.4cqw; align-items: center; text-shadow: 0 1px 2px rgb(0 0 0 / .9); }
.ig-reply span:first-child { flex: 1; padding: 1cqw 1.2cqw; border: 1px solid rgb(255 255 255 / .55); border-radius: 20px; font-size: 1.6cqw; opacity: .92; pointer-events: none; }
.ig-reply span:last-child { font-size: 2.9cqw; }
.ig-tap { position: absolute; top: 22%; bottom: 14%; width: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.ig-previous { left: 0; }
.ig-next { right: 0; }
.ig-tap:focus-visible { outline: 3px solid oklch(99% .005 40); outline-offset: -6px; box-shadow: inset 0 0 0 3px oklch(18% .02 40); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:active:not([aria-disabled]) { transform: none; }
}