/* ==========================================================================
   Veris use cases: three customers, six moments, one stage.
   The visitor plays the customer: taps through the app, drags the ID into the
   camera, holds still for the selfie, then watches the two photos travel to
   Compare and the answer come back. The light around the phone follows whoever
   is acting: your app, Veris on the phone, or your server.
   Builds on veris.css + home.css + capture.css (hero, oval) + scan.css (camera
   frame, printed specimens).
   ========================================================================== */

/* ---------- 01 · Hero: the cast ---------- */
.uhero { padding-bottom: 0; }
.uhero__txt { max-width: 48rem; }
.uhero .chero__lead { max-width: 40rem; }

.uposters { margin-top: 52px; }
.uposters__row { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: calc(var(--maxw) + var(--gutter) * 2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uposter {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 280px; padding: 22px 46% 22px 22px; border: 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  text-align: left; cursor: pointer; color: var(--ink); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 0 0 #0E0F11;
  transition: transform 260ms var(--spring), box-shadow 220ms var(--out), background-color 200ms;
}
.uposter img { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; width: 52%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.8); transition: transform 900ms var(--out), filter 400ms var(--out); }
.uposter::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 52%; z-index: -1; background: linear-gradient(90deg, var(--bg-2), rgba(31,32,36,0) 45%), linear-gradient(0deg, rgba(31,32,36,.55), transparent 40%); transition: background 200ms; }
.uposter__k { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.uposter__t { margin-top: 8px; font: 700 22px/1.12 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.uposter__uses { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.uposter__tag { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(247,250,248,.94); color: var(--inkblack); font: 650 12px/1 var(--f-body); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); white-space: nowrap; transition: transform 300ms var(--spring); }
.uposter__play { position: absolute; top: 18px; left: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); box-shadow: none; transition: transform 300ms var(--spring); }
.uposter__play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--mint-ink); }
.uposter:active { transform: translateY(4px) scale(.99); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 #0E0F11; transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .uposter:hover { transform: translateY(-4px); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 0 0 #0E0F11; }
  .uposter:hover::before { background: linear-gradient(90deg, var(--bg-3), rgba(40,41,46,0) 45%), linear-gradient(0deg, rgba(40,41,46,.55), transparent 40%); }
  .uposter:hover img { transform: scale(1.06); filter: saturate(1); }
  .uposter:hover .uposter__play { transform: scale(1.1); }
  .uposter:hover .uposter__tag { transform: translateY(-3px); }
  .uposter:active { transform: translateY(4px) scale(.99); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 #0E0F11; }
}
.has-motion .uposters[data-rise] { animation-delay: 260ms; }

/* ---------- 02 · The stage ---------- */
.ujour { position: relative; padding-block: clamp(56px, 7vw, 96px) 0; scroll-margin-top: 64px; isolation: isolate; }
/* the light follows whoever is acting */
.ujour__amb { position: absolute; inset: 0 0 -80px; z-index: -1; pointer-events: none; overflow: hidden; }
.ujour__amb i { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--out); }
.ujour__amb-app { background: radial-gradient(40% 50% at 50% 52%, rgba(242,240,235,.06), transparent 70%); }
.ujour__amb-dev { background: radial-gradient(34% 46% at 50% 52%, rgba(46,255,213,.10), transparent 70%), radial-gradient(60% 60% at 50% 60%, rgba(16,37,31,.55), transparent 75%); }
.ujour__amb-srv { background: radial-gradient(42% 52% at 24% 52%, rgba(46,255,213,.08), transparent 70%), radial-gradient(70% 70% at 30% 55%, rgba(16,37,31,.75), transparent 75%); }
.ujour[data-actor="app"] .ujour__amb-app, .ujour[data-actor="dev"] .ujour__amb-dev, .ujour[data-actor="srv"] .ujour__amb-srv { opacity: 1; }

/* moments: avatars in a row */
.ujour__tabs { scroll-margin-top: 84px; display: flex; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; }
.ujour__tabs::-webkit-scrollbar { display: none; }
.ujour__tabs button {
  flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 5px; border: 0; border-radius: var(--rf); cursor: pointer;
  background: var(--bg-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 14px/1 var(--f-body); white-space: nowrap;
  transition: transform 200ms var(--spring), box-shadow 200ms var(--out), background-color 150ms, color 150ms;
}
.ujour__tabs img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.ujour__tabs button:active { transform: scale(.97); }
.ujour__tabs button[aria-selected="true"] { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ujour__tabs button:not([aria-selected="true"]):hover { color: var(--ink); background: var(--bg-3); } }
@media (max-width: 1100px) { .ujour__tabs { justify-content: flex-start; } }

.ust {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1.1fr); grid-template-areas: "world dev nar";
  align-items: center; gap: 48px; min-height: min(620px, calc(100svh - 200px)); margin-top: 18px;
}
.ust__dev { grid-area: dev; position: relative; display: grid; place-items: center; perspective: 1400px; }
.utilt { --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 600ms var(--out); }
.utilt.is-tracking { transition: transform 120ms linear; }
.uphone { position: relative; width: 280px; height: 556px; padding: 8px; border-radius: 42px; background: #0A1512; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 50px 90px -30px rgba(0,0,0,.9), 0 0 0 9px rgba(255,255,255,.015); transition: box-shadow 400ms var(--out); }
.uphone__scr { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--offwhite); isolation: isolate; touch-action: manipulation; }
.uscr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--offwhite); }
.has-motion .uscr.is-enter { animation: u-in 340ms var(--out) both; }
.has-motion .uscr.is-enter-back { animation: u-in-back 340ms var(--out) both; }
.uscr.is-leave { z-index: -1; pointer-events: none; }
@keyframes u-in { from { opacity: 0; transform: translateX(26px); } }
@keyframes u-in-back { from { opacity: 0; transform: translateX(-26px); } }

/* status bar */
.ubar__s { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 4px 22px 0 26px; font: 650 12.5px/1 var(--f-body); color: var(--inkblack); flex: none; }
.ubar__s i { display: flex; align-items: flex-end; gap: 2px; }
.ubar__s i b { width: 3px; border-radius: 1px; background: currentColor; }
.ubar__s i b:nth-child(1) { height: 4px; } .ubar__s i b:nth-child(2) { height: 6px; } .ubar__s i b:nth-child(3) { height: 8px; } .ubar__s i b:nth-child(4) { height: 10px; }
.uscr--dark .ubar__s { color: #fff; }

/* the customer's app, kept plain */
.uapp { padding: 0 18px 20px; color: var(--inkblack); }
.uapp > .ubar__s { margin-inline: -18px; }
.uapp__hd { padding: 14px 2px 0; }
.uapp__hd small { display: block; font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.uapp__hd b { display: block; margin-top: 10px; font: 700 23px/1.15 var(--f-display); letter-spacing: -.03em; }
.uapp__lead { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--sage); }
.uapp__body { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-top: 18px; min-height: 0; }
.uapp__cta { position: relative; flex: none; width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--inkblack); color: #fff; font: 700 14.5px/1 var(--f-body); box-shadow: none;
  transition: transform 160ms var(--out), box-shadow 160ms var(--out); }
.uapp__cta:active { transform: scale(.97); }
.uapp__cta::after { content: ""; position: absolute; inset: -5px; border-radius: 18px; box-shadow: 0 0 0 2px var(--mint); opacity: 0; pointer-events: none; }
.has-motion .uapp__cta.is-tap::after { animation: u-tap 1.8s var(--out) 900ms infinite; }
@keyframes u-tap { 0% { opacity: .95; transform: scale(.97); } 70%, 100% { opacity: 0; transform: scale(1.07); } }

.ucardx { padding: 13px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); font-size: 12.5px; line-height: 1.45; }
.ucardx small { display: block; font: 600 10px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sage); }
.ucardx b { display: block; margin-top: 5px; font: 700 15px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--inkblack); }
.ucardx--amt b { font-size: 27px; letter-spacing: -.03em; }
.ucardx p { margin-top: 4px; color: var(--sage); }
.unote { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: var(--palemint); color: #0A4A3D; font-size: 12px; line-height: 1.45; }
.unote svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unote--warn { background: #FFF4DB; color: #6B4E00; }
.ulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ulist li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); font: 650 13.5px/1.3 var(--f-body); }
.ulist__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--palemint); font: 700 12px/1 var(--f-mono); color: #0A6B58; }
.ulist li small { display: block; margin-top: 3px; font: 500 11.5px/1.3 var(--f-body); color: var(--sage); }
.ufield { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.ufield small { display: block; font: 600 9.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sage); }
.ufield b { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font: 650 13px/1.35 var(--f-body); color: var(--inkblack); }
.ufield b em { flex: none; font: 600 10px/1 var(--f-mono); font-style: normal; padding: 4px 6px; border-radius: 6px; background: var(--palemint); color: #0A6B58; }
.has-motion .ufield--fill { animation: u-fill 460ms var(--out) both; animation-delay: calc(var(--i, 0) * 110ms + 140ms); }
@keyframes u-fill { from { opacity: 0; transform: translateY(8px); } }
.ushop { display: flex; gap: 12px; align-items: center; }
.ushop > i { flex: none; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #E8F7F1, #CFEDE2); display: grid; place-items: center; font: 800 16px/1 var(--f-display); color: #0A6B58; font-style: normal; }
.ushop b { margin-top: 0; }
.ubadge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 8px; border-radius: 999px; font: 650 10.5px/1 var(--f-body); background: #EEF2F0; color: var(--sage); }

.uwait { flex: 1; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding-bottom: 40px; }
.uwait__spin { width: 46px; height: 46px; border-radius: 50%; border: 3.5px solid var(--hairline); border-top-color: var(--inkblack); }
.has-motion .uwait__spin { animation: spin 800ms linear infinite; }
.uwait b { font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.uwait p { margin-top: -10px; font-size: 12.5px; line-height: 1.5; color: var(--sage); max-width: 200px; }
@keyframes spin { to { transform: rotate(360deg); } }

.udone { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; padding-bottom: 10px; }
.udone__ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); }
.has-motion .udone__ic { animation: u-pop 520ms var(--spring) both 80ms; }
.udone__ic svg { width: 34px; fill: none; stroke: var(--inkblack); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.udone b { font: 700 22px/1.15 var(--f-display); letter-spacing: -.03em; }
.udone p { margin-top: -6px; font-size: 13px; line-height: 1.5; color: var(--sage); max-width: 215px; }
@keyframes u-pop { from { opacity: 0; transform: scale(.5); } }

/* Veris Scan screen (dark camera); the document only appears once it's held up */
.uscr--dark { background: #000; color: #fff; }
.uscr--dark .sphone__hd { padding-top: 4px; }
.uscr--dark .sphone__view { flex: 1; }
.sdoc--pp { width: 222px; background: linear-gradient(135deg, #F3F0E6, #E7ECE4); }
.sdoc--pp .sdoc__h { border-color: #1E5B3A; } .sdoc--pp .sdoc__h b { color: #1E5B3A; }
.sdoc__mrz { margin: 7px 0 0; padding-top: 5px; border-top: 1px dashed #B9C2BC; font: 700 6.2px/1.45 var(--f-mono); letter-spacing: .04em; color: #2C3833; white-space: nowrap; overflow: hidden; }
.sdoc--vc { background: linear-gradient(135deg, #EEF3EE, #E2EBE4 60%, #DCE6EE); }
.sdoc--vc .sdoc__h { border-color: #2C5E9E; } .sdoc--vc .sdoc__h b { color: #1F4C86; }
.sdoc--bill { width: 176px; }

/* Veris Capture screen (light) */
.uscr--cap { align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.uscr--cap .ubar__s { align-self: stretch; }
.uscr--cap .cphone__pill { margin-top: 42px; }
.uscr--cap .cphone__oval img { transform: scale(.84) translateY(10px); transition: transform 1000ms var(--out); pointer-events: none; }
.uscr--cap.is-live .cphone__oval img, .uscr--cap.is-passed .cphone__oval img { transform: none; }
.uscr--cap .cphone__fill { transition: none; }
.uscr--cap.is-passed .cphone__count { opacity: 0; }
.uscr--cap .cphone__ft { bottom: 20px; }

/* ---------- The world around the phone ---------- */
.uworld { grid-area: world; position: relative; z-index: 3; min-height: 420px; display: grid; align-items: center; justify-items: end; }
.uw { width: 100%; max-width: 340px; display: grid; justify-items: start; gap: 16px; }
.has-motion .uw.is-in { animation: u-world 520ms var(--out) both; }
@keyframes u-world { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(6px); } }
.uw__cap { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 30ch; }
.uw__cap b { color: var(--ink); font-weight: 600; }
.uw__hand { font: 600 22px/1.15 var(--f-hand); color: var(--mint); rotate: -3deg; }

/* the customer */
.uw-person { position: relative; width: 220px; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 0 1px var(--line); rotate: -3deg; }
.uw-person img { width: 100%; height: 260px; object-fit: cover; object-position: center 20%; }
.uw-person figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgba(16,17,19,.92)); }
.uw-person figcaption b { display: block; font: 700 16px/1.2 var(--f-display); color: #fff; }
.uw-person figcaption span { font: 500 11px/1.3 var(--f-mono); color: rgba(255,255,255,.7); }
.uw-person__ok { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 700 12px/1 var(--f-body); }
.uw-person__ok svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.has-motion .uw-person__ok { animation: u-pop 520ms var(--spring) both 300ms; }

/* the document on the table, waiting to be held up to the camera */
.uw-table { position: relative; width: 300px; height: 230px; display: grid; place-items: center; border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 70%, #2E2A24 0%, #1E1B18 60%, #141210 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.8); }
.uw-doc { position: relative; z-index: 2; user-select: none; -webkit-user-select: none;
  transform: perspective(900px) rotateX(24deg) rotateZ(-7deg) scale(1.15); transition: transform 380ms var(--spring); }
.uw-doc .sdoc { position: relative; left: auto; top: auto; translate: none; opacity: 1; transform: none; filter: none; pointer-events: none; }
.has-motion .uw-doc.is-idle { animation: u-bob 3.2s ease-in-out infinite; }
@keyframes u-bob { 50% { translate: 0 -6px; } }
.uw-doc.is-drag { transition: none; z-index: 30; animation: none; }
.uw-doc.is-gone { visibility: hidden; }

/* the twelve checks Capture runs, ticking beside the phone */
.uw-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px 10px; }
.uw-checks li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1 var(--f-body); color: var(--ink-3); white-space: nowrap; transition: background-color 240ms var(--out), color 240ms var(--out), box-shadow 240ms var(--out); }
.uw-checks li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background-color 240ms var(--out), box-shadow 240ms var(--out); }
.uw-checks li.is-on { color: var(--ink); background: var(--forest-2); box-shadow: inset 0 0 0 1px rgba(46,255,213,.28); }
.uw-checks li.is-on::before { box-shadow: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003A30' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.has-motion .uw-checks li.is-on::before { animation: u-pop 380ms var(--spring) both; }

/* the nudge: a hand-drawn arrow toward the one button that's the visitor's to tap */
.unudge { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: center; gap: 4px; color: var(--mint); pointer-events: none; opacity: 0; translate: -10px 0; transition: opacity 280ms var(--out), translate 420ms var(--out); }
.unudge.is-on { opacity: 1; translate: 0 0; }
.unudge span { font: 600 23px/1 var(--f-hand); white-space: nowrap; rotate: -5deg; margin-top: -18px; }
.unudge svg { width: 56px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.has-motion .unudge.is-on svg { animation: u-nudge 1.5s var(--inout) infinite; }
@keyframes u-nudge { 50% { translate: 7px 0; } }
.unudge.is-r { flex-direction: column-reverse; align-items: flex-start; translate: 10px 0; }
.unudge.is-r.is-on { translate: 0 0; }
.unudge.is-r svg { scale: -1 1; width: 42px; height: 28px; }
.unudge.is-r span { font-size: 18px; margin: 2px 0 0 4px; rotate: -4deg; }
.has-motion .unudge.is-r.is-on svg { animation-name: u-nudge-r; }
@keyframes u-nudge-r { 50% { translate: -6px 0; } }

/* your server and Veris Compare */
.uw-srv { position: relative; display: grid; gap: 54px; width: 100%; max-width: 320px; }
.uw-srv::before { content: ""; position: absolute; left: 35px; top: 60px; bottom: 90px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--mint) 0 6px, transparent 6px 12px); opacity: .45; }
.uw-node { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -28px rgba(0,0,0,.8); transition: box-shadow 300ms var(--out); }
.uw-node.is-hot { box-shadow: inset 0 0 0 1.5px var(--mint), 0 24px 50px -28px rgba(0,0,0,.8); }
.uw-node__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-2); }
.uw-node__ic svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uw-node--veris .uw-node__ic { background: rgba(46,255,213,.12); color: var(--mint); }
.uw-node small { display: block; font: 500 11px/1.2 var(--f-mono); color: var(--ink-3); }
.uw-node b { display: block; margin-top: 3px; font: 650 14px/1.25 var(--f-body); }
.uw-node__slot { display: flex; gap: 6px; margin-left: auto; }
.uw-node__slot i { width: 26px; height: 34px; border-radius: 6px; background: var(--bg-3) center 22% / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms; }
.uw-dial { position: relative; flex: none; width: 64px; height: 64px; margin-left: auto; display: grid; place-items: center; }
.uw-dial svg { position: absolute; inset: 0; rotate: -90deg; }
.uw-dial circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.uw-dial .t { stroke: var(--bg-4); }
.uw-dial .f { stroke: var(--mint); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); }
.uw-dial b { font: 600 14px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.uw-dec { justify-self: end; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 600 13px/1 var(--f-mono); opacity: 0; transform: scale(.7); }
.uw-dec.is-on { opacity: 1; transform: none; transition: opacity 200ms var(--out), transform 420ms var(--spring); }
.uw-fly { position: fixed; z-index: 120; left: 0; top: 0; width: 52px; height: 68px; border-radius: 10px; object-fit: cover; object-position: center 22%; pointer-events: none; box-shadow: 0 0 0 2px #fff, 0 16px 30px -10px rgba(0,0,0,.7); }
.uw-fly--chip { width: auto; height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--mint); color: var(--mint-ink); font: 600 13px/1 var(--f-mono); box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); }

/* ---------- Narration ---------- */
.unar { grid-area: nar; min-width: 0; align-self: center; }
.unar__step { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.unar__of { color: var(--ink-3); }
.uwho { display: inline-flex; align-items: center; gap: 8px; height: 28px; margin-top: 18px; padding: 0 12px 0 10px; border-radius: var(--rf); background: var(--bg-3); font: 600 12.5px/1 var(--f-body); color: var(--ink-2); }
.uwho::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.uwho.is-veris { background: rgba(46,255,213,.12); color: var(--mint); }
.uwho.is-veris::before { background: var(--mint); }
.unar__t { margin-top: 16px; font: 700 clamp(26px, 2.6vw, 36px)/1.1 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.unar__p { margin-top: 14px; max-width: 32rem; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.unar__p b { color: var(--ink); font-weight: 600; }
.has-motion .unar.is-swap :is(.uwho, .unar__t, .unar__p, .ucode, .uend) { animation: u-txt 460ms var(--out) both; }
.has-motion .unar.is-swap .unar__t { animation-delay: 50ms; }
.has-motion .unar.is-swap .unar__p { animation-delay: 100ms; }
.has-motion .unar.is-swap .ucode { animation-delay: 150ms; }
@keyframes u-txt { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

.ucode { margin-top: 22px; max-width: 32rem; border-radius: var(--r-md); background: var(--forest); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ucode__hd { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px 10px; border-bottom: 1px solid var(--line); font: 500 11.5px/1 var(--f-mono); color: var(--ink-2); }
.ucode__hd em { font-style: normal; color: var(--ink-3); }
.ucode pre { margin: 0; padding: 12px 14px 14px; overflow-x: auto; font: 400 12.5px/1.7 var(--f-mono); color: var(--ink-3); }
.ucode .k { color: var(--ink); } .ucode .s { color: var(--mint); } .ucode .n { color: #FFD37A; }

.uend__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 32rem; }
.uend__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.uend__list li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(46,255,213,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EFFD5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.uend__list b { color: var(--ink); font-weight: 600; }
.uend__list a { color: var(--mint); text-decoration: none; }
.uend__list a:hover { text-decoration: underline; }
.uend__plan { margin-top: 18px; max-width: 32rem; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-3); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.uend__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Chapters, like a player ---------- */
.ubar { display: flex; align-items: center; gap: 28px; margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.ubar__ch { list-style: none; flex: 1; min-width: 0; margin: 0; padding: 0; display: flex; gap: 6px; }
.ubar__ch li { flex: 1; min-width: 0; }
.ubar__ch button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-3); font: 600 12.5px/1.3 var(--f-body); }
.ubar__ch button[disabled] { cursor: default; }
.ubar__ch i { position: relative; display: block; height: 4px; margin-bottom: 10px; border-radius: 4px; background: var(--bg-4); overflow: hidden; }
.ubar__ch i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mint); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform var(--d, 300ms) linear; }
.ubar__ch .is-done i::after { --f: 1; background: var(--mint-lip); }
.ubar__ch .is-now button, .ubar__ch .is-done button { color: var(--ink-2); }
.ubar__ch .is-now button { color: var(--ink); }
.ubar__ch span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
@media (hover: hover) and (pointer: fine) { .ubar__ch .is-done button:hover { color: var(--ink); } }
.ubar__ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.ubar__ctl .btn { min-width: 132px; }
.ubar__ic { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--bg-3); color: var(--ink-2); box-shadow: none; transition: transform 160ms var(--out), color 150ms; }
.ubar__ic svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ubar__ic:active { transform: scale(.94); }
.ubar__ic[disabled] { opacity: .35; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .ubar__ic:hover { color: var(--ink); } }
.ujour__fine { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* ---------- 03 · The three parts ---------- */
.ukit { padding-block: clamp(96px, 12vw, 160px) 0; }
.ukit__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ukit__card {
  display: flex; flex-direction: column; height: 100%; padding: 26px 24px 22px; border-radius: var(--r-lg); text-decoration: none;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), 0 4px 0 0 #0E0F11;
  transition: transform 260ms var(--spring), box-shadow 220ms var(--out), background-color 200ms;
}
.ukit__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(46,255,213,.10); color: var(--mint); }
.ukit__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ukit__card b { margin-top: 22px; font: 700 22px/1.15 var(--f-display); letter-spacing: -.02em; }
.ukit__card p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ukit__in { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 12.5px/1.3 var(--f-mono); color: var(--ink-3); }
.ukit__faces { display: flex; flex: none; }
.ukit__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 22%; box-shadow: 0 0 0 2px var(--bg-2); transition: box-shadow 200ms; }
.ukit__faces img + img { margin-left: -9px; }
.ukit__go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 20px; font: 650 14.5px/1 var(--f-body); color: var(--mint); }
.ukit__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--spring); }
.ukit__card:active { transform: translateY(4px); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 #0E0F11; transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .ukit__card:hover { transform: translateY(-4px); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 0 0 #0E0F11; }
  .ukit__card:hover .ukit__faces img { box-shadow: 0 0 0 2px var(--bg-3); }
  .ukit__card:hover .ukit__go svg { transform: translateX(4px); }
  .ukit__card:active { transform: translateY(4px); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 #0E0F11; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-motion .ukit__list > * { animation: f-in var(--out) backwards; animation-timeline: view(); animation-range: entry 0% cover calc(32% + var(--i, 0) * 4%); }
    .has-motion .ukit__list > :nth-child(2) { --i: 1; } .has-motion .ukit__list > :nth-child(3) { --i: 2; }
  }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .ust { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "world dev" "nar nar"; gap: 32px 40px; min-height: 0; }
  .uworld { justify-items: center; }
  .unar { max-width: 40rem; }
}
@media (max-width: 1020px) {
  .uposters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubar__ch span { display: none; }
  .ukit__list { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 760px) {
  /* posters become a swipe row */
  .uposters { margin-top: 36px; }
  .uposters__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; scroll-padding-inline: var(--gutter); }
  .uposters__row::-webkit-scrollbar { display: none; }
  .uposters__row li { flex: none; width: 74vw; max-width: 300px; scroll-snap-align: start; }
  .uposter { height: 300px; }

  .ust { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "world" "dev" "body"; gap: 12px; margin-top: 12px; scroll-margin-top: 76px; }
  .unar { display: contents; }
  .unar__hd { grid-area: hd; }
  .unar__step { display: none; }
  .unar__body, .uend { grid-area: body; }
  .unar__t { margin-top: 10px; font-size: 22px; }
  .uwho { margin-top: 0; }
  .unar__p { font-size: 15.5px; margin-top: 0; }
  .uworld { min-height: 0; }
  .uw { justify-items: center; max-width: none; gap: 10px; }
  .uw__cap { text-align: center; font-size: 14px; }
  .uw__hand { font-size: 19px; }
  .uw-person { display: none; }
  .uw-table { width: 100%; max-width: 320px; height: 140px; }
  .uw-table ~ .uw__cap { display: none; }
  .uw-doc { transform: perspective(900px) rotateX(20deg) rotateZ(-5deg) scale(.92); }
  .uw-checks { display: none; } /* the ring and the count on the phone carry it at this size */
  .uw-srv { grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
  .uw-srv::before { display: none; }
  .uw-srv ~ .uw__cap { display: none; }
  .uw-node { padding: 10px; gap: 10px; }
  .uw-node__ic, .uw-node__slot { display: none; }
  .uw-dial { width: 48px; height: 48px; }
  .uw-dec { grid-column: 1 / -1; justify-self: center; }
  .uphone { transform: scale(.86); margin-block: -39px; }
  .utilt { transform: none; }
  .ubar { margin-top: 18px; gap: 14px; }
  .ubar__ctl .btn { min-width: 0; }
}
@media (max-width: 380px) { .uphone { transform: scale(.8); margin-block: -56px; } }