/* ============================================================================
   studios.css — Marketing / Creative / Commerce studio landing pages.
   Flat, dark-first, single pink accent. NO gradients, NO glows (brand rule).
   Scoped under .studio-page so it never leaks. Reuses global --t-* tokens
   (auto light/dark) + --db-coral (#F71EC7) + Satoshi (--font-clash).
   Design vocabulary mirrors the homepage (hp-) + apps hub (ah-) so the three
   studios read as the same product. New classes use the st- prefix.
   ========================================================================== */

.studio-page{
  --st-line: color-mix(in srgb, var(--db-coral) 12%, transparent);
  --st-line-strong: color-mix(in srgb, var(--db-coral) 26%, transparent);
  --st-surface: var(--t-bg-elevated);
  --st-surface-2: var(--t-bg-card);
  --st-edge: clamp(20px, 5vw, 72px);
  --st-ease: cubic-bezier(.2,.7,.2,1);
  --st-spring: cubic-bezier(.34,1.56,.64,1);
  background: var(--t-bg);
  color: var(--t-text);
  font-family: var(--font-clash);
  letter-spacing: -.01em;
}
.studio-page main{ display:block; }
.studio-page *{ box-sizing: border-box; }
.studio-page ::selection{ background: var(--db-coral); color:#fff; }

.st-wrap{ max-width: 1200px; margin-inline:auto; padding-inline: var(--st-edge); }
.st-section{ padding-block: clamp(52px, 7vw, 104px); }
.st-section--tight{ padding-block: clamp(40px, 5vw, 72px); }
.st-section + .st-section{ border-top: 1px solid var(--st-line); }

/* ---- shared type ---------------------------------------------------------- */
.st-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color: var(--t-text-secondary);
}
.st-eyebrow .iconify{ font-size:15px; color: var(--db-coral); }
.st-head{ max-width: 62ch; }
.st-head--center{ margin-inline:auto; text-align:center; }
.st-h2{
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight:600; letter-spacing:-.03em;
  line-height:1.05; margin:14px 0 0; color: var(--t-text); text-wrap:balance;
}
.st-sub{
  color: var(--t-text-secondary); margin:14px 0 0; font-size: clamp(1rem,1.4vw,1.14rem);
  line-height:1.55; max-width: 60ch;
}
.st-head--center .st-sub{ margin-inline:auto; }
.st-accent{ color: var(--db-coral); }

/* ---- buttons -------------------------------------------------------------- */
.st-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:15px; line-height:1; cursor:pointer;
  border-radius:10px; border:1px solid transparent; padding:13px 24px; text-decoration:none;
  transition: transform .12s var(--st-ease), background .18s, color .18s, border-color .18s;
}
.st-btn .iconify, .st-btn svg{ font-size:18px; }
.st-btn:active{ transform: scale(.98); }
.st-btn--primary{ background: var(--db-coral); color:#fff; }
.st-btn--primary:hover{ background: color-mix(in srgb, var(--db-coral) 88%, #fff); color:#fff; }
.st-btn--ghost{ background: transparent; color: var(--t-text); border-color: var(--st-line-strong); }
.st-btn--ghost:hover{ border-color: var(--t-text); }
.studio-page a:focus-visible, .studio-page button:focus-visible{ outline:2px solid var(--db-coral); outline-offset:3px; }

/* ============================================================ HERO ========= */
.st-hero{ padding-top: clamp(84px, 9vw, 132px); padding-bottom: clamp(40px,5vw,64px); }
.st-hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items:center; }
.st-hero__grid > *{ min-width:0; }
@media(max-width: 940px){ .st-hero__grid{ grid-template-columns:1fr; } }
.st-hero__title{
  font-size: clamp(2.3rem, 5vw, 4rem); line-height:1.04; font-weight:640;
  letter-spacing:-.035em; margin:16px 0 0; text-wrap:balance;
}
.st-hero__title .intro{ color: var(--t-text); }
.st-hero__title .accent{ color: var(--db-coral); }
.st-hero__sub{ margin:18px 0 0; max-width: 52ch; color: var(--t-text-secondary); font-size: clamp(1.04rem,1.4vw,1.2rem); line-height:1.55; }
.st-hero__actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
@media(max-width:520px){ .st-hero__actions .st-btn{ flex:1 1 auto; } }
.st-hero__micro{ margin:16px 0 0; font-size:13px; color:var(--t-text-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.st-hero__micro .iconify{ color: var(--db-coral); font-size:15px; }

/* runs-on model row */
.st-runson{ margin-top:26px; padding-top:22px; border-top:1px solid var(--st-line); }
.st-runson__label{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--t-text-faint); }
.st-runson__models{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.st-runson__models span{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--t-text-secondary); }
.st-runson__models .iconify{ font-size:17px; opacity:.8; }

/* hero visual — URL input mock + output grid */
.st-hero__panel{
  border:1px solid var(--st-line-strong); border-radius:16px; background:var(--st-surface);
  padding: clamp(16px,2vw,22px); box-shadow: var(--t-card-shadow);
}
.st-inputmock{
  display:flex; align-items:center; gap:10px; border:1px solid var(--st-line-strong);
  border-radius:11px; background:var(--t-bg); padding:8px 8px 8px 14px; min-width:0;
}
.st-inputmock__icon{ color:var(--t-text-faint); font-size:19px; flex:none; }
.st-inputmock__ph{ flex:1; min-width:0; color:var(--t-text-faint); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-inputmock__go{ flex:none; display:inline-flex; align-items:center; gap:6px; background:var(--db-coral); color:#fff; font-weight:600; font-size:13px; border-radius:8px; padding:9px 14px; text-decoration:none; }
.st-inputmock__go:hover{ background: color-mix(in srgb, var(--db-coral) 88%, #fff); color:#fff; }
.st-outgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:14px; }
.st-outgrid__tile{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--st-line); aspect-ratio:3/4; background:var(--st-surface-2); }
.st-outgrid__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-outgrid__tile--wide{ grid-column: span 2; aspect-ratio: 16/11; }
.st-tag{ position:absolute; left:8px; bottom:8px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:rgba(10,10,10,.72); border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:4px 7px; }

/* ============================================================ MARQUEE ====== */
.st-marquee{ overflow:hidden; margin-inline: calc(-1 * var(--st-edge)); }
.st-marquee__track{ display:flex; gap:14px; width:max-content; animation: stMarquee 60s linear infinite; will-change:transform; }
.st-marquee:hover .st-marquee__track{ animation-play-state:paused; }
@keyframes stMarquee{ to{ transform: translateX(-50%); } }
.st-mtile{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--st-line); background:var(--st-surface-2); width:clamp(190px,20vw,250px); aspect-ratio:3/4; flex:none; }
.st-mtile img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(prefers-reduced-motion:reduce){ .st-marquee{ overflow-x:auto; } .st-marquee__track{ animation:none; } }

/* ============================================================ STEPS ======== */
.st-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,3vw,26px); margin-top: clamp(28px,4vw,44px); }
@media(max-width:760px){ .st-steps{ grid-template-columns:1fr; } }
.st-step{ display:flex; flex-direction:column; }
.st-step__num{ font-size:13px; font-weight:600; color:var(--db-coral); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.st-step__title{ font-size:clamp(1.2rem,2.2vw,1.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; margin:12px 0 0; color:var(--t-text); }
.st-step__desc{ color:var(--t-text-secondary); margin:10px 0 0; font-size:1rem; line-height:1.55; }
.st-step__img{ margin-top:18px; border-radius:11px; overflow:hidden; border:1px solid var(--st-line); aspect-ratio:16/11; background:var(--st-surface-2); }
.st-step__img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================ MODE GRID ==== */
.st-grid{ display:grid; gap:16px; margin-top: clamp(28px,4vw,44px); }
.st-grid--4{ grid-template-columns: repeat(4,1fr); }
.st-grid--3{ grid-template-columns: repeat(3,1fr); }
.st-grid--2{ grid-template-columns: repeat(2,1fr); }
@media(max-width:940px){ .st-grid--4{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:820px){ .st-grid--3{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .st-grid--4, .st-grid--3, .st-grid--2{ grid-template-columns:1fr; } }
.st-card{
  border:1px solid var(--st-line); border-radius:14px; background:var(--st-surface);
  padding: clamp(20px,2.4vw,26px); display:flex; flex-direction:column;
  transition: border-color .2s, transform .2s var(--st-ease);
}
.st-card:hover{ border-color: var(--db-coral); transform: translateY(-3px); }
.st-card__icon{
  width:42px; height:42px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--db-coral) 12%, transparent); color: var(--db-coral); font-size:22px; margin-bottom:16px;
}
.st-card h3{ font-size:1.14rem; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--t-text); line-height:1.3; }
.st-card p{ color:var(--t-text-secondary); margin:9px 0 0; font-size:.98rem; line-height:1.5; }
.st-card__link{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:.92rem; font-weight:600; color:var(--t-text); text-decoration:none; }
.st-card__link .iconify{ transition: transform .18s var(--st-ease); }
.st-card:hover .st-card__link{ color:var(--db-coral); }
.st-card:hover .st-card__link .iconify{ transform: translateX(3px); }

/* card with a media thumbnail on top */
.st-tcard{ border:1px solid var(--st-line); border-radius:14px; overflow:hidden; background:var(--st-surface); display:flex; flex-direction:column; text-decoration:none; transition:border-color .2s, transform .2s var(--st-ease); }
.st-tcard:hover{ border-color:var(--db-coral); transform:translateY(-3px); }
.st-tcard__media{ aspect-ratio:16/11; overflow:hidden; background:var(--st-surface-2); }
.st-tcard__media img, .st-tcard__media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--st-ease); }
.st-tcard:hover .st-tcard__media img{ transform:scale(1.04); }
.st-tcard__body{ padding: clamp(18px,2vw,22px); }
.st-tcard__body h3{ font-size:1.1rem; font-weight:600; margin:0; color:var(--t-text); }
.st-tcard__body p{ color:var(--t-text-secondary); margin:8px 0 0; font-size:.96rem; line-height:1.5; }

/* ============================================================ FEATURE ROW == */
.st-feature{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }
.st-feature + .st-feature{ margin-top: clamp(40px,6vw,80px); }
.st-feature--alt .st-feature__media{ order:2; }
@media(max-width:860px){ .st-feature{ grid-template-columns:1fr; } .st-feature--alt .st-feature__media{ order:0; } }
.st-feature__media{ border-radius:14px; overflow:hidden; border:1px solid var(--st-line); background:var(--st-surface-2); }
.st-feature__media img, .st-feature__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.st-feature__title{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.025em; line-height:1.1; margin:14px 0 0; color:var(--t-text); }
.st-feature__desc{ color:var(--t-text-secondary); margin:14px 0 0; font-size:1.05rem; line-height:1.6; max-width:46ch; }
.st-checks{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.st-checks li{ display:flex; gap:11px; align-items:baseline; color:var(--t-text); font-size:1rem; line-height:1.45; }
.st-checks li .iconify{ color:var(--db-coral); font-size:19px; flex:none; position:relative; top:3px; }
.st-feature__cta{ margin-top:22px; display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--t-text); text-decoration:none; }
.st-feature__cta:hover{ color:var(--db-coral); }
.st-feature__cta .iconify{ transition: transform .18s var(--st-ease); }
.st-feature__cta:hover .iconify{ transform: translateX(3px); }

/* ============================================================ BEFORE/AFTER = */
.st-ba-row{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top: clamp(28px,4vw,44px); }
@media(max-width:720px){ .st-ba-row{ grid-template-columns:1fr; } }
.st-ba-cell{ border:1px solid var(--st-line); border-radius:14px; overflow:hidden; background:var(--st-surface); }
.st-ba{ position:relative; width:100%; aspect-ratio:4/3; cursor:ew-resize; user-select:none; -webkit-user-select:none; }
.st-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.st-ba-before{ clip-path: inset(0 50% 0 0); z-index:1; }
.st-ba-divider{ position:absolute; top:0; left:50%; height:100%; width:2px; background:#fff; transform:translateX(-1px); pointer-events:none; z-index:2; }
.st-ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.35); pointer-events:none; z-index:3; }
.st-ba-handle svg{ width:16px; height:10px; color:#111; }
.st-ba-label{ position:absolute; bottom:10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(10,10,10,.72); border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:4px 8px; z-index:4; }
.st-ba-label--before{ left:10px; }
.st-ba-label--after{ right:10px; }
.st-ba-cap{ padding:14px 16px; border-top:1px solid var(--st-line); }
.st-ba-cap b{ font-size:.98rem; font-weight:600; color:var(--t-text); }
.st-ba-cap span{ display:block; font-size:.88rem; color:var(--t-text-faint); margin-top:3px; }

/* ============================================================ PROOF BAND ==== */
.st-proof{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top: clamp(28px,4vw,40px); }
@media(max-width:820px){ .st-proof{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .st-proof{ grid-template-columns:1fr; } }
.st-proof__cell{ border:1px solid var(--st-line); border-radius:14px; background:var(--st-surface); padding: clamp(20px,2.4vw,26px); }
.st-proof__val{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:640; letter-spacing:-.03em; color:var(--t-text); line-height:1; font-variant-numeric:tabular-nums; }
.st-proof__val .iconify{ color:var(--db-coral); }
.st-proof__label{ display:block; margin-top:10px; color:var(--t-text-secondary); font-size:.95rem; line-height:1.45; }

/* ============================================================ COMPARE 2-COL = */
.st-vs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top: clamp(28px,4vw,40px); }
@media(max-width:720px){ .st-vs{ grid-template-columns:1fr; } }
.st-vs__col{ border:1px solid var(--st-line); border-radius:14px; padding: clamp(22px,3vw,30px); background:var(--t-bg); }
.st-vs__col--win{ border-color:var(--st-line-strong); background:var(--st-surface); }
.st-vs__col h3{ margin:0 0 16px; font-size:13px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--t-text-secondary); }
.st-vs__col--win h3{ color:var(--db-coral); }
.st-vs__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.st-vs__col li{ display:flex; gap:11px; align-items:baseline; font-size:1rem; line-height:1.4; color:var(--t-text-secondary); }
.st-vs__col--win li{ color:var(--t-text); }
.st-vs__col li .iconify{ flex:none; position:relative; top:3px; font-size:18px; }
.st-vs__col li .i-x{ color:var(--t-text-faint); }
.st-vs__col li .i-check{ color:var(--db-coral); }

/* ============================================================ MODEL TABLE === */
.st-models__strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top: clamp(24px,3vw,36px); }
.st-modelchip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--st-line); border-radius:999px; padding:8px 14px; font-size:.9rem; font-weight:500; color:var(--t-text); text-decoration:none; background:var(--st-surface); transition:border-color .18s, transform .18s var(--st-ease); }
.st-modelchip:hover{ border-color:var(--db-coral); transform:translateY(-2px); color:var(--t-text); }
.st-modelchip .prov{ color:var(--t-text-faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.st-tablewrap{ margin-top:22px; border:1px solid var(--st-line); border-radius:14px; overflow:hidden; overflow-x:auto; background:var(--st-surface); }
.st-table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:560px; background:transparent; }
.st-table th, .st-table td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--st-line); background:transparent; }
.st-table thead tr, .st-table tbody tr{ background:transparent; }
.st-table thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--t-text-faint); font-weight:600; }
.st-table tbody tr:last-child td{ border-bottom:none; }
.st-table td b{ font-weight:600; color:var(--t-text); }
.st-table td .prov{ color:var(--t-text-faint); font-size:.82rem; }
.st-table td{ color:var(--t-text-secondary); }
.st-table a{ color:var(--t-text); text-decoration:none; }
.st-table a:hover{ color:var(--db-coral); }
.st-tabletype{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:6px; border:1px solid var(--st-line-strong); color:var(--t-text-secondary); }

/* ============================================================ INDUSTRY GRID = */
.st-inds{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top: clamp(28px,4vw,40px); }
@media(max-width:820px){ .st-inds{ grid-template-columns: repeat(2,1fr); } }
.st-ind{ display:flex; align-items:center; gap:11px; border:1px solid var(--st-line); border-radius:12px; background:var(--st-surface); padding:16px 18px; text-decoration:none; color:var(--t-text); font-weight:500; font-size:.98rem; transition:border-color .18s, transform .18s var(--st-ease); }
.st-ind:hover{ border-color:var(--db-coral); transform:translateY(-2px); color:var(--t-text); }
.st-ind .iconify{ color:var(--db-coral); font-size:21px; flex:none; }

/* ============================================================ FAQ (native) == */
.st-faq{ max-width: 860px; margin-inline:auto; }
.st-faq details{ border-bottom:1px solid var(--st-line); }
.st-faq details:first-of-type{ border-top:1px solid var(--st-line); }
.st-faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 4px; font-size:clamp(1.02rem,1.6vw,1.16rem); font-weight:600; color:var(--t-text); letter-spacing:-.01em;
}
.st-faq summary::-webkit-details-marker{ display:none; }
.st-faq summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--db-coral); line-height:1; flex:none; transition:transform .2s var(--st-ease); }
.st-faq details[open] summary::after{ content:"\2212"; }
.st-faq__ans{ padding:0 4px 24px; color:var(--t-text-secondary); font-size:1.02rem; line-height:1.65; max-width:74ch; }
.st-faq__ans a{ color:var(--db-coral); text-decoration:none; }
.st-faq__ans a:hover{ text-decoration:underline; }

/* ============================================================ FINAL CTA ===== */
.st-cta{ text-align:center; border-top:1px solid var(--st-line); }
.st-cta h2{ font-size:clamp(2rem,4.6vw,3.2rem); font-weight:640; letter-spacing:-.035em; line-height:1.08; margin:0 auto; max-width:20ch; color:var(--t-text); text-wrap:balance; }
.st-cta p{ color:var(--t-text-secondary); margin:16px auto 0; max-width:52ch; font-size:1.08rem; line-height:1.55; }
.st-cta__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.st-cta__micro{ margin-top:16px; font-size:13px; color:var(--t-text-faint); }

/* ============================================================ MISC ========== */
.st-updated{ font-size:12px; color:var(--t-text-faint); }
.st-crosslinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top: clamp(24px,3vw,36px); }
.st-crosslink{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--st-line); border-radius:10px; padding:11px 15px; font-size:.94rem; font-weight:500; color:var(--t-text); text-decoration:none; background:var(--st-surface); transition:border-color .18s, transform .18s var(--st-ease); }
.st-crosslink:hover{ border-color:var(--db-coral); transform:translateY(-2px); color:var(--t-text); }
.st-crosslink .iconify{ color:var(--db-coral); font-size:18px; }

/* entrance */
.st-fx{ opacity:0; transform:translateY(14px); animation: stRise .7s var(--st-ease) forwards; }
@keyframes stRise{ to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  .st-fx{ animation:none; opacity:1; transform:none; }
  .st-card:hover, .st-tcard:hover, .st-ind:hover, .st-modelchip:hover, .st-crosslink:hover{ transform:none; }
  .studio-page *{ transition:none !important; }
}