/* Spoolscript's own colours, its mark and the landing page. Everything else comes from /style.css. */
/* The studio stylesheet is always dark, so the rose accent is the light one. */
body{--accent:#f084a0;--accent-soft:rgba(240,132,160,.14);--accent-ink:#2a0f19;--band-accent:#f084a0;--paper-accent:#8a2d55}
.brand .tape{fill:var(--accent)}
.foot-note a{color:inherit}

.sp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);gap:2rem 3rem;align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem)}
.sp-hero h1{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.2rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1rem}
.sp-hero .line{display:flex;align-items:center;gap:.6rem;color:var(--accent);font-weight:600;margin:0 0 1.25rem}
.sp-hero .line::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)}
.sp-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.5rem}
@media (max-width:760px){.sp-hero{grid-template-columns:1fr}}

.sample{margin:0;padding:.4rem 1.25rem;border-radius:1.2rem;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.sample figcaption{font-weight:600;padding:.8rem 0;border-bottom:1px solid var(--line)}
.sample ol{list-style:none;margin:0;padding:0}
.sample li{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.sample li:last-child{border-bottom:0}
.sample .who{justify-self:start;font-size:.8rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.sample .who.b{background:rgba(242,166,90,.14);color:#f2a65a}
.sample time{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sample p{grid-column:1 / -1;margin:0}

.sp-section{padding:clamp(1.5rem,4vw,2.5rem) 0;border-top:1px solid var(--line)}
.sp-section h2{margin-top:0}
.steps{padding-left:1.25rem}
.steps li{margin:.4rem 0}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;list-style:none;padding:0;margin:1.25rem 0}
.prices li{padding:1rem 1.2rem;border-radius:1rem;box-shadow:inset 0 0 0 1px var(--line)}
.prices strong{display:block;font-size:1.3rem}