/* /studio (custom builds). Layout on top of base.css + check.css (DESIGN.md). */
.st-hero{max-width:780px}
.st-hero h1{font-size:clamp(36px,5.6vw,56px);margin:0 0 16px}
.st-cta{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.st-sec{margin-top:96px}
.st-sec>h2{margin:0 0 8px}
.st-intro{max-width:60ch;color:var(--ink-subtle);margin:0 0 32px}
.st-intro a,.st-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.st-note{margin:16px 0 0;font-size:14px;color:var(--ink-subtle)}

/* work: one large feature + two smaller */
.st-work{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.w{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1)}
.w-main{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px;align-items:center}
.w img{display:block;width:100%;height:auto;border-radius:var(--r-ctl);border:1px solid var(--hairline)}
.w h3{margin-top:4px}
.w p{font-size:15.5px}
.w-stack{font:13px var(--mono);color:var(--ink-faint)!important}
.w-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--ink)}
.w-link::after{content:"→";color:var(--accent)}
.work-video{position:relative;border-radius:var(--r-ctl);overflow:hidden;border:1px solid var(--hairline);aspect-ratio:9/16;background:var(--surface-2)}
.work-video video{display:block;width:100%;height:100%;object-fit:cover}
.work-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:96px;min-height:48px;border:0;border-radius:var(--r-ctl);background:var(--accent);color:var(--on-accent);font:600 15px var(--body);cursor:pointer}
.work-video.playing .work-play{display:none}

/* AI console */
.ai{display:grid;gap:16px;max-width:820px}
.ai-form{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1)}
.ai-form textarea,.contact-form textarea{width:100%;min-height:120px;resize:vertical;padding:14px 16px;border:1px solid var(--hairline-strong);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--ink);font:15px/1.55 var(--body)}
.ai-form textarea:focus,.contact-form textarea:focus,.contact-form input:focus{outline:2px solid var(--accent);outline-offset:2px}
.ai-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-status,.cf-status{margin:0;min-height:22px;font-size:14px;color:var(--ink-subtle)}
.ai-out{padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1)}
.ai-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ai-file{font:13px var(--mono);color:var(--ink-faint)}
.ai-plan{padding:6px 10px;border-radius:var(--r-ctl);background:var(--accent-soft);color:var(--accent);font:600 13px var(--body)}
.ai-title{margin:12px 0 8px;font-size:22px}
.ai-sum{color:var(--ink-muted)}
.ticks{margin:12px 0;padding-left:20px}
.ticks li{margin:4px 0}
.ai-why{font-size:14px;color:var(--ink-subtle)}
.ai-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline)}
.ai-price strong{font:600 22px var(--mono);color:var(--ink)}
.ai-price span{font-size:14px;color:var(--ink-subtle)}
.ai-time{display:block}
.ai-note{margin-top:12px;font-size:13px;color:var(--ink-faint)}

/* pricing: recommended plan marked by border + filled button, not height */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1)}
.plan-rec{border-color:rgba(57,245,166,.45)}
.plan-for{font-size:14px;color:var(--ink-subtle);margin-top:4px}
.plan-price{margin:20px 0 4px;color:var(--ink-subtle);font-size:14px}
.plan-price b{display:block;font:600 36px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.plan ul{flex:1;margin:16px 0 24px;padding:16px 0 0 18px;border-top:1px solid var(--hairline)}
.plan li{margin:6px 0;font-size:15px}

/* what you get + steps */
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.get{margin:24px 0 0}
.get div{padding:14px 0;border-bottom:1px solid var(--hairline)}
.get dt{color:var(--ink);font-weight:600}
.get dd{margin:2px 0 0;font-size:15px;color:var(--ink-subtle)}
.steps2{margin:24px 0 0;padding:0;list-style:none;counter-reset:s}
.steps2 li{display:grid;grid-template-columns:40px 1fr;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--hairline);counter-increment:s}
.steps2 li::before{content:counter(s);grid-row:1/3;font:500 15px var(--mono);color:var(--accent)}
.steps2 b{color:var(--ink)}
.steps2 span{font-size:15px;color:var(--ink-subtle)}
.st-faq{max-width:var(--prose)}

/* contact form */
.contact-form{max-width:820px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface-1)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.contact-form .field{margin:0 0 16px}
.contact-form input{min-height:48px;padding:0 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--ink);font:15px var(--body)}
.contact-form [aria-invalid=true]{border-color:var(--down)}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status.ok{color:var(--up)}.cf-status.err{color:var(--down)}
.contact-form.sent .cf-row,.contact-form.sent .field,.contact-form.sent .ai-row{display:none}

@media (max-width:860px){
  .st-work,.plans,.st-two{grid-template-columns:1fr}
  .w-main{grid-template-columns:1fr}
  .w-main .work-video{max-width:300px}
  .cf-row{grid-template-columns:1fr}
  .st-sec{margin-top:64px}
}