/* ==========================================================================
   wdye studio on wedoyourevents.com
   The studio's landing page bands, ported 2026-09-06 by _build/port-studio.mjs from
   WDYE-Studio/public/landing.css and re-scoped under .studio. Tokens are this site's
   (purple, Manrope); the studio's nav, footer, chart and dark-mode rules were dropped;
   btn / faq / hero / pair / step / steps are st-* here because site.css owns those names.
   Edit THIS file, not the studio's: the studio no longer serves a landing page.
   ========================================================================== */

.studio { --ink: #1f1e1e; --soft: #5f5d5d; --faint: #8a8888; --paper: #ffffff; --surface: #f4f0fa; --card: #ffffff; --line: #e6e6e6; --indigo: #6616d0; --indigo-deep: #4d0fa4; --bracket: #6616d0; --gold: #b97f1e; --ok: #0d9488; --shadow: 0 1px 2px rgba(31,30,30,.05), 0 12px 32px -12px rgba(31,30,30,.12); --shadow-lg: 0 2px 4px rgba(31,30,30,.06), 0 24px 56px -16px rgba(31,30,30,.18) }
.studio { color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased }
.studio a { color: inherit; }
.studio h2 { font-size: clamp(1.75rem, 3.7vw, 2.85rem); line-height: 1.06; letter-spacing: -.026em; margin: 0 0 12px; text-wrap: balance }
.studio .lede { color: var(--soft); font-size: 17.5px; max-width: 58ch; margin: 0; }
.studio section { padding: 88px 0; }
.studio .brk { color: var(--bracket); font-weight: 800; }
.studio .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 650; font-size: 15.5px; padding: 13px 24px; text-decoration: none; border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s; cursor: pointer; }
.studio .st-btn:focus-visible, .studio a:focus-visible { outline: 2.5px solid var(--bracket); outline-offset: 2px; }
.studio .st-btn-primary { background: var(--indigo); color: #fff; box-shadow: var(--shadow); }
.studio .st-btn-primary:hover { background: var(--indigo-deep); transform: translateY(-1px); }
.studio .st-btn-quiet { border-color: var(--line); color: var(--ink); background: var(--card); }
.studio .st-btn-quiet:hover { border-color: var(--indigo); }
.studio .st-hero { padding: 0; }
.studio .hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.studio .st-hero .hero-say p { max-width: 620px; text-wrap: pretty; }
.studio .hero-say p strong { font-weight: 700; color: var(--ink); }
.studio .hero-duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "web app" "say try"; gap: clamp(20px, 3.5vw, 44px); align-items: start; max-width: 1120px; margin: 46px auto 0; }
.studio .hero-duo .mock { grid-area: web; }
.studio .hero-phones { grid-area: app; --pw: 214px; justify-self: center; align-self: center; transform: translateY(-16px); }
.studio .hero-say { grid-area: say; align-self: center; text-align: left; }
.studio .hero-duo .app-try { align-self: center; }
.studio .hero-act { text-align: center; margin-top: 42px; }
.studio .hero-act .st-btn { font-size: 17px; padding: 17px 38px; border-radius: 12px; gap: 9px; }
.studio .hero-duo .app-try { grid-area: try; margin-top: 0; }
@media (max-width: 940px) {
  .studio .hero-duo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "web" "say" "app" "try"; gap: 20px; }
  .studio .hero-phones { --pw: min(200px, 46vw); }
}
.studio .hero-phones .st-pair { padding: 10px 0; }
@media (max-width: 940px) {
  .studio .hero-duo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .studio .hero-phones { --pw: min(200px, 46vw); }
}
.studio .st-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; margin: 0 0 22px; text-wrap: balance; }
.studio .st-hero h1.hero-ask { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
.studio .st-hero p { font-size: 18.5px; color: var(--soft); max-width: 52ch; margin: 0 auto 30px; }
.studio .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.studio .hero-ctas.center { justify-content: center; }
.studio .st-hero p.hero-note { font-size: 12.5px; font-style: italic; color: var(--faint); margin: 24px auto 0; max-width: 355px; letter-spacing: .01em; }
@media (prefers-reduced-motion: no-preference) {
  .studio .st-hero .eyebrow, .studio .st-hero h1, .studio .st-hero p, .studio .hero-ctas, .studio .hero-note { animation: rise .6s cubic-bezier(.2,.7,.3,1) both; }
  .studio .st-hero p { animation-delay: .08s; }
  .studio .hero-ctas { animation-delay: .16s; }
  .studio .hero-note { animation-delay: .2s; }
  .studio .mock { animation: rise .7s .15s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.studio .mock { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; font-size: 11px; }
.studio .mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--faint); }
.studio .mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.studio .mock-url { margin-left: 8px; background: var(--surface); border-radius: 6px; padding: 3px 10px; font-weight: 600; color: var(--soft); }
.studio .mock-url b { color: var(--indigo); font-weight: 700; }
.studio .mock-shot { display: block; width: 100%; height: auto; }
.studio .mock .mock-live { margin: 12px 14px 14px; }
.studio .mock-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 14px; }
.studio .mock-foot .mock-live { margin: 0; }
.studio .mock-demo { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--indigo); text-decoration: none; background: color-mix(in srgb, var(--indigo) 10%, transparent); border: 1px solid color-mix(in srgb, var(--indigo) 22%, transparent); border-radius: 999px; padding: 6px 14px; transition: background .15s, border-color .15s; }
.studio .mock-demo span { transition: transform .15s; }
.studio .mock-demo:hover { background: color-mix(in srgb, var(--indigo) 16%, transparent); border-color: color-mix(in srgb, var(--indigo) 40%, transparent); }
.studio .mock-demo:hover span { transform: translateX(3px); }
.studio .mock-body { display: grid; grid-template-columns: 128px 1fr; min-height: 300px; }
.studio .mock-side { border-right: 1px solid var(--line); padding: 12px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; }
.studio .mock-nav { padding: 5px 9px; border-radius: 7px; color: var(--soft); font-weight: 550; display: flex; justify-content: space-between; align-items: center; }
.studio .mock-nav.on { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); font-weight: 700; }
.studio .mock-nav i { font-style: normal; color: var(--ok); font-size: 10px; }
.studio .mock-main { padding: 16px; }
.studio .mock-site { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.studio .mock-hero { background: linear-gradient(120deg, #241d52, #4f46e5 70%, #6d28d9); color: #fff; padding: 26px 18px 20px; }
.studio .mock-hero .ev { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.studio .mock-hero h3 { margin: 4px 0 8px; font-size: 17px; letter-spacing: -.01em; }
.studio .mock-chips { display: flex; gap: 6px; }
.studio .mock-chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 2px 9px; font-size: 9px; font-weight: 600; }
.studio .mock-row { display: flex; gap: 8px; padding: 12px; }
.studio .mock-cell { flex: 1; height: 44px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); }
.studio .mock-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; color: #0b7c72; }
.studio .mock-shot-link { display: block; }
.studio .mock-shot-link:hover .mock-shot { opacity: .93; }
.studio summary:focus-visible { outline: 2.5px solid var(--bracket); outline-offset: 2px; border-radius: 6px; }
.studio .mock-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.studio .aiband { position: relative; background: #140833; isolation: isolate; overflow: hidden; }
.studio .aiband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 16% 18%, rgba(102,22,208,.6), transparent 68%), radial-gradient(46% 50% at 90% 88%, rgba(199,169,255,.22), transparent 70%), linear-gradient(160deg, #1e0b4a, #130730 58%, #0d0524); }
.studio .aiband .eyebrow { color: #c7a9ff; }
.studio .aiband h2 { color: #fff; }
.studio .aiband .lede { color: rgba(237,238,244,.84); }
.studio .ai-head { max-width: 66ch; }
/* every bullet in the left column, the two dashboard shots stacked on the right with a real gap
   between them (owner, 2026-09-07: "switch the bullets to the left side"). The shots stay first in
   the markup so a phone, which stacks, shows the picture before the reading. */
.studio .ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: 34px clamp(28px, 4vw, 56px); margin-top: clamp(30px, 4vw, 48px); }
.studio .ai-layout .ai-shots { grid-column: 2; grid-row: 1; display: grid; gap: 22px; }
.studio .ai-side { grid-column: 1; grid-row: 1; gap: 24px; align-content: start; }
@media (max-width: 940px) {
  .studio .ai-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .studio .ai-layout .ai-shots, .studio .ai-side { grid-column: auto; grid-row: auto; }
}
.studio .ai-shots .mock { border-color: rgba(255,255,255,.16); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.35); }
.studio .ai-shots .mock-dot { flex: none; }
.studio .mock-tag { margin-left: auto; font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, transparent); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
@media (max-width: 620px) {
  .studio .ai-shots .mock-url { display: none; }
}
.studio .aiband .af h3 { color: #fff; }
.studio .aiband .af p { color: rgba(237,238,244,.76); }
.studio .aiband .af .fb { color: #c7a9ff; }
.studio .ai-note { color: rgba(237,238,244,.62); }
.studio .ai-note b { color: rgba(237,238,244,.88); }
.studio .appband { position: relative; background: var(--paper); overflow: hidden; }
.studio .appband::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 48% at 25% 46%, color-mix(in srgb, var(--indigo) 20%, transparent), transparent 72%); }
.studio .appband .wrap { position: relative; z-index: 1; }
.studio .app-head { max-width: 64ch; }
.studio .app-grid { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: start; margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 940px) {
  .studio .app-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.studio .app-shot { --pw: 244px; }
@media (max-width: 620px) {
  .studio .app-shot { --pw: min(206px, 54vw); }
}
.studio .phone-frame { position: relative; width: var(--pw); border-radius: 40px; padding: 9px; background: linear-gradient(155deg, #45484e, #212327 26%, #0e0f11 62%, #2c2e32); box-shadow: 0 52px 104px -36px rgba(20,22,28,.55), 0 8px 22px rgba(20,22,28,.16), inset 0 0 0 2px rgba(255,255,255,.05), inset 0 1.5px 1px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.4); }
.studio .phone-screen { position: relative; border-radius: 31px; overflow: hidden; background: #000; line-height: 0; }
.studio .phone-screen img { display: block; width: 100%; height: auto; }
.studio .phone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 32%; height: 18px; background: #000; border-radius: 12px; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.studio .pf-btn { position: absolute; width: 3px; border-radius: 2px 0 0 2px; background: #141518; z-index: 0; }
.studio .pf-btn.r { border-radius: 0 2px 2px 0; }
.studio .pf-silent { left: -3px; top: 15%; height: 5%; }
.studio .pf-volup { left: -3px; top: 23%; height: 9%; }
.studio .pf-voldn { left: -3px; top: 34.5%; height: 9%; }
.studio .pf-power { right: -3px; top: 26%; height: 13%; }
.studio .st-pair { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 62px 0 10px; }
.studio .st-pair .ph-front { position: relative; z-index: 2; }
.studio .st-pair .ph-back { position: relative; z-index: 1; margin-right: calc(var(--pw) * -0.4); margin-top: 48px; transform: rotate(-5deg); }
.studio .ph-label { position: absolute; z-index: 6; top: -46px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 12px; }
.studio .ph-label::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 22px; background: color-mix(in srgb, var(--indigo) 70%, transparent); transform: translateX(-50%); }
.studio .ph-label::before { content: ""; position: absolute; top: calc(100% + 22px); left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 20%, transparent); }
.studio .lbl-back { transform: translateX(-50%) rotate(5deg); }
@media (max-width: 480px) {
  .studio .ph-label { font-size: 9.5px; padding: 4px 9px; }
}
.studio .app-try { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.studio .app-qr { display: block; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; line-height: 0; box-shadow: var(--shadow); }
.studio .app-qr img { display: block; width: 108px; height: 108px; }
.studio .app-try-t { display: grid; gap: 3px; text-align: left; }
.studio .app-try-t b { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }
.studio .app-try-t .scan { font-size: 13px; color: var(--soft); }
.studio .app-demo { font-size: 13.5px; font-weight: 650; color: var(--indigo); text-decoration: none; margin-top: 3px; }
.studio .app-demo:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .studio .app-qr, .studio .app-try-t .scan { display: none; }
  .studio .app-try-t { text-align: center; }
}
.studio .app-feats { display: grid; gap: 22px; }
.studio .af { display: flex; gap: 14px; align-items: flex-start; }
.studio .af .fb { color: var(--bracket); font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: 4px; flex-shrink: 0; }
.studio .af h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.studio .af p { margin: 0; font-size: 14.5px; color: var(--soft); }
.studio .app-note { margin: clamp(34px, 4vw, 48px) 0 0; text-align: center; font-size: 13.5px; color: var(--faint); }
.studio .app-note b { color: var(--soft); font-weight: 700; }
.studio .st-steps { position: relative; isolation: isolate; border: 0; background: linear-gradient(165deg, #16132f 0%, #1d1943 48%, #2a2160 100%); }
.studio .st-steps::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(64% 60% at 50% 4%, rgba(124,58,237,.32), transparent 70%); }
.studio .st-steps .eyebrow { color: #c7a9ff; }
.studio .st-steps h2 { color: #fff; }
.studio .st-steps .lede { color: rgba(237,238,244,.82); }
.studio .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; counter-reset: step; }
@media (max-width: 820px) {
  .studio .step-grid { grid-template-columns: 1fr; }
}
.studio .st-step { position: relative; overflow: hidden; border-radius: 14px; padding: 30px 24px 26px; counter-increment: step; background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 40px -22px rgba(0,0,0,.7); transition: transform .18s, background .18s, border-color .18s; }
.studio .st-step:hover { transform: translateY(-3px); border-color: rgba(199,169,255,.5); background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); }
.studio .st-step::after { content: "0" counter(step) / ""; position: absolute; right: -10px; bottom: -34px; font-size: 120px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.075); letter-spacing: -.05em; pointer-events: none; }
.studio .st-step h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: #fff; }
.studio .st-step p { margin: 0; font-size: 14.5px; color: rgba(237,238,244,.76); position: relative; }
.studio .st-step p b { color: #fff; font-weight: 650; }
.studio .st-step em { font-style: normal; color: #e9bd6d; font-weight: 650; }
.studio .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; align-items: stretch; max-width: 1020px; margin-inline: auto; }
@media (max-width: 1060px) {
  .studio .price-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 560px) {
  .studio .price-grid { grid-template-columns: 1fr; max-width: 420px; }
}
.studio .plan { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 20px; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.studio .plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.studio .plan-name { font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.studio .plan-price { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 2px; font-variant-numeric: tabular-nums; }
.studio .plan-price small { font-size: 14px; font-weight: 550; color: var(--faint); letter-spacing: 0; }
.studio .plan-for { font-size: 13.5px; color: var(--soft); margin: 0 0 18px; min-height: 60px; }
.studio .plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.studio .plan li { padding-left: 22px; position: relative; color: var(--soft); }
.studio .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.studio .plan li.no { color: var(--faint); }
.studio .plan li.no::before { content: "—"; color: var(--faint); }
.studio .plan .st-btn { margin-top: auto; font-size: 14px; padding: 11px 16px; }
.studio .pkg-link { display: inline-block; margin-top: 10px; background: none; border: none; color: var(--indigo); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px; }
.studio .pkg-link:hover { text-decoration: underline; }
.studio .pkg-note { display: inline-block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; padding: 2px; color: var(--faint); }
.studio .pkg-modal { border: none; border-radius: 16px; padding: 26px 28px; max-width: 340px; width: calc(100% - 32px); background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.studio .pkg-modal::backdrop { background: rgba(16,14,34,.5); }
.studio .pkg-modal h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--ink); }
.studio .pkg-modal-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.studio .pkg-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.studio .pkg-table td { padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.studio .pkg-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.studio .pkg-table tr:last-child td { border-bottom: none; }
/* The annual tiers table carries a third column (what a registrant past the allowance costs), so
   its dialog is wider than the two-column packages one. Two classes, because .studio .pkg-modal is
   already (0,2,0) and a same-specificity override would hang on source order. */
.studio .pkg-modal.pkg-modal--wide { max-width: 440px; }
.studio .pkg-table th { padding: 0 2px 8px; border-bottom: 1px solid var(--line); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-align: left; white-space: nowrap; }
.studio .pkg-table th + th { text-align: right; }
.studio .pkg-table--3 td + td { text-align: right; font-variant-numeric: tabular-nums; }
.studio .pkg-table--3 td:nth-child(2) { color: var(--soft); font-weight: 400; }
.studio .pkg-modal form { margin: 0; }
.studio .pkg-modal .st-btn-quiet { width: 100%; }
.studio .plan-hot { border: 2px solid var(--indigo); position: relative; }
.studio .plan-hot .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.studio .plan-note { text-align: center; color: var(--faint); font-size: 13px; margin-top: 26px; }
.studio .plan-suite .plan-name { color: var(--gold); }
.studio .faq-band { background: var(--surface); border-top: 1px solid var(--line); }
.studio .st-faq { max-width: 720px; margin: 44px auto 0; display: grid; gap: 10px; }
.studio details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; }
.studio summary { cursor: pointer; font-weight: 650; font-size: 15.5px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.studio summary::after { content: "+"; color: var(--bracket); font-size: 20px; font-weight: 700; flex-shrink: 0; }
.studio details[open] summary::after { content: "–"; }
.studio details p { margin: 0 0 16px; color: var(--soft); font-size: 14.5px; max-width: 62ch; }
.studio .close { text-align: center; border-top: 1px solid var(--line); }
.studio .close h2 { margin-bottom: 18px; }
.studio .siteband { background: var(--paper); }
.studio .site-grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
@media (max-width: 940px) {
  .studio .site-grid { grid-template-columns: minmax(0, 1fr); }
}
.studio .site-pair { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(30px, 4vw, 46px); align-items: start; }
@media (max-width: 820px) {
  .studio .site-pair { grid-template-columns: 1fr; }
}
.studio .site-card { margin: 0; }
.studio .site-card figcaption { margin-top: 15px; font-size: 14px; line-height: 1.62; color: var(--soft); }
.studio .site-card figcaption b { display: block; margin-bottom: 5px; font-size: 15.5px; color: var(--ink); letter-spacing: -.005em; }
.studio .app-note-stack span { display: block; }
.studio .app-note-stack span + span { margin-top: 5px; }
.studio .portalband { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio .portal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
@media (max-width: 940px) {
  .studio .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .portal-shot { order: -1; }
}
.studio .portal-shot { display: grid; gap: clamp(22px, 3vw, 32px); align-content: start; }
.studio .scanband { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio .scan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
@media (max-width: 940px) {
  .studio .scan-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .scan-shot { order: -1; }
}
.studio .scan-shot { --pw: 244px; }
@media (max-width: 620px) {
  .studio .scan-shot { --pw: min(206px, 54vw); }
}
.studio .mockscr { position: relative; width: 100%; aspect-ratio: 552 / 1200; background: #f6f6f8; color: #26262a; font-size: calc(var(--pw) * 0.052); line-height: 1.35; font-family: inherit; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.studio .m-abar, .studio .m-port, .studio .m-card, .studio .m-lab { flex: none; }
.studio .mockscr b, .studio .mockscr i { display: block; font-style: normal; }
.studio .m-abar { background: #fff; border-bottom: 1px solid #e8e8ec; padding: 2.6em .9em .55em; }
.studio .m-abar b { font-size: 1.05em; }
.studio .m-port { position: relative; margin: .7em .7em 0; aspect-ratio: 4 / 3; background: #17161f; border-radius: .8em; display: flex; align-items: center; justify-content: center; overflow: hidden; outline: 3px solid #1f9254; outline-offset: -3px; }
.studio .m-port img { width: 46%; height: auto; background: #fff; padding: .45em; border-radius: .4em; opacity: .96; margin-bottom: 1.6em; }
.studio .m-reticle { position: absolute; inset: 0; margin: auto; width: 66%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.9); border-radius: .9em; }
.studio .m-hit { position: absolute; left: 0; right: 0; bottom: 1em; text-align: center; color: #fff; font-weight: 700; font-size: .82em; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.studio .m-card { margin: .7em .7em 0; background: #fff; border: 1px solid #e8e8ec; border-radius: .8em; padding: .7em .8em; }
.studio .m-card b { font-size: .95em; }
.studio .m-card i { color: #70717a; font-size: .8em; }
.studio .m-lab { margin: .7em .9em .3em; font-weight: 700; font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: #6e6f78; }
.studio .m-badge { flex: 1; min-height: 0; margin: 0 .7em .7em; background: #fff; border: 1px solid #e8e8ec; border-radius: .8em; padding: .5em .8em; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; }
.studio .m-badge img { width: auto; max-width: 62%; flex: 0 1 auto; min-height: 0; height: 58%; margin: 0 0 .3em; }
.studio .m-badge b { font-size: .95em; }
.studio .m-badge i { color: #70717a; font-size: .8em; }
.studio .m-sheetbg { background: #ecedf2; }
.studio .m-ghost { position: absolute; top: 2.4em; left: .7em; right: .7em; }
.studio .m-ghost span { display: block; height: 2.6em; background: #fff; border: 1px solid #e4e5ec; border-radius: .6em; margin-bottom: .5em; }
.studio .m-dim { position: absolute; inset: 0; background: rgba(22,21,30,.35); }
.studio .m-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 1.1em 1.1em 0 0; padding: .55em .9em 1em; }
.studio .m-grab { display: block; width: 2.2em; height: .22em; border-radius: .2em; background: #e2e3e9; margin: 0 auto .7em; }
.studio .m-who { display: flex; gap: .55em; align-items: center; }
.studio .m-avat { width: 2.1em; height: 2.1em; border-radius: 50%; background: #e9edfb; color: #4f46e5; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95em; flex: none; }
.studio .m-who b { font-size: 1.02em; }
.studio .m-who i { color: #70717a; font-size: .82em; }
.studio .m-acts { display: flex; gap: .5em; margin: .8em 0 .55em; }
.studio .m-act { flex: 1; border: 1px solid #e8e8ec; border-radius: .7em; background: #f6f6f8; text-align: center; padding: .55em 0 .5em; font-weight: 700; font-size: .78em; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.studio .m-ai { width: 1.9em; height: 1.9em; border-radius: .55em; background: #e9edfb; color: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: .95em; }
.studio .m-row { display: flex; gap: .8em; padding: .5em 0; border-top: 1px solid #f0f0f4; align-items: baseline; }
.studio .m-row span { flex: none; width: 4.6em; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; color: #6e6f78; font-weight: 700; }
.studio .m-row b { font-size: .8em; font-weight: 700; }
.studio .m-del { display: block; margin-top: .7em; text-align: center; border: 1px solid #f3c9c9; background: #fdf2f2; color: #b91c1c; font-weight: 700; font-size: .8em; border-radius: .7em; padding: .6em 0; }
.studio .regband { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio .reg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
@media (max-width: 940px) {
  .studio .reg-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .reg-shot { order: -1; }
}
.studio .reg-shot { position: relative; }
.studio .reg-phone { position: absolute; left: -18px; bottom: -128px; --pw: 204px; transform: rotate(-3.5deg); z-index: 2; }
@media (max-width: 1100px) {
  .studio .reg-phone { left: 0; }
}
@media (max-width: 940px) {
  .studio .reg-phone { position: static; display: block; margin: 58px auto 0; }
}
@media (max-width: 620px) {
  .studio .reg-phone { --pw: min(168px, 44vw); }
}
.studio .exhband { background: var(--paper); }
.studio .bdgband { background: color-mix(in srgb, var(--indigo) 5%, #fff); border-bottom: 1px solid var(--line); }
.studio .bdg-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 34px clamp(20px, 3vw, 40px); margin-top: clamp(30px, 4vw, 48px); }
.studio .bdg-layout .bdg-shot { grid-column: 1 / 3; }
.studio .bdg-side { grid-column: 3; }
@media (max-width: 940px) {
  .studio .bdg-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .studio .bdg-layout .bdg-shot, .studio .bdg-side { grid-column: auto; }
}
.studio .bdg-shot { position: relative; padding: 0 30px 40px 0; }
.studio .bdg-shot .bdg-sheet { position: absolute; right: 0; top: 0; width: 54%; height: auto; transform: rotate(3.5deg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 44px rgba(20,22,28,.18); background: #fff; }
.studio .bdg-shot .bdg-tool { position: relative; width: 88%; margin-top: 120px; z-index: 2; }
@media (max-width: 940px) {
  .studio .bdg-shot { padding: 0 0 26px; }
  .studio .bdg-shot .bdg-tool { width: 100%; margin-top: 0; }
  .studio .bdg-shot .bdg-sheet { position: static; display: block; width: 62%; margin: 16px auto 0; transform: rotate(0deg); }
}
.studio .ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--line); }
.studio .ck-h { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; max-width: 26ch; text-wrap: balance; }
.studio .ck-lede { margin: 0 0 24px; font-size: 15.5px; color: var(--soft); max-width: 58ch; }
.studio .ck-feats { gap: 18px; }
.studio .ck-shot { --pw: 264px; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 6px; }
.studio .ck-cap { font-size: 12.5px; color: var(--faint); }
@media (max-width: 940px) {
  .studio .ck-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .studio .ck-shot { --pw: min(220px, 56vw); }
}
.studio .exh-grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
@media (max-width: 940px) {
  .studio .exh-grid { grid-template-columns: minmax(0, 1fr); }
}
.studio .exh-shot { position: relative; }
.studio .exh-mini { position: absolute; right: -30px; bottom: -110px; width: min(340px, 60%); transform: rotate(2.5deg); z-index: 2; box-shadow: 0 24px 60px rgba(23, 27, 42, .22); }
@media (max-width: 1100px) {
  .studio .exh-mini { right: 0; }
}
@media (max-width: 940px) {
  .studio .exh-mini { position: static; display: block; margin: 26px auto 0; transform: none; width: min(420px, 92%); }
}
.studio .pollband { background: var(--paper); }
.studio .poll-grid { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); }
@media (max-width: 940px) {
  .studio .poll-grid { grid-template-columns: minmax(0, 1fr); }
}
.studio .poll-shot { --pw: 244px; }
@media (max-width: 620px) {
  .studio .poll-shot { --pw: min(206px, 54vw); }
}
.studio .mp-ses { flex: none; background: #fff; border-bottom: 1px solid #e8e8ec; padding: .55em .9em .7em; }
.studio .mp-ses b { font-size: .92em; }
.studio .mp-ses i { color: #70717a; font-size: .72em; }
.studio .mp-card { flex: none; margin: 0 .7em .7em; background: #fbfaff; border: 1px solid #d9d6f6; border-radius: .8em; padding: .65em .8em .75em; }
.studio .mp-fill { flex: 1; min-height: 0; overflow: hidden; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.studio .mp-ghosted { opacity: .6; }
.studio .mp-eye { display: block; font-weight: 800; font-size: .58em; letter-spacing: .11em; text-transform: uppercase; color: #4f46e5; }
.studio .mp-q { font-size: .92em; line-height: 1.3; margin: .35em 0 .4em; }
.studio .mp-hint { display: block; color: #70717a; font-size: .74em; margin-bottom: .45em; }
.studio .mp-opt { display: flex; align-items: center; gap: .5em; background: #fff; border: 1px solid #e8e8ec; border-radius: .65em; padding: .5em .6em; font-weight: 600; font-size: .8em; margin-bottom: .4em; }
.studio .mp-r { width: 1.15em; height: 1.15em; border-radius: 50%; border: .13em solid #6e6f78; flex: none; }
.studio .mp-opt.sel { background: #eef0fd; border-color: #b3aef2; color: #4f46e5; }
.studio .mp-opt.sel .mp-r { border-color: #4f46e5; box-shadow: inset 0 0 0 .28em #4f46e5; }
.studio .mp-vote { display: block; text-align: center; background: #4f46e5; color: #fff; font-weight: 700; font-size: .82em; border-radius: .65em; padding: .55em 0; margin-top: .15em; }
.studio .mp-row { margin-bottom: .55em; }
.studio .mp-rt { display: flex; align-items: baseline; gap: .45em; font-weight: 600; font-size: .78em; margin-bottom: .25em; }
.studio .mp-rt b { display: inline; margin-left: auto; color: #70717a; font-size: .92em; }
.studio .mp-row.mine .mp-rt { color: #4f46e5; }
.studio .mp-you { display: inline-block; font-style: normal; font-weight: 800; font-size: .68em; letter-spacing: .07em; text-transform: uppercase; color: #4f46e5; background: #e9e7fb; border-radius: .5em; padding: .15em .45em; }
.studio .mp-meter { display: block; height: .55em; border-radius: .3em; background: #ecebf6; overflow: hidden; }
.studio .mp-meter i { display: block; height: 100%; border-radius: .3em; background: linear-gradient(90deg, #4f46e5, #7c74f0); }
.studio .mp-n { display: block; color: #6e6f78; font-size: .7em; margin-top: .2em; }
.studio .mp-avg { display: flex; align-items: baseline; gap: .45em; margin: .3em 0 .15em; }
.studio .mp-avg b { font-size: 1.5em; }
.studio .mp-avg i { color: #70717a; font-size: .72em; }
.studio .mp-stars { display: block; color: #f5b40a; font-size: 1.05em; letter-spacing: .12em; }
.studio .mp-stars em { font-style: normal; color: #e3e4ea; }
.studio .tableband { background: color-mix(in srgb, var(--indigo) 6%, var(--paper)); border-top: 1px solid var(--line); }
.studio .tab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
@media (max-width: 940px) {
  .studio .tab-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .tab-shot { order: -1; }
}
.studio .tab-shot { display: grid; gap: clamp(22px, 3vw, 32px); align-content: start; }
.studio .tab-feats-row { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 40px); margin-top: clamp(8px, 1.5vw, 16px); }
@media (max-width: 940px) {
  .studio .tab-feats-row { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
}
.studio .tab-shot > .site-card, .studio .tab-shot .mock { min-width: 0; }
.studio .tab-wide { margin-top: clamp(30px, 4vw, 48px); }
.studio .tab-wide .mock { min-width: 0; }
.studio .tab-wide .tbs-body { grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
.studio .tab-wide .tbs-canvas { padding: 10px; }
.studio .tab-wide figcaption { max-width: 70ch; }
.studio .tbui { background: #f6f6f8; color: #26262a; font-size: 10.5px; line-height: 1.45; text-align: left; }
.studio .tbui i, .studio .tbui u, .studio .tbui em { font-style: normal; text-decoration: none; }
.studio .tbui b { font-weight: 700; }
.studio .tbp-svg, .studio .tbs-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.studio .tbp { padding: 16px 18px 18px; }
.studio .tbp-h { display: block; font-size: 1.5em; letter-spacing: -.01em; line-height: 1.2; }
.studio .tbp-sub { margin: 6px 0 0; color: #70717a; font-size: .95em; }
.studio .tbp-count { margin: 10px 0 0; font-size: .95em; }
.studio .tbp-count span { color: #4f46e5; font-weight: 650; margin-left: 4px; }
.studio .tbp-map { margin-top: 10px; background: #fff; border: 1px solid #e5e6ee; border-radius: 10px; padding: 8px; }
.studio .tbp-panel { margin-top: 10px; background: #fff; border: 1px solid #e5e6ee; border-radius: 10px; padding: 10px 12px 12px; }
.studio .tbp-head { display: flex; align-items: baseline; gap: 8px; }
.studio .tbp-head b { font-size: 1.15em; }
.studio .tbp-head span { color: #70717a; }
.studio .tbp-seats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.studio .tbp-seats i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfd1dc; background: #fff; border-radius: 8px; font-weight: 700; color: #26262a; }
.studio .tbp-seats i.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.studio .tbp-seats i.gone { background: #eceef3; border-color: #e1e3ea; color: #a4a7b3; text-decoration: line-through; }
.studio .tbp-legend { display: flex; gap: 14px; margin-top: 10px; color: #70717a; font-size: .92em; }
.studio .tbp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.studio .tbp-legend em { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #4f46e5; background: rgba(79,70,229,.10); }
.studio .tbp-legend .lg-mine { background: #4f46e5; }
.studio .tbp-legend .lg-gone { background: #eceef3; border-color: #b9bfcc; }
.studio .tbp-btn { display: inline-block; margin-top: 14px; padding: 8px 20px; border-radius: 9px; background: #4f46e5; color: #fff; font-weight: 700; }
.studio .tbs { padding: 12px 13px 13px; }
.studio .tbs-head { display: flex; align-items: center; gap: 9px; }
.studio .tbs-back, .studio .tbs-tools i, .studio .tbs-tools em { border: 1px solid #dcdde5; background: #fff; border-radius: 7px; padding: 3px 8px; font-weight: 650; color: #4a4b55; white-space: nowrap; }
.studio .tbs-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.studio .tbs-name b { font-size: 1.2em; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio .tbs-name i { color: #6e6f78; font-size: .88em; }
.studio .tbs-save { margin-left: auto; background: #4f46e5; border-radius: 7px; padding: 4px 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.studio .tbs-tools { display: flex; gap: 5px; margin-top: 9px; }
.studio .tbs-tools i.on { background: #eef0fd; border-color: #b3aef2; color: #4f46e5; }
.studio .tbs-tools em { margin-left: auto; }
.studio .tbs-body { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 9px; margin-top: 9px; align-items: start; }
.studio .tbs-canvas { background: #fff; border: 1px solid #e5e6ee; border-radius: 9px; padding: 6px; background-image: linear-gradient(#f0f1f6 1px, transparent 1px), linear-gradient(90deg, #f0f1f6 1px, transparent 1px); background-size: 12px 12px; }
.studio .tbs-side { background: #fff; border: 1px solid #e5e6ee; border-radius: 9px; padding: 10px 11px 11px; }
.studio .tbs-h4 { display: block; font-size: 1.15em; }
.studio .tbs-lab { display: block; margin-top: 10px; font-weight: 700; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; color: #6e6f78; }
.studio .tbs-note { display: block; margin-top: 3px; color: #8b8d99; font-size: .86em; line-height: 1.4; }
.studio .tbs-nums { display: flex; gap: 4px; margin-top: 6px; }
.studio .tbs-nums i { flex: 1; text-align: center; border: 1px solid #dcdde5; background: #fff; border-radius: 6px; padding: 2px 0; font-weight: 650; color: #4a4b55; }
.studio .tbs-nums i.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.studio .tbs-list { margin-top: 6px; }
.studio .tbs-list > div { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid #f0f0f5; }
.studio .tbs-list > div:first-child { border-top: 0; }
.studio .tbs-list .no { width: 14px; color: #8b8d99; font-weight: 700; font-size: .9em; }
.studio .tbs-list .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.studio .tbs-list .who em { color: #a4a7b3; font-weight: 500; }
.studio .tbs-list u { color: #4f46e5; font-size: .86em; font-weight: 650; }
@media (max-width: 620px) {
  .studio .tbui { font-size: 9.5px; }
  .studio .tbs-body, .studio .tab-wide .tbs-body { grid-template-columns: minmax(0, 1fr); }
  .studio .tbs-tools em { display: none; }
}
.studio .memberband { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio .mem-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
@media (max-width: 940px) {
  .studio .mem-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .mem-shot { order: -1; }
}
.studio .mem-shot { display: grid; gap: clamp(22px, 3vw, 32px); align-content: start; }
.studio .mem-shot > .site-card, .studio .mem-shot .mock { min-width: 0; }
.studio .mbui { background: #f6f6f8; color: #26262a; font-size: 10.5px; line-height: 1.45; text-align: left; }
.studio .mbui i, .studio .mbui u, .studio .mbui em { font-style: normal; text-decoration: none; }
.studio .mbui b { font-weight: 700; }
.studio .mbs { padding: 14px 15px 15px; }
.studio .mbs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 9px; }
.studio .mbs-back, .studio .mbs-acts i, .studio .mbs-acts u, .studio .mbs-add, .studio .mbs-ghost { border: 1px solid #dcdde5; background: #fff; border-radius: 7px; padding: 4px 9px; font-weight: 650; color: #4a4b55; white-space: nowrap; }
.studio .mbs-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.studio .mbs-name b { font-size: 1.26em; letter-spacing: -.01em; white-space: nowrap; }
.studio .mbs-id { font-size: .82em; font-weight: 700; letter-spacing: .04em; color: #6e6f78; background: #eceef4; border-radius: 5px; padding: 2px 6px; }
.studio .mbs-acts { display: flex; gap: 6px; margin-left: auto; }
.studio .mbs-acts u { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.studio .mbs-note { margin: 11px 0 0; color: #6e6f78; font-size: .92em; }
.studio .mbs-tools { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.studio .mbs-search { flex: 1; min-width: 0; border: 1px solid #dcdde5; background: #fff; border-radius: 8px; padding: 6px 10px; color: #9a9ba6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio .mbs-pick { border: 1px solid #dcdde5; background: #fff; border-radius: 8px; padding: 6px 24px 6px 10px; font-weight: 600; color: #4a4b55; position: relative; white-space: nowrap; }
.studio .mbs-pick::after { content: ""; position: absolute; right: 9px; top: 50%; margin-top: -1px; border: 4px solid transparent; border-top-color: #8b8d99; }
.studio .mbs-tw { margin-top: 12px; background: #fff; border: 1px solid #e5e6ee; border-radius: 10px; overflow: hidden; }
.studio .mbs-table { width: 100%; border-collapse: collapse; }
.studio .mbs-table th { text-align: left; font-size: .78em; letter-spacing: .07em; text-transform: uppercase; color: #6e6f78; font-weight: 700; padding: 8px 8px; background: #fbfbfd; border-bottom: 1px solid #e9eaf1; white-space: nowrap; }
.studio .mbs-table td { padding: 7px 8px; border-top: 1px solid #f0f0f5; vertical-align: middle; }
.studio .mbs-table tbody tr:first-child td { border-top: 0; }
.studio .mbs-table td b { display: block; font-weight: 650; }
.studio .mbs-table .org { display: block; color: #8b8d99; font-size: .84em; }
.studio .mbs-un { color: #9a9ba6; }
.studio .mbs-pill { display: inline-block; font-size: .82em; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.studio .mbs-pill.on { background: #e6f4f1; color: #0b7c72; }
.studio .mbs-pill.off { background: #eceef4; color: #6e6f78; }
.studio .mbs-pill.exp { background: #fdf1e6; color: #a3580f; }
.studio .mbs-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; color: #6e6f78; font-size: .88em; }
.studio .mbg { padding: 17px 18px 20px; }
.studio .mbg-head { display: flex; align-items: center; gap: 11px; }
.studio .mbg-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; font-size: .95em; font-weight: 800; color: #fff; background: linear-gradient(140deg, #4f46e5, #7c3aed); display: flex; align-items: center; justify-content: center; }
.studio .mbg-head b { display: block; font-size: 1.32em; letter-spacing: -.01em; }
.studio .mbg-head i { display: block; color: #70717a; font-size: .9em; }
.studio .mbg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.studio .mbg-chips span { border: 1px solid #dcdde5; background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 650; color: #4a4b55; }
.studio .mbg-chips .on { background: #eef0fd; border-color: #b3aef2; color: #4f46e5; }
.studio .mbg-panel { max-width: 400px; margin-top: 14px; background: #fff; border: 1px solid #e5e6ee; border-radius: 12px; padding: 15px 17px 17px; }
.studio .mbg-h { display: block; font-size: 1.28em; letter-spacing: -.01em; }
.studio .mbg-panel p { margin: 8px 0 0; color: #70717a; font-size: .95em; }
.studio .mbg-lab { display: block; margin-top: 17px; font-weight: 650; font-size: .92em; }
.studio .mbg-input { display: flex; align-items: center; margin-top: 6px; padding: 8px 11px; border: 1px solid #cfd1dc; border-radius: 8px; background: #fff; }
.studio .mbg-caret { width: 1px; height: 1.15em; margin-left: 1px; background: #4f46e5; }
.studio .mbg-btn { display: inline-block; margin-top: 20px; padding: 9px 22px; border-radius: 9px; background: #4f46e5; color: #fff; font-weight: 700; }
@media (max-width: 620px) {
  .studio .mbui { font-size: 9.5px; }
  .studio .mbs-head { flex-wrap: wrap; }
  .studio .mbs-acts { margin-left: 0; }
  .studio .mbs-table .c-num, .studio .mbs-table .c-exp { display: none; }
}
.studio .plan-all { display: inline-block; font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; margin: -8px 0 22px; }
.studio .plan-all:hover { text-decoration: underline; }
.studio .plan-compare { text-align: center; margin: 34px 0 0; }
.studio .plan-compare .st-btn { font-size: 15.5px; padding: 13px 26px; border-color: var(--indigo); color: var(--indigo); font-weight: 700; }
.studio .plan-compare .st-btn:hover { background: var(--indigo); color: #fff; }
.studio .plan-note { margin-top: 18px; }
.studio .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.studio .cfpband { background: color-mix(in srgb, var(--indigo) 6%, var(--paper)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio .cfp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
@media (max-width: 940px) {
  .studio .cfp-grid { grid-template-columns: minmax(0, 1fr); }
  .studio .cfp-shot { order: -1; }
}
.studio .cfp-shot > .site-card, .studio .cfp-shot .mock { min-width: 0; }
.studio .cfu { padding: 14px 15px 15px; }
.studio .cfu-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.studio .cfu-tiles span { background: #fff; border: 1px solid #e5e6ee; border-radius: 9px; padding: 8px 10px; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: #6e6f78; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio .cfu-tiles b { display: block; font-size: 2.1em; letter-spacing: 0; text-transform: none; color: #26262a; line-height: 1.1; margin-bottom: 3px; }
.studio .cfu-head { margin-top: 14px; }
.studio .cfu-tabs { display: flex; gap: 14px; margin-top: 11px; border-bottom: 1px solid #e5e6ee; }
.studio .cfu-tabs i { padding: 6px 2px 7px; font-weight: 650; color: #6e6f78; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.studio .cfu-tabs i.on { color: #4f46e5; border-bottom-color: #4f46e5; }
.studio .cfu-table td { vertical-align: top; }
.studio .cfu-table td b { font-weight: 650; }
.studio .cfu-table th.cfu-r, .studio .cfu-table td.cfu-r { text-align: right; white-space: nowrap; }
.studio .hotelband { background: var(--paper); border-top: 1px solid var(--line); }
.studio .hotel-grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
@media (max-width: 940px) {
  .studio .hotel-grid { grid-template-columns: minmax(0, 1fr); }
}
.studio .hotel-shot { position: relative; }
.studio .hotel-shot .mock { min-width: 0; }
@media (max-width: 620px) {
  .studio .cfu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio .cfu .mbs-acts { flex-wrap: wrap; margin-left: 0; }
  .studio .cfu-hide { display: none; }
}

/* --------------------------------------------------------- site integration */
.studio h3 { line-height: 1.3; }
.studio section[id] { scroll-margin-top: 20px; }
.studio .st-hero .hero-say p { color: var(--soft); }

/* the studio hero's product shots sit inside the home page's purple band */
.band--purple .studio { color: #fff; }
.band--purple .studio .hero-duo { margin-top: 0; }
.band--purple .studio .st-hero p, .band--purple .studio .st-hero .hero-say p,
.band--purple .studio .hero-say p strong, .band--purple .studio .app-try-t b { color: #fff; }
.band--purple .studio .app-try-t .scan { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   The capabilities panel (2026-09-17) and the twelve capability pages.
   Twelve full-width bands became one card with a vertical nav; each band moved to
   /capabilities/<slug>/ with its own title, H1 and URL. The rail is the studio's own
   phase spine (.ws-sbtn in WDYE-Studio/public/portal.css) flattened to one column:
   tinted rail, the row you are on goes white, brand-colored and lifted.
   Spec and the measurements behind it: docs/notes/capabilities-panel-spec.md.
   ========================================================================== */
.studio .capsband { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* the panel and the Build It / See It section above it are both .capsband, so the panel takes a
   tint of its own or the two paper bands run together with a hairline between them. It stays
   LIGHTER than the rail inside its card (--surface), so the rail still reads as a tint. */
.studio #capabilities.capsband { background: color-mix(in srgb, var(--indigo) 4%, #fff); }
.studio .caps { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 38px; }
.studio .caps-rail { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px 20px; }
.studio .caps-grp { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 20px 0 7px; padding: 0 11px; }
.studio .caps-grp:first-child { margin-top: 6px; }
/* the rail has to announce itself: a column of thirteen quiet rows reads as a caption until it says
   what it is and the rows carry a chevron (owner, 2026-09-17: "the user won't know to click") */
.studio .caps-rail-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); margin: 2px 0 10px; padding: 4px 11px 11px; border-bottom: 1px solid var(--line); }
.studio .caps-rail-h b { font-size: 11px; font-weight: 800; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, transparent); border-radius: 999px; padding: 2px 8px; }
.studio .caps-tab { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: var(--soft); font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; transition: background .14s, color .14s, box-shadow .14s; }
.studio .caps-tab > span { flex: 1 1 auto; }
.studio .caps-chev { width: 10px; height: 10px; flex: none; color: #dcdee7; stroke-width: 1.7; transition: color .14s, transform .14s; }
.studio .caps-tab:hover .caps-chev { color: #a6aab8; transform: translateX(2px); }
.studio .caps-tab.on .caps-chev { color: var(--indigo); }
.studio .caps-tab svg { width: 18px; height: 18px; flex: none; color: #9aa0b0; transition: color .14s; }
.studio .caps-tab:hover { background: #fff; color: var(--ink); }
.studio .caps-tab:hover svg { color: var(--soft); }
.studio .caps-tab.on { background: #fff; color: var(--indigo); box-shadow: var(--shadow); }
.studio .caps-tab.on svg { color: var(--indigo); }
/* 600px holds the tallest pane, so switching capabilities never bounces the page under the cursor */
.studio .caps-panes { padding: 32px 34px 28px; min-width: 0; min-height: 600px; }
/* a pane is an anchor target (/#app and friends): once site.js has made it visible the browser
   scrolls to it, and without this the sticky header eats the first two lines of the heading */
.studio .caps-pane { scroll-margin-top: 112px; }
.studio .capsband { scroll-margin-top: 90px; }
/* .on is written by site.js. Without it every pane renders, which is the no-JS reading order */
.studio .caps.on .caps-pane { display: none; }
.studio .caps.on .caps-pane.on { display: block; }
.studio .caps-pane + .caps-pane { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.studio .caps.on .caps-pane + .caps-pane { margin-top: 0; padding-top: 0; border-top: 0; }
/* ⚠️ the pane's heading is .caps-h, never a bare h3: .studio .caps-pane h3 and .studio .af h3 have
   the same specificity, so a bare rule wins on source order and paints every bullet heading at 28px */
.studio .caps-pane .caps-h { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.12; letter-spacing: -.022em; font-weight: 800; margin: 0 0 9px; text-wrap: balance; max-width: 26ch; }
.studio .caps-pane .caps-lede { font-size: 16px; max-width: 74ch; }
.studio .caps-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; align-items: start; margin-top: 24px; }
.studio .caps-feats { gap: 18px; }
.studio .caps-feats .af h3 { font-size: 16px; }
.studio .caps-feats .af p { font-size: 14px; }
.studio .caps-foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.studio .caps-note { font-size: 12.5px; color: var(--faint); margin: 0; max-width: 46ch; }
/* the two links stay on the right whether or not they share the row with the plan line: without the
   auto margin they wrap onto their own line and jump to the LEFT, which is different alignment on
   every other screen width (measured: right at 1150 and up, left from 1000 down) */
.studio .caps-acts { display: flex; align-items: center; gap: 18px; flex: none; margin-left: auto; }
/* the way out of this pane for someone who never looked at the rail */
.studio .caps-next { font-size: 13.5px; font-weight: 700; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.studio .caps-next:hover { text-decoration: underline; }
.studio .caps-next span { display: inline-block; transition: transform .15s; }
.studio .caps-next:hover span { transform: translateX(3px); }
.studio .caps-more { font-size: 14.5px; padding: 11px 20px; flex: none; }
.studio .caps-shot { --pw: 156px; }
.studio .caps-shot .st-pair { padding: 26px 0 0; }
.studio .caps-shot .tbui, .studio .caps-shot .mbui { font-size: 9.5px; }
/* the wide studio tables were drawn for a full band: in half a pane they shed the columns their own
   narrow-screen rules already shed, rather than truncating every heading */
.studio .caps-shot .cfu-hide { display: none; }
.studio .caps-shot .cfu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.studio .caps-shot .mbs-table .c-num, .studio .caps-shot .mbs-table .c-exp { display: none; }
@media (max-width: 1080px) { .studio .caps { grid-template-columns: 222px minmax(0, 1fr); } }
@media (max-width: 940px) {
  .studio .caps-in { grid-template-columns: minmax(0, 1fr); }
  .studio .caps-shot { max-width: 540px; margin-top: 4px; --pw: 150px; }
}
@media (max-width: 860px) {
  /* the rail lies down as a grid, not a scroller: all twelve stay visible and nothing hides off the
     right edge where a thumb has to go looking for it (a scroller showed 1.5 of them at 390px) */
  .studio .caps { grid-template-columns: minmax(0, 1fr); }
  .studio .caps-rail { border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 5px; padding: 12px 12px 16px; }
  .studio .caps-rail-h { grid-column: 1 / -1; margin: 0 0 4px; padding: 2px 4px 10px; }
  .studio .caps-grp { grid-column: 1 / -1; margin: 12px 0 1px; padding: 0 4px; }
  .studio .caps-grp:first-child { margin-top: 2px; }
  .studio .caps-tab .caps-chev { display: none; }
  .studio .caps-acts { flex-wrap: wrap; gap: 14px; }
  /* under a phone's width the pair is wider than the column, so the foot stacks and reads left */
  .studio .caps-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .studio .caps-acts { margin-left: 0; }
  .studio .caps-note { max-width: none; }
  .studio .caps-tab { font-size: 12.5px; padding: 8px 9px; gap: 8px; }
  .studio .caps-tab svg { width: 16px; height: 16px; }
  .studio .caps-panes { padding: 26px 20px 24px; min-height: 0; }
}

/* ---- the capability pages ---- */
/* the band's own heading is the page's one H1 there, so it wears what h2 wears here */
.studio .app-head h1 { font-size: clamp(1.75rem, 3.7vw, 2.85rem); line-height: 1.06; letter-spacing: -.026em; margin: 0 0 12px; text-wrap: balance; font-weight: 800; }
.studio .capcrumbs { padding: 26px 0 0; }
.studio .capcrumbs .crumbs { margin: 0; }
.studio .capselse { background: var(--surface); border-top: 1px solid var(--line); padding: 64px 0; }
.studio .caps-else { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; }
.studio .caps-else .caps-grp { padding: 0 0 4px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
.studio .caps-else .caps-tab { padding: 8px 9px; }
.studio .caps-else .caps-tab:hover { background: var(--card); color: var(--ink); }
.studio .caps-else-note { margin-top: 26px; font-size: 13px; }
.studio .caps-else-note a { color: var(--indigo); font-weight: 700; }
@media (max-width: 820px) { .studio .caps-else { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
/* the agenda band carries one tall portrait capture and two bullets: the shot goes full width under
   the head and the bullets sit side by side beneath it, rather than leaving half a column empty */
.studio .agenda-stage { max-width: 900px; margin: 30px auto 0; }
.studio .agenda-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; margin-top: 34px; }
@media (max-width: 760px) { .studio .agenda-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- the pane's picture enlarges (2026-09-17) ----
   His read of the panel: "putting it all in a box made everything smaller." Every pane shot opens
   in a lightbox at up to 1180px, where the wide tables get their hidden columns back and the phone
   pairs are drawn at 300px instead of 156. The lightbox closes from its Close button only: house
   rule, same as the pricing dialogs on this page. */
.studio .caps-shot { margin: 0; }
.studio .caps-zoomable { cursor: zoom-in; }
.studio .caps-zoomable a { cursor: pointer; }
.studio .caps-enlarge { display: block; margin: 16px auto 0; padding: 4px 6px; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--indigo); cursor: zoom-in; }
.studio .caps-enlarge:hover { text-decoration: underline; }
.studio .caps-visit { cursor: pointer; }
.studio .caps-visit span { display: inline-block; transition: transform .15s; }
.studio .caps-visit:hover span { transform: translateX(3px); }
.studio .caps-enlarge:focus-visible { outline: 2.5px solid var(--bracket); outline-offset: 2px; border-radius: 6px; }

/* the lightbox itself sits on <body>, outside .studio, so its inner shell re-declares the class */
.lb { border: 0; padding: 0; background: transparent; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; overflow: auto; overscroll-behavior: contain; }
.lb::backdrop { background: rgba(18, 15, 26, .86); }
.lb-shell { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 20px 40px; }
.lb-fit { width: min(1180px, 94vw); }
.lb-in { width: 100%; }
.lb-in .mock { font-size: 13px; }
.lb-in .tbui, .lb-in .mbui { font-size: 15px; }
.lb-in .mockscr { font-size: calc(var(--pw) * 0.052); }
.lb-in .st-pair { --pw: 300px; padding: 40px 0 0; }
.lb-x { position: fixed; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1f1e1e; border: 0; border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.lb-x:hover { background: #ede8f7; }
@media (max-width: 720px) { .lb-shell { padding: 60px 12px 28px; } .lb-in .st-pair { --pw: min(210px, 44vw); } .lb-in .tbui, .lb-in .mbui { font-size: 11px; } }

/* the one instruction in the panel's lede carries the weight of one */
.studio .caps-head .lede b { font-weight: 800; color: var(--ink); }