/* Pearl marketing site — shared styles (Black Tie, Second Edition). docs/pearl-brand.md */
:root {
  color-scheme: light;
  /* Ink & slate */
  --ink-deep: oklch(21% 0.035 274); --ink: oklch(24% 0.03 274);
  --slate: oklch(46% 0.03 274); --muted: oklch(55% 0.02 280);
  --meta: oklch(43% 0.028 280); /* a11y-safe small text on light (≥4.5:1) */
  /* Pearl grounds */
  --pearl: oklch(95.5% 0.012 88); --cream: oklch(93% 0.016 86);
  --pearl-card: oklch(98.5% 0.006 90); --rule: oklch(83% 0.014 86);
  /* Champagne accent */
  --champagne: oklch(80% 0.09 86); --gold-deep: oklch(64% 0.12 82);
  --champagne-pale: oklch(90% 0.06 84);
  /* On-ink tints */
  --on-ink: oklch(95.5% 0.012 88); --on-ink-soft: oklch(95.5% 0.012 88 / 0.82);
  --on-ink-mute: oklch(95.5% 0.012 88 / 0.66);
  /* Legacy aliases — older class CSS maps onto the brand by role */
  --parchment: var(--pearl); --warm-white: var(--pearl-card);
  --moss-deep: var(--ink-deep); --moss: var(--ink); --moss-mid: var(--meta);
  --moss-light: var(--champagne); --moss-pale: var(--champagne-pale);
  --gold: var(--champagne); --gold-pale: var(--champagne-pale);
  --rust: oklch(54% 0.12 35);
  --font-wordmark: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-accent: 'EB Garamond', Georgia, serif;
  --text-xs: clamp(0.66rem,0.61rem + 0.24vw,0.74rem);
  --text-sm: clamp(0.8rem,0.74rem + 0.3vw,0.9rem);
  --text-base: clamp(0.94rem,0.89rem + 0.25vw,1.03rem);
  --text-md: clamp(1.05rem,0.98rem + 0.35vw,1.2rem);
  --text-lg: clamp(1.2rem,1.02rem + 0.85vw,1.5rem);
  --text-xl: clamp(1.45rem,1.12rem + 1.6vw,2rem);
  --text-2xl: clamp(1.9rem,1.35rem + 2.6vw,2.9rem);
  --text-3xl: clamp(2.4rem,1.6rem + 4vw,4rem);
  --text-hero: clamp(2.6rem,1.55rem + 4.6vw,5rem);
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem;
  --radius:3px; --radius-sm:3px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--pearl); }
body { background:var(--pearl); color:var(--ink); font-family:var(--font-body);
  font-size:var(--text-base); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
[id] { scroll-margin-top:84px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 var(--sp-6); }
.narrow { max-width:680px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.eyebrow { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.3em;
  text-transform:uppercase; color:var(--meta); }
em { font-style:italic; }
a { color:inherit; }
::selection { background:var(--champagne-pale); }

/* ---- Pearl mark + wordmark ---- */
.pearl { width:1em; height:1em; flex:0 0 auto; vertical-align:-0.12em; }
.wordmark { display:inline-flex; align-items:center; gap:0.42em; font-family:var(--font-wordmark);
  font-weight:600; font-optical-sizing:auto; letter-spacing:0; text-decoration:none; }
.wordmark .pearl { width:0.86em; height:0.86em; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-body);
  font-size:var(--text-xs); letter-spacing:0.15em; text-transform:uppercase; font-weight:400;
  padding:var(--sp-3) var(--sp-6); border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background 220ms ease, color 220ms ease, border-color 220ms ease; }
.btn .arr { transition:transform 240ms cubic-bezier(0.22,1,0.36,1); }
.btn:hover .arr { transform:translateX(3px); }
.btn-gold { background:var(--champagne); color:var(--ink); }
.btn-gold:hover { background:var(--gold-deep); color:var(--on-ink); }
.btn-primary { background:var(--ink); color:var(--pearl); }
.btn-primary:hover { background:var(--ink-deep); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--pearl); }

/* ---- Hatched ink band (shared motif) ---- */
.band { position:relative; background:var(--ink-deep); color:var(--on-ink); overflow:hidden; }
.band::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg,transparent,transparent 58px,
    oklch(100% 0 0 / 0.022) 58px, oklch(100% 0 0 / 0.022) 59px); }
.band > * { position:relative; z-index:1; }
/* Light band (legacy: sub-page light heroes, launch pages) */
.band-light { background:var(--pearl); color:var(--ink); }
.band-light::before { background-image:repeating-linear-gradient(-45deg,transparent,transparent 50px,
  oklch(20% 0.03 274 / 0.05) 50px, oklch(20% 0.03 274 / 0.05) 51px); }
.band-light .eyebrow { color:var(--meta); }

/* ---- Nav ---- */
.nav { position:sticky; top:0; z-index:40; background:oklch(21% 0.035 274 / 0.9);
  -webkit-backdrop-filter:saturate(1.1) blur(3px); backdrop-filter:saturate(1.1) blur(3px);
  border-bottom:1px solid transparent; transition:border-color 260ms ease, background 260ms ease; }
.nav.scrolled { border-bottom-color:oklch(80% 0.09 86 / 0.28); background:oklch(20% 0.035 274 / 0.95); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav .wordmark { font-size:1.35rem; color:var(--on-ink); }
.nav .wordmark .pearl { filter:drop-shadow(0 0 8px oklch(80% 0.09 86 / 0.35)); }
.nav-links { display:flex; align-items:center; gap:var(--sp-6); }
.nav-links a.lnk { font-size:var(--text-xs); letter-spacing:0.15em; text-transform:uppercase;
  text-decoration:none; color:var(--on-ink-mute); transition:color 200ms ease; }
.nav-links a.lnk:hover, .nav-links a.lnk:focus-visible,
.nav-links a.lnk[aria-current="page"] { color:var(--champagne); }
.nav .nav-links .btn-ghost { color:var(--champagne); border-color:oklch(80% 0.09 86 / 0.5); }
.nav .nav-links .btn-ghost:hover { background:var(--champagne); color:var(--ink); }
.nav-toggle, .nav-burger { display:none; }

/* Mobile nav (checkbox burger) */
@media (max-width:720px){
  .nav-burger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:11px 9px; cursor:pointer; border:1px solid oklch(80% 0.09 86 / 0.35);
    border-radius:var(--radius); background:transparent; }
  .nav-burger span { display:block; height:1.5px; width:100%; background:var(--champagne);
    transition:transform 260ms ease, opacity 200ms ease; transform-origin:center; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav-links { position:absolute; left:0; right:0; top:64px; flex-direction:column; align-items:stretch;
    gap:0; background:oklch(20% 0.035 274 / 0.98); border-top:1px solid oklch(80% 0.09 86 / 0.22);
    padding:var(--sp-3) var(--sp-6) var(--sp-6);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height 320ms cubic-bezier(0.22,1,0.36,1), opacity 240ms ease, visibility 0s linear 320ms; }
  .nav-toggle:checked ~ .nav-links { max-height:70vh; opacity:1; visibility:visible; transition-delay:0s; }
  .nav-links a.lnk { padding:var(--sp-4) 0; border-top:1px solid oklch(95.5% 0.012 88 / 0.1); }
  .nav-links .btn-ghost { margin-top:var(--sp-4); justify-content:center; }
}

/* ---- Masthead hero (homepage) ---- */
.masthead { overflow:visible; }
.hero { padding:clamp(3rem,2rem + 6vw,5.5rem) 0 clamp(3.5rem,2.5rem + 7vw,6rem); }
.hero-grid { display:grid; grid-template-columns:1.06fr 0.94fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center; }
.hero-mark { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.hero-mark .pearl { width:1.7rem; height:1.7rem; filter:drop-shadow(0 0 14px oklch(80% 0.09 86 / 0.45)); }
.hero-mark .tag { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.28em;
  text-transform:uppercase; color:var(--champagne); }
.hero h1 { font-family:var(--font-display); font-weight:700; font-size:var(--text-hero);
  line-height:1.02; letter-spacing:-0.025em; color:var(--on-ink); text-wrap:balance; margin-bottom:var(--sp-6); }
.hero h1 em { font-style:italic; font-weight:400; color:var(--champagne);
  text-shadow:0 0 30px oklch(80% 0.09 86 / 0.25); }
.hero .lead { font-size:var(--text-md); font-weight:300; line-height:1.7; color:var(--on-ink-soft);
  max-width:33rem; }
.hero-cta { margin-top:var(--sp-8); }
.sms-cta { margin:0 0 var(--sp-4); }
.hero .sms-cta .btn-gold { box-shadow:0 10px 30px oklch(0% 0 0 / 0.3); }
.hero .micro { margin-top:var(--sp-5); font-family:var(--font-accent); font-style:italic;
  font-size:var(--text-sm); color:var(--on-ink-mute); }

/* ---- Compact page masthead (interior pages, on ink) ---- */
.page-head { padding:clamp(2.8rem,2rem + 5vw,5rem) 0 clamp(2.2rem,1.6rem + 3vw,3.5rem); text-align:center; }
.page-head .eyebrow { color:var(--champagne); }
.page-head h1 { font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl);
  line-height:1.1; letter-spacing:-0.01em; margin:var(--sp-4) auto 0; max-width:18ch; color:var(--on-ink);
  text-wrap:balance; }
.page-head h1 em { font-style:italic; font-weight:400; color:var(--champagne); }
.page-head .sub { font-family:var(--font-accent); font-style:italic; font-size:var(--text-md);
  color:var(--on-ink-soft); margin-top:var(--sp-4); }
/* Legacy: page-head on a light band */
.band-light .page-head .eyebrow { color:var(--meta); }
.band-light .page-head h1 { color:var(--ink); }
.band-light .page-head h1 em { color:var(--gold-deep); }
.band-light .page-head .sub { color:var(--muted); }

/* ---- Email capture (text-first CTA: sms leads, email demotes) ---- */
.capture { display:flex; gap:var(--sp-3); max-width:30rem; flex-wrap:wrap; }
.capture input { flex:1 1 14rem; min-width:0; font-family:var(--font-body); font-size:var(--text-base);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--warm-white); color:var(--ink); }
.capture input::placeholder { color:var(--muted); }
.capture input:focus { outline:2px solid var(--champagne); outline-offset:1px; }
.capture .btn { flex:0 0 auto; }
.capture.on-dark input { background:oklch(96% 0.01 88 / 0.97); border-color:oklch(80% 0.09 86 / 0.3); }
.capture.on-dark .btn-ghost { color:var(--champagne); border-color:oklch(80% 0.09 86 / 0.5); }
.capture.on-dark .btn-ghost:hover { background:var(--champagne); color:var(--ink); }
.band-light .capture.on-dark input { background:var(--pearl-card); border-color:var(--rule); color:var(--ink); }
.band-light .capture.on-dark .btn-ghost { color:var(--gold-deep); border-color:var(--gold-deep); }
.band-light .capture.on-dark .btn-ghost:hover { background:var(--gold-deep); color:var(--pearl); }
.band-light .btn-gold { background:var(--ink); color:var(--pearl); }
.band-light .btn-gold:hover { background:var(--ink-deep); color:var(--pearl); }
.form-done { font-family:var(--font-accent); font-style:italic; font-size:var(--text-md); max-width:30rem; }
.form-done.on-dark { color:var(--champagne); }

/* ---- Phone vignette (lit against ink) ---- */
.phone-stage { display:flex; justify-content:center; }
.phone { position:relative; z-index:3; width:100%; max-width:22.5rem; background:var(--pearl-card);
  border-radius:14px; padding:var(--sp-5) var(--sp-4) var(--sp-6);
  box-shadow:0 46px 90px oklch(0% 0 0 / 0.55), 0 6px 18px oklch(0% 0 0 / 0.35),
    0 0 0 1px oklch(80% 0.09 86 / 0.16), inset 0 1px 0 oklch(100% 0 0 / 0.7); }
.phone::before { content:''; position:absolute; top:0.55rem; left:50%; transform:translateX(-50%);
  width:2.6rem; height:0.28rem; border-radius:99px; background:var(--rule); opacity:0.7; }
.phone-head { display:flex; align-items:center; gap:var(--sp-3); padding:0.55rem 0 var(--sp-4);
  margin-bottom:var(--sp-3); border-bottom:1px solid var(--rule); }
.phone-head .pearl { width:2.1rem; height:2.1rem; }
.phone-head .nm { font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:var(--ink); line-height:1.1; }
.phone-head .sub { font-family:var(--font-accent); font-style:italic; font-size:var(--text-sm); color:var(--meta); }
.stamp { text-align:center; font-family:var(--font-body); font-size:0.62rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--meta); margin:var(--sp-1) 0 var(--sp-4); }
.stamp b { color:var(--ink); font-weight:600; }
.thread { display:flex; flex-direction:column; gap:var(--sp-3); width:100%; }
.msg { display:flex; width:100%; align-items:flex-end; gap:var(--sp-2); }
.msg p { font-size:var(--text-sm); line-height:1.5; padding:var(--sp-3) var(--sp-4); max-width:80%;
  min-width:0; border-radius:15px; }
.msg.guest { justify-content:flex-end; }
.msg.guest p { background:var(--cream); color:var(--ink); border:1px solid var(--rule);
  border-bottom-right-radius:5px; }
.msg.reply { justify-content:flex-start; }
.msg.reply p { background:var(--ink-deep); color:var(--on-ink); border-bottom-left-radius:5px; }
.msg.reply p em { color:var(--champagne); font-style:normal; }
.msg.you { justify-content:flex-end; }
.msg.you p { background:var(--champagne-pale); color:var(--ink); border:1px solid oklch(80% 0.06 84);
  border-bottom-right-radius:5px; }
.msg .lbl { display:block; font-family:var(--font-body); font-size:0.6rem; letter-spacing:0.18em;
  text-transform:uppercase; margin-bottom:0.25rem; opacity:0.7; }
.typing p { display:inline-flex; align-items:center; gap:5px; padding:0.7rem var(--sp-4); }
.typing i { width:6px; height:6px; border-radius:50%; background:oklch(95.5% 0.012 88 / 0.6);
  animation:blink 1.4s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:0.18s; }
.typing i:nth-child(3){ animation-delay:0.36s; }
@keyframes blink { 0%,75%,100%{ opacity:0.28; transform:translateY(0);} 38%{ opacity:1; transform:translateY(-2.5px);} }
@media (min-width:901px){ .masthead .phone { transform:translateY(3.2rem); } }
@media (max-width:900px){
  .hero-grid { grid-template-columns:1fr; gap:var(--sp-12); }
  .phone { max-width:21rem; }
}

/* ---- Sections + header grammars (varied; ≤1 eyebrow per page) ---- */
.sec { padding:clamp(3.5rem,2.5rem + 5vw,6.5rem) 0; }
.sec.alt, .problem, .loop { background:var(--cream); }
h2 { font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); line-height:1.08;
  letter-spacing:-0.015em; text-wrap:balance; }
h2 em { font-style:italic; font-weight:400; color:var(--gold-deep); }
.sec-lead { font-size:var(--text-md); font-weight:300; line-height:1.72; color:var(--ink);
  max-width:38rem; margin-top:var(--sp-4); }

/* legacy ruled section head (use sparingly, with or without eyebrow) */
.sec-head { display:flex; align-items:baseline; gap:var(--sp-4); border-top:1px solid var(--rule);
  padding-top:var(--sp-5); margin-bottom:var(--sp-8); }
.sec-head .eyebrow { white-space:nowrap; }
.sec-head h2 { overflow-wrap:break-word; }
@media (max-width:640px){ .sec-head { flex-direction:column; gap:var(--sp-3); } }

/* folio: thin double-rule + small caps, centered */
.folio { display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.folio::before, .folio::after { content:''; height:3px; width:clamp(2rem,10vw,5rem);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.folio span { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.34em;
  text-transform:uppercase; color:var(--meta); }

/* ornamental pearl divider */
.divider-pearl { display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.divider-pearl::before, .divider-pearl::after { content:''; height:1px; width:clamp(2.5rem,14vw,7rem); background:var(--rule); }
.divider-pearl .pearl { width:1.4rem; height:1.4rem; }

/* the single permitted eyebrow kicker */
.kicker { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.3em;
  text-transform:uppercase; color:var(--meta); display:block; }

.head-center { text-align:center; max-width:34rem; margin:0 auto; }
.head-center h2 { margin-bottom:var(--sp-4); }
.head-center .sec-lead { margin-inline:auto; max-width:40rem; }

/* ---- Pull-quote ---- */
.pull { display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3.5vw,2.75rem); align-items:start;
  max-width:820px; margin:0 auto; }
.pull .mark { font-family:var(--font-display); font-style:italic; font-size:clamp(4.5rem,11vw,8rem);
  line-height:0.66; color:var(--gold-deep); }
.pull blockquote { font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:var(--text-xl); line-height:1.36; color:var(--ink); text-wrap:balance; }
.pull blockquote strong { font-weight:600; font-style:normal; }
.pull cite { display:block; margin-top:var(--sp-5); font-family:var(--font-accent); font-style:italic;
  font-size:var(--text-md); color:var(--meta); }
.pull cite::before { content:'— '; }
@media (max-width:560px){ .pull { grid-template-columns:1fr; gap:0; } .pull .mark { font-size:4rem; } }

/* ---- Steps (numbered sequence — roman numerals) ---- */
.steps { max-width:820px; margin:var(--sp-12) auto 0; }
.step { display:grid; grid-template-columns:4.5rem 1fr; gap:clamp(1rem,3vw,2rem); padding:var(--sp-8) 0;
  border-top:1px solid var(--rule); align-items:start; }
.step:first-of-type { border-top:2px solid var(--ink); }
.step .no { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:2.9rem;
  line-height:0.9; color:var(--gold-deep); }
.step h2, .step h3 { font-family:var(--font-display); font-weight:600; font-size:var(--text-lg);
  margin-bottom:var(--sp-2); letter-spacing:-0.01em; }
.step h3 em, .step h2 em { color:var(--gold-deep); }
.step p { color:var(--ink); font-weight:300; max-width:38rem; }
.step .hint { display:block; margin-top:var(--sp-2); font-family:var(--font-accent); font-style:italic;
  color:var(--meta); font-size:var(--text-sm); }
@media (max-width:520px){ .step { grid-template-columns:1fr; gap:var(--sp-2); } .step .no { font-size:2.2rem; } }

/* ---- The loop (italic lede grammar + drawn diagram) ---- */
.loop-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:860px){ .loop-grid { grid-template-columns:1fr; gap:var(--sp-10); } }
.loop .thread, .loop-grid .thread { max-width:26rem; }
.loop-lede { font-family:var(--font-display); font-weight:400; font-style:italic; font-size:var(--text-2xl);
  line-height:1.1; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; margin-bottom:var(--sp-5); }
.loop-lede b { font-style:normal; font-weight:700; color:var(--gold-deep); }
.loop-lede::before { content:''; display:block; width:2.5rem; height:2px; background:var(--gold-deep); margin-bottom:var(--sp-5); }
.loop-lead { font-size:var(--text-md); font-weight:300; line-height:1.72; color:var(--ink); max-width:34rem; }
.loop-lead em { color:var(--gold-deep); font-style:italic; }
.step-note { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--meta); margin:var(--sp-2) 0 0 var(--sp-2); }
.loop-stat { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--rule);
  font-family:var(--font-accent); font-style:italic; font-size:var(--text-md); color:var(--ink); }
.loop-stat b { font-family:var(--font-display); font-style:normal; font-weight:700; color:var(--gold-deep); }
.loop-figure { display:flex; flex-direction:column; align-items:center; }
.loop-svg { width:100%; max-width:26rem; height:auto; display:block; }
.loop-svg .arc { fill:none; stroke:var(--gold-deep); stroke-width:1.6; }
.loop-svg .node { fill:var(--ink-deep); stroke:var(--champagne); stroke-width:1.5; }
.loop-svg .lab { font-family:var(--font-accent); font-style:italic; font-size:13px; fill:var(--ink); }
.loop-svg .lab .n { font-family:var(--font-body); font-style:normal; font-weight:600; font-size:10px;
  letter-spacing:0.14em; fill:var(--gold-deep); }
.loop-cap { margin-top:var(--sp-5); font-family:var(--font-accent); font-style:italic; font-size:var(--text-sm);
  color:var(--meta); text-align:center; max-width:24rem; }

/* ---- Guest-view peeks ---- */
.peeks { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-12); }
@media (max-width:820px){ .peeks { grid-template-columns:1fr; max-width:24rem; margin-inline:auto; } }
.peek { background:var(--pearl-card); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 2px oklch(21% 0.035 274 / 0.04); }
.peek-mast { position:relative; background:var(--ink-deep); color:var(--on-ink);
  padding:var(--sp-4) var(--sp-4) var(--sp-3); overflow:hidden; }
.peek-mast::before { content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg,transparent,transparent 20px,
    oklch(100% 0 0 / 0.028) 20px, oklch(100% 0 0 / 0.028) 21px); }
.peek-mast > * { position:relative; }
.peek-mast .e { font-size:0.56rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--champagne); }
.peek-mast .t { font-family:var(--font-display); font-weight:600; font-size:var(--text-md); margin-top:3px;
  padding-bottom:var(--sp-3); border-bottom:1px solid oklch(80% 0.09 86 / 0.28); }
.peek-mast .t em { color:var(--champagne); font-style:italic; font-weight:400; }
.peek-body { padding:var(--sp-4); flex:1; }
.peek-row { display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--rule); font-size:var(--text-sm); }
.peek-row:first-child { border-top:none; padding-top:0; }
.peek-row .tm { font-family:var(--font-body); font-weight:600; color:var(--gold-deep); white-space:nowrap;
  font-size:var(--text-xs); padding-top:0.12rem; letter-spacing:0.02em; }
.peek-row .ev { color:var(--ink); }
.peek-row .ev small { display:block; color:var(--meta); font-family:var(--font-accent); font-style:italic; font-size:0.82rem; }
.peek .cap { padding:var(--sp-3) var(--sp-4) var(--sp-5); font-family:var(--font-accent); font-style:italic;
  font-size:var(--text-sm); color:var(--meta); border-top:1px solid var(--rule); margin-top:auto; }
.peek-map { width:100%; aspect-ratio:5/3.1; display:block; }
.peek-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.peek-photos span { position:relative; aspect-ratio:1; display:block; border-radius:1px; overflow:hidden; }
.peek-photos .capd { grid-column:span 2; aspect-ratio:2/1; }
.peek-photos .capd small { position:absolute; left:0; right:0; bottom:0; padding:0.35rem 0.5rem 0.4rem;
  font-family:var(--font-accent); font-style:italic; font-size:0.72rem; color:var(--on-ink);
  background:linear-gradient(0deg, oklch(21% 0.035 274 / 0.78), oklch(21% 0.035 274 / 0)); }

/* ---- Pricing: fine ledger (homepage) ---- */
.price-grid { display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; margin-top:var(--sp-10); }
@media (max-width:720px){ .price-grid { grid-template-columns:1fr; gap:var(--sp-8); } }
.price-tag { border-top:2px solid var(--ink); padding-top:var(--sp-5); }
.price-tag .amt { font-family:var(--font-display); font-weight:700; font-size:clamp(3.6rem,3rem + 6vw,5.5rem);
  line-height:0.86; color:var(--ink); letter-spacing:-0.02em; }
.price-tag .amt sup { font-size:0.38em; vertical-align:0.9em; font-weight:600; color:var(--gold-deep); margin-right:0.05em; }
.price-tag .per { font-family:var(--font-accent); font-style:italic; font-size:var(--text-md); color:var(--meta); margin-top:var(--sp-3); }
.price-tag .note { font-size:var(--text-sm); color:var(--meta); margin-top:var(--sp-4); max-width:17rem; font-weight:300; }
.ledger { list-style:none; }
.ledger-intro { font-size:var(--text-md); font-weight:300; line-height:1.7; color:var(--ink); max-width:34rem; margin-bottom:var(--sp-6); }
.ledger li { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-top:1px solid var(--rule); }
.ledger li .lt { display:flex; flex-direction:column; }
.ledger .tname { font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:var(--ink); }
.ledger .guests { font-family:var(--font-accent); font-style:italic; font-size:var(--text-sm); color:var(--meta); }
.ledger .fee { font-family:var(--font-display); font-weight:700; font-size:var(--text-xl); color:var(--ink); letter-spacing:-0.01em; }
.ledger .fee sup { font-size:0.5em; vertical-align:0.7em; color:var(--gold-deep); }
.ledger-foot { margin-top:var(--sp-4); font-family:var(--font-accent); font-style:italic; font-size:var(--text-sm); color:var(--meta); }
.free-strip { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; text-align:center;
  margin-top:var(--sp-10); padding:var(--sp-5) var(--sp-6); background:var(--champagne-pale);
  border:1px solid var(--gold-deep); border-radius:var(--radius); }
.free-strip .pearl { width:1.2rem; height:1.2rem; }
.free-strip b { font-family:var(--font-display); font-weight:600; color:var(--ink); }
.free-strip span { font-family:var(--font-accent); font-style:italic; color:var(--meta); font-size:var(--text-sm); }

/* ---- Closing band ---- */
.closing { padding:clamp(3.5rem,2.5rem + 6vw,6.5rem) 0; text-align:center; }
.closing .pearl { width:2.8rem; height:2.8rem; margin:0 auto var(--sp-6); display:block;
  filter:drop-shadow(0 0 20px oklch(80% 0.09 86 / 0.4)); }
.closing h2 { color:var(--on-ink); font-size:var(--text-2xl); max-width:20ch; margin:0 auto; }
.closing h2 em { color:var(--champagne); font-style:italic; font-weight:400; }
.closing .sms-cta { margin-top:var(--sp-8); }
.closing .capture { margin:var(--sp-4) auto 0; justify-content:center; }
.orn { display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-10);
  font-family:var(--font-accent); font-style:italic; color:var(--champagne); font-size:var(--text-sm); }
.orn::before, .orn::after { content:''; height:1px; width:clamp(2rem,8vw,5rem); background:oklch(80% 0.09 86 / 0.4); }

/* ---- Footer ---- */
.footer { padding:var(--sp-16) 0 var(--sp-16); }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-8);
  align-items:flex-start; border-top:1px solid var(--rule); padding-top:var(--sp-8); }
.footer .wordmark { font-size:1.3rem; color:var(--ink); }
.footer .by { font-family:var(--font-accent); font-style:italic; color:var(--meta); font-size:var(--text-sm);
  margin-top:var(--sp-2); max-width:22rem; }
.foot-links { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-5); max-width:34rem; }
.foot-links a { font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--meta); transition:color 200ms ease; }
.foot-links a:hover { color:var(--ink); }
.fineprint { margin-top:var(--sp-8); font-size:var(--text-xs); color:var(--meta); line-height:1.75; max-width:52rem; }

/* ---- Dark feature section (mid-page ink bands on interior pages) ---- */
.sec.band { color:var(--on-ink); }
.sec.band .sec-head { border-top-color:oklch(95.5% 0.012 88 / 0.18); }
.sec.band .eyebrow { color:var(--champagne); }
.sec.band h2 { color:var(--on-ink); }
.sec.band h2 em { color:var(--champagne); }
.sec.band .sec-lead { color:var(--on-ink-soft); }
.sec.band .step { border-top-color:oklch(95.5% 0.012 88 / 0.16); }
.sec.band .step:first-of-type { border-top-color:var(--champagne); }
.sec.band .step .no { color:var(--champagne); }
.sec.band .step h2, .sec.band .step h3 { color:var(--on-ink); }
.sec.band .step h2 em, .sec.band .step h3 em { color:var(--champagne); }
.sec.band .step p { color:oklch(95.5% 0.012 88 / 0.86); }
.sec.band .step .hint { color:var(--champagne); }
.sec.band .loop-stat { border-top-color:oklch(95.5% 0.012 88 / 0.16); color:oklch(95.5% 0.012 88 / 0.9); }
.sec.band .loop-stat b { color:var(--champagne); }
.sec.band .step-note { color:var(--champagne); }
.sec.band .msg.reply p { background:oklch(28% 0.04 274); border:1px solid oklch(80% 0.09 86 / 0.28); }
.sec.band .btn-primary { background:var(--champagne); color:var(--ink); }
.sec.band .btn-primary:hover { background:var(--gold-deep); color:var(--on-ink); }
.sec.band .folio span, .sec.band .kicker { color:var(--champagne); }
.sec.band .folio::before, .sec.band .folio::after,
.sec.band .divider-pearl::before, .sec.band .divider-pearl::after { border-color:oklch(95.5% 0.012 88 / 0.2);
  background-color:oklch(95.5% 0.012 88 / 0.2); }

/* ---- Comparison ledger (the four ways people answer guests) ---- */
.compare { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-top:var(--sp-10); align-items:stretch; }
@media (max-width:900px){ .compare { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .compare { grid-template-columns:1fr; } }
.appr { background:var(--warm-white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-5); display:flex; flex-direction:column; }
.appr-h h3 { font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--ink); line-height:1.15; }
.appr-h p { font-family:var(--font-accent); font-style:italic; color:var(--meta); font-size:var(--text-sm); margin-top:2px; }
.appr ul { list-style:none; margin-top:var(--sp-4); }
.appr li { display:grid; grid-template-columns:1.1rem 1fr; gap:var(--sp-3); align-items:start;
  padding:var(--sp-3) 0; border-top:1px solid var(--rule); font-size:var(--text-sm); }
.appr li::before { font-family:var(--font-body); font-weight:600; line-height:1.5; }
.appr li.y::before { content:'✓'; color:var(--gold-deep); }
.appr li.p::before { content:'~'; color:var(--slate); }
.appr li.n::before { content:'✕'; color:oklch(62% 0.02 280); }
.appr li.n { color:var(--meta); }
.appr.win { background:var(--ink-deep); border-color:var(--gold-deep); }
.appr.win .appr-h h3 { color:var(--on-ink); }
.appr.win .appr-h h3 em { color:var(--champagne); font-style:italic; font-weight:400; }
.appr.win .appr-h p { color:var(--champagne); }
.appr.win li { border-top-color:oklch(95.5% 0.012 88 / 0.16); color:var(--on-ink); }
.appr.win li.y::before { color:var(--champagne); }
.compare.duo { grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }
@media (max-width:540px){ .compare.duo { grid-template-columns:1fr; } }
.appr .price-line { font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:var(--ink);
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--rule); }
.appr.win .price-line { color:var(--champagne); border-top-color:oklch(80% 0.09 86 / 0.28); }

/* ---- Founding offer strip ---- */
.founding { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); flex-wrap:wrap;
  text-align:center; padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-8);
  background:var(--ink-deep); border:1px solid var(--gold-deep); border-radius:var(--radius); }
.founding .pearl { width:1.1rem; height:1.1rem; }
.founding b { font-family:var(--font-display); font-weight:600; color:var(--champagne); }
.founding span { color:oklch(95.5% 0.012 88 / 0.85); font-family:var(--font-accent); font-style:italic; font-size:var(--text-sm); }

/* ---- Pricing tiers (pricing page) ---- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:stretch; }
@media (max-width:820px){ .tiers { grid-template-columns:1fr; max-width:30rem; margin-inline:auto; } }
.tier { background:var(--warm-white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; position:relative; }
.tier.feat { background:var(--ink-deep); border-color:var(--gold-deep); }
.tier .range { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.2em; text-transform:uppercase; color:var(--meta); }
.tier.feat .range { color:var(--champagne); }
.tier .tname { font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--ink); margin-top:2px; }
.tier.feat .tname { color:var(--on-ink); }
.tier .amt { font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,2rem + 3vw,3.4rem); line-height:1; color:var(--ink); margin-top:var(--sp-4); }
.tier.feat .amt { color:var(--on-ink); }
.tier .amt sup { font-size:0.5em; vertical-align:super; font-weight:600; color:var(--gold-deep); }
.tier.feat .amt sup { color:var(--champagne); }
.tier .per { font-family:var(--font-accent); font-style:italic; color:var(--meta); font-size:var(--text-sm); margin-top:var(--sp-1); }
.tier.feat .per { color:oklch(95.5% 0.012 88 / 0.7); }
.tier .badge { position:absolute; top:-0.7rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--champagne); color:var(--ink); font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:0.16em; text-transform:uppercase; padding:0.2rem 0.7rem; border-radius:var(--radius); }
.tier .tcta { margin-top:auto; padding-top:var(--sp-6); }
.tier .tcta .btn { width:100%; justify-content:center; }
.tier.feat .btn-primary { background:var(--champagne); color:var(--ink); }
.tier.feat .btn-primary:hover { background:var(--gold-deep); color:var(--on-ink); }
.tier-note { text-align:center; margin-top:var(--sp-6); color:var(--meta); font-size:var(--text-sm); }
.tier-note b { color:var(--ink); font-weight:600; }
/* Estate tier — the custom-quote card below the priced tiers. */
.estate { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-5);
  margin-top:var(--sp-6); padding:var(--sp-6) var(--sp-8); border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--warm-white); }
.estate .range { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:0.2em; text-transform:uppercase; color:var(--meta); }
.estate .tname { font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--ink); margin-top:2px; }
.estate .tname em { color:var(--gold-deep); font-style:italic; font-weight:400; }
.estate p { color:var(--meta); font-size:var(--text-sm); margin-top:var(--sp-2); max-width:32rem; }
.estate .btn { white-space:nowrap; }

/* ---- What's included (pricing page) ---- */
.incl li { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:baseline;
  padding:var(--sp-3) 0; border-top:1px solid var(--rule); list-style:none; }
.incl li:first-child { border-top:none; }
.incl .pearl { width:0.7rem; height:0.7rem; }
.incl b { font-weight:600; }
.incl small { color:var(--meta); font-family:var(--font-accent); font-style:italic; }
.incl-cta { margin-top:var(--sp-8); }

/* ---- FAQ ---- */
.faq dt { font-family:var(--font-display); font-weight:600; font-size:var(--text-md); color:var(--ink);
  padding-top:var(--sp-6); border-top:1px solid var(--rule); margin-top:var(--sp-6); }
.faq dt:first-of-type { border-top:none; margin-top:0; padding-top:0; }
.faq dd { color:var(--ink); margin-top:var(--sp-2); max-width:42rem; }

/* ---- Competitor field table ---- */
.field-scroll { overflow-x:auto; margin-top:var(--sp-8); -webkit-overflow-scrolling:touch; }
.field { width:100%; border-collapse:collapse; min-width:34rem; font-size:var(--text-sm); }
.field th, .field td { text-align:left; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--rule); vertical-align:top; }
.field thead th { border-top:none; border-bottom:2px solid var(--ink); font-family:var(--font-body); font-weight:600;
  font-size:var(--text-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--meta); white-space:nowrap; }
.field tbody th { font-family:var(--font-display); font-weight:600; font-size:var(--text-base); color:var(--ink); white-space:nowrap; }
.field .sub { display:block; font-family:var(--font-accent); font-style:italic; font-weight:400; color:var(--meta); font-size:var(--text-xs); }
.field td .y { color:var(--gold-deep); font-weight:600; }
.field td .n { color:var(--meta); }
.field tr.us th, .field tr.us td { background:oklch(80% 0.09 86 / 0.12); }
.field tr.us th { color:var(--ink); }
.field tr.us th em { color:var(--gold-deep); font-style:italic; font-weight:400; }

/* ---- Reveal / motion (progressive enhancement; content visible by default) ---- */
.js .reveal { opacity:0; transform:translateY(20px); }
.reveal.in { opacity:1; transform:none;
  transition:opacity 760ms cubic-bezier(0.16,1,0.3,1), transform 760ms cubic-bezier(0.16,1,0.3,1); }
.reveal.d1 { transition-delay:80ms; } .reveal.d2 { transition-delay:160ms; } .reveal.d3 { transition-delay:240ms; }
@media print {
  .js .reveal { opacity:1 !important; transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .js .reveal { opacity:1; transform:none; }
  .typing i { animation:none; opacity:0.6; }
  html { scroll-behavior:auto; }
  .btn .arr { transition:none; }
}
