/* brunoalexmarqs.com — "Terra"
   Warm, earthy, human. Deep umber shell, sand reading surface, terracotta as the one warm accent.
   Fraunces (elegant, soft serif) for headlines and reading; IBM Plex Mono (modern typewriter) for
   labels, buttons, numbers and marginalia. See .design/brief.md */

:root {
  --umber: #2A1C15;
  --umber-2: #38261D;
  --umber-3: #4A342A;
  --sand: #EDE4D3;
  --sand-2: #F6EFE4;
  --line: #D8C9B2;
  --line-dark: rgba(243, 234, 219, .14);
  --ink: #2A1C15;
  --ink-2: #6E5B4E;
  --ink-3: #9A8778;
  --cream: #F3EADB;
  --cream-2: rgba(243, 234, 219, .72);
  --cream-3: rgba(243, 234, 219, .5);
  --clay: #B9573B;
  --clay-deep: #9C4529;
  --clay-light: #E08A66;
  --ochre: #C9973A;
  --white: #FBF8F2;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --measure: 60ch;
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--umber); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--umber);
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-stickybar { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body.has-stickybar { padding-bottom: 0; } }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 70, "WONK" 0;
}
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--clay-light); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--clay-light); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--clay); color: var(--cream); }
img { max-width: 100%; display: block; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Emphasis = Fraunces' wonky italic in terracotta. Not a highlighter. */
mark { background: none; color: var(--clay-light); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 500; }
.paper mark { color: var(--clay); }

/* Typewriter voice */
.mono, .kicker, .btn, .nav, .cta-note, .trust, .sec-margin, .book-caption, .countdown, .pricebar .later, .pricebar .orders, .progress, .stickybar .label span, .site-footer, .links-foot, .receipt, .flash, .chapters li::before, .note, .home .name {
  font-family: var(--mono);
  font-variation-settings: normal;
}
.kicker { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); line-height: 1; margin-bottom: 26px; }

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header ------------------------------------------------------------- */
.site-header { padding: 22px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; font-style: italic; }
.wordmark:hover { text-decoration: none; color: var(--clay-light); }
.nav { display: flex; align-items: center; gap: 22px; font-size: 0.82rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.nav a { white-space: nowrap; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; color: var(--cream-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--clay-light); }

@media (max-width: 480px) { .nav { gap: 14px; font-size: 0.76rem; } .site-header .wrap { gap: 14px; } }
/* Phones: no header at all (Bruno's call, 2026-09-03). The footer keeps the navigation. */
@media (max-width: 699px) { .site-header { display: none; } main { padding-top: 28px; } }

/* Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  font-weight: 500; font-size: 0.95rem; line-height: 1; letter-spacing: 0.01em;
  color: var(--cream); background: var(--clay); text-decoration: none; border: 0; cursor: pointer;
  border-radius: 6px;
  transition: background-color .15s ease, transform .12s ease;
}
.btn:hover { background: var(--clay-deep); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.paper .btn-ghost:hover { background: var(--sand-2); }
.btn-lg { min-height: 62px; padding: 0 34px; font-size: 1.02rem; }

/* Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-dark); padding: 32px 0 40px; color: var(--cream-2); font-size: 0.82rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; align-items: center; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--cream); }

/* Home --------------------------------------------------------------- */
.home { min-height: calc(100svh - 170px); display: grid; align-content: center; padding: clamp(32px, 6vw, 80px) 0 clamp(48px, 8vw, 96px); }
.home .name { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); margin-bottom: 26px; line-height: 1; }
.home h1 { font-size: clamp(2.1rem, 1rem + 4.2vw, 3.9rem); max-width: 24ch; }
.home .what { margin-top: 30px; font-size: 1.2rem; color: var(--cream-2); max-width: 44ch; }
.home .actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.home .actions .textlink { font-family: var(--mono); font-size: 0.9rem; color: var(--cream-2); }

/* Sales page: umber hero → sand reading → umber close ------------------- */
.hero { padding: clamp(20px, 4vw, 56px) 0 clamp(48px, 7vw, 96px); display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
.hero h1 { font-size: clamp(2.5rem, 1rem + 5vw, 4.6rem); max-width: 16ch; }
.hero .lead { margin-top: 28px; font-size: 1.22rem; line-height: 1.5; max-width: 40ch; color: var(--cream-2); }
.cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.cta-note { font-size: 0.78rem; color: var(--cream-2); line-height: 1.5; max-width: 30ch; }
.trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.8rem; color: var(--cream-2); }
.trust li { display: flex; align-items: flex-start; /* bullets may wrap to two lines; icon anchors to the first */ gap: 8px; line-height: 1.45; max-width: 46ch; }
.trust svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--clay-light); margin-top: 0.2em; /* ajuste ótico: centre of the 15px check on the first line's x-height */ }

/* Mobile order: kicker → book → title → lead → CTA. The copy wrapper dissolves into the grid so its children can be ordered. */
@media (max-width: 899px) {
  .hero { gap: 0; }
  .hero .hero-copy { display: contents; }
  .hero .kicker { order: 1; margin-bottom: 22px; }
  .hero .book-scene { order: 2; padding: 0; margin-bottom: 34px; }
  .hero h1 { order: 3; }
  .hero .lead, .hero .flash { order: 4; }
  .hero .cta-row { order: 5; }
  .hero .trust { order: 6; }
}

/* Book mockup (CSS 3D); the title is real text, always crisp. */
.book-scene { perspective: 1600px; display: grid; place-items: center; padding: 24px 0; }
.book { --w: clamp(220px, 26vw, 300px); position: relative; width: var(--w); aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.book-scene:hover .book { transform: rotateY(-14deg) rotateX(2deg); }
@media (prefers-reduced-motion: reduce) { .book, .book-scene:hover .book { transition: none; transform: rotateY(-20deg) rotateX(3deg); } }
.book .cover { position: absolute; inset: 0; background: var(--sand); color: var(--ink); border-radius: 2px 6px 6px 2px; display: flex; flex-direction: column; justify-content: flex-start; padding: 7% 9% 0; box-shadow: 22px 28px 48px rgba(0,0,0,.45), 1px 1px 0 rgba(0,0,0,.4); overflow: hidden; }
.book .cover picture { position: absolute; left: 0; right: 0; bottom: 0; top: 34%; /* artwork fills the lower part; title sits on the sand band above */ }
.book .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book .cover > :not(picture) { position: relative; }
.book .cover .top { font-family: var(--mono); font-size: calc(var(--w) * 0.032); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.book .cover .title { margin-top: 6%; font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; line-height: 0.95; font-size: calc(var(--w) * 0.15); font-variation-settings: "SOFT" 80, "WONK" 0; }
.book .cover .title mark { color: var(--clay); }
.book .cover .sub { display: none; margin-top: 8%; font-family: var(--display); font-style: italic; font-size: calc(var(--w) * 0.05); line-height: 1.35; color: var(--ink-2); max-width: 92%; }
.book .cover .author { margin-top: auto; font-family: var(--mono); font-size: calc(var(--w) * 0.04); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; background: var(--sand); margin: 0 -9%; padding: 5% 9%; }
.book .spine { position: absolute; top: 2px; bottom: 2px; left: 0; width: 22px; background: var(--umber-3); transform-origin: left; transform: rotateY(90deg) translateX(-11px); border-radius: 2px 0 0 2px; }
.book .pages { position: absolute; top: 4px; bottom: 4px; right: -16px; width: 18px; background: repeating-linear-gradient(to right, #f4ecdf 0 1px, #cdbfa8 1px 2px); transform-origin: left; transform: rotateY(90deg) translateX(-2px) translateZ(0); }
.book-caption { text-align: center; font-size: 0.78rem; color: var(--cream-2); margin-top: 18px; line-height: 1.5; }

/* Sand reading surface */
.paper { background: var(--sand); color: var(--ink); padding: clamp(8px, 2vw, 24px) 0 clamp(64px, 8vw, 112px); }
.sec { padding: clamp(44px, 6vw, 80px) 0 0; display: grid; gap: 18px; }
.sec + .sec { border-top: 1px solid var(--line); margin-top: clamp(44px, 6vw, 80px); }
@media (min-width: 900px) { .sec { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } }
.sec-margin { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 900px) { .sec-margin { position: sticky; top: 24px; align-self: start; padding-top: 0.5em; } }
.sec-body { max-width: var(--measure); }
.sec-body h2 { font-size: clamp(1.7rem, 1rem + 2.1vw, 2.5rem); margin-bottom: 24px; max-width: 24ch; }
.paper .flash { margin-top: 0; }

/* Chapters: numbered because they are a sequence. Typewriter numerals. */
.chapters { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: ch; }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.chapters li:last-child { border-bottom: 1px solid var(--line); }
.chapters li::before { content: counter(ch, decimal-leading-zero); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6; color: var(--clay); }
.chapters h3 { font-size: 1.28rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 6px; }
.chapters p { font-size: 1.05rem; color: var(--ink-2); }

/* Stack */
.stack { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.stack li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; /* icon anchors to the first line of a multi-line block */ }
.stack svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--clay); margin-top: 4px; /* ajuste ótico: cap-height of the 1.25 line vs the icon box */ }
.stack strong { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.012em; display: block; line-height: 1.25; margin-bottom: 2px; }
.stack p { font-size: 1.05rem; color: var(--ink-2); }
.pricebar { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px; }
.pricebar .now { font-family: var(--display); font-size: clamp(2.2rem, 1rem + 3vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 0; }
.pricebar .later { font-size: 0.85rem; color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--clay); }
.pricebar .orders { font-size: 0.8rem; color: var(--ink-2); }

/* Progress (honest; set in admin) */
.progress { margin-top: 30px; max-width: 420px; }
.progress .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.progress .row b { color: var(--ink); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; }
.progress .bar { height: 10px; background: var(--sand-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--ochre); border-radius: 999px; }
.progress small { display: block; margin-top: 10px; font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0; text-transform: none; }

/* Guarantee: a typed note. */
.note { border: 1px dashed var(--ink-3); border-radius: 6px; padding: clamp(20px, 3vw, 32px); background: var(--sand-2); max-width: var(--measure); font-size: 0.98rem; line-height: 1.7; }
.note p { max-width: 56ch; }
.note .sig { margin-top: 18px; font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--clay); font-variation-settings: "SOFT" 100, "WONK" 1; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--display); font-weight: 500; font-size: 1.18rem; letter-spacing: -0.01em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--clay); transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 20px; color: var(--ink-2); font-size: 1.05rem; max-width: 56ch; }

/* Final CTA, back on umber */
.final-band { background: var(--umber); color: var(--cream); }
.final { padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); }
.final h2 { font-size: clamp(2.2rem, 1rem + 4.5vw, 4rem); max-width: 14ch; }
.final .lead { margin-top: 20px; font-size: 1.2rem; max-width: 40ch; color: var(--cream-2); }
.countdown { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.countdown div { display: grid; gap: 6px; }
.countdown b { font-size: clamp(1.9rem, 1rem + 2.8vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); line-height: 1; }
.final .cta-row { margin-top: 34px; }
.final .alt { font-family: var(--mono); font-size: 0.9rem; color: var(--cream-2); }

/* Sticky bar (mobile) */
/* In-app browsers (Instagram) animate their own toolbar while scrolling, so a bar glued to bottom:0 shows a gap
   underneath and sits behind the toolbar. The bar therefore (a) hangs 96px below the screen edge, so its own
   background covers any gap, and (b) lifts its content 22px + safe area above the edge. */
.stickybar { --hang: 96px; --lift: 22px; position: fixed; left: 0; right: 0; bottom: calc(-1 * var(--hang)); z-index: 20; background: var(--umber); color: var(--cream); border-top: 1px solid var(--line-dark); padding: 12px var(--gutter) calc(var(--hang) + var(--lift) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; transform: translate3d(0, 0, 0); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
/* With JS the bar starts off-screen and slides in once the hero's trust bullets are scrolled past. */
html.js .stickybar { transform: translate3d(0, 110%, 0); }
html.js .stickybar.is-visible { transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }
.stickybar .sticky-cover { flex-shrink: 0; width: 36px; height: 54px; border-radius: 2px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.stickybar .sticky-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.stickybar .label { flex: 1 1 auto; min-width: 0; }
.stickybar .btn { flex-shrink: 0; }
.stickybar .label { line-height: 1.25; }
.stickybar .label b { display: block; font-family: var(--display); font-weight: 500; font-size: 1rem; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.stickybar .label span { font-size: 0.75rem; color: var(--cream-2); }
.stickybar .btn { min-height: 46px; padding: 0 20px; font-size: 0.9rem; }
@media (min-width: 900px) { .stickybar { display: none; } }

/* Flash + waitlist */
.flash { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.05); font-size: 0.85rem; max-width: var(--measure); border-radius: 6px; }
.paper .flash { border-color: var(--line); background: var(--sand-2); }
.waitlist form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; margin-top: 20px; }
.waitlist input[type=email] { flex: 1 1 240px; min-height: 54px; padding: 0 16px; font-family: var(--mono); font-size: 0.95rem; border: 1px solid var(--line-dark); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--cream); }
.waitlist input::placeholder { color: var(--cream-3); }
.waitlist .hp { position: absolute; left: -9999px; }

/* Light theme (links page): warm white ground, ink text, no footer. */
html.theme-light { background: var(--white); }
html.theme-light body { background: var(--white); color: var(--ink); }
.theme-light mark { color: var(--clay); }
.theme-light .wordmark:hover { color: var(--clay); }
.theme-light .nav a { color: var(--ink-2); }
.theme-light .nav a:hover, .theme-light .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--clay); }
.theme-light .avatar { border-color: var(--line); background: var(--sand-2); }
.theme-light .avatar .initials { color: var(--ink); }
.theme-light .profile .bio { color: var(--ink); }
.theme-light .linkcard { background: #FFFFFF; border: 1px solid var(--line); }
.theme-light .linkcard:hover { background: var(--sand-2); }
.theme-light .linkcard.featured { background: var(--clay); border-color: var(--clay); color: var(--cream); }
.theme-light .linkcard.featured:hover { background: var(--clay-deep); }
.theme-light .links-foot { color: var(--ink-3); }

/* Links page ------------------------------------------------------------ */
.links-page { max-width: 560px; margin: 0 auto; padding: clamp(16px, 4vw, 40px) 0 40px; }
.profile { display: grid; justify-items: center; text-align: center; gap: 18px; }
.avatar { width: 104px; height: 104px; border-radius: 50%; border: 1.5px solid var(--cream-3); background: var(--umber-2); display: grid; place-items: center; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .initials { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; color: var(--cream); font-variation-settings: "SOFT" 100, "WONK" 1; }
.profile h1 { font-size: 1.9rem; }
.profile .bio { color: var(--cream-2); font-size: 1.05rem; max-width: 40ch; line-height: 1.55; }
.linklist { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.linkcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; background: var(--sand-2); color: var(--ink); border-radius: 8px; text-decoration: none; transition: transform .12s ease, background-color .12s ease; }
.linkcard:hover { text-decoration: none; transform: translateY(-1px); background: #fff9ef; }
.linkcard.featured { background: var(--clay); color: var(--cream); }
.linkcard.featured:hover { background: var(--clay-deep); }
.linkcard .ico { width: 44px; height: 44px; display: grid; place-items: center; }
.linkcard .ico svg { width: 24px; height: 24px; }
.linkcard .txt { display: grid; gap: 3px; min-width: 0; }
.linkcard .txt b { font-family: var(--display); font-weight: 500; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.2; }
.linkcard .txt span { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.linkcard.featured .txt span { color: var(--cream-2); }
.linkcard .chev { width: 20px; height: 20px; opacity: .7; }
.links-foot { margin-top: 36px; text-align: center; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--cream-3); }

/* Thank you / errors / 404 (on umber) */
.simple { min-height: calc(100svh - 200px); display: grid; align-content: center; padding: clamp(32px, 6vw, 80px) 0; }
.simple h1 { font-size: clamp(2.2rem, 1rem + 4.5vw, 4rem); max-width: 16ch; }
.simple .lead { margin-top: 24px; font-size: 1.2rem; max-width: 46ch; color: var(--cream-2); }
.simple .actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.receipt { margin-top: 28px; font-size: 0.82rem; color: var(--cream-2); }

/* Checkout (light theme) ------------------------------------------------ */
.checkout { padding: clamp(12px, 3vw, 32px) 0 clamp(48px, 8vw, 96px); }
.backlink { display: inline-block; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-2); text-decoration: none; margin-bottom: 24px; }
.backlink:hover { color: var(--clay); text-decoration: underline; }
.checkout-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; } .summary { position: sticky; top: 24px; } }
.summary { background: var(--sand-2); border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 3vw, 28px); }
.summary-head { display: flex; align-items: flex-start; /* cover anchors to the top of the multi-line text block */ gap: 18px; }
.summary-cover { flex-shrink: 0; width: 72px; height: 108px; border-radius: 2px; overflow: hidden; box-shadow: 4px 6px 16px rgba(42,28,21,.25); }
.summary-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.summary .kicker { color: var(--ink-2); margin-bottom: 10px; }
.summary h1 { font-size: 1.9rem; }
.sum-sub { margin-top: 10px; font-size: 1rem; color: var(--ink-2); }
.sum-list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-family: var(--mono); font-size: 0.85rem; color: var(--ink-2); }
.sum-list li { display: flex; align-items: flex-start; /* items may wrap */ gap: 10px; line-height: 1.45; }
.sum-list svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--clay); margin-top: 0.15em; /* ajuste ótico: first-line x-height */ }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.sum-total b { font-family: var(--display); font-weight: 600; font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); text-transform: none; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
.sum-note { margin-top: 8px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }

.payform { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 16px; }
.payform h2 { font-size: 1.25rem; margin-top: 6px; }
.payform h2 + .field { margin-top: -2px; }
.payform .field { display: grid; gap: 6px; }
.payform .field > span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.payform .field em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.payform .field small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.payform input[type=email], .payform input[type=text] { min-height: 50px; padding: 0 14px; font-family: var(--mono); font-size: 0.95rem; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; color: var(--ink); width: 100%; }
.payform input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(185,87,59,.15); }
.payform input::placeholder { color: var(--ink-3); }
.payform .hp { position: absolute; left: -9999px; }
.payment-element { min-height: 120px; }
.pe-loading { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-3); padding: 12px 0; }
.pay-error { font-family: var(--mono); font-size: 0.85rem; color: #9C2F1F; background: rgba(156,47,31,.06); border: 1px solid rgba(156,47,31,.25); border-radius: 6px; padding: 10px 12px; margin: 0; }
.paybtn { min-height: 58px; font-size: 1rem; }
.paybtn:disabled { opacity: .55; cursor: default; }
.paybtn.is-busy { opacity: .8; }
.legal { font-family: var(--mono); font-size: 0.75rem; line-height: 1.55; color: var(--ink-3); margin: 0; }
.checkout .flash { margin: 0; }

/* Thank-you (on umber) --------------------------------------------------- */
.thanks { padding: clamp(24px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); }
.thanks h1 { font-size: clamp(2.3rem, 1rem + 4.6vw, 4.2rem); max-width: 16ch; }
.confirm { margin-top: 36px; display: grid; gap: 24px; background: var(--umber-2); border: 1px solid var(--line-dark); border-radius: 10px; padding: clamp(20px, 3vw, 32px); max-width: 760px; }
@media (min-width: 900px) { .confirm { grid-template-columns: 1.2fr 0.8fr; gap: 40px; } }
.confirm-row { display: flex; align-items: flex-start; /* icon anchors to the first line */ gap: 14px; }
.confirm-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--clay); color: var(--cream); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; /* ajuste ótico: centre on the email line */ }
.confirm-ico svg { width: 18px; height: 18px; }
.confirm-row p { color: var(--cream-2); font-size: 1.05rem; }
.confirm-email { font-family: var(--mono); font-size: 1.05rem; color: var(--cream) !important; overflow-wrap: anywhere; margin-bottom: 8px; }
.confirm-meta { font-family: var(--mono); font-size: 0.78rem; color: var(--cream-3) !important; margin-top: 10px; }
.confirm-count { display: grid; gap: 10px; align-content: start; }
.confirm-label, .confirm-date { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); }
.confirm .countdown { margin-top: 0; gap: 6px 18px; }
.confirm .countdown b { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem); }
.thanks-grid { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 40px; max-width: 900px; }
@media (min-width: 900px) { .thanks-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.thanks-grid h2 { font-size: 1.6rem; margin-bottom: 14px; }
.thanks-grid p { color: var(--cream-2); }
.thanks-grid .btn { margin-top: 20px; }
.thanks-grid .textlink { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 0.9rem; color: var(--cream-2); }