/* Home product panel (2026-09-23). Kept apart from mock.css, which another session also writes. */



/* Creative Studio carousel (ElevenLabs product panel). Untitled UI tokens: neutral-200 #E5E5E5 rules, neutral-900 / -600 / -500 text,
   text-lg 18/28 semibold titles, text-md 16/24 body, radius 12 on the tile, shadow-sm. One motion in the section: the centred loop. */
.el-car{--car-w:230px;--car-w-on:600px;--car-w-play:820px;--car-gap:44px;--car-pad:40px;display:flex;flex-direction:column;gap:22px}
.car-stage{position:relative;height:560px;overflow:hidden;border-radius:16px}
.car-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:var(--car-gap);padding:0 var(--car-pad);transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform}
.car-item{position:relative;flex:0 0 auto;width:var(--car-w);margin:0;display:flex;flex-direction:column;align-items:center;gap:20px;opacity:.55;transition:opacity .4s cubic-bezier(.4,0,.2,1),width .55s cubic-bezier(.16,1,.3,1);cursor:pointer}
.car-item.on{width:var(--car-w-on);opacity:1;cursor:default}
.car-item .car-loop{width:100%;aspect-ratio:12/7;object-fit:cover;object-position:top left;border-radius:12px;display:block;background:#F5F5F5;border:1px solid #E5E5E5;box-shadow:0 1px 3px rgba(10,10,10,.1),0 1px 2px -1px rgba(10,10,10,.1)}
.car-item.on .car-loop{box-shadow:0 24px 48px -32px rgba(10,10,10,.35),0 1px 3px rgba(10,10,10,.1)}
.car-item .car-play{position:absolute;left:50%;top:calc(var(--car-w-on) * 7 / 24);width:72px;height:72px;margin:-36px 0 0 -36px;border:1px solid #E5E5E5;border-radius:50%;background:#fff;color:#171717;display:none;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(10,10,10,.1),0 12px 28px -12px rgba(10,10,10,.35);transition:transform .15s cubic-bezier(.4,0,.2,1)}
.car-item.on .car-play{display:grid}
@media (hover:hover){.car-item.on .car-play:hover{transform:scale(1.05)}}
.car-item figcaption{text-align:center;display:grid;gap:4px;max-width:40ch}
.car-item figcaption b{font-size:18px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:#171717}
.car-item figcaption span{font-size:16px;line-height:24px;color:#525252}
.car-item:not(.on) figcaption b{color:#525252}
.car-item:not(.on) figcaption span{display:none}
/* arrows sit in the gap between the centre tile and its neighbours, at tile height */
.car-arrow{position:absolute;top:calc(var(--car-w-on) * 7 / 24);width:40px;height:40px;margin-top:-20px;border:1px solid #E5E5E5;border-radius:50%;background:#fff;color:#171717;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 1px 2px rgba(10,10,10,.05);transition:background .15s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.car-arrow:hover{background:#FAFAFA}}
.car-prev{left:calc(50% - var(--car-w-on) / 2 - var(--car-gap) / 2 - 20px)}.car-next{right:calc(50% - var(--car-w-on) / 2 - var(--car-gap) / 2 - 20px)}
/* Phones (2026-09-24, Emmet: "on mobile they should be slightly larger"): the active tile now takes
most of the width with the neighbours peeking, rather than 320px on a 390px screen. */
@media (max-width:1199px){.el-car{--car-w:min(74vw,300px);--car-w-on:min(90vw,390px);--car-w-play:min(96vw,420px);--car-gap:14px;--car-pad:12px}.car-stage{height:470px}.car-item{gap:14px}.car-item .car-play{width:60px;height:60px;margin:-30px 0 0 -30px}.car-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.car-track,.car-item,.car-live{transition:none;animation:none}}

/* one line above the panel (Emmet, 2026-09-23: "I like the try it below"), static, text-md */

/* while a tile plays live it widens so the workspace keeps its desktop layout; the neighbours narrow but stay in view */
.el-car.playing{--car-w-on:var(--car-w-play);--car-w:150px}
.car-stage{transition:height .4s cubic-bezier(.16,1,.3,1)}
.el-car.playing .car-stage{height:660px}
.car-media{position:relative;width:100%}
/* the frame keeps its play size and stays anchored to the tile's centre; the tile grows around it, so the workspace never reflows */
.car-media{overflow:hidden;border-radius:12px}
.car-live{position:absolute;left:50%;top:0;width:var(--car-w-play);height:calc(var(--car-w-play) * 7 / 12);transform:translateX(-50%);border-radius:12px;overflow:hidden;background:#FAFAFA;border:1px solid #E5E5E5;animation:carIn .25s cubic-bezier(.4,0,.2,1)}
/* the tool replicas are desktop layouts; squeezed into the ~820px tile their panels collapsed on top
   of each other (Emmet 2026-09-24: "every single one of these demos is broken"). Render the frame at
   its natural 1280x747 — the tile's own 12:7 — and scale it down, so the layout is the real one. */
.car-live iframe{position:absolute;left:0;top:0;width:1280px;height:747px;border:0;display:block;background:#FAFAFA;transform-origin:0 0;transform:scale(var(--fs,1))}
/* a warm frame sits under the loop, out of sight, already booted */
/* the warm frame boots at the size it will play at, so revealing it never reflows the workspace */
.car-live.is-warm{visibility:hidden;pointer-events:none;animation:none;z-index:-1}
.car-item.live .car-play{display:none}
/* sits OUTSIDE the frame: at top:10 right:10 it landed on the tool's own header, covering Costs and
   the version label, which read as the demo being broken (Emmet 2026-09-24). */
.car-close{position:absolute;top:-14px;right:-14px;z-index:6;width:36px;height:36px;border:1px solid #E5E5E5;border-radius:50%;background:#fff;color:#171717;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(10,10,10,.1),0 8px 20px -10px rgba(10,10,10,.45)}
.car-live{overflow:visible}
.car-live iframe{border-radius:12px}
@media (hover:hover){.car-close:hover{background:#FAFAFA}}
.el-car.playing .car-item:not(.on) figcaption{opacity:0}
@keyframes carIn{from{opacity:0}to{opacity:1}}
@media (max-width:1199px){.el-car.playing{--car-w:120px}}

/* Untitled UI hero at 375 (docs/untitled-ui-mobile-patterns.md): h1 display-md 36/44, primary then secondary each full width at 12px.
   Lives here because mock.css was mid-edit when the pass ran (2026-09-23). */
@media (max-width:600px){
  .hero h1{font-size:36px!important;line-height:44px!important;letter-spacing:-.02em!important;max-width:none!important}
  .hero .ctas{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .hero .ctas .btn{width:100%;justify-content:center}
}
@media (max-width:1199px){
  #compress.sec{padding-block:64px}
  #compress h2.anton{font-size:30px!important;line-height:38px!important}
}

/* bottom row: category chips left, the actions right (ElevenLabs product panel) */
.car-cats{align-items:center}
.car-cats .chips button{height:40px;padding:0 16px;font-size:16px;line-height:24px;font-weight:500;color:#525252;border:1px solid transparent;border-radius:999px;background:transparent}
@media (hover:hover){.car-cats .chips button:hover{color:#171717;background:rgba(10,10,10,.04)}}
.car-cats .chips button[aria-selected="true"]{background:#fff;color:#171717;border-color:#E5E5E5;box-shadow:0 1px 2px rgba(10,10,10,.05)}
.car-item[hidden]{display:none}
@media (max-width:1199px){.car-cats .chips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.car-cats .chips::-webkit-scrollbar{display:none}}

/* === mobile-watch (appended; do not merge into rules above) === */
/* Studio tab: 44px close button and tool-filter chips (2026-09-23 sweep) */
@media (max-width:1199px){.car-close{width:44px;height:44px}.car-cats .chips button{min-height:44px}}
/* seg tabs and carousel arrows back to 44px after the 14:43 save (kit tab strip 44) */
@media (max-width:1199px){.panel.el .seg button{min-height:44px!important}.car-arrow{width:44px;height:44px;margin-top:-22px}}
/* the segmented control now sits in .seg-row outside .panel.el; kit tab strip 44px */
@media (max-width:1199px){.seg-row .seg button{min-height:44px!important}}
/* Studio carousel on phones (coordinator, 2026-09-23 15:26): the desktop choreography (absolute track, JS translateX, fixed 420/660px stage,
   tiles shrinking to 120px while one plays, the live frame centred on a 120px tile and clipped by .car-media) is replaced by a native snap rail.
   transform/height are !important so the inline translateX and the .playing height never apply under 1024. */
@media (max-width:1199px){
  .el-car,.el-car.playing{--car-w:min(92vw,420px);--car-w-on:min(92vw,420px);--car-w-play:min(92vw,420px);--car-gap:10px;--car-pad:12px}  /* Emmet 2026-09-24: "on mobile they should be slightly larger" */
  .car-stage,.el-car.playing .car-stage{height:auto!important;overflow:visible;border-radius:0;transition:none}
  .car-track{position:static!important;height:auto!important;transform:none!important;transition:none;display:flex;align-items:flex-start;gap:10px;padding:0 12px 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;will-change:auto}
  .car-track::-webkit-scrollbar{display:none}
  .car-item,.car-item.on,.el-car.playing .car-item,.el-car.playing .car-item.on{width:min(92vw,420px);flex:0 0 auto;scroll-snap-align:center;scroll-snap-stop:always;opacity:1;gap:12px;transition:none}
  .car-item:not(.on) figcaption b{color:#171717}
  .car-item:not(.on) figcaption span{display:block}
  .el-car.playing .car-item:not(.on) figcaption{opacity:1}
  /* 4px let the description run the full card width and kiss both edges, so any rail scroll offset
     sliced the first and last glyph. 16px matches the page gutter and keeps the text off the edge. */
  .car-item figcaption{max-width:none;padding:0 16px}
  .car-live{left:0;top:0;width:100%;height:100%;transform:none;border-radius:12px}
}
/* filter chips are a one-line rail: no wrapping inside a chip, no shrinking */
@media (max-width:1199px){.car-cats .chips button{white-space:nowrap;flex:0 0 auto}}
/* === end mobile-watch === */

/* the centred play button keeps its cool ring */
.car-item.on .car-play{animation:panelPlayPulse 1.8s ease-in-out infinite}
.car-item.on .car-play:hover{animation:none}
@keyframes panelPlayPulse{0%,100%{box-shadow:0 1px 3px rgba(10,10,10,.1),0 12px 28px -12px rgba(10,10,10,.35),0 0 0 0 rgba(89,37,220,0)}50%{box-shadow:0 1px 3px rgba(10,10,10,.1),0 12px 28px -12px rgba(10,10,10,.35),0 0 0 8px rgba(89,37,220,.22)}}
@media (prefers-reduced-motion:reduce){.car-item.on .car-play{animation:none}}


/* product toggle (ElevenLabs reference, 2026-09-23): one compact pill control centred at the top of the box with air around it.
   The selected option is a white pill in its product's colour, red for Strategy and the Studio's cool purple; the other is plain text. */
.seg-mark{display:none}
.seg-row{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.seg-row .seg{display:inline-flex;width:max-content;max-width:100%;padding:4px;gap:0;border-radius:999px;background:#F3F3F1;border:1px solid #E5E5E5;box-shadow:none}
.seg-row .seg button{flex:0 0 auto;height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:#525252;font-size:16px;font-weight:500;line-height:24px;box-shadow:none;cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.seg-row .seg button:hover{color:#171717}
.seg-row .seg [data-p="cse"][aria-selected="true"],.seg-row .seg [data-p="cse"][aria-selected="true"]:hover{background:#fff;color:#B42318;box-shadow:0 1px 2px rgba(10,10,10,.06),0 1px 3px rgba(10,10,10,.06)}
.seg-row .seg [data-p="studio"][aria-selected="true"],.seg-row .seg [data-p="studio"][aria-selected="true"]:hover{background:#fff;color:#5925DC;box-shadow:0 1px 2px rgba(10,10,10,.06),0 1px 3px rgba(10,10,10,.06)}
.panel.el .pane.on{padding-top:28px}
@media (max-width:700px){.panel.el .seg{margin:18px auto 4px}.seg-row .seg button{height:40px;padding:0 14px;font-size:15px}}
/* one continuous card: the product tint washes the whole box from the top, the pane itself is transparent */
.panel.el{background:linear-gradient(180deg,var(--tint) 0%,#F3F3F1 360px)!important;transition:background .3s}
.panel.el .pane.on{background:transparent!important}


/* the cue sits to the left of the toggle and steps aside once the toggle has been used */
.tryit{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:16px;line-height:24px;font-weight:500;color:#525252;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
.tryit svg{width:16px;height:16px;animation:tryitNudge 1.6s ease-in-out infinite}
.tryit.seen{opacity:0;transform:translateX(-6px);pointer-events:none}
@keyframes tryitNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:700px){.seg-row{gap:10px}.tryit{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.tryit svg{animation:none}}

/* consent banner, verbatim from public/cse/cse.css (unscoped: it sits outside .prod-wrap) */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--plate-2);color:var(--sheet);display:none;justify-content:space-between;align-items:center;gap:20px;padding:16px var(--gutter);font-size:16px;border-top:1px solid var(--plate-rule);flex-wrap:wrap}
#consent-banner .acts{display:flex;gap:10px}

/* 2026-09-24: where the live tool embed is not served (production), play grows the tile and runs its loop with controls in the same frame */
.car-live.car-loopin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0A0A0A}

/* Phones (2026-09-24, Emmet: "no left and ride arrow on creative studio loops"): the rail is a native snap scroller here,
   so the arrows ride on top of it at the tile's midline instead of sitting in the desktop gutters. */
@media (max-width:1199px){
  .car-arrow{display:grid;top:calc(24.5vw - 22px);margin-top:0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(10,10,10,.14),0 8px 20px -12px rgba(10,10,10,.4)}
  .car-prev{left:10px;right:auto}
  .car-next{right:10px;left:auto}
  .el-car.playing .car-arrow{display:none}
}
/* the category strip scrolls on phones but cut "Post-production" dead with no sign it moved: fade the right edge */
@media (max-width:1199px){
  .car-cats .chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);padding-right:20px}
}