/* usecase.css · the shared layer for the four "Secure AI agents" use-case pages (2026-10-04): Employee AI agents (first, emp), AI coding
   agents, Autonomous AI agents and Shadow AI agents. The design is ElevenLabs' use-case page ("AI agents for customer support",
   elevenlabs-agents-customer-support-02/-04/-05/-07/-08) rebuilt in our theme: a dark split hero, one white middle, a dark close
   (build/solutions-v2/GUIDE-UC.md). Load after /pages/solution.css, which supplies the parts placed here (the dark console sol-cs*, the
   tool-call rows sol-tc*, the approval card sol-ap*, dots, outcome colours, sol-dk). Each page keeps its gradient and every scene in its own
   CSS (its own prefix); nothing page-specific lives here. Hawcx screens are dark; third-party tools stay light.
   What lives here, by section:
     1 split hero ........ .uc-hero .uc-hgrid .uc-hcopy .uc-h1 · the tray .uc-tray (a compact sol-cs with no sidebar, the approval .uc-ap
                           landing over its lower right)
     3 name many ......... .uc-many (cl-many + cl-stage sizing) · a light third-party window shell .uc-win · a Hawcx decision inside a
                           light tool .uc-hx
     4 platform tray ..... .uc-film (cl-many driven by calm-many.js): the --sol-card-field tray, a dark Hawcx app shell .uc-app whose
                           [data-panel]s swap, and the progress captions under it on white (ElevenLabs -07)
     5 route columns ..... .uc-routes (cl-icols with a text link each)
     6 a three-column band (cl-icols, no shared CSS needed)
     7 get started ....... .uc-start (v3, ElevenLabs outbound "Get started"): a centred title, two stone cards side by side, each with a
                           heading, one line, one pill and a small Hawcx view (.uc-start-view, dark) sitting at the card's foot
     9 close ............. .uc-sibs (the quiet row of sibling use-case links under the pill pair)
   v3 (2026-10-04, user: "Layout of elevenlabs here is better like this page: elevenlabs.io/outbound-agents"): outbound's section order;
   the hero's steps read as plain words, not tool-call names (user: "Okta's content feels more human to read"). */

/* ---------- 1 · split hero: copy left (crumb at the top, the words at the bottom), one tall tray right ---------- */
body.elv .uc-hero{padding:56px 0 104px}
body.elv .uc-hgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:56px;align-items:stretch}
body.elv .uc-hcopy{display:flex;flex-direction:column;min-width:0}
body.elv .uc-hcopy .cl-crumb ol{margin:0}
body.elv .uc-hbot{margin-top:auto;padding-top:40px}
/* the head term on line 1, the dim continuation under it; set a step below the full-width H1 because the column is half the page
   (ElevenLabs sets its split-hero H1 smaller than its centred ones) */
body.elv .uc-h1{max-width:none;font-size:46px;line-height:52px}
body.elv .uc-h1>span{display:block;color:rgba(255,255,255,.55)}
body.elv .uc-hlede{max-width:480px;margin-top:20px}
body.elv .uc-hctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}

/* the tray: the page's own field (solution.css .sol-tray), one job decided live */
body.elv .sol-tray.uc-tray{height:640px;margin-top:0}
body.elv .uc-tray .sol-wtag2{left:28px}
body.elv .uc-tray .sol-cs{left:28px;right:28px;top:64px}
body.elv .uc-tray .sol-cs-body{grid-template-columns:minmax(0,1fr)}
body.elv .uc-tray .sol-cs-main{padding:22px 26px 18px;gap:14px}
body.elv .uc-tray .sol-tc-r--held .sol-tc-why{color:#7aa7ff}
/* plain-language steps (v3): the step in words, its detail dim beside it */
body.elv .uc-tray .sol-tc-n b{font-size:13px;font-weight:500}
/* the composer shows only where nothing lands over it (1100px and below) */
body.elv .uc-tray .sol-cs-comp{display:none}
/* the approval lands over the console's lower right, below the last tool call, as a second Hawcx surface (the approver's) */
body.elv .uc-ap{position:absolute;right:20px;bottom:20px;z-index:2;width:332px;display:flex;flex-direction:column;align-items:flex-start}
body.elv .uc-ap .sol-ap{margin-top:0;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -24px rgba(0,0,0,.9)}
body.elv .uc-ap .sol-ap-done{margin-top:10px}

/* ---------- 3 · name many, explain one: the list left, a stone stage right holding one light tool window ---------- */
body.elv .uc-many{margin-top:56px}
body.elv .uc-many .cl-many-btn{color:var(--ink-60)}
body.elv .uc-many .cl-many-btn:hover,body.elv .uc-many .cl-many-item.is-on .cl-many-btn{color:var(--ink)}
body.elv .uc-many .cl-stage{aspect-ratio:auto;height:480px}
body.elv .uc-many .cl-stage>[data-panel]{padding:40px}
/* a third-party tool's window (light): a title row, then the page's own content */
body.elv .uc-win{width:100%;max-width:520px;border-radius:14px;background:#fff;color:#1c1b18;font-size:13px;line-height:19px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -30px rgba(15,23,42,.32)}
body.elv .uc-win p{margin:0}
body.elv .uc-win-hd{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.07);font-size:12.5px;white-space:nowrap}
body.elv .uc-win-hd b{font-weight:500}
body.elv .uc-win-bd{padding:16px}
/* a Hawcx decision shown inside a light tool: the mark, the call in mono, the outcome, one reason under it */
body.elv .uc-hx{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:9px 12px;border-radius:10px;background:#f6f6f4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
body.elv .uc-hx .sol-mk{width:20px}
body.elv .uc-hx .sol-mono{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1c1b18}
body.elv .uc-hx-why{grid-column:2 / -1;margin:2px 0 0!important;font-size:12px;line-height:17px;color:rgba(28,27,24,.66)}

/* a Hawcx decision as a small dark toast docked in a light tool's window (v2 of the shadow page's scenes, user: "very tough to understand,
   its word like not product like"): the mark, the outcome word in its dark-platform colour, a few words why */
body.elv .uc-toast{display:flex;align-items:center;gap:10px;margin:0 12px 12px;padding:10px 14px;border-radius:12px;background:#161618;color:rgba(255,255,255,.72);font-size:12.5px;line-height:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 34px -18px rgba(0,0,0,.6)}
body.elv .uc-toast-mk .sol-mk{display:block;width:20px}
body.elv .uc-toast-o{font-weight:500;color:#fff}
body.elv .uc-toast .sol-o--ok{color:#4cc488}
body.elv .uc-toast .sol-o--held{color:#7aa7ff}
body.elv .uc-toast .sol-o--rej{color:#f0a456}
body.elv .uc-toast .sol-o--deny{color:#ff7d7a}
body.elv .uc-toast-w{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 4 · the platform tray: one dark Hawcx view on the page's card field, three progress captions under it ---------- */
body.elv .uc-film{margin-top:56px}
body.elv .uc-film-tray{position:relative;height:470px;border-radius:24px;overflow:hidden;background:var(--sol-card-field,var(--sol-field));background-color:var(--sol-field-base,#0a3cb0)}
body.elv .uc-app{position:absolute;left:50%;top:48px;bottom:-1px;width:min(880px,calc(100% - 112px));transform:translateX(-50%);display:flex;flex-direction:column;
  border-radius:14px 14px 0 0;background:#161618;color:rgba(255,255,255,.9);font-size:13px;line-height:20px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(0,0,0,.85)}
body.elv .uc-app p{margin:0}
body.elv .uc-app-top{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap}
body.elv .uc-app-top .sol-mk{width:20px}
body.elv .uc-app-top b{font-weight:500;color:#fff}
body.elv .uc-app-top i{font-style:normal;color:rgba(255,255,255,.3)}
body.elv .uc-app-who{display:flex;align-items:center;gap:7px;margin-left:auto}
body.elv .uc-app-who .sol-av{width:22px;height:22px;font-size:10.5px}
body.elv .uc-app-bd{position:relative;flex:1;min-height:0}
body.elv .uc-app-bd>[data-panel]{position:absolute;inset:0;padding:26px 32px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.elv .uc-app-bd>[data-panel].is-on{opacity:1;transform:none}
/* the captions: ElevenLabs' progress rails, on white under the tray */
body.elv .uc-film-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:32px 0 0;padding:0;list-style:none}
body.elv .uc-film .cl-many-item{padding:20px 0 0;border:0}
body.elv .uc-film .cl-many-item::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--ink-08)}
body.elv .uc-film .cl-many-bar{top:0;bottom:auto;height:2px;border-radius:2px}
body.elv .uc-film.is-run .cl-many-item.is-on .cl-many-bar::after{animation:clManyBar var(--dwell,5200ms) linear forwards}
body.elv .uc-film:not(.is-run) .cl-many-item.is-on .cl-many-bar::after{transform:scaleX(1)}
body.elv .uc-film .cl-many-item h3{font-size:18px;line-height:26px;font-weight:400;letter-spacing:-.005em}
body.elv .uc-film .cl-many-btn{color:var(--ink-60)}
body.elv .uc-film .cl-many-btn:hover,body.elv .uc-film .cl-many-item.is-on .cl-many-btn{color:var(--ink)}
body.elv .uc-film .cl-many-item>p{max-height:none;margin-top:6px;opacity:1;font-size:15px;line-height:23px;color:var(--ink-60)}

/* ---------- 5 · route columns: three industries, each with a text link ---------- */
body.elv .uc-routes{margin-top:56px}
body.elv .uc-routes .cl-icol p{max-width:320px}
body.elv .uc-routes .tlink{margin-top:16px;color:var(--ink)}

/* ---------- 7 · get started: two stone cards, each a heading, one line, a pill and a small dark Hawcx view at its foot ---------- */
body.elv .uc-start-h{max-width:none;text-align:center}
body.elv .uc-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
body.elv .uc-start-card{position:relative;display:flex;flex-direction:column;min-height:460px;padding:36px 36px 0;border-radius:20px;background:var(--stone);overflow:hidden}
body.elv .uc-start-tx h3{margin:0;font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.01em}
body.elv .uc-start-tx p{margin:8px 0 0;max-width:420px;font-size:15px;line-height:23px;color:var(--ink-60)}
body.elv .uc-start-tx .btn{margin-top:22px}
body.elv .uc-start-view{margin-top:auto;align-self:stretch;margin-bottom:-1px;padding:16px 20px 18px;border-radius:14px 14px 0 0;background:#161618;color:rgba(255,255,255,.88);font-size:13px;line-height:19px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.55)}
body.elv .uc-start-view p{margin:0}
/* outcome words in plain sentence case here, like the hero's steps */
body.elv .uc-start-view .sol-o{font:500 12px/18px var(--sans,Inter,system-ui,sans-serif);letter-spacing:0;text-transform:none}

/* ---------- 9 · close: the sibling use cases as a quiet row of text links under the pill pair ---------- */
body.elv .uc-sibs{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin:32px 0 0;padding:0;list-style:none;font-size:14px;line-height:20px;color:rgba(255,255,255,.55)}
body.elv .uc-sibs a{color:rgba(255,255,255,.8);transition:color .15s}
body.elv .uc-sibs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

@media (prefers-reduced-motion:reduce){body.elv .uc-app-bd>[data-panel]{transition:none}}
@media (max-width:1279px){
  body.elv .uc-h1{font-size:42px;line-height:48px}
}
/* 1101-1199: an even split, so the head term still holds one line */
@media (min-width:1101px) and (max-width:1199px){
  body.elv .uc-hgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
}
@media (max-width:1100px){
  body.elv .uc-hgrid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  body.elv .uc-hbot{padding-top:36px}
  body.elv .uc-h1{font-size:46px;line-height:52px}
  body.elv .uc-hlede{max-width:560px}
  /* the tray is full width here: the console left, the approval beside it on the field, level with the held call (retail's grammar) */
  body.elv .uc-tray .sol-cs{right:392px}
  body.elv .uc-tray .sol-cs-comp{display:flex}
  body.elv .uc-ap{top:270px;bottom:auto;right:28px;width:336px}
  body.elv .uc-many{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:48px}
  body.elv .uc-many .cl-stage{height:480px}
  body.elv .uc-many .cl-stage>[data-panel]{padding:28px}
  body.elv .uc-app{width:calc(100% - 64px)}
}
@media (max-width:980px){
  body.elv .uc-many{grid-template-columns:minmax(0,1fr);row-gap:32px}
  body.elv .uc-many .cl-stage{order:-1;height:440px}
}
/* the hero tray stacks from 919px, as solution.css does: the console, then the approval in the flow under it */
@media (max-width:919px){
  body.elv .sol-tray.uc-tray{height:auto;padding:14px 12px 16px}
  body.elv .uc-tray .sol-cs{position:relative;left:auto;right:auto;top:auto;bottom:auto;border-radius:12px}
  body.elv .uc-ap{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin-top:12px}
  body.elv .uc-film-steps{gap:24px}
  body.elv .uc-start{grid-template-columns:minmax(0,1fr)}
  body.elv .uc-start-card{min-height:0;padding-top:28px}
  body.elv .uc-start-view{margin-top:28px}
}
@media (max-width:760px){
  body.elv .uc-hero{padding:40px 0 64px}
  body.elv .uc-hbot{padding-top:28px}
  body.elv .uc-h1{font-size:36px;line-height:42px;letter-spacing:-.026em}
  body.elv .uc-hlede{margin-top:16px}
  body.elv .uc-hctas{margin-top:24px}
  body.elv .uc-tray .sol-cs-main{padding:16px 14px 14px;gap:12px}
  body.elv .uc-many .cl-stage{height:auto;min-height:0;display:grid}
  body.elv .uc-many .cl-stage>[data-panel]{position:relative;inset:auto;grid-area:1 / 1;padding:20px 14px}
  body.elv .uc-win-hd{padding:0 12px}
  body.elv .uc-win-bd{padding:14px 12px}
  body.elv .uc-hx{padding:8px 10px;column-gap:8px}
  body.elv .uc-film-tray{height:auto;border-radius:18px;padding:16px 12px 0}
  body.elv .uc-app{position:relative;left:auto;top:auto;bottom:auto;width:auto;transform:none;border-radius:12px 12px 0 0}
  body.elv .uc-app-top{padding:0 14px}
  body.elv .uc-app-bd{display:grid}
  body.elv .uc-app-bd>[data-panel]{position:relative;inset:auto;grid-area:1 / 1;padding:18px 16px 22px}
  body.elv .uc-film-steps{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:24px}
  body.elv .uc-film .cl-many-item h3{font-size:17px;line-height:24px}
  body.elv .uc-sibs{gap:8px 18px;margin-top:24px}
  body.elv .uc-start-h{text-align:left}
  body.elv .uc-start{margin-top:36px}
  body.elv .uc-start-card{padding:24px 20px 0;border-radius:18px}
  body.elv .uc-start-view{padding:14px 14px 16px}
}