/* Use case pages. Built by scripts/build-use-cases.mjs. The shared tokens and components come from /site.css.
   Each page sets --c1 and --c2: the two colors of its job. */

.uc-hero { position: relative; overflow: hidden; padding: 130px 0 90px; }
/* The big bottom padding lets the demo shadow fade out before the hero clips it. */
.uc-hero + .uc-sec { padding-top: 0; }
.uc-hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 640px; background: radial-gradient(38% 55% at 22% 40%, color-mix(in srgb, var(--c1, #16a34a) 26%, transparent), transparent 70%), radial-gradient(34% 50% at 80% 30%, color-mix(in srgb, var(--c2, #0ea5e9) 22%, transparent), transparent 70%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.uc-hero .wrap { position: relative; }
.uc-hero-in { display: grid; grid-template-columns: 1fr 1.02fr; gap: 48px; align-items: center; }
.uc-hero-in > * { min-width: 0; }
.uc-hero h1 { margin: 14px 0 16px; max-width: 11em; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.02; text-wrap: balance; }
.uc-hero h1 .go-text { background: linear-gradient(90deg, var(--c1, #16a34a), var(--c2, #0ea5e9)); -webkit-background-clip: text; background-clip: text; }
.uc-lead { margin: 0 0 26px; color: var(--muted); font-size: 18.5px; max-width: 31em; }
.uc-crumb { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.uc-crumb:hover { color: var(--text); }
.uc-crumb::after { content: "/"; margin: 0 8px; color: var(--faint); }
.uc-team { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--c1, var(--go)); background: color-mix(in srgb, var(--c1, #16a34a) 13%, transparent); }
.uc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.uc-go { border-color: transparent; background: linear-gradient(135deg, var(--c1, #16a34a), var(--c2, #0ea5e9)); color: #fff; }
.uc-small { margin: 12px 0 0; color: var(--faint); font-size: 13.5px; }

/* The live demo in a browser frame. */
.uc-device { position: relative; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--c1, #16a34a) 60%, transparent), var(--shadow); overflow: hidden; }
.uc-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.uc-dots { display: flex; gap: 6px; } .uc-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.uc-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font: 500 12.5px "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-live { display: inline-flex; align-items: center; gap: 6px; color: var(--go); font-size: 12px; font-weight: 800; }
.uc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--go); animation: pulse 2s infinite; }
.uc-device iframe { display: block; width: 100%; height: 600px; border: 0; background: var(--soft); opacity: 0; transition: opacity .4s; }
.uc-device.is-ready iframe { opacity: 1; }
.uc-note { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; text-align: center; }

.uc-sec { padding: 36px 0; }
.uc-sec h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 18px; }

/* Say it to your AI: the prompt on the left, what AllBack does on the right. */
.uc-say { display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 26px; align-items: center; padding: 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.uc-say > * { min-width: 0; }
.uc-bubble { position: relative; margin: 0 0 14px; padding: 16px 20px; border-radius: 20px 20px 20px 6px; background: var(--soft); border: 1px solid var(--line); font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.uc-bubble::before { content: "“"; }
.uc-bubble::after { content: "”"; }
.uc-copy-btn { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.uc-copy-btn:hover { color: var(--text); background: var(--soft); }
.uc-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #0ea5e9); color: #fff; font-size: 20px; font-weight: 800; }
.uc-result { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uc-result li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); font-weight: 700; font-size: 15.5px; }
.uc-ck, .uc-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.uc-ck { background: var(--go); color: #fff; }
.uc-x { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.uc-ck svg, .uc-x svg { width: 13px; height: 13px; }

/* The old way and the AllBack way, side by side. */
.uc-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uc-vs > * { min-width: 0; padding: 26px; border-radius: 24px; border: 1px solid var(--line); }
.uc-old { background: var(--soft); }
.uc-old li { color: var(--muted); }
.uc-new { background: radial-gradient(360px 200px at 100% 0%, var(--glow-a), transparent 70%), var(--card); border-color: color-mix(in srgb, var(--go) 40%, var(--line)) !important; }
.uc-vs h2 { font-size: 22px; margin: 0 0 16px; }
.uc-vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.uc-vs li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 500; }
.uc-vs li > span { margin-top: 1px; }

/* What you collect, and three steps. */
.uc-how { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.uc-how > * { min-width: 0; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-chips span { padding: 8px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.uc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.uc-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 15.5px; }
.uc-steps b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 15px; }

/* Questions. */
.uc-faq { display: grid; grid-template-columns: .6fr 1.4fr; gap: 40px; align-items: start; }
.uc-faq > * { min-width: 0; }
.uc-q { border-bottom: 1px solid var(--line); }
.uc-q summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.uc-q summary::-webkit-details-marker { display: none; }
.uc-q summary::after { content: "+"; color: var(--faint); font-size: 22px; line-height: 1; transition: transform .2s; }
.uc-q[open] summary::after { transform: rotate(45deg); }
.uc-q p { margin: -6px 0 18px; color: var(--muted); }

/* The end band and links to the other use cases. */
.uc-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 34px; border-radius: 28px; background: radial-gradient(500px 260px at 0% 0%, color-mix(in srgb, var(--c1) 20%, transparent), transparent 70%), radial-gradient(500px 260px at 100% 100%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 70%), var(--card); border: 1px solid var(--line); }
.uc-end h2 { margin: 0 0 4px; }
.uc-end p { margin: 0; color: var(--muted); }
.uc-more-h { margin: 36px 0 12px; }
.uc-more { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-more a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.uc-more a:hover { border-color: var(--text); }
.uc-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Index page. */
.uc-hero-c { text-align: center; padding-bottom: 56px; }
/* The short hero needs a glow that fits inside it, so the fade ends before the edge. */
.uc-hero-c::before { inset: 0 -10%; height: auto; }
.uc-hero-c h1 { margin: 0 auto 14px; max-width: none; }
.uc-hero-c .uc-lead { margin: 0 auto 10px; }
/* The word that changes in the hero. inline-block keeps the line from jumping while it fades. */
.uc-rot { display: inline-block; transition: opacity .26s, transform .26s; }
.uc-rot.out { opacity: 0; transform: translateY(10px); }

/* The small form preview at the top of each card. */

/* Your job is not here. */
.uc-own { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 34px; border-radius: 28px; background: radial-gradient(500px 260px at 0% 0%, var(--glow-a), transparent 70%), radial-gradient(500px 260px at 100% 100%, var(--glow-b), transparent 70%), var(--card); border: 1px solid var(--line); }
.uc-own h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }


@media (max-width: 900px) {
  .uc-hero { padding-top: 110px; }
  .uc-hero-in, .uc-how, .uc-faq { grid-template-columns: 1fr; gap: 28px; }
  .uc-say { grid-template-columns: 1fr; padding: 22px; }
  .uc-arrow { transform: rotate(90deg); margin: 0 auto; }
  .uc-vs { grid-template-columns: 1fr; }
  .uc-device iframe { height: 540px; }
  .uc-end { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) { .uc-card, .uc-device iframe, .uc-c-bar i, .uc-rot { transition: none; } .uc-live::before { animation: none; } }

/* ---------- /use-cases: cards that lead with the job, and team filter chips ---------- */
.uc-idx { padding-top: 8px; }
.uc-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; }
.uc-filter[hidden] { display: none; }
.uc-filter button { padding: 8px 15px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.uc-filter button:hover { color: var(--text); }
.uc-filter button.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.uc-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c1) 10%, transparent), transparent 55%), var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.uc-card[hidden] { display: none; }
.uc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 45%, var(--line)); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--c1) 60%, transparent); }
.uc-card:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.uc-c-team { display: inline-flex; align-items: center; gap: 8px; color: var(--c1); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.uc-c-team i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.uc-card h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.uc-c-line { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.uc-c-collect { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; }
.uc-c-collect li { padding: 4px 10px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.uc-c-collect .more { background: none; border-style: dashed; }
.uc-c-result { display: grid; gap: 6px; margin: auto 0 0; padding-top: 14px; color: var(--muted); font-size: 13px; }
.uc-c-result b { color: var(--text); }
.uc-c-bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.uc-c-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .6s; }
.uc-card:hover .uc-c-bar i { width: 100%; }
.uc-c-see { margin-top: 10px; color: var(--c1); font-size: 14.5px; font-weight: 800; }
.uc-c-see span { display: inline-block; transition: transform .2s; }
.uc-card:hover .uc-c-see span { transform: translateX(3px); }
@media (max-width: 1000px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .uc-grid { grid-template-columns: 1fr; } }