@charset "utf-8";
/* StudioControl site components, built on selective.css tokens.
   Shared by every page on studiocontrol.io. Never hardcode a hex value here. */

main{counter-reset:sec}
.prose{max-width:33rem;color:var(--ink-2);font-size:1.0625rem;display:grid;gap:1rem}
.prose strong{color:var(--ink);font-weight:600}

/* top bar */
.top{padding-block:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{font-family:var(--f-display);font-weight:900;letter-spacing:-0.04em;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.top .mono{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1rem 1.9rem;border-radius:var(--pill);border:1.5px solid transparent;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--accent-bright);color:var(--ink);box-shadow:var(--shadow-card)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ground)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* hero */
.hero{padding-block:3rem 1rem;display:grid;gap:1.6rem}
.hero h1{font-size:clamp(2.7rem,8.6vw,5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;max-width:16ch}
.hero .lede{max-width:33rem;font-size:1.125rem;color:var(--ink-2)}

.video{margin-top:2.5rem;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.video .frame{position:relative;aspect-ratio:16/9}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:.8rem 1rem;border-top:1px solid var(--rule-2)}

/* big statement */
.statement{font-family:var(--f-display);font-size:clamp(1.75rem,5.2vw,2.7rem);font-weight:800;line-height:1;letter-spacing:-0.042em;max-width:20ch;margin-bottom:1.4rem}

/* three parts */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1.8rem}
.part{background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-md);padding:1.3rem;display:grid;gap:.5rem;align-content:start}
.part .mono{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.part h3{font-size:1.35rem;letter-spacing:-0.035em}
.part p{color:var(--ink-2);font-size:.98rem}

/* places */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}
.place{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:.5rem}
.place h3{font-size:clamp(1.5rem,4vw,2rem);font-weight:900;letter-spacing:-0.045em}
.place p{color:var(--ink-2)}
.addon{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;background:var(--accent-soft);border-radius:var(--radius-md);padding:1rem 1.2rem}
.addon .mono{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;align-items:stretch}
.tier{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:1.6rem;display:grid;gap:1.1rem;align-content:start;position:relative}
.tier.lead{border:1.5px solid var(--ink);box-shadow:var(--shadow-card)}
.tier .name{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.tier .price{font-family:var(--f-display);font-size:clamp(2.6rem,9vw,3.4rem);font-weight:900;letter-spacing:-0.055em;line-height:.9}
.tier .for{color:var(--ink-2)}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;border-top:1px solid var(--rule-2);padding-top:1rem}
.tier li{display:grid;grid-template-columns:1.1rem 1fr;gap:.5rem;font-size:.98rem}
.tier li::before{content:"\0000B7";font-family:var(--f-display);font-weight:900;color:var(--accent);font-size:1.4rem;line-height:1}
.tier .btn{width:100%;margin-top:auto}
.note{font-family:var(--font-script);font-size:1.3rem;color:var(--accent);position:absolute;top:-1.05rem;right:1.2rem;transform:rotate(-3deg);background:var(--ground);padding:0 .4rem;line-height:1.3}

/* assistants */
.aside{background:var(--ink);color:var(--ground);border-radius:var(--radius-lg);padding:clamp(1.6rem,5vw,2.6rem);display:grid;gap:1rem}
.aside .eyebrow{color:var(--accent-bright)}
.aside h3{font-size:clamp(1.6rem,4.6vw,2.3rem);font-weight:900;letter-spacing:-0.045em;max-width:20ch}
.aside p{max-width:33rem;color:var(--color-line)}
.aside .btn-ghost{color:var(--ground);border-color:var(--ground);justify-self:start}
.aside .btn-ghost:hover{background:var(--ground);color:var(--ink)}

/* who */
.who{display:grid;gap:1.4rem}
.brands{display:flex;flex-wrap:wrap;gap:.5rem}
.brands span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--pill);padding:.45rem .9rem;background:var(--surface)}
.fine{font-size:.85rem;color:var(--ink-2);max-width:33rem}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding-block:1.1rem;font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.03em;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-weight:400;color:var(--ink-2)}
.faq details[open] summary::after{content:"\002212"}
.faq details p{padding-bottom:1.2rem;max-width:33rem;color:var(--ink-2)}

/* close */
.close{padding-block:4rem 3rem;display:grid;gap:1.4rem;justify-items:start}
.close h2{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:900;letter-spacing:-0.045em;max-width:16ch}
footer{padding-block:2rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
footer a{color:inherit}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}