/* Distill Works design system, NARA member pitch (/nara).
 * Loaded alongside ds-core. Scoped to body.page-nara.
 * Hybrid: evergreen system + NARA's bespoke sales narrative.
 * Slim self-contained chrome (no public-service nav), one ink band (Exclusivity).
 */

/* ---- slim header lockup (reuses ds-core header/.brand/.call) ---- */
body.page-nara header .nav{gap:18px;}
body.page-nara .nara-tag{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; margin-left:2px; padding-left:14px; border-left:1px solid var(--hair);}
body.page-nara header .spacer{flex:1 1 auto;}
@media (max-width:620px){ body.page-nara .nara-tag{display:none;} }

/* ---- section rhythm ---- */
body.page-nara section.nara-sec{padding:78px 0; border-top:1px solid var(--hair);}
body.page-nara section.nara-sec--alt{background:var(--paper2);}
body.page-nara .nara-sec > .wrap > .eyebrow{display:block; margin-bottom:14px;}
body.page-nara .nara-sec .lab.kicker{display:block; margin-bottom:10px;}
body.page-nara .nara-sec > .wrap > h2{font-size:clamp(24px,2.9vw,34px); line-height:1.16; max-width:30ch; margin:0 0 16px;}
body.page-nara .nara-sub{font-size:16.5px; color:var(--ink-soft); max-width:64ch; margin:0 0 38px;}
body.page-nara .prose{max-width:80ch;}
body.page-nara .prose p{font-size:16px; color:var(--ink-soft); line-height:1.75; margin:0 0 18px;}
body.page-nara .prose p:last-child{margin-bottom:0;}

/* shared pull-quote */
body.page-nara .nara-pq{font-family:'Spectral',serif; font-style:italic; font-weight:500; font-size:clamp(20px,2.3vw,26px); line-height:1.4; color:var(--ink); max-width:30ch; margin:36px 0 0; padding-left:26px; border-left:2px solid var(--green);}
body.page-nara .nara-pq.center{margin:36px auto 0; text-align:center; border-left:0; padding-left:0; max-width:46ch;}
body.page-nara .nara-pq.center::before{content:"\201C"; color:var(--green); font-size:1.5em; line-height:0; vertical-align:-.18em; margin-right:.03em;}

/* shared two-column split */
body.page-nara .nara-split{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start;}

/* generic hairline card */
body.page-nara .ncard{border:1px solid var(--hair); border-radius:8px; background:var(--card); padding:30px 28px;}
body.page-nara .ncard h4{font-size:17px; margin-bottom:12px;}
body.page-nara .ncard p{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* ===== 1. HERO ===== */
body.page-nara .nara-hero{padding:50px 0 64px; border-top:0;}
body.page-nara .nara-hero h1{font-size:clamp(38px,4.6vw,54px); line-height:1.05; max-width:18ch; margin:6px 0 34px;}
body.page-nara .nara-hero .lower{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:end;}
body.page-nara .nara-hero .lede{font-size:18px; color:var(--ink-soft); margin:0; max-width:42ch;}
body.page-nara .nara-hero .right{display:flex; flex-direction:column; gap:18px; align-items:flex-start; padding-left:28px; border-left:1px solid var(--hair);}
body.page-nara .nara-hero .pres{font-size:14px; color:var(--muted);}

/* ===== 2. STAT ROW ===== */
body.page-nara .nara-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0 0 36px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
body.page-nara .nara-stats .stat{padding:26px 24px 26px 0;}
body.page-nara .nara-stats .stat + .stat{padding-left:24px; border-left:1px solid var(--hair);}
body.page-nara .nara-stats .num{display:block; font-family:'Spectral',serif; font-size:clamp(28px,3.2vw,38px); color:var(--green); line-height:1; margin-bottom:8px;}
body.page-nara .nara-stats .lbl{display:block; font-size:13px; color:var(--muted); line-height:1.4;}

/* ===== 3. SEARCH REALITY ===== */
body.page-nara .nara-insights{display:flex; flex-direction:column;}
body.page-nara .nara-insight{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--hair);}
body.page-nara .nara-insight:first-child{border-top:0; padding-top:0;}
body.page-nara .nara-insight .n{font-family:'Spectral',serif; font-size:26px; color:var(--green); line-height:1;}
body.page-nara .nara-insight h4{font-size:17px; margin-bottom:6px;}
body.page-nara .nara-insight p{font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
body.page-nara .nara-plate{border:1px solid var(--hair); border-radius:10px; background:var(--card); padding:38px 34px; text-align:center;}
body.page-nara .nara-plate .big{font-family:'Spectral',serif; font-size:clamp(48px,6vw,62px); color:var(--green); line-height:1;}
body.page-nara .nara-plate .cap{font-size:16px; color:var(--ink); font-weight:600; margin:10px 0 4px;}
body.page-nara .nara-plate .sub{font-size:13.5px; color:var(--muted);}
body.page-nara .nara-plate .rule{margin-top:26px; padding-top:26px; border-top:1px solid var(--hair);}
body.page-nara .nara-plate .big.ink{color:var(--ink); font-size:clamp(36px,4.4vw,46px);}

/* ===== 4. FOUR QUESTIONS ===== */
body.page-nara .nara-qs{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
body.page-nara .nara-q{border:1px solid var(--hair); border-radius:8px; background:var(--card); padding:28px 26px;}
body.page-nara .nara-q .n{font-family:'Spectral',serif; font-size:28px; color:var(--green); line-height:1; margin-bottom:14px;}
body.page-nara .nara-q h4{font-size:16.5px; line-height:1.35; margin-bottom:10px;}
body.page-nara .nara-q p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55;}

/* ===== 5. SEO COLUMNS ===== */
body.page-nara .nara-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
body.page-nara .nara-cols .ex-card{border:1px solid var(--hair); border-radius:8px; background:var(--card); padding:28px 26px;}
body.page-nara .nara-cols .ex-card h4{font-size:16px; color:var(--green); margin-bottom:8px;}
body.page-nara .nara-cols .ex-card .intro{font-size:13.5px; color:var(--muted); margin:0 0 14px;}
body.page-nara .nara-cols .ex-card ul{list-style:none; margin:0; padding:0;}
body.page-nara .nara-cols .ex-card li{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-soft); padding:6px 0;}
body.page-nara .ex-foot{text-align:center; max-width:70ch; margin:30px auto 0; font-size:15.5px; color:var(--ink-soft); line-height:1.6;}

/* ===== 6. PPC FIX LIST ===== */
body.page-nara .nara-fix{border:1px solid var(--hair); border-radius:8px; background:var(--card); padding:30px 28px;}
body.page-nara .nara-fix h4{font-size:16px; color:var(--green); margin-bottom:16px;}
body.page-nara .nara-fix ul{list-style:none; margin:0; padding:0;}
body.page-nara .nara-fix li{font-size:14.5px; color:var(--ink-soft); line-height:1.5; padding:11px 0 11px 26px; position:relative; border-top:1px solid var(--hair);}
body.page-nara .nara-fix li:first-child{border-top:0;}
body.page-nara .nara-fix li::before{content:"\2192"; position:absolute; left:0; top:11px; color:var(--green); font-weight:600;}

/* ===== 7. COMPARISON TABLE ===== */
body.page-nara .nara-cmp{width:100%; border-collapse:collapse; font-size:14.5px;}
body.page-nara .nara-cmp caption{font-family:'Spectral',serif; font-size:17px; color:var(--ink); text-align:left; margin-bottom:14px;}
body.page-nara .nara-cmp th{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; padding:12px 14px 12px 0; border-bottom:1px solid var(--hair); text-align:left;}
body.page-nara .nara-cmp th.col{text-align:center;}
body.page-nara .nara-cmp th.col.good{color:var(--green);}
body.page-nara .nara-cmp td{padding:12px 14px 12px 0; border-bottom:1px solid var(--hair); color:var(--ink-soft);}
body.page-nara .nara-cmp td.v{text-align:center;}
body.page-nara .nara-cmp td.v.tmpl{color:var(--muted);}
body.page-nara .nara-cmp td.v.good{color:var(--green); font-weight:600;}

/* ===== 8. WHO WE ARE ===== */
body.page-nara .nara-biz{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px;}
body.page-nara .nara-note{text-align:center; max-width:66ch; margin:30px auto 0; font-size:15.5px; color:var(--ink-soft);}

/* ===== 9. ALLF BENEFITS ===== */
body.page-nara .nara-benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
body.page-nara .nara-benefits .ncard .ic{display:block; margin-bottom:14px;}
body.page-nara .nara-benefits .ncard .ic svg{width:24px; height:24px; display:block;}
body.page-nara .nara-benefits .ncard h4{font-size:15.5px; margin-bottom:8px;}
body.page-nara .nara-benefits .ncard p{font-size:13.5px;}

/* ===== 10. EXCLUSIVITY (ink band) ===== */
body.page-nara .nara-sec--ink{background:var(--ink); border-top:1px solid var(--ink); padding:84px 0; text-align:center;}
body.page-nara .nara-sec--ink .eyebrow{color:var(--green-bright);}
body.page-nara .nara-sec--ink > .wrap > h2{color:var(--paper); max-width:26ch; margin:0 auto 18px;}
body.page-nara .nara-sec--ink p.lead{font-size:16.5px; color:#c9c8c0; line-height:1.7; max-width:60ch; margin:0 auto 16px;}
body.page-nara .nara-incl{border:1px solid rgba(247,245,239,.16); border-radius:10px; background:rgba(247,245,239,.04); padding:28px 34px; max-width:560px; margin:30px auto 0;}
body.page-nara .nara-incl .h{font-size:14.5px; color:var(--paper); font-weight:600; margin:0 0 10px;}
body.page-nara .nara-incl .price{font-family:'Spectral',serif; font-size:18px; color:var(--green-bright); line-height:1.7; margin:0;}
body.page-nara .nara-incl .fine{font-size:13px; color:#83857b; margin:12px 0 0;}

/* ===== 11. MEMBER ACCESS ===== */
body.page-nara .nara-access{text-align:center;}
body.page-nara .nara-access > .wrap > h2{margin-left:auto; margin-right:auto;}
body.page-nara .nara-svc{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:960px; margin:8px auto 0; text-align:left;}
body.page-nara .nara-svc .svc{border:1px solid var(--hair); border-radius:8px; background:var(--card); padding:30px 28px; display:flex; flex-direction:column;}
body.page-nara .nara-svc .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--green); font-weight:600; margin-bottom:10px;}
body.page-nara .nara-svc h3{font-size:20px; margin-bottom:10px;}
body.page-nara .nara-svc p{font-size:14px; color:var(--ink-soft); margin:0 0 18px; line-height:1.55;}
body.page-nara .nara-svc .price{font-family:'Spectral',serif; font-size:22px; color:var(--ink); margin:auto 0 4px;}
body.page-nara .nara-svc .more{font-size:13.5px; font-weight:600; color:var(--green); margin-top:10px;}
body.page-nara .nara-contact{border:1px solid var(--hair); border-radius:10px; background:var(--paper2); padding:34px 36px; max-width:560px; margin:40px auto 0; text-align:center;}
body.page-nara .nara-contact .h{font-size:16px; font-weight:600; color:var(--ink); margin:0 0 8px; font-family:'Spectral',serif;}
body.page-nara .nara-contact p{font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; max-width:48ch; margin-left:auto; margin-right:auto;}
body.page-nara .nara-contact .email{font-family:'Spectral',serif; font-size:19px; color:var(--green); font-weight:600; display:inline-block;}
body.page-nara .nara-contact .site{display:block; font-size:14px; color:var(--muted); margin-top:6px;}

/* ---- slim ink footer (member-only) ---- */
body.page-nara footer .wrap{max-width:1100px;}

/* ---- responsive ---- */
@media (max-width:880px){
  body.page-nara .nara-split,
  body.page-nara .nara-hero .lower,
  body.page-nara .nara-qs,
  body.page-nara .nara-cols{grid-template-columns:1fr; gap:30px;}
  body.page-nara .nara-hero .right{border-left:0; padding-left:0; border-top:1px solid var(--hair); padding-top:24px;}
  body.page-nara .nara-stats{grid-template-columns:1fr 1fr;}
  body.page-nara .nara-stats .stat:nth-child(3){border-left:0;}
  body.page-nara .nara-stats .stat{border-top:1px solid var(--hair); padding-right:0;}
  body.page-nara .nara-stats .stat:nth-child(-n+2){border-top:0;}
  body.page-nara .nara-benefits,
  body.page-nara .nara-biz,
  body.page-nara .nara-svc{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  body.page-nara .nara-stats{grid-template-columns:1fr 1fr;}
  body.page-nara .nara-benefits,
  body.page-nara .nara-biz,
  body.page-nara .nara-svc{grid-template-columns:1fr;}
}

/* ---- scroll reveal (elegant fade + rise; one-time, reduced-motion safe, no-JS safe) ----
 * Hidden state applies ONLY under html.js-reveal (set pre-paint in <head>), so no-JS = visible.
 * Grid containers are NOT hidden (excluded via :not); only their cards animate, so transforms never compound.
 */
html.js-reveal .nara-sec > .wrap > *:not(.nara-stats):not(.nara-qs):not(.nara-cols):not(.nara-benefits):not(.nara-biz):not(.nara-svc),
html.js-reveal .nara-stats > *,
html.js-reveal .nara-qs > *,
html.js-reveal .nara-cols > *,
html.js-reveal .nara-benefits > *,
html.js-reveal .nara-biz > *,
html.js-reveal .nara-svc > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
html.js-reveal .nara-sec > .wrap > *.in:not(.nara-stats):not(.nara-qs):not(.nara-cols):not(.nara-benefits):not(.nara-biz):not(.nara-svc),
html.js-reveal .nara-stats > *.in,
html.js-reveal .nara-qs > *.in,
html.js-reveal .nara-cols > *.in,
html.js-reveal .nara-benefits > *.in,
html.js-reveal .nara-biz > *.in,
html.js-reveal .nara-svc > *.in{opacity:1; transform:none;}

/* card cascade: stagger each grid's children ~80ms */
html.js-reveal .nara-stats > *:nth-child(2),html.js-reveal .nara-qs > *:nth-child(2),html.js-reveal .nara-cols > *:nth-child(2),html.js-reveal .nara-benefits > *:nth-child(2),html.js-reveal .nara-biz > *:nth-child(2),html.js-reveal .nara-svc > *:nth-child(2){transition-delay:.08s;}
html.js-reveal .nara-stats > *:nth-child(3),html.js-reveal .nara-qs > *:nth-child(3),html.js-reveal .nara-benefits > *:nth-child(3),html.js-reveal .nara-biz > *:nth-child(3),html.js-reveal .nara-svc > *:nth-child(3){transition-delay:.16s;}
html.js-reveal .nara-stats > *:nth-child(4),html.js-reveal .nara-qs > *:nth-child(4),html.js-reveal .nara-benefits > *:nth-child(4){transition-delay:.24s;}
html.js-reveal .nara-benefits > *:nth-child(5){transition-delay:.32s;}
html.js-reveal .nara-benefits > *:nth-child(6){transition-delay:.40s;}

@media (prefers-reduced-motion: reduce){
  html.js-reveal .nara-sec > .wrap > *,
  html.js-reveal .nara-stats > *,html.js-reveal .nara-qs > *,html.js-reveal .nara-cols > *,html.js-reveal .nara-benefits > *,html.js-reveal .nara-biz > *,html.js-reveal .nara-svc > *{opacity:1 !important; transform:none !important; transition:none !important;}
}