/* STOICBLADE RESET landing: motion + real-screenshot layer (loaded after styles.css).
   Content is visible without JavaScript; motion is removed under prefers-reduced-motion. */
.landing{--ease:cubic-bezier(.2,.7,.2,1)}
.landing :focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
.landing .blade{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}
.band{background:#101311;border-top:1px solid #272d27;border-bottom:1px solid #272d27}
.landing .tiny{font-size:12px;color:#a3aaa1}
.landing .feature p,.landing .hero p{font-size:15px}
.landing .feature p{font-size:14px}
.landing .topnav .links{font-size:13px}
.landing .proof-row span{font-size:11px;color:#a3aaa1}
.price span{font-size:12px;color:#a3aaa1;font-weight:600}
.offer-side{min-width:215px;display:grid;gap:10px}
.offer-side .btn{width:100%}

/* real screenshots */
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto;border:1px solid #4a4638;background:#111110;box-shadow:0 30px 80px #000a}
.shot figcaption{margin-top:12px;font-size:12px;line-height:1.5;color:#a3aaa1;text-align:center}
.shot-phone{width:min(300px,78vw);justify-self:center}
.shot-phone img{border-radius:26px;border-width:6px;border-color:#2a2823}
.shot-wide img{border-radius:12px}
.hero .shot-phone::before{content:"";position:absolute;inset:8% -14%;background:radial-gradient(circle,#b7a06830 0%,transparent 65%);filter:blur(34px);pointer-events:none;z-index:-1}
.hero{position:relative;z-index:0}
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
@media(min-width:900px){.shots{grid-template-columns:minmax(0,1fr) 280px;gap:48px}.shots .shot-phone{width:280px}}

/* buttons: micro-interactions */
.landing .btn{transition:transform 160ms var(--ease),background 160ms var(--ease),border-color 160ms var(--ease),box-shadow 200ms var(--ease)}
.landing .btn:active{transform:translateY(0) scale(.98)}
.btn-go span{display:inline-block;transition:transform 200ms var(--ease)}
@media(hover:hover){
  .landing .btn:hover{box-shadow:0 8px 24px #0006}
  .btn-go:hover span{transform:translateX(4px)}
  .landing .btn.ghost:hover{border-color:var(--gold)}
  .feature{transition:transform 220ms var(--ease),border-color 220ms var(--ease),background 220ms var(--ease)}
  .feature:hover{transform:translateY(-4px);border-color:#6b5d3e;background:#181c1a}
  .feature .num{transition:letter-spacing 220ms var(--ease)}
  .feature:hover .num{letter-spacing:.18em}
  .topnav .links a:not(.btn){transition:color 160ms var(--ease)}
}

/* hero: short load-in, CSS only */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.load{animation:rise 340ms var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}

/* scroll reveal: hidden only when JS has confirmed it can reveal */
html.js .reveal{opacity:0;transform:translateY(16px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity 340ms var(--ease),transform 340ms var(--ease);transition-delay:calc(var(--i,0)*80ms)}

@media(max-width:900px){.hero-copy{text-align:center}.hero .shot-phone{margin-top:26px}}
@media(prefers-reduced-motion:reduce){
  .load{animation:none}
  html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none}
  .landing *,.landing *::before{transition:none!important;scroll-behavior:auto!important}
}
.hero .pill{display:inline-flex}
.hero .tiny{margin-bottom:16px}

/* ===== v1.0 commercial sections ===== */
.center{text-align:center}
.section-title h2{text-wrap:balance}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px}
.benefit{border-top:1px solid #5d523b;padding-top:16px}
.benefit h3{font-size:16px;margin:0 0 6px;color:var(--cream)}
.benefit p{font-size:14px;line-height:1.6;color:#a3aaa1;margin:0}
.dayslist{list-style:none;margin:0 auto 18px;padding:0;max-width:880px;columns:2;column-gap:40px}
.dayslist li{break-inside:avoid;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid #2b302b;font-size:15px;color:var(--cream)}
.dayslist li>span{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.08em;width:22px}
.dayslist em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a3aaa1;margin-left:auto}
.dayslist .free{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.pb{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.pb-copy h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.2;margin:14px 0}
.pb-copy p{color:#a3aaa4;line-height:1.75;font-size:15px;margin:0 0 12px}
.pb-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shot-page img{border-radius:4px;border-color:#3a372f}
@media(min-width:900px){.pb{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}.pb>.tiny{grid-column:2}}
.inc{list-style:none;margin:14px 0 0;padding:0;max-width:620px}
.inc li{position:relative;padding:10px 0 10px 26px;border-top:1px solid #33372f;color:#b9bfb6;line-height:1.65;font-size:14.5px}
.inc li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:5px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.inc strong{color:var(--cream)}
.offer{align-items:flex-start}
.price span{display:block;margin-top:4px;letter-spacing:.02em}
.btn-buy[aria-disabled="true"]{background:#2a2d28;color:#c3c9c1;border-color:#41453e;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.faqlist{max-width:760px;margin:0 auto}
.faqlist details{border-bottom:1px solid #2b302b}
.faqlist details:first-child{border-top:1px solid #2b302b}
.faqlist summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;padding:12px 0;font-weight:700;font-size:15.5px;color:var(--cream)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform 160ms var(--ease);flex-shrink:0;margin-right:4px}
.faqlist details[open]>summary::after{transform:rotate(-135deg)}
.faqlist details[open]>p{animation:rise 200ms var(--ease) both}
.faqlist p{margin:0 0 16px;color:#b3bbb1;line-height:1.7;font-size:15px;max-width:64ch}
@media(hover:hover){.faqlist summary:hover{color:var(--gold2)}.dayslist .free:hover{color:var(--cream)}}
@media(max-width:900px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-side{width:100%}}
@media(max-width:570px){.benefits{grid-template-columns:1fr;margin-top:40px}.dayslist{columns:1}.pb-pages{gap:8px}}
@media(prefers-reduced-motion:reduce){.faqlist details[open]>p{animation:none}}
