/* Linda Sullivan shop (lindaslibrary.com): large type, high contrast, one column on phones.
   Class names are the shop engine's (engine/README.md); colours, type and look are this shop's own. */
/* The web fonts: Latin-only files (Fontsource 5.x, the subsets Google Fonts serves; OFL, see fonts/README.md). */
@font-face { font-family: "Lora"; src: url("/fonts/lora-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; src: url("/fonts/lora-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The text shows at once in a system font sized to match Lora and Source Sans 3, so little moves when the web fonts
   arrive (font-display: swap; the two hero fonts are preloaded at low priority, so they don't hold up the stylesheet).
   size-adjust is each web font's width over the fallback's, measured per weight on this page's own text: Times New
   Roman and Arial (Windows, Mac, iPhone; Liberation Serif and Sans on Linux have the same widths), Noto Serif and
   Roboto (Android). Android 12 and later ship Roboto as one variable font, which local() can't reach at bold, so there
   bold sans text falls back to the system Roboto Bold at full size (measured: no line changes, layout shift 0.0004).
   Vertical overrides use the shipped files' own metrics (Lora 1006/274, Source Sans 3 1024/400 per 1000). */
@font-face { font-family: "Lora Fallback Times"; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('LiberationSerif-Bold'); font-weight: 600; font-style: normal; size-adjust: 109.01%; ascent-override: 92.29%; descent-override: 25.14%; line-gap-override: 0%; }
@font-face { font-family: "Lora Fallback Times"; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('LiberationSerif-Italic'); font-weight: 400; font-style: italic; size-adjust: 111.89%; ascent-override: 89.91%; descent-override: 24.49%; line-gap-override: 0%; }
@font-face { font-family: "Lora Fallback Noto"; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); font-weight: 600; font-style: normal; size-adjust: 93.58%; ascent-override: 107.50%; descent-override: 29.28%; line-gap-override: 0%; }
@font-face { font-family: "Lora Fallback Noto"; src: local('Noto Serif Italic'), local('NotoSerif-Italic'); font-weight: 400; font-style: italic; size-adjust: 97.00%; ascent-override: 103.71%; descent-override: 28.25%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback Arial"; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); font-weight: 400; font-style: normal; size-adjust: 92.99%; ascent-override: 110.12%; descent-override: 43.02%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback Arial"; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); font-weight: 700; font-style: normal; size-adjust: 91.18%; ascent-override: 112.31%; descent-override: 43.87%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback Roboto"; src: local('Roboto'), local('Roboto-Regular'); font-weight: 400; font-style: normal; size-adjust: 93.68%; ascent-override: 109.31%; descent-override: 42.70%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback Roboto"; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700; font-style: normal; size-adjust: 97.10%; ascent-override: 105.46%; descent-override: 41.19%; line-gap-override: 0%; }

/* Cinzel: the sales page's hero title only (14 Oct). Its fallbacks are sized to Cinzel's width on the title itself
   (Times New Roman Bold 124.35%, Noto Serif Bold 106.80%), so the title keeps its lines when Cinzel arrives. */
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel Fallback Times"; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('LiberationSerif-Bold'); font-weight: 700; font-style: normal; size-adjust: 124.35%; ascent-override: 78.49%; descent-override: 29.92%; line-gap-override: 0%; }
@font-face { font-family: "Cinzel Fallback Noto"; src: local('Noto Serif Bold'), local('NotoSerif-Bold'); font-weight: 700; font-style: normal; size-adjust: 106.80%; ascent-override: 91.39%; descent-override: 34.83%; line-gap-override: 0%; }

/* ---------- Linda's look (Claude Design's handover, Turn 2, 14 Oct): burgundy, soft gold and warm cream, the covers'
   double gold rules, small gold crosses, arched church windows and sunrise hills. Type stays big, contrast strong. */
:root {
  --oxblood: #3E1312;
  --glow: #5A2121;
  --bar: #2B0C0D;
  --band: #5E1B25;
  --burgundy: #7A2232;
  --button-edge: #4A141D;
  --gold: #C9A35C;
  --gold-dark: #E2BE7C;
  --gold-light: #F3DCAE;
  --gold-link: #EFCF95;
  --cream: #FBF1E7;
  --cream-deep: #F4E1D0;
  --paper: #FFF9F2;
  --box: #FFFDF9;
  --ink: #2A1B18;
  --muted: #5A4741;
  --struck: #6E625C;
  --line: #E3CDB3;
  --line-section: #EBD7C3;
  --white: #ffffff;
  /* names the engine's shared rules use */
  --rose: var(--burgundy);
  --rose-dark: var(--band);
  --soft: var(--cream-deep);
  --radius: 12px;
  --measure: 700px;
  --serif: "Lora", "Lora Fallback Times", "Lora Fallback Noto", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans 3 Fallback Arial", "Source Sans 3 Fallback Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  --title: "Cinzel", "Cinzel Fallback Times", "Cinzel Fallback Noto", "Lora", Georgia, serif;
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M5 0h2v5h5v2H7v11H5V7H0V5h5V0z' fill='%23C9A35C'/%3E%3C/svg%3E");
  --cross-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M5 0h2v5h5v2H7v11H5V7H0V5h5V0z' fill='%23E2BE7C'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--burgundy); text-underline-offset: 3px; }
/* Focus rings: burgundy on the light sections (9:1 on cream), light gold on the dark ones; the design's gold (#C9A35C)
   is only about 2:1 on cream, under the 3:1 a focus ring needs. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--burgundy); line-height: 1.2; }
h1 { font-size: 44px; margin: 8px 0 14px; }
h2 { font-size: 32px; margin: 0 0 14px; }
h3 { font-size: 24px; margin: 0 0 6px; }
.lead { font-size: 23px; margin: 0 0 22px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

section { padding: 48px 0; border-bottom: 1px solid var(--line-section); }
section:last-of-type { border-bottom: 0; }

/* Ornaments: rule, cross, rule above a centred heading; a short double rule under a left-aligned one. */
.set-section h2::before, .letter h2::before {
  content: ""; display: block; width: 144px; height: 18px; margin: 0 auto 14px;
  background: var(--cross) center / 12px 18px no-repeat, linear-gradient(var(--gold), var(--gold)) left center / 56px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) right center / 56px 1px no-repeat;
}
.letter h2::before { width: 128px; background-size: 12px 18px, 48px 1px, 48px 1px; }
.faq-section h2::after, .about h2::after {
  content: ""; display: block; width: 56px; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); margin: 14px 0 20px;
}

/* The double gold frame of the cards */
.letter, .promise, .panel, .answer blockquote { position: relative; border: 1px solid var(--gold); }
.letter::before, .promise::before, .panel::before, .answer blockquote::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 163, 92, 0.5); border-radius: inherit; pointer-events: none;
}

/* ---------- Buttons ---------- */
.buy {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  min-height: 64px; padding: 16px 18px; border: 0; border-radius: 12px;
  background: var(--burgundy); color: #FFF7EE;
  font-family: var(--sans); font-size: 24px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 3px 0 var(--button-edge), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(233, 201, 143, 0.9);
}
.buy:hover { background: var(--band); box-shadow: 0 3px 0 #3A0F16, inset 0 0 0 3px var(--band), inset 0 0 0 4px rgba(233, 201, 143, 0.9); }
.buy:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }
button.buy { font-family: var(--sans); }
.buy[disabled] { opacity: 0.7; cursor: progress; }
.buy.small { display: inline-block; width: auto; min-width: 0; min-height: 56px; font-size: 20px; padding: 14px 22px; }
.buy-form { margin: 0; width: 100%; }
.buttons { display: grid; gap: 14px; justify-items: center; }
.reassure { text-align: center; font-size: 18px; color: var(--muted); margin: 16px 0 0; }
.reassure.secure { margin-top: 6px; }
.product-note { margin: 10px auto 4px; font-size: 18px; color: var(--muted); max-width: 460px; text-align: center; }
.link-button { background: none; border: 0; color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 19px; cursor: pointer; padding: 10px 14px; min-height: 48px; }

/* ---------- 1. Timer bar (sticky). At most 64 px on a phone (STORE-SPEC check 13): a little tighter than the
   handover's 82 px, with the same colours, boxes and 56-px button. ---------- */
.timer-bar { position: sticky; top: 0; z-index: 40; background: var(--bar); color: #FBEEE4; border-bottom: 1px solid var(--gold); box-shadow: 0 3px 0 var(--bar), 0 4px 0 rgba(201, 163, 92, 0.85); }
.timer-bar.aside { visibility: hidden; }
.bar-inner { max-width: 1160px; margin: 0 auto; padding: 3px 10px; display: flex; align-items: center; justify-content: center; gap: 10px 16px; }
.bar-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bar-label { font-size: 15px; font-weight: 700; line-height: 1.2; color: #FBEEE4; text-align: center; }
.bar-label strong { letter-spacing: 0.04em; color: var(--gold-light); }
.timer-bar .cd { display: inline-flex; gap: 4px; }
.timer-bar .cd-box { display: inline-flex; flex-direction: column; align-items: center; min-width: 42px; padding: 2px 4px 1px; border: 1px solid rgba(226, 190, 124, 0.6); border-radius: 8px; background: rgba(255, 243, 228, 0.06); box-shadow: none; }
.timer-bar .cd-box b { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.05; color: #FFF3E4; font-variant-numeric: tabular-nums; }
.timer-bar .cd-box small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; color: var(--gold-dark); }
.bar-button { flex: none; min-height: 56px; padding: 0 18px; white-space: nowrap; font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--bar); background: var(--gold-dark); border: 1px solid var(--gold-light); border-radius: 10px; cursor: pointer; }
.bar-button:hover { background: #EDCB8E; }
[data-pricebox] { scroll-margin-top: 72px; }

/* ---------- 2. Top bar and hero ---------- */
.topbar { background: var(--oxblood); }
.topbar .wrap { display: flex; align-items: center; justify-content: center; min-height: 52px; gap: 12px; }
.brand { display: inline-block; padding: 6px 4px; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); text-decoration: none; }
.topbar .small { font-size: 17px; color: var(--gold-light); }

.hero { position: relative; overflow: hidden; background-color: var(--oxblood); background-image: radial-gradient(110% 70% at 50% 45%, var(--glow) 0%, rgba(90, 33, 33, 0) 60%); color: #F6E9DA; padding: 0 20px 44px; border-bottom: 0; }
.hero .wrap { max-width: 1160px; padding: 0; text-align: center; }
.hero .portrait { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px; border: 2px solid var(--gold-dark); box-shadow: 0 0 0 3px #4A1718, 0 0 0 4px rgba(226, 190, 124, 0.7), 0 8px 20px rgba(0, 0, 0, 0.35); }
.hero h1 { font-family: var(--title); font-weight: 700; font-size: clamp(32px, 9vw, 35px); line-height: 1.12; letter-spacing: 0.01em; color: var(--gold-light); margin: 0 auto; max-width: 11em; text-wrap: balance; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.hero h1::after {
  content: ""; display: block; width: 144px; height: 18px; margin: 12px auto 14px;
  background: var(--cross-dark) center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) left center / 56px 1px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 56px 1px no-repeat;
}
.hero .lead { font-size: 23px; line-height: 1.6; color: #F6E9DA; margin: 26px 0 0; text-align: left; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px 0 0; }
.hero .buy { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--gold-dark); color: var(--bar); box-shadow: 0 3px 0 #9C7A3E, inset 0 0 0 3px var(--gold-dark), inset 0 0 0 4px rgba(62, 19, 18, 0.5); }
.hero .buy:hover { background: #EDCB8E; box-shadow: 0 3px 0 #9C7A3E, inset 0 0 0 3px #EDCB8E, inset 0 0 0 4px rgba(62, 19, 18, 0.5); }
.hero .buy:focus-visible, .hero a:focus-visible, .topbar a:focus-visible, .timer-bar button:focus-visible, .timer-bar a:focus-visible, .closing a:focus-visible { outline-color: var(--gold-light); }
.see-inside { display: inline-block; padding: 12px 8px; font-size: 20px; font-weight: 700; color: var(--gold-dark); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.see-inside:hover { color: var(--gold-light); }

/* The arched window with the four covers (Linda's partial). Positions are shares of the block. */
.hero-covers { position: relative; width: 100%; max-width: 430px; aspect-ratio: 0.745 / 1; margin: 0 auto; }
.hero-covers .window { position: absolute; left: 0; top: 0; width: 100%; height: 89.5%; border-radius: 999px 999px 6px 6px; overflow: hidden; border: 1px solid var(--gold-dark); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); background: linear-gradient(180deg, #4A1719 0%, #5E1E20 28%, #93423F 50%, #D48A58 64%, #F0C27C 72%, #F6D79A 80%); z-index: 0; }
.hero-covers .rays { position: absolute; left: -50%; width: 200%; top: -34%; height: 200%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 232, 180, 0.24) 0deg 0.7deg, rgba(255, 232, 180, 0) 0.7deg 7.5deg); -webkit-mask-image: radial-gradient(closest-side, transparent 12%, #000 16%, rgba(0, 0, 0, 0.55) 34%, transparent 62%); mask-image: radial-gradient(closest-side, transparent 12%, #000 16%, rgba(0, 0, 0, 0.55) 34%, transparent 62%); }
.hero-covers .sun { position: absolute; left: 32%; width: 36%; top: 51%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, #FFF2CC 0%, #FFDE96 42%, #F5B866 66%, rgba(245, 184, 102, 0) 71%); }
.hero-covers .hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 42%; display: block; }
.hero-covers .inner { position: absolute; inset: 7px; border-radius: 999px 999px 2px 2px; border: 1px solid rgba(243, 220, 174, 0.7); pointer-events: none; }
.hero-covers .cross { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); color: var(--gold-dark); }
.hero-covers .dust { position: absolute; inset: -26% -32% -4% -32%; overflow: hidden; pointer-events: none; z-index: 1; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.hero-covers .dust-a { position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 220px); background-size: 220px 220px;
  background-image: radial-gradient(circle at 18px 26px, rgba(244,214,158,.85) 0, rgba(244,214,158,.85) .9px, rgba(244,214,158,0) 2.1px), radial-gradient(circle at 96px 12px, rgba(244,214,158,.7) 0, rgba(244,214,158,.7) .7px, rgba(244,214,158,0) 1.9px), radial-gradient(circle at 160px 60px, rgba(244,214,158,.8) 0, rgba(244,214,158,.8) 1.1px, rgba(244,214,158,0) 2.3px), radial-gradient(circle at 40px 120px, rgba(244,214,158,.6) 0, rgba(244,214,158,.6) .8px, rgba(244,214,158,0) 2px), radial-gradient(circle at 120px 150px, rgba(244,214,158,.9) 0, rgba(244,214,158,.9) 1.2px, rgba(244,214,158,0) 2.4px), radial-gradient(circle at 200px 110px, rgba(244,214,158,.55) 0, rgba(244,214,158,.55) .7px, rgba(244,214,158,0) 1.9px), radial-gradient(circle at 70px 190px, rgba(244,214,158,.75) 0, rgba(244,214,158,.75) 1px, rgba(244,214,158,0) 2.2px), radial-gradient(circle at 180px 200px, rgba(244,214,158,.65) 0, rgba(244,214,158,.65) .8px, rgba(244,214,158,0) 2px), radial-gradient(circle at 140px 96px, rgba(244,214,158,.5) 0, rgba(244,214,158,.5) .6px, rgba(244,214,158,0) 1.8px), radial-gradient(circle at 10px 170px, rgba(244,214,158,.6) 0, rgba(244,214,158,.6) .7px, rgba(244,214,158,0) 1.9px); }
.hero-covers .dust-sway { position: absolute; inset: 0; }
.hero-covers .dust-b { position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 360px); background-size: 360px 360px;
  background-image: radial-gradient(circle at 40px 60px, rgba(244,214,158,.45) 0, rgba(244,214,158,0) 3.5px), radial-gradient(circle at 220px 30px, rgba(244,214,158,.35) 0, rgba(244,214,158,0) 4px), radial-gradient(circle at 300px 180px, rgba(244,214,158,.5) 0, rgba(244,214,158,0) 3px), radial-gradient(circle at 120px 240px, rgba(244,214,158,.3) 0, rgba(244,214,158,0) 4.5px), radial-gradient(circle at 260px 310px, rgba(244,214,158,.4) 0, rgba(244,214,158,0) 3.5px), radial-gradient(circle at 70px 330px, rgba(244,214,158,.35) 0, rgba(244,214,158,0) 3px); }
.hero-covers .float { position: absolute; z-index: 2; }
.hero-covers .tilt { transform: rotate(var(--rot, 0deg)); border-radius: 3px; overflow: hidden; line-height: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(243, 220, 174, 0.18); }
.hero-covers .tilt img { width: 100%; height: auto; }
.float-scripture { left: 34.75%; top: 38.6%; width: 30.5%; --dur: 8s; --rise: -5px; --delay: -2s; }
.float-planner { left: 4.3%; top: 44.5%; width: 30.5%; --rot: -4deg; --dur: 6.5s; --rise: -6px; --delay: -1s; }
.float-prayer { left: 65.2%; top: 44.5%; width: 30.5%; --rot: 4deg; --dur: 7.5s; --rise: -6px; --delay: -3.5s; }
.hero-covers .float-book { left: 27.1%; top: 52.3%; width: 45.7%; z-index: 4; --dur: 7s; --rise: -7px; --delay: 0s; }

/* ---------- 3. Fact strip: the 1-px gaps draw the gold lines ---------- */
.facts { padding: 26px 0; background: var(--cream); }
.fact-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #D9B676; }
.fact-strip li { background: var(--cream); padding: 14px 8px 16px; text-align: center; }
.fact-strip b { display: block; font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--burgundy); }
.fact-strip span { display: block; font-size: 17px; line-height: 1.35; color: var(--muted); }

/* ---------- 4. Price box: paper, double gold frame, an elliptical arched top ---------- */
.buy-section { background: var(--cream-deep); padding: 44px 0; }
.buy-section .wrap { max-width: 1008px; padding: 0 14px; }
.pricebox { position: relative; max-width: 980px; margin: 0 auto; background: var(--paper); border: 1px solid var(--gold); border-radius: 50% 50% 16px 16px / 92px 92px 16px 16px; padding: 42px 16px 26px; text-align: center; box-shadow: 0 22px 50px -28px rgba(94, 27, 37, 0.42), 0 2px 0 rgba(201, 163, 92, 0.25); }
.pricebox::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 163, 92, 0.5); border-radius: 50% 50% 10px 10px / 86px 86px 10px 10px; pointer-events: none; }
.price-heading { font-size: 32px; color: var(--burgundy); margin: 0 0 14px; }
.price-heading::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 8px; background: var(--cross) center / 12px 18px no-repeat; }
.price-rows { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 1px; background: #E2C998; border-top: 1px solid #E2C998; border-bottom: 1px solid #E2C998; text-align: left; }
.price-rows > li { flex: 1 1 360px; display: block; background: var(--paper); padding: 22px 4px 20px; border: 0; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price-name { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); }
.price-amounts { white-space: nowrap; }
.price-next { color: var(--struck); font-size: 20px; margin-right: 8px; text-decoration-thickness: 2px; }
.price-now { font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1; color: var(--burgundy); }
.per-page { margin: 2px 0 0; font-size: 17px; color: var(--muted); text-align: right; }
.includes-intro { margin: 10px 0 0; font-size: 19px; font-weight: 700; }
.includes { list-style: none; margin: 8px 0 4px; padding: 0; }
.includes li { position: relative; display: block; padding: 3px 0 3px 30px; font-size: 19px; line-height: 1.45; border: 0; }
.includes li::before { content: "\2713"; position: absolute; left: 4px; top: 3px; color: var(--burgundy); font-weight: 700; }
.includes b { color: var(--ink); }
.includes-note { margin: 8px 0 2px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.price-change { margin: 18px 0; font-size: 18px; color: var(--muted); text-align: center; }
.pricebox .buttons { display: flex; flex-wrap: wrap; gap: 14px clamp(14px, 2.6vw, 34px); justify-items: stretch; }
.pricebox .buy-form { flex: 1 1 340px; }
.pricebox .buy { width: 100%; min-width: 0; }
.notice { background: var(--cream-deep); border: 1px solid var(--gold); box-shadow: inset 0 0 0 4px var(--cream-deep), inset 0 0 0 5px rgba(201, 163, 92, 0.6); border-radius: 12px; padding: 18px 20px; margin: 18px 0 0; font-size: 24px; font-weight: 700; color: var(--ink); text-align: center; }
.gift-note { margin: 14px 0 0; font-size: 19px; font-weight: 700; color: var(--burgundy); }
.buy-message { margin: 14px 0 0; background: #fff4d6; border: 1px solid #ecd9a0; color: #4a3800; border-radius: 10px; padding: 12px 14px; font-size: 19px; }

/* Countdown boxes: small arched windows. Digits change with no transition. */
.countdown { margin: 18px 0 18px; }
.countdown-label { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.cd { display: inline-flex; gap: 6px; justify-content: center; }
.cd-box { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 10px 4px 6px; background: var(--box); border: 1px solid var(--gold); border-radius: 28px 28px 8px 8px; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 4px rgba(201, 163, 92, 0.45); }
.cd-box b { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.05; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.cd-box small { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; color: var(--muted); }
.ends { margin: 10px 0 0; color: var(--muted); font-size: 18px; }

/* ---------- 5. The sections not drawn: the same system ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 58px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 42px; height: 42px; border-radius: 50%; background: var(--burgundy); color: #FFF7EE; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.after { color: var(--muted); margin-top: 22px; }
.after.strong { color: var(--ink); font-weight: 700; }

.answer { margin: 26px 0 0; }
.answer h3 { font-size: 25px; margin: 0; color: var(--burgundy); }
.answer-ref { margin: 2px 0 10px; font-size: 17px; color: var(--muted); }
.answer blockquote { margin: 0; background: var(--paper); border-radius: 4px; padding: 18px 20px; }
.answer blockquote p { margin: 0; position: relative; }

.part { margin: 22px 0 0; }
.part h3 { font-size: 23px; color: var(--burgundy); }
.chapters { margin: 6px 0 0; padding-left: 2.2em; }
.chapters li { padding: 3px 0; }
.pg { color: var(--muted); white-space: nowrap; }
.back-matter { margin: 6px 0 0; padding-left: 1.2em; }
.back-matter li { padding: 3px 0; }

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 6px 0 6px 36px; position: relative; }
.checks li::before { content: "\2713"; position: absolute; left: 4px; top: 5px; color: var(--burgundy); font-weight: 700; }

h3.sub { margin-top: 26px; font-size: 24px; color: var(--burgundy); }
.leads { padding-left: 1.1em; margin: 6px 0 0; }
.leads li { padding: 5px 0; }

.panel { background: var(--paper); border-radius: 4px; padding: 26px 24px; margin: 22px 0; }
.panel > * { position: relative; }
.contact { text-align: center; }
.contact h2 { margin-bottom: 8px; }
.contact p { margin: 0; }

/* Sample pages (Look inside and the set): white pages with a thin edge and a soft shadow */
.samples { display: grid; grid-template-columns: 1fr; gap: 28px 32px; max-width: 1040px; margin: 0 auto; }
.samples figure { margin: 0; }
.samples .enlarge { display: block; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(62, 19, 18, 0.42); }
.samples figcaption { font-size: 18px; color: var(--muted); padding: 10px 0 0; }
.enlarge { display: block; }

/* Closing band */
.closing { background: var(--oxblood); border-bottom: 0; padding: 48px 0; }
.closing p { margin: 0; color: #F6E9DA; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.5; text-align: center; }
.closing p::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 14px; background: var(--cross-dark) center / 12px 18px no-repeat; }

/* Buy strips */
.buy-strip-section { padding: 26px 0; background: var(--cream-deep); }
.buy-strip { text-align: center; }
.buy-strip .reassure { margin-top: 12px; }

/* ---------- 6. The Complete Set: each line under its cover in a niche, then the framed photo, then the pages ---------- */
.set-section .wrap { max-width: 1160px; }
.set-section h2 { text-align: center; }
.set-list { list-style: none; display: flex; flex-wrap: wrap; gap: 44px 32px; max-width: 1120px; margin: 28px auto 0; padding: 0; }
.set-list li { flex: 1 1 220px; font-size: 20px; line-height: 1.55; }
.set-list b { color: var(--burgundy); }
.niche { position: relative; display: block; width: 220px; margin: 0 auto; padding: 38px 24px 0; background: linear-gradient(180deg, #F8E9DC 0%, #F0D9C6 100%); border: 1px solid rgba(201, 163, 92, 0.8); border-bottom: 0; border-radius: 999px 999px 0 0; }
.niche::before { content: ""; position: absolute; inset: 6px 6px 0; border: 1px solid rgba(201, 163, 92, 0.45); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.niche::after { content: ""; position: absolute; top: 14px; left: 50%; width: 10px; height: 15px; margin-left: -5px; background: var(--cross) center / 10px 15px no-repeat; }
.niche img { position: relative; border-radius: 3px; box-shadow: 0 16px 30px -14px rgba(62, 19, 18, 0.45); }
.sill { display: block; width: 220px; height: 5px; margin: 0 auto 18px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.photo-frame { max-width: 960px; margin: 44px auto 0; padding: 6px; background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 26px 50px -30px rgba(94, 27, 37, 0.5); }
.photo-frame img { width: 100%; margin: 0; border: 1px solid rgba(201, 163, 92, 0.7); border-radius: 0; box-shadow: none; }
.set-section .muted { text-align: center; color: var(--muted); margin: 36px 0 18px; }
.set-section .after { font-size: 20px; color: var(--muted); text-align: center; margin-top: 40px; }

/* ---------- 7. Questions ---------- */
.faq-section .wrap { max-width: 860px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 21px; font-weight: 700; line-height: 1.35; color: var(--ink); }
summary:hover { color: var(--burgundy); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); background: var(--paper); font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1; color: var(--burgundy); }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 20px; padding-right: 14px; }

/* ---------- 8. Meet Linda: an arched window portrait ---------- */
.about-section .wrap { max-width: 1080px; }
.about { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 72px; max-width: 1040px; margin: 0 auto; }
.about-photo { flex: 1 1 280px; max-width: 380px; margin: 0 auto; padding: 7px; background: var(--paper); border: 1px solid var(--gold); border-radius: 999px 999px 6px 6px; box-shadow: 0 26px 50px -30px rgba(94, 27, 37, 0.5); }
.about-photo img.portrait.large { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; margin: 0; border-radius: 999px 999px 2px 2px; border: 1px solid rgba(201, 163, 92, 0.8); box-shadow: none; }
.about > div { flex: 1 1 420px; }
.about h2 { margin: 0; }
.about p:last-child { margin-bottom: 0; }

/* ---------- 9. Why I wrote this book: the armchair photo beside the letter ---------- */
.letter-section { background: var(--cream-deep); }
.letter-section .wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 30px 56px; max-width: 1160px; }
.letter-photo { flex: 1 1 300px; max-width: 440px; margin: 0; padding: 6px; background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 24px 46px -26px rgba(94, 27, 37, 0.55); }
.letter-photo img { width: 100%; border: 1px solid rgba(201, 163, 92, 0.7); }
.letter { flex: 1 1 440px; max-width: 640px; background: var(--paper); border-radius: 4px; padding: 34px 22px 28px; box-shadow: 0 26px 50px -28px rgba(94, 27, 37, 0.45); }
.letter > * { position: relative; }
.letter h2 { text-align: center; margin: 0 0 18px; }
.letter p { font-size: 21px; line-height: 1.65; margin: 0 0 16px; } /* the body font: only Lora SemiBold and Italic are loaded */
.letter .signature { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--burgundy); }

/* ---------- 10. The guarantee ---------- */
.promise-section { background: var(--cream); }
.promise { display: block; max-width: 820px; margin: 0 auto; background: var(--paper); border-radius: 4px; padding: 32px 22px; text-align: center; box-shadow: 0 22px 46px -30px rgba(94, 27, 37, 0.45); }
.promise-text { position: relative; }
.shield { display: block; width: 38px; height: 44px; color: #B08A45; margin: 0 auto 12px; }
.promise h2 { font-size: 27px; line-height: 1.3; max-width: 22em; margin: 0 auto 10px; text-wrap: balance; }
.promise p { margin: 0 auto; max-width: 34em; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.55; }

/* ---------- 11. Footer: sunrise hills, then the band ---------- */
footer, .site-footer { background: var(--band); color: #FBEEE4; border-top: 0; padding: 0 0 44px; font-size: 18px; line-height: 1.6; text-align: center; }
.footer-hills { position: relative; height: clamp(110px, 13vw, 190px); background: var(--cream); overflow: hidden; }
.footer-hills .sun { position: absolute; left: 50%; top: 40%; width: 110px; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #FFF0C8 0%, #F8D58E 45%, #F1BE73 64%, rgba(241, 190, 115, 0) 71%); }
.footer-hills svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.site-footer .wrap { max-width: 760px; padding: 6px 20px 0; }
.site-footer .wrap::before { content: ""; display: block; width: 12px; height: 18px; margin: 0 auto 12px; background: var(--cross-dark) center / 12px 18px no-repeat; }
.site-footer p { margin: 0 0 10px; }
.site-footer a { color: var(--gold-link); text-underline-offset: 3px; }
.site-footer a:hover { color: #FFF3E4; }
.site-footer a:focus-visible { outline-color: var(--gold-light); }

/* ---------- 12. Buy bar at the bottom of a phone ---------- */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: 1px solid var(--gold); box-shadow: 0 -3px 0 var(--paper), 0 -4px 0 rgba(201, 163, 92, 0.85), 0 -6px 18px rgba(40, 20, 10, 0.16); }
.buy-bar[hidden] { display: none; }
.buy-bar-inner { max-width: 860px; margin: 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy-bar .buy-form { margin: 0; }
.buy.bar-buy { display: block; width: 100%; min-width: 0; min-height: 56px; padding: 8px 6px; font-size: 18px; line-height: 1.2; }
body.has-buy-bar { padding-bottom: 96px; }

/* ---------- 13. The $10 gift pop-up ---------- */
/* The pop-up keeps the browser's own position: fixed for a modal dialog (position: relative would make it absolute,
   placed at the top of the page, and opening it would jump her back up). Its ::before frame works on a fixed box. */
.gift-popup { border: 1px solid var(--gold); padding: 0; max-width: min(560px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); overflow-y: auto; color: var(--ink); background: var(--paper); border-radius: 50% 50% 18px 18px / 84px 84px 18px 18px; box-shadow: 0 28px 70px rgba(20, 6, 6, 0.5); }
.gift-popup::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 163, 92, 0.55); border-radius: 50% 50% 13px 13px / 78px 78px 13px 13px; pointer-events: none; }
.gift-popup::backdrop { background: rgba(43, 12, 13, 0.62); }
.gift-inner { position: relative; padding: 30px 18px 16px; text-align: center; }
.gift-inner .portrait { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(201, 163, 92, 0.6); }
.gift-inner h2 { font-size: 28px; margin: 6px 0 10px; text-wrap: balance; }
.gift-inner p { margin: 0 0 14px; font-size: 20px; }
.gift-code { white-space: nowrap; font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 10vw, 44px); letter-spacing: 0.06em; color: var(--burgundy); background: var(--cream-deep); border: 1px solid var(--gold); border-radius: 12px; box-shadow: inset 0 0 0 4px var(--cream-deep), inset 0 0 0 5px rgba(201, 163, 92, 0.6); padding: 10px 12px; margin: 6px 0 14px !important; }
.gift-ends { color: var(--muted); margin: 0 0 14px; }
.gift-ends .cd { margin: 0 0 8px; }
.gift-ends p { margin: 0 !important; font-size: 18px !important; color: var(--muted); }
.gift-inner .buy { width: 100%; min-width: 0; }
.gift-inner .small { font-size: 17px !important; line-height: 1.5; color: var(--muted); margin-top: 14px; }
.gift-inner .link-button { font-size: 19px; color: var(--burgundy); }
.turnstile-box { position: fixed; right: 12px; bottom: 12px; z-index: 50; }

/* ---------- Other pages (thank-you, download, refund, privacy, terms, 404): the same chrome, cream pages ---------- */
.preview-banner { background: #fff4d6; color: #5a4300; text-align: center; font-size: 16px; padding: 8px 12px; border-bottom: 1px solid #ecd9a0; }
.download { display: block; text-align: center; text-decoration: none; background: var(--burgundy); color: #FFF7EE; font-weight: 700; font-size: 26px; padding: 22px; border-radius: 12px; box-shadow: 0 3px 0 var(--button-edge), inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px rgba(233, 201, 143, 0.9); margin: 18px 0 8px; }
.download:hover { background: var(--band); }
.file-meta { text-align: center; font-size: 16px; color: var(--muted); margin: 0 0 6px; word-break: break-all; }
.tips { margin: 18px 0; }
.prose h2 { font-size: 26px; margin: 26px 0 6px; }
.prose p { margin: 0 0 12px; }
.legal { background: var(--cream-deep); border-radius: 12px; padding: 18px 20px; font-size: 19px; }

/* Admin (unchanged) */
.wrap.wide { max-width: 1100px; }
.admin h2 { margin-top: 30px; font-size: 26px; }
.admin table { border-collapse: collapse; width: 100%; font-size: 17px; background: var(--white); }
.admin th, .admin td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.admin .kv th { width: 210px; background: var(--cream-deep); }
.table-wrap { overflow-x: auto; }
.admin-inline { display: inline-block; margin: 6px 8px 6px 0; }
.admin-form { display: grid; gap: 12px; max-width: 420px; }
.admin input { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; min-height: 52px; }
.ok { color: #1d6b33; font-weight: 700; }
.bad { color: #a01c1c; font-weight: 700; }

/* ---------- Computers ---------- */
@media (min-width: 760px) {
  body { font-size: 21px; }
  h1 { font-size: 54px; }
  h2 { font-size: 40px; }
  section { padding: 64px 0; }
  .buy { display: inline-block; width: auto; min-width: 440px; }
  .buttons { justify-items: center; }

  .bar-inner { padding: 7px 12px; gap: 10px 18px; }
  .bar-text { flex-direction: row; gap: 4px 14px; }
  .bar-label { font-size: 18px; }
  .timer-bar .cd-box b { font-size: 20px; }
  .timer-bar .cd-box small { font-size: 11px; }

  .topbar { padding: 0 64px; }
  .page-sales .topbar .wrap, .topbar .wrap { max-width: 1160px; justify-content: flex-start; padding: 6px 0; margin: 0 auto; border-bottom: 1px solid rgba(226, 190, 124, 0.32); }
  .brand { font-size: 20px; padding: 8px 0; }
  .hero { padding: 34px 64px 56px; background-image: radial-gradient(70% 90% at 75% 45%, var(--glow) 0%, rgba(90, 33, 33, 0) 60%); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: clamp(32px, 5.6vw, 72px); align-items: center; margin: 0 auto; text-align: left; }
  .hero .wrap > * { grid-column: 1; }
  .hero .portrait { grid-row: 2; width: 104px; height: 104px; margin: 6px 0 22px 6px; box-shadow: 0 0 0 4px #4A1718, 0 0 0 5px rgba(226, 190, 124, 0.7), 0 12px 30px rgba(0, 0, 0, 0.35); }
  .hero h1 { grid-row: 3; font-size: clamp(36px, 4.3vw, 56px); margin: 0; max-width: none; }
  .hero h1::after { width: 142px; margin: 18px 0 20px; background: var(--cross-dark) left center / 12px 18px no-repeat, linear-gradient(var(--gold-dark), var(--gold-dark)) right center / 120px 1px no-repeat; }
  .hero .lead { grid-row: 4; font-size: 24px; margin: 0; max-width: 30em; }
  .hero-actions { grid-row: 5; align-items: flex-start; margin: 0; }
  .hero-actions .buy { width: auto; min-width: 440px; margin: 18px 0 4px; }
  .hero .see-inside { padding: 12px 0; }
  .hero .wrap > .hero-covers { grid-column: 2; grid-row: 1 / -1; }

  .facts { padding: 40px 0; }
  .facts .wrap { max-width: 1108px; padding: 0 64px; }
  .fact-strip { grid-template-columns: repeat(4, 1fr); }
  .fact-strip b { font-size: 44px; }

  .buy-section { padding: 72px 0; }
  .buy-section .wrap { padding: 0 56px; max-width: 1092px; }
  .pricebox { border-radius: 50% 50% 16px 16px / 140px 140px 16px 16px; padding: 60px 52px 40px; }
  .pricebox::before { border-radius: 50% 50% 10px 10px / 134px 134px 10px 10px; }
  .price-heading { font-size: 40px; }
  .price-rows > li { padding: 22px 34px 20px; }
  .price-name { font-size: 27px; }
  .price-now { font-size: 44px; }
  .cd { gap: 8px; }
  .cd-box { min-width: 64px; }
  .cd-box b { font-size: 32px; }

  .samples { grid-template-columns: 1fr 1fr; }
  .samples.three { grid-template-columns: 1fr 1fr 1fr; } /* three pages in one row, none left alone */

  .set-list { margin-top: 44px; }
  .niche { width: 100%; padding: 46px 30px 0; }
  .sill { width: 100%; }
  .photo-frame { margin-top: 64px; }
  .set-section .muted { margin-top: 52px; }

  summary { font-size: 22px; }
  details p { padding-right: 50px; }

  .letter { padding: 52px 52px 44px; }
  .letter h2 { font-size: 36px; }
  .promise { padding: 46px 52px; }
  .promise h2 { font-size: 32px; }

  .closing p { font-size: 28px; }
  .site-footer .wrap { padding: 6px 64px 0; }
  .footer-hills .sun { width: 140px; }

  .gift-inner { padding: 30px 36px 16px; }
  .gift-inner h2 { font-size: 32px; }
}
@media (max-width: 759px) {
  .letter h2 { font-size: 30px; }
}
@media (min-width: 1600px) {
  body { font-size: 26px; }
  :root { --measure: 860px; }
  h1 { font-size: 64px; }
  .buy { font-size: 28px; }
  .pricebox .notice, .countdown { font-size: 26px; }
}

/* ---------- Calm motion: the hero's covers float, gold dust drifts round them, a soft lift on hover on computers,
   and sections fade in once as she scrolls. Nothing moves near the buy buttons and nothing flashes. All of it stops
   when the device asks for reduced motion. ---------- */
@keyframes lindaFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--rise, -6px), 0); } }
@keyframes lindaRise220 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -220px, 0); } }
@keyframes lindaRise360 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -360px, 0); } }
@keyframes lindaSway { 0%, 100% { transform: translate3d(-12px, 0, 0); } 50% { transform: translate3d(12px, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-covers .float { animation: lindaFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; will-change: transform; }
  .hero-covers .dust-a { animation: lindaRise220 46s linear infinite; will-change: transform; }
  .hero-covers .dust-sway { animation: lindaSway 15s ease-in-out infinite; will-change: transform; }
  .hero-covers .dust-b { animation: lindaRise360 80s linear infinite; will-change: transform; }
  .hero.is-offscreen .float, .hero.is-offscreen .dust-a, .hero.is-offscreen .dust-sway, .hero.is-offscreen .dust-b { animation-play-state: paused; }
  html.reveal-on .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
  .reveal { transition: opacity 900ms ease, transform 900ms var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .hero-covers .tilt { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .hero-covers .float:hover .tilt { transform: rotate(var(--rot, 0deg)) translateY(-8px); box-shadow: 0 34px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(243, 220, 174, 0.35); }
    .pricebox { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .buy-section .wrap:hover .pricebox { transform: translate3d(0, -4px, 0); box-shadow: 0 36px 70px -30px rgba(94, 27, 37, 0.55), 0 2px 0 rgba(201, 163, 92, 0.25); }
    .set-list img { transition: transform 450ms var(--ease), box-shadow 450ms ease; }
    .set-list li:hover img { transform: translate3d(0, -8px, 0); box-shadow: 0 30px 46px -16px rgba(62, 19, 18, 0.55); }
  }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }