/* Use Cases, option 1: pain, then the fix. One still card at the content width. Left, the moment that hurts
   for the chosen person, in large two-tone type; right, on a soft Loop-blue wash, what Loop gives them, one short
   line each with a small app-style icon. The heading's drop-down and the bar under the card pick the person; the
   new person's lines rise in with a short stagger (transitions.dev 18, texts reveal) and the old ones fade in
   place. Nothing moves on its own. Every rule is scoped to #use-cases. */

/* ---------- Tokens ---------- */
#use-cases {
  --duration-stagger: 40ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out;
  /* transitions.dev 18, texts reveal */
  --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-stagger: 40ms; --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1); --stagger-out: 200ms;
  /* The card: 8px inside its edge sits the fix panel, so 24 outside is 16 inside */
  --card-r: 24px; --card-pad: 8px; --panel-r: 16px;
  --wash: rgba(75, 123, 227, .055);
  --ico-fg: #4B7BE3;
}
:root[data-theme="dark"] #use-cases { --wash: rgba(134, 169, 242, .07); --ico-fg: #86A9F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #use-cases { --wash: rgba(134, 169, 242, .07); --ico-fg: #86A9F2; } }

#use-cases .head { position: relative; z-index: 3; }

/* ---------- The card ---------- */
#use-cases .uc1 { margin-top: var(--head-gap, 40px); }
#use-cases .uc1-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--card-pad); border-radius: var(--card-r);
  background: var(--card); box-shadow: var(--shadow-card); }
#use-cases .uc1-pain { padding: 32px 40px 36px 32px; }
#use-cases .uc1-fix { padding: 32px 32px 36px; border-radius: var(--panel-r); background: var(--wash); }
#use-cases .uc1-k { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink3); }
#use-cases .uc1-fix .uc1-k { color: var(--accent-text); }

/* Every person's lines share one grid cell, so the card is always the tallest person's height and never jumps. */
#use-cases .uc1-stack { display: grid; margin-top: 20px; }
#use-cases .uc1-set { grid-area: 1 / 1; min-width: 0; }
#use-cases .uc1-set[aria-hidden="true"] { pointer-events: none; }

/* The pain: the site's two-tone heading voice, the moment in ink, the sting in the soft grey */
#use-cases .uc1-pain h3 { font-size: clamp(27px, 2.7vw, 36px); font-weight: 400; line-height: 1.14; letter-spacing: -0.03em; color: var(--ink1); text-wrap: balance; }
#use-cases .uc1-pain h3 .soft { display: block; color: var(--ink4); } /* one sentence per line */
#use-cases .uc1-pain p { margin-top: 16px; max-width: 25em; font-size: 17px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

/* The fix: one line each, an icon drawn the way the app draws a setting's symbol */
#use-cases .uc1-fix ul { list-style: none; padding: 0; display: grid; gap: 18px; }
#use-cases .uc1-fix li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 34px;
  font-size: 16.5px; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink1); text-wrap: balance; }
#use-cases .ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(17, 22, 32, .04); color: var(--ico-fg); }
#use-cases .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Motion: transitions.dev 18, texts reveal. The incoming person's lines rise with a 40ms stagger
   (pain, its line, then each fix); the outgoing ones fade in place, with no reverse rise. ---------- */
.js #use-cases .ln { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur));
  transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease);
  transition-delay: calc(var(--n, 0) * var(--stagger-stagger)); }
.js #use-cases .uc1-set.is-shown .ln { opacity: 1; transform: none; filter: blur(0); }
.js #use-cases .uc1-set.is-hiding .ln { opacity: 0; transform: none; filter: blur(0); transition: opacity var(--stagger-out) ease; transition-delay: 0ms; }
.js #use-cases .uc1-set.is-reset .ln { transition: none; }
/* Without scripts, only the first person shows. */
html:not(.js) #use-cases .uc1-set:not(:first-child) { visibility: hidden; }

/* ---------- The bar under the card: today's group switch and people, without the progress fill ---------- */
#use-cases .picker { margin-top: var(--s4); }
#use-cases .p2:active { scale: .96; }
#use-cases .p2 { transition: background-color 200ms var(--ease), scale 150ms var(--ease); }

/* ---------- Phones: the fix panel sits under the pain ---------- */
@media (max-width: 860px) {
  #use-cases .uc1-card { grid-template-columns: minmax(0, 1fr); }
  #use-cases .uc1-pain { padding: 24px 20px 28px; }
  #use-cases .uc1-fix { padding: 22px 18px 24px; }
  #use-cases .uc1-stack { margin-top: 14px; }
  #use-cases .uc1-pain h3 { font-size: 25px; }
  #use-cases .uc1-pain p { margin-top: 12px; font-size: 16px; }
  #use-cases .uc1-fix ul { gap: 12px; }
  #use-cases .uc1-fix li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; font-size: 15.5px; }
  #use-cases .ico { width: 32px; height: 32px; border-radius: 9px; }
  #use-cases .ico svg { width: 17px; height: 17px; }
}

/* The smallest phones: the subtitle stays on one line (Theo, 2026-10-14) */
@media (max-width: 360px) {
  #use-cases .uc1-pain { padding: 22px 16px 26px; }
  #use-cases .uc1-pain h3 { font-size: 23px; }
  #use-cases .uc1-pain p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .js #use-cases .ln, .js #use-cases .uc1-set.is-hiding .ln { transition: none !important; transform: none; filter: none; }
  #use-cases .p2 { transition: none; }
  #use-cases .p2:active { scale: 1; }
}