@font-face { font-family: Figtree; src: url(/assets/fonts/figtree-var.woff2) format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Display'; src: url(/assets/fonts/libre-caslon-display-400.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; src: url(/assets/fonts/libre-caslon-text-400.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; src: url(/assets/fonts/libre-caslon-text-400-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Vidaloka; src: url(/assets/fonts/vidaloka-400.woff2) format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* askpearl.co homepage (see web/DESIGN.md). The "Final look" block at the end is normative:
   ivory + navy-plum ink + champagne; Libre Caslon Display, Figtree, Libre Caslon Text italic; Vidaloka wordmark. Light only (color-scheme: light, never "light only"). */
:root {
  color-scheme: light;
  --ink-deep: oklch(21% 0.045 298);
  --ink: oklch(23% 0.035 292);
  --slate: oklch(42% 0.03 300);
  --muted: oklch(50% 0.025 330);
  --pearl: oklch(98.4% 0.005 50);
  --cream: oklch(95% 0.014 45);
  --card: oklch(99.6% 0.003 60);
  --rule: oklch(83% 0.016 40);
  --champagne: oklch(68% 0.11 66);
  --champagne-pale: oklch(90% 0.06 84);
  --gold-deep: oklch(58% 0.11 80);
  --gold-script: oklch(50% 0.085 38);
  --rose: oklch(80% 0.07 42);

  --display: 'Vidaloka', 'Bodoni Moda', serif;
  --script: 'Pinyon Script', cursive;
  --text: 'Source Serif 4', Georgia, serif;

  --gutter: clamp(20px, 11.9vw, 360px);
  --nav-h: clamp(64px, 5.6vw, 156px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--pearl) url('/assets/plates/ground.png') repeat;
  background-size: 550px auto;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(18px, 1.1vw + 0.4rem, 24px);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--champagne-pale); color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text); font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn-gold, .btn-ink {
  /* Stationery cartouche: scooped corners and an inner rule, drawn as a 9-slice SVG frame
     so every engine (Safari included) renders the same shape. */
  position: relative;
  border: 1px solid transparent;
  border-image-slice: 20 fill; border-image-width: 0.62em; border-image-repeat: stretch;
  background: none;
  transition: filter 0.35s var(--ease-out);
}
.btn-gold { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='%23c68a49'/%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='none' stroke='%238a5a26' stroke-width='1.6'/%3E%3Cpath d='M12 5H48A13 13 0 0 0 55 12V48A13 13 0 0 0 48 55H12A13 13 0 0 0 5 48V12A13 13 0 0 0 12 5Z' fill='none' stroke='%23fcf4e6' stroke-opacity='0.9' stroke-width='0.9'/%3E%3C/svg%3E"); }
.btn-ink { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='%231b132a'/%3E%3Cpath d='M12 5H48A13 13 0 0 0 55 12V48A13 13 0 0 0 48 55H12A13 13 0 0 0 5 48V12A13 13 0 0 0 12 5Z' fill='none' stroke='%23e6b09b' stroke-opacity='0.75' stroke-width='0.9'/%3E%3C/svg%3E"); }
.btn-gold:hover, .btn-ink:hover { filter: brightness(0.94); }
.btn-gold:active, .btn-ink:active { filter: brightness(0.88); }
.btn-gold { color: var(--ink-deep); }
.btn-ink { color: var(--rose); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-inline: var(--gutter);
  background: var(--pearl);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 0.32em; text-decoration: none; color: var(--ink-deep); font-family: var(--display); font-size: clamp(26px, 3vw, 86px); line-height: 1; }
.brand svg { width: 1.3em; height: 1.3em; flex: none; margin-right: 0.12em; filter: drop-shadow(0 0 0.22em oklch(99% 0.01 350)) drop-shadow(0 0 0.1em oklch(93% 0.04 350 / 0.9)) drop-shadow(0 0.06em 0.08em oklch(45% 0.04 340 / 0.25)); }
.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 4.2rem); margin-right: auto; margin-left: clamp(2rem, 9vw, 14rem); }
.nav-links a { text-decoration: none; font-size: clamp(16px, 1.36vw, 38px); font-weight: 400; color: var(--ink); }
.nav-links a:hover { text-decoration: underline; }
.nav-cta { font-family: var(--display); font-size: clamp(15px, 1.62vw, 44px); padding: 0.42em 1.05em 0.46em; margin-right: -0.7vw; letter-spacing: 0; }
.nav-menu { display: none; }

/* ---------- Hero ---------- */
.hero {
  min-height: min(calc(100svh - var(--nav-h)), 50.2vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4vw;
  padding-inline: var(--gutter) calc(var(--gutter) * 0.72);
}
.hero-copy { max-width: 42vw; padding-block: 3vw; }
.hero h1 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.9rem, 5.7vw, 9.8rem);
  line-height: 0.985; letter-spacing: -0.022em;
  text-transform: uppercase; color: var(--ink-deep);
  text-wrap: balance;
}
.hero h1 span { display: block; }
.script {
  text-wrap: balance;
  margin: 0.06em 0 0 -0.08em;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 5.9rem);
  line-height: 1.25; color: var(--gold-script);
}
.lead { margin: 1.4em 0 0 0.2em; max-width: 46ch; font-size: clamp(1.15rem, 1.42vw, 2.45rem); line-height: 1.5; color: oklch(30% 0.025 300); }
.actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2.5vw; margin-top: clamp(1.5rem, 2.3vw, 4.2rem); }
.actions .btn { font-size: clamp(1.02rem, 1.5vw, 2.6rem); padding: 0.5em 0.85em 0.54em; letter-spacing: -0.005em; }
.text-link { font-size: clamp(1.05rem, 1.5vw, 2.6rem); font-weight: 400; color: var(--ink-deep); text-decoration: underline; text-underline-offset: 0.34em; text-decoration-thickness: 0.06em; text-decoration-color: var(--ink-deep); position: relative; top: 0.4em; }
.text-link:hover { text-decoration-color: var(--gold-deep); }
.trust { margin: clamp(1.1rem, 1.6vw, 2.8rem) 0 0; font-size: clamp(0.78rem, 0.95vw, 1.6rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.trust span[aria-hidden] { margin-inline: 0.55em; }
.consent { margin: 0.9rem 0 0; font-size: clamp(0.78rem, 0.62vw, 1rem); color: var(--muted); max-width: 46ch; }

/* ---------- Phone ---------- */
.phone {
  position: relative; margin: 0;
  height: min(calc((100svh - var(--nav-h)) * 1.02), 51.2vw);
  max-height: 1420px;
  margin-block: 0 -5%;
  aspect-ratio: 1536 / 2752;
  container-type: inline-size;
  justify-self: end;
}
.phone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.screen {
  position: absolute; left: 18.2%; right: 18.2%; top: 11.25%; bottom: 10.9%;
  border-radius: 9.5cqw;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #fbfbfb;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-weight: 400; color: #111;
}
.thread-head {
  flex: none;
  padding: 7.6cqw 3cqw 2.2cqw;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  background: #f4f4f5;
  border-bottom: 0.25cqw solid #e2e2e4;
}
.thread-head .back, .thread-head .video { width: 4.4cqw; height: 4.4cqw; color: #2f80ed; margin-bottom: 4.6cqw; }
.thread-head .video { justify-self: end; width: 5.2cqw; }
.contact { display: grid; justify-items: center; gap: 0.9cqw; font-size: 2.15cqw; color: #222; }
.contact svg { width: 8.2cqw; height: 8.2cqw; filter: drop-shadow(0 0.3cqw 0.5cqw rgb(0 0 0 / 0.12)); }
.contact b { font-weight: 500; }
.contact b { display: inline-flex; align-items: center; gap: 0.5cqw; }
.contact b svg { width: 1.5cqw; height: 1.5cqw; color: #9a9a9e; filter: none; }
.thread { flex: 1; padding: 5.6cqw 2.6cqw 2.4cqw; display: flex; flex-direction: column; gap: 1.3cqw; overflow: hidden; }
.thread > * { margin: 0; }
.stamp { text-align: center; font-size: 2cqw; color: #8e8e93; line-height: 1.3; margin-bottom: 0.8cqw; }
.stamp b { font-weight: 500; }
.bubble {
  max-width: 81%;
  padding: 1.5cqw 2.8cqw 1.65cqw;
  border-radius: 4.6cqw;
  font-size: 3.1cqw; line-height: 1.3;
  letter-spacing: -0.005em;
}
.bubble.guest { align-self: flex-end; max-width: 80%; background: #1c6fe2; color: #fff; }
.bubble.guest.wrap-2 { max-width: 64%; }
.bubble.pearl { align-self: flex-start; background: #e9e9eb; color: #111; }
.delivered { align-self: flex-end; font-size: 2cqw; color: #8e8e93; margin-top: -0.6cqw; }
.typing { align-self: flex-start; background: #e9e9eb; border-radius: 4.6cqw; padding: 2.3cqw 3cqw; display: none; gap: 1cqw; }
.typing i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #8e8e93; animation: blink 1.2s infinite both; }
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.composer { flex: none; position: relative; display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3cqw 8.4cqw; }
.composer::after { content: ''; position: absolute; left: 50%; bottom: 2.6cqw; width: 34%; height: 1.1cqw; translate: -50% 0; border-radius: 1cqw; background: #111; }
.composer svg { width: 5cqw; height: 5cqw; color: #8e8e93; flex: none; }
.composer .field { flex: 1; display: flex; align-items: center; justify-content: space-between; border: 0.28cqw solid #d6d6da; border-radius: 4cqw; padding: 1.3cqw 1.2cqw 1.3cqw 2.6cqw; font-size: 3cqw; color: #a1a1a6; }
.composer .field svg { width: 4.4cqw; height: 4.4cqw; }

/* Thread playback: content is visible by default; JS opts in to the sequence. */
.js-play .thread [data-step] { opacity: 0; transform: translateY(1.2cqw) scale(0.985); transform-origin: bottom center; transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.js-play .thread [data-step].on { opacity: 1; transform: none; }
.js-play .typing.on { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .js-play .thread [data-step] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; --nav-h: 64px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 2.2rem var(--gutter) 3rem; row-gap: 2.4rem; }
  .hero-copy { max-width: none; padding: 0; }
  .hero h1 { font-size: clamp(2.7rem, 13.6vw, 4.6rem); }
  .script { font-size: clamp(2rem, 9.6vw, 3.3rem); }
  .lead { font-size: 1.12rem; max-width: 34ch; }
  .actions .btn { width: 100%; font-size: 1.08rem; padding: 0.85em 1em; }
  .text-link { font-size: 1.05rem; }
  .trust { letter-spacing: 0.18em; font-size: 0.74rem; }
  .phone { height: auto; width: min(78vw, 360px); justify-self: center; }
}

/* ---------- Sections ---------- */
section:not(.hero) { padding: clamp(4.5rem, 8vw, 11rem) var(--gutter); }
h2 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--ink-deep); font-size: clamp(2.1rem, 3.5vw, 5.4rem); line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; }
h3 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--ink-deep); font-size: clamp(1.35rem, 1.65vw, 2.5rem); line-height: 1.15; }
section p { text-wrap: pretty; }
.text-link.small { font-size: inherit; position: static; text-underline-offset: 0.28em; }
.script.small { font-size: clamp(1.7rem, 2.3vw, 3.6rem); margin-top: 0.1em; }

.band-problem { background: var(--cream); border-block: 1px solid var(--rule); }
.pull { margin: 0 auto; max-width: 1180px; }
.pull p { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.55vw, 3.9rem); line-height: 1.3; color: var(--ink-deep); text-wrap: balance; }
.pull footer { text-wrap: balance; margin-top: 1.4rem; font-family: var(--script); font-size: clamp(1.8rem, 2.6vw, 4rem); color: var(--gold-script); }

.how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 9rem); align-items: start; }
.how-intro { position: sticky; top: calc(var(--nav-h) + 3rem); }
.how-intro p { margin: 1.2rem 0 1.6rem; max-width: 34ch; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: clamp(3rem, 5vw, 7rem) minmax(0, 1fr) clamp(8rem, 15vw, 22rem); gap: clamp(1rem, 2.4vw, 3.6rem); align-items: center; padding-block: clamp(1.8rem, 3vw, 4.4rem); border-bottom: 1px solid var(--rule); }
.steps p { margin: 0.6rem 0 0; max-width: 46ch; }
.numeral { font-family: var(--display); font-size: clamp(2rem, 3.2vw, 5rem); line-height: 1; color: var(--gold-script); align-self: start; }
.steps img { width: 100%; height: auto; }

.loop { background: var(--card); border-block: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 9rem); align-items: center; }
.loop-copy > p:not(.script) { margin: 1.1rem 0 0; max-width: 40ch; }
.loop-copy .aside { color: var(--slate); font-size: 0.92em; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.ledger { margin: 0; padding: clamp(1.6rem, 2.8vw, 3.6rem); border: 1px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='%23fefdfb'/%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='none' stroke='%23d6d0c6' stroke-width='1.4'/%3E%3Cpath d='M12 5H48A13 13 0 0 0 55 12V48A13 13 0 0 0 48 55H12A13 13 0 0 0 5 48V12A13 13 0 0 0 12 5Z' fill='none' stroke='%23d8ba79' stroke-opacity='0.7' stroke-width='0.9'/%3E%3C/svg%3E") 20 fill / 26px stretch; filter: drop-shadow(0 1.1rem 1.6rem oklch(30% 0.04 330 / 0.14)); position: relative; }
.ledger figcaption { margin-top: 1.1rem; font-style: italic; font-size: 0.86em; color: var(--slate); }
.ledger ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.entry { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start; font-size: 0.92em; }
.entry .when { padding-top: 0.75em; font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.entry.later { margin-top: 0.8rem; padding-top: 1.2rem; border-top: 1px dashed var(--rule); }
.entry.later .when { grid-row: span 3; }
.entry.later > p { grid-column: 2; }
.bubble-s { margin: 0; padding: 0.7em 1em 0.75em; border-radius: 1.1em; line-height: 1.35; max-width: 34ch; }
.bubble-s b { display: block; font-weight: 600; font-size: max(0.78em, 12px); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25em; }
.bubble-s.guest { background: #1c6fe2; color: #fff; justify-self: end; }
.bubble-s.pearl { background: oklch(92% 0.006 285); color: var(--ink-deep); justify-self: start; }
.bubble-s.to-you { background: var(--ink-deep); color: var(--pearl); justify-self: start; }
.bubble-s.you { background: oklch(92% 0.05 82); color: var(--ink-deep); justify-self: end; }
.entry .note { margin: 0.3rem 0 0; font-style: italic; color: var(--slate); }

.views-intro { max-width: 60ch; }
.views-intro p { margin: 1.1rem 0 0; }
.views-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 6rem); margin-top: clamp(2.5rem, 4vw, 6rem); align-items: start; }
.view { margin: 0; }
.view.lift { transform: translateY(-2.4rem); }
.mini-phone { position: relative; aspect-ratio: 1536 / 2752; max-width: 380px; margin-inline: auto; }
.mini-phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mini-phone .shot { z-index: 2; position: absolute; left: 18.2%; right: 18.2%; top: 11.25%; bottom: 10.9%; width: 63.6%; height: 77.85%; object-fit: cover; object-position: top; border-radius: 1.4rem; }
.view figcaption { margin: 0.4rem auto 0; max-width: 30ch; text-align: center; color: var(--ink); }
.view figcaption b { font-family: var(--display); font-weight: 400; color: var(--ink-deep); }

.pricing { display: grid; place-items: center; background: var(--cream); border-block: 1px solid var(--rule); }
.menu { position: relative; width: min(100%, 1040px); padding: clamp(2.2rem, 4.5vw, 5.5rem) clamp(1.6rem, 5vw, 6rem); border: 1px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='%23fefdfb'/%3E%3Cpath d='M8 0H52A8 8 0 0 0 60 8V52A8 8 0 0 0 52 60H8A8 8 0 0 0 0 52V8A8 8 0 0 0 8 0Z' fill='none' stroke='%23d6d0c6' stroke-width='1.4'/%3E%3Cpath d='M12 5H48A13 13 0 0 0 55 12V48A13 13 0 0 0 48 55H12A13 13 0 0 0 5 48V12A13 13 0 0 0 12 5Z' fill='none' stroke='%23d8ba79' stroke-opacity='0.7' stroke-width='0.9'/%3E%3C/svg%3E") 20 fill / 34px stretch; text-align: center; filter: drop-shadow(0 1.2rem 1.8rem oklch(30% 0.04 330 / 0.15)); }
.menu .crest { width: min(380px, 70%); height: auto; margin: 0 auto 1.4rem; }
.menu-sub { margin: 0.9rem auto 0; max-width: 44ch; color: var(--slate); }
.plans { margin: clamp(1.8rem, 3vw, 3.4rem) 0 0; text-align: left; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--rule); }
.plan:last-child { border-bottom: 1px solid var(--rule); }
.plan dt { display: flex; align-items: baseline; gap: 0.9rem; min-width: 0; }
.plan dt::after { content: ''; flex: 1; border-bottom: 1px dotted oklch(60% 0.03 300 / 0.6); translate: 0 -0.35em; }
.plan-name { font-family: var(--display); font-size: clamp(1.5rem, 1.9vw, 2.8rem); color: var(--ink-deep); }
.plan-cap { font-size: 0.78em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.price { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.1vw, 3.1rem); color: var(--ink-deep); font-variant-numeric: lining-nums tabular-nums; align-self: baseline; }
.plan-note { grid-column: 1 / -1; margin: 0.35rem 0 0; max-width: 56ch; color: var(--ink); }
.founding { margin: 1.6rem 0 0; font-style: italic; color: var(--slate); }
.menu-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin-top: 1.8rem; }
.menu-actions .btn { font-size: clamp(1rem, 1.15vw, 1.7rem); padding: 0.62em 1.1em; }

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 9rem); align-items: start; }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1.25rem; font-family: var(--display); font-size: clamp(1.2rem, 1.45vw, 2.2rem); color: var(--ink-deep); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 0.8em; height: 0.8em; background: var(--gold-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate 0.4s var(--ease-out); }
.qa details[open] summary::after { rotate: 180deg; }
.qa summary:hover { color: oklch(35% 0.06 300); }
.qa details p { margin: -0.2rem 0 1.4rem; max-width: 62ch; }

.closing { background: var(--ink-deep); color: var(--pearl); text-align: center; display: grid; justify-items: center; }
.closing .crest { width: min(560px, 86%); height: auto; margin-bottom: 1.8rem; }
.closing h2 { color: var(--pearl); }
.closing .script { color: var(--rose); margin: 0.1em 0 1.6rem; }
.closing .btn { font-size: clamp(1.05rem, 1.35vw, 2.2rem); padding: 0.6em 1.05em; }
.closing .consent, .closing-alt { color: oklch(84% 0.02 330); }
.closing .consent { margin-top: 1.2rem; }
.closing-alt { margin: 0.6rem 0 0; font-size: 0.86em; }
.closing a:not(.btn) { color: var(--rose); }
.closing :focus-visible { outline-color: var(--rose); }

.footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; padding: clamp(3rem, 5vw, 6rem) var(--gutter) 2.4rem; border-top: 1px solid var(--rule); }
.foot-brand .brand { font-size: clamp(26px, 2vw, 52px); }
.foot-brand p { margin: 0.8rem 0 0.6rem; max-width: 36ch; color: var(--slate); }
.btn-preferred { gap: 0.55em; margin-top: 0.4rem; padding: 0.5em 0.95em; font-size: 0.86em; font-weight: 400; color: var(--ink); border: 1px solid var(--rule); background: var(--card); border-radius: 0.3em; }
.btn-preferred:hover { border-color: oklch(70% 0.03 300); }
.btn-preferred .g-icon { width: 1.05em; height: 1.05em; flex: none; }
.foot-links { display: grid; grid-template-columns: repeat(2, auto); gap: 0.6rem 3rem; align-content: start; }
.foot-links a { text-decoration: none; color: var(--ink); }
.foot-links a:hover { text-decoration: underline; }
.foot-legal { grid-column: 1 / -1; margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); font-size: 0.84em; color: var(--slate); }

@media (max-width: 900px) {
  .how, .loop, .faq { grid-template-columns: 1fr; }
  .how-intro { position: static; }
  .steps li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .steps img { grid-column: 2; width: min(220px, 70%); }
  .entry { grid-template-columns: 1fr; }
  .entry .when { padding-top: 0; }
  .entry.later .when { grid-row: auto; }
  .entry.later > p { grid-column: 1; }
  .bubble-s.guest, .bubble-s.you { justify-self: end; }
  .views-row { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
  .view.lift { transform: none; }
  .plan dt { flex-wrap: wrap; gap: 0.2rem 0.8rem; }
  .plan dt::after { display: none; }
  .footer { grid-template-columns: 1fr; }
}

/* Desktop: the consent line hangs below the hero block so the measured composition holds. */
@media (min-width: 901px) {
  .hero-copy { position: relative; }
  .hero-copy > .consent { position: absolute; left: 0; top: calc(100% - 3vw + 0.6rem); margin: 0; }
}
.views-note { margin: clamp(2rem, 3vw, 4rem) 0 0; text-align: center; font-style: italic; font-size: 0.86em; color: var(--slate); }

.menu .consent { margin: 1.1rem auto 0; }

/* ===== Final look (Jon, 2026-10-08): Ink palette and treatment, Sage fonts, Vidaloka wordmark. ===== */
:root {
  --display: 'Libre Caslon Display', serif; --ui: 'Figtree', system-ui, sans-serif; --text: var(--ui);
  --wordmark: 'Vidaloka', serif;
  --pearl: oklch(98.2% 0.006 80); --cream: oklch(95.2% 0.012 80); --card: oklch(99.6% 0.003 80); --rule: oklch(84% 0.012 80);
  --ink-deep: oklch(19% 0.04 285); --ink: oklch(25% 0.03 285); --slate: oklch(42% 0.025 285); --muted: oklch(46% 0.02 285);
  --gold-script: oklch(52% 0.1 68); --accent: oklch(80% 0.09 82); --rose: oklch(82% 0.08 82);
  --cta-bg: oklch(19% 0.04 285); --cta-fg: oklch(97% 0.01 80); --cta-rule: oklch(80% 0.09 82 / 0.7); --cta-shadow: oklch(19% 0.04 285 / 0.6);
  --logo-ring: oklch(62% 0.1 80);
}
body { background: var(--pearl); }
.brand { font-family: var(--wordmark); }
.brand svg circle[stroke] { stroke: var(--logo-ring); }
body, .lead, .nav-links a, .text-link, .trust, .consent, section p, .qa details p, .bubble-s, .foot-links a, .view figcaption { font-family: var(--ui); }
p.script, .pull footer { font-family: var(--script); }
.hero h1 { font-size: clamp(2.8rem, 5.3vw, 9rem); line-height: 1.06; letter-spacing: -0.005em; }
.script { margin-top: 0.5em; font-size: clamp(2rem, 3.5vw, 6rem); }
.lead { margin-top: 1.1em; }
.btn-gold, .btn-ink {
  border: 0; border-image: none; border-radius: 3px;
  background: var(--cta-bg); color: var(--cta-fg);
  font-family: var(--ui); font-weight: 500; letter-spacing: 0.01em;
  outline: 1px solid var(--cta-rule); outline-offset: -5px;
  box-shadow: 0 0.6em 1.4em -0.8em var(--cta-shadow);
}
.btn-gold:hover, .btn-ink:hover { filter: brightness(1.18); }
.btn-gold:active, .btn-ink:active { filter: brightness(1.3); }
.nav-cta { font-family: var(--ui); font-size: clamp(14px, 1.05vw, 30px); padding: 0.75em 1.3em; margin-right: 0; }
.actions .btn { font-size: clamp(1rem, 1.12vw, 2rem); padding: 0.95em 1.5em; }
.closing .btn { --cta-bg: var(--accent); --cta-fg: var(--ink-deep); --cta-rule: oklch(100% 0 0 / 0.55); --cta-shadow: oklch(0% 0 0 / 0.4); }
.trust { letter-spacing: 0.16em; font-size: clamp(0.72rem, 0.78vw, 1.3rem); font-weight: 500; }
.qa summary { font-family: var(--display); }
.plan-cap, .entry .when, .bubble-s b { font-family: var(--ui); }
.closing .script { margin-top: 0.35em; }
.menu .crest { max-width: 100%; }
@media (max-width: 900px) { .menu .crest { width: min(240px, 80%); } }

/* Accent line: italic serif instead of script, for legibility (Jon, 2026-10-08). */
:root { --accent-italic: 'Libre Caslon Text', Georgia, serif; }
p.script, .pull footer { font-family: var(--accent-italic); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.hero .script { font-size: clamp(1.8rem, 2.9vw, 5rem); line-height: 1.2; margin-top: 0.45em; }
.hero h1 .script { display: block; text-transform: none; font-family: var(--accent-italic); font-style: italic; letter-spacing: -0.005em; }
.script.small { font-size: clamp(1.25rem, 1.6vw, 2.6rem); }
.pull footer { font-size: clamp(1.3rem, 1.8vw, 2.8rem); }
.closing .script { font-size: clamp(1.4rem, 2.2vw, 3.6rem); }
/* Closing-band email capture (pearl.js handles [data-capture]). */
.closing .capture { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: min(100%, 30rem); margin-top: 1.6rem; }
.closing .capture input { flex: 1 1 14rem; min-width: 0; padding: 0.8em 1em; font: 400 1rem var(--ui); color: var(--ink-deep); background: oklch(97% 0.008 80); border: 1px solid oklch(80% 0.09 82 / 0.4); border-radius: 3px; }
.closing .capture input::placeholder { color: oklch(48% 0.02 285); }
.closing .capture .btn-ghost { flex: 0 0 auto; padding: 0.8em 1.2em; font: 500 1rem var(--ui); color: var(--accent); background: transparent; border: 1px solid oklch(80% 0.09 82 / 0.6); border-radius: 3px; cursor: pointer; }
.closing .capture .btn-ghost:hover { background: var(--accent); color: var(--ink-deep); }
.closing .form-done { margin-top: 1.6rem; color: oklch(90% 0.02 80); }
/* Consent line: one line on desktop, with room below the hero block (Jon, 2026-10-08). */
@media (min-width: 901px) {
  .hero-copy > .consent { max-width: none; white-space: nowrap; }
  .hero-copy { padding-bottom: calc(3vw + 3.2rem); }
}
@media (min-width: 901px) {
  .hero-copy > .consent { position: static; margin: 0.9rem 0 0; }
}
h1 em, h2 em, h3 em { font-family: var(--accent-italic); font-style: italic; font-size: 0.82em; }
h3 { font-size: clamp(1.5rem, 2vw, 2.9rem); }

/* ===== Review fixes (2026-10-08) ===== */
/* Keyboard focus: the inset CTA outline must not replace the focus ring. */
.btn-gold:focus-visible, .btn-ink:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.closing .btn:focus-visible { outline-color: var(--rose); }
main:focus, [tabindex="-1"]:focus { outline: none; }
.skip-link { position: absolute; left: var(--gutter); top: 0.5rem; z-index: 100; padding: 0.7em 1.1em; border-radius: 3px;
  background: var(--ink-deep); color: var(--pearl); font-family: var(--ui); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
/* 44px touch targets. */
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links { gap: 0 3rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Lead form failure message. */
.closing .form-error { margin-top: 1rem; max-width: 30rem; color: oklch(90% 0.02 80); }
.closing .form-error a { color: var(--rose); }


/* Footer social links (2026-10-08). */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 2rem; }
.foot-social { display: flex; gap: 0 1.6rem; }
.foot-social a { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot-social a:hover { text-decoration: underline; }
.foot-social svg { width: 1.15em; height: 1.15em; flex: none; }