/* steery.dev/missions and its use-case pages. Built on the site's style.css and brand tokens:
   the app windows reuse its .mw parts, so a mission here looks as it does in Steery for Mac. */

.uc-hero { text-align: center; }
.uc-hero h1 { max-width: 15ch; margin-inline: auto; text-wrap: balance; }
.uc-hero .lede { max-width: 700px; margin-inline: auto; }
.uc-crumbs { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; color: var(--fg3); font-size: 13.5px; }
.uc-crumbs a { color: var(--fg2); text-decoration: none; }
.uc-crumbs a:hover { color: var(--fg); }
.uc-agentline { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px; padding: 6px 6px 6px 14px; border-radius: var(--radius-pill); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line2); font-size: 13px; }
.uc-agentline span { color: var(--fg3); white-space: nowrap; }
.uc-agentline code { overflow: hidden; color: var(--fg); font: 12.5px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.uc-agentline .copy { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--well); color: var(--fg2); cursor: pointer; }
.uc-agentline .copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.uc-agentline .copy.is-copied { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.uc-price { margin-top: 16px; color: var(--fg3); font-size: 13.5px; }

/* The stage: the Mac window with the phone over its right edge. */
.uc-stage { padding-top: 0; }
.uc-devices { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0; align-items: end; max-width: 1180px; margin: 0 auto; }
/* The phone overlaps only the window's edge; the window keeps that edge clear of content. */
.uc-mw { height: 600px; }
.uc-mw .mw-main { overflow: hidden; padding-right: 76px; }
.uc-phone { width: 270px; margin-left: -56px; margin-bottom: -26px; position: relative; z-index: 2; }
.uc-phone .ph { height: 600px; }
.mw-item.uc-new { display: flex; align-items: center; gap: 6px; color: var(--fg2); }
.mw-item.uc-new svg { width: 14px; height: 14px; }
.mw-item.uc-new b { grid-column: auto; font-weight: 500; }

.uc-targets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.uc-target { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; min-width: 150px; padding: 9px 12px; border-radius: 10px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.uc-target span { grid-column: 1 / -1; color: var(--fg2); font-size: 10.5px; font-weight: 600; }
.uc-target b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.uc-target small { color: var(--fg3); font-size: 10.5px; }
.uc-target.is-met b { color: var(--ok); }
.uc-target.is-behind b { color: var(--err); }
.uc-target.is-pace b { color: var(--fg); }

.uc-board { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); align-items: start; gap: 8px; margin-top: 14px; }
.uc-lane { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--well); }
.uc-lane header { display: flex; align-items: flex-start; gap: 6px; padding: 2px 2px 4px; font-size: 10.5px; font-weight: 650; line-height: 1.25; }
.uc-lane header i { flex: none; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; }
.uc-lane header em { margin-left: auto; color: var(--fg3); font-style: normal; font-weight: 500; }
.uc-row { display: grid; gap: 3px; padding: 8px 9px; border-radius: 8px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.uc-row b { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.uc-row small { color: var(--fg2); font-size: 10px; line-height: 1.35; }
.uc-row footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: 10px; }
.uc-row.is-fresh { box-shadow: inset 0 0 0 1.5px var(--accent); animation: uc-in .5s var(--ease-standard) both; }
.uc-metric { font-weight: 600; font-variant-numeric: tabular-nums; }
.uc-who { display: inline-flex; align-items: center; gap: 4px; color: var(--fg2); }
.uc-who.is-none { color: var(--err); font-weight: 600; }
.uc-face { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: hsl(var(--h) 50% 50%); color: #fff; font: 700 8px/1 var(--sans); }

.uc-prs { margin-top: 14px; }
.uc-prs h4 { margin: 14px 0 8px; color: var(--fg2); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.uc-pr { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.uc-pr + .uc-pr { margin-top: 6px; }
.uc-pr.is-fresh { box-shadow: inset 0 0 0 1.5px var(--accent); }
.uc-pr-n { color: var(--fg3); font: 600 11px var(--mono); }
.uc-pr-t { display: grid; gap: 2px; min-width: 0; }
.uc-pr-t b { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.uc-pr-t small { display: flex; align-items: center; gap: 5px; color: var(--fg2); font-size: 10.5px; }
.uc-pr-v { display: grid; justify-items: end; font-size: 11px; font-weight: 600; }
.uc-pr-v small { color: var(--ok); font-size: 10px; font-weight: 500; }
.uc-activity { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: 11.5px; color: var(--fg2); }
.uc-activity time { display: inline-block; width: 42px; color: var(--fg3); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* The phone's request card. */
.uc-phone .ph-screen { gap: 10px; }
.uc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--fg2); font-size: 11px; }
.uc-card-head span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.uc-card-head svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.uc-phone .ph-req { gap: 8px; }
.uc-phone .ph-req h4 { font-size: 16px; }
.uc-phone .ask-btns span { padding: 8px; font-size: 12px; }
.uc-phone .ph-req > p { color: var(--fg2); font-size: 12px; line-height: 1.45; }
.uc-choices { display: grid; gap: 6px; }
.uc-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.uc-choice i { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line2); color: transparent; }
.uc-choice i.is-on { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.uc-choice i svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.uc-choice b { display: block; font-size: 11.5px; font-weight: 600; }
.uc-choice small { display: block; margin-top: 2px; color: var(--fg2); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.uc-signs { color: var(--fg3); font-size: 10.5px; text-align: center; }

/* How it runs: four steps with one realistic value each. */
.uc-flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; counter-reset: f; }
.uc-flow li { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.uc-flow li + li::before { content: ""; position: absolute; left: -12px; top: 38px; width: 12px; height: 1.5px; background: var(--line2); }
.uc-step { display: inline-flex; align-items: center; gap: 8px; color: var(--fg3); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.uc-step i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--well); color: var(--accent); }
.uc-step svg, .uc-related svg, .uc-tile-k svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.uc-flow h3 { font-size: 16.5px; letter-spacing: -.015em; }
.uc-flow p { color: var(--fg2); font-size: 14px; line-height: 1.5; }
.uc-flow .uc-value { padding: 8px 10px; border-radius: 9px; background: var(--well); color: var(--fg); font: 12px/1.5 var(--mono); }

/* How it actually works: the one inverted band on the page, so the idea cannot be skimmed past. */
.uc-how { margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px); border-radius: 28px; background: var(--fg); color: var(--bg); text-align: center; }
.uc-how .eyebrow { justify-content: center; color: color-mix(in srgb, var(--bg) 62%, transparent); }
.uc-how h2 { margin: 14px auto 16px; max-width: 27ch; color: var(--bg); }
.uc-how-lede { max-width: 620px; margin: 0 auto; color: color-mix(in srgb, var(--bg) 78%, transparent); font-size: 18px; line-height: 1.5; }
.uc-how-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 40px 0 0; padding: 0; text-align: left; }
.uc-how-row > li { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 16%, transparent); }
.uc-how-row > li + li::before { content: "⇄"; position: absolute; left: -31px; top: 34px; color: color-mix(in srgb, var(--bg) 55%, transparent); font-size: 20px; }
.uc-how-k { color: color-mix(in srgb, var(--bg) 60%, transparent); font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.uc-how-row h3 { color: var(--bg); font-size: 19px; letter-spacing: -.02em; }
.uc-how-row p { color: color-mix(in srgb, var(--bg) 76%, transparent); font-size: 15px; line-height: 1.5; }
.uc-how-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.uc-how-tools b { padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 12%, transparent); color: var(--bg); font-size: 12.5px; font-weight: 500; }
.uc-rules { list-style: none; display: grid; gap: 6px; margin: 6px 0 0; padding: 0; }
.uc-rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: color-mix(in srgb, var(--bg) 86%, transparent); font-size: 13.5px; line-height: 1.45; }
.uc-rules i { margin-top: 2px; color: var(--accent); }
.uc-rules svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.uc-proof { text-align: center; }
.uc-proof .eyebrow { justify-content: center; }
.uc-proof h2 { margin: 14px auto 28px; max-width: 22ch; }
.uc-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.uc-proof-grid div + div { border-left: 1px solid var(--line); }
.uc-proof-grid strong { display: block; font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.uc-proof-grid span { display: block; margin: 10px 14px 0; color: var(--fg2); font-size: 13.5px; line-height: 1.4; }
.uc-note { margin-top: 14px; color: var(--fg3); font-size: 13px; }
.uc-note a { color: var(--fg2); }

.uc-compare { overflow-x: auto; }
.uc-compare table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.uc-compare th, .uc-compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.uc-compare thead th { color: var(--fg3); font-size: 13px; font-weight: 600; }
.uc-compare tbody th { width: 26%; font-weight: 550; }
.uc-compare td { color: var(--fg2); }
.uc-compare td:nth-child(2) { color: var(--fg); }

.uc-faq { max-width: 860px; }
.uc-faq h2 { margin: 14px 0 22px; }
.uc-faq details { border-bottom: 1px solid var(--line); }
.uc-faq summary { padding: 18px 0; font-size: 16.5px; font-weight: 600; cursor: pointer; list-style: none; }
.uc-faq summary::after { content: "+"; float: right; color: var(--fg3); font-weight: 400; }
.uc-faq details[open] summary::after { content: "−"; }
.uc-faq details p { padding: 0 0 18px; color: var(--fg2); font-size: 15.5px; line-height: 1.6; }

.uc-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 22px; }
.uc-related a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 18px; border-radius: 16px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow var(--motion-settle) var(--ease-standard), transform var(--motion-settle) var(--ease-standard); }
.uc-related a:hover, .uc-tile:hover { box-shadow: inset 0 0 0 1px var(--line2), var(--elevation-raised); transform: translateY(-2px); }
.uc-related i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--well); color: var(--accent); }
.uc-related b { font-size: 15px; }
.uc-related span { color: var(--fg2); font-size: 13.5px; line-height: 1.45; }
.uc-related a.is-own, .uc-tile.is-own { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 18%, transparent); }

.uc-band { text-align: center; }
.uc-band h2 { max-width: 20ch; margin: 0 auto 14px; font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.uc-band p { color: var(--fg2); font-size: 17px; }
.uc-band .actions { justify-content: center; margin-top: 26px; }

/* The hub. */
.uc-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uc-tile { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 22px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow var(--motion-settle) var(--ease-standard), transform var(--motion-settle) var(--ease-standard); }
.uc-tile-k { display: flex; align-items: center; gap: 8px; color: var(--fg3); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.uc-tile-k i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--well); color: var(--accent); }
.uc-tile b { font-size: 21px; letter-spacing: -.025em; line-height: 1.2; }
.uc-tile p { color: var(--fg2); font-size: 14.5px; line-height: 1.5; }
.uc-tile-mini { display: flex; gap: 8px; margin-top: 4px; }
.uc-tile-mini span { display: grid; padding: 6px 10px; border-radius: 9px; background: var(--well); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.uc-tile-mini small { color: var(--fg2); font-size: 10px; font-weight: 600; }
.uc-tile-mini .is-met { color: var(--ok); }
.uc-tile-mini .is-behind { color: var(--err); }
.uc-tile-vs { color: var(--fg3); font-size: 12.5px; }

@keyframes uc-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .uc-row.is-fresh { animation: none; } }

@media (max-width: 1100px) {
  .uc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-flow li + li::before { display: none; }
  .uc-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .uc-devices { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .uc-phone { margin: -120px 0 0; }
  .uc-mw .mw-main { padding-right: 22px; }
  .uc-how-row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .uc-how-row > li + li::before { content: "⇅"; left: 50%; top: -28px; transform: translateX(-50%); }
  .uc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-mw { height: auto; min-height: 520px; width: 100%; }
}
@media (max-width: 600px) {
  .uc-mw { display: none; }
  .uc-phone { margin: 0; }
  .uc-flow, .uc-hub { grid-template-columns: minmax(0, 1fr); }
  .uc-proof-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .uc-proof-grid div + div { border-left: 0; }
  .uc-agentline { display: flex; }
  .uc-agentline span { display: none; }
  .uc-compare tbody th { width: auto; }
}

/* Every section heading reads at the site's section size, inside a .section-head or not. */
:is(.uc-how, .uc-proof, .uc-faq) h2, section > h2#more-title { font-size: clamp(32px, 3.9vw, 48px); letter-spacing: -0.034em; line-height: 1.06; text-wrap: balance; }
section > h2#more-title { margin-top: 14px; }

/* The rival table's Steery row, hub theme links. */
.uc-compare tr.is-us th, .uc-compare tr.is-us td { color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.uc-compare thead th:first-child { width: 18%; }
.uc-hero h1.uc-hub-title { max-width: 18ch; }
.uc-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.uc-themes a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg2); font-size: 14px; font-weight: 550; text-decoration: none; }
.uc-themes a:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2); }
.uc-themes em { color: var(--fg3); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.uc-tile-k em { margin-left: auto; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--well); color: var(--fg2); font: 500 11px/1 var(--sans); letter-spacing: 0; text-transform: none; font-style: normal; }
.uc-tile { scroll-margin-top: 96px; }
/* Start for people with the app; the downloads for everyone else (missions.js picks). */
.uc-cta > span { display: contents; }
.uc-cta > span[hidden] { display: none; }
.uc-band .uc-cta { justify-content: center; margin-top: 26px; }