/* ==========================================================================
   Use-case pages (resources/views/home/pages/use-case.blade.php)
   Every selector is tag-qualified (div.x, a.x): the inline styles these replace
   used to beat single-class rules such as revideo.css `.rv-scope a`.
   Prefix: uc-{section}__{role}. Values are the design's own declarations, moved
   out of style="" attributes (2026-09-11). Responsive / dark variants at the end.
   ========================================================================== */

/* ---- main ---- */
section.uc-main__section { max-width:1200px; margin:0 auto; padding:72px 32px 88px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:56px; align-items:center; }
div.uc-main__stack { display:flex; flex-direction:column; gap:22px; }
h1.uc-main__title { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(38px,4.6vw,60px); font-weight:800; letter-spacing:-.04em; line-height:1.02; text-wrap:pretty; animation:rv-up .6s cubic-bezier(.23,1,.32,1) both; }
p.uc-main__text { margin:0; font-size:19px; line-height:1.6; color:#5c5c70; max-width:480px; text-wrap:pretty; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .08s both; }
div.uc-main__anim { display:flex; gap:12px; flex-wrap:wrap; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .16s both; }
a.uc-main__btn { display:inline-flex; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:15px 12px 15px 24px; font-size:16px; font-weight:700; white-space:nowrap; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s; }
span.uc-main__row { width:32px; height:32px; border-radius:999px; background:#6d5ce6; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
a.uc-main__btn-2 { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid #e4e4ef; color:#40404f; border-radius:999px; padding:15px 22px; font-size:16px; font-weight:600; white-space:nowrap; transition:all .18s cubic-bezier(.23,1,.32,1); }
div.uc-main__anim-2 { display:flex; gap:26px; flex-wrap:wrap; padding-top:6px; animation:rv-up .6s cubic-bezier(.23,1,.32,1) .24s both; }
div.uc-main__stack-2, span.uc-main__stack-2 { display:flex; flex-direction:column; gap:3px; }
span.uc-main__big { font-family:'Plus Jakarta Sans',sans-serif; font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1; }
span.uc-main__label { font-size:12.5px; color:#8e8ea3; line-height:1.4; max-width:130px; }
div.uc-main__anim-3 { position:relative; animation:rv-up .7s cubic-bezier(.23,1,.32,1) .12s both; }
div.uc-main__card { background:linear-gradient(150deg,#16161d,#241f42); border-radius:26px; padding:24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; box-shadow:0 34px 72px -30px rgba(80,63,205,.45); }
div.uc-main__anim-4 { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#8b5cf6,transparent); width:30%; animation:rv-sweep 3.4s linear infinite; }
div.uc-main__glow { position:absolute; top:-90px; right:-70px; width:330px; height:330px; background:radial-gradient(circle,rgba(139,92,246,.3),transparent 66%); pointer-events:none; }
div.uc-main__row-2 { position:relative; display:flex; align-items:center; gap:10px; }
span.uc-main__label-2 { position:relative; width:8px; height:8px; flex-shrink:0; }
span.uc-main__layer { position:absolute; inset:0; border-radius:999px; background:#34d399; }
span.uc-main__ping { position:absolute; inset:0; border-radius:999px; background:#34d399; animation:rv-ping 2.2s ease-out infinite; }
span.uc-main__eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.1em; color:#34d399; white-space:nowrap; }
span.uc-main__label-3 { margin-left:auto; font-size:11.5px; color:#7c7c92; white-space:nowrap; }
div.uc-main__stack-3 { position:relative; display:flex; flex-direction:column; gap:9px; }
div.uc-main__stack-4 { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
span.uc-main__strong { font-size:13px; font-weight:700; color:#f0f0f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
span.uc-main__label-4 { font-size:11.5px; color:#7c7c92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.uc-main__box { position:relative; height:1px; background:rgba(255,255,255,.09); }
span.uc-main__label-5 { position:relative; font-size:12px; color:#8a8aa0; line-height:1.5; }
section.uc-main__section-2 { max-width:1200px; margin:0 auto; padding:0 32px 104px; display:flex; flex-direction:column; gap:30px; }
div.uc-main__stack-5 { display:flex; flex-direction:column; gap:13px; max-width:620px; }
span.uc-main__eyebrow-2 { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#77778c; }
h2.uc-main__title-2 { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(30px,3.2vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.06; text-wrap:pretty; }
div.uc-main__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
div.uc-main__card-2 { background:#fff; border:1px solid #ececf4; border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:14px; transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s; }
span.uc-main__pill { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#c81e1e; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; padding:5px 11px; white-space:nowrap; }
span.uc-main__strong-2 { font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.25; text-wrap:pretty; }
p.uc-main__text-2 { margin:0; font-size:14.5px; line-height:1.6; color:#5c5c70; }
div.uc-main__row-3 { margin-top:auto; padding-top:6px; display:flex; align-items:center; gap:10px; border-top:1px solid #f4f4f9; }
span.uc-main__label-6 { font-size:12px; color:#8e8ea3; flex:1; min-width:0; }
span.uc-main__strong-3 { font-size:15px; font-weight:800; letter-spacing:-.02em; color:#c81e1e; white-space:nowrap; }
section.uc-main__section-3 { max-width:1200px; margin:0 auto; padding:0 32px 104px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:56px; align-items:center; }
div.uc-main__stack-6 { display:flex; flex-direction:column; gap:24px; }
span.uc-main__pill-2 { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; background:#f0effa; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#4c3fbf; }
div.uc-main__stack-7 { display:flex; flex-direction:column; gap:18px; }
div.uc-main__row-4 { display:flex; gap:13px; align-items:flex-start; }
span.uc-main__row-5 { width:25px; height:25px; border-radius:999px; background:#f0effa; border:1px solid #ddd6fe; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
span.uc-main__strong-4 { font-size:16px; font-weight:700; letter-spacing:-.01em; }
span.uc-main__label-7 { font-size:14.5px; color:#5c5c70; line-height:1.55; }
a.uc-main__btn-3 { display:inline-flex; align-self:flex-start; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:14px 11px 14px 23px; font-size:15.5px; font-weight:700; white-space:nowrap; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s; }
span.uc-main__row-6 { width:30px; height:30px; border-radius:999px; background:#6d5ce6; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
div.uc-main__card-3 { position:relative; background:#fff; border:1px solid #ececf4; border-radius:26px; padding:26px; box-shadow:0 30px 66px -30px rgba(80,63,205,.24); display:flex; flex-direction:column; gap:16px; transition:transform .34s cubic-bezier(.23,1,.32,1); }
div.uc-main__row-7 { display:flex; align-items:center; gap:12px; }
div.uc-main__row-8, span.uc-main__row-8 { display:flex; flex-direction:column; gap:2px; min-width:0; }
span.uc-main__strong-5 { font-size:15px; font-weight:800; letter-spacing:-.01em; }
span.uc-main__label-8 { font-size:12px; color:#8e8ea3; }
span.uc-main__pill-3 { margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#00915f; background:#e8f8f1; border:1px solid #b9e8d4; border-radius:999px; padding:5px 11px; white-space:nowrap; flex-shrink:0; }
div.uc-main__stack-8 { display:flex; flex-direction:column; gap:0; }
div.uc-main__row-9 { display:flex; gap:14px; }
div.uc-main__stack-9 { display:flex; flex-direction:column; align-items:center; width:14px; flex-shrink:0; }
div.uc-main__stack-10 { display:flex; flex-direction:column; gap:3px; padding-bottom:18px; min-width:0; flex:1; }
span.uc-main__strong-6 { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
span.uc-main__label-9 { font-size:13px; color:#8e8ea3; line-height:1.5; }
span.uc-main__label-10 { font-size:11.5px; color:#8e8ea3; white-space:nowrap; flex-shrink:0; }
section.uc-main__section-4 { max-width:1200px; margin:0 auto; padding:0 32px 104px; }
div.uc-main__card-4 { background:linear-gradient(150deg,#16161d,#241f42); border-radius:32px; padding:48px; position:relative; overflow:hidden; box-shadow:0 40px 88px -38px rgba(80,63,205,.5); }
div.uc-main__glow-2 { position:absolute; top:-180px; left:4%; width:520px; height:520px; background:radial-gradient(circle,rgba(88,80,236,.3),transparent 66%); pointer-events:none; }
div.uc-main__glow-3 { position:absolute; bottom:-200px; right:-60px; width:480px; height:480px; background:radial-gradient(circle,rgba(168,85,247,.24),transparent 66%); pointer-events:none; }
div.uc-main__grid-2 { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:48px; align-items:center; }
span.uc-main__pill-4 { display:inline-flex; align-self:flex-start; align-items:center; gap:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 14px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#c4b5fd; }
h2.uc-main__title-3 { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(27px,2.9vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:#fff; text-wrap:pretty; }
p.uc-main__text-3 { margin:0; font-size:16.5px; line-height:1.65; color:#a3a3bd; max-width:480px; text-wrap:pretty; }
div.uc-main__row-10 { display:flex; align-items:center; gap:13px; }
span.uc-main__strong-7 { display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:700; color:#fff; }
span.uc-main__strong-8 { width:15px; height:15px; border-radius:999px; background:#6d5ce6; color:#fff; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.uc-main__label-11 { font-size:12.5px; color:#7c7c92; }
div.uc-main__stack-11 { display:flex; flex-direction:column; gap:12px; }
div.uc-main__card-5 { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:4px; }
span.uc-main__strong-9 { font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1; color:#fff; }
span.uc-main__label-12 { font-size:12.5px; color:#8a8aa0; line-height:1.45; }
section.uc-main__section-5 { max-width:1200px; margin:0 auto; padding:0 32px 104px; display:flex; flex-direction:column; gap:26px; }
h2.uc-main__title-4 { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
div.uc-main__grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
a.uc-main__link { text-align:left; cursor:pointer; background:#fff; border:1px solid #ececf4; border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:12px; font-family:'Plus Jakarta Sans',sans-serif; transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s,border-color .3s; text-decoration:none; }
span.uc-main__strong-10 { font-size:18px; font-weight:800; letter-spacing:-.02em; color:#16161d; }
span.uc-main__label-13 { font-size:14px; color:#5c5c70; line-height:1.55; }
span.uc-main__strong-11 { font-size:13px; font-weight:700; color:#6d5ce6; padding-top:2px; }
div.uc-main__card-6 { background:#fff; border:1px solid #ececf4; border-radius:30px; padding:52px; display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center; box-shadow:0 24px 56px -30px rgba(22,22,29,.16); }
h2.uc-main__title-5 { margin:0; font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(30px,3.4vw,44px); font-weight:800; letter-spacing:-.035em; line-height:1.06; max-width:640px; text-wrap:pretty; }
p.uc-main__text-4 { margin:0; font-size:17.5px; line-height:1.6; color:#5c5c70; max-width:520px; text-wrap:pretty; }
a.uc-main__btn-4 { display:inline-flex; align-items:center; gap:11px; background:#16161d; color:#fff; border-radius:999px; padding:16px 13px 16px 26px; font-size:17px; font-weight:700; white-space:nowrap; transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s; }
span.uc-main__row-11 { width:34px; height:34px; border-radius:999px; background:#6d5ce6; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.uc-main__label-14 { font-size:13px; color:#77778c; }

/* ── ported from responsive-v4.css (these classes replaced inline values that file targeted) ── */
@media (max-width: 980px) {
    section.uc-main__section-3,
    section.uc-main__section,
    div.uc-main__grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
        section.uc-main__section { padding: 40px 20px 56px !important; gap: 36px !important; }
        section.uc-main__section-2,
    section.uc-main__section-3,
    section.uc-main__section-4,
    section.uc-main__section-5 { padding: 0 20px 64px !important; }
        div.uc-main__card-4 { padding: 28px 22px !important; }
        div.uc-main__card-6 { padding: 32px 22px !important; }
        p.uc-main__text-4,
    h2.uc-main__title-5,
    div.uc-main__stack-5 { width: auto !important; max-width: 100% !important; }
    }

/* ── ported from dark-v4.css (these classes replaced inline values that file targeted) ── */
[data-theme="dark"] a.uc-main__btn-2,
[data-theme="dark"] div.uc-main__card-2,
[data-theme="dark"] div.uc-main__card-3,
[data-theme="dark"] a.uc-main__link,
[data-theme="dark"] div.uc-main__card-6 { background: var(--rv-surface) !important; }
[data-theme="dark"] span.uc-main__pill-2,
[data-theme="dark"] span.uc-main__row-5 { background: var(--rv-surface-4) !important; }
[data-theme="dark"] span.uc-main__pill { background: var(--rv-danger-wash) !important; }
[data-theme="dark"] span.uc-main__pill-3 { background: var(--rv-success-wash) !important; }
[data-theme="dark"] a.uc-main__btn,
[data-theme="dark"] a.uc-main__btn-3,
[data-theme="dark"] a.uc-main__btn-4,
[data-theme="dark"] div.uc-main__card,
[data-theme="dark"] div.uc-main__card-4 { background: var(--rv-surface-2) !important; box-shadow: inset 0 0 0 1px var(--rv-border) !important; }
[data-theme="dark"] div.uc-main__card-2,
[data-theme="dark"] div.uc-main__card-3,
[data-theme="dark"] a.uc-main__link,
[data-theme="dark"] div.uc-main__card-6,
[data-theme="dark"] a.uc-main__btn-2 { border-color: var(--rv-border) !important; }
[data-theme="dark"] span.uc-main__row-5 { border-color: var(--rv-primary-pale) !important; }
[data-theme="dark"] span.uc-main__pill-3 { border-color: var(--rv-success-pale) !important; }
[data-theme="dark"] span.uc-main__pill { border-color: var(--rv-danger-pale) !important; }
[data-theme="dark"] span.uc-main__strong-10 { color: var(--rv-ink) !important; }
[data-theme="dark"] a.uc-main__btn-2 { color: var(--rv-ink-soft) !important; }
[data-theme="dark"] p.uc-main__text,
[data-theme="dark"] p.uc-main__text-2,
[data-theme="dark"] span.uc-main__label-7,
[data-theme="dark"] span.uc-main__label-13,
[data-theme="dark"] p.uc-main__text-4 { color: var(--rv-body) !important; }
[data-theme="dark"] span.uc-main__label,
[data-theme="dark"] span.uc-main__label-6,
[data-theme="dark"] span.uc-main__label-8,
[data-theme="dark"] span.uc-main__label-9,
[data-theme="dark"] span.uc-main__label-10,
[data-theme="dark"] span.uc-main__eyebrow-2,
[data-theme="dark"] span.uc-main__label-14,
[data-theme="dark"] span.uc-main__label-3,
[data-theme="dark"] span.uc-main__label-4,
[data-theme="dark"] span.uc-main__label-11,
[data-theme="dark"] span.uc-main__label-5,
[data-theme="dark"] span.uc-main__label-12 { color: var(--rv-muted-2) !important; }
[data-theme="dark"] span.uc-main__strong-11 { color: var(--rv-primary) !important; }
[data-theme="dark"] span.uc-main__pill-2 { color: var(--rv-primary-bright) !important; }
[data-theme="dark"] span.uc-main__pill,
[data-theme="dark"] span.uc-main__strong-3 { color: var(--rv-danger) !important; }
[data-theme="dark"] span.uc-main__pill-3 { color: var(--rv-success-deep) !important; }
[data-theme="dark"] span.uc-main__pill { color: var(--rv-danger) !important; border-color: var(--rv-danger-pale) !important; }

/* ---- per-record values (UseCaseController passes data; these classes hold the design) ---- */
span.uc-hero__badge { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; border-radius:999px; padding:6px 15px; font-size:11.5px; font-weight:800; letter-spacing:.1em;  background:var(--tone-bg); border:1px solid var(--tone-line); color:var(--tone-ink); }
div.uc-panel__row { display:flex; align-items:center; gap:12px; min-width:0; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:11px 13px;  animation:rv-rowin-uc .5s cubic-bezier(.23,1,.32,1) var(--row-delay, 0s) both; }
div.uc-panel__row.is-first { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13); }
span.uc-panel__tile { width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
span.uc-panel__icon { width:15px; height:15px; background-position:center; background-size:contain; background-repeat:no-repeat; }
span.uc-panel__badge { font-size:10px; font-weight:800; letter-spacing:.05em; border-radius:999px; padding:4px 10px; flex-shrink:0; white-space:nowrap;  }
span.uc-panel__badge--ok    { color:#34d399; background:rgba(52,211,153,.12);  border:1px solid rgba(52,211,153,.3); }
span.uc-panel__badge--warn  { color:#fbbf24; background:rgba(251,191,36,.12);  border:1px solid rgba(251,191,36,.3); }
span.uc-panel__badge--bad   { color:#fb7185; background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.3); }
span.uc-panel__badge--brand { color:#c4b5fd; background:rgba(139,92,246,.16);  border:1px solid rgba(139,92,246,.34); }
span.uc-flow__dot { width:11px; height:11px; border-radius:999px; flex-shrink:0; margin-top:4px; background:#6d5ce6; }
span.uc-flow__dot.is-last { background:#16161d; box-shadow:0 0 0 4px rgba(22,22,29,.09); }
span.uc-flow__line { flex:1; width:2px; background:#eeeef4; min-height:22px; }
span.uc-flow__line.is-last { display:none; }
span.uc-case__avatar { width:46px; height:46px; border-radius:999px; flex-shrink:0; background:var(--face-grad); border:2.5px solid rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; letter-spacing:.02em }
span.uc-more__tile { width:38px; height:38px; border-radius:13px; flex-shrink:0; display:inline-block; background-color:#f5f5fa; background-image:var(--tile-icon); background-size:19px; background-position:center; background-repeat:no-repeat; border:1px solid #ececf4 }
[data-theme="dark"] span.uc-flow__dot.is-last { background:var(--rv-ink); box-shadow:0 0 0 4px rgba(255,255,255,.08); }
[data-theme="dark"] span.uc-flow__line { background:var(--rv-border); }
[data-theme="dark"] span.uc-more__tile { background-color:var(--rv-surface-2); border-color:var(--rv-border); }
/* 2026-09-14 phone pass: hero chip label wraps instead of pushing past the viewport */
@media (max-width: 480px) { span.uc-main__label-3 { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } div.uc-main__anim { flex-wrap: wrap; } }