/* ==========================================================================
   Precision Purpose — funnel design system
   Archetype: Fintech & Trust. Precise, calm, trustworthy.
   Numbers are first-class citizens. Accuracy via alignment + generous space.

   Note: webfonts are not loaded (the preview sandbox blocks external CDNs and
   binary font files cannot be written locally). The stacks below name IBM Plex
   first so it is used where installed, then fall back to the system UI face.
   ========================================================================== */

:root{
  color-scheme: light dark;

  /* --- color tokens (canonical, one definition, both themes) --- */
  --bg:              light-dark(oklch(0.985 0.005 255), oklch(0.17 0.024 258));
  --bg-subtle:       light-dark(oklch(0.965 0.008 255), oklch(0.2 0.026 258));
  --surface:         light-dark(oklch(1 0 0),           oklch(0.22 0.028 258));
  --surface-hover:   light-dark(oklch(0.95 0.01 255),   oklch(0.26 0.03 258));
  --border-subtle:   light-dark(oklch(0.92 0.011 255),  oklch(0.28 0.03 258));
  --border:          light-dark(oklch(0.83 0.014 255),  oklch(0.38 0.032 258));
  --text-muted:      light-dark(oklch(0.52 0.025 255),  oklch(0.72 0.028 258));
  --text:            light-dark(oklch(0.23 0.03 255),   oklch(0.96 0.008 258));
  --accent-subtle:   light-dark(oklch(0.95 0.04 255),   oklch(0.27 0.06 255));
  --accent-border:   light-dark(oklch(0.81 0.09 255),   oklch(0.4 0.1 255));
  --accent:          light-dark(oklch(0.52 0.16 255),   oklch(0.62 0.15 255));
  --accent-hover:    light-dark(oklch(0.46 0.16 255),   oklch(0.68 0.14 255));
  --accent-contrast: light-dark(oklch(0.99 0 0),        oklch(0.17 0.03 255));
  --success:         light-dark(oklch(0.52 0.13 152),   oklch(0.72 0.15 152));
  --warn:            light-dark(oklch(0.55 0.13 75),    oklch(0.79 0.14 80));
  --danger:          light-dark(oklch(0.52 0.19 27),    oklch(0.7 0.17 27));

  /* --- type --- */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- radius --- */
  --r-control: 6px;
  --r-card: 10px;
  --r-panel: 14px;

  /* --- elevation (reserved for things that genuinely float) --- */
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);

  /* --- spacing, 4px base --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* --- layout --- */
  --wrap:1128px;
  --measure:672px;
  --ease: cubic-bezier(.32,.72,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ==========================================================================
   TYPE LADDER
   ========================================================================== */

h1,h2,h3,h4{ margin:0 0 var(--s4); color:var(--text); }

h1{ font-size:32px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; }
h2{ font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; }
h3{ font-size:17px; font-weight:600; letter-spacing:-0.005em; line-height:1.35; }
h4{ font-size:15px; font-weight:600; line-height:1.4; }

/* Hero title — the single dominant figure on a page. Used once per view. */
.h-display{
  font-size:clamp(34px, 5.2vw, 52px);
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.08;
  margin:0 0 var(--s5);
}

p{ margin:0 0 var(--s4); }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:17px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:var(--measure);
}

.caption{ font-size:13px; font-weight:500; line-height:1.45; color:var(--text-muted); }

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s3);
}

.measure{ max-width:var(--measure); }
.center{ text-align:center; }

strong{ font-weight:600; }

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .18s var(--ease);
}
a:hover{ color:var(--accent-hover); }

hr{ border:0; border-top:1px solid var(--border-subtle); margin:var(--s12) 0; }

/* Numbers are first-class citizens. */
.num,
.money,
td.num,
.stat-value,
.score-value,
.bar-value,
.line-value{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Gain/loss pair — semantic only, never color alone. */
.delta-up{ color:var(--success); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.delta-down{ color:var(--danger); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.delta-up::before{ content:"▲ "; font-size:.8em; }
.delta-down::before{ content:"▼ "; font-size:.8em; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s6); }
.wrap-narrow{ width:100%; max-width:768px; margin-inline:auto; padding-inline:var(--s6); }

section{ padding-block:var(--s20); }
section.tight{ padding-block:var(--s12); }
.bg-subtle{ background:var(--bg-subtle); }
.rule-top{ border-top:1px solid var(--border-subtle); }

/* Full-bleed band — breaks the centered-hero rhythm. */
.band{
  background:var(--accent-subtle);
  border-block:1px solid var(--accent-border);
  padding-block:var(--s16);
}

.grid{ display:grid; gap:var(--s6); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Deliberately asymmetric splits — not three equal cards. */
.split{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s16); align-items:start; }
.split-tight{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s10); align-items:start; }
.split-flip{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:var(--s10); align-items:start; }

@media (max-width:1024px){
  .split,.split-tight,.split-flip{ grid-template-columns:minmax(0,1fr); gap:var(--s10); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  section{ padding-block:var(--s12); }
  .g2,.g3{ grid-template-columns:minmax(0,1fr); }
  .wrap,.wrap-narrow{ padding-inline:var(--s4); }
  h1{ font-size:28px; }
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead{
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
  position:sticky; top:0; z-index:40;
}
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s6); min-height:60px; }

.brand{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
  color:var(--text); text-decoration:none;
}
.brand:hover{ color:var(--text); }
.brand svg{ color:var(--accent); flex:none; }

.masthead nav{ display:flex; align-items:center; gap:var(--s6); }
.masthead nav a{
  font-size:13px; font-weight:500; color:var(--text-muted); text-decoration:none;
}
.masthead nav a:hover{ color:var(--text); }
.masthead nav a[aria-current="page"]{ color:var(--text); }
@media (max-width:768px){ .masthead nav{ display:none; } }

/* ==========================================================================
   BUTTONS + CONTROLS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.2;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:var(--r-control);
  background:var(--accent);
  color:var(--accent-contrast);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover{ background:var(--accent-hover); color:var(--accent-contrast); }
.btn:active{ transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--surface-hover); color:var(--text-muted);
  border-color:var(--border-subtle); cursor:not-allowed; transform:none;
}

.btn-lg{ font-size:16px; padding:16px 28px; width:100%; max-width:440px; }
.btn-block{ width:100%; max-width:none; }

.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ background:var(--surface-hover); color:var(--text); }

.btn-quiet{ background:transparent; color:var(--text-muted); border-color:transparent; font-weight:500; }
.btn-quiet:hover{ background:var(--surface-hover); color:var(--text); }

.cta-note{ font-size:13px; font-weight:500; color:var(--text-muted); margin-top:var(--s3); }

.decline{
  display:inline-block; margin-top:var(--s5);
  font-size:13px; font-weight:500; color:var(--text-muted);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.decline:hover{ color:var(--text); }

/* Visible keyboard focus everywhere. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-control);
}

/* ==========================================================================
   SURFACES — most blocks flat with a 1px border; shadow reserved for floats
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  padding:var(--s6);
}
a.card,.card-interactive{ text-decoration:none; color:inherit; cursor:pointer; transition:background .18s var(--ease), border-color .18s var(--ease); }
a.card:hover,.card-interactive:hover{ background:var(--surface-hover); border-color:var(--border); }

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:var(--s10);
}
/* The one focal card per view that genuinely floats. */
.panel-raised{ box-shadow:var(--shadow); border-color:var(--border-subtle); }

.callout{
  background:var(--accent-subtle);
  border:1px solid var(--accent-border);
  border-radius:var(--r-card);
  padding:var(--s6);
}
.callout h3{ margin-bottom:var(--s2); }

/* Author story — the personal turning-point block, set as a quiet pull-quote. */
.author-story{
  margin:0;
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--accent);
  border-radius:var(--r-card);
  padding:var(--s8);
}
.author-story p{ font-size:16px; line-height:1.62; color:var(--text); margin:0 0 var(--s4); }
.author-story p em{ color:var(--accent); font-style:italic; }
.author-story .author-sign{
  font-size:14px; font-weight:600; color:var(--text-muted);
  margin:var(--s5) 0 0; font-style:normal;
}

/* Testimonials — real, attributed client quotes. Left-accent motif matches
   the author pull-quote, lighter weight for the grid. */
.testimonial{
  margin:0;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--accent);
  border-radius:var(--r-card);
  padding:var(--s6);
}
.testimonial blockquote{ margin:0; }
.testimonial blockquote p{ font-size:15px; line-height:1.62; color:var(--text); margin:0 0 var(--s4); }
.testimonial figcaption{ margin-top:auto; padding-top:var(--s2); }
.testimonial figcaption cite{
  display:block; font-style:normal; font-weight:600; font-size:14px; color:var(--text);
}
.testimonial figcaption .role{
  display:block; font-size:13px; font-weight:500; color:var(--text-muted); margin-top:2px;
}

/* ==========================================================================
   KEY FIGURES — top of the view, at-a-glance tier
   ========================================================================== */

.figures{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; border:1px solid var(--border-subtle); border-radius:var(--r-card); overflow:hidden; background:var(--surface); }
.figure{ padding:var(--s6); border-right:1px solid var(--border-subtle); }
.figure:last-child{ border-right:0; }
.figure-label{ font-size:13px; font-weight:500; color:var(--text-muted); margin:0 0 var(--s2); }
.stat-value{ font-size:28px; font-weight:600; line-height:1.1; letter-spacing:-0.02em; display:block; }
@media (max-width:768px){
  .figure{ border-right:0; border-bottom:1px solid var(--border-subtle); }
  .figure:last-child{ border-bottom:0; }
}

/* ==========================================================================
   LISTS
   ========================================================================== */

ul.clean,ol.clean{ padding-left:var(--s5); margin:0 0 var(--s4); }
ul.clean li,ol.clean li{ margin-bottom:var(--s2); }

ul.check{ list-style:none; padding:0; margin:0 0 var(--s4); }
ul.check li{ position:relative; padding-left:var(--s8); margin-bottom:var(--s3); }
ul.check li::before{
  content:""; position:absolute; left:2px; top:7px;
  width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* Icon sits with its label at text scale — no tile grid. */
.icon-row{ display:flex; gap:var(--s3); align-items:flex-start; }
.icon-row svg{ flex:none; color:var(--accent); margin-top:2px; }
.icon-row h4{ margin-bottom:var(--s1); }

/* ==========================================================================
   TABLES — drill-down tier, aligned digit-for-digit
   ========================================================================== */

table{ width:100%; border-collapse:collapse; font-size:15px; margin:0 0 var(--s6); }
caption{ text-align:left; font-size:13px; font-weight:500; color:var(--text-muted); padding-bottom:var(--s3); }
th,td{ text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--border-subtle); vertical-align:top; }
th{ font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted); }
th.num,td.num{ text-align:right; white-space:nowrap; }
tbody tr:hover{ background:var(--surface-hover); }
tr.total td{ border-top:1px solid var(--border); border-bottom:0; font-weight:600; }

/* ==========================================================================
   AUDIT QUIZ
   ========================================================================== */

.quiz{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-panel);
  padding:var(--s10);
  box-shadow:var(--shadow);
}
@media (max-width:768px){ .quiz{ padding:var(--s6); } }

.progress{ height:4px; background:var(--border-subtle); border-radius:999px; overflow:hidden; margin-bottom:var(--s8); }
.progress > i{ display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s var(--ease); }

.q-count{ font-size:13px; font-weight:500; color:var(--text-muted); margin:0 0 var(--s3); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.q-text{ font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:1.3; margin:0 0 var(--s6); }

.opts{ display:flex; flex-direction:column; gap:var(--s2); }
.opt{
  display:block; width:100%; text-align:left;
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1.45; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-control);
  padding:14px 16px;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.opt:hover{ background:var(--surface-hover); }
.opt[aria-pressed="true"],.opt.is-selected{
  background:var(--accent-subtle); border-color:var(--accent); font-weight:500;
}

/* score readout */
.score-head{ display:flex; align-items:baseline; gap:var(--s3); }
.score-value{ font-size:56px; font-weight:600; line-height:1; letter-spacing:-0.03em; }
.score-den{ font-size:17px; color:var(--text-muted); font-family:var(--mono); }

.bars{ display:flex; flex-direction:column; gap:var(--s3); margin:var(--s8) 0; }
.bar-row{ display:grid; grid-template-columns:150px minmax(0,1fr) 52px; gap:var(--s4); align-items:center; font-size:15px; }
.bar-label{ color:var(--text-muted); }
.bar-track{ height:8px; background:var(--border-subtle); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:999px; transition:width .6s var(--ease); }
.bar-value{ text-align:right; font-size:13px; color:var(--text-muted); }
.bar-row.is-weak .bar-label{ color:var(--text); font-weight:600; }
.bar-row.is-weak .bar-fill{ background:var(--warn); }
.bar-row.is-weak .bar-value{ color:var(--text); }
@media (max-width:560px){ .bar-row{ grid-template-columns:110px minmax(0,1fr) 44px; gap:var(--s3); font-size:13px; } }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field{ margin-bottom:var(--s5); }
label{ display:block; font-size:13px; font-weight:500; color:var(--text-muted); margin-bottom:var(--s2); }

input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;
  font-family:var(--sans); font-size:15px; line-height:1.5; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-control);
  padding:11px 14px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
input::placeholder,textarea::placeholder{ color:var(--text-muted); }
input:hover,select:hover,textarea:hover{ background:var(--surface-hover); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-subtle); }
input:disabled,select:disabled,textarea:disabled{ background:var(--bg-subtle); color:var(--text-muted); cursor:not-allowed; }
textarea{ min-height:120px; resize:vertical; }
select{ cursor:pointer; }

.hint{ font-size:13px; font-weight:500; color:var(--text-muted); margin-top:var(--s2); }

/* inline error — plain human message, never color alone */
.field-error input,.field-error select,.field-error textarea{ border-color:var(--danger); }
.error-msg{ display:flex; gap:var(--s2); align-items:flex-start; font-size:13px; font-weight:500; color:var(--danger); margin-top:var(--s2); }
.error-msg svg{ flex:none; margin-top:1px; }

/* ==========================================================================
   ORDER BUMP + SUMMARY
   ========================================================================== */

.bump{
  background:var(--accent-subtle);
  border:1px solid var(--accent-border);
  border-radius:var(--r-card);
  padding:var(--s5);
  transition:border-color .18s var(--ease);
}
.bump:has(input:checked){ border-color:var(--accent); }
.bump-head{ display:flex; gap:var(--s3); align-items:flex-start; cursor:pointer; margin-bottom:var(--s3); }
.bump-head input[type=checkbox]{ width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }
.bump-head span{ font-size:15px; font-weight:600; color:var(--text); line-height:1.4; }
.bump p{ font-size:13px; font-weight:500; color:var(--text-muted); margin-bottom:var(--s2); }

.summary{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  padding:var(--s6);
  position:sticky; top:84px;
}
.line{ display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--border-subtle); font-size:15px; }
.line:last-of-type{ border-bottom:0; }
.line-label{ min-width:0; }
.line-value{ white-space:nowrap; }
.line-total{ display:flex; justify-content:space-between; gap:var(--s4); padding-top:var(--s4); margin-top:var(--s2); border-top:1px solid var(--border); font-size:17px; font-weight:600; }
.line-total .line-value{ font-size:20px; }
.included{ color:var(--success); font-weight:500; font-family:var(--mono); }
.strike{ color:var(--text-muted); text-decoration:line-through; }

/* ==========================================================================
   STATES — empty, loading, error
   ========================================================================== */

.state-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4);
  background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--r-card); padding:var(--s10);
}
.state-empty p{ color:var(--text-muted); margin:0; max-width:46ch; }

.state-error{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--surface); border:1px solid var(--danger);
  border-radius:var(--r-card); padding:var(--s5);
}
.state-error svg{ flex:none; color:var(--danger); margin-top:2px; }
.state-error p{ margin:0; font-size:15px; }

.skeleton{
  background:linear-gradient(90deg, var(--bg-subtle) 0%, var(--surface-hover) 50%, var(--bg-subtle) 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--r-control);
}
.skeleton-line{ height:12px; margin-bottom:var(--s3); }
.skeleton-line:last-child{ width:60%; margin-bottom:0; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent-border); border-top-color:var(--accent);
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn .spinner{ border-color:color-mix(in oklab, var(--accent-contrast) 40%, transparent); border-top-color:var(--accent-contrast); }

/* ==========================================================================
   TRUST ROW, BADGES, FAQ
   ========================================================================== */

.trust{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; font-size:13px; font-weight:500; color:var(--text-muted); }
.trust span{ display:inline-flex; align-items:center; gap:var(--s2); }
.trust svg{ flex:none; }

.badge{
  display:inline-flex; align-items:center; gap:var(--s1);
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  padding:3px 9px; border-radius:var(--r-control);
  background:var(--accent-subtle); color:var(--accent); border:1px solid var(--accent-border);
}
.badge-warn{ background:color-mix(in oklab, var(--warn) 14%, var(--surface)); color:var(--warn); border-color:color-mix(in oklab, var(--warn) 40%, transparent); }

details{ border-bottom:1px solid var(--border-subtle); }
details summary{
  display:flex; justify-content:space-between; gap:var(--s4); align-items:center;
  list-style:none; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--text);
  padding:var(--s5) 0;
}
details summary::-webkit-details-marker{ display:none; }
details summary svg{ flex:none; color:var(--text-muted); transition:transform .2s var(--ease); }
details[open] summary svg{ transform:rotate(180deg); }
details .faq-body{ padding:0 0 var(--s5); color:var(--text-muted); max-width:var(--measure); }

/* ==========================================================================
   BOOK COVER — flat, deliberate color, no decorative gradient identity
   ========================================================================== */

/* Mirrors the printed cover: slate-blue field, gold wordmark, target mark. */
.book{
  width:100%; max-width:300px; aspect-ratio:2/3;
  background:linear-gradient(175deg, #9aa6c6 0%, #8794ba 45%, #3f4a72 100%);
  color:#fff;
  border-radius:2px var(--r-control) var(--r-control) 2px;
  padding:var(--s8) var(--s6) var(--s6);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:var(--shadow);
  border-left:5px solid #2e3557;
}
.book-title{
  font-size:30px; font-weight:700; letter-spacing:0.01em; line-height:1;
  margin:0; color:#c8a45c;
  text-shadow:0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.28);
}
.book-title .bt-thin{
  display:block; font-size:22px; font-weight:400; letter-spacing:0.09em;
  color:#5c6689; text-shadow:none; margin-bottom:2px;
}
.book-mark{ margin:var(--s6) 0; color:#c8a45c; opacity:.95; }
.book-sub{ font-size:13px; font-weight:500; line-height:1.5; margin:0; color:#fff; }
.book-sub em{ display:block; font-size:19px; font-style:italic; color:#c8a45c; margin:2px 0; }
.book-author{
  margin-top:auto; padding-top:var(--s5);
  font-size:15px; font-weight:600; letter-spacing:0.02em; color:#c8a45c;
}

/* Real cover photograph — same footprint, radius, spine and elevation as the
   CSS mockup it replaces, so the hero surface hierarchy is unchanged. */
.book-cover{
  display:block;
  width:100%; max-width:340px; height:auto;
  margin-inline:auto;
  border-radius:2px var(--r-control) var(--r-control) 2px;
  box-shadow:var(--shadow);
  border-left:5px solid #2e3557;
}
@media (max-width:1024px){
  .book-cover{ max-width:300px; }
}

/* Compact cover for the checkout summary — seeing the product cuts abandonment.
   Same 150px footprint the CSS mockup held, thinner spine to match the smaller scale. */
.book-cover-sm{
  max-width:150px;
  margin:0 auto var(--s5);
  border-left-width:3px;
}
@media (max-width:1024px){
  .book-cover-sm{ max-width:150px; }
}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */

.sticky-cta{
  position:fixed; inset-inline:0; bottom:0; z-index:50;
  display:none;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border-subtle);
  padding:var(--s3) var(--s4);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
}
.sticky-cta .btn{ width:100%; max-width:none; }
@media (max-width:768px){
  .sticky-cta{ display:block; }
  body.has-sticky{ padding-bottom:84px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{ border-top:1px solid var(--border-subtle); padding-block:var(--s10); font-size:13px; font-weight:500; color:var(--text-muted); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center; }
footer a{ color:var(--text-muted); text-decoration:none; }
footer a:hover{ color:var(--text); }
footer nav{ display:flex; flex-wrap:wrap; gap:var(--s5); }

/* ==========================================================================
   UTILITY
   ========================================================================== */

.hide{ display:none !important; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-4{ margin-top:var(--s4); } .mt-6{ margin-top:var(--s6); }
.mt-8{ margin-top:var(--s8); } .mt-10{ margin-top:var(--s10); }
.stack-2 > * + *{ margin-top:var(--s2); }
.stack-4 > * + *{ margin-top:var(--s4); }
.stack-6 > * + *{ margin-top:var(--s6); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wrap-anywhere{ overflow-wrap:anywhere; }

.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;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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