:root {
  color-scheme: light;
  --paper: #faf7f2;
  --paper-warm: #f3ece4;
  --ink: #32252e;
  --plum: #3c2035;
  --berry: #a64f70;
  --rose: #e9d8de;
  --muted: #716b70;
  --line: #ded4d0;
  --white: #fffdfa;
  --serif: Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 70rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #c2768c; outline-offset: 4px; }
.page-shell { width: min(calc(100% - 3rem), var(--measure)); margin-inline: auto; }
.skip-link {
  position: absolute; z-index: 10; top: .75rem; left: .75rem; transform: translateY(-180%);
  padding: .65rem 1rem; border-radius: 999px; background: var(--plum); color: white;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(calc(100% - 3rem), var(--measure)); min-height: 5.2rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 2.4rem; height: 2.4rem; border-radius: .7rem; }
.brand-name { color: var(--plum); font-size: .72rem; font-weight: 750; letter-spacing: .19em; }
.header-link, .text-link { color: var(--plum); font-size: .9rem; font-weight: 650; text-decoration: none; }
.header-link span { color: var(--berry); margin-left: .25rem; }
.header-link:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .25em; }

.hero {
  min-height: 40rem; padding-block: 5rem 4.5rem; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr);
  align-items: center; gap: clamp(3rem, 7vw, 7rem); position: relative;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; top: 2rem; right: -9rem;
  background: radial-gradient(circle, rgba(233,216,222,.78) 0, rgba(233,216,222,.35) 36%, rgba(250,247,242,0) 70%);
  pointer-events: none;
}
.hero-copy { max-width: 39rem; padding-block: 1rem; }
.eyebrow {
  margin: 0 0 1.1rem; color: var(--berry); font-size: .74rem; font-weight: 750;
  letter-spacing: .16em; line-height: 1.4; text-transform: uppercase;
}
.eyebrow-dot { display: inline-block; width: .48rem; height: .48rem; margin: 0 .5rem .04rem 0; border-radius: 50%; background: var(--berry); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { color: var(--plum); font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
h1 { max-width: 12ch; margin-bottom: 1.25rem; font-size: clamp(3.1rem, 6vw, 5.5rem); line-height: .99; }
.hero-product-title { margin: 0 0 .7rem; color: var(--berry); font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.25; }
.hero-description { max-width: 34rem; margin-bottom: 1.45rem; color: #594f55; font-size: 1.13rem; line-height: 1.7; }
.fact-line { display: flex; flex-wrap: wrap; gap: .55rem .7rem; margin: 0 0 1.75rem; }
.fact-line span { padding: .37rem .72rem; border: 1px solid #ded2d1; border-radius: 999px; color: #5b4f57; font-size: .77rem; line-height: 1.4; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; }
.button {
  min-height: 3.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .78rem 1.2rem; border: 1px solid transparent; border-radius: .25rem; font: inherit; font-weight: 700;
  text-decoration: none; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.button-primary { background: var(--plum); color: var(--white); box-shadow: 0 8px 20px rgba(60,32,53,.13); }
.button-primary:hover { background: #522842; transform: translateY(-2px); }
.quiet-note { margin: 1.3rem 0 0; color: var(--muted); font-size: .83rem; }

.cover-figure { position: relative; max-width: 22rem; margin: 0 auto; padding: 1.3rem 1.3rem 0; text-align: center; }
.cover-halo { position: absolute; inset: 8% 0 13%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(214,154,174,.42), rgba(214,154,174,0) 69%); }
.cover-frame {
  position: relative; overflow: hidden; padding: .45rem; background: var(--white); border: 1px solid rgba(60,32,53,.12);
  box-shadow: 0 2.1rem 4rem rgba(55,35,47,.19), 0 5px 12px rgba(55,35,47,.08); transform: rotate(2deg);
}
.book-cover { width: 100%; height: auto; aspect-ratio: 1241 / 1754; object-fit: cover; }
.cover-figure figcaption { margin-top: 1.2rem; color: var(--muted); font-size: .76rem; letter-spacing: .08em; line-height: 1.5; }
.cover-caption-brand, .cover-caption-tagline { display: block; }
.cover-caption-brand { text-transform: uppercase; }

.quote-strip {
  min-height: 10rem; padding-block: 2.1rem; display: grid; grid-template-columns: 10rem 1fr auto; align-items: center; gap: 2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.quote-kicker { margin: 0; color: var(--berry); font-size: .7rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.quote-strip blockquote { max-width: 42rem; margin: 0; color: var(--plum); font-family: var(--serif); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.25; }
.quote-mark { align-self: start; color: #be8097; font-size: 2rem; }

.inside-section { padding-block: 7rem 6.5rem; }
.section-heading { max-width: 58rem; margin: 0 0 3.2rem; }
.section-heading h2, .fit-copy h2, .purchase-copy h2 { margin-bottom: 1rem; font-size: clamp(2.4rem, 4vw, 3.7rem); line-height: 1.05; }
.section-heading h2 { max-width: none; white-space: nowrap; }
.section-heading > p:last-child { max-width: 38rem; margin: 0; color: #62575e; font-size: 1.06rem; }
.inside-list { border-top: 1px solid var(--line); }
.inside-item { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: start; gap: 1.3rem; padding: 1.5rem .2rem 1.55rem; border-bottom: 1px solid var(--line); }
.item-number { padding-top: .28rem; color: var(--berry); font-size: .77rem; font-weight: 750; letter-spacing: .12em; }
.inside-item h3 { margin: 0 0 .35rem; color: var(--plum); font-family: var(--serif); font-size: 1.47rem; font-weight: 500; }
.inside-item p { max-width: 46rem; margin: 0; color: #645a60; }
.item-arrow { padding-top: .15rem; color: #b87a8f; font-size: 1.1rem; }

.reassurance-section { background: var(--paper-warm); border-block: 1px solid #e7ddd5; }
.reassurance-inner { padding-block: 5.2rem 5.1rem; }
.reassurance-inner blockquote { max-width: 52rem; margin: 0 0 1.25rem; color: var(--plum); font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: -.025em; }
.reassurance-inner > p:last-child { margin: 0; color: var(--muted); font-size: .95rem; }

.fit-section { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; padding-block: 6rem; }
.fit-copy { max-width: 40rem; }
.fit-copy > p:last-child { margin: 0; color: #62575e; font-size: 1.08rem; }
.fit-note { max-width: 24rem; padding: 1.6rem 1.7rem 1.55rem; border-left: 3px solid var(--berry); background: #f4eaed; }
.note-symbol { color: var(--berry); font-size: 1.1rem; }
.fit-note p { margin: .85rem 0 .7rem; color: var(--plum); font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; }
.fit-note small { color: var(--muted); font-size: .76rem; }

.details-section { padding-bottom: 5.7rem; }
.topic-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topic-details summary { padding: 1.1rem .1rem; color: var(--plum); cursor: pointer; font-family: var(--serif); font-size: 1.35rem; }
.topic-details summary::marker { color: var(--berry); }
.details-copy { max-width: 52rem; padding: 0 0 1.2rem; color: #62575e; }
.details-copy p:last-child { margin-bottom: 0; }

.purchase-section { background: var(--plum); color: var(--white); }
.purchase-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .9fr); align-items: start; column-gap: 4rem; row-gap: 1.5rem; padding-block: 4.8rem; }
.purchase-copy .eyebrow { color: #e0a7b9; }
.purchase-inside-label { margin: 1.5rem 0 .65rem; }
.purchase-copy h2, .purchase-action h3 { max-width: 12ch; margin-bottom: 1rem; color: var(--white); font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-align: left; }
.purchase-copy h2 { font-size: clamp(2.4rem, 4vw, 3.7rem); }
.purchase-action h3 { max-width: none; margin-top: 2.14rem; font-size: clamp(1.44rem, 2.4vw, 2.22rem); }
.purchase-copy > p:not(.eyebrow) { max-width: 31rem; color: #e7dce3; }
.purchase-inside-list { max-width: 33rem; margin: 0; padding-left: 1.2rem; color: #e7dce3; font-size: .96rem; line-height: 1.6; }
.purchase-inside-list li + li { margin-top: .35rem; }
.purchase-inside-list li::marker { color: #e0a7b9; }
.payment-intent { margin: 0 0 1.5rem; padding-left: 1.3rem; color: #e7dce3; font-size: .9rem; line-height: 1.6; }
.payment-intent li { text-wrap: pretty; }
.payment-intent li + li { margin-top: .7rem; }
.payment-intent li::marker { color: #e0a7b9; font-weight: 700; }
.purchase-action { width: 100%; max-width: 29rem; }
.purchase-message-button { width: 100%; min-height: 3.4rem; background: var(--white); color: var(--plum); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.16); text-align: center; }
.purchase-message-button:hover { background: var(--paper-warm); transform: translateY(-2px); }
@media (min-width: 801px) {
  .purchase-message-button { padding-block: .53rem; line-height: 1.1; }
}
@media (min-width: 1024px) {
  .purchase-message-button { display: flex; width: max-content; max-width: 100%; min-height: 0; margin-inline: auto; padding: 14px 36px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
  .purchase-message-button br { display: none; }
}
.purchase-methods { margin: .8rem 0 0; color: #e7dce3; font-size: .82rem; line-height: 1.5; text-align: center; }

.disclaimer { padding-block: 1.65rem; }
.disclaimer p { max-width: 54rem; margin: 0 auto; color: var(--muted); font-size: .81rem; text-align: center; }
.disclaimer strong { color: var(--plum); }
.site-footer { min-height: 6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.footer-brand img { width: 1.9rem; height: 1.9rem; border-radius: .55rem; }
.footer-brand .brand-name { font-size: .65rem; }
.footer-facebook { order: 1; width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 44px; color: var(--plum); text-decoration: none; }
.footer-facebook img { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.footer-facebook-label { display: none; }
.footer-facebook:hover { opacity: .8; }
.site-footer p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 1.05rem; font-style: italic; }
.site-footer small { color: #827980; font-size: .73rem; }
@media (min-width: 621px) {
  .footer-facebook { width: auto; display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
  .footer-facebook-label { display: inline; font-size: .65rem; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; color: var(--plum); white-space: nowrap; }
}

@media (max-width: 800px) {
  .hero { min-height: 0; grid-template-columns: 1fr minmax(13rem, .72fr); gap: 2.2rem; padding-block: 4.2rem 3.7rem; }
  h1 { font-size: clamp(2.7rem, 7vw, 4.3rem); }
  .cover-figure { max-width: 18rem; padding-inline: .75rem; }
  .quote-strip { grid-template-columns: 1fr auto; gap: .8rem 1rem; }
  .quote-kicker { grid-column: 1 / -1; }
  .quote-strip blockquote { max-width: 34rem; }
  .fit-section { gap: 2.5rem; }
  .purchase-inner { column-gap: 2.5rem; row-gap: 1.5rem; }
}

@media (max-width: 620px) {
  .page-shell, .site-header { width: min(calc(100% - 2rem), var(--measure)); }
  .site-header { min-height: 4.4rem; }
  .brand img { width: 2.1rem; height: 2.1rem; }
  .brand-name { font-size: .65rem; letter-spacing: .15em; }
  .header-link { font-size: .82rem; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; padding-block: 3.4rem 3.25rem; overflow-x: clip; }
  .hero-copy { padding: 0; }
  h1 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(2.45rem, 11.5vw, 3.1rem); text-wrap: balance; }
  .hero-product-title { font-size: 1.28rem; }
  .hero-description { font-size: 1.04rem; }
  .fact-line { gap: .45rem; margin-bottom: 1.4rem; }
  .fact-line span { font-size: .7rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .button-primary { width: 100%; }
  .text-link { padding-block: .3rem; }
  .cover-figure { width: min(78%, 18rem); max-width: 18rem; margin: .2rem auto 0; padding: 0 .35rem; }
  .cover-figure figcaption { font-size: .67rem; }
  .quote-strip { padding-block: 1.7rem; grid-template-columns: 1fr auto; }
  .quote-strip blockquote { font-size: 1.7rem; }
  .quote-mark { font-size: 1.5rem; }
  .inside-section { padding-block: 4.5rem 4.3rem; }
  .section-heading { margin-bottom: 2rem; }
  .section-heading h2, .fit-copy h2, .purchase-copy h2 { font-size: 2.5rem; }
  .section-heading h2 { white-space: normal; text-wrap: balance; }
  .purchase-action h3 { max-width: none; margin-top: 0; font-size: 1.35rem; text-wrap: balance; }
  .section-heading > p:last-child { font-size: 1rem; }
  .inside-item { grid-template-columns: 2.3rem 1fr; gap: .7rem; padding-block: 1.15rem; }
  .inside-item h3 { font-size: 1.3rem; }
  .inside-item p { font-size: .94rem; }
  .item-arrow { display: none; }
  .reassurance-inner { padding-block: 3.6rem; }
  .reassurance-inner blockquote { font-size: 2.25rem; }
  .fit-section { grid-template-columns: 1fr; gap: 2rem; padding-block: 4.3rem; }
  .fit-note { max-width: none; }
  .details-section { padding-bottom: 4rem; }
  .topic-details summary { font-size: 1.2rem; }
  .purchase-inner { grid-template-columns: 1fr; gap: 2.8rem 1.2rem; padding-block: 3.8rem; }
  .purchase-message-button { display: flex; width: max-content; max-width: 100%; min-height: 0; margin-inline: auto; padding: 20px 28px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: .9rem; line-height: 1.35; }
  .purchase-inside-label { margin-top: 2.8rem; }
  .purchase-methods { margin-top: 1.5rem; }
  .purchase-copy h2 { max-width: none; text-wrap: balance; }
  .disclaimer p { max-width: none; margin: 0; font-size: .875rem; line-height: 1.6; text-align: left; }
  .site-footer { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-items: center; gap: .8rem; padding-block: 1.2rem 1.5rem; }
  .footer-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .footer-facebook { grid-column: 1; grid-row: 2; justify-self: start; width: auto; height: 44px; display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
  .footer-facebook-label { display: inline; font-size: .65rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; color: var(--plum); white-space: nowrap; }
  .site-footer p { grid-column: 1; grid-row: 3; order: 0; width: 100%; text-align: center; white-space: nowrap; font-size: clamp(.82rem, 4.3vw, 1.05rem); }
  .site-footer small { grid-column: 1; grid-row: 4; order: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Asterisk drawn as SVG so phones do not swap it for a green emoji */
.quote-mark svg, .note-symbol svg { display: block; width: 1em; height: 1em; }

/* Final fixes: the pink glow behind the hero no longer causes sideways scrolling on tablets and small laptops; avoid a lone word on the last line */
main { overflow-x: clip; }
.fit-copy h2 { text-wrap: balance; }
@media (max-width: 620px) {
  .hero-description { text-wrap: balance; }
}

/* Hero: the second option reads as a quiet text link, so the price button is the only button */
.hero-actions .text-link { font-weight: 450; font-size: .88rem; color: var(--muted, #6b5a66); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.hero-actions .text-link:hover { color: var(--plum); }

/* Mobile hero: price button, then the note, then a centered text link; equal space above and below the cover */
@media (max-width: 620px) {
  .hero-copy { display: flex; flex-direction: column; }
  .hero-actions { display: contents; }
  .hero-actions .button-primary { order: 1; }
  .quiet-note { order: 2; margin-top: .9rem; text-align: center; }
  .hero-actions .text-link { order: 3; align-self: center; margin-top: 1.3rem; }
  .cover-figure figcaption { margin-top: 2.25rem; }
}

/* Tablet and laptop: keep "Read a little. / Keep what helps." on two lines and "How to get a copy of the guide" on one line, even when the device swaps in a wider serif font */
@media (min-width: 621px) {
  .purchase-copy h2 { max-width: none; }
  .purchase-copy h2 .line { display: block; white-space: nowrap; }
  .purchase-action h3 { white-space: nowrap; }
}
@media (min-width: 621px) and (max-width: 1399px) {
  .purchase-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
  .purchase-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); }
  .purchase-action h3 { font-size: clamp(1.25rem, 2.1vw, 1.9rem); }
}

/* Tablet portrait: pill button. Text on one line from 740px up; 621 to 739px keeps the two-line pill */
@media (min-width: 621px) and (max-width: 1023px) {
  .purchase-message-button { display: flex; width: max-content; max-width: 100%; min-height: 0; margin-inline: auto; padding: 20px 28px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: .9rem; line-height: 1.35; }
}
@media (min-width: 740px) and (max-width: 1023px) {
  .purchase-message-button { padding: 14px 24px; font-size: .84rem; white-space: nowrap; }
  .purchase-message-button br { display: none; }
}

/* Back-to-top arrow: appears after scrolling down, on every screen size */
.to-top {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 50;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--plum); color: var(--white); cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 8px 22px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: #522842; }
.to-top:focus-visible { outline: 3px solid #e0a7b9; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Tablet (portrait and landscape): a little more room in "How to get a copy of the guide" */
@media (min-width: 621px) and (max-width: 1399px) {
  .payment-intent { margin-bottom: 2.2rem; }
  .payment-intent li + li { margin-top: 1.1rem; }
  .purchase-methods { margin-top: 1.3rem; }
}

/* Tablet and laptop: the main heading always breaks as "Some feelings / take a little / room to name.", even when the device swaps in a wider serif font */
@media (min-width: 621px) {
  h1 { max-width: none; }
  h1 .line { display: block; white-space: nowrap; }
}
@media (min-width: 621px) and (max-width: 1399px) {
  h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }
}

/* Tablet and laptop: avoid a single word alone on the last line of short descriptions and the quote */
@media (min-width: 621px) and (max-width: 1399px) {
  .inside-item p, .reassurance-inner blockquote, .quiet-note { text-wrap: balance; }
}