/* Product pages only. The studio design tokens come from site.css. */
.product-page .skip-link { position:absolute; left:1rem; top:-5rem; z-index:100; padding:.75rem 1rem; background:var(--card); color:var(--fg); }
.product-page .skip-link:focus { top:1rem; }
.product-page :is(a,button,summary,video):focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.product-hero .wrap { padding-top:clamp(2rem,3.5vw,3.2rem); padding-bottom:clamp(2rem,3.5vw,3.2rem); }
.product-breadcrumb { margin:0 0 1.2rem; font-size:.88rem; color:var(--hero-muted); }
.product-breadcrumb a { color:var(--hero-muted); }
.product-hero-grid { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:clamp(2rem,4.5vw,5rem); }
.product-hero-grid > * { min-width:0; }
.product-hero h1 { font-size:clamp(2.6rem,4.5vw,4.25rem); line-height:1.08; letter-spacing:-.025em; max-width:14ch; }
.product-hero .lede { font-size:clamp(1.04rem,1.35vw,1.17rem); line-height:1.75; max-width:40em; }
.product-hero .btn-row { margin-top:1.8rem; }
.product-note { color:var(--hero-muted); font-size:.86rem; margin:1rem 0 0; }
.product-media { margin:0; }
.product-video-shell { padding:.5rem; background:#070d15; border:1px solid #3c4655; border-radius:18px; box-shadow:0 20px 65px #0004; }
.product-video-shell video { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:11px; background:#080d15; }
.product-media figcaption { margin-top:.8rem; font-size:.82rem; color:var(--hero-muted); line-height:1.6; }
.product-media figcaption a { color:inherit; text-decoration:underline; }
.product-proof { border-bottom:1px solid var(--line); background:var(--paper-2); }
.product-proof .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; padding-top:1.2rem; padding-bottom:1.2rem; }
.product-proof span { display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:500; }
.product-proof span::before { content:""; width:6px; height:6px; background:var(--gold); border-radius:50%; flex:none; }
.product-page section.block { padding:clamp(2rem,4vw,3rem) 0; }
.product-section .section-head { max-width:760px; margin-bottom:1.5rem; }
.product-section .section-head > p:not(.kicker) { margin-top:1rem; }
.product-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:.5rem; }
.product-step { border-top:1px solid var(--line); padding-top:1.3rem; }
.product-step-number { display:block; color:var(--gold); font-size:.85rem; font-weight:700; letter-spacing:.08em; margin-bottom:.85rem; }
.product-step h3 { font-size:1.5rem; max-width:21ch; }
.product-step p { color:var(--muted); margin-bottom:0; max-width:42ch; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.product-detail-grid > * { min-width:0; }
.product-feature { border-top:1px solid var(--line); padding:1.4rem 0; }
.product-feature:first-child { border-top:0; padding-top:0; }
.product-feature h3 { font-size:1.32rem; }
.product-feature p { color:var(--muted); margin:.7rem 0 0; }
.product-tag { display:inline-block; vertical-align:middle; font:600 .69rem var(--font-text); letter-spacing:.03em; background:var(--gold-soft); color:var(--fg); padding:.28rem .55rem; border-radius:5px; margin-left:.35rem; }
.product-plans { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.product-plan { padding:clamp(1.5rem,3vw,2.5rem); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.product-plan--advanced { border-top:3px solid var(--gold); }
.product-plan h3 { font-size:1.8rem; }
.product-plan p { color:var(--muted); }
.product-plan ul { padding-left:1.2rem; margin:1.3rem 0 0; }
.product-plan li { padding:.35rem 0; line-height:1.65; }
.product-billing { margin:1.5rem 0 0; max-width:75ch; color:var(--muted); font-size:.94rem; }
.product-faq { max-width:960px; }
.product-faq details { border-bottom:1px solid var(--line); }
.product-faq summary { cursor:pointer; padding:1.3rem 1.7rem 1.3rem 0; font-weight:600; }
.product-faq details p { margin:0 0 1.3rem; color:var(--muted); max-width:76ch; }
.product-shot { margin:0; }
.product-shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.product-shot figcaption { margin:.9rem 0 0; color:var(--muted); font-size:.88rem; }
.product-cross-link { margin-top:1.7rem; color:var(--hero-muted); font-size:.9rem; }
.product-cross-link a { color:var(--hero-fg); text-decoration:underline; }
/* A useful, labelled example occupies the future ARG motion-graphics slot. */
.queue-demo { aspect-ratio:16/10; padding:clamp(1.2rem,2.4vw,2rem); color:#dce4ee; background:#171f2a; border:1px solid #455264; border-radius:18px; box-shadow:0 20px 65px #0004; display:flex; flex-direction:column; justify-content:center; }
.queue-demo-title { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.queue-demo-title strong { font-size:1.05rem; }
.queue-demo-title span { color:#aebccd; font-size:.75rem; }
.queue-demo-row { display:grid; grid-template-columns:1fr auto; gap:.35rem 1rem; margin:.45rem 0; padding:1rem; border:1px solid #435164; border-radius:10px; background:#222e3d; }
.queue-demo-row strong { font-size:.84rem; font-weight:600; }
.queue-demo-row p { margin:0; grid-column:1; color:#b2c0cf; font-size:.78rem; }
.queue-demo-status { grid-column:2; grid-row:1/3; align-self:center; padding:.4rem .65rem; border-radius:5px; background:#193e35; color:#b1f1ce; font-size:.7rem; font-weight:600; text-align:center; }
.queue-demo-status--pending { background:#493a1b; color:#ffe2a3; }
.queue-demo-status--sent { background:#263e61; color:#d1e1ff; }
.queue-demo-row--approved { border-left:3px solid #70c99f; }
.queue-demo-row--customer { border-left:3px solid #83b1fb; }
.queue-demo-row--customer .queue-demo-status { background:#263e61; color:#d1e1ff; }
.queue-demo-foot { margin:1rem 0 0; color:#aebccd; font-size:.75rem; }
@media (max-width:980px) {
  .product-hero-grid { grid-template-columns:1fr; gap:2.5rem; }
  .product-hero h1 { max-width:19ch; }
  .product-hero-grid .product-media { max-width:760px; width:100%; }
  .product-detail-grid { grid-template-columns:1fr; }
  .product-steps { gap:1.3rem; }
}
@media (max-width:640px) {
  .product-hero h1 { font-size:clamp(2.5rem,9.6vw,3.3rem); }
  .product-hero-grid { gap:2rem; }
  .product-breadcrumb { margin-bottom:1.5rem; }
  .product-proof .wrap { display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; }
  .product-proof span { font-size:.79rem; align-items:flex-start; }
  .product-proof span::before { margin-top:.5rem; }
  .product-steps,.product-plans { grid-template-columns:1fr; }
  .product-step { padding-top:1rem; }
  .product-step h3 { max-width:none; }
  .product-plan { padding:1.5rem; }
  .product-page .btn { justify-content:center; text-align:center; min-height:48px; }
  .queue-demo { aspect-ratio:auto; min-height:310px; padding:1rem; }
  .queue-demo-row { padding:.85rem; gap:.4rem .6rem; }
  .queue-demo-row strong { font-size:.77rem; }
  .queue-demo-row p { font-size:.73rem; }
  .queue-demo-status { font-size:.64rem; max-width:87px; }
}

/* Keep the approved portrait film uncropped beside the hero copy. */
.product-hero-grid .product-media--portrait { width:100%; max-width:360px; justify-self:center; }
.product-media--portrait video { aspect-ratio:9/16; object-fit:contain; }