/* ============================================================
   Shared across the three services variants (2026-08-23)

   All three variants carry the same copy, the same pricing wall
   and the same closing. What differs between them is the one
   thing each does that nobody else's site does. Everything in
   this file is the part that must NOT differ, so a comparison is
   about the idea rather than about which one got better words.

   Loaded after assets/styles.css so the brand tokens resolve.
   ============================================================ */

:root{
  --paper:#FBF7F0;
  --ink:#231C11;
  --ink-soft:#4A3D28;
  --ink-mute:#6B7280;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the noise every real surface on this site carries. One value, so
     the desk, the notes and the walls all share a grain. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.13'/></svg>");
}

/* ---- the preview banner. Removed when a variant is promoted. ---- */
.variant-flag{
  background:#241D12;color:#F3E7CE;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 16px}
.variant-flag b{color:#fff}
.variant-flag a{color:var(--amber);border-bottom:1px solid rgba(245,166,35,.5)}

/* ============================================================
   THE PRICING WALL
   One number on the whole site. It is written large enough to be
   read from across a room, because the entire strategic point is
   that the nearest competitor hides theirs.
   ============================================================ */
.pricewall{ padding:74px 0 78px; background:var(--white); position:relative }
.pricewall .wrap{ max-width:1000px }
.pricewall .eyebrow{ color:var(--orange-text); letter-spacing:.24em; margin:0 0 14px }
.pricewall h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,36px);
  line-height:1.14;margin:0 0 10px;max-width:20ch;text-wrap:balance}
.pricewall .lede{ font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 34px;max-width:60ch }

.pricegrid{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start }

/* the number, set on a card that reads like a price card on a wall */
.pricecard{
  position:relative;padding:34px 32px 32px;border-radius:3px;color:var(--ink);
  background-image:var(--grain),linear-gradient(158deg,#FDF6E6 0%,#F6EBD3 46%,#EADBBB 80%,#DDCCA6 100%);
  background-size:140px 140px,auto;
  box-shadow:
    0 1px 0 rgba(255,246,224,.7) inset, 0 -2px 6px rgba(60,42,20,.14) inset,
    0 18px 30px -14px rgba(40,30,12,.46), 0 5px 10px -4px rgba(40,30,12,.3)}
.pricecard .lane{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#7A6743;margin:0 0 12px}
.pricecard .fig{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(48px,7.4vw,72px);letter-spacing:-.02em;margin:0;color:var(--ink)}
.pricecard .fig sup{ font-size:.42em;vertical-align:.85em;margin-right:2px;font-weight:700 }
.pricecard .under{ font-size:14.5px;color:var(--ink-soft);margin:10px 0 0;line-height:1.6 }
.pricecard hr{ border:none;border-top:1px solid rgba(90,70,38,.24);margin:22px 0 18px }
.pricecard ul{ margin:0;padding:0;list-style:none;display:grid;gap:11px }
.pricecard li{ font-size:14.5px;line-height:1.6;color:var(--ink-soft);padding-left:22px;position:relative }
.pricecard li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:var(--orange);box-shadow:0 1px 2px rgba(40,30,12,.4)}
.pricecard .fine{ font-size:13px;color:#7A6743;margin:20px 0 0;line-height:1.6 }

/* what the money actually buys, in plain sentences beside the number */
.priceside h3{
  font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 10px;color:var(--text)}
.priceside p{ font-size:15.5px;line-height:1.68;color:var(--ink-soft);margin:0 0 20px;max-width:52ch }
.priceside .row{
  display:flex;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--border)}
.priceside .row:last-of-type{ border-bottom:1px solid var(--border) }
.priceside .row b{ font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--orange-text);
  text-transform:uppercase;min-width:104px;flex:0 0 auto}
.priceside .row span{ font-size:14.5px;line-height:1.6;color:var(--ink-soft) }
.priceside .after{ font-size:14px;color:var(--ink-mute);margin:20px 0 0;line-height:1.65 }

@media (max-width:860px){
  .pricegrid{ grid-template-columns:1fr;gap:28px }
}

/* ============================================================
   TESTIMONIALS. Placeholders until Nina has real ones.
   Every one is marked in the RENDERED page, not just in a code
   comment, and scripts/check-placeholder-testimonials.sh fails a
   production build if one survives. See that script for why.
   ============================================================ */
.voices{ padding:70px 0 74px;background:var(--soft);border-top:1px solid var(--border) }
.voices .eyebrow{ color:var(--teal-text);letter-spacing:.24em;margin:0 0 12px }
.voices h2{ font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,32px);margin:0 0 8px }
.voices .note{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#8A5A05;background:#FBE3B7;
  border:1px solid #E5C377;border-radius:3px;padding:6px 11px;margin:0 0 28px}
.quotes{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px }
.quote{
  position:relative;padding:26px 24px 24px;border-radius:3px;background:var(--white);
  border:1px solid var(--border);box-shadow:0 10px 22px -14px rgba(20,26,40,.4)}
.quote::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--teal)}
.quote.b::before{ background:var(--orange) }
.quote.c::before{ background:var(--green) }
.quote p{ font-size:15px;line-height:1.68;color:var(--ink-soft);margin:0 0 16px }
.quote .who{ font-size:13px;color:var(--ink-mute);line-height:1.5 }
.quote .who b{ color:var(--text);display:block;font-size:13.5px }
.quote .ph{
  position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8A5A05;background:#FBE3B7;border:1px solid #E5C377;
  border-radius:2px;padding:3px 6px}
@media (max-width:860px){ .quotes{ grid-template-columns:1fr } }

/* ---- the close. Same on all three. ---- */
.svc-close{ padding:72px 0 78px;background:var(--dark);color:#fff;text-align:center }
.svc-close h2{ font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.4vw,34px);margin:0 0 12px }
.svc-close p{ color:#B9C3D6;font-size:16px;line-height:1.65;margin:0 auto 26px;max-width:48ch }
.svc-close .hold{ display:block;color:#8592AA;font-size:13px;margin:16px 0 0 }