/* studio.css — components for the studio's pages: the home page (on style.css)
   and /plans/, /book/, /contact/ and the legal pages (on doc.css). Builds on
   css/brand.css and never defines a brand token: colour, type, space and
   motion all come from it, so light and dark follow for free.

   Square corners, hairlines, no shadows. Signal stays with each page's own
   primary button; nothing here paints it. */

/* ---- the steps: four numbered moves, mono figures ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));counter-reset:step}
.steps li{border-top:1.5px solid var(--tx);padding-top:var(--s4);counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:var(--ls-mono);color:var(--tx3);margin-bottom:var(--s3);font-variant-numeric:tabular-nums}
.steps h3{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-heading);font-size:1.0625rem;line-height:1.2;margin:0 0 var(--s2);color:var(--tx)}
.steps p{margin:0;color:var(--tx2);font-size:.9688rem;line-height:1.6}

/* ---- promises: short facts under the steps ---- */
.promises{list-style:none;margin:var(--s6) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);
  display:grid;gap:var(--s3) var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.promises li{display:grid;gap:.25rem}
.promises b{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:700;font-size:1.5rem;
  line-height:1;letter-spacing:var(--ls-heading);color:var(--tx);font-variant-numeric:tabular-nums}
.promises span{font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--tx2);line-height:1.5}

/* ---- plan cards ---- */
.plans{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);padding:var(--s5) var(--s4) var(--s4)}
.plan[data-featured="true"]{border-color:var(--tx);border-width:1.5px}
.plan .tag{font-family:var(--font-label);font-weight:600;font-size:.625rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--tx2);margin:0 0 var(--s3);min-height:1em}
.plan h3{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:760;text-transform:uppercase;
  letter-spacing:var(--ls-heading);font-size:1.375rem;line-height:1;margin:0;color:var(--tx)}
.plan .for{margin:var(--s3) 0 0;color:var(--tx2);font-size:.9375rem;line-height:1.55;min-height:4.65em}
@media(max-width:640px){.plan .for{min-height:0}}
.plan .price{margin:var(--s4) 0 0;display:flex;align-items:baseline;gap:.4rem;color:var(--tx)}
.plan .price b{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:760;font-size:2.625rem;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan .price span{font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--tx2)}
.plan .setup{margin:var(--s2) 0 0;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--tx3)}
.plan ul{list-style:none;margin:var(--s4) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem}
.plan li{position:relative;padding-left:1.1rem;color:var(--tx2);font-size:.9375rem;line-height:1.5}
.plan li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--tx)}
.plan .more{margin-top:auto;padding-top:var(--s4)}
.plans-note{margin:var(--s4) 0 0;color:var(--tx3);font-size:.875rem;max-width:62ch}

/* ---- add-ons and bundles ---- */
.addons{list-style:none;margin:0;padding:0;display:grid;gap:0 var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.addons li{display:grid;grid-template-columns:1fr auto;gap:.15rem var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.addons b{font-weight:500;color:var(--tx)}
.addons span{grid-column:1;color:var(--tx2);font-size:.9063rem;line-height:1.5}
.addons em{grid-column:2;grid-row:1;font-style:normal;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.02em;color:var(--tx);white-space:nowrap;align-self:baseline}
.addons.names em{display:none}
.bundles{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));margin-top:var(--s5)}
.bundle{border-left:3px solid var(--evergreen);padding:var(--s2) 0 var(--s2) var(--s4)}
[data-theme="dark"] .bundle{border-left-color:var(--mist-2)}
.bundle h3{font-family:var(--font-label);font-weight:600;font-size:.75rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;margin:0 0 var(--s2);color:var(--tx)}
.bundle p{margin:0;color:var(--tx2);font-size:.9375rem;line-height:1.55}

/* ---- the fine print as rows ---- */
.fine{display:grid;margin:0;border-top:1px solid var(--line);max-width:72ch}
.fine>div{display:grid;grid-template-columns:11rem 1fr;gap:.3rem var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.fine dt{font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--tx);padding-top:.3rem}
.fine dd{margin:0;color:var(--tx2)}
.fine dd a{color:var(--tx);text-decoration:none;border-bottom:1.5px solid var(--line-strong);display:inline-block;min-height:24px;padding-block:.2rem}
@media(max-width:640px){.fine>div{grid-template-columns:1fr}.fine dt{padding-top:0}}

/* ---- questions ---- */
.faq{max-width:72ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 2rem var(--s3) 0;position:relative;font-weight:500;color:var(--tx);min-height:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:var(--s3);font-family:var(--font-mono);color:var(--tx2)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 var(--s4);color:var(--tx2);max-width:62ch}

/* ---- forms on /book/ and /contact/ ---- */
.sform{display:grid;gap:var(--s5);max-width:44rem;margin-top:var(--s4)}
.sform .row{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.sform select{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1.5px solid var(--line-strong);
  color:var(--tx);font-family:var(--font-body);font-size:1.0625rem;padding:.7rem 0;border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.2rem,calc(100% - 5px) 1.2rem;background-size:5px 5px;background-repeat:no-repeat}
.sform select:focus{outline:0;border-bottom-color:var(--tx)}
.sform select option{color:#1B1F1D}
.choice{border:0;margin:0;padding:0;display:grid;gap:var(--s2)}
.choice legend{font-family:var(--font-label);font-weight:600;font-size:.6875rem;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--tx2);margin-bottom:.55rem;padding:0}
.choice label{display:flex;align-items:center;gap:.7rem;min-height:40px;padding:.4rem .9rem;border:1.5px solid var(--line-strong);
  cursor:pointer;color:var(--tx);transition:border-color var(--dur-2)}
.choice label:hover{border-color:var(--tx)}
.choice input{accent-color:var(--tx);width:1.5rem;height:1.5rem;margin:0;flex:none}
.choice label:has(input:checked){border-color:var(--tx)}
.choice .opts{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
/* same treatment as style.css: off-screen, inert, and sized so the tap-target
   gate never mistakes it for a control */
.sform .hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;min-height:44px;min-width:44px}
.sform .note{margin:0;color:var(--tx3);font-size:.875rem;max-width:56ch}
.sform .form-msg{margin:0;min-height:1.2em;font-size:.9375rem}
.sform .form-msg.ok{color:var(--ok-text)}
.sform .form-msg.err{color:var(--danger)}
[data-theme="dark"] .sform .form-msg.ok{color:var(--ok-dark)}
[data-theme="dark"] .sform .form-msg.err{color:var(--danger-dark)}
.sform button[type=submit]{justify-self:start}

/* ---- a closing band on the inner pages ---- */
.band .wrap{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.band h2{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-heading);font-size:var(--fs-h2);line-height:var(--lh-heading);margin:0;max-width:20ch}

/* ---- studio footer ---- */
.sfoot{border-top:1px solid var(--line);padding-block:var(--s5);color:var(--tx2);font-size:.8125rem}
.sfoot .wrap{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content:space-between;align-items:center}
.sfoot .symbol{width:34px;height:34px;display:block;color:var(--tx)}
.sfoot .symbol path{fill:currentColor}
.sfoot .symbol .c{fill:var(--signal)}
.sfoot p{margin:0}
.sfoot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem var(--s4)}
.sfoot a{color:var(--tx2);text-decoration:none;display:inline-block;min-height:24px;padding-block:.2rem}
.sfoot a:hover{color:var(--tx)}

/* ---- the home page: section heads for the studio's own sections ---- */
.sec .steps,.sec .plans{margin-top:0}
.addons-wrap .addons{margin-top:0}

@media print{
  .sform,.band,.sfoot,.faq summary::after{display:none}
  .plan{break-inside:avoid;border-color:#D8D4CC}
}