/* Sales Page editorial template — ported from Claude Design "Sales Page.html"
   Loaded via <link rel="stylesheet"> in pages/livros/[slug].tsx and the editor.
   All rules are scoped under `.sp-root`. */

/* ───────────── tokens ───────────── */
/* Font + spacing tokens live on :root — they're not per-page configurable and
   the @media queries below depend on them. Color tokens live on .sp-root so
   they can be overridden per page via inline style (see lib/section-style.ts
   paletteToStyle and book.page_config.palette). */
:root {
  --serif-display:'Cormorant Garamond','Times New Roman',serif;
  --serif-body:'EB Garamond',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:'Inter',system-ui,sans-serif;

  --fs-mono:11px;
  --fs-body:18px;
  --fs-lead:22px;
  --fs-h3:28px;
  --fs-h2:44px;
  --fs-h1:72px;
  --fs-display:96px;

  --maxw:1180px;
  --gutter:32px;
  --section-y:140px;
  --section-y-sm:96px;
}

/* Responsive token overrides — single source for fluid sizing. Every rule that
   already reads var(--fs-*), var(--section-y), var(--gutter), var(--maxw) inherits
   these without further edits. Aligned with the editor's CANVAS_WIDTHS
   (tablet=768, mobile=375) so the iframe preview matches the public route. */
@media (max-width:1024px){
  :root{
    --fs-display:72px; --fs-h1:54px; --fs-h2:36px;
    --fs-h3:24px;      --fs-lead:20px; --fs-body:17px;
    --section-y:96px;  --section-y-sm:72px;
    --gutter:24px;     --maxw:960px;
  }
}
@media (max-width:767px){
  :root{
    --fs-display:48px; --fs-h1:38px; --fs-h2:28px;
    --fs-h3:21px;      --fs-lead:17px; --fs-body:16px;
    --section-y:64px;  --section-y-sm:48px;
    --gutter:18px;
  }
}

/* Scoped to .sp-root to avoid leaking into the dashboard.
   Color tokens default to the Luxury Brown preset; per-page palette overrides
   are applied as inline style on this element. */
.sp-root {
  --bg:#f5f0e6;
  --bg-2:#ece4d2;
  --bg-3:#1a1612;
  --surface:#fbf8f1;
  --line:rgba(28,22,12,.14);
  --line-strong:rgba(28,22,12,.28);
  --ink:#1a1612;
  --ink-2:#3d362a;
  --ink-3:#6c6453;
  --ink-4:#9a9279;
  --gold:#7a4f1e;
  --gold-2:#9a6a2e;
  --gold-3:#3a2410;
  --gold-soft:rgba(122,79,30,.14);
  --btn-from:#8a5a24;
  --btn-to:#5e3a14;
  --btn-ink:#fbf2dc;
  --danger:#b04a3b;

  background:var(--bg); color:var(--ink);
  font-family:var(--serif-body); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","onum";
  color-scheme:light;
}

/* Editor-only: pulse highlight when a section is selected in the left list.
   The class is added/removed via JS in pages/dashboard/livro/[id]/pagina.tsx. */
.sp-root [data-sp-section].sp-section-flash {
  animation: sp-section-flash 1.5s ease-out;
  position: relative;
  z-index: 1;
}
@keyframes sp-section-flash {
  0%   { box-shadow: inset 0 0 0 3px var(--gold), 0 0 24px 4px rgba(122,79,30,.45); }
  60%  { box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px 2px rgba(122,79,30,.25); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.sp-root *{box-sizing:border-box}
.sp-root ::selection{background:var(--gold); color:var(--bg)}
.sp-root a{color:inherit; text-decoration:none}
.sp-root button{font-family:inherit}
.sp-root img, .sp-root svg{max-width:100%; height:auto}

/* Reset for headings — globals.css (dashboard dark theme) sets h1-h6 to a near-white
   color and Playfair font with weight 600, which leaks into .sp-root via direct
   element selector (beats inheritance). Each section component still overrides where
   needed, but this base reset prevents headings from rendering in low-contrast white
   on the ivory background. */
.sp-root h1, .sp-root h2, .sp-root h3, .sp-root h4, .sp-root h5, .sp-root h6 {
  color: var(--ink);
  font-family: var(--serif-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.sp-root .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

.sp-root .mono{font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.sp-root .mono-gold{color:var(--gold)}
.sp-root .rule{height:1px; background:var(--line); border:0; margin:0}
.sp-root .rule-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); border:0}

/* ───────────── nav ───────────── */
.sp-root .nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.sp-root .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); max-width:var(--maxw); margin:0 auto}
.sp-root .brand{display:flex; align-items:center; gap:12px; font-family:var(--serif-display); font-size:22px; letter-spacing:.02em}
.sp-root .brand-mark{
  width:34px; height:34px; border:1px solid var(--gold);
  display:grid; place-items:center;
  color:var(--gold); font-family:var(--serif-display); font-style:italic; font-size:18px;
  position:relative;
}
.sp-root .brand-mark::before, .sp-root .brand-mark::after{
  content:""; position:absolute; width:5px; height:5px; background:var(--gold);
  transform:rotate(45deg);
}
.sp-root .brand-mark::before{ left:-3px; top:50%; margin-top:-2.5px }
.sp-root .brand-mark::after{ right:-3px; top:50%; margin-top:-2.5px }
.sp-root .nav-links{display:flex; gap:34px; font-size:14px; font-family:var(--sans); color:var(--ink-2)}
.sp-root .nav-links a:hover{color:var(--gold)}
.sp-root .nav-cta{
  font-family:var(--sans); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--gold); color:var(--gold); cursor:pointer;
  background:transparent; transition:all .25s ease;
}
.sp-root .nav-cta:hover{background:var(--gold); color:var(--bg)}

/* ───────────── buttons ───────────── */
.sp-root .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  padding:22px 40px; border:0; cursor:pointer;
  background:linear-gradient(180deg, var(--btn-from) 0%, var(--btn-to) 100%);
  color:var(--btn-ink);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, filter .25s;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 0 rgba(0,0,0,.15),
    0 10px 24px -10px var(--gold-soft),
    0 0 0 1px color-mix(in oklab, var(--btn-to) 70%, transparent);
}
.sp-root .btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%);
  z-index:-1;
}
.sp-root .btn::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  left:-60%;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:skewX(-18deg); transition:left 3.4s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.sp-root .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 22px 50px -16px var(--gold-soft),
    0 0 0 1px color-mix(in oklab, var(--btn-from) 80%, transparent);
}
.sp-root .btn:hover::after{ left:120% }
.sp-root .btn:active{ transform:translateY(0); filter:brightness(.96) }
.sp-root .btn .arr{ transition:transform .3s ease; font-family:var(--serif-display); font-size:22px; line-height:0 }
.sp-root .btn:hover .arr{ transform:translateX(6px) }

.sp-root .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong) }
.sp-root .btn-ghost:hover{ background:transparent; color:var(--gold); border-color:var(--gold) }

.sp-root .cta-block{display:flex; flex-direction:column; align-items:center; gap:18px; padding:8px 0}
.sp-root .cta-block.left{align-items:flex-start}
.sp-root .sub-cta{font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.04em; display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.sp-root .sub-cta .dot{width:3px; height:3px; background:var(--ink-4); border-radius:50%}

/* ───────────── hero ───────────── */
.sp-root .hero{ position:relative; padding-top:64px; padding-bottom:var(--section-y); overflow:hidden }
.sp-root .hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center }
.sp-root .hero-eyebrow{display:flex; gap:14px; align-items:center; margin-bottom:28px}
.sp-root .hero-eyebrow .badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); padding:7px 12px;
  position:relative; display:inline-flex; align-items:center; gap:8px;
}
.sp-root .hero-eyebrow .badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 var(--gold);
  animation:sp-pulse 2.4s ease-out infinite;
}
@keyframes sp-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--gold) 60%, transparent) }
  70%{ box-shadow:0 0 0 10px transparent }
  100%{ box-shadow:0 0 0 0 transparent }
}
.sp-root .hero h1{
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;
  font-weight:400;
  font-size:var(--fs-h1); line-height:1.02; letter-spacing:-0.012em;
  margin:0 0 28px; color:var(--ink); text-wrap:balance;
}
.sp-root .hero h1 em{ font-style:italic; color:var(--gold); position:relative }
.sp-root .hero h1 em::after{ display:none !important }
.sp-root .hero h1 .cross{
  position:relative; display:inline;
  background:linear-gradient(180deg, transparent 0 55%, var(--gold-soft) 55% 92%, transparent 92%);
  padding:0 6px; border-radius:2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  color:var(--ink);
}
.sp-root .hero p.lead{
  font-family:var(--serif-body); font-size:var(--fs-lead); line-height:1.55;
  color:var(--ink-2); margin:0 0 40px; max-width:540px;
}
.sp-root .hero p.lead strong{color:var(--ink); font-weight:500}

/* ───────── 3D book ───────── */
.sp-root .book-stage{
  perspective:2400px; perspective-origin:60% 50%;
  display:grid; place-items:center; padding:30px 0; position:relative;
}
.sp-root .book-stage::before{
  content:""; position:absolute; inset:auto 10% -20px 10%; height:30px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(8px); z-index:0;
}
.sp-root .book{
  position:relative; width:300px; height:430px;
  transform-style:preserve-3d;
  transform:rotateY(-28deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  animation:sp-bookIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.sp-root .book:hover{ transform:rotateY(-18deg) rotateX(0deg) translateY(-4px) }
@keyframes sp-bookIn{
  from{ transform:rotateY(-50deg) rotateX(8deg) translateY(20px); opacity:0 }
  to  { transform:rotateY(-28deg) rotateX(2deg); opacity:1 }
}
.sp-root .book .face{ position:absolute; inset:0; backface-visibility:hidden }
.sp-root .book .front{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,230,180,.08), transparent 60%),
    linear-gradient(135deg, #1a1208 0%, #0c0805 100%);
  border:1px solid rgba(176,141,87,.45);
  box-shadow:
    inset 0 0 0 1px rgba(255,230,180,.04),
    inset 0 0 60px rgba(0,0,0,.5),
    0 30px 80px -20px rgba(0,0,0,.7);
  transform:translateZ(20px);
  padding:42px 32px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#f4d9a8;
}
/* Real book cover (book.capa_url): replaces editorial CSS mockup with the author's image. */
.sp-root .book .front.has-cover{
  background:#0c0805;
  padding:0;
}
.sp-root .book .front.has-cover > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.sp-root .book .front.has-cover .frame,
.sp-root .book .front.has-cover .corner{
  z-index:1;
}
.sp-root .book .front .ornament{
  width:50px; height:50px; border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold);
  font-family:var(--serif-display); font-style:italic; font-size:26px;
}
.sp-root .book .front .pub{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:rgba(244,217,168,.6); text-transform:uppercase;
}
.sp-root .book .front .title{
  font-family:var(--serif-display); font-weight:500; font-size:38px; line-height:1.02; color:#f4d9a8;
  margin-top:auto;
}
.sp-root .book .front .title em{font-style:italic; color:var(--gold-2)}
.sp-root .book .front .sub{
  font-family:var(--serif-body); font-style:italic; font-size:14px; color:rgba(244,217,168,.7);
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(176,141,87,.3);
}
.sp-root .book .front .author{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--gold);
  margin-top:18px; text-transform:uppercase;
}
.sp-root .book .front .frame{ position:absolute; inset:14px; border:1px solid rgba(176,141,87,.25); pointer-events:none }
.sp-root .book .front .corner{ position:absolute; width:18px; height:18px; border-color:var(--gold); border-style:solid; border-width:0 }
.sp-root .book .front .corner.tl{top:8px; left:8px; border-top-width:1px; border-left-width:1px}
.sp-root .book .front .corner.tr{top:8px; right:8px; border-top-width:1px; border-right-width:1px}
.sp-root .book .front .corner.bl{bottom:8px; left:8px; border-bottom-width:1px; border-left-width:1px}
.sp-root .book .front .corner.br{bottom:8px; right:8px; border-bottom-width:1px; border-right-width:1px}
.sp-root .book .spine{
  width:40px; height:430px; left:-20px;
  background:linear-gradient(90deg, #06040200 0%, #0c0805 25%, #150e07 75%, #06040200 100%),
             linear-gradient(180deg, #1a1208, #0a0604);
  transform:rotateY(-90deg) translateZ(20px);
  transform-origin:right center;
  position:absolute; top:0;
  border-left:1px solid rgba(176,141,87,.2);
  border-right:1px solid rgba(176,141,87,.2);
  display:flex; align-items:center; justify-content:center;
}
.sp-root .book .spine .spine-text{
  transform:rotate(-90deg); white-space:nowrap;
  font-family:var(--serif-display); font-size:16px; color:var(--gold); letter-spacing:.04em;
}
.sp-root .book .pages{
  width:20px; height:425px; right:-10px; top:2px;
  background:repeating-linear-gradient(90deg, #f5efde 0, #f5efde 1px, #d8cfb0 1px, #d8cfb0 2px), #ede4cb;
  transform:rotateY(90deg) translateZ(290px);
  transform-origin:left center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  position:absolute;
}
.sp-root .book .top-edge{
  width:300px; height:20px; top:-10px; left:0;
  background:repeating-linear-gradient(0deg, #f5efde 0, #f5efde 1px, #d8cfb0 1px, #d8cfb0 2px), #ede4cb;
  transform:rotateX(90deg) translateZ(215px);
  transform-origin:center bottom;
  position:absolute;
}

/* ───────────── section heads ───────────── */
.sp-root section{padding:var(--section-y) 0}
.sp-root .section-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; margin-bottom:80px; position:relative}
.sp-root .section-head .kicker{display:flex; align-items:center; gap:12px}
.sp-root .section-head .kicker::before, .sp-root .section-head .kicker::after{
  content:""; width:36px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold)); opacity:.85;
}
.sp-root .section-head .kicker::after{ background:linear-gradient(90deg, var(--gold), transparent) }
.sp-root .section-head .kicker .diamond{
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
  box-shadow:-14px 0 0 -1.5px var(--gold), 14px 0 0 -1.5px var(--gold);
  margin:0 18px;
}
.sp-root .section-head h2{
  font-family:var(--serif-display); font-weight:500;
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:-0.01em;
  margin:0; max-width:780px; text-wrap:balance;
}
.sp-root .section-head h2 em{font-style:italic; color:var(--gold); position:relative}
.sp-root .section-head h2 em::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M2 3 Q 50 0, 100 3 T 198 3' stroke='%237a4f1e' stroke-width='1.4' fill='none' opacity='0.55'/></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}
.sp-root .section-head .deck{font-family:var(--serif-body); font-style:italic; font-size:19px; color:var(--ink-2); max-width:620px; margin:0}
.sp-root .section-head::before{
  content:""; display:block; width:14px; height:14px;
  background:
    linear-gradient(45deg, transparent 46%, var(--gold) 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--gold) 46% 54%, transparent 54%);
  margin:0 auto -4px; opacity:.7;
}

/* ───────────── benefits ───────────── */
.sp-root .benefits-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.sp-root .benefit{
  padding:42px 38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px; min-height:240px;
  transition:background .45s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  position:relative; overflow:hidden; isolation:isolate;
}
.sp-root .benefit::before{
  content:attr(data-roman); position:absolute; right:-20px; bottom:-50px;
  font-family:var(--serif-display); font-style:italic; font-weight:400;
  font-size:200px; line-height:1; color:var(--gold);
  opacity:.06; pointer-events:none; transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.sp-root .benefit::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 0%), var(--gold-soft), transparent 55%);
  opacity:0; transition:opacity .45s ease;
}
.sp-root .benefit:hover{
  background:var(--surface);
  transform:translateY(-3px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.35), inset 0 1px 0 var(--gold-soft);
}
.sp-root .benefit:hover::before{ opacity:.18; transform:translate(-10px, -16px) rotate(-5deg) }
.sp-root .benefit:hover::after{ opacity:.55 }
.sp-root .benefit .num{ transition:color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1) }
.sp-root .benefit:hover .num{ transform:translateX(4px) }
.sp-root .benefit h3{ transition:color .35s ease }
.sp-root .benefit:hover h3{ color:var(--gold-2) }
.sp-root .benefit .num{
  font-family:var(--serif-display); font-style:italic; font-size:54px; line-height:1;
  color:var(--gold); font-weight:400;
}
.sp-root .benefit h3{
  font-family:var(--serif-display); font-weight:500; font-size:24px; line-height:1.2; margin:0; color:var(--ink);
  text-wrap:balance;
}
.sp-root .benefit p{margin:0; color:var(--ink-2); font-size:17px; line-height:1.55}
.sp-root .benefits-cta{margin-top:80px; display:grid; place-items:center; gap:30px}
.sp-root .benefits-cta::before{
  content:""; display:block; width:240px; height:24px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'><g stroke='%237a4f1e' stroke-width='1' fill='none' opacity='0.6'><line x1='0' y1='12' x2='90' y2='12'/><line x1='150' y1='12' x2='240' y2='12'/></g><g fill='%237a4f1e' opacity='0.85'><circle cx='110' cy='12' r='1.5'/><path d='M120 4 L124 12 L120 20 L116 12 Z'/><circle cx='130' cy='12' r='1.5'/></g></svg>");
  background-repeat:no-repeat; background-position:center;
}
/* ───────── for-whom + section alternation ───────── */
.sp-root .sec-alt{ background:var(--bg-2) }
.sp-root .for-whom{background:var(--bg)}
.sp-root .reach{background:var(--bg); padding:var(--section-y-sm) 0}
.sp-root .fw-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line);
}
.sp-root .fw-col{padding:48px 44px; transition:background .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden}
.sp-root .fw-col::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at 50% 0%, currentColor, transparent 70%);
  opacity:0; transition:opacity .5s ease; color:transparent;
}
.sp-root .fw-col.yes:hover::after{ color:#3d8a47; opacity:.06 }
.sp-root .fw-col.no:hover::after{ color:#a64a3b; opacity:.06 }
.sp-root .fw-col:hover{ transform:translateY(-2px) }
.sp-root .fw-list li{ transition:transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease }
.sp-root .fw-list li:hover{ transform:translateX(6px) }
.sp-root .fw-list .marker{ transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.sp-root .fw-list li:hover .marker{ transform:scale(1.25) }
.sp-root .fw-col + .fw-col{border-left:1px solid var(--line)}
.sp-root .fw-col h3{
  font-family:var(--serif-display); font-weight:500; font-size:26px; margin:0 0 6px;
  display:flex; align-items:center; gap:14px;
}
.sp-root .fw-col .h-mark{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid currentColor; font-family:var(--serif-display); font-size:18px;
}
.sp-root .fw-col.yes{ background:linear-gradient(180deg, color-mix(in oklab, #2f7a3a 7%, transparent), transparent 80%) }
.sp-root .fw-col.no { background:linear-gradient(180deg, color-mix(in oklab, #b04a3b 7%, transparent), transparent 80%) }
.sp-root .fw-col.yes h3{color:#3d8a47}
.sp-root .fw-col.no  h3{color:#a64a3b}
.sp-root .fw-col.yes .h-mark{color:#3d8a47; border-color:#3d8a47}
.sp-root .fw-col.no  .h-mark{color:#a64a3b; border-color:#a64a3b}
.sp-root .yes .fw-list .marker{color:#3d8a47}
.sp-root .no  .fw-list .marker{color:#a64a3b}
.sp-root .fw-col .sub{font-family:var(--serif-body); font-style:italic; color:var(--ink-3); font-size:15px; margin-bottom:30px}
.sp-root .fw-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px}
.sp-root .fw-list li{
  display:flex; gap:16px; align-items:baseline; padding-bottom:18px; border-bottom:1px dashed var(--line);
  font-size:17px; color:var(--ink-2);
}
.sp-root .fw-list > li:last-child,
.sp-root .fw-list > .sp-edit-item:last-child > li{border-bottom:0; padding-bottom:0}
.sp-root .fw-list .marker{ flex-shrink:0; width:18px; font-family:var(--serif-display); font-size:20px; line-height:1 }
.sp-root .no  .fw-list li{color:var(--ink-3)}

/* ───────── testimonials ───────── */
.sp-root .tcar{position:relative}
.sp-root .tcar-track{
  display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:6px 0 30px;
}
.sp-root .tcar-track::-webkit-scrollbar{display:none}
.sp-root .tcard{
  flex:0 0 calc(50% - 15px); scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); padding:44px 40px;
  display:flex; flex-direction:column; gap:24px;
  transition:border-color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, background .35s ease;
  position:relative; overflow:hidden;
}
.sp-root .tcard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 260px at 100% 0%, var(--gold-soft), transparent 65%);
  opacity:0; transition:opacity .5s ease;
}
.sp-root .tcard:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 30px 60px -32px rgba(0,0,0,.4) }
.sp-root .tcard:hover::before{ opacity:.7 }
.sp-root .tcard .quote-mark{ transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease }
.sp-root .tcard:hover .quote-mark{ transform:translate(-4px,-2px) scale(1.06) }
.sp-root .tcard .avatar{ transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease }
.sp-root .tcard:hover .avatar{ transform:scale(1.08) rotate(-3deg); box-shadow:0 8px 24px -8px var(--gold-soft) }
.sp-root .tcard .quote-mark{
  font-family:var(--serif-display); font-style:italic; font-size:120px; line-height:.6; color:var(--gold);
  margin-bottom:-30px;
  background:linear-gradient(180deg, var(--gold), transparent);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sp-root .tcard .quote{font-family:var(--serif-body); font-size:19px; line-height:1.55; color:var(--ink); margin:0; flex:1}
.sp-root .tcard .quote em{color:var(--gold-2); font-style:italic}
.sp-root .tcard .stars{color:var(--gold); letter-spacing:4px; font-size:14px}
.sp-root .tcard .who{display:flex; align-items:center; gap:16px; padding-top:20px; border-top:1px solid var(--line)}
.sp-root .tcard .avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  color:#1a1208; display:grid; place-items:center;
  font-family:var(--serif-display); font-weight:600; font-size:18px;
}
.sp-root .tcard .who-meta{display:flex; flex-direction:column}
.sp-root .tcard .who-meta b{font-family:var(--serif-display); font-weight:500; font-size:18px; color:var(--ink)}
.sp-root .tcard .who-meta span{font-family:var(--sans); font-size:13px; color:var(--ink-3)}
.sp-root .tcar-controls{display:flex; gap:14px; justify-content:flex-end; margin-top:14px}
.sp-root .tcar-btn{
  width:50px; height:50px; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink-2); cursor:pointer; font-family:var(--serif-display); font-size:22px;
  transition:all .2s ease;
}
.sp-root .tcar-btn:hover{border-color:var(--gold); color:var(--gold)}
.sp-root .tcar-dots{display:flex; gap:8px; justify-content:center; margin-top:30px}
.sp-root .tcar-dot{width:30px; height:1px; background:var(--line-strong); border:0; cursor:pointer; padding:0}
.sp-root .tcar-dot.on{background:var(--gold)}

/* ───────── reach ───────── */
.sp-root .reach-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line);
}
.sp-root .reach-cell{
  padding:42px 30px; text-align:center;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;
  min-height:170px;
  transition:background .4s ease;
  position:relative; overflow:hidden;
}
.sp-root .reach-cell::before{
  content:""; position:absolute; inset:auto 0 0 0; height:0; background:var(--gold);
  transition:height .4s cubic-bezier(.2,.8,.2,1); opacity:.08;
}
.sp-root .reach-cell:hover::before{ height:100% }
.sp-root .reach-cell .big{font-family:var(--serif-display); font-size:50px; line-height:1; font-weight:500; color:var(--gold); transition:transform .5s cubic-bezier(.2,.8,.2,1); position:relative}
.sp-root .reach-cell:hover .big{ transform:translateY(-4px) }
.sp-root .reach-cell .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); max-width:180px; line-height:1.5; position:relative}
.sp-root .media-row{ margin-top:60px; display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap }
.sp-root .media-row .lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); padding:0 30px; border-right:1px solid var(--line);
}
.sp-root .media-row .logos{display:flex; gap:46px; padding:0 30px; flex-wrap:wrap; align-items:center; justify-content:center}
.sp-root .media-row .logo{
  font-family:var(--serif-display); font-weight:500; font-size:22px; color:var(--ink-2);
  letter-spacing:.02em; opacity:.75; transition:opacity .25s;
}
.sp-root .media-row .logo.italic{font-style:italic}
.sp-root .media-row .logo.mono{font-family:var(--mono); font-size:14px; letter-spacing:.18em; text-transform:uppercase}
.sp-root .media-row .logo:hover{opacity:1; color:var(--gold)}

/* ───────── credibility ───────── */
.sp-root .creds{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.sp-root .cred{
  padding:38px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  transition:background .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  position:relative; overflow:hidden;
}
.sp-root .cred::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(400px 200px at 0% 0%, var(--gold-soft), transparent 60%);
  opacity:0; transition:opacity .45s ease;
}
.sp-root .cred:hover{ background:var(--surface); transform:translateY(-2px) }
.sp-root .cred:hover::before{ opacity:.6 }
.sp-root .cred .icon{ transition:transform .5s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease }
.sp-root .cred:hover .icon{ transform:rotate(-6deg) scale(1.08); background:var(--gold); color:var(--bg) }
.sp-root .cred .head{display:flex; align-items:center; gap:14px}
.sp-root .cred .icon{
  width:38px; height:38px; border:1px solid var(--gold); color:var(--gold);
  display:grid; place-items:center; font-family:var(--serif-display); font-style:italic; font-size:18px;
  flex-shrink:0; position:relative;
}
.sp-root .cred .ttl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.sp-root .cred .desc{font-family:var(--serif-body); font-size:18px; color:var(--ink); line-height:1.45}
.sp-root .cred .desc b{font-family:var(--serif-display); font-weight:500; color:var(--gold)}

/* ───────── author ───────── */
.sp-root .author{
  background:radial-gradient(800px 500px at 20% 50%, var(--gold-soft), transparent 60%), var(--bg-2);
  padding:var(--section-y) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.sp-root .author::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:28px 28px;
}
.sp-root .author-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center}
.sp-root .author-photo{
  aspect-ratio:4/5;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--gold) 18%, var(--surface)), var(--bg)),
    repeating-linear-gradient(45deg, var(--surface) 0 12px, var(--bg) 12px 24px);
  border:1px solid var(--line-strong); position:relative;
  display:grid; place-items:center;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.4), inset 0 0 60px var(--gold-soft);
  background-size:cover; background-position:center;
}
.sp-root .author-photo.has-img{
  background:none;
}
.sp-root .author-photo.has-img > img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sp-root .author-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, transparent 0 22px, var(--line) 22px 23px);
  opacity:.4;
}
.sp-root .author-photo .ph-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase;
  background:var(--bg-2); padding:8px 14px; border:1px solid var(--line); position:relative; z-index:1;
}
.sp-root .author-photo::before{
  content:""; position:absolute; inset:14px; border:1px solid var(--gold); opacity:.4; pointer-events:none;
}
.sp-root .author-text .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; margin-bottom:16px}
.sp-root .author-text h2{
  font-family:var(--serif-display); font-weight:500; font-size:54px; line-height:1.05; margin:0 0 8px; letter-spacing:-0.01em;
}
.sp-root .author-text .role{font-family:var(--serif-body); font-style:italic; font-size:20px; color:var(--gold); margin-bottom:30px}
.sp-root .author-text p{font-family:var(--serif-body); font-size:18px; line-height:1.65; color:var(--ink-2); margin:0 0 18px}
/* Drop cap on the first bio paragraph. Uses an explicit class so it works
   regardless of whether ItemFrame wraps the <p> in editor mode. */
.sp-root .author-text .bio-first::first-letter {
  font-family:var(--serif-display); font-size:62px; float:left; line-height:.85; padding:6px 12px 0 0; color:var(--gold); font-weight:500;
}
.sp-root .author-sig{
  margin-top:34px; display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid var(--line);
}
.sp-root .author-sig .sig-img{
  font-family:'Cormorant Garamond', cursive; font-style:italic; font-size:38px; color:var(--gold); line-height:1;
}
.sp-root .author-sig .sig-meta{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* ───────── faq ───────── */
.sp-root .faq-list{border-top:1px solid var(--line)}
.sp-root .faq-item{border-bottom:1px solid var(--line)}
.sp-root .faq-q{
  width:100%; background:transparent; border:0; cursor:pointer;
  padding:30px 0; display:flex; justify-content:space-between; align-items:center; gap:30px;
  font-family:var(--serif-display); font-weight:500; font-size:24px; text-align:left; color:var(--ink);
  transition:color .2s;
}
.sp-root .faq-q:hover{color:var(--gold)}
.sp-root .faq-q .toggle{
  flex-shrink:0; width:40px; height:40px; border:1px solid var(--line-strong);
  display:grid; place-items:center; font-family:var(--serif-display); font-size:22px; color:var(--ink-2);
  transition:all .25s ease; font-weight:300;
}
.sp-root .faq-q[aria-expanded="true"] .toggle{background:var(--gold); border-color:var(--gold); color:var(--bg); transform:rotate(45deg)}
.sp-root .faq-a{ overflow:hidden; max-height:0; transition:max-height .4s ease, padding .3s ease }
.sp-root .faq-q[aria-expanded="true"] + .faq-a{ max-height:600px; padding-bottom:30px }
.sp-root .faq-a-inner{font-family:var(--serif-body); font-size:18px; line-height:1.65; color:var(--ink-2); max-width:780px}
.sp-root .faq-a-inner b{color:var(--ink); font-weight:500}

/* ───────── price section ───────── */
.sp-root .price-sec{
  padding:calc(var(--section-y) + 20px) 0;
  position:relative;
  background:
    radial-gradient(1100px 700px at 78% 30%, color-mix(in oklab, var(--gold) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 18% 80%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, #0f0c08 100%);
  color:#f0e6cf;
  border-top:1px solid color-mix(in oklab, var(--gold) 60%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--gold) 60%, transparent);
  overflow:hidden;
}
.sp-root .price-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(244,217,168,.14) 1px, transparent 1.4px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 90%);
}
.sp-root .price-sec::after{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(420px 280px at 30% 30%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 70%),
    radial-gradient(380px 260px at 75% 65%, color-mix(in oklab, var(--gold) 18%, transparent), transparent 70%);
  filter:blur(40px);
  animation:sp-priceDrift 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes sp-priceDrift{
  0%{ transform:translate(0,0) scale(1) }
  100%{ transform:translate(-3%, 2%) scale(1.08) }
}
.sp-root .price-sec .wrap{position:relative; z-index:1}
.sp-root .price-sec .section-head h2{ color:#f4ead0 }
.sp-root .price-sec .section-head h2 em{ color:var(--gold-2) }
.sp-root .price-sec .section-head .deck{ color:rgba(244,234,208,.7) }

.sp-root .price-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start; margin-top:60px }
.sp-root .price-incl{ padding:8px 0 }
.sp-root .price-incl .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:18px;
}
.sp-root .price-incl h3{
  font-family:var(--serif-display); font-weight:500; font-size:42px; line-height:1.05;
  margin:0 0 32px; letter-spacing:-0.01em; text-wrap:balance; color:#f4ead0;
}
.sp-root .price-incl h3 em{font-style:italic; color:var(--gold-2)}
.sp-root .incl-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0}
.sp-root .incl-list li{
  display:flex; gap:18px; align-items:baseline;
  padding:16px 4px;
  border-bottom:1px solid rgba(244,234,208,.08);
  font-family:var(--sans); font-weight:400; font-size:15px; color:rgba(244,234,208,.78); line-height:1.55;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), color .3s ease, padding-left .35s ease;
  position:relative;
}
.sp-root .incl-list li::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--gold-2); transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.sp-root .incl-list li:hover{ color:#f4ead0; padding-left:14px }
.sp-root .incl-list li:hover::before{ width:8px }
.sp-root .incl-list > li:last-child,
.sp-root .incl-list > .sp-edit-item:last-child > li{ border-bottom:0 }
.sp-root .incl-list .check{
  flex-shrink:0; width:24px; height:24px;
  border:1px solid var(--gold-2); color:var(--gold-2);
  display:grid; place-items:center;
  font-family:var(--serif-display); font-size:14px;
  transform:translateY(2px) rotate(45deg);
  transition:background .3s ease, color .3s ease;
}
.sp-root .incl-list .check span{ transform:rotate(-45deg); display:block }
.sp-root .incl-list li:hover .check{ background:var(--gold-2); color:var(--bg-3) }
.sp-root .incl-list li b{ color:#f4ead0; font-family:var(--sans); font-weight:600 }

.sp-root .price-card{
  position:relative;
  background:
    radial-gradient(600px 400px at 50% -10%, color-mix(in oklab, var(--gold) 18%, transparent), transparent 55%),
    linear-gradient(180deg, #1a1410 0%, #100c08 100%);
  border:1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  padding:30px 48px 44px;
  text-align:center;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.7),
    0 0 60px -20px color-mix(in oklab, var(--gold) 35%, transparent),
    inset 0 1px 0 rgba(244,217,168,.18);
  isolation:isolate; overflow:hidden;
}
.sp-root .price-card::before{
  content:""; position:absolute; inset:10px;
  border:1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  pointer-events:none;
}
.sp-root .price-card .corner{
  position:absolute; width:18px; height:18px; pointer-events:none; z-index:2;
  border-color:var(--gold-2);
}
.sp-root .price-card .corner.tl{ top:18px; left:18px; border-top:1px solid; border-left:1px solid }
.sp-root .price-card .corner.tr{ top:18px; right:18px; border-top:1px solid; border-right:1px solid }
.sp-root .price-card .corner.bl{ bottom:18px; left:18px; border-bottom:1px solid; border-left:1px solid }
.sp-root .price-card .corner.br{ bottom:18px; right:18px; border-bottom:1px solid; border-right:1px solid }
.sp-root .price-card .shimmer{
  position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:overlay; opacity:.55;
  background:linear-gradient(115deg, transparent 30%, rgba(255,235,180,.18) 48%, transparent 60%);
  background-size:240% 240%;
  animation:sp-cardShimmer 7s ease-in-out infinite;
}
@keyframes sp-cardShimmer{
  0%,100%{ background-position:100% 50% }
  50%{ background-position:0% 50% }
}
.sp-root .price-card > *{ position:relative; z-index:2 }

.sp-root .price-badge{
  position:relative; display:inline-block; margin:0 auto 26px;
  background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1a1410;
  font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:8px 18px; white-space:nowrap;
  box-shadow:0 12px 30px -10px color-mix(in oklab, var(--gold) 70%, transparent); z-index:3;
}
.sp-root .price-badge::before, .sp-root .price-badge::after{
  content:""; position:absolute; top:50%; width:6px; height:6px; background:var(--gold);
  transform:translateY(-50%) rotate(45deg);
}
.sp-root .price-badge::before{ left:-3px } .sp-root .price-badge::after{ right:-3px }

.sp-root .price-from{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,234,208,.55); margin-bottom:14px;
}
.sp-root .price-from s{ color:rgba(244,234,208,.35); margin:0 6px }

.sp-root .price-installments{
  font-family:var(--serif-display); font-weight:400; line-height:1; color:#f4ead0;
  letter-spacing:-0.015em;
  display:flex; align-items:baseline; justify-content:center; gap:14px;
  font-feature-settings:"lnum","tnum";
}
.sp-root .price-installments .x{ font-size:34px; color:rgba(244,234,208,.6); font-style:italic }
.sp-root .price-installments .currency{ font-size:28px; color:var(--gold-2); transform:translateY(-14px); letter-spacing:.04em }
.sp-root .price-installments .num{ font-size:78px; color:var(--gold-2); font-style:italic }

.sp-root .price-or{
  display:flex; align-items:center; gap:18px; justify-content:center;
  margin:22px 0 18px; color:rgba(244,234,208,.55);
  font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
}
.sp-root .price-or::before, .sp-root .price-or::after{
  content:""; flex:1; max-width:80px; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent);
}

.sp-root .price-cash{
  font-family:var(--serif-display); font-weight:500; line-height:1; color:#f4ead0;
  display:inline-flex; align-items:baseline; gap:4px;
  font-feature-settings:"lnum","tnum";
}
.sp-root .price-cash .currency{ font-family:var(--sans); font-weight:500; font-size:18px; color:rgba(244,234,208,.7); letter-spacing:.04em; margin-right:6px; transform:translateY(-12px) }
.sp-root .price-cash .num{ font-size:54px }
.sp-root .price-cash .cents{ font-family:var(--sans); font-weight:500; font-size:18px; color:rgba(244,234,208,.7); margin-left:2px; transform:translateY(-12px) }
.sp-root .price-cash .lbl{
  font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-2); margin-left:14px; align-self:center;
  border:1px solid color-mix(in oklab, var(--gold) 50%, transparent);
  padding:5px 10px;
}

.sp-root .price-tagline{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,234,208,.6);
  margin:28px 0 28px; line-height:1.7;
}
.sp-root .price-card .btn{ width:100% }
.sp-root .price-fine{
  margin-top:20px;
  font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,234,208,.5);
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center;
}
.sp-root .price-fine .dot{width:3px; height:3px; background:var(--gold-2); border-radius:50%}

/* ───────── footer ───────── */
.sp-root footer{padding:60px 0 50px; border-top:1px solid var(--line); background:var(--bg-2)}
.sp-root .foot{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.sp-root .foot .brand{font-size:20px}
.sp-root .foot .copy{font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.04em}
.sp-root .foot .links{display:flex; gap:30px; font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}
.sp-root .foot .links a:hover{color:var(--gold)}

/* ───────── is_example badge (added by renderer when item is AI mock) ───────── */
.sp-root .sp-example-badge{
  display:inline-block; margin-left:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); padding:2px 6px;
  vertical-align:middle; opacity:.7;
}

/* utility */
.sp-root .center{text-align:center}

/* ───────── editor mode (inline editing affordances) ───────── */
/* .sp-edit-item is merged onto the existing host element (.tcard, .benefit,
   .reach-cell, .cred, .faq-item, .fw-list li, .incl-list li, ...) so the editor
   DOM matches the published DOM and flex/grid/scroll-snap selectors keyed on the
   host class keep matching. The wrapper-div form only appears for ItemFrame
   children that are custom components (EditableHtml — bio paragraphs, logos). */
.sp-root .sp-edit-item{ position:relative }
.sp-root .sp-edit-del{
  position:absolute; top:8px; right:8px; z-index:10;
  width:22px; height:22px; border-radius:50%;
  background:#b04a3b; color:#fff; border:1px solid #fff;
  font-size:14px; line-height:1; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  font-family:var(--sans); font-weight:700; padding:0;
}
.sp-root .sp-edit-item:hover > .sp-edit-del,
.sp-root .sp-edit-item:focus-within > .sp-edit-del{ display:flex }
.sp-root .sp-edit-add{
  display:flex; align-items:center; gap:6px;
  width:fit-content;
  margin:18px auto 0;
  padding:8px 16px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); background:transparent;
  border:1px dashed var(--gold);
  cursor:pointer; transition:all .2s;
}
.sp-root .sp-edit-add:hover{ background:var(--gold-soft); color:var(--gold-3) }
.sp-root [contenteditable="true"]:empty::before{
  content:attr(data-placeholder);
  color:var(--ink-4); opacity:.7;
}
/* per-element selection affordance — hover shows a dashed outline, selected
   shows a solid gold outline. Outline (not border) so it doesn't shift layout. */
.sp-root .sp-edit-elem{
  outline:1px dashed transparent;
  outline-offset:2px;
  transition:outline-color .12s;
  cursor:pointer;
}
.sp-root .sp-edit-elem:hover{ outline-color:rgba(122,79,30,.45) }
.sp-root .sp-edit-elem.is-selected{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ───────────── responsive: tablet (768–1024) ───────────── */
@media (max-width:1024px){
  .sp-root .section-head{margin-bottom:56px}

  /* hero — keep 2-col, shrink book */
  .sp-root .hero{padding-top:48px}
  .sp-root .hero-grid{gap:40px}
  .sp-root .book{width:240px; height:344px}

  /* benefits — keep 2-col */
  .sp-root .benefit{padding:32px 28px; min-height:200px}
  .sp-root .benefit .num{font-size:44px}

  /* for-whom — keep 2-col */
  .sp-root .fw-col{padding:36px 28px}

  /* testimonials — keep 50% */
  .sp-root .tcard{padding:36px 30px}

  /* reach — 4 → 2 columns; rebuild borders for 2-up */
  .sp-root .reach-grid{grid-template-columns:repeat(2,1fr)}
  .sp-root .reach-cell{border-right:1px solid var(--line); min-height:140px}
  .sp-root .reach-cell:nth-child(2n){border-right:0}
  .sp-root .reach-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sp-root .reach-cell .big{font-size:42px}

  /* creds — 3 → 2 columns */
  .sp-root .creds{grid-template-columns:repeat(2,1fr)}
  .sp-root .cred{padding:30px 26px}

  /* author — stack at tablet (photo column too narrow at 1024) */
  .sp-root .author-grid{grid-template-columns:1fr; gap:50px}
  .sp-root .author-text h2{font-size:42px}

  /* price — stack */
  .sp-root .price-grid{grid-template-columns:1fr; gap:50px}
  .sp-root .price-card{padding:28px 32px 36px}
  .sp-root .price-incl h3{font-size:34px}
  .sp-root .price-installments .num{font-size:64px}

  /* faq */
  .sp-root .faq-q{font-size:20px; padding:24px 0}
}

/* ───────────── responsive: mobile (<768) ───────────── */
@media (max-width:767px){
  /* nav */
  .sp-root .nav-links{display:none}
  .sp-root .nav-cta{padding:9px 14px; font-size:11px}
  .sp-root .brand{font-size:18px}
  .sp-root .brand-mark{width:28px; height:28px}

  /* buttons — clear 44px tap-target floor */
  .sp-root .btn{padding:18px 28px; font-size:13px; letter-spacing:.10em; min-height:48px}

  /* hero — stack with book first */
  .sp-root .hero-grid{grid-template-columns:1fr; gap:48px}
  .sp-root .book-wrap{order:-1}
  .sp-root .book{width:220px; height:316px}
  .sp-root .hero h1{text-wrap:pretty}
  .sp-root .hero p.lead{max-width:100%}

  /* benefits — 1-col, reduce decorative roman bleed */
  .sp-root .benefits-grid{grid-template-columns:1fr}
  .sp-root .benefit{padding:28px 22px; min-height:unset}
  .sp-root .benefit .num{font-size:38px}
  .sp-root .benefit::before{font-size:120px}

  /* for-whom — stack */
  .sp-root .fw-grid{grid-template-columns:1fr}
  .sp-root .fw-col + .fw-col{border-left:0; border-top:1px solid var(--line)}
  .sp-root .fw-col{padding:28px 22px}

  /* testimonials — full-width cards */
  .sp-root .tcard{flex:0 0 calc(100% - 8px); padding:30px 24px}
  .sp-root .tcard .quote-mark{font-size:90px}
  .sp-root .tcar-controls{justify-content:center}

  /* reach — keep 2-up (stats read better two-up than 1-col) */
  .sp-root .reach-cell{padding:28px 16px; min-height:120px}
  .sp-root .reach-cell .big{font-size:34px}

  /* media row */
  .sp-root .media-row{flex-direction:column; gap:18px}
  .sp-root .media-row .lbl{border-right:0; padding-bottom:8px}
  .sp-root .media-row .logos{gap:26px}

  /* creds — 1-col */
  .sp-root .creds{grid-template-columns:1fr}
  .sp-root .cred{padding:26px 22px}

  /* author */
  .sp-root .author-grid{gap:36px}
  .sp-root .author-text h2{font-size:34px}
  .sp-root .author-text .bio-first::first-letter{font-size:44px}

  /* faq */
  .sp-root .faq-q{font-size:17px; gap:16px; padding:20px 0}
  .sp-root .faq-q .toggle{width:32px; height:32px; font-size:18px}

  /* price */
  .sp-root .price-sec{padding:var(--section-y) 0}
  .sp-root .price-grid{gap:36px}
  .sp-root .price-card{padding:24px 20px 32px}
  .sp-root .price-installments{gap:8px}
  .sp-root .price-installments .num{font-size:52px}
  .sp-root .price-installments .currency{font-size:22px; transform:translateY(-10px)}
  .sp-root .price-installments .x{font-size:22px}
  .sp-root .price-cash .num{font-size:38px}

  /* footer */
  .sp-root .foot{justify-content:center; text-align:center}
  .sp-root .foot .links{gap:18px; flex-wrap:wrap; justify-content:center}
}

/* ───────────── checkout modal ───────────── */
/* Editorial-styled modal that matches the sales page palette/typography. The
   wrapper carries .sp-root so all --bg/--ink/--gold/--btn-* tokens (including
   per-book palette overrides applied as inline style) cascade in here. */
.sp-root.checkout-modal-root{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-start; justify-content:center;
  padding:48px 24px; overflow-y:auto;
  background:rgba(20,14,8,.62);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  animation:sp-modalOverlay .25s ease-out;
  font-family:var(--serif-body);
}
@keyframes sp-modalOverlay{
  from{ opacity:0 }
  to  { opacity:1 }
}

.sp-root .checkout-modal-card{
  position:relative;
  width:100%; max-width:620px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:
    0 40px 80px -30px rgba(20,14,8,.55),
    0 0 0 1px var(--line);
  animation:sp-modalEnter .35s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
}
@keyframes sp-modalEnter{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:translateY(0) }
}
.sp-root .checkout-modal-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  pointer-events:none;
}

.sp-root .checkout-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 36px 22px;
  border-bottom:1px solid var(--line);
}
.sp-root .checkout-modal-head h2{
  margin:0;
  font-family:var(--serif-display); font-weight:500;
  font-size:32px; color:var(--ink); letter-spacing:-0.01em; line-height:1.1;
}
.sp-root .checkout-modal-close{
  background:transparent; border:0; padding:6px 10px;
  font-family:var(--serif-display); font-size:28px; line-height:1;
  color:var(--ink-3); cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.sp-root .checkout-modal-close:hover{ color:var(--gold); transform:rotate(90deg) }

.sp-root .checkout-modal-body{ padding:28px 36px 36px }

.sp-root .checkout-modal-preview{
  display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:center;
  padding:18px 20px;
  margin-bottom:28px;
  background:color-mix(in oklab, var(--gold) 6%, var(--bg));
  border:1px solid var(--line);
}
.sp-root .checkout-modal-preview img{
  width:64px; height:88px; object-fit:cover;
  border:1px solid var(--line-strong);
}
.sp-root .checkout-modal-preview .title{
  font-family:var(--serif-display); font-weight:500;
  font-size:20px; line-height:1.2; color:var(--ink); margin:0 0 6px;
  letter-spacing:-0.01em;
}
.sp-root .checkout-modal-preview .price{
  /* Fonte fixa Inter para o preço — números em serif ficam ilegíveis em alguns
     temas/paletas. Só a cor (var(--gold)) varia com o tema. */
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:600; font-size:22px; color:var(--gold);
  letter-spacing:-0.01em; font-variant-numeric:tabular-nums;
}

.sp-root .checkout-modal-error{
  padding:14px 16px 14px 18px;
  margin-bottom:24px;
  background:color-mix(in oklab, var(--danger) 10%, var(--surface));
  color:var(--danger);
  border-left:3px solid var(--danger);
  font-family:var(--sans); font-size:14px; line-height:1.45;
}

.sp-root .checkout-modal-section{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  margin:32px 0 6px;
}
.sp-root .checkout-modal-section:first-child{ margin-top:0 }
.sp-root .checkout-modal-section + .rule-gold{ margin-bottom:22px }

.sp-root .checkout-modal-field{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:20px;
}
.sp-root .checkout-modal-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.sp-root .checkout-modal-input{
  width:100%;
  padding:10px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.sp-root .checkout-modal-input::placeholder{
  color:var(--ink-4); font-family:var(--sans);
}
.sp-root .checkout-modal-input:hover:not(:focus){
  border-bottom-color:var(--ink-3);
}
.sp-root .checkout-modal-input:focus{
  border-bottom-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold);
}
.sp-root .checkout-modal-input.is-error{
  border-bottom-color:var(--danger);
  box-shadow:0 1px 0 0 var(--danger);
}
.sp-root .checkout-modal-field-error{
  margin-top:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--danger);
}

.sp-root .checkout-modal-grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}

.sp-root .checkout-modal-submit-wrap{ margin-top:36px }
.sp-root .checkout-modal-submit{
  width:100%;
  padding:20px 32px;
  font-size:13px;
}
.sp-root .checkout-modal-submit[disabled]{
  opacity:.6; cursor:not-allowed; transform:none; filter:none;
}
.sp-root .checkout-modal-submit[disabled]:hover{
  transform:none; filter:none;
}

.sp-root .checkout-modal-foot{
  margin:18px 0 0;
  text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

@media (max-width:540px){
  .sp-root.checkout-modal-root{ padding:16px }
  .sp-root .checkout-modal-head{ padding:22px 24px 18px }
  .sp-root .checkout-modal-head h2{ font-size:26px }
  .sp-root .checkout-modal-body{ padding:22px 24px 28px }
  .sp-root .checkout-modal-grid-2{ grid-template-columns:1fr; gap:0 }
  .sp-root .checkout-modal-submit{ padding:18px 24px }
}

/* ───────────── checkout page (transparent) ─────────────
   Full-page checkout que substitui o modal. Herda paleta via inline style no
   .sp-root, igual à landing. Mantém a mesma tipografia editorial.            */
.sp-root.checkout-page-root{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif-body);
  display:flex; flex-direction:column;
}

.checkout-page-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 36px;
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--gold) 4%, var(--bg));
}
.checkout-page-back{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none;
  transition:color .2s ease;
}
.checkout-page-back:hover{ color:var(--gold) }
.checkout-page-brand{
  font-family:var(--serif-display); font-size:18px; color:var(--ink);
  letter-spacing:-0.01em;
}

.checkout-page-main{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:48px;
  max-width:1080px;
  margin:0 auto;
  padding:48px 36px 80px;
  width:100%;
}

.checkout-page-form-col{ min-width:0 }
.checkout-page-summary-col{ min-width:0 }

.checkout-page-title{
  margin:0 0 28px;
  font-family:var(--serif-display); font-weight:500;
  font-size:36px; color:var(--ink); letter-spacing:-0.01em; line-height:1.1;
}

.checkout-page-error{
  padding:14px 16px 14px 18px;
  margin-bottom:24px;
  background:color-mix(in oklab, var(--danger) 10%, var(--surface));
  color:var(--danger);
  border-left:3px solid var(--danger);
  font-family:var(--sans); font-size:14px; line-height:1.45;
}

.checkout-page-section{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  margin:32px 0 6px;
}
.checkout-page-section + .rule-gold{ margin-bottom:22px }

.checkout-page-field{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:20px;
}
.checkout-page-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.checkout-page-input{
  width:100%;
  padding:10px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.checkout-page-input::placeholder{ color:var(--ink-4); font-family:var(--sans) }
.checkout-page-input:hover:not(:focus){ border-bottom-color:var(--ink-3) }
.checkout-page-input:focus{
  border-bottom-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold);
}
.checkout-page-input.is-error{
  border-bottom-color:var(--danger);
  box-shadow:0 1px 0 0 var(--danger);
}
select.checkout-page-input{
  appearance:none;
  -webkit-appearance:none;
  padding-right:24px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}

/* Custom Select (combobox) dentro do checkout — segue a paleta da landing */
.sp-root .select{ display:block; width:100% }
.sp-root .select-trigger.checkout-page-input{
  justify-content:space-between;
  cursor:pointer;
}
.sp-root .select-trigger[aria-expanded="true"]{
  border-color:var(--gold);
  border-bottom-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold);
}
.sp-root .select-value{
  font-family:var(--sans); font-size:16px; color:var(--ink);
}
.sp-root .select-value-placeholder{ color:var(--ink-4) }
.sp-root .select-caret{ color:var(--ink-3) }

.sp-root .select-menu{
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:0;
  box-shadow:0 18px 40px -16px rgba(28,22,12,.28), 0 2px 0 0 var(--gold);
  padding:4px;
  margin-top:6px;
}
.sp-root .select-option{
  font-family:var(--sans); font-size:15px;
  color:var(--ink);
  padding:10px 12px;
  border-radius:0;
}
.sp-root .select-option[data-highlighted="true"]{
  background:var(--gold-soft);
  color:var(--gold-3);
}
.sp-root .select-option[data-selected="true"]{
  color:var(--gold);
  font-weight:500;
}
.sp-root .select-option[data-selected="true"][data-highlighted="true"]{
  background:var(--gold-soft);
}
.sp-root .select-option[data-selected="true"] svg{ color:var(--gold) }

.checkout-page-field-error{
  margin-top:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--danger);
}

.checkout-page-grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}

.checkout-page-method-toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:8px 0 24px;
  border:1px solid var(--line-strong);
}
.checkout-page-method{
  padding:14px 16px;
  background:transparent;
  border:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.checkout-page-method + .checkout-page-method{ border-left:1px solid var(--line-strong) }
.checkout-page-method.is-active{
  background:color-mix(in oklab, var(--gold) 12%, var(--bg));
  color:var(--ink);
}
.checkout-page-method:hover:not(.is-active){ color:var(--ink-2) }

.checkout-page-pix-hint{
  margin:0 0 16px;
  padding:14px 16px;
  background:color-mix(in oklab, var(--gold) 6%, var(--bg));
  border:1px solid var(--line);
  font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--ink-2);
}

.checkout-page-submit{
  width:100%;
  padding:20px 32px;
  margin-top:24px;
  font-size:13px;
}
.checkout-page-submit[disabled]{
  opacity:.6; cursor:not-allowed; transform:none; filter:none;
}
.checkout-page-submit[disabled]:hover{ transform:none; filter:none }

.checkout-page-foot{
  margin:18px 0 0;
  text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ───── Resumo do pedido (lateral) ───── */
.checkout-page-summary{
  position:sticky; top:24px;
  padding:28px 26px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(20,14,8,.35), 0 0 0 1px var(--line);
}
.checkout-page-summary-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.checkout-page-summary-item{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:22px 0 18px;
  margin-bottom:6px;
}
.checkout-page-summary-cover{
  position:relative;
  width:128px; height:184px;
  margin-bottom:18px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  box-shadow:
    0 1px 0 0 var(--gold-soft) inset,
    0 18px 32px -18px rgba(20,14,8,.55),
    0 4px 10px -6px rgba(20,14,8,.25);
}
.sp-root .checkout-page-summary-cover img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.checkout-page-summary-cover-fallback{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4);
}
.checkout-page-summary-book-title{
  font-family:var(--serif-display); font-weight:500;
  font-size:18px; line-height:1.25; color:var(--ink);
  margin:0 0 8px;
  letter-spacing:-0.01em;
  max-width:240px;
}
.checkout-page-summary-book-author{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
  margin-bottom:14px;
  background:none; padding:0; border:0;
}
.checkout-page-summary-book-price{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:600; font-size:22px; color:var(--gold);
  letter-spacing:-0.01em; font-variant-numeric:tabular-nums;
  line-height:1;
}
.checkout-page-qty{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
}
.checkout-page-qty-label{
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
}
.checkout-page-qty-control{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.checkout-page-qty-btn{
  width:34px; height:34px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:18px; line-height:1; color:var(--ink);
  transition:background .15s ease;
}
.checkout-page-qty-btn:hover:not(:disabled){ background:var(--line); }
.checkout-page-qty-btn:disabled{ opacity:.4; cursor:not-allowed; }
.checkout-page-qty-input{
  width:44px; height:34px; flex:0 0 auto;
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  text-align:center; background:transparent; color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:15px; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.checkout-page-qty-input::-webkit-outer-spin-button,
.checkout-page-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.checkout-page-qty-input:focus{ outline:none; }

.checkout-page-summary-divider{
  height:1px; background:var(--line); border:0;
  margin:6px 0 14px;
}
.checkout-page-summary-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:7px 0;
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
}
.checkout-page-summary-row span:last-child{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.checkout-page-summary-row.total{
  margin-top:10px; padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}
.checkout-page-summary-row.total span:last-child{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:600; font-size:20px; color:var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em; text-transform:none;
}

/* ───── Opções de frete (resumo do checkout) ─────
   Prefixadas com .checkout-page-shipping para não colidir com classes da landing
   dentro de .sp-root (.price, .name herdam estilos da landing). */
.checkout-page-shipping{
  margin: 14px 0 18px;
}
.checkout-page-shipping-title{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.checkout-page-shipping-empty{
  font-family: var(--sans); font-size: 12px; color: var(--ink-2); font-style: italic;
}
.checkout-page-shipping-skeleton{
  height: 56px; border-radius: 8px; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: checkout-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes checkout-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.checkout-page-shipping-option{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.checkout-page-shipping-option:hover{
  border-color: var(--gold);
}
.checkout-page-shipping-option.is-selected{
  border-color: var(--gold);
  background: rgba(190,148,82,.06);
}
.checkout-page-shipping-option input[type="radio"]{
  margin: 0;
  accent-color: var(--gold);
}
.checkout-page-shipping-option-body{
  display: flex; flex-direction: column; gap: 2px;
}
.checkout-page-shipping-option-name{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.checkout-page-shipping-option-tag{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-2);
}
.checkout-page-shipping-option-meta{
  font-family: var(--sans); font-size: 12px; color: var(--ink-2);
}
.checkout-page-shipping-note{
  font-family: var(--sans); font-size: 11px; color: var(--ink-2);
  line-height: 1.5; margin-top: 2px;
}
.checkout-page-shipping-option-price{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 15px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.checkout-page-shipping-error-box{
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.checkout-page-shipping-error{
  font-family: var(--sans); font-size: 12px; color: #b03a2e;
}
.checkout-page-shipping-retry{
  align-self: flex-start;
  background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.checkout-page-shipping-retry:hover{
  border-color: var(--gold); color: var(--ink);
}

/* ───── Botões do card "Seu ebook está liberado" (página de obrigado) ─────
   Vivem em global porque styled-jsx escopa por classe e o hash não chega no
   <a> renderizado pelo <Link> do next/link. Prefixados com .sp-root pra vencer
   a especificidade do reset `.sp-root a { color: inherit }` (que senão
   sobrescreve o color: branco do botão primário). */
.sp-root .ebook-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  box-sizing:border-box;
  transition:background .15s, border-color .15s;
}
.sp-root .ebook-card__btn--primary{
  background:#1a1612;
  color:#fbf8f1;
  border-color:#1a1612;
}
.sp-root .ebook-card__btn--primary:hover{
  background:#3d362a;
  border-color:#3d362a;
}
.sp-root .ebook-card__btn--secondary{
  background:transparent;
  color:#1a1612;
  border-color:rgba(0, 0, 0, 0.18);
}
.sp-root .ebook-card__btn--secondary:hover{
  border-color:rgba(0, 0, 0, 0.36);
}
.sp-root .ebook-card__btn--secondary:disabled{
  opacity:.6;
  cursor:progress;
}

/* ───── Pix QR Panel ───── */
.checkout-page-pix-panel{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.checkout-page-pix-amount{
  margin:0 0 24px;
  font-family:var(--sans); font-size:15px; color:var(--ink-2);
}
.checkout-page-pix-amount strong{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-weight:600; color:var(--gold);
}
.checkout-page-pix-qr{
  display:flex; justify-content:center;
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  margin-bottom:20px;
}
.checkout-page-pix-qr img{ width:240px; height:240px; image-rendering:pixelated }
.checkout-page-pix-copy{
  margin:18px 0 0;
  font-family:var(--sans); font-size:12px;
  color:var(--ink-3);
}
.checkout-page-pix-copy summary{
  cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.checkout-page-pix-copy code{
  display:block;
  margin-top:10px; padding:12px;
  background:color-mix(in oklab, var(--gold) 4%, var(--bg));
  border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; word-break:break-all;
  text-align:left;
}
.checkout-page-pix-status{
  margin-top:24px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:color-mix(in oklab, var(--gold) 6%, var(--bg));
  border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.checkout-page-pix-status .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  animation:checkout-pulse 1.4s ease-in-out infinite;
}
@keyframes checkout-pulse{
  0%,100%{ opacity:.4; transform:scale(.85) }
  50%    { opacity:1;  transform:scale(1) }
}

@media (max-width:900px){
  .checkout-page-main{
    grid-template-columns:1fr;
    gap:32px;
    padding:32px 24px 64px;
  }
  .checkout-page-summary{ position:static }
}
@media (max-width:540px){
  .checkout-page-header{ padding:16px 20px }
  .checkout-page-main{ padding:24px 20px 56px }
  .checkout-page-title{ font-size:28px }
  .checkout-page-grid-2{ grid-template-columns:1fr; gap:0 }
  .checkout-page-submit{ padding:18px 24px }
}