/* Pretty Citable v2 — built from the Pretty Citable design system (tokens.json v1)
   Layout idea: editorial serif headlines on a calm white canvas, one ink band per page, one focal accent per section. */
:root{
  --surface:#FFFFFF;
  --cloud:#EBEDEF;
  --cloud-soft:#F5F6F7;
  --ink:#130E0C;
  --ink-soft:#57514E;
  --ink-faint:#6B6663;
  --signal-pink:#FE63B9;
  --teal-proof:#79D3D3;
  --signal-yellow:#F7E062;
  --orchid:#AB5FA9;
  --accessible-pink:#9D165B;
  --deep-teal:#005C63;
  --pink-wash:#FFF0F8;
  --teal-wash:#E9F7F7;
  --hairline:#E3E4E8;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Lato", "Helvetica Neue", Arial, sans-serif;
  --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --section:120px;
  --shadow:0 1px 2px rgba(19,14,12,.06), 0 24px 48px -24px rgba(19,14,12,.22);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accessible-pink);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accessible-pink);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.04}
h2{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08}
h3{font-size:1.35rem;line-height:1.25}
em{font-style:italic}
p{margin:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:30}
.skip:focus{left:12px}
@media (max-width:720px){:root{--section:76px} body{font-size:17px}}

/* signature marks (used once per section at most) */
.scribble{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 60 4, 120 16, 180 8 S 270 6, 297 10' fill='none' stroke='%23FE63B9' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 96%;background-size:100% .3em;padding-bottom:.08em}
.ast{display:inline-block;width:.62em;height:.62em;vertical-align:.12em;margin-left:.12em}
.ast rect{fill:var(--signal-pink)}

/* labels */
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-teal)}
.lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft);max-width:34em}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem;color:var(--ink-faint)}

/* nav */
.site-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.wordmark{font-family:var(--serif);font-size:1.6rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;justify-self:start}
.wordmark span{color:var(--signal-pink)}
.nav-links{display:flex;gap:34px}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:.92rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{justify-self:end}
@media (max-width:980px){.site-nav .wrap{grid-template-columns:1fr auto}.nav-links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-pill);font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);background:transparent;transition:background .15s, transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--signal-yellow);border-color:var(--signal-yellow)}
.btn-primary:hover{background:#F2D63F;border-color:#F2D63F}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:0 20px;font-size:.92rem}
.link-arrow{font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.link-arrow::after{content:"→";transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

/* hero */
.hero{padding:72px 0 var(--section)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.hero-copy{display:grid;gap:26px;align-content:center}
.checks{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:var(--ink-soft);font-weight:700}
.checks span{display:inline-flex;align-items:center;gap:8px}
.checks span::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--teal-proof) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23130E0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.portrait{position:relative;justify-self:end;width:100%;max-width:500px}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r-xl);background:var(--cloud)}
.name-tag{position:absolute;top:22px;right:22px;background:#fff;border-radius:var(--r-pill);padding:8px 14px;font-size:.82rem;font-weight:700;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px}
.name-tag svg{width:14px;height:14px}
.answer{position:absolute;left:-56px;bottom:36px;width:min(330px,82%);background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px;font-size:.86rem;line-height:1.45}
.answer .top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.answer .q{background:var(--cloud-soft);border-radius:12px;padding:10px 12px;color:var(--ink)}
.answer ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.answer li{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--hairline);border-radius:10px}
.answer li b{width:22px;height:22px;border-radius:50%;background:var(--cloud);display:grid;place-items:center;font-size:.72rem;flex:none}
.answer li.you{border:1.5px dashed var(--signal-pink);background:var(--pink-wash);justify-content:space-between}
.answer li.you span{display:flex;gap:10px;align-items:center}
.chip{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:3px 10px;font-size:.72rem;font-weight:700;color:var(--ink);background:var(--teal-proof);white-space:nowrap}
.chip.miss{background:var(--pink-wash);color:var(--accessible-pink);box-shadow:inset 0 0 0 1px var(--signal-pink)}
.chip.neutral{background:var(--cloud);color:var(--ink-soft)}
@media (max-width:960px){
  .hero{padding-top:40px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .portrait{justify-self:center;max-width:420px}
  .answer{position:relative;left:auto;bottom:auto;width:auto;margin:-72px 16px 0 32px}
}

/* sections */
.section{padding:var(--section) 0}
.tint{background:var(--cloud-soft)}
.head{display:grid;gap:18px;max-width:46rem;margin-bottom:56px}
.head.center{text-align:center;justify-items:center;margin-left:auto;margin-right:auto}

/* numbered problem row */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.trio .item{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--hairline);position:relative}
.trio .item::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:3px;background:var(--signal-pink);border-radius:2px}
.trio .num{font-family:var(--serif);font-size:1rem;color:var(--ink-faint)}
.trio p{color:var(--ink-soft)}
@media (max-width:860px){.trio{grid-template-columns:1fr;gap:32px}}

/* definition card (answer block for AI) */
.definition{margin-top:72px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding:40px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--hairline)}
.definition h2{font-size:1.65rem;line-height:1.2}
.definition p{font-size:1.15rem;color:var(--ink)}
.tint .definition{background:#fff}
@media (max-width:860px){.definition{grid-template-columns:1fr;gap:16px;padding:28px}}

/* ink band with stats */
.ink{background:var(--ink);color:#fff}
.ink h2{color:#fff}
.ink .eyebrow{color:var(--teal-proof)}
.ink .muted{color:#BDB7B3}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.16)}
.stat{padding:36px 32px 8px 0;display:grid;gap:12px;align-content:start}
.stat + .stat{padding-left:32px;border-left:1px solid rgba(255,255,255,.16)}
.stat b{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.02em}
.stat p{color:#DCD7D3}
.stat a{color:var(--signal-pink);font-size:.82rem}
@media (max-width:860px){.stats{grid-template-columns:1fr}.stat,.stat + .stat{padding:28px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.16)}}

/* included + price */
.offer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:start}
.inc{list-style:none;margin:0;padding:0;display:grid}
.inc li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid var(--hairline)}
.inc li:last-child{border-bottom:1px solid var(--hairline)}
.inc .k{font-family:var(--serif);font-size:1.5rem;color:var(--deep-teal)}
.inc h3{margin-bottom:6px}
.inc p{color:var(--ink-soft)}
.price-card{position:sticky;top:100px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);border:1px solid var(--hairline);padding:36px;display:grid;gap:22px}
.price{font-family:var(--serif);font-size:4.2rem;line-height:1;letter-spacing:-.03em}
.price small{font-family:var(--sans);font-size:1rem;color:var(--ink-soft);letter-spacing:0;margin-left:6px}
.price-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.98rem}
.price-list li{display:flex;gap:10px;align-items:baseline}
.price-list li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--signal-pink);transform:translateY(-2px)}
.price-card .after{padding-top:18px;border-top:1px solid var(--hairline);font-size:.9rem;color:var(--ink-soft)}
@media (max-width:900px){.offer{grid-template-columns:1fr;gap:48px}.price-card{position:static}}

/* example report */
.report{max-width:960px;margin:0 auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--hairline);overflow:hidden}
.report-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:22px 28px;border-bottom:1px solid var(--hairline)}
.report-head .t{font-family:var(--serif);font-size:1.3rem}
.report-body{padding:8px 28px 28px;display:grid;gap:28px}
.report table{width:100%;border-collapse:collapse;font-size:.92rem}
.report th,.report td{padding:14px 10px;border-bottom:1px solid var(--hairline);text-align:left}
.report th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.report td:first-child{color:var(--ink);font-weight:700;width:38%}
.report .scroll{overflow-x:auto}
.fixes{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:f}
.fixes li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:var(--cloud-soft);border-radius:var(--r-md);font-size:.95rem;counter-increment:f}
.fixes li::before{content:counter(f);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.report-note{text-align:center;margin-top:20px}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.timeline::before{content:"";position:absolute;top:21px;left:22px;right:22px;height:1px;background:var(--hairline)}
.tl{display:grid;gap:12px;align-content:start;position:relative}
.tl .dot{width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:.92rem}
.tl:last-child .dot{background:var(--signal-yellow);border-color:var(--signal-yellow)}
.tl .when{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-teal)}
.tl p{color:var(--ink-soft)}
@media (max-width:860px){.timeline{grid-template-columns:1fr;gap:28px}.timeline::before{top:22px;bottom:22px;left:21px;right:auto;width:1px;height:auto}.tl{grid-template-columns:44px minmax(0,1fr);column-gap:18px}.tl .dot{grid-row:span 3}}

/* proof */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.proof .card{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:36px;display:grid;gap:14px;align-content:start;background:#fff}
.proof .card p{color:var(--ink-soft)}
@media (max-width:860px){.proof{grid-template-columns:1fr}}

/* engine table */
.etable{width:100%;border-collapse:collapse;font-size:.98rem}
.etable th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;text-align:left;padding:0 18px 14px 0}
.etable td{padding:24px 18px 24px 0;border-top:1px solid var(--hairline);vertical-align:top;color:var(--ink-soft)}
.etable td:first-child{font-family:var(--serif);font-size:1.25rem;color:var(--ink);width:26%}
.etable td a{font-size:.84rem}
@media (max-width:760px){
  .etable,.etable thead,.etable tbody,.etable tr,.etable td{display:block}
  .etable thead{display:none}
  .etable tr{padding:20px 0;border-top:1px solid var(--hairline)}
  .etable td{border:0;padding:4px 0;width:auto!important}
  .etable td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
}

/* ladder */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ladder .card{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:32px;display:grid;gap:12px;align-content:start;background:#fff}
.ladder .card.lead-card{border:1.5px solid var(--ink)}
.ladder .card p{color:var(--ink-soft)}
@media (max-width:860px){.ladder{grid-template-columns:1fr}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.faq details{border-top:1px solid var(--hairline)}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--sans);font-weight:700;font-size:1.06rem;letter-spacing:0}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--cloud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23130E0C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 26px;color:var(--ink-soft);max-width:38em}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:24px}}

/* research + closing */
.research{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:48px;border-radius:var(--r-xl);background:var(--teal-wash)}
@media (max-width:860px){.research{grid-template-columns:1fr;padding:32px}}
.closing{text-align:center;display:grid;gap:26px;justify-items:center}
.closing .lead{margin:0 auto}

/* about */
.about-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.about-hero img{border-radius:var(--r-xl);aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
@media (max-width:860px){.about-hero{grid-template-columns:1fr;gap:40px}}
.prose{display:grid;gap:20px;max-width:40rem}
.prose p{color:var(--ink-soft);font-size:1.1rem}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.principles .item{display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--hairline);position:relative}
.principles .item::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:3px;background:var(--teal-proof);border-radius:2px}
.principles p{color:var(--ink-soft)}
@media (max-width:860px){.principles{grid-template-columns:1fr;gap:28px}}

/* footer */
.site-footer{background:var(--cloud-soft);padding:64px 0 40px;font-size:.92rem;color:var(--ink-soft)}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));gap:40px}
.foot p{max-width:24rem;margin-top:12px}
.foot h4,.foot .foot-h{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--ink);text-decoration:none;font-weight:700}
.foot a:hover{color:var(--accessible-pink)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* v3: persuasion sections */
.src-note{display:block;margin-top:10px;font-size:.8rem}
.outcomes{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:46rem}
.outcomes li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;font-size:1.15rem;align-items:start}
.outcomes li::before{content:"";width:28px;height:28px;border-radius:50%;margin-top:2px;background:var(--teal-proof) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23130E0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.objections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.objections .card{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:32px;display:grid;gap:14px;align-content:start;background:#fff}
.objections .card h3{font-style:italic;font-size:1.45rem}
.objections .card p{color:var(--ink-soft)}
@media (max-width:860px){.objections{grid-template-columns:1fr}}
.value-line{font-size:.92rem;color:var(--ink-soft);padding:12px 14px;border-radius:var(--r-md);background:var(--cloud-soft)}
.free{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding:56px;border-radius:var(--r-xl);background:var(--teal-wash)}
.free .steps-mini{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.free .steps-mini li{background:#fff;border-radius:var(--r-md);padding:14px 16px;font-size:.98rem;display:flex;gap:12px;align-items:center}
.free .steps-mini b{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.78rem;flex:none}
@media (max-width:860px){.free{grid-template-columns:1fr;padding:32px}}
.urgent .eyebrow{color:var(--signal-yellow)}

/* v4: qualification + price ladder */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fit .card{border-radius:var(--r-lg);padding:36px;display:grid;gap:16px;align-content:start}
.fit .card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fit .card li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;color:var(--ink)}
.fit .yes{background:var(--teal-wash)}
.fit .yes li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:3px;background:var(--teal-proof) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23130E0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.fit .early{background:var(--cloud-soft);border:1px solid var(--hairline)}
.fit .early li{color:var(--ink-soft)}
.fit .early li::before{content:"";width:12px;height:2px;background:var(--ink-faint);margin-top:13px;justify-self:center}
@media (max-width:860px){.fit{grid-template-columns:1fr}}
.ladder.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.ladder.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ladder.four{grid-template-columns:1fr}}
.tier-price{font-family:var(--serif);font-size:1.9rem;line-height:1.1;letter-spacing:-.02em}
.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}
