/* Studio Lucky Bamboo niche pages. Site chrome (tokens, nav, footer, consent banner) is copied from the live free-website-audit page so the pages match. */
:root{
  --ink:#1C1913; --inkg:#35402C; --paper:#FCFAF4; --linen:#F4F0E5;
  --gold:#DFB13B; --golddeep:#B8860B; --goldpale:#EAD9A0;
  --goldink:#8A6408;
  --seal:#A33B2C; --sealdeep:#7E2C20;
  --night:#101012; --deep:#0B1F16; --grove:#123626; --moss:#35402C;
  --leaf:#4A6B3F; --leaf2:#5F8A4C;
  --navh-rest:clamp(76px,6.6vw,96px);
  --navh-min:clamp(58px,4.6vw,66px);
  --lockup-w:clamp(210px,17.4vw,252px);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Instrument Sans", -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
html,body{background:var(--paper)}
body{min-height:100vh;display:flex;flex-direction:column;font-family:var(--sans);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
@media(pointer:fine){
  body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M2 2 Q12.5 3 17.5 10.5 Q19.5 16.5 14.5 19.5 Q6.5 18.5 3 9 Q2 5 2 2 Z' fill='%234A6B3F' stroke='%23FCFAF4' stroke-width='1.2'/%3E%3Cpath d='M3.5 3.5 Q9.5 9 14 16.5' stroke='rgba(252,250,244,.55)' stroke-width='1' fill='none'/%3E%3C/svg%3E") 2 2, auto}
  a,button{cursor:pointer}
  input[type=email],input[type=text]{cursor:text}
}
.nav{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  height:var(--navh-min);padding:0 clamp(18px,3.4vw,44px);pointer-events:none;
  --slb-studio:#1C1913;--slb-lucky:#B8860B;--slb-bamboo:#35402C;
  --slb-culm:#35402C;--slb-blade:#4A6B3F;--slb-ring:#B8860B}
.nav>*{pointer-events:auto}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(252,250,244,.96) 0%, rgba(252,250,244,.90) 100%);
  -webkit-backdrop-filter:saturate(1.12) blur(20px);backdrop-filter:saturate(1.12) blur(20px)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(184,134,11,.22) 14%, rgba(184,134,11,.34) 50%, rgba(184,134,11,.22) 86%, transparent 100%)}
.wordmark{display:flex;align-items:center}
.wordmark svg.slb-lockup{width:var(--lockup-w);height:auto}
.nav-links{display:flex;gap:clamp(10px,1.4vw,22px);align-items:center}
.nav-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgba(28,25,19,.72);transition:color .3s;padding:4px 0}
.nav-links a:hover{color:var(--golddeep)}
.nav-links a[aria-current="page"]{color:var(--goldink)}
@media(max-width:1080px){.nav-links{display:none}}
.nav-cta{position:relative;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(53,64,44,.55);border-radius:999px;padding:8px 26px;color:var(--ink);
  backdrop-filter:blur(8px);background:rgba(252,250,244,.35);transition:border-color .3s,color .3s,background .3s}
.nav-cta:hover{border-color:var(--golddeep);color:var(--golddeep)}
.nav-cta:focus-visible,.nav-links a:focus-visible,.wordmark:focus-visible{outline:2px solid var(--goldink);outline-offset:3px}
@media(max-width:560px){.nav-cta{display:none}}
.cutwrap{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.cutwrap .cut{position:absolute;right:4px;top:50%;width:96px;height:58px;transform:translateY(-46%) rotate(-12deg)}
.lbl{position:relative}
.nav-cta{--leafcut:rgba(53,64,44,.09)}
.pillwrap{position:relative;display:inline-flex;
  --glf:#4A6B3F;--glhi:rgba(255,255,255,.22);--ringf:#B8860B;--blade2f:#5F8A4C;
  --stalkh:72px;--stalkright:23.8px;--gslide:6px;--glift:-52px;--gcrown:.8}
.pillwrap.ctx-nav{--stalkh:55px;--stalkright:27.47px;--glift:-37.54px;--gcrown:.6119;--gslide:6px}
.pillwrap .stalk{position:absolute;bottom:4px;right:var(--stalkright);
  width:calc(var(--stalkh) * .4375);height:var(--stalkh);
  pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.2,.7,.2,1)}
.pillwrap a:hover~.stalk{clip-path:inset(0 0 0 0)}
.pillwrap .stalk .bladeL{transform:scale(0) rotate(-16deg);transform-origin:95% 88%;
  transform-box:fill-box;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .14s}
.pillwrap .stalk .blade2{transform:scale(0) rotate(16deg);transform-origin:5% 90%;
  transform-box:fill-box;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .28s}
.pillwrap a:hover~.stalk .bladeL,.pillwrap a:hover~.stalk .blade2{transform:scale(1) rotate(0deg)}
.gl{display:inline-block;vertical-align:middle;width:15px;height:10.5px;flex:none;
  transform-origin:10% 87%;transform:none;translate:none;rotate:none;scale:none;
  transition:translate .48s cubic-bezier(.2,.7,.2,1) .17s,
             rotate .34s cubic-bezier(.34,1.56,.64,1) .33s,
             scale .34s cubic-bezier(.34,1.56,.64,1) .33s}
.pillwrap a:hover .gl{transition-delay:.17s,.33s,.33s;
  translate:var(--gslide) var(--glift);rotate:-40deg;scale:var(--gcrown)}
@media(prefers-reduced-motion:reduce){
  .gl,.pillwrap .stalk,.pillwrap .stalk .blade2,.pillwrap .stalk .bladeL{transition:none}
  .pillwrap a:hover .gl{transform:none;translate:none;rotate:none;scale:none}
  .pillwrap a:hover~.stalk{clip-path:inset(100% 0 0 0)}
  .pillwrap a:hover~.stalk .blade2{transform:scale(0) rotate(16deg)}
  .pillwrap a:hover~.stalk .bladeL{transform:scale(0) rotate(-16deg)}
}
footer{position:relative;z-index:6;margin-top:auto;padding:20px clamp(18px,3.4vw,44px) 14px;
  background:#071009;color:rgba(251,243,236,.62)}
.foot-inner{max-width:1080px;margin:0 auto}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid rgba(251,243,236,.14)}
.foot-brand{max-width:300px}
.foot-brand svg.slb-lockup{width:min(148px,52vw);height:auto;
  --slb-studio:#E8E5DA;--slb-lucky:#DFB13B;--slb-bamboo:#7FA36B;
  --slb-culm:#7FA36B;--slb-blade:#9CBF85;--slb-ring:#DFB13B}
.foot-line{margin-top:8px;font-size:12px;line-height:1.45;color:rgba(251,243,236,.72)}
.foot-cols{display:flex;gap:clamp(22px,4vw,48px);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:4px;min-width:120px}
.foot-col .fc-h{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:rgba(251,243,236,.45);margin:1.67em 0 2px}
.foot-col a{font-size:12.5px;color:rgba(251,243,236,.78);transition:color .3s;width:fit-content}
.foot-col a:hover{color:var(--goldpale)}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,243,236,.5)}
.cookie-notice{position:fixed;left:20px;bottom:20px;max-width:360px;z-index:200;
  background:rgba(252,250,244,.97);backdrop-filter:blur(10px);
  border:1px solid rgba(28,25,19,.14);border-radius:14px;
  padding:16px 18px;box-shadow:0 14px 40px -12px rgba(28,25,19,.35);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.cookie-notice.show{opacity:1;transform:none;pointer-events:auto}
.cookie-notice:focus{outline:none}
.cookie-notice p{font-size:12.5px;line-height:1.55;color:#4A4231;margin:0}
.cookie-notice p a{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.35);padding-bottom:1px}
.cn-actions{margin-top:12px;display:flex;gap:10px}
.cookie-notice button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-radius:999px;padding:8px 22px;cursor:pointer}
.cookie-notice .cn-accept{border:1px solid transparent;color:var(--ink);
  background:linear-gradient(140deg,var(--goldpale),var(--gold))}
.cookie-notice .cn-decline{border:1px solid rgba(53,64,44,.4);background:transparent;color:var(--ink)}
.cookie-notice button:focus-visible,.cookie-notice p a:focus-visible{outline:2px solid var(--goldink);outline-offset:3px}
@media(max-width:560px){.cookie-notice{left:12px;right:12px;bottom:12px;max-width:none}}
@media(prefers-reduced-motion:reduce){.cookie-notice{transition:none}}
/* ===== Niche-page section system (everything below is page content; everything above is site chrome) ===== */
main.np{flex:1;padding:0}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--paper);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;border:2px solid var(--goldink);transition:top .2s}
.skip:focus{top:12px;outline:none}
.np-wrap{max-width:calc(1080px + 2*clamp(18px,4vw,44px));margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.np-chapter{padding:clamp(56px,8vw,112px) 0;background:var(--paper);color:var(--ink)}
.np-chapter.linen{background:var(--linen)}
.np-chapter.dark{background:var(--deep);color:rgba(251,243,236,.84)}
.np-eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--goldink);
  margin-bottom:20px;display:flex;align-items:center;gap:14px}
.np-eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.dark .np-eyebrow,.np-hero .np-eyebrow{color:var(--gold)}
.np h1,.np h2,.np h3{font-family:var(--serif);font-weight:390;letter-spacing:-.014em;color:var(--inkg);text-wrap:balance}
.np h1{line-height:1.05;font-size:clamp(34px,4.8vw,66px)}
.np h2{line-height:1.12;font-size:clamp(28px,3.4vw,46px)}
.np h3{line-height:1.2;font-size:clamp(20px,1.9vw,26px)}
.np h1 em,.np h2 em{font-style:italic;color:var(--golddeep)}
.dark h2,.dark h3,.np-hero h1{color:#F6F1E3}
.dark h2 em,.np-hero h1 em{color:var(--gold)}
.np p{line-height:1.68;text-wrap:pretty}
.np-lede{margin-top:22px;font-size:clamp(15px,1.3vw,18px);color:#4A4231;max-width:50ch}
.dark .np-lede,.np-hero .np-lede{color:rgba(251,243,236,.8)}
.np-body{margin-top:18px;font-size:clamp(15px,1.25vw,17px);color:#4A4231;max-width:62ch}
.dark .np-body{color:rgba(251,243,236,.78)}
.np a.np-link{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.4);padding-bottom:1px}
.dark a.np-link{color:var(--goldpale);border-bottom-color:rgba(234,217,160,.4)}
.np a.np-link:hover{color:var(--golddeep)}
.np-head{max-width:720px;margin-bottom:clamp(28px,4vw,52px)}

/* hero: primary + secondary pill */
.np-hero{background:var(--deep);color:#F6F1E3;padding:calc(var(--navh-min) + clamp(48px,7vw,104px)) 0 clamp(56px,8vw,112px);
  background-image:radial-gradient(900px 420px at 85% 0%,rgba(223,177,59,.14),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(74,107,63,.28),transparent 65%)}
.np-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.np-btn{display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;border-radius:999px;padding:14px 30px;border:1px solid transparent;transition:box-shadow .3s,border-color .3s,color .3s}
.np-btn.primary{color:var(--ink);background:linear-gradient(140deg,var(--goldpale),var(--gold))}
.np-btn.primary:hover{box-shadow:0 10px 26px -6px rgba(223,177,59,.75)}
.np-btn.secondary{color:var(--ink);border-color:rgba(53,64,44,.55);background:transparent}
.np-btn.secondary:hover{border-color:var(--golddeep);color:var(--golddeep)}
.dark .np-btn.secondary,.np-hero .np-btn.secondary{color:#F6F1E3;border-color:rgba(246,241,227,.5)}
.dark .np-btn.secondary:hover,.np-hero .np-btn.secondary:hover{border-color:var(--gold);color:var(--gold)}
.np-btn:focus-visible,.np a:focus-visible,.np summary:focus-visible{outline:2px solid var(--goldink);outline-offset:3px}
.dark .np-btn:focus-visible,.dark a:focus-visible,.dark summary:focus-visible,.np-hero a:focus-visible,.np-feature.dark a:focus-visible{outline-color:var(--gold)}
.np-note{margin-top:16px;font-size:14px;color:rgba(251,243,236,.7);max-width:46ch}
/* author and date line: hero (default) or under an article. Light chapters get the dark-ink color. */
.np-meta{margin-top:18px;font-size:13px;letter-spacing:.02em;color:rgba(251,243,236,.7)}
.np-chapter:not(.dark) .np-meta{color:#5C5340}

/* three-up cards, rule grid */
.np-grid{display:grid;gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(53,64,44,.28)}
.np-grid.two{grid-template-columns:repeat(2,1fr)}
.np-card{padding:28px clamp(0px,2vw,28px) 8px 0}
.np-grid>.np-card+.np-card{padding-left:clamp(0px,2vw,28px);border-left:1px solid rgba(53,64,44,.2)}
.np-card .np-num{display:block;font-family:var(--serif);font-size:15px;color:var(--goldink);margin-bottom:10px;letter-spacing:.08em}
.np-card p{margin-top:12px;font-size:15.5px;color:#4A4231}
.dark .np-grid{border-top-color:rgba(251,243,236,.22)}
.dark .np-grid>.np-card+.np-card{border-left-color:rgba(251,243,236,.16)}
.dark .np-card p{color:rgba(251,243,236,.76)}
.dark .np-card .np-num,.dark .np-proof .np-tag,.dark .np-price-amt small{color:var(--goldpale)}
@media(max-width:860px){
  .np-grid,.np-grid.two{grid-template-columns:1fr}
  .np-grid>.np-card+.np-card{padding-left:0;border-left:0;border-top:1px solid rgba(53,64,44,.2);margin-top:20px}
  .dark .np-grid>.np-card+.np-card{border-top-color:rgba(251,243,236,.16)}
}

/* numbered steps */
.np-steps{list-style:none;counter-reset:step;display:grid;gap:0;border-top:1px solid rgba(53,64,44,.28)}
.np-steps li{counter-increment:step;display:grid;grid-template-columns:64px 1fr;gap:6px 20px;padding:24px 0;border-bottom:1px solid rgba(53,64,44,.2)}
.np-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--serif);font-size:28px;color:var(--golddeep);grid-row:span 2}
.np-steps h3{font-size:clamp(19px,1.7vw,23px)}
.np-steps p{font-size:15.5px;color:#4A4231;max-width:60ch}
.dark .np-steps,.dark .np-steps li{border-color:rgba(251,243,236,.2)}
.dark .np-steps p{color:rgba(251,243,236,.76)}

/* price / package block */
.np-price{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.np-price-amt{font-family:var(--serif);font-size:clamp(44px,6.2vw,88px);line-height:1;letter-spacing:-.02em;color:var(--inkg)}
.np-price-amt small{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--goldink);margin-bottom:12px}
/* three-tier price block: .np-grid.np-tiers of .np-card (label in .np-num, amount in .np-plan-amt). Selectors are .np-card-scoped on purpose: .np-card p would otherwise shrink the amount to 15px. */
.np-card .np-plan-amt{font-family:var(--serif);font-size:clamp(34px,3.6vw,48px);line-height:1.05;margin-top:6px;color:var(--goldink)}
.dark .np-card .np-plan-amt{color:var(--gold)}
.np-card .np-plan-amt span{font-family:var(--sans);font-size:13px;letter-spacing:.06em;margin-left:6px;color:#5C5340}
.dark .np-card .np-plan-amt span{color:rgba(251,243,236,.7)}
.np-tiers .np-card p.np-tier-for{margin-top:14px}
@media(max-width:860px){.np-price{grid-template-columns:1fr}}

/* proof: case-study card, or a labeled concept state */
.np-proof{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:8px}
.np-proof+.np-proof{margin-top:clamp(32px,4vw,56px)}
.np-proof figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(28,25,19,.14);box-shadow:0 24px 50px -28px rgba(28,25,19,.45);background:#fff}
.np-proof img{width:100%;height:auto}
.np-proof .np-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--goldink)}
.np-proof h3{margin-top:10px}
.np-proof p{margin-top:12px;font-size:15.5px;color:#4A4231}
.np-concept{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.np-concept-chip{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--seal);background:var(--paper);border:1px solid var(--seal);border-radius:999px;padding:4px 12px}
.np-concept-mock{width:100%;aspect-ratio:3/2;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(28,25,19,.14);border-radius:14px;background:var(--paper);box-shadow:0 24px 50px -28px rgba(28,25,19,.45)}
.np-concept-bar{flex:0 0 28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--linen)}
.np-concept-bar i{width:8px;height:8px;border-radius:50%;background:rgba(53,64,44,.35)}
.np-concept-hero{flex:0 0 45%;background:var(--deep);padding:0 7%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.np-concept-hero p{font-family:var(--serif);font-weight:390;font-size:clamp(16px,2vw,26px);line-height:1.15;color:#F6F1E3;max-width:20ch}
.np-concept-hero span{width:84px;height:18px;border-radius:999px;background:var(--goldpale)}
.np-concept-cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4%;padding:5% 7%}
.np-concept-cols div{background:var(--linen);border-radius:6px;padding:12% 10%;display:flex;flex-direction:column;gap:10%}
.np-concept-cols u{display:block;height:6px;border-radius:3px;background:rgba(53,64,44,.2);text-decoration:none}
.np-concept-cols u+u{width:62%}
.np-concept figcaption{font-size:13px;line-height:1.5;color:#5C5340}
@media(max-width:860px){.np-proof{grid-template-columns:1fr}}

/* FAQ: real text in the HTML, details/summary */
.np-faq{max-width:820px;border-top:1px solid rgba(53,64,44,.28)}
.np-faq details{border-bottom:1px solid rgba(53,64,44,.2)}
.np-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);line-height:1.3;color:var(--inkg)}
.np-faq summary::-webkit-details-marker{display:none}
.np-faq summary::after{content:"+";font-family:var(--sans);font-size:24px;color:var(--golddeep);flex:none;transition:transform .3s}
.np-faq details[open] summary::after{transform:rotate(45deg)}
.np-faq details p{padding:0 0 24px;font-size:15.5px;color:#4A4231;max-width:64ch}

/* closing call-to-action band */
.np-cta{text-align:center}
.np-cta .np-head{margin:0 auto 8px;max-width:680px}
.np-cta .np-eyebrow{justify-content:center}
.np-cta .np-actions{justify-content:center}
.np-cta .np-lede{margin-left:auto;margin-right:auto}

/* feature chapter: media flush to the edge, square corners, copy beside it */
.np-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--linen);color:var(--ink)}
.np-feature.dark{background:var(--deep);color:rgba(251,243,236,.84)}
.np-feature-media{position:relative;min-height:320px;background:var(--moss)}
.np-feature-media.art{background:#0B1F16 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23123626%22/%3E%3Cstop offset=%221%22 stop-color=%22%230B1F16%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%22400%22 height=%22300%22 fill=%22url%28%23g%29%22/%3E%3Crect x=%2232.0%22 y=%220%22 width=%2216%22 height=%22300%22 fill=%22%232C4A33%22/%3E%3Crect x=%2231.0%22 y=%2251%22 width=%2218%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2231.0%22 y=%22109%22 width=%2218%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2231.0%22 y=%22167%22 width=%2218%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2231.0%22 y=%22225%22 width=%2218%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2231.0%22 y=%22283%22 width=%2218%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2284.0%22 y=%220%22 width=%2222%22 height=%22300%22 fill=%22%2335402C%22/%3E%3Crect x=%2283.0%22 y=%2237%22 width=%2224%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2283.0%22 y=%2295%22 width=%2224%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2283.0%22 y=%22153%22 width=%2224%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2283.0%22 y=%22211%22 width=%2224%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%2283.0%22 y=%22269%22 width=%2224%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22153.0%22 y=%220%22 width=%2214%22 height=%22300%22 fill=%22%234A6B3F%22/%3E%3Crect x=%22152.0%22 y=%2256%22 width=%2216%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22152.0%22 y=%22114%22 width=%2216%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22152.0%22 y=%22172%22 width=%2216%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22152.0%22 y=%22230%22 width=%2216%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22152.0%22 y=%22288%22 width=%2216%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22202.0%22 y=%220%22 width=%2226%22 height=%22300%22 fill=%22%232C4A33%22/%3E%3Crect x=%22201.0%22 y=%2242%22 width=%2228%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22201.0%22 y=%22100%22 width=%2228%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22201.0%22 y=%22158%22 width=%2228%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22201.0%22 y=%22216%22 width=%2228%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22201.0%22 y=%22274%22 width=%2228%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22276.0%22 y=%220%22 width=%2218%22 height=%22300%22 fill=%22%235F8A4C%22/%3E%3Crect x=%22275.0%22 y=%2243%22 width=%2220%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22275.0%22 y=%22101%22 width=%2220%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22275.0%22 y=%22159%22 width=%2220%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22275.0%22 y=%22217%22 width=%2220%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22275.0%22 y=%22275%22 width=%2220%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22328.0%22 y=%220%22 width=%2224%22 height=%22300%22 fill=%22%2335402C%22/%3E%3Crect x=%22327.0%22 y=%2252%22 width=%2226%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22327.0%22 y=%22110%22 width=%2226%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22327.0%22 y=%22168%22 width=%2226%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22327.0%22 y=%22226%22 width=%2226%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22327.0%22 y=%22284%22 width=%2226%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22379.0%22 y=%220%22 width=%2212%22 height=%22300%22 fill=%22%234A6B3F%22/%3E%3Crect x=%22378.0%22 y=%2251%22 width=%2214%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22378.0%22 y=%22109%22 width=%2214%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22378.0%22 y=%22167%22 width=%2214%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22378.0%22 y=%22225%22 width=%2214%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3Crect x=%22378.0%22 y=%22283%22 width=%2214%22 height=%223%22 fill=%22%23DFB13B%22 opacity=%22.55%22/%3E%3C/svg%3E") center/cover no-repeat}
.np-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.np-feature-copy{display:flex;align-items:center;padding:clamp(40px,6vw,96px) clamp(18px,4vw,64px)}
.np-feature-copy>div{max-width:520px}
.np-feature.dark h2,.np-feature.dark h3{color:#F6F1E3}
.np-feature.dark h2 em{color:var(--gold)}
.np-feature.dark .np-eyebrow{color:var(--gold)}
.np-feature.dark .np-body{color:rgba(251,243,236,.78)}
.np-feature.dark a.np-link{color:var(--goldpale);border-bottom-color:rgba(234,217,160,.4)}
.np-feature.reverse .np-feature-media{order:2}
@media(min-width:961px){.np-feature{min-height:min(70vh,640px)}}
@media(max-width:860px){.np-feature{grid-template-columns:1fr}.np-feature-media{min-height:0;aspect-ratio:4/3}.np-feature.reverse .np-feature-media{order:0}}

/* narrow band: one 62ch column, for an argument that should read as a letter */
/* band: the wrap keeps the page's left edge so numerals and headings line up with every other chapter; only the reading column stays narrow */
.np-band .np-wrap>*:not(.np-bignum){max-width:62ch}

/* hero with a visual: add class has-media to .np-hero, wrap the copy in .np-hero-copy, add figure.np-hero-media */
.np-hero.has-media .np-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.np-hero-media{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(246,241,227,.18);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.np-hero-media img{width:100%;height:auto}
@media(max-width:860px){.np-hero.has-media .np-wrap{grid-template-columns:1fr}}

/* prose: plain text under an H2 (.np-prose, one column inside any chapter) and the whole-page article layout (.np-article, a chapter that narrows to 62ch) */
.np-prose{max-width:62ch}
.np-article .np-wrap{max-width:calc(62ch + 2*clamp(18px,4vw,44px))}
.np-prose p,.np-article p{font-size:clamp(16px,1.3vw,18px);line-height:1.72;color:#4A4231;margin:0 0 1.1em}
.np-prose h2,.np-article h2{margin:2.2em 0 .5em;font-size:clamp(26px,2.8vw,36px)}
.np-prose h3,.np-article h3{margin:1.8em 0 .4em;font-size:clamp(20px,1.9vw,24px)}
.np-prose>:first-child,.np-article .np-wrap>:first-child{margin-top:0}
.np-prose .np-eyebrow+h2{margin-top:0}
.np-prose ul,.np-prose ol,.np-article ul,.np-article ol{padding-left:1.3em;margin:1em 0}
.np-prose li,.np-article li{margin:.4em 0;line-height:1.65;font-size:clamp(16px,1.3vw,18px);color:#4A4231}
.np-prose li::marker,.np-article li::marker{color:var(--golddeep)}
.np-prose a,.np-article a{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.4);padding-bottom:1px}
.np-prose a:hover,.np-article a:hover{color:var(--golddeep)}
.np-prose strong,.np-article strong{color:var(--inkg);font-weight:600}
.np-prose blockquote,.np-article blockquote{margin:1.6em 0;padding-left:20px;border-left:3px solid var(--goldpale);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--inkg)}
.np-prose blockquote p,.np-article blockquote p{font-size:inherit;color:inherit;margin:0}
.np-answer{background:var(--linen);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:20px 24px;margin:0 0 2em}
.np-chapter.linen .np-answer{background:var(--paper)}
.np-answer .np-eyebrow{margin-bottom:10px}
.np-answer .np-eyebrow::before{display:none}
.np-answer p{margin:0}
.np-table-wrap{overflow-x:auto;margin:1.6em 0}
.np-prose table,.np-article table{width:100%;border-collapse:collapse;border-top:1px solid rgba(53,64,44,.28);font-size:15px;line-height:1.5;color:#4A4231}
.np-prose th,.np-article th{text-align:left;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--goldink);padding:12px 14px 10px 0}
.np-prose td,.np-article td{padding:12px 14px 12px 0;border-top:1px solid rgba(53,64,44,.2);vertical-align:top}
.dark .np-prose p,.dark .np-prose li{color:rgba(251,243,236,.78)}

@media(max-width:560px){
  .np-btn{width:100%}
  .np-steps li{grid-template-columns:44px 1fr}
}
@media(prefers-reduced-motion:reduce){
  .np-btn,.np-faq summary::after{transition:none}
}

/* Form (moved from the audit page's page-local style block, unchanged) */
.audit-form{position:relative;margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:440px}
.audit-form label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(28,25,19,.72)}
.audit-form input[type="text"]:not(.hp),.audit-form input[type="email"]{display:block;width:100%;margin-top:8px;
  font:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:#fff;
  border:1px solid rgba(53,64,44,.35);border-radius:12px;padding:12px 14px}
.audit-form input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--golddeep)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:13px;line-height:1.55;color:#4A4231;max-width:42ch}
.consent a{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.35);padding-bottom:1px}
.consent a:hover{color:var(--golddeep);border-bottom-color:var(--golddeep)}
.send,.book{display:inline-flex;align-items:center;justify-content:center;width:fit-content;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:linear-gradient(140deg,var(--goldpale),var(--gold));
  border:1px solid transparent;border-radius:999px;padding:12px 28px;cursor:pointer}
.send:hover,.book:hover{box-shadow:0 10px 26px -6px rgba(223,177,59,.75)}
.send:disabled{opacity:.55;cursor:wait}
.send:focus-visible,.book:focus-visible,.nav-links a:focus-visible,.foot-col a:focus-visible,.consent a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}
.form-error{font-size:14px;line-height:1.5;color:var(--sealdeep);max-width:42ch}
.form-error:empty{display:none}
.success{margin-top:28px;max-width:42ch}
.success h2{font-family:var(--serif);font-weight:390;font-size:clamp(26px,3vw,36px);line-height:1.15;
  letter-spacing:-.014em;color:var(--inkg);text-wrap:balance}
.success p{margin-top:14px;font-size:clamp(15px,1.3vw,17px);line-height:1.68;color:#4A4231}
.success .book{margin-top:22px}
@media(max-width:560px){
  .send,.book{width:100%}
}

/* Proof chapter bullet list slot */
.np-proof ul.np-list{margin:14px 0 0;padding-left:1.2em}
.np-proof ul.np-list li{margin-top:6px;line-height:1.6;color:#4A4231}

/* Closing band optional third link (text link beside the two pills) */
.np-cta .np-actions .np-link{font-size:15px}

/* ===== Section types added 2026-10-06 (TSK-2026-0566), from DaVinci's rendered re-score ===== */
/* 1. Chapter numeral: <span class="np-bignum" aria-hidden="true">01</span> as first child of a .np-wrap. Seal on paper/linen, goldpale on dark. */
.np-bignum{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(88px,15vw,208px);line-height:.8;letter-spacing:-.04em;color:var(--seal);margin:0 0 clamp(8px,1.6vw,20px) -.04em;user-select:none}
.dark .np-bignum{color:var(--goldpale)}
.np-bignum+.np-eyebrow{margin-top:0}
/* 2. Split: heading and lede left, numbered list right. <div class="np-split"><div class="np-split-head">...</div><ol class="np-numlist">...</ol></div> */
.np-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,88px);align-items:start}
.np-split-head{position:sticky;top:calc(var(--navh-min) + 24px)}
.np-numlist{list-style:none;counter-reset:nl;border-top:1px solid rgba(53,64,44,.28)}
.np-numlist li{counter-increment:nl;display:grid;grid-template-columns:48px 1fr;gap:0 16px;padding:20px 0;border-bottom:1px solid rgba(53,64,44,.2);font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:#4A4231}
.np-numlist li::before{content:counter(nl,decimal-leading-zero);font-family:var(--serif);font-size:24px;color:var(--seal);line-height:1.2}
.np-numlist strong{color:var(--ink);font-weight:600}
.dark .np-numlist,.dark .np-numlist li{border-color:rgba(251,243,236,.2);color:rgba(251,243,236,.8)}
.dark .np-numlist li::before{color:var(--goldpale)}
.dark .np-numlist strong{color:#F6F1E3}
/* 3. Four-column card timeline: <ol class="np-timeline"><li><span class="np-when">Label</span><h3>..</h3><p>..</p></li>...</ol> (2 to 4 items; use .three for three) */
.np-timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.np-timeline.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.np-timeline li{background:#fff;border:1px solid rgba(28,25,19,.12);border-top:3px solid var(--gold);border-radius:6px;padding:22px 20px 24px}
.linen .np-timeline li{background:var(--paper)}
.np-timeline .np-when{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--seal);margin-bottom:10px}
.np-timeline h3{font-size:clamp(18px,1.5vw,21px)}
.np-timeline p{margin-top:10px;font-size:15px;line-height:1.6;color:#4A4231}
.dark .np-timeline li{background:rgba(251,243,236,.06);border-color:rgba(251,243,236,.16);border-top-color:var(--gold)}
.dark .np-timeline .np-when{color:var(--goldpale)}
.dark .np-timeline p{color:rgba(251,243,236,.76)}
@media(max-width:1000px){.np-timeline,.np-timeline.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.np-timeline,.np-timeline.three{grid-template-columns:1fr}}
/* 4. One huge figure on a dark chapter, then a hairline rule grid: <div class="np-bigfig"><small>label</small><span class="np-bigfig-amt">$9,999</span><p>..</p></div> then .np-grid.np-tiers.np-rulegrid */
.np-bigfig{padding-bottom:clamp(28px,4vw,52px);margin-bottom:clamp(8px,2vw,24px)}
.np-bigfig small{display:block;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--goldpale);margin-bottom:12px}
.np-bigfig-amt{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(76px,16vw,224px);line-height:.9;letter-spacing:-.04em;color:#F6F1E3}
.np-bigfig p{margin-top:20px;max-width:56ch;font-size:clamp(15px,1.3vw,18px);color:rgba(251,243,236,.8)}
.np-rulegrid{border-top:1px solid rgba(251,243,236,.3)}
.np-rulegrid>.np-card{padding-top:32px}
.np-rulegrid .np-plan-amt{font-size:clamp(40px,4.6vw,64px)}
/* 5. Framed proof screenshot: <figure class="np-browser"><div class="np-browser-bar"><i></i><i></i><i></i><span>domain</span></div><img ...><figcaption><span class="np-label">Screenshot</span> caption</figcaption></figure>. Use once per page; never full bleed. */
.np-browser{margin:0;max-width:980px;border-radius:12px;overflow:hidden;border:1px solid rgba(28,25,19,.16);background:#fff;box-shadow:0 36px 70px -34px rgba(28,25,19,.5)}
.np-browser-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--linen);border-bottom:1px solid rgba(28,25,19,.1)}
.np-browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(53,64,44,.32)}
.np-browser-bar span{margin-left:12px;font-size:12px;letter-spacing:.04em;color:#5C5340}
.np-browser img{display:block;width:100%;height:auto}
.np-browser figcaption{padding:14px 18px;font-size:13.5px;line-height:1.5;color:#5C5340;background:var(--paper);border-top:1px solid rgba(28,25,19,.1)}
.np-label{display:inline-block;margin-right:8px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--seal)}
.np-browser-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.np-browser-wrap{grid-template-columns:1fr}}
/* 6. Standalone statement band (transparency, one sentence of proof): dark chapter with .np-statement, centred, no cards */
.np-statement .np-wrap{max-width:calc(820px + 2*clamp(18px,4vw,44px));text-align:center}
.np-statement .np-eyebrow{justify-content:center}
.np-statement h2{font-size:clamp(28px,3.6vw,48px);line-height:1.15}
.np-statement p{margin:22px auto 0;max-width:60ch;font-size:clamp(15px,1.3vw,18px);color:rgba(251,243,236,.8)}
.np-statement .np-actions{justify-content:center}
.np-chapter p.np-pull{margin:0;font-family:var(--serif);font-weight:350;font-size:clamp(26px,3.8vw,52px);line-height:1.16;letter-spacing:-.01em;color:var(--inkg);text-align:center;max-width:22ch;margin-inline:auto}
.dark p.np-pull{color:#F6F1E3}
/* 7. Marginal chapter label: eyebrow with a rail on wide screens. Add .np-rail to a chapter. */
@media(min-width:1200px){.np-rail .np-eyebrow{position:absolute;left:clamp(18px,3vw,44px);top:0;writing-mode:vertical-rl;transform:rotate(180deg)}.np-rail .np-wrap{position:relative}}
/* 8. Booking pill at the foot of a dark band: .np-actions.np-foot */
.np-actions.np-foot{margin-top:clamp(24px,3vw,40px)}
/* hero with the drawn bamboo panel and a concept chip stays on .np-hero.has-media */
@media(max-width:860px){.np-split{grid-template-columns:1fr}.np-split-head{position:static}}
@media(prefers-reduced-motion:reduce){.np-split-head{position:static}}
.np-proof-copy{margin-top:clamp(28px,4vw,48px)}
.np-proof-copy .np-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--goldink);margin:0 0 6px}
.np-proof-copy h3{margin-top:0}
.np-browser-wrap .np-prose h2{margin-top:0}
.np-split-head .np-prose,.np-split-head>.np-body{margin-top:18px}

/* ---- Final-review variants (2026-10-06) ---- */
/* Two-card timeline, replaces inline grid overrides: <ol class="np-timeline two"> */
.np-timeline.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
@media(max-width:1000px){.np-timeline.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.np-timeline.two{grid-template-columns:1fr}}
/* Compact timeline for short one-line cards: <ol class="np-timeline compact"> */
.np-timeline.compact li{padding:14px 16px}
.np-timeline.compact .np-when{margin-bottom:6px}
.np-timeline.compact p{margin-top:6px}
@media(max-width:560px){.np-timeline.compact{gap:10px}.np-timeline.compact li{display:grid;grid-template-columns:minmax(76px,28%) 1fr;gap:2px 14px;align-items:baseline;min-height:0}.np-timeline.compact .np-when{margin:0;grid-row:1/3}.np-timeline.compact h3,.np-timeline.compact p{grid-column:2;margin:0}.np-timeline.compact h3+p{margin-top:4px}}
/* Smaller numeral for secondary chapters. Full-size .np-bignum: at most three per page, never in adjacent chapters. */
.np-bignum.sm{font-size:clamp(56px,7vw,96px);margin-bottom:clamp(6px,1vw,12px)}
/* Pull quote inside article prose: hairline rules, left aligned */
.np-chapter .np-prose p.np-pull,.np-chapter.np-article p.np-pull{margin:2.2em 0;padding:1.1em 0;border-block:1px solid rgba(53,64,44,.28);text-align:left;max-width:none;margin-inline:0}
.dark .np-prose p.np-pull{border-color:rgba(251,243,236,.25)}
/* Trailing paragraph under a split's list: last child of .np-split, <div class="np-split-foot"><p>..</p></div>. Sits under the list in the right column, never stranded at the wrap edge. */
.np-split-foot{margin-top:4px;max-width:62ch}
.np-split-foot p{margin:0 0 14px;font-size:clamp(15px,1.25vw,17px);line-height:1.6}
@media(min-width:861px){.np-split>.np-split-foot{grid-column:2}}
@media(max-width:860px){.np-split-foot{margin-top:0}}
/* Drawn bamboo panel variants: same artwork, different crop, so sibling pages do not show identical strips */
.np-feature-media.art.b{background-size:190% auto;background-position:12% 50%}
.np-feature-media.art.c{background-size:260% auto;background-position:88% 50%}
/* Numbered list on a dark chapter beside a form or heading is covered by .dark .np-numlist */
/* Request chapter: prose and form left, a numbered list right (audit page). Form markup is unchanged; only its wrapper is new. */
.np-req{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,88px);align-items:start}
@media(max-width:860px){.np-req{grid-template-columns:1fr}}
.np-timeline+.np-split-foot{margin-top:28px}
/* compact timeline whose labels are bare numbers: narrow label column at 560px and below */
@media(max-width:560px){.np-timeline.compact.nums li{grid-template-columns:34px 1fr}}
/* range figure such as "$300 to $900": one line at every width */
.np-bigfig-amt.range{font-size:clamp(46px,10vw,150px);white-space:nowrap}
.np-split-head .np-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--goldink);margin:0 0 6px}

/* =====================================================================================================
   Round 2 section types, 2026-10-08 (TSK-2026-0578 Step 7, phase A). Appended; nothing above is changed.
   Sources: DaVinci's WINNERS.md, lifted from the _lab lab.css files and the Lovable round sources, rebuilt on live tokens.
   Every type: one column at 860px, no animation, safe under prefers-reduced-motion. Markup is documented in README.md.
   ===================================================================================================== */
.np-wrap.wide{max-width:calc(1320px + 2*clamp(18px,4vw,44px))}
.np-cap{margin:18px 0 0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#5C5340}
.dark .np-cap{color:rgba(246,241,227,.62)}

/* R2-1. Photo hero: .np-hero.has-photo > figure.np-hero-media.is-cover (img) + .np-wrap > .np-hero-copy. The young stalk sits at 72% x, scrim runs left to right. */
.np-hero.has-photo{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;min-height:max(86svh,620px);
  padding:calc(var(--navh-min) + 40px) 0 clamp(48px,7vw,96px);background-color:var(--deep);background-image:none}
.np-hero.has-photo .np-wrap{position:relative;z-index:2;width:100%}
.np-hero.has-photo .np-hero-copy{max-width:min(860px,100%)}
.np-hero.has-photo h1{font-size:clamp(38px,5.6vw,88px);line-height:1.03;font-weight:350;max-width:17ch}
.np-hero.has-photo .np-lede{max-width:56ch}
.np-hero.has-photo .np-eyebrow{color:var(--goldpale)}
.np-hero.has-photo .np-hero-media.is-cover{position:absolute;inset:0;margin:0;border:0;border-radius:0;box-shadow:none;z-index:0;overflow:hidden;background:var(--deep)}
.np-hero.has-photo .np-hero-media.is-cover img{position:absolute;top:0;left:72%;width:auto;min-width:0;max-width:none;height:100%;aspect-ratio:16/9;object-fit:cover;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.np-hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,22,.5) 0%,rgba(11,31,22,0) 24%,rgba(11,31,22,.2) 50%,rgba(11,31,22,.86) 100%),
  linear-gradient(90deg,rgba(11,31,22,.82) 0%,rgba(11,31,22,.4) 52%,rgba(11,31,22,.05) 100%)}
@media(max-width:860px){
  .np-hero.has-photo{min-height:clamp(560px,82svh,700px);padding-top:calc(var(--navh-min) + 28px)}
  .np-hero.has-photo::after{background:linear-gradient(180deg,rgba(11,31,22,.7) 0%,rgba(11,31,22,.6) 40%,rgba(11,31,22,.9) 100%)}
}

/* R2-2. Photo statement: add has-photo to a dark .np-statement chapter and put figure.np-statement-ground (img) first. Optional ul.np-choose row beneath. */
.np-statement.has-photo{position:relative;overflow:hidden;isolation:isolate;padding:clamp(80px,11vw,160px) 0}
.np-statement-ground{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:var(--deep)}
.np-statement-ground img{position:absolute;top:0;left:72%;width:auto;max-width:none;height:100%;aspect-ratio:16/9;object-fit:cover;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.np-statement-ground::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,22,.84),rgba(11,31,22,.68) 50%,rgba(11,31,22,.9)),linear-gradient(90deg,rgba(11,31,22,.5),rgba(11,31,22,.1))}
.np-statement p.np-eyebrow{font-size:11.5px;max-width:none;margin:0 0 20px;line-height:1.4}
.np-statement.is-display h2{font-size:clamp(34px,5.4vw,84px);line-height:1.04;font-weight:300;letter-spacing:-.025em;max-width:20ch;margin-inline:auto}
.np-statement.has-photo h2{font-weight:300}
.np-choose{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(36px,5vw,64px) auto 0;padding:0;border-top:1px solid rgba(223,177,59,.5);text-align:left;max-width:1000px}
.np-choose li{padding:22px clamp(14px,2vw,32px) 0;border-left:1px solid rgba(223,177,59,.35);font-size:15px;line-height:1.55;color:rgba(251,243,236,.88)}
.np-choose li:first-child{border-left:0;padding-left:0}
.np-choose b{display:block;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--goldpale);margin-bottom:8px}
@media(max-width:860px){.np-choose{grid-template-columns:1fr}.np-choose li,.np-choose li:first-child{border-left:0;padding:18px 0 4px;border-top:1px solid rgba(223,177,59,.3)}.np-choose li:first-child{border-top:0}}

/* R2-3. One-word answer inside .np-statement: <p class="np-yes">Yes.</p> */
.np-statement p.np-yes{margin:clamp(12px,2vw,24px) auto 0;font-family:var(--serif);font-weight:300;font-size:clamp(88px,15vw,210px);line-height:.95;letter-spacing:-.04em;color:var(--gold)}

/* R2-4. Bare contrast: .np-contrast > .np-contrast-col (add is-dim to the side that recedes). Works on paper, linen and dark. */
.np-contrast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative;margin-top:clamp(28px,4vw,52px);border-top:1px solid rgba(53,64,44,.28)}
.np-contrast::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--golddeep);opacity:.7}
.np-contrast::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;background:var(--golddeep);transform:translate(-50%,-50%)}
.np-contrast-col{padding:clamp(28px,3.4vw,48px) clamp(20px,4vw,64px) clamp(8px,2vw,24px) 0}
.np-contrast-col+.np-contrast-col{padding:clamp(28px,3.4vw,48px) 0 clamp(8px,2vw,24px) clamp(20px,4vw,64px)}
.np .np-contrast-col h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--goldink);margin:0 0 20px}
.np-contrast-col p{font-size:clamp(15.5px,1.4vw,19px);line-height:1.6;color:#4A4231;margin:0 0 16px;max-width:36ch}
.np-contrast-col p:first-of-type{font-family:var(--serif);font-weight:350;font-style:italic;font-size:clamp(22px,2.3vw,32px);line-height:1.22;max-width:22ch;color:var(--inkg)}
.np-contrast-col.is-dim p:first-of-type{color:#6C6450}
.dark .np-contrast{border-top-color:rgba(223,177,59,.5)}
.dark .np-contrast::before,.dark .np-contrast::after{background:var(--gold)}
.dark .np-contrast-col h3{color:var(--goldpale)}
.dark .np-contrast-col p{color:rgba(251,243,236,.76)}
.dark .np-contrast-col p:first-of-type{color:#F6F1E3}
.dark .np-contrast-col.is-dim p:first-of-type{color:rgba(246,241,227,.62)}
@media(max-width:860px){
  .np-contrast{grid-template-columns:1fr}.np-contrast::before,.np-contrast::after{display:none}
  .np-contrast-col,.np-contrast-col+.np-contrast-col{padding:28px 0 8px}
  .np-contrast-col+.np-contrast-col{border-top:1px solid var(--golddeep)}
  .dark .np-contrast-col+.np-contrast-col{border-top-color:var(--gold)}
}

/* R2-5. Count tag: <span class="np-count" aria-hidden="true">1</span>. Filled seal red; replaces line icons on card and list heads. */
.np-count{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--seal);color:#FBF3EC;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;letter-spacing:0;margin-bottom:16px;flex:none}
.np-count.inline{display:inline-grid;margin:0}

/* R2-6. Ladder: .np-ladder (on a dark chapter) of .np-rung columns. Inherited rows are dimmed (li.is-inherited, aria-hidden) under the "Everything in X" label. Up to 12 rows. */
.np-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto repeat(12,auto);margin-top:clamp(28px,4vw,56px);border-top:1px solid rgba(223,177,59,.6)}
.np-rung{grid-row:1 / span 15;display:grid;grid-template-rows:subgrid;padding:clamp(28px,3vw,44px) clamp(18px,2.4vw,40px) 0;border-left:1px solid rgba(223,177,59,.45);min-width:0}
.np-rung:first-child{border-left:0;padding-left:0}
.np .np-rung-tier{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--goldpale);margin:0}
.np .np-rung-price{font-family:var(--serif);font-weight:300;font-size:clamp(64px,8vw,120px);line-height:.95;letter-spacing:-.04em;color:#F6F1E3;margin:clamp(10px,1.4vw,18px) 0 0}
.np-rung-price small{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.08em;font-weight:400;color:rgba(251,243,236,.74);margin-top:12px}
.np .np-rung-from{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:rgba(234,217,160,.85);margin:clamp(22px,3vw,40px) 0 0;padding-bottom:12px;align-self:end;line-height:1.4}
.np-rung-rows{display:contents;list-style:none}
.np-rung-rows li{padding:16px 0;border-top:1px solid rgba(246,241,227,.14);font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.5;color:#F6F1E3;min-width:0}
.np-rung-rows li.is-inherited{opacity:.55}
.np-rung-rows li strong{font-weight:600}
@media(max-width:860px){
  .np-ladder{display:block;border-top:0}
  .np-rung{display:block;padding:clamp(28px,6vw,40px) 0 clamp(20px,4vw,28px);border-left:0;border-top:1px solid rgba(223,177,59,.6)}
  .np-rung-rows{display:block}
  .np-rung-rows li.is-inherited{display:none}
  .np .np-rung-from{padding-bottom:6px;margin-top:18px}
}

/* R2-7. Drawn provider phone: figure.np-phone > .np-phone-frame > .np-phone-screen. Add has-callouts for numbered leaders, is-lg for 420px. */
.np-phone{--np-phone-w:380px;--np-reach:0px;margin:0;width:min(100%,var(--np-phone-w));justify-self:center}
.np-phone.is-lg{--np-phone-w:420px}
.np-phone.has-callouts{--np-reach:92px;width:min(100%,calc(var(--np-phone-w) + var(--np-reach) + 34px));padding-right:calc(var(--np-reach) + 34px)}
.np-phone-frame{position:relative;border:3px solid var(--ink);border-radius:46px;background:var(--paper);padding:12px;box-shadow:0 36px 70px -34px rgba(0,0,0,.6);color:var(--ink)}
.dark .np-phone-frame{border-color:#2a2a2c;box-shadow:0 0 0 1px rgba(246,241,227,.16),0 36px 70px -34px rgba(0,0,0,.8)}
.np-phone-screen{position:relative;display:flex;flex-direction:column;min-height:calc(var(--np-phone-w) * 1.3);padding:34px 14px 10px;border-radius:34px;background:var(--paper)}
.np-phone-screen::before{content:"";position:absolute;top:11px;left:50%;width:84px;height:20px;border-radius:12px;background:var(--ink);transform:translateX(-50%)}
.np-phone-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:16px;color:var(--inkg);padding:2px 0 12px}
.np-phone-brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.np-phone-person{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:14px;padding:4px 0 14px;position:relative}
.np-phone-person>div{flex:1;min-width:0}
.np-phone-face{position:relative;flex:none;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 50% 36%,#CDBF9C 0 24%,transparent 25%),radial-gradient(ellipse 44% 30% at 50% 100%,#CDBF9C 0 98%,transparent 100%),var(--linen);border:1.5px solid rgba(53,64,44,.3)}
.np-phone-person strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--inkg);line-height:1.15}
.np-phone-person small{display:block;font-size:12px;color:#5C5340;margin-top:3px}
.np-phone-chips{list-style:none;display:flex;justify-content:space-between;gap:8px;margin:0 0 14px;padding:0;position:relative}
.np-phone-photo{display:block;height:clamp(110px,14vw,170px);margin:0 0 14px;border-radius:6px;border:1px solid rgba(53,64,44,.14);background:radial-gradient(circle at 50% 34%,rgba(53,64,44,.4) 0 12%,transparent 12.8%),radial-gradient(ellipse 30% 30% at 50% 100%,rgba(53,64,44,.4) 0 99%,transparent 100%),linear-gradient(165deg,#E9D5C3,#C9A98D)}
.np-phone-chips li{position:relative;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--inkg);border:1.5px solid var(--golddeep);border-radius:999px;padding:6px 14px}
.np-phone-row{position:relative;margin-top:10px;flex:none;padding:14px 16px;background:#fff;border-top:2px solid var(--gold);border-radius:0 0 8px 8px;box-shadow:0 1px 0 rgba(28,25,19,.1)}
.np .np-phone-row h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;color:var(--inkg)}
.np-phone-row p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:#4A4231}
.np-phone-screen::after{content:"";order:0;flex:1 0 16px}
.np-phone-pill{order:1;display:block;margin:0;position:relative;padding:15px 12px;border-radius:999px;background:linear-gradient(140deg,var(--goldpale),var(--gold));text-align:center;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);position:relative}
.np-phone-home{order:2;display:block;width:112px;height:5px;margin:16px auto 6px;flex:none;border-radius:3px;background:var(--ink);opacity:.8}
.np-callout{position:absolute;top:50%;left:calc(100% - 3px);width:calc(var(--np-reach) + 3px + 3px + 12px + 14px);height:2px;margin-top:-1px;background:var(--seal);pointer-events:none}
.np-callout::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--seal)}
.np-callout::after{content:attr(data-n);position:absolute;right:-30px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--seal);color:#FBF3EC;font-size:15px;font-weight:600;display:grid;place-items:center;line-height:1}
@media(max-width:860px){
  .np-phone.has-callouts{--np-reach:0px;width:min(100%,var(--np-phone-w));padding-right:0}
  .np-callout{left:auto;right:-6px;top:-8px;width:22px;height:22px;margin:0;background:none}
  .np-callout::before{display:none}
  .np-callout::after{right:0;top:0;margin:0;width:22px;height:22px;font-size:12px}
}

/* R2-8. Triage board: .np-board > ul.np-board-tiles (12 .np-tile), svg.np-board-path, .np-board-goal, ul.np-board-legend, .np-cap. Put the three Rebuild tiles in the last row, columns 1 to 3. */
.np-board{max-width:1040px;margin:0 auto}
.np-board-tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.np-tile{border-radius:14px;padding:16px 14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;border:1.5px solid transparent}
.np-tile-page{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.15}
.np-tile-state{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.np-tile.is-keep{background:var(--paper);color:var(--ink)}
.np-tile.is-keep .np-tile-state{color:var(--goldink)}
.np-tile.is-rebuild{background:var(--gold);color:var(--ink);box-shadow:0 14px 30px -14px rgba(223,177,59,.7)}
.np-tile.is-redirect{background:transparent;border-style:dashed;border-color:var(--goldpale);color:var(--goldpale)}
.np-tile.is-redirect .np-tile-state::after{content:" \2192"}
.np-tile.is-neutral{background:rgba(246,241,227,.06);border-color:rgba(246,241,227,.18)}
.np-tile.is-neutral::before{content:"";display:block;width:46%;height:7px;border-radius:4px;background:rgba(246,241,227,.28)}
.dark .np-board-head .np-concept-chip{background:transparent;color:var(--goldpale);border-color:var(--goldpale)}
.np-board-path{display:block;width:100%;height:72px;overflow:visible}
.np-board-path path{fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.np-board-goal{width:max-content;margin:0 0 0 37.5%;transform:translateX(-50%);padding:14px 34px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;box-shadow:0 14px 30px -12px rgba(223,177,59,.7);line-height:1.2}
.np-board-legend{list-style:none;display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center;margin-top:clamp(28px,4vw,44px);font-size:14px;color:rgba(251,243,236,.84)}
.np-board-legend li{display:flex;align-items:center;gap:10px}
.np-board-legend b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldpale);font-weight:600}
.np-swatch{width:22px;height:16px;border-radius:5px;display:inline-block}
.np-swatch.is-keep{background:var(--paper)}.np-swatch.is-rebuild{background:var(--gold)}.np-swatch.is-redirect{border:1.5px dashed var(--goldpale)}
.np-board+.np-cap,.np-board .np-cap{text-align:center}
@media(max-width:860px){
  .np-board-tiles{gap:7px}
  .np-tile{min-height:80px;padding:9px 7px;border-radius:9px;gap:4px}
  .np-tile-page{font-size:11.5px;line-height:1.2}
  .np-tile-state{font-size:7.5px;letter-spacing:.1em}
  .np-board-path{height:44px}
  .np-board-goal{padding:12px 22px;font-size:10.5px}
  .np-board-legend{gap:10px 20px;font-size:13px}
}

/* R2-9. Hero tile grid: add has-grid to .np-hero and put <div class="np-hero-grid" aria-hidden="true"></div> first. Faint tiles with three solid gold cells. */
.np-hero.has-grid{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(540px,84vh,840px);padding-bottom:clamp(48px,7vw,96px)}
.np-hero.has-grid .np-wrap{position:relative;z-index:1;width:100%}
.np-hero.has-grid h1{font-size:clamp(36px,5.6vw,80px);line-height:1.03;max-width:17ch}
.np-hero-grid{position:absolute;top:0;right:0;bottom:0;width:min(56%,760px);pointer-events:none;
  background-image:linear-gradient(rgba(223,177,59,.3),rgba(223,177,59,.3)),linear-gradient(rgba(223,177,59,.3),rgba(223,177,59,.3)),linear-gradient(rgba(223,177,59,.3),rgba(223,177,59,.3)),
   linear-gradient(rgba(234,217,160,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(234,217,160,.14) 1px,transparent 1px);
  background-size:79px 79px,79px 79px,79px 79px,80px 80px,80px 80px;
  background-position:right 241px top 161px,right 81px top 321px,right 161px top 81px,right top,right top;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat;
  -webkit-mask-image:linear-gradient(to left,#000 20%,transparent 100%);mask-image:linear-gradient(to left,#000 20%,transparent 100%)}
@media(max-width:860px){.np-hero.has-grid{min-height:0;padding-top:calc(var(--navh-min) + 56px)}.np-hero-grid{width:100%;opacity:.5}}

/* R2-10. Triptych: .np-triptych of .np-triptych-col, each with a giant .np-count, a label, and a drawn body (.np-triptych-frames, .np-triptych-menu or .np-triptych-book). */
.np-triptych{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,4vw,56px);border-top:1px solid var(--golddeep);border-bottom:1px solid rgba(53,64,44,.2);background:var(--paper)}
.linen .np-triptych{background:var(--paper)}
.np-triptych-col{padding:clamp(20px,2.6vw,40px) clamp(18px,2.6vw,40px) clamp(28px,3vw,44px);border-left:1px solid rgba(53,64,44,.2);min-height:clamp(420px,40vw,580px);display:flex;flex-direction:column}
.np-triptych-col:first-child{border-left:0}
.np-triptych .np-count{display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--seal);font-family:var(--serif);font-weight:300;font-size:clamp(110px,15vw,220px);line-height:.8;letter-spacing:-.04em;margin:0 0 clamp(8px,1.4vw,20px) -.04em;text-align:left}
.np-triptych-label{font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--goldink);margin:0 0 clamp(16px,2vw,26px)}
.np-triptych-frames{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.np-triptych-frames li{--a:#E3DCC4;--b:#CFC7A8;--sil:rgba(53,64,44,.42);min-height:92px;border-radius:3px;border:1px solid rgba(53,64,44,.14);
  background:radial-gradient(circle at 50% 33%,var(--sil) 0 11%,transparent 11.8%),radial-gradient(ellipse 34% 26% at 50% 96%,var(--sil) 0 99%,transparent 100%),linear-gradient(165deg,var(--a),var(--b))}
.np-triptych-frames li:nth-child(2){--a:#DDE4D2;--b:#B7C6A8}
.np-triptych-frames li:nth-child(3){--a:var(--goldpale);--b:#CDB26A;--sil:rgba(124,92,12,.5)}
.np-triptych-frames li:nth-child(4){--a:#E9D5C3;--b:#C79E80;--sil:rgba(126,44,32,.45)}
.np-triptych-frames li:nth-child(5){--a:#D3DECA;--b:#8FAE86;--sil:rgba(18,54,38,.55)}
.np-triptych-frames li:nth-child(6){--a:var(--linen);--b:#D8CFB3;--sil:rgba(53,64,44,.5)}
.np-triptych-menu{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.np-triptych-menu li{display:flex;align-items:flex-end;gap:10px;padding:8px 0 10px;font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.1;color:var(--inkg)}
.np-triptych-menu s{flex:1;text-decoration:none;border-bottom:2px dotted rgba(53,64,44,.4);transform:translateY(-6px);min-width:20px}
.np-triptych-menu b{display:block;width:34px;height:7px;border-radius:4px;background:var(--gold);margin-bottom:5px}
.np-triptych-book{flex:1;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.np-triptych-book em{font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:linear-gradient(180deg,#EAD9A0,#DFB13B);padding:18px clamp(24px,3vw,44px);border-radius:999px;box-shadow:0 16px 34px -16px rgba(184,134,11,.7)}
.np-triptych-book p{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.5;color:#4A4231}
@media(max-width:860px){
  .np-triptych{grid-template-columns:1fr}
  .np-triptych-col{border-left:0;border-top:1px solid rgba(53,64,44,.2);min-height:0}
  .np-triptych-col:first-child{border-top:0}
  .np-triptych .np-count{font-size:96px}
  .np-triptych-frames li{min-height:84px}
  .np-triptych-menu li{padding:12px 0}
}

/* R2-11. Culm: figure.np-culm > ol of li (span.np-joint, span.np-culm-n, optional span.np-culm-pill, p). li.is-gold is the checked step. Static; lives in the right column of an .np-split. */
.np-culm{margin:0}
.np-culm ol{list-style:none;position:relative;margin:0;padding:0}
.np-culm li{position:relative;padding:clamp(34px,4.4vw,56px) 0 clamp(34px,4.4vw,56px) clamp(104px,12vw,148px);min-height:clamp(150px,16vw,210px)}
.np-culm li::before{content:"";position:absolute;left:clamp(14px,2vw,28px);top:0;bottom:0;width:clamp(48px,6vw,72px);background:linear-gradient(90deg,#1b4a31 0%,#4b8a62 34%,#2c6244 66%,#143726 100%)}
.np-culm li:first-child::before{border-radius:34px 34px 0 0}
.np-culm li:last-child::before{border-radius:0 0 8px 8px}
.np-joint{position:absolute;left:calc(clamp(14px,2vw,28px) - 6px);top:clamp(34px,4.4vw,56px);width:calc(clamp(48px,6vw,72px) + 12px);height:12px;border-radius:6px;background:linear-gradient(180deg,#0B1F16,#143726);box-shadow:0 2px 0 rgba(234,217,160,.18)}
.np-culm li.is-gold .np-joint{height:16px;background:linear-gradient(180deg,#EAD9A0,#DFB13B 55%,#B8860B);box-shadow:0 0 0 5px rgba(223,177,59,.22),0 0 34px 6px rgba(223,177,59,.55)}
.np-culm-n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.03em;color:var(--seal)}
.np-culm li.is-gold .np-culm-n{color:var(--goldink)}
.np-culm li p{margin-top:12px;font-family:var(--serif);font-weight:350;font-size:clamp(22px,2.4vw,34px);line-height:1.15;letter-spacing:-.012em;color:var(--inkg);max-width:20ch}
.np-culm-pill{position:absolute;right:0;top:clamp(34px,4.4vw,56px);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--ink);background:linear-gradient(140deg,var(--goldpale),var(--gold));border-radius:999px;padding:6px 14px}
.np-culm figcaption{margin:18px 0 0 clamp(104px,12vw,148px);font-size:13px;color:#5C5340}
@media(max-width:860px){
  .np-culm li{padding-left:clamp(88px,26vw,120px)}
  .np-culm figcaption{margin-left:clamp(88px,26vw,120px)}
  .np-culm-pill{position:static;display:inline-block;margin:10px 0 0}
}

/* R2-12. Question row: ol.np-qrow of li (span.np-count + span.np-qrow-q). In a dark hero; 2 by 2 at 860px and below. */
.np-qrow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(36px,5vw,64px) 0 0;padding:0;border-top:1px solid rgba(223,177,59,.6)}
.np-qrow li{padding:20px clamp(12px,1.8vw,28px) 0;border-left:1px solid rgba(223,177,59,.35)}
.np-qrow li:first-child{border-left:0;padding-left:0}
.np-qrow .np-count{width:28px;height:28px;font-size:13px;margin-bottom:0}
.np-qrow-q{display:block;margin-top:14px;font-family:var(--serif);font-weight:350;font-size:clamp(20px,2.5vw,36px);line-height:1.1;letter-spacing:-.015em;color:#F6F1E3}
@media(max-width:860px){
  .np-qrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np-qrow li:nth-child(3){border-left:0;padding-left:0}
  .np-qrow li:nth-child(n+3){margin-top:18px;border-top:1px solid rgba(223,177,59,.35);padding-top:18px}
  .np-qrow-q{font-size:21px}
}

/* R2-13. Office card: figure.np-officecard > span.np-concept-chip, .np-officecard-body (h3.np-officecard-title, dl of div rows), figcaption. */
.np-officecard{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.np-officecard-body{width:100%;background:#fff;border:1px solid rgba(28,25,19,.14);border-top:3px solid var(--gold);border-radius:6px;padding:clamp(22px,3vw,40px);box-shadow:0 24px 50px -28px rgba(28,25,19,.45)}
.np .np-officecard-title{font-weight:350;font-size:clamp(24px,2.4vw,34px);line-height:1.1;color:var(--inkg);margin:0 0 clamp(14px,2vw,24px)}
.np-officecard dl{margin:0;border-top:1px solid rgba(53,64,44,.3)}
.np-officecard dl>div{display:grid;grid-template-columns:minmax(88px,28%) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(53,64,44,.2)}
.np-officecard dt{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--goldink);padding-top:3px}
.np-officecard dd{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:var(--ink)}
.np-officecard figcaption{font-size:13px;line-height:1.5;color:#5C5340}

/* R2-14. Hero figure: a display number beside the H1. .np-hero.has-fig > .np-wrap > .np-hero-top (copy + .np-hero-fig). Add is-range for a full-width range with a three-stop track. */
.np-hero.has-fig .np-wrap{max-width:calc(1320px + 2*clamp(18px,4vw,44px))}
.np-hero-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:center}
.np-hero-fig{padding:clamp(20px,2.4vw,32px) 0 clamp(20px,2.4vw,34px);border-bottom:1px solid var(--gold);min-width:0}
.np .np-hero-fig-label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--goldpale);margin:0;line-height:1.4}
.np .np-hero-fig-num{font-family:var(--serif);font-weight:300;font-size:min(168px,max(88px,24vw));line-height:1.02;letter-spacing:-.045em;color:var(--goldpale);margin:10px 0 8px;white-space:nowrap}
.np-hero-fig-num .np-cur{font-size:.48em;vertical-align:.34em;margin-right:2px;letter-spacing:0}
.np .np-hero-fig-note{font-size:13px;line-height:1.5;color:rgba(251,243,236,.78);margin:0;max-width:30ch}
.np-hero-fig.is-range{border-bottom:0;border-top:1px solid rgba(223,177,59,.6);margin-top:clamp(28px,3.4vw,48px)}
.np-hero-fig.is-range .np-hero-fig-num{font-size:clamp(46px,10.5vw,176px);margin:6px 0 0}
.np-hero-fig-track{position:relative;height:1px;margin:clamp(22px,3vw,40px) 0 0;background:rgba(223,177,59,.55)}
.np-hero-fig-track i{position:absolute;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--gold)}
.np-hero-fig-track i:nth-child(1){left:0}.np-hero-fig-track i:nth-child(2){left:50%;transform:translateX(-50%)}.np-hero-fig-track i:nth-child(3){right:0}
.np-hero-fig-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.np-hero-fig-stops li:nth-child(2){text-align:center}.np-hero-fig-stops li:nth-child(3){text-align:right}
.np-hero-fig-stops a,.np-hero-fig-stops span{display:block;padding-top:18px;font-family:var(--serif);font-size:clamp(16px,2vw,28px);color:#F6F1E3}
.np-hero-fig-stops b{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--goldpale);margin-bottom:6px}
@media(max-width:860px){.np-hero-top{grid-template-columns:1fr}}

/* R2-15. Price rows: ul.np-pricerows of li (span.np-pricerows-name, span.np-pricerows-amt with small, p). Name and price sit together, the one line follows. */
.np-pricerows{list-style:none;margin:clamp(8px,2vw,24px) 0 0;padding:0;border-top:1px solid rgba(53,64,44,.28)}
.np-pricerows li{display:grid;grid-template-columns:clamp(84px,8vw,112px) clamp(130px,13vw,190px) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid rgba(53,64,44,.2)}
.np-pricerows-name{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--goldink)}
.np-pricerows-amt{font-family:var(--serif);font-weight:300;font-size:clamp(44px,4.4vw,60px);line-height:1;letter-spacing:-.03em;color:var(--inkg)}
.np-pricerows-amt small{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:#5C5340;margin-top:8px}
.np-pricerows p{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.55;color:#4A4231;max-width:52ch}
@media(max-width:860px){.np-pricerows li{grid-template-columns:1fr auto;row-gap:10px}.np-pricerows p{grid-column:1 / -1}.np-pricerows-name{align-self:end}}

/* R2-16. Checklist: ul.np-checklist of li (text only; the open gold box is drawn). Two columns of three on desktop. */
.np-checklist{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(3,auto);column-gap:clamp(24px,5vw,72px)}
.np-checklist li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid rgba(53,64,44,.2);font-family:var(--serif);font-weight:350;font-size:clamp(18px,1.7vw,23px);line-height:1.3;color:var(--inkg)}
.np-checklist li::before{content:"";display:block;width:22px;height:22px;margin-top:3px;border:2px solid var(--golddeep);border-radius:3px}
.np-checklist-foot{margin-top:28px}
@media(max-width:860px){.np-checklist{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}

/* R2-17. Report sheet: figure.np-sheet > .np-sheet-bar, three .np-sheet-row (b numeral, span title, i drawn line), figcaption naming it a drawing. */
.np-sheet{margin:0;background:var(--paper);border:1px solid rgba(28,25,19,.16);border-radius:6px;box-shadow:0 36px 70px -34px rgba(28,25,19,.5);overflow:hidden}
.np-sheet-bar{padding:14px 22px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--goldpale);background:var(--grove)}
.np-sheet-row{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:20px 22px 22px;border-bottom:1px solid rgba(53,64,44,.16)}
.np-sheet-row b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--seal);line-height:1.2}
.np-sheet-row span{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);color:var(--inkg);line-height:1.2}
.np-sheet-row i{grid-column:2;display:block;height:8px;margin-top:14px;border-radius:4px;background:rgba(53,64,44,.1);width:86%}
.np-sheet-row:nth-of-type(3) i{width:68%}.np-sheet-row:nth-of-type(4) i{width:78%}
.np-sheet figcaption{padding:12px 22px;font-size:13px;color:#5C5340;background:var(--linen)}

/* R2-18. Two-column splits that are not .np-split: copy beside a drawing, vertically centred. <div class="np-aside"> copy + figure */
.np-aside .np-numlist{margin-top:28px}
.np-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
@media(max-width:860px){.np-aside{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.np-hero.has-photo *,.np-ladder *,.np-board *,.np-culm *{animation:none;transition:none}}
.np-hero-fig-num em{font-size:.34em;font-style:italic;color:var(--gold);margin:0 .12em;vertical-align:.2em;letter-spacing:0}

/* Folded page-local CSS, 2026-10-13 (TSK-2026-0566) */
/* Scoping: :where(.pg-x) carries zero specificity, so a scoped rule ranks exactly as the inline rule did. Page classes sit on <body>: pg-chiro, pg-dental, pg-salon. */
/* med-spa-website-design: drawn before/after gallery in a browser frame, gold rule under the display statement */
.ms2-media{display:grid;place-items:center;padding:clamp(28px,5vw,72px) clamp(18px,4vw,56px);background:var(--moss)}
.ms2-gallery{margin:0;width:min(100%,560px)}
.ms2-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;background:var(--linen);border-radius:12px 12px 0 0}
.ms2-bar i{width:9px;height:9px;border-radius:50%;background:rgba(53,64,44,.32)}
.ms2-body{display:grid;gap:18px;padding:clamp(16px,2.4vw,26px);background:var(--paper);border-radius:0 0 12px 12px;box-shadow:0 36px 70px -34px rgba(0,0,0,.6)}
.ms2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms2-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;border:1px solid rgba(53,64,44,.14)}
.ms2-tile.is-before{background:radial-gradient(circle at 50% 40%,#D9CFB3 0 22%,transparent 23%),linear-gradient(180deg,#E7DFC8,#D2C7A6)}
.ms2-tile.is-after{background:radial-gradient(circle at 50% 40%,#EBD9A8 0 22%,transparent 23%),linear-gradient(180deg,#F1E8CC,#DCCB98)}
.ms2-tile b{position:absolute;left:10px;bottom:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--inkg)}
.ms2-pill{display:block;padding:14px 12px;border-radius:999px;background:linear-gradient(140deg,var(--goldpale),var(--gold));text-align:center;font-size:14px;font-weight:600;color:var(--inkg)}
.ms2-gallery .np-cap{color:rgba(246,241,227,.7)}
@media(max-width:860px){.ms2-media{aspect-ratio:auto;padding:28px 18px}}
.ms2-rule{display:block;width:72px;height:2px;margin:clamp(20px,2.6vw,32px) auto 0;background:var(--gold)}
.np-statement .ms2-rule+p{margin-top:clamp(20px,2.6vw,32px)}
/* chiropractic-website-design: keep the hero italic phrase whole on narrow screens (scoped: the same hero class is on med spa and salon) */
@media(max-width:560px){:where(.pg-chiro) .np-hero.has-photo h1 em{white-space:nowrap}}
/* dental-website-design: strip hero, answers list, count-tag numlist, split-foot spacing (scoped: .np-split-foot is on three other pages), closer */
.np-hero.has-strip{position:relative;overflow:hidden;isolation:isolate;padding-top:calc(var(--navh-min) + clamp(28px,4vw,56px));padding-bottom:clamp(36px,5vw,64px)}
.np-hero.has-strip .np-wrap{position:relative;z-index:2}
.np-hero.has-strip h1{font-size:clamp(36px,5vw,76px);line-height:1.04;font-weight:350;max-width:18ch}
.np-hero.has-strip .np-lede{max-width:62ch}
.np-hero.has-strip .np-actions{margin-top:24px}
.np-strip{position:absolute;top:0;right:0;height:100%;width:min(46vw,640px);z-index:0;opacity:.88;pointer-events:none}
.np-hero.has-strip::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,31,22,.55) 0%,rgba(11,31,22,.2) 55%,rgba(11,31,22,0) 100%),linear-gradient(180deg,rgba(11,31,22,0) 55%,rgba(11,31,22,.7) 100%)}
@media(max-width:860px){.np-strip{width:70vw;opacity:.5}}
/* answers: display-size question left, one-line answer on a hairline at right */
.np-answers{list-style:none;margin:clamp(8px,2vw,24px) 0 0;padding:0;border-top:1px solid rgba(53,64,44,.4)}
.np-answers li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);align-items:center;padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid rgba(53,64,44,.2)}
.np-answers .np-count{margin:0}
.np-answers h3{font-size:clamp(24px,3.2vw,46px);line-height:1.08;font-weight:350;letter-spacing:-.015em;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.np-answers p{font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:#4A4231;margin:0;max-width:34ch}
@media(max-width:860px){.np-answers li{grid-template-columns:1fr;gap:8px}.np-answers p{padding-left:calc(34px + 12px)}}
/* SEO split: count tags replace the stock numerals */
@media(max-width:860px){:where(.pg-dental) .np-split-foot{margin-top:20px}}
.np-numlist.has-count li{grid-template-columns:34px 1fr;gap:0 18px;align-items:start}
.np-numlist.has-count li::before{content:none}
.np-numlist.has-count .np-count{margin:0}
.np .np-closer{margin-top:clamp(28px,3.4vw,44px);font-family:var(--serif);font-style:italic;font-weight:350;font-size:clamp(22px,2.4vw,34px);line-height:1.22;color:#F6F1E3;max-width:40ch}
/* dental-website-design and salon-website-design: four-column grid, shared parts once, page differences scoped */
.np-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.np-grid.four .np-card h3{font-size:clamp(19px,1.7vw,24px);line-height:1.15;font-weight:350}
@media(max-width:1000px){.np-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.np-grid.four>.np-card:nth-child(odd){padding-left:0;border-left:0}.np-grid.four>.np-card:nth-child(n+3){margin-top:20px}}
@media(max-width:860px){.np-grid.four{grid-template-columns:1fr}}
:where(.pg-dental) .np-grid.four{border-top:1px solid var(--gold);margin-top:clamp(28px,4vw,52px)}
@media(max-width:1000px){:where(.pg-dental) .np-grid.four>.np-card:nth-child(n+3){border-top:1px solid rgba(251,243,236,.16)}}
@media(max-width:1000px){:where(.pg-salon) .np-grid.four>.np-card:nth-child(n+3){border-top:1px solid rgba(53,64,44,.2)}}
/* dental-website-design and salon-website-design: proof-copy eyebrow and stacked gap in the browser wrap (scoped: .np-browser-wrap is on nine other pages) */
:where(.pg-dental,.pg-salon) .np-browser-wrap .np-prose p.np-eyebrow{font-size:11.5px;line-height:1.4;color:var(--goldink);margin:0 0 14px}
@media(max-width:860px){:where(.pg-dental,.pg-salon) .np-browser-wrap{gap:32px}}
/* salon-website-design: triptych Book column drawn week row, triptych foot line, narrow-screen frames */
.np-minical{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:360px;margin-top:8px}
.np-minical i{display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(53,64,44,.22);border-radius:3px;background:#fff;font-style:normal;font-size:11px;letter-spacing:.08em;color:#5C5340}
.np-minical i.is-on{background:var(--gold);border-color:var(--golddeep);color:var(--ink)}
.np-minical-slots{display:flex;gap:8px;width:100%;max-width:360px}
.np-minical-slots b{flex:1;height:30px;border-radius:999px;border:1px solid rgba(53,64,44,.25);background:#fff}
.np-minical-slots b.is-on{background:linear-gradient(180deg,#EAD9A0,#DFB13B);border-color:var(--golddeep)}
.np-triptych-line{margin:18px 0 0;font-size:clamp(15px,1.3vw,18px);color:#4A4231}
.np-triptych-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin-top:18px}
.np-triptych-foot .np-cap,.np-triptych-foot .np-triptych-line{margin:0}
@media(max-width:560px){.np-triptych-frames{grid-template-columns:repeat(3,1fr)}.np-triptych-frames li{min-height:110px}}
/* website-redesign: short eyebrow, rd-tag pill, board chapter, hero grid fix, 5-column board, split pull, after spacing */
.rd-eb-short{display:none}
@media(max-width:560px){.rd-eb-short{display:inline}.rd-eb-long{display:none}}
.np-statement .np-tile.rd-tag{display:inline-flex;flex-direction:row;align-items:center;gap:14px;min-height:0;padding:9px 16px;margin:0 auto 22px;border-radius:999px}
.np-chapter.rd-board{background:var(--grove)}
.rd-board .np-board-head h2{margin-top:18px}
/* hero grid fix: solid gold cells, unmasked */
.np-hero.has-grid .np-hero-grid{-webkit-mask-image:none;mask-image:none;
  background-image:linear-gradient(#DFB13B,#DFB13B),linear-gradient(#DFB13B,#DFB13B),linear-gradient(#DFB13B,#DFB13B),linear-gradient(rgba(234,217,160,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(234,217,160,.14) 1px,transparent 1px)}
@media(max-width:860px){.np-hero.has-grid .np-hero-grid{opacity:1;top:var(--navh-min);bottom:auto;height:96px;
  background-size:48px 48px,48px 48px,48px 48px,48px 48px,48px 48px;
  background-position:right 48px top 0,right 144px top 48px,right 240px top 0,right top,right top}}
/* board: 10 tiles, 5 columns */
.rd-board .np-board-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.rd-board .np-board-goal{margin-left:30%}
@media(max-width:560px){.rd-board .np-board-tiles{gap:5px}.rd-board .np-tile{padding:8px 5px;min-height:74px}.rd-board .np-tile-page{font-size:10.5px}.rd-board .np-tile-state{font-size:6.5px;letter-spacing:.06em}}
.rd-split .np-prose p.np-pull{margin:0 0 28px;padding:28px 0;font-size:clamp(24px,2.5vw,34px);max-width:none}
@media(max-width:860px){.np-hero.has-grid{padding-top:calc(var(--navh-min) + 128px)}}
.rd-after{margin-top:clamp(24px,3vw,36px)}
/* blog/how-much-does-a-website-cost: mobile hero order (price first, 140px minimum figure at 390), 108px repeat in the charge band */
@media(max-width:860px){
  .np-hero.has-fig .np-hero-top{display:flex;flex-direction:column;gap:28px}
  .np-hero.has-fig .np-hero-fig{order:-1;padding-top:8px}
  .np-hero.has-fig .np-hero-fig-num{font-size:min(168px,max(140px,24vw))}
}
@media(max-width:430px){.np-hero.has-fig .np-hero-fig-num{font-size:min(41vw,170px);letter-spacing:-.06em}}
.slb-after{margin-top:1.5em}
.slb-charge .np-bigfig-amt{font-size:clamp(76px,7.5vw,108px)}
/* ai-automation: drawn-stalk hero, culm pill at 16px, display line beside the closing split */
.np-hero.ai-hero{position:relative;overflow:hidden;min-height:max(86svh,640px);display:flex;align-items:flex-end;isolation:isolate;padding-bottom:clamp(48px,7vw,96px)}
.ai-hero .np-wrap{position:relative;z-index:2;width:100%}
.ai-hero .np-hero-copy{max-width:min(800px,100%)}
.ai-hero h1{font-size:clamp(36px,5vw,76px);line-height:1.04;font-weight:350;max-width:19ch}
.ai-hero .np-lede{max-width:58ch}
.ai-strip{position:absolute;top:0;right:0;height:100%;width:min(48vw,680px);z-index:0;opacity:.85;pointer-events:none}
.ai-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,31,22,.6) 0%,rgba(11,31,22,.22) 55%,rgba(11,31,22,0) 100%),linear-gradient(180deg,rgba(11,31,22,0) 55%,rgba(11,31,22,.65) 100%)}
@media(max-width:860px){.ai-strip{width:72vw;opacity:.45}.np-hero.ai-hero{min-height:0}}
.np-culm-pill{font-size:16px;letter-spacing:.08em;text-transform:none;font-weight:600;padding:6px 16px}
.np .np-pull.ai-line{text-align:left;margin:0;max-width:20ch;font-size:clamp(26px,3vw,42px)}
.ai-lead{margin:0 0 14px}
@media(max-width:860px){.ai-hero .np-eyebrow{letter-spacing:.14em}.ai-hero .np-eyebrow::before{display:none}.np-culm li.is-gold .np-culm-n{display:inline-block;margin-right:12px;vertical-align:middle}}

/* Hero art, 2026-10-13 (TSK-2026-0566, DaVinci spec of 2026-10-07) */
/* .np-hero.has-art + img.np-hero-art as the last child of the section. Static bamboo-in-glass SVG (assets/art/), decorative, absolute at the right. --art-w is the art's widest box; the copy wrap gives up that column (plus right:4% and a 32px gap) so text never sits behind it. height:84% per spec, capped to the art's own aspect so a very tall hero cannot stretch it. */
.np-hero.has-art{position:relative;overflow:hidden;isolation:isolate;--art-w:clamp(300px,32vw,470px)}
.np-hero.has-art .np-wrap{position:relative;z-index:1;
  padding-right:max(clamp(18px,4vw,44px),calc(var(--art-w) + 4vw + 32px - max(0px,(100vw - 1168px)/2)))}
.np-hero-art{position:absolute;z-index:0;right:4%;bottom:0;height:84%;width:auto;max-height:calc(var(--art-w)*860/560);
  pointer-events:none;user-select:none}
@media(max-width:999px){
  .np-hero.has-art{--art-w:clamp(240px,26vw,260px)}
  .np-hero-art{right:3%;height:76%}
}
/* under 960px the copy keeps the full width and the art sits in its own band beneath it (never behind text) */
@media(max-width:959px){
  .np-hero.has-art{--art-band:clamp(230px,32vw,290px);padding-bottom:calc(clamp(56px,8vw,112px) + var(--art-band))}
  .np-hero.has-art .np-wrap{padding-right:clamp(18px,4vw,44px)}
  .np-hero-art{right:8%;height:var(--art-band);max-height:none}
}

/* Timeline variant, 2026-10-13 (nonprofit "weeks out"). The existing .compact rules are unchanged; this adds to them. */
/* .np-timeline.compact.rows: every card is one full-width row, label beside text, at all widths. Use when one card has a long line and the others a short one (a 4-up grid leaves the short cards tall and empty). */
.np-timeline.compact.rows{grid-template-columns:1fr;gap:10px}
.np-timeline.compact.rows li{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:2px clamp(14px,3vw,36px);align-items:baseline;padding:16px 20px}
.np-timeline.compact.rows .np-when{margin:0}
.np-timeline.compact.rows p{margin:0}
@media(max-width:560px){.np-timeline.compact.rows li{grid-template-columns:minmax(76px,28%) 1fr;padding:14px 16px}}

/* Dark-chapter prose links, 2026-10-13 (QA) */
.dark .np-prose a,.dark .np-article a,.np-hero .np-prose a{color:var(--goldpale);border-bottom-color:rgba(234,217,160,.4)}
.dark .np-prose a:hover,.dark .np-article a:hover,.np-hero .np-prose a:hover{color:var(--gold)}
.dark .np-prose a:focus-visible,.dark .np-article a:focus-visible,.np-hero .np-prose a:focus-visible{outline-color:var(--goldpale)}

/* Fix-now after the 2026-10-13 re-score (TSK-2026-0566, DaVinci fix list items 1 and 3). Appended; no earlier rule edited. */
/* 1. Dental and salon, proof at 860px and under: .np-browser-wrap is a grid at every width (line 387), so order applies; copy sits before the screenshot, as on med spa and chiropractic. */
@media(max-width:860px){:where(.pg-dental,.pg-salon) .np-browser-wrap .np-prose{order:-1}}
/* 3. Hero art under 960px: taller band (260 to 340px), centred at 599px and below. Overrides the earlier max-width:959px hero-art block by source order (DaVinci's block, verbatim). */
@media(max-width:959px){
  .np-hero.has-art{--art-band:clamp(260px,42vw,340px);padding-bottom:calc(clamp(56px,8vw,112px) + var(--art-band))}
  .np-hero.has-art .np-wrap{padding-right:clamp(18px,4vw,44px)}
  .np-hero-art{right:8%;height:var(--art-band);max-height:none}
}
@media(max-width:599px){
  .np-hero-art{right:auto;left:50%;transform:translateX(-50%)}
}

/* Closing band with the audit form, 2026-10-13 (TSK-2026-0566, Jammy ruling) */
/* Opt-in: add .has-form to a .np-cta section. Copy column left (eyebrow, H2, lede), form column right (form line, .audit-form, .success, secondary booking link). One column at 860px and under. No animation. Existing .audit-form, .send, .book, .consent, .form-error, .success rules are reused; everything below is a dark override scoped to .np-cta.has-form. The pricing link is not in this band (it lives in the page body). */
.np-cta.has-form{text-align:left}
.np-cta.has-form .np-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(32px,6vw,88px);row-gap:clamp(28px,5vw,40px);align-items:start}
.np-cta.has-form .np-head{margin:0;max-width:none}
.np-cta.has-form .np-eyebrow{justify-content:flex-start}
.np-cta.has-form .np-lede{margin-left:0;margin-right:0}
.np-cta.has-form .np-cta-form{min-width:0}
.np-cta.has-form .np-cta-line{font-size:15px;line-height:1.55;color:rgba(251,243,236,.88);max-width:42ch}
.np-cta.has-form .audit-form{max-width:none;margin-top:18px;gap:18px}
.np-cta.has-form .audit-form label{color:var(--goldpale)}
.np-cta.has-form .audit-form input[type="text"]:not(.hp),.np-cta.has-form .audit-form input[type="email"]{color:#FBF3EC;background:rgba(251,243,236,.09);border:1px solid rgba(234,217,160,.6)}
.np-cta.has-form .audit-form input:focus{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--goldpale);background:rgba(251,243,236,.14)}
.np-cta.has-form .audit-form input:-webkit-autofill{-webkit-text-fill-color:#FBF3EC;caret-color:#FBF3EC;box-shadow:0 0 0 1000px #1B392B inset}
.np-cta.has-form .consent{color:rgba(251,243,236,.82)}
.np-cta.has-form .consent a{color:var(--goldpale);border-bottom-color:rgba(234,217,160,.45)}
.np-cta.has-form .consent a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.np-cta.has-form .consent a:focus-visible{outline-color:var(--goldpale)}
.np-cta.has-form .send{width:100%}
.np-cta.has-form .send:focus-visible,.np-cta.has-form .book:focus-visible{outline:3px solid var(--goldpale);outline-offset:3px}
.np-cta.has-form .form-error{color:#FFC4B8;border-left:3px solid #E58A7A;padding-left:12px;max-width:none}
.np-cta.has-form .success{margin-top:0;max-width:none}
.np-cta.has-form .success h2{color:#F6F1E3}
.np-cta.has-form .success p{color:rgba(251,243,236,.86)}
.np-cta.has-form .np-cta-alt{margin-top:22px;font-size:15px;line-height:1.5}
.np-cta.has-form .np-cta-alt a.np-link{color:var(--goldpale);border-bottom:1px solid rgba(234,217,160,.55);padding-bottom:2px}
.np-cta.has-form .np-cta-alt a.np-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* The audit script hides the form with the hidden attribute after a good send, but .audit-form sets display:flex, which beats the browser's [hidden] rule, so the form stayed on screen beside the success block. This restores hidden. Also true of the live deploy/free-website-audit page, which carries the same .audit-form rule (not touched here). */
.audit-form[hidden]{display:none}
/* After a good send the form is hidden and the success block (with its own booking pill) shows, so the form line and the secondary link step aside. */
.np-cta.has-form .np-cta-form:has(.success:not([hidden])) .np-cta-line,.np-cta.has-form .np-cta-form:has(.success:not([hidden])) .np-cta-alt{display:none}
@media(max-width:860px){
  .np-cta.has-form .np-wrap{grid-template-columns:minmax(0,1fr)}
  .np-cta.has-form .np-lede{max-width:56ch}
}
@media(prefers-reduced-motion:reduce){.np-cta.has-form .send,.np-cta.has-form .audit-form input{transition:none}}
/* Pricing label spacing, 2026-10-13 (DaVinci rescore 2, fix 1) */
/* The base rule .np-price-amt sets line-height:1, but .np p{line-height:1.68} is more specific, so the 88px figure sat in a 148px line box and the label floated about 54px above the cap line. At 861px and up the figure takes the line-height the base rule meant (1); the 12px label margin is unchanged. Gap lands near 25px, like the cost post bigfig. Mobile is untouched. */
@media(min-width:861px){.pg-pricing .np-price-amt{line-height:1}}

/* Optional website field, preview 2026-10-13 (TSK-2026-0566, pending Jammy). Used by the helper line under the website field in the audit form. On the dark band it matches the consent line colour (10.8:1 measured on --deep). Currently carried by web-design-for-therapists only. */
.audit-form .field-help{margin-top:8px;font-size:13px;line-height:1.55;color:#4A4231;max-width:42ch}
.np-cta.has-form .audit-form .field-help{color:rgba(251,243,236,.82)}

/* ===== Pricing page, audit-v6 design language, 2026-10-15 (TSK-2026-0644, DaVinci) =====
   Everything below is scoped with :where(.pg-pricing), so it adds no specificity and changes no other staged page (only pricing/index.html carries that body class).
   Ported from the live free-website-audit page (TSK-2026-0655): the bamboo CTA pill (leaf glyph, sheen, culm hover), the bamboo motif texture on every section, a hero that fills the fold, a card with a clipped leaf pair. The audit's "Five checks, one culm" animation is NOT used; the hero carries its own pricing culm. The motif system itself lives in /assets/motif/bamboo-motif.css (linked from the page, not repeated here). */
:where(.pg-pricing){--motif-content:1080px}

/* 1. Bamboo CTA pill. The leaf glyph and the sheen are drawn with CSS (mask and a background layer) rather than inner spans, because the shared audit script rewrites the submit button with textContent and would delete inner markup. The pill's R7-A stalk is the sibling .stalk svg, as on the homepage. */
:where(.pg-pricing) .pillwrap.fill{--glf:#35402C;--ringf:#8A6408;--blade2f:#4A6B3F}
:where(.pg-pricing) .pillwrap.on-dark{--glf:#5F8A4C;--glhi:rgba(255,255,255,.25);--ringf:#DFB13B;--blade2f:#9CBF85}
:where(.pg-pricing) .pillwrap.ctx-ghost{--stalkh:89.1px;--stalkright:30px;--glift:-59.5px;--gcrown:.99;--gslide:6px}
:where(.pg-pricing) .pillwrap.ctx-sm{--stalkh:83.7px;--stalkright:26.7px;--glift:-57.7px;--gcrown:.78;--gslide:7.2px}
:where(.pg-pricing) .pillwrap.ctx-smhero{--stalkh:89.1px;--stalkright:31.5px;--glift:-60.2px;--gcrown:.83;--gslide:7.2px}
:where(.pg-pricing) .pillwrap.ctx-form{--stalkh:93.7px;--stalkright:24.5px;--glift:-60.45px;--gcrown:.87;--gslide:7.2px;display:flex;width:100%;margin-top:14px}
:where(.pg-pricing) .cta,:where(.pg-pricing) .cta-ghost{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);text-transform:uppercase;font-weight:600;text-align:left;border-radius:999px;cursor:pointer;text-decoration:none}
:where(.pg-pricing) .cta::after,:where(.pg-pricing) .cta-ghost::after{content:"";flex:none;width:15px;height:10.5px;background:var(--glf);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M2 12.2 C 4.5 6 10 2 18.8 1.4 C 16.4 8 10.4 12 3.6 13 C 2.6 13 2.1 12.7 2 12.2 Z'/%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 20 14'%3E%3Cpath d='M2 12.2 C 4.5 6 10 2 18.8 1.4 C 16.4 8 10.4 12 3.6 13 C 2.6 13 2.1 12.7 2 12.2 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin:10% 87%;
  transition:translate .48s cubic-bezier(.2,.7,.2,1) .17s,rotate .34s cubic-bezier(.34,1.56,.64,1) .33s,scale .34s cubic-bezier(.34,1.56,.64,1) .33s}
:where(.pg-pricing) .pillwrap.fill .cta::after{width:18px;height:12.6px}
:where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)::after{transition-delay:.17s,.33s,.33s;translate:var(--gslide) var(--glift);rotate:-40deg;scale:var(--gcrown)}
:where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk{clip-path:inset(0 0 0 0)}
:where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk .bladeL,:where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk .blade2{transform:scale(1) rotate(0deg)}
:where(.pg-pricing) .pillwrap .stalk{z-index:2}
/* gold fill pill (the homepage .cta.sm), with the leaf-cut sheen as a second background layer so it is clipped by the pill's own curve */
:where(.pg-pricing) .cta.sm{font-size:12.5px;line-height:1.25;letter-spacing:.2em;padding:17px 38px;min-height:54px;color:var(--ink);border:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 96 82'%3E%3Cg transform='rotate(-12 48 29)'%3E%3Cpath d='M4 46 Q 26 8 92 4 Q 58 40 16 52 Q 8 50 4 46 Z' fill='rgba(53,64,44,.16)'/%3E%3C/g%3E%3C/svg%3E") right 4px center/96px 82px no-repeat,linear-gradient(140deg,var(--goldpale),var(--gold) 58%,#CE9F2B);
  box-shadow:0 16px 42px -10px rgba(223,177,59,.55);transition:box-shadow .35s}
:where(.pg-pricing) .cta.sm:hover{box-shadow:0 20px 52px -8px rgba(223,177,59,.78)}
:where(.pg-pricing) .pillwrap.ctx-smhero .cta.sm{font-size:13px;padding:18px 44px 18px 40px}
:where(.pg-pricing) .cta.sm:disabled{opacity:.6;cursor:wait}
:where(.pg-pricing) .cta.sm:focus-visible,:where(.pg-pricing) .cta-ghost:focus-visible{outline:3px solid var(--goldpale);outline-offset:3px}
/* ghost pill */
:where(.pg-pricing) .cta-ghost{font-size:12px;letter-spacing:.2em;padding:15px 34px;border:1px solid rgba(155,190,140,.6);color:var(--paper);transition:border-color .3s,color .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 96 82'%3E%3Cg transform='rotate(-12 48 29)'%3E%3Cpath d='M4 46 Q 26 8 92 4 Q 58 40 16 52 Q 8 50 4 46 Z' fill='rgba(252,250,244,.10)'/%3E%3C/g%3E%3C/svg%3E") right 4px center/96px 82px no-repeat}
:where(.pg-pricing) .cta-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* form submit: full width, same pill */
:where(.pg-pricing) .pillwrap.ctx-form .cta.sm.send{width:100%;justify-content:flex-start;padding:0 36px 0 28px;min-height:56px;margin:0}
:where(.pg-pricing) .pillwrap.ctx-form .cta.sm.send::after{margin-left:auto}
:where(.pg-pricing) .pillwrap.ctx-form .cta.sm.send:disabled::after{translate:none;rotate:none;scale:none}
:where(.pg-pricing) .pr-plans>.np-card>.pillwrap{margin-top:auto;align-self:flex-start}
@media(max-width:560px){:where(.pg-pricing) .pr-plans>.np-card>.pillwrap{align-self:stretch}:where(.pg-pricing) .pr-plans>.np-card>.pillwrap>a{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){
  :where(.pg-pricing) .cta::after,:where(.pg-pricing) .cta-ghost::after{transition:none}
  :where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)::after{translate:none;rotate:none;scale:none}
  :where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk{clip-path:inset(100% 0 0 0)}
  :where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk .bladeL{transform:scale(0) rotate(-16deg)}
  :where(.pg-pricing) .pillwrap :is(a,button):is(:hover,:focus-visible)~.stalk .blade2{transform:scale(0) rotate(16deg)}
}

/* 2. Hero: fills the first viewport on its own, copy left, the pricing culm right. Replaces the one-stalk glass art on this page only. */
:where(.pg-pricing) .np-hero.pr-hero{position:relative;overflow:clip;isolation:isolate;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--navh-min) + clamp(20px,4.5vh,52px)) 0 clamp(32px,6vh,72px)}
:where(.pg-pricing) .pr-hero .np-wrap{width:100%}
:where(.pg-pricing) .pr-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,72px);align-items:center}
:where(.pg-pricing) .pr-hero h1{font-size:clamp(34px,min(4.8vw,6.6vh),66px)}
:where(.pg-pricing) .pr-hero .np-lede{font-size:clamp(15px,min(1.3vw,2.1vh),19px);max-width:52ch}
:where(.pg-pricing) .pr-hero .np-actions{margin-top:clamp(22px,4vh,34px);gap:16px 18px}
@media(min-width:1600px){:where(.pg-pricing) .pr-hero .np-wrap{max-width:calc(1240px + 2*clamp(18px,4vw,44px))}}
@media(min-width:1900px){:where(.pg-pricing) .pr-hero .np-wrap{max-width:calc(1360px + 2*clamp(18px,4vw,44px))}}
@media(max-width:860px){:where(.pg-pricing) .pr-hero-grid{grid-template-columns:minmax(0,1fr)}:where(.pg-pricing) .np-hero.pr-hero{align-items:flex-start}}

/* the pricing culm: one stalk grows, and each node is where a plan stops. Counted and Reported are Analytics; Approved is where Social starts. */
:where(.pg-pricing) .pr-culm{--ch:clamp(300px,50svh,480px);display:grid;grid-template-columns:calc(var(--ch)*140/520) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:start;margin:0;justify-self:center;width:100%;max-width:520px}
:where(.pg-pricing) .pr-culm-stalk{height:var(--ch);width:100%}
:where(.pg-pricing) .pr-culm-grow{height:100%}
:where(.pg-pricing) .pr-culm-svg{width:100%;height:100%;overflow:visible}
:where(.pg-pricing) .pr-culm .cm rect{fill:#5F8A4C}
:where(.pg-pricing) .pr-culm .hi rect{fill:#fff;opacity:.16}
:where(.pg-pricing) .pr-culm .rg rect{fill:#DFB13B}
:where(.pg-pricing) .pr-culm .lf{fill:#7FA36B}
:where(.pg-pricing) .pr-culm .lf.nc{fill:#9CBF85}
:where(.pg-pricing) .pr-culm-steps{list-style:none;position:relative;height:var(--ch);margin:0;padding:0}
:where(.pg-pricing) .pr-culm-steps li{position:absolute;left:0;right:0;transform:translateY(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
:where(.pg-pricing) .pr-culm-steps li::before{content:"";position:absolute;left:calc(-1*clamp(14px,2vw,28px) - 6px);top:50%;width:clamp(14px,2vw,28px);height:1px;background:linear-gradient(90deg,rgba(223,177,59,.9),rgba(223,177,59,.15))}
:where(.pg-pricing) .pr-culm-steps li.s1{top:74.2%}
:where(.pg-pricing) .pr-culm-steps li.s2{top:49.2%}
:where(.pg-pricing) .pr-culm-steps li.s3{top:24.2%}
:where(.pg-pricing) .pr-k{font-family:var(--serif);font-weight:390;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:#F6F1E3;letter-spacing:-.01em}
:where(.pg-pricing) .pr-tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--goldpale);border:1px solid rgba(234,217,160,.5);border-radius:999px;padding:3px 10px;white-space:nowrap}
:where(.pg-pricing) .pr-t{flex-basis:100%;font-size:clamp(14px,1.15vw,16px);line-height:1.45;color:rgba(251,243,236,.84);max-width:30ch}
@media(max-width:860px){:where(.pg-pricing) .pr-culm{--ch:380px;max-width:440px;justify-self:start;margin-top:clamp(8px,3vw,24px)}}
/* motion: 3.2s, played once when the figure enters the screen, paused when it leaves, static end state without JS or under reduced motion */
@keyframes pr-grow{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-8% -40% 0 -40%)}}
@keyframes pr-leaf{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes pr-step{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  :where(.pr-js) .pr-culm .pr-culm-grow{animation:pr-grow 3.2s cubic-bezier(.4,0,.2,1) both paused}
  :where(.pr-js) .pr-culm .lf{transform-box:fill-box;transform-origin:0 80%;animation:pr-leaf .55s cubic-bezier(.34,1.56,.64,1) both paused}
  :where(.pr-js) .pr-culm .lf.n1{animation-delay:.9s}
  :where(.pr-js) .pr-culm .lf.n2{animation-delay:1.2s}
  :where(.pr-js) .pr-culm .lf.n3{animation-delay:1.65s}
  :where(.pr-js) .pr-culm .lf.nc{animation-delay:2.15s}
  :where(.pr-js) .pr-culm .pr-culm-steps li{animation:pr-step .6s cubic-bezier(.2,.7,.2,1) both paused}
  :where(.pr-js) .pr-culm .pr-culm-steps li.s1{animation-delay:.85s}
  :where(.pr-js) .pr-culm .pr-culm-steps li.s2{animation-delay:1.15s}
  :where(.pr-js) .pr-culm .pr-culm-steps li.s3{animation-delay:1.6s}
  :where(.pr-js) .pr-culm.is-on :is(.pr-culm-grow,.lf,.pr-culm-steps li){animation-play-state:running}
}

/* 3. Texture: every section is a motif host. Hosts need their own stacking; the bands already set their backgrounds, the layer only adds the wash, grain and pieces. */
:where(.pg-pricing) .np-chapter.motif-host{position:relative}
:where(.pg-pricing) .np-hero .motif-layer--dark,:where(.pg-pricing) .np-chapter.dark .motif-layer--dark{--motif-opacity-min:.02;--motif-opacity-max:.045}
:where(.pg-pricing) .motif-layer--dark{--motif-grain:.04}

/* 4. Rounded cards, the audit's card language, on the cards the page already has */
:where(.pg-pricing) .np-grid.pr-plans{border-top:0;gap:clamp(16px,2vw,24px)}
:where(.pg-pricing) .np-grid.pr-plans>.np-card,:where(.pg-pricing) .np-grid.pr-plans>.np-card+.np-card{border:1px solid rgba(234,217,160,.24);border-radius:20px;background:rgba(251,243,236,.045);padding:clamp(24px,2.6vw,32px) clamp(20px,2.4vw,32px) clamp(24px,3vw,34px)}
:where(.pg-pricing) .np-grid.pr-plans>.np-card.pr-feature{border-color:rgba(223,177,59,.55);box-shadow:inset 0 2px 0 var(--gold),0 24px 60px -34px rgba(0,0,0,.6)}
:where(.pg-pricing) .np-timeline.three li{border-radius:18px;border-top-width:1px;border-top-color:rgba(28,25,19,.12);box-shadow:inset 0 3px 0 var(--gold);padding:24px 22px 26px}
:where(.pg-pricing) .np-timeline .np-when{color:var(--sealdeep)}
:where(.pg-pricing) ul.pr-rows{border-top:0;display:grid;gap:12px;max-width:820px}
:where(.pg-pricing) ul.pr-rows>li{border:1px solid rgba(53,64,44,.14);border-radius:14px;padding:16px 20px;background:rgba(252,250,244,.7)}
:where(.pg-pricing) .linen ul.pr-rows>li{background:rgba(252,250,244,.8)}
:where(.pg-pricing) .np-faq{border-top:0;display:grid;gap:10px}
:where(.pg-pricing) .np-faq details{border:1px solid rgba(53,64,44,.14);border-radius:14px;background:rgba(252,250,244,.78);padding:0 20px}
:where(.pg-pricing) .np-faq summary{padding:18px 0}
:where(.pg-pricing) .np-faq details p{padding-bottom:20px}
:where(.pg-pricing) .np-pull{max-width:30ch;margin-left:auto;margin-right:auto;text-align:center}

/* 5. Closing band: the form sits on a card with the clipped leaf pair, as the audit's form card does */
:where(.pg-pricing) .pr-formcard{position:relative;border:1px solid rgba(234,217,160,.28);border-radius:20px;padding:clamp(22px,3vw,34px);background:rgba(251,243,236,.05)}
:where(.pg-pricing) .pr-formcard>*:not(.motif-card){position:relative;z-index:1}
:where(.pg-pricing) .pr-formcard .audit-form{margin-top:16px}
:where(.pg-pricing) .pr-formcard .motif-card{--motif-opacity-min:.02;--motif-opacity-max:.045;--motif-ink:#E8E1CC;--motif-ink-leaf:#A9C49B;--motif-ink-gold:#E0B84A;position:absolute}

/* 6. One screen per section (the audit's rule): the section padding follows the viewport height, and the founding head and tier cards are compacted so the founding band fits 1440x900. */
:where(.pg-pricing) .np-chapter{padding:clamp(40px,7.5vh,96px) 0}
:where(.pg-pricing) .np-chapter .np-head{margin-bottom:clamp(22px,3.4vh,40px)}
@media(min-width:1000px){
  :where(.pg-pricing) #founding .np-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,72px);align-items:end}
  :where(.pg-pricing) #founding .np-head>.np-eyebrow{grid-column:1;grid-row:1}
  :where(.pg-pricing) #founding .np-head>h2{grid-column:1;grid-row:2}
  :where(.pg-pricing) #founding .np-head>.pr-counter{grid-column:2;grid-row:1;margin-top:0;align-self:end}
  :where(.pg-pricing) #founding .np-head>.np-body{grid-column:2;grid-row:2;margin-top:10px;align-self:start}
}
:where(.pg-pricing) .pr-plans .pr-list{margin-top:14px}
:where(.pg-pricing) .pr-plans .pr-list li{padding:8px 0 8px 20px;font-size:15px;line-height:1.5}
:where(.pg-pricing) .pr-plans .pr-scope,:where(.pg-pricing) .pr-plans .pr-prepay{margin:10px 0 16px!important}
:where(.pg-pricing) .pr-plans .np-plan-amt{margin-top:2px}
:where(.pg-pricing) .pr-plans .pr-year{margin-top:2px!important}
/* opaque inputs on the closing card, so a leaf behind a field never sits behind typed text */
:where(.pg-pricing) .np-cta.has-form .audit-form input[type="text"]:not(.hp),:where(.pg-pricing) .np-cta.has-form .audit-form input[type="email"]{background:#2C3A2E}
:where(.pg-pricing) .np-cta.has-form .audit-form input:focus{background:#344538}
/* The italic phrase in a light-section heading takes the audit page's darker gold (#8A6408, 4.6:1 or better on linen and paper); the shared #B8860B measures 2.8:1 there. Dark bands keep the bright gold. */
:where(.pg-pricing) .np-chapter:not(.dark) h2 em{color:var(--goldink)}
/* Phones: the long hero pill label stays on one line at 390 */
@media(max-width:480px){:where(.pg-pricing) .pillwrap .cta.sm{letter-spacing:.13em;padding:16px 26px 16px 24px;font-size:12px}:where(.pg-pricing) .pillwrap.ctx-smhero .cta.sm{padding:17px 26px 17px 24px;font-size:12px}:where(.pg-pricing) .pillwrap .cta-ghost{letter-spacing:.14em;padding:14px 22px}}

/* Pricing page, 2026-10-16 (TSK-2026-0644, DaVinci): the Regular rates and Terms sections are gone. The regular rates now sit in the tier area as a third full-width card, as on the homepage; the terms live in the FAQ; "Prices are in US dollars" is small print inside that card. */
:where(.pg-pricing) .np-grid.pr-plans>.np-card.pr-regular{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,32px);background:rgba(251,243,236,.03);border-style:dashed}
:where(.pg-pricing) .pr-regular .np-num{margin-bottom:4px}
:where(.pg-pricing) .pr-regular .np-plan-amt{font-size:clamp(30px,3vw,40px);margin-top:0}
:where(.pg-pricing) .pr-regular .pr-sub{font-size:14px!important}
:where(.pg-pricing) .pr-reg-body p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(251,243,236,.84)}
:where(.pg-pricing) .pr-reg-body p+p{margin-top:6px}
:where(.pg-pricing) .pr-reg-body p.pr-fine{font-size:12.5px;color:rgba(251,243,236,.72)}
@media(max-width:860px){:where(.pg-pricing) .np-grid.pr-plans>.np-card.pr-regular{grid-template-columns:minmax(0,1fr)}}
/* Founding band, one screen with the regular-rates card added: tighter band padding, smaller figures, closer list rows */
:where(.pg-pricing) #founding.np-chapter{padding:clamp(28px,4.2vh,56px) 0}
:where(.pg-pricing) #founding .np-head{margin-bottom:clamp(16px,2.4vh,26px)}
:where(.pg-pricing) #founding .np-head h2{font-size:clamp(28px,min(3.4vw,5.2vh),46px)}
:where(.pg-pricing) .np-grid.pr-plans>.np-card:not(.pr-regular){padding-top:clamp(18px,2.2vw,26px);padding-bottom:clamp(18px,2.4vw,26px)}
:where(.pg-pricing) .np-grid.pr-plans>.np-card:not(.pr-regular) .np-plan-amt{font-size:clamp(32px,min(3.2vw,5vh),42px)}
:where(.pg-pricing) .np-grid.pr-plans>.np-card:not(.pr-regular) .np-num{margin-bottom:6px}
:where(.pg-pricing) .pr-plans .pr-list{margin-top:10px}
:where(.pg-pricing) .pr-plans .pr-list li{padding:6px 0 6px 20px;font-size:14.5px;line-height:1.45}
:where(.pg-pricing) .pr-plans .pr-scope,:where(.pg-pricing) .pr-plans .pr-prepay{margin:8px 0 12px!important;font-size:14px!important;line-height:1.5}
:where(.pg-pricing) .pr-plans .pr-year{font-size:18px!important}
@media(min-width:861px){:where(.pg-pricing) .np-grid.pr-plans{gap:clamp(12px,1.6vw,20px)}}