/* Pretty Brand Guide layer for the Scrollcraft pages (Home first, then DIY Plans).
   Loads after ka.css and only restyles: colors, fonts, lines and corners. Every Scrollcraft
   device (pinned acts, parallax, the week rail, the drawer, count-up, drift) keeps its markup
   and motion. Values come from brand/project/tokens.json (paper theme). */
:root{
  --magenta:#c837ae; --magenta-deep:#b02c98; --magenta-night:#e06bcb;
  --ink:#231f20; --ink-soft:#414141; --ink-mute:#625c5d;
  --paper:#fff; --paper-gray:#ececec; --tint-pink:#f7e4f4; --hairline:#d9d2d6;
  --sc-canvas:var(--paper); --sc-surface:var(--paper-gray);
  --sc-ink:var(--ink); --sc-ink-soft:var(--ink-mute);
  --sc-accent:var(--magenta); --sc-accent-ink:#fff;
  --gold:var(--magenta); --gold-lt:var(--magenta); --gold-dk:var(--magenta-deep); --brown:var(--ink-soft);
  --line:var(--hairline);
  --sc-shadow-color:320 20% 20%;
  --sc-font-display:"Cinzel",Georgia,serif;
  --sc-font-text:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",Helvetica,Arial,sans-serif;
  --smallcaps:"Cormorant SC",Georgia,serif;
  --sc-t-base:clamp(1.12rem,1.04rem + .32vw,1.3rem);
}
body{font-weight:500;letter-spacing:0;line-height:1.5}
::selection{background:var(--magenta);color:#fff}
.grain{display:none}
h1,h2,h3{font-family:var(--sc-font-display);letter-spacing:.01em}
h1,.h2,.drawer .card.intro h2,.phases .title{text-transform:uppercase;font-weight:400}
h1{font-weight:700}
h3{font-weight:700}
em{color:var(--magenta)}

/* labels: spaced Montserrat caps */
.eyebrow,.tag,.phase .when,.rep .wk,.proof .stat small,.offer .k{font-family:var(--sans);font-weight:700;font-size:.66rem;letter-spacing:.38em;color:var(--magenta-deep)}

/* menu: white bar, the brand's caps */
.topnav,.topnav.scrolled{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.brand span{font-family:var(--sc-font-display);font-weight:700;letter-spacing:.22em;color:var(--ink)}
.tabs a{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tabs a:hover{color:var(--magenta-deep)}
.tabs a[aria-current="page"]{color:var(--magenta-deep)}
.tabs a::after{height:3px;background:var(--magenta)}
.tabs a:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:680px){.tabs a{font-size:.62rem;letter-spacing:.06em}}

/* buttons: square magenta */
.btn{background:var(--magenta);border:2.5px solid var(--magenta);color:#fff;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;border-radius:0}
.btn:hover{background:var(--magenta-deep);border-color:var(--magenta-deep);box-shadow:0 14px 30px -14px rgba(200,55,174,.6)}
.btn-ghost{background:transparent;color:var(--magenta-deep);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-ghost:hover{background:var(--tint-pink);color:var(--magenta-deep)}
.btn-sm{font-size:.66rem;padding:13px 24px}

/* hero: stays a dark photo scene (like the guide covers), now framed in magenta */
.hero .scene{background:#1b1416}
.hero .scene::after{content:"";position:absolute;inset:calc(var(--nav-h) + 14px) 14px 14px;border:3px solid var(--magenta);z-index:2;pointer-events:none}
.hero .plate::after{background:radial-gradient(70% 60% at 62% 38%,rgba(200,55,174,.2),transparent 60%),linear-gradient(180deg,rgba(27,20,22,.5),rgba(27,20,22,.3) 40%,rgba(27,20,22,.9))}
.hero .bigword{font-family:var(--sc-font-display);font-weight:400;letter-spacing:.01em;top:calc(var(--nav-h) + 50px);left:calc(var(--sc-gutter) + 14px);font-size:clamp(3.4rem,7vw,7.6rem)}
.hero .bigword .o{-webkit-text-stroke:1.5px var(--magenta-night)}
.hero .bigword .f{color:var(--magenta)}
.hero .mist{background:linear-gradient(180deg,transparent,rgba(27,20,22,.88) 70%,#1b1416)}
.hero .copy,.hero h1{color:#fff}
.hero .copy .eyebrow{color:var(--magenta-night)}
.hero .deck{font-family:var(--sc-font-text);font-style:italic;font-weight:600;color:var(--magenta-night)}
.hero .standfirst{color:rgba(255,255,255,.82)}
.hero h1{font-size:clamp(2.3rem,1.6rem + 3vw,4.2rem);line-height:1.05}
@media (max-width:820px){.hero .scene::after{inset:calc(var(--nav-h) + 8px) 8px 8px}.hero .bigword{top:calc(var(--nav-h) + 44px);left:calc(var(--sc-gutter) + 10px)}.hero h1{font-size:clamp(1.8rem,7vw,2.4rem)}}

/* section titles get the magenta rule */
.h2{color:var(--ink)}
.h2::after{content:"";display:block;width:84px;height:4px;background:var(--magenta);margin-top:16px}
.vsl .intro .h2::after,.pledge .h2::after,.close .h2::after{margin-inline:auto}
.close .h2::after{margin-left:0}

/* video */
.vsl .frame{border:3px solid var(--magenta);box-shadow:16px 16px 0 -3px var(--tint-pink)}
.snap{border-color:#fff;box-shadow:0 12px 30px rgba(40,20,30,.18)}

/* proof */
.proof .stat{font-family:var(--sc-font-text);font-style:italic;font-weight:700;color:var(--magenta)}
.proof figure{border:0;box-shadow:0 14px 34px rgba(40,20,30,.2)}
.proof figcaption{font-family:var(--sans);font-weight:600;letter-spacing:.12em;color:#fff;background:linear-gradient(180deg,transparent,rgba(27,20,22,.85))}
@media (max-width:820px){.proof figcaption{color:var(--ink-mute);background:none}}

/* story */
.story .photo{border:0;box-shadow:16px 16px 0 -3px var(--magenta)}
.story .sig{font-family:var(--sc-font-text);font-weight:600;color:var(--magenta-deep)}

/* blueprint: square nodes on a magenta line, square corners */
.rep{border-radius:0;border:3px solid var(--magenta);background:#1b1416}
.rep::after{background:linear-gradient(180deg,transparent 60%,rgba(27,20,22,.75))}
.rep .wk{color:#fff}
.rail::before{width:3px;margin-left:-1px;background:var(--hairline)}
.rail .fill{width:3px;margin-left:-1.5px;background:var(--magenta)}
.rail i{width:11px;height:11px;border-radius:0;background:var(--paper);border:2px solid var(--magenta)}
.rail i.on{background:var(--magenta);border-color:var(--magenta);transform:scale(1.15)}
.rail i b{font-family:var(--sans);font-weight:700;color:var(--ink-mute)}
.rail i.on b{color:var(--magenta-deep)}
.phase .n{font-family:var(--smallcaps);color:var(--magenta)}
.phase p{color:var(--ink-soft)}
@media (max-width:900px){.blueprint .rep{border-radius:0}}

/* what you get: white cards with a magenta top edge */
.drawer .card{background:var(--paper);border:1px solid var(--hairline);border-top:4px solid var(--magenta)}
.drawer .card p{color:var(--ink-soft)}
.drawer .card .k{font-family:var(--smallcaps);color:var(--magenta)}
.drawer .card.media{border:0;box-shadow:0 14px 34px rgba(40,20,30,.18)}
.drawer .card.intro{border:0;background:none}

/* price + guarantee */
.fig{font-family:var(--sc-font-text);font-style:italic;font-weight:600;color:var(--magenta);letter-spacing:-.01em}
.compare{border-left:3px solid var(--magenta)}
.compare p,.lede{color:var(--ink-soft)}
.pledge .big{font-family:var(--sc-font-text);font-style:italic;font-weight:600;color:var(--ink-soft);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0}
hr.rule{background:var(--hairline)}

/* not for everyone: square nodes */
.notfor li{color:var(--ink-soft);border-bottom:1px solid var(--hairline)}
.notfor li::before{width:10px;height:10px;top:27px;rotate:0deg;background:var(--magenta)}
.notfor .photo{filter:none;opacity:1;box-shadow:16px 16px 0 -3px var(--magenta)}

/* close */
.close .h2{color:var(--magenta)}
.close .portrait{border-radius:0;border:3px solid var(--magenta)}
.close .spots{font-family:var(--sc-font-text);font-style:italic;font-weight:600;color:var(--magenta-deep)}
.close .alt{color:var(--ink-mute)}

/* extras: offer cards */
.extra{background:var(--paper);border:2.5px solid var(--magenta)}
.extra p{color:var(--ink-soft)}
.extra .eyebrow{font-family:var(--sc-font-text);font-style:italic;font-weight:600;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--magenta-deep)}

/* tablecloth + footer */
.cloth{height:96px;background:repeating-conic-gradient(var(--tint-pink) 0 25%,var(--paper) 0 50%) 0 0/96px 96px}
footer{background:var(--paper-gray);border-top:0;text-align:left}
footer .name{font-family:var(--sc-font-display);font-weight:700;font-size:.95rem;letter-spacing:.22em;color:var(--ink)}
footer p{color:var(--ink-mute);font-size:.85rem;margin:0}

/* ---------- DIY Plans pieces ---------- */
/* hero photo: square, magenta border, instead of the arch */
.hero .kira.kira-photo{border-radius:0;border:3px solid var(--magenta);box-shadow:0 20px 50px rgba(0,0,0,.35);object-position:50% 20%}
@media (max-width:820px){.hero .kira.kira-photo{border-radius:0;height:28vh;bottom:42vh}}

/* how it works: the photo follows the step in view */
.steps .viewer{border-radius:0;border:3px solid var(--magenta);box-shadow:16px 16px 0 -3px var(--tint-pink)}
.step .n{font-family:var(--smallcaps);color:var(--magenta)}
.step h3{font-weight:700}
.step p{color:var(--ink-soft)}
@media (max-width:820px){.steps .viewer{border-radius:0}}

/* what you get: white tilt cards with a magenta top edge */
.offers .offer{background:var(--paper);border:1px solid var(--hairline);border-top:4px solid var(--magenta)}
.offers .offer::before{background:radial-gradient(400px circle at calc(var(--sc-mx,.5) * 100%) calc(var(--sc-my,.5) * 100%),rgba(200,55,174,.08),transparent 45%)}
.offers .offer p{color:var(--ink-soft)}
.offers .offer .k{font-family:var(--smallcaps);font-weight:400;font-size:2.4rem;letter-spacing:0;line-height:1;color:var(--magenta)}
.offers .offer.photo{border:0;box-shadow:0 14px 34px rgba(40,20,30,.18)}

/* DIY vs 1:1 table: the brand's macro table */
.vs{font-family:var(--sans);font-size:.95rem}
.vs th,.vs td{border:1px solid var(--ink);padding:14px 12px}
.vs th:first-child,.vs td:first-child{padding-left:14px;color:var(--ink);font-family:var(--sc-font-text);font-weight:600;font-size:1.12rem}
.vs thead th{font-family:var(--sc-font-display);font-weight:700;font-size:1.05rem;color:var(--ink);background:var(--tint-pink);border-bottom-color:var(--ink)}
.vs thead th:first-child{background:var(--paper)}
.vs thead th.hl{color:var(--magenta-deep)}
.vs td{color:var(--ink-soft)}
.vs .yes{color:var(--magenta);font-size:1.15rem;font-weight:700}
.vs .no{color:var(--ink-mute)}
.vs tr.cost td{font-family:var(--sc-font-text);font-style:italic;font-weight:700;font-size:1.6rem;color:var(--magenta);border-bottom:1px solid var(--ink)}
@media (max-width:560px){.vs{font-size:.82rem}.vs th,.vs td{padding:10px 6px}.vs th:first-child,.vs td:first-child{font-size:1rem;padding-left:8px}}