/* Covendri home page (index.html only). Shared tokens, header, buttons, FAQ, CTA and footer live in site.css.

   Motion system (product showcase, assets/home.js)
   - A scene (.sc) gets cumulative beat classes from the JS: is-b1, then is-b1 is-b2, ... (data-beats = ms per beat).
   - A piece that animates is .fx plus:  bN = beat it enters · xN = beat it leaves · dN = enter delay · eN = leave delay
     and an optional entrance direction: s (scale), l (from left), dn (from above), up (from below), pop (spring-ish scale).
   - Cursors are .cur + cN (beat they click in) + dN. Entrances ease-out 450–600 ms, exits ease-in 250–300 ms,
     staggers 80–250 ms. Only opacity and transform animate.
   - prefers-reduced-motion: no autoplay; every scene shows its final frame (home.js adds all beats at once and the
     global rule in site.css removes transitions). Without JS, home-nojs.css shows every scene's final frame. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ui-wall-a: #e3eef0; --ui-wall-b: #e9edf5;
  --ui-win: #ffffff; --ui-win-2: #f4f6f8; --ui-line: #e6e9ed; --ui-line-2: #d5dbe2;
  --ui-dot: #dfe3e8;
  --ui-shadow: 0 1px 2px rgba(11, 42, 76, 0.06), 0 18px 40px -18px rgba(11, 42, 76, 0.3);
  --ui-acc: #147d7f; --ui-on-acc: #ffffff;
  --bad: #b42318; --bad-soft: #fdeceb;
  --pr-body: #0b2a4c; --pr-body-2: #2a5280; --pr-slot: #061a30;
  --cur-fill: #0b2a4c; --cur-stroke: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ui-wall-a: #0e1a25; --ui-wall-b: #0a1019;
    --ui-win: #131b26; --ui-win-2: #1a2430; --ui-line: #232e3c; --ui-line-2: #2e3a4a;
    --ui-dot: #2e3a4a;
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
    --bad: #f97066; --bad-soft: rgba(249, 112, 102, 0.14);
    --pr-body: #34485f; --pr-body-2: #4a6385; --pr-slot: #0b1118;
    --cur-fill: #ffffff; --cur-stroke: #0b2a4c;
  }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- motion primitives ---------- */
.d1 { --d: .08s; } .d2 { --d: .16s; } .d3 { --d: .3s; } .d4 { --d: .45s; } .d5 { --d: .6s; } .d6 { --d: .8s; } .d7 { --d: 1s; } .d8 { --d: 1.25s; } .d9 { --d: 1.5s; }
.e1 { --e: .06s; } .e2 { --e: .12s; } .e3 { --e: .3s; } .e4 { --e: .45s; } .e6 { --e: .8s; } .e7 { --e: 1s; } .e8 { --e: 1.25s; } .e9 { --e: 1.5s; }
.fx {
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease-in) var(--e, 0s), transform .3s var(--ease-in) var(--e, 0s);
}
.fx.s { transform: scale(.97); }
.fx.l { transform: translateX(-12px); --xt: translateX(16px); }
.fx.dn { transform: translateY(-8px); }
.fx.up { transform: translateY(10px); }
.fx.pop { transform: scale(.6); }
.sc.is-b1 .b1, .sc.is-b2 .b2, .sc.is-b3 .b3, .sc.is-b4 .b4, .sc.is-b5 .b5, .sc.is-b6 .b6 {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s);
}
.sc.is-b2 .fx.x2, .sc.is-b3 .fx.x3, .sc.is-b4 .fx.x4, .sc.is-b5 .fx.x5, .sc.is-b6 .fx.x6 {
  opacity: 0; transform: var(--xt, translateY(-4px));
  transition: opacity .25s var(--ease-in) var(--e, 0s), transform .3s var(--ease-in) var(--e, 0s);
}
.fx.pop { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.sc.is-b1 .fx.pop.b1, .sc.is-b2 .fx.pop.b2, .sc.is-b3 .fx.pop.b3, .sc.is-b4 .fx.pop.b4, .sc.is-b5 .fx.pop.b5 {
  transition: opacity .3s var(--ease-out) var(--d, 0s), transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s);
}
.sc.no-anim, .sc.no-anim * { transition: none !important; animation: none !important; }
.swap { display: inline-grid; justify-items: start; align-items: start; }
.swap > * { grid-area: 1 / 1; }

/* pointer that glides in and clicks */
.cur { position: absolute; right: 8px; bottom: -12px; width: 18px; height: 20px; opacity: 0; pointer-events: none;
  fill: var(--cur-fill); stroke: var(--cur-stroke); stroke-width: 1.3; stroke-linejoin: round; z-index: 2; }
.sc.is-b1 .cur.c1, .sc.is-b2 .cur.c2, .sc.is-b3 .cur.c3, .sc.is-b4 .cur.c4, .sc.is-b5 .cur.c5 { animation: cur 1.15s var(--ease-out) var(--d, 0s) both; }
@keyframes cur {
  0% { opacity: 0; transform: translate(36px, 28px); }
  55% { opacity: 1; transform: none; }
  68% { opacity: 1; transform: scale(.84); }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* ---------- small UI parts shared by the scenes and demos ---------- */
.w { background: var(--ui-win); border: 1px solid var(--ui-line-2); border-radius: 12px; box-shadow: var(--ui-shadow); }
.w-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--ui-line); }
.w-bar i, .ch-tabs i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-dot); }
.w-bar span { position: absolute; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-2); pointer-events: none; }
.tile { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--ui-line-2); }
.tile.sm { width: 22px; height: 22px; border-radius: 6px; }
.tile.xs { width: 20px; height: 20px; border-radius: 6px; }
.mk { width: 16px; height: 17px; color: #0b2a4c; fill: #147d7f; }
.tile.sm .mk, .tile.xs .mk { width: 13px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; }
.chip-acc { background: var(--accent-soft); color: var(--accent-text); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-soft { background: var(--ui-win-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.chip .dotc { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip svg { width: 14px; height: 14px; }
.okm { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.okc { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-acc); }
.okc svg { width: 12px; height: 12px; fill: none; stroke: var(--ui-on-acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.okc.lg { width: 24px; height: 24px; }
.okc.lg svg { width: 15px; height: 15px; }
.badc { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
@media (prefers-color-scheme: dark) { .badc { color: #2a0805; } }
.qa { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text); background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.qa-pri { background: var(--ui-acc); color: var(--ui-on-acc); box-shadow: none; }
.qa-done { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.qa svg.okm { width: 14px; height: 14px; }
.kchip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; }
.kchip svg { width: 16px; height: 16px; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--ui-line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--ui-acc); transform: scaleX(0); transform-origin: 0 50%; }
.pop-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); }
.pop-head b { font-size: 15px; font-weight: 650; color: var(--ink); }
.online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bub { justify-self: end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ui-acc); color: var(--ui-on-acc); font-size: 14px; line-height: 1.45; }
.type { display: inline-grid; }
.type > span { grid-area: 1 / 1; }
.type .tg { visibility: hidden; }

/* ---------- hero ---------- */
.hero2 { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.hero2::before {
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 900px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 360px at 50% 8%, var(--glow-1), transparent 70%),
    radial-gradient(600px 400px at 10% 0%, var(--glow-2), transparent 70%);
}
.hero2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 40% at 50% 10%, #000 30%, transparent 75%);
}
.hero2-head { max-width: 820px; margin: 0 auto; text-align: center; }
.hero2 h1 { margin-top: 22px; font-size: clamp(2.45rem, 6.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 680; }
.hero2 h1 .accent { color: var(--accent-text); }
.hero2-sub { margin: 22px auto 0; max-width: 600px; color: var(--text-2); font-size: clamp(1.06rem, 1.5vw, 1.25rem); line-height: 1.55; }
.hero2 .cta-row { justify-content: center; margin-top: 30px; }

/* ---------- showcase ---------- */
.show { margin-top: clamp(40px, 6vw, 64px); scroll-margin-top: calc(var(--header-h) + 12px); }
.show-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 16px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); }
.show-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; overflow: hidden;
  background: transparent; color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 560; letter-spacing: -0.005em; cursor: pointer;
  transition: background-color .25s ease, color .25s ease; }
.show-tab:hover { color: var(--text); background: var(--accent-soft); }
.show-tab svg { width: 18px; height: 18px; flex: none; }
.show-tab[aria-selected="true"] { background: var(--btn); color: var(--btn-fg); }
.show-tab .t-short { display: none; }
.show-prog { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.show-prog b { display: block; height: 100%; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: 0 50%; }
.show.is-playing .show-tab[aria-selected="true"] .show-prog { opacity: 1; }

.show-stage { position: relative; height: 600px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--ui-wall-a), var(--ui-wall-b)); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.show-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 300px at 85% 0%, var(--glow-1), transparent 70%); }
.sc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px 28px 80px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-in), visibility 0s linear .3s; }
.sc.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out) .12s, visibility 0s; }
.sc:focus-visible { outline-offset: -4px; border-radius: 20px; }
.sc-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-art > * { flex-shrink: 0; }
.sc-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; height: 100%; }
.sc-cap { position: absolute; left: 0; right: 0; bottom: 24px; display: grid; justify-items: center; pointer-events: none; }
.sc-cap > span { grid-area: 1 / 1; padding: 8px 16px; border-radius: 999px; background: var(--ui-win); box-shadow: var(--ui-shadow), inset 0 0 0 1px var(--ui-line);
  color: var(--ink); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.show-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.show-ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong); }
.show-ctl:hover { color: var(--text); border-color: var(--text-3); }
.show-ctl[hidden] { display: none; }
.show-ctl svg { width: 16px; height: 16px; }
.show-ctl .ic-play path { fill: currentColor; }
.show-ctl .ic-play { display: none; }
.show:not(.is-playing) .show-ctl .ic-play { display: block; }
.show:not(.is-playing) .show-ctl .ic-pause { display: none; }
.show-note { color: var(--text-3); font-size: 12.5px; text-align: center; }

/* scene 1: fix IT */
.mbar { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 16px;
  background: color-mix(in srgb, var(--ui-win) 72%, transparent); border-bottom: 1px solid var(--ui-line); color: var(--ink); font-size: 13px; }
.mbar b { font-weight: 650; }
.mbar span { color: var(--text-2); }
.mb-r { flex: 1; }
.mb-ic { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 6px; }
.mb-ic .mk { width: 15px; height: 16px; color: var(--ink); fill: var(--ink); }
.sc.is-b1 .mb-ic { background: var(--accent-soft); }
.mbar .mb-g { width: 17px; height: 17px; color: var(--ink); }
.mbar .mb-t { color: var(--ink); font-weight: 500; }
.sc-it { padding-top: 46px; }
.w-printer { width: 290px; align-self: flex-start; margin-top: 44px; }
.pr-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 16px; }
.pr-head b { display: block; color: var(--ink); font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.pr-ill { width: 64px; height: 56px; overflow: visible; }
.pr-paper { fill: var(--ui-win); stroke: var(--ui-line-2); }
.pr-body { fill: var(--pr-body); }
.pr-body2 { fill: var(--pr-body-2); }
.pr-slot { fill: var(--pr-slot); }
.pr-led-bad { fill: #f97066; }
.pr-led-ok { fill: #5fcbcc; }
.pr-ln { fill: var(--ui-line-2); }
.pr-ill .fx { transform-box: fill-box; }
.pr-queue { padding: 12px 16px 16px; border-top: 1px solid var(--ui-line); }
.pr-qh { display: flex; justify-content: space-between; color: var(--text-3); font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.pr-queue > .swap { display: grid; }
.pr-docs { list-style: none; display: grid; gap: 6px; }
.pr-docs li { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--ui-win-2); color: var(--ink); font-size: 13.5px; }
.pr-docs svg { width: 16px; height: 16px; color: var(--text-3); }
.pr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); font-size: 13.5px; }
.pr-empty .okc { width: 28px; height: 28px; }
.pr-empty .okc svg { width: 16px; height: 16px; }
.w-pop { width: 400px; overflow: hidden; }
.pop-body { display: grid; gap: 10px; padding: 14px; }
.ai-row { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.ai-title b { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.ai-row .chip { margin-left: auto; }
.checks { list-style: none; padding: 2px 12px; border-radius: 12px; background: var(--ui-win-2); }
.checks li { display: flex; align-items: center; gap: 10px; height: 32px; color: var(--ink); font-size: 13.5px; }
.checks li + li { border-top: 1px solid var(--ui-line); }
.checks em { margin-left: auto; font-style: normal; color: var(--text-3); font-size: 12.5px; }
.checks .is-bad em { color: var(--bad); font-weight: 600; }
.fixcard { display: grid; gap: 12px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.fix-top { display: flex; align-items: flex-start; gap: 12px; }
.fix-l { color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.4; }
.fix-top .chip { margin-left: auto; flex: none; }
.fix-state { display: grid; align-items: center; min-height: 20px; }
.fix-state .bar { align-self: center; }
.sc.is-b3 .fixcard .bar i { animation: fill 1.7s cubic-bezier(.45, 0, .25, 1) .45s both; }
.fix-done { display: flex; align-items: center; gap: 8px; color: var(--accent-text); font-size: 13.5px; font-weight: 600; }
@keyframes fill { from { transform: scaleX(0); } to { transform: none; } }

/* scene 2: email */
.w-mail { width: 100%; max-width: 940px; overflow: hidden; }
.mail { display: grid; grid-template-columns: 200px 230px minmax(0, 1fr); height: 418px; }
.mail-side { padding: 12px 10px; background: var(--ui-win-2); border-right: 1px solid var(--ui-line); }
.ms-h { padding: 4px 10px 8px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.ms-f { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; }
.ms-f svg { width: 16px; height: 16px; }
.ms-f em, .ms-n { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; }
.ms-n em { font-style: normal; justify-self: end; }
.ms-f.is-on { background: var(--accent-soft); color: var(--accent-text); }
.is-new { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ui-acc); color: var(--ui-on-acc); text-align: center; line-height: 20px; }
.mail-list { border-right: 1px solid var(--ui-line); overflow: hidden; }
.ml-i { position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--ui-line); }
.ml-i b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.ml-i span { color: var(--text-2); font-size: 13px; }
.ml-i em { position: absolute; right: 14px; top: 13px; font-style: normal; color: var(--text-3); font-size: 12px; }
.ml-i.is-sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--ui-acc); }
.unread { position: absolute; left: 9px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-acc); }
.mail-read { display: grid; align-content: start; gap: 14px; padding: 16px 18px; min-width: 0; }
.msg-from { display: flex; align-items: center; gap: 8px; }
.av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e7dccd; color: #5b4630; font-size: 12px; font-weight: 700; }
.msg-from b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.msg-from em { font-style: normal; color: var(--text-3); font-size: 12.5px; }
.msg-t { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.draft { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--accent-line), 0 6px 18px -10px rgba(20, 125, 127, .35); }
.dr-h { display: flex; align-items: center; gap: 8px; }
.dr-h b { color: var(--ink); font-size: 13.5px; font-weight: 650; }
.dr-k { display: flex; flex-wrap: wrap; gap: 6px; }
.kc { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--ui-win-2); box-shadow: inset 0 0 0 1px var(--ui-line); color: var(--text-2); font-size: 12px; font-weight: 600; }
.dr-t { display: grid; gap: 6px; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.dr-f { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.dr-saved { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-size: 13px; font-weight: 600; }

/* scene 3: quote */
.q-side { display: grid; gap: 12px; width: 280px; }
.q-tpl .thumbs { margin: 10px 0 8px; }
.q-tpl .thumbs i { height: 60px; }
.q-req, .q-tpl { padding: 14px 16px; }
.q-lbl { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.q-lbl svg { width: 16px; height: 16px; }
.q-txt { margin-top: 8px; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.45; }
.thumbs { display: flex; gap: 10px; margin: 12px 0 10px; }
.thumbs i { width: 58px; height: 74px; border-radius: 6px; background:
  linear-gradient(var(--ui-acc), var(--ui-acc)) 8px 9px / 18px 6px no-repeat,
  linear-gradient(var(--ui-line-2), var(--ui-line-2)) 8px 24px / 40px 3px no-repeat,
  linear-gradient(var(--ui-line-2), var(--ui-line-2)) 8px 33px / 34px 3px no-repeat,
  linear-gradient(var(--ui-line-2), var(--ui-line-2)) 8px 42px / 40px 3px no-repeat,
  linear-gradient(var(--ui-line-2), var(--ui-line-2)) 30px 60px / 20px 4px no-repeat,
  var(--ui-win-2);
  box-shadow: inset 0 0 0 1px var(--ui-line); }
.q-sm { color: var(--text-3); font-size: 12.5px; }
.q-doc { width: 490px; padding: 14px 20px 16px; }
.qd-head { display: flex; align-items: center; gap: 12px; }
.qd-logo { width: 32px; height: 32px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #0b2a4c, #147d7f); }
.qd-head b { display: block; color: var(--ink); font-size: 15px; font-weight: 650; }
.qd-head em { display: block; font-style: normal; color: var(--text-3); font-size: 12.5px; }
.qd-date { margin-left: auto; color: var(--text-3); font-size: 12.5px; }
.qd-rows { margin-top: 10px; border-top: 1px solid var(--ui-line); }
.qd-rows p { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ui-line-2); }
.qd-rows span { color: var(--ink); font-size: 13.5px; font-weight: 550; }
.qd-rows em { display: block; font-style: normal; font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.qd-rows b, .qd-total b { color: var(--ink); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qd-total { display: flex; justify-content: space-between; padding-top: 12px; color: var(--ink); font-size: 15px; font-weight: 650; }
.qd-total b { font-size: 15px; font-weight: 700; }
.qd-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qd-valid { color: var(--text-3); font-size: 12.5px; }
.qd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.qd-img { position: relative; height: 86px; margin: 0 -8px 12px; border-radius: 8px; overflow: hidden; background: var(--ui-win-2); }
.qd-img .gen { position: absolute; inset: 0; width: 100%; height: 100%; }
.gen-ph { position: absolute; inset: 0; overflow: hidden; }
.gen-ph::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-acc) 22%, transparent), transparent); }
.sc.is-b3 .gen-ph::after { animation: shimmer 1.1s linear .1s 2; }
@keyframes shimmer { to { transform: translateX(100%); } }
.q-img { padding: 14px 16px; }
.q-prompt { font-style: italic; font-weight: 500; }
.q-gen { margin-top: 6px; }

/* email accounts (Outlook + Gmail) */
.ms-acc { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.ms-acc em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--text-3); font-size: 12px; }
.ms-acc i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.acc-o { background: #2f7fd1; }
.acc-g { background: #d9584a; }
.ms-acc.is-on { background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ms-h2 { margin-top: 10px; }

/* scene 3: WhatsApp */
.wa-phone { width: 390px; overflow: hidden; display: flex; flex-direction: column; }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
.wa-top b { display: block; color: var(--ink); font-size: 14px; font-weight: 650; }
.wa-top em { display: block; font-style: normal; color: var(--text-3); font-size: 12px; }
.av-co { background: #d8ece6; color: #0e5f53; }
.wa-chat { display: grid; align-content: start; gap: 10px; padding: 12px 14px; min-height: 318px; background: var(--ui-win-2); }
.wa-day { justify-self: center; padding: 2px 10px; border-radius: 999px; background: var(--ui-win); color: var(--text-3); font-size: 12px; font-weight: 600; }
.wa-in, .wa-out { max-width: 86%; padding: 8px 12px 6px; color: var(--ink); font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(11, 42, 76, .08); }
.wa-in { justify-self: start; border-radius: 4px 14px 14px 14px; background: var(--ui-win); }
.wa-out { justify-self: end; border-radius: 14px 4px 14px 14px; background: #d9f2ec; }
@media (prefers-color-scheme: dark) { .wa-out { background: #11403d; } }
.wa-in em, .wa-out em { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; color: var(--text-3); font-size: 12px; }
.wa-out em { color: var(--text-2); }
.ticks { width: 16px; height: 11px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa-swap { display: grid; justify-items: end; align-items: start; }
.wa-draft { width: 92%; padding: 10px 12px; border-radius: 14px; background: var(--ui-win); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.wa-dh { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 12px; font-weight: 600; }
.wa-dt { margin: 6px 0 10px; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.wa-db { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-db .swap:last-child { justify-items: end; }
.wa-input { padding: 10px 12px; border-top: 1px solid var(--ui-line); }
.wa-input span { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ui-win-2); color: var(--text-3); font-size: 13px; }
.wa-side { width: 290px; padding: 16px; align-self: center; }
.wa-k { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.wa-mode { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.wa-mode > span:first-child { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.seg-mini { display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: var(--ui-win-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.seg-mini i { padding: 5px 10px; border-radius: 999px; font-style: normal; color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.seg-mini i.is-on { background: var(--btn); color: var(--btn-fg); }
.wa-side .q-sm { margin-top: 10px; }

/* scene 4: research */
.rs-win { width: 100%; max-width: 660px; overflow: hidden; }
.rs-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
.rs-q { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ui-win-2); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.45; }
.rs-q svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-3); }
.rs-stat { display: grid; color: var(--text-2); font-size: 13px; }
.rs-stat p { display: flex; align-items: center; gap: 10px; }
.rs-bar { width: 80px; flex: none; }
.sc.is-b1 .rs-bar i { animation: fill 2s cubic-bezier(.45, 0, .25, 1) .9s both; }
.rs-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-card { position: relative; display: grid; align-content: start; padding-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.rs-ph { display: block; width: 100%; height: 62px; }
.rs-card b { margin: 10px 12px 0; color: var(--ink); font-size: 13.5px; font-weight: 650; }
.rs-card > span:not(.rs-ph):not(.src) { margin: 2px 12px 0; color: var(--text-3); font-size: 12.5px; }
.rs-card em { margin: 8px 12px 0; font-style: normal; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.src { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-win); color: var(--accent-text); font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(11, 42, 76, .2); }
.rs-note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.rs-note svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.rs-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-src span { color: var(--text-3); font-size: 12.5px; font-weight: 600; margin-right: 2px; }
.rs-src i { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-style: normal; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rs-acts { display: flex; }

/* scene 6: learn */
.l-teach { width: 330px; padding: 16px; align-self: center; }
.l-h { color: var(--ink); font-size: 15px; font-weight: 650; margin-bottom: 4px; }
.l-src { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ui-line); }
.l-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.l-ic svg { width: 18px; height: 18px; }
.l-src b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.l-src em { font-style: normal; color: var(--text-3); font-size: 12.5px; }
.l-src .bar { margin-top: 8px; }
.sc.is-b1 .l-bar i { animation: fill 2s cubic-bezier(.45, 0, .25, 1) .3s both; }
.sc.is-b1 .l-bar2 i { animation-duration: 1.2s; animation-delay: 1.4s; }
.sc.is-b2 .l-bar i { transform: none; }
.l-teach .kchip { margin-top: 14px; }
.l-kb { width: 420px; overflow: hidden; }
.l-kbh { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); }
.l-kbh b { color: var(--ink); font-size: 15px; font-weight: 650; }
.l-kbh .swap { justify-items: end; }
.l-all { align-self: center; color: var(--accent-text); font-size: 13px; font-weight: 600; }
.prop { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); }
.prop-t { display: flex; align-items: center; gap: 8px; padding-right: 150px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.tag { height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--ui-win-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.prop-s { margin-top: 5px; color: var(--text-2); font-size: 13px; }
.prop-st { position: absolute; right: 16px; top: 12px; justify-items: end; }
.l-count { display: flex; align-items: center; gap: 8px; padding: 14px 16px; color: var(--text-2); font-size: 13px; background: var(--ui-win-2); }
.l-count svg { width: 16px; height: 16px; color: var(--accent-text); }
.l-count .swap { margin-left: auto; justify-items: end; }
.l-count b { color: var(--ink); font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* scene 5: routines (Chrome) */
.w-chrome { position: relative; width: 100%; max-width: 760px; overflow: hidden; }
.ch-tabs { display: flex; align-items: flex-end; gap: 7px; height: 40px; padding: 0 12px; background: var(--ui-win-2); }
.ch-tabs i { margin-bottom: 15px; }
.ch-tab { margin-left: 10px; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 9px 9px 0 0; background: var(--ui-win); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.ch-url { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); }
.ch-addr { flex: 1; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ui-win-2); color: var(--text-3); font-size: 12.5px; }
.ch-addr svg { width: 14px; height: 14px; }
.ch-banner { position: absolute; left: 0; right: 0; top: 87px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px;
  background: var(--ui-acc); color: var(--ui-on-acc); font-size: 13px; font-weight: 600; }
.ch-banner .live { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.ch-banner kbd { margin-left: 6px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .55); font: inherit; font-size: 12px; }
.ch-stop { opacity: .9; font-weight: 500; }
.ch-page { padding: 56px 24px 24px; }
.ch-ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ch-ph b { color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.ch-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.ch-filter em { font-style: normal; font-weight: 600; color: var(--ink); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.ch-filter em.hl { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.inv { margin-top: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ui-line); overflow: hidden; }
.inv-r { display: grid; grid-template-columns: 1fr 1fr 1fr 32px; align-items: center; height: 44px; padding: 0 16px; color: var(--text-2); font-size: 13.5px; }
.inv-r + .inv-r { border-top: 1px solid var(--ui-line); }
.inv-r b { justify-self: end; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-dl { justify-self: end; display: grid; place-items: center; }
.inv-dl svg.i { width: 18px; height: 18px; color: var(--text-3); }
.inv-r.is-old, .inv-r.is-old b { color: var(--text-3); }
.inv-r.is-old b { font-weight: 500; }
.ch-ask { position: absolute; inset: 0; z-index: 2; width: 340px; height: max-content; margin: auto; padding: 18px; border-radius: 14px;
  background: var(--ui-win); box-shadow: 0 0 0 1px var(--ui-line-2), var(--ui-shadow), 0 0 0 2000px rgba(11, 42, 76, .14); }
.ask-h { display: flex; align-items: center; gap: 10px; }
.ask-h b { color: var(--ink); font-size: 15px; font-weight: 650; }
.ask-t { margin: 8px 0 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.ask-b { display: flex; justify-content: flex-end; gap: 8px; }
.ch-done { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 12px 16px;
  border-radius: 12px; background: var(--ui-win); box-shadow: 0 0 0 1px var(--ui-line-2), var(--ui-shadow); }
.done-h { display: flex; align-items: center; gap: 10px; }
.done-h b { color: var(--ink); font-size: 14px; font-weight: 650; }
.done-g { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- works with ---------- */
.works { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.works-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 32px; padding-top: 20px; padding-bottom: 20px; }
.works-h { color: var(--text-3); font-size: 13px; font-weight: 600; }
.works-l { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.works-l li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.works-l svg { width: 18px; height: 18px; color: var(--accent-text); }
.works-l em { font-style: normal; font-weight: 400; color: var(--text-3); font-size: 13px; }
.works-next { padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--text-3); font-size: 13px; }

/* ---------- try it ---------- */
.try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tchip { min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.tchip:hover { border-color: var(--accent); background: var(--accent-soft); }
.tchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.try-note { margin-top: 18px; color: var(--text-3); font-size: 13px; }
.try-app { display: flex; flex-direction: column; height: 540px; border-radius: 16px; overflow: hidden; background: var(--ui-win); border: 1px solid var(--ui-line-2); box-shadow: var(--shadow-lg); }
.try-log { flex: 1; min-height: 0; display: grid; align-content: start; gap: 14px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tl-hello { display: flex; align-items: flex-start; gap: 10px; }
.tl-hello p, .tl-say { padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--ui-win-2); color: var(--ink); font-size: 14px; line-height: 1.45; }
.tl-bub { justify-self: end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ui-acc); color: var(--ui-on-acc); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.tl-ai { display: grid; gap: 10px; padding-left: 32px; }
.tl-title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 650; }
.tl-title .chip { margin-left: auto; }
.tl-checks { list-style: none; padding: 2px 12px; border-radius: 12px; background: var(--ui-win-2); }
.tl-checks li { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 0; color: var(--ink); font-size: 13.5px; line-height: 1.35; }
.tl-checks li + li { border-top: 1px solid var(--ui-line); }
.tl-checks .spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--ui-line-2); border-top-color: var(--ui-acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tl-res { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.tl-res p { color: var(--ink); font-size: 14px; line-height: 1.45; }
.tl-res.is-warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.tl-res .qa-row { display: flex; gap: 8px; }
.tl-in { animation: tl-in .5s var(--ease-out) both; }
@keyframes tl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.try-form { position: relative; padding: 12px; border-top: 1px solid var(--ui-line); }
.try-form[hidden] { display: none; }
.try-form input { width: 100%; height: 46px; padding: 0 54px 0 18px; border-radius: 999px; border: 1px solid var(--ui-line-2); background: var(--ui-win-2);
  color: var(--text); font: inherit; font-size: 16px; }
.try-form input::placeholder { color: var(--text-3); }
.try-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.try-form button { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--ui-acc); color: var(--ui-on-acc); }
.try-form button svg { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- email & quotes ---------- */
.office-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ocard { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ocard h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.ocard-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; }
.seg { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; align-self: start; margin: 20px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); min-inline-size: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 18px; border-radius: 999px; cursor: pointer;
  color: var(--text-2); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center; transition: color .3s ease; }
.seg input:checked + label { color: var(--btn-fg); }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--btn); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out); }
#mode-send:checked ~ .seg-thumb { transform: translateX(100%); }
.flow { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto; align-items: start; margin-top: 30px; }
.fl-n { display: grid; justify-items: center; gap: 4px; min-width: 96px; text-align: center; }
.fl-n > .swap { justify-items: center; }
.fl-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.fl-ic svg.i { width: 22px; height: 22px; }
.fl-mk { background: #fff; border-color: var(--ui-line-2); }
.fl-mk .mk { width: 22px; height: 24px; }
.fl-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.fl-n b { color: var(--ink); font-size: 14px; font-weight: 600; }
.fl-n em { font-style: normal; color: var(--text-3); font-size: 12.5px; }
.fl-line { position: relative; height: 2px; margin-top: 23px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.fl-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; }
.mode.is-run .fl-line i { animation: fill .6s var(--ease-in) both; }
.mode.is-run .fl-l2 i { animation-delay: .7s; }
.mode.is-run .fl-end > .swap:first-child { animation: nodepop .5s cubic-bezier(.34, 1.56, .64, 1) 1.25s both; }
.mode.is-run .mode-pv { animation: pvin .6s var(--ease-out) 1.4s both; }
.mode.is-run.is-quick .fl-line i { animation-duration: .3s; }
.mode.is-run.is-quick .fl-l2 i { animation-delay: .3s; }
.mode.is-run.is-quick .fl-end > .swap:first-child { animation-delay: .55s; }
.mode.is-run.is-quick .mode-pv { animation-duration: .4s; animation-delay: .5s; }
@keyframes nodepop { from { transform: scale(.7); } to { transform: none; } }
@keyframes pvin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-draft, .m-send { transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.m-send { opacity: 0; transform: translateY(6px); }
.mode:has(#mode-send:checked) .m-send { opacity: 1; transform: none; }
.mode:has(#mode-send:checked) .m-draft { opacity: 0; transform: translateY(-6px); }
.mode-pv { display: grid; margin-top: 26px; }
.pv { padding: 12px 14px; border-radius: 14px; background: var(--ui-win-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.pv-h { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.pv-h svg.i { width: 15px; height: 15px; }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--ui-line); }
.pv-row b { color: var(--ink); font-size: 14px; font-weight: 600; }
.pv-row span:not(.chip) { grid-column: 1; color: var(--text-3); font-size: 12.5px; }
.pv-row .chip { grid-column: 2; grid-row: 1 / span 2; }
.pv-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.mode-cap { display: grid; margin-top: 18px; color: var(--text-2); font-size: 15px; line-height: 1.5; min-height: 3em; }
.mode-cap > span { grid-area: 1 / 1; }
.mode-cap .m-send, .mode:has(#mode-send:checked) .mode-cap .m-draft { visibility: hidden; }
.mode:has(#mode-send:checked) .mode-cap .m-send { visibility: visible; }
.mq { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--ui-win); box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.mq-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-line); }
.mq-head b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 650; }
.mq-head em { display: block; font-style: normal; color: var(--text-3); font-size: 12.5px; }
.mq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px dashed var(--ui-line-2); }
.mq-hotel { grid-template-columns: minmax(0, 1fr) auto auto; }
.mq-row > span:first-child { color: var(--ink); font-size: 14px; font-weight: 550; }
.mq-row em { display: block; font-style: normal; font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.mq-row > b, .mq-total b { min-width: 64px; text-align: right; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.step button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.step button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); }
.step button:disabled { color: var(--text-3); opacity: .5; cursor: default; }
.step button[hidden] { display: none; }
.step output { min-width: 68px; padding: 0 4px; text-align: center; color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; color: var(--ink); font-size: 15px; font-weight: 650; }
.mq-total b { font-size: 16px; font-weight: 700; display: inline-block; }
.mq-total b.bump { animation: bump .45s var(--ease-out); }
@keyframes bump { 0% { transform: translateY(-6px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.mq-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--accent-text); font-size: 13.5px; font-weight: 600; }
.mq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 20px; }
.mq-acts .btn[hidden] { display: none; }
.mq-also { color: var(--text-3); font-size: 13.5px; }

/* ---------- safety band ---------- */
.safety .lead { max-width: 640px; }
.risk2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "ctl out" "sw out"; grid-template-rows: auto 1fr; gap: 28px 40px; align-items: start;
  padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--band-border); }
.r-ctl { grid-area: ctl; }
.r-lbl { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.risk2 input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.risk2 input[type="range"][hidden] { display: none; }
.risk2 input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .28) 0 30%, #4cbfc0 30% 70%, #fbbf24 70%); }
.risk2 input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .28) 0 30%, #4cbfc0 30% 70%, #fbbf24 70%); }
.risk2 input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff;
  border: 0; box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .35); }
.risk2 input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .35); }
.risk2 input[type="range"]:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 4px; border-radius: 8px; }
.r-scale { display: grid; grid-template-columns: 30% 40% 30%; margin-top: 8px; color: var(--band-muted); font-size: 12.5px; font-weight: 600; }
.rs-safe { text-align: center; color: #8fe3e4; }
.rs-high { text-align: right; color: #fcd34d; }
.r-out { grid-area: out; padding: clamp(20px, 2.5vw, 28px); border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--band-border); }
.r-act { color: #fff; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 650; letter-spacing: -0.02em; min-height: 1.4em; }
.r-act.bump { animation: bump .4s var(--ease-out); }
.r-tier { margin-top: 12px; justify-items: start; }
.r-tier .chip { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .3s; }
.r-out[data-tier="look"] .t-look, .r-out[data-tier="safe"] .t-safe, .r-out[data-tier="high"] .t-high { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chip-band { background: rgba(255, 255, 255, .1); color: #e2e8f0; }
.chip-band-acc { background: rgba(76, 191, 192, .18); color: #8fe3e4; }
.chip-band-warn { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.r-flow { display: flex; align-items: flex-start; margin-top: 26px; }
.rf-n { display: grid; justify-items: center; gap: 8px; min-width: 88px; text-align: center; color: var(--band-muted); font-size: 12.5px; font-weight: 600; transition: opacity .35s ease; }
.rf-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid var(--band-border); color: #fff; transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.rf-ic .mk { width: 20px; height: 22px; color: #fff; fill: #4cbfc0; }
.rf-ic svg.i { width: 20px; height: 20px; }
.rf-ok { background: rgba(76, 191, 192, .2); border-color: rgba(76, 191, 192, .4); }
.rf-ok svg { width: 18px; height: 18px; fill: none; stroke: #8fe3e4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-l { flex: 1; height: 2px; margin-top: 20px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.r-out:not(.needs) .rf-admin { opacity: .35; }
.r-out.needs .rf-warn { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .45); color: #fcd34d; }
.r-out.needs .rf-admin { color: #fcd34d; }
.r-who { margin-top: 20px; color: var(--band-muted); font-size: 15px; line-height: 1.5; min-height: 3em; }
.r-switch { grid-area: sw; display: inline-flex; align-items: center; gap: 12px; justify-self: start; cursor: pointer; color: #fff; font-size: 15px; font-weight: 500; }
.r-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .22); transition: background-color .25s ease; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s var(--ease-out); }
.r-switch input:checked + .sw { background: #147d7f; }
.r-switch input:checked + .sw::after { transform: translateX(18px); }
.r-switch input:focus-visible + .sw { outline: 2px solid var(--band-accent); outline-offset: 3px; }
.guards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.guard { padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--band-border); transition: background-color .2s ease, border-color .2s ease; }
.guard:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, .2); }
.guard svg { width: 22px; height: 22px; color: var(--band-accent); }
.guard h3 { margin-top: 14px; font-size: 1rem; letter-spacing: -0.01em; }
.guard p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }

/* ---------- setup timeline ---------- */
.setup-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.setup-head { position: sticky; top: calc(var(--header-h) + 48px); }
.tline { position: relative; list-style: none; display: grid; }
.tl-line { position: absolute; left: 19px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.tl-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
.ts { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding: 22px 0; }
.ts-dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong);
  color: var(--text-3); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .45s var(--ease-out); }
.ts-dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ts.is-on .ts-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .ts.is-on .ts-dot { background: #147d7f; border-color: #147d7f; } }
.ts h3 { font-size: 1.12rem; letter-spacing: -0.015em; padding-top: 8px; }
.ts p { margin-top: 4px; color: var(--text-2); font-size: 15.5px; }
.ts:not(.is-on) h3 { color: var(--text-2); }
.ts h3 { transition: color .35s ease; }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }
.guards .guard:nth-child(2) { transition-delay: .06s; } .guards .guard:nth-child(3) { transition-delay: .12s; }
.guards .guard:nth-child(4) { transition-delay: .18s; } .guards .guard:nth-child(5) { transition-delay: .24s; } .guards .guard:nth-child(6) { transition-delay: .3s; }
.office-grid .rv:nth-child(2) { transition-delay: .08s; }
.try-app.rv { transition-delay: .08s; }
.guard.rv.is-in:hover { transition-delay: 0s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .w-printer { width: 260px; }
  .mail { grid-template-columns: 0 220px minmax(0, 1fr); }
  .mail-side { display: none; }
  .mail { grid-template-columns: 220px minmax(0, 1fr); }
  .q-side { width: 250px; }
  .l-teach { width: 290px; }
  .l-kb { width: auto; flex: 1; max-width: 420px; }
}
@media (max-width: 900px) {
  .show-stage { height: 600px; }
  .show-tab .t-long { display: none; }
  .show-tab .t-short { display: inline; }
  /* Tablets and phones: icon-over-label tabs that never wrap or clip; the strip scrolls sideways when it must. */
  .show-tabs { width: 100%; border-radius: 16px; gap: 2px; padding: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .show-tabs::-webkit-scrollbar { display: none; }
  .show-tab { flex: 1 0 auto; min-width: 74px; flex-direction: column; justify-content: center; gap: 4px; height: 58px; padding: 0 8px; border-radius: 12px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap; scroll-snap-align: start; }
  .show-prog { left: 12px; right: 12px; bottom: 4px; }
  .mail { grid-template-columns: minmax(0, 1fr); }
  .mail-list { display: none; }
  .w-mail { max-width: 560px; }
  .try { grid-template-columns: minmax(0, 1fr); }
  .try-app { max-width: 560px; width: 100%; }
  .office-grid { grid-template-columns: minmax(0, 1fr); }
  .risk2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctl" "out" "sw"; }
  .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-in { grid-template-columns: minmax(0, 1fr); }
  .setup-head { position: static; }
  .q-side { display: none; }
  .wa-side { width: 250px; }
  .l-teach { display: none; }
  .l-kb { max-width: 460px; }
}
@media (max-width: 900px) {
  .w-printer { width: 236px; }
  .w-pop { width: 380px; }
  .sc-art { gap: 16px; }
}
@media (max-width: 720px) {
  .w-printer, .wa-side { display: none; }
  .mbar span:not(.mb-t):not(.mb-ic) { display: none; }
}
@media (max-width: 640px) {
  .show-tab { flex: none; font-size: 12px; }
  .show-stage { height: 644px; border-radius: 16px; margin: 0 calc(var(--gutter) * -1 + 8px); }
  .sc { padding: 14px 12px 70px; align-items: flex-start; }
  .sc-art { flex-direction: column; justify-content: center; gap: 12px; }
  .sc-cap { bottom: 18px; }
  .sc-cap > span { font-size: 13.5px; padding: 8px 14px; }
  .w-pop, .w-mail, .q-doc, .l-kb, .w-chrome { width: 100%; max-width: none; }
  .pop-head { height: 46px; }
  .pop-body { padding: 12px; gap: 9px; }
  .checks li { height: auto; min-height: 30px; padding: 4px 0; line-height: 1.25; }
  .checks em { text-align: right; }
  .kchip { height: auto; min-height: 30px; padding-block: 5px; line-height: 1.25; }
  .mail-read { padding: 14px; }
  .q-doc { padding: 16px; }
  .qd-acts > .qa { display: none; }
  .prop-t { padding-right: 0; }
  .prop-st { position: static; margin-top: 8px; justify-items: start; }
  .prop { padding: 12px 14px; }
  .l-kbh { padding: 0 14px; }
  .ch-page { padding: 52px 14px 16px; }
  .inv-r { grid-template-columns: 1fr auto 32px; gap: 12px; padding: 0 12px; }
  .inv-r > span:nth-child(2) { display: none; }
  .ch-banner { font-size: 12.5px; gap: 6px; }
  .ch-stop { display: none; }
  .ch-ask { width: calc(100% - 24px); }
  .ch-done { bottom: 12px; max-width: calc(100% - 20px); }
  .done-h b { font-size: 13.5px; }
  .ch-tab { margin-left: 4px; padding: 0 10px; }
  .works-in { justify-content: flex-start; gap: 12px 20px; }
  .works-l { justify-content: flex-start; gap: 10px 20px; }
  .try-app { height: 520px; }
  .flow { grid-template-columns: auto minmax(8px, 1fr) auto minmax(8px, 1fr) auto; }
  .fl-n { min-width: 0; }
  .fl-n b { font-size: 13px; }
  .seg { display: grid; width: 100%; }
  .seg label { padding: 4px 10px; font-size: 14px; }
  .r-flow .rf-n { min-width: 0; font-size: 12px; }
  .guards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .guard { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .guard svg { grid-row: 1 / span 2; margin-top: 1px; }
  .guard h3 { margin-top: 0; }
  .mq { padding: 14px; }
  .mq-hotel { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .mq-hotel .step { grid-column: 1; grid-row: 2; justify-self: start; }
  .mq-hotel > b { grid-column: 2; grid-row: 1; }
  .sc-it { padding-top: 44px; }
  .wa-phone, .rs-win { width: 100%; }
  .wa-chat { min-height: 0; padding: 12px; }
  .rs-body { gap: 10px; padding: 12px; }
  .rs-q { font-size: 13.5px; }
  .rs-res { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rs-card { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; column-gap: 12px; }
  .rs-ph, .src { display: none; }
  .rs-card b, .rs-card > span:not(.rs-ph):not(.src), .rs-card em { margin: 0; }
  .rs-card em { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .qd-img { height: 72px; margin: 0 -4px 10px; }
  .mbar { height: 30px; padding: 0 12px; gap: 12px; }
}
@media (max-width: 380px) {
  .seg label { padding: 4px 8px; font-size: 13.5px; }
  .show-tab { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .tl-checks .spin { animation: none; }
}

/* swaps whose children fill the row */
.pr-queue > .swap, .fix-state, .mode-pv { justify-items: stretch; }
.pr-queue > .swap { align-items: stretch; }
.fix-state { align-items: center; }
@media (max-width: 480px) { .hero2 .pill { font-size: 12.5px; padding: 5px 12px 5px 6px; text-align: left; } }