/* One Ticket: concept prototype for the top of repliai.co.
   Every class is namespaced ot-. The static rules below ARE the finished page
   (no JS, reduced motion, ?still=1). html.ot-motion layers the animated hero on top. */

:root{
  --ot-ink:#1a1d26; --ot-body:#363b47; --ot-muted:#5f6475; --ot-faint:#8d92a0; --ot-line:#e6e8ee; --ot-soft:#eef0f4;
  /* ink rhythm + coral (Tom, 26 Oct): a real grey for tinted sections, near-black for the dark
     beats, coral for highlights; purple stays the colour of things you click */
  --ot-tint:#f1f2f5; --ot-night:#1a1d26;
  --ot-warm:#ff6a3d; --ot-warm-soft:#ffd6c7; --ot-warm-on-dark:#ff9b78; --ot-warm-text:#c2410c;
  --ot-v:#6d5ef0; --ot-v2:#8f7bff; --ot-v3:#a18aff; --ot-vtext:#5a45d8; --ot-vchip:#efeafe;
  --ot-g:#2f7d54; --ot-g2:#4fc18f; --ot-gbg:#e6f5ec; --ot-am:#9a5b13; --ot-ambg:#fdf3e1;
  --ot-shimmer:linear-gradient(90deg,#6d5ef0,#8f7bff,#a18aff,#8f7bff,#6d5ef0);
  --ot-card-shadow:0 30px 60px -30px rgba(26,29,38,.3),0 1px 2px rgba(26,29,38,.04);
  --r:1;
}
.ot-body{background:#fff;overflow-x:hidden}
.ot-body .sitenav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.ot-defs{position:absolute;width:0;height:0;overflow:hidden}
.ot-body img{max-width:none}
.ot-ph-only{display:none}

/* ---------- atoms ---------- */
.ot-stack{display:grid;align-items:center;justify-items:end}
.ot-stack>*{grid-area:1/1}
.ot-av{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--avb,var(--ot-vchip));color:var(--avc,var(--ot-vtext));font-size:12px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.ot-av img{position:absolute;right:-4px;bottom:-3px;width:16px;height:16px;object-fit:contain;background:#fff;border-radius:50%;padding:2.5px;box-shadow:0 0 0 1px var(--ot-line)}
.ot-av2{background:var(--ot-gbg);color:var(--ot-g)} .ot-av3{background:var(--ot-ambg);color:var(--ot-am)}
.ot-av4{background:#eaf2fb;color:#2d6aa8} .ot-av5{background:#fbeceb;color:#a23b3b}
.ot-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap}
.ot-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ot-pill-ok{color:var(--ot-g);background:var(--ot-gbg)}
.ot-pill-wait{color:var(--ot-am);background:var(--ot-ambg)}
.ot-chip-new,.ot-chip-wait,.ot-chip-ok,.ot-open{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.ot-chip-new,.ot-chip-ok{color:var(--ot-g);background:var(--ot-gbg)}
.ot-chip-wait{color:var(--ot-am);background:var(--ot-ambg)}
.ot-open{color:var(--ot-muted);background:#f3f4f7}
.ot-chip-wait svg{width:12px;height:12px;color:var(--ot-am)}
.ot-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ot-g2);box-shadow:0 0 0 3px rgba(79,193,143,.18);flex:none}
.ot-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);overflow:visible;pointer-events:none}
.ot-ring rect{fill:none;stroke:var(--ot-v);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.ot-toast{display:inline-flex;align-items:center;gap:9px;background:var(--ot-ink);color:#fff;border-radius:12px;padding:7px 14px 7px 7px;box-shadow:0 18px 36px -16px rgba(26,29,38,.55);font-size:13px;white-space:nowrap}
.ot-toast img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.ot-toast b{font-weight:600}
.ot-toast span{color:#b9bccb;font-size:12px}
.ot-link{color:#5a32e0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
/* a headline's second line: ink on a coral highlighter stroke (was purple gradient text) */
.ot-shim{color:var(--ot-ink);background-image:linear-gradient(180deg,transparent 58%,var(--ot-warm-soft) 58%,var(--ot-warm-soft) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ot-close-h .ot-shim{position:relative;display:inline-block;background:none;color:#fff;-webkit-text-fill-color:#fff;padding:0 .04em 10px 0}
.ot-close-h .ot-shim::after{bottom:2px;height:5px;background:var(--ot-warm)}
.ot-close.ot-pre .ot-close-h .ot-shim::after{transform:scaleX(0);transition:none}
.ot-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ot-ink)}
.ot-eyebrow:not(.ot-eyebrow-d)::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ot-warm);flex:none}
::selection{background:var(--ot-warm-soft);color:#1a1d26}


/* =====================================================================
   HERO: static base (desktop), the finished state: ticket a, handled
   ===================================================================== */
.ot-hero{position:relative;overflow:hidden;background:linear-gradient(#fff 0%,#fff 30%,#f9f8fe 100%)}
.ot-hero-in{position:relative;max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,clamp(460px,41.7vw,600px)) minmax(0,1fr);column-gap:40px;
  grid-template-areas:"copy stage" "cap srcs";padding:0 16px 40px clamp(28px,5.6vw,80px)}
.ot-copy{grid-area:copy;padding-top:76px;position:relative;z-index:3}
@media (min-width:900px) and (max-width:1439px){
  .ot-hero-in{grid-template-columns:minmax(0,clamp(380px,34vw,600px)) minmax(0,1fr);column-gap:28px}
}
/* the rolling question and "Handled." always fit the copy column, whatever its width */
@media (min-width:900px){
  .ot-copy{container-type:inline-size}
}
.ot-cat{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border:1px solid var(--ot-line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ot-ink)}
.ot-cat img{width:14px;height:14px}

/* the rolling lines (meta and question): static shows the first line only */
.ot-av-s{width:28px;height:28px;font-size:10.5px}
.ot-av-s img{width:13px;height:13px;padding:2px;right:-4px;bottom:-3px}
.ot-h1{margin-top:10px;color:var(--ot-ink);text-wrap:initial}
/* the one violet touch in the headline: a shimmer stroke that draws each time a reply is sent */
.ot-close-h .ot-shim::after{content:"";position:absolute;left:.05em;right:.12em;bottom:12px;height:6px;border-radius:6px;background:var(--ot-shimmer);background-size:200% 100%;transform-origin:0 50%;transform:scaleX(1);transition:transform calc(800ms / var(--r)) cubic-bezier(.65,0,.35,1) calc(150ms / var(--r))}
.ot-close-h .ot-shim::after{background:var(--ot-warm)}
/* the positioning headline (26 Oct, Tom's strategy doc) in place of the rolling questions */
.ot-h1-lede{margin-top:22px;font-size:clamp(38px,3.7vw,54px);line-height:1.04;font-weight:800;letter-spacing:-.035em;max-width:12.5em;text-wrap:balance}
@media (max-width:899px){.ot-h1-lede{margin-top:14px;font-size:clamp(34px,9vw,44px);line-height:1.06}}
.ot-pt-h>svg{width:13px;height:13px;color:var(--ot-v);flex:none}
/* the longer main button leaves no room beside it: the second action is a text link under it */
.ot-hero .ot-ctas .r-btn.ot-cta2{height:44px;padding:0 4px;border:0;background:none;box-shadow:none;color:var(--ot-vtext);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ot-hero .ot-ctas .r-btn.ot-cta2:hover{color:var(--ot-ink);background:none}
.ot-hero .ot-ctas{row-gap:6px}
.ot-sub{margin-top:18px;font-size:20px;line-height:1.55;color:var(--ot-body);max-width:540px}
.ot-ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.ot-ctas .r-btn{height:56px;padding:0 26px;font-size:17px;font-weight:700;border-radius:12px;justify-content:center}
.ot-ctas .r-btn.ghost{background:#fff;font-weight:600}
.ot-byline{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font-size:14px;line-height:1.5;color:var(--ot-muted);max-width:520px}
.ot-byline img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--ot-line);flex:none;margin-top:-1px}
.ot-byline b{color:var(--ot-ink);font-weight:600}
.ot-notifs,.ot-gt,.ot-pager.ot-pager-p{display:none}

/* the ticket pager: four small buttons, the active one fills as its ticket plays */
.ot-pager{display:flex;gap:6px}
.ot-pager[hidden]{display:none}
.ot-pager button{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--ot-line);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ot-muted);cursor:pointer;overflow:hidden;box-shadow:0 6px 16px -12px rgba(26,29,38,.3);transition:border-color .2s,color .2s}
.ot-pager button .ot-av{width:26px;height:26px;font-size:9.5px}
.ot-pager button .ot-av img{width:12px;height:12px;padding:1.5px;right:-3px;bottom:-2px}
.ot-pager button b{font-weight:600}
.ot-pager button:hover{color:var(--ot-ink);border-color:#d3d6de}
.ot-pager button.ot-on{color:var(--ot-ink);border-color:#cfc6fb}
.ot-pager button:focus-visible{outline:2px solid var(--ot-v);outline-offset:2px}
.ot-pbar{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;overflow:hidden}
.ot-pager .ot-pp{width:34px;padding:0;justify-content:center;color:var(--ot-muted)}
.ot-pp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ot-pp .ot-pp-play{display:none;fill:currentColor;stroke-width:1.4}
.ot-pp[aria-pressed="true"]{color:var(--ot-vtext);border-color:#cfc6fb}
.ot-pp[aria-pressed="true"] .ot-pp-pause{display:none}
.ot-pp[aria-pressed="true"] .ot-pp-play{display:inline}
.ot-pbar i{display:block;height:100%;border-radius:2px;background:var(--ot-v2);transform-origin:0 50%;transform:scaleX(0)}

/* the stage */
.ot-stage{grid-area:stage;position:relative;padding-top:76px}
.ot-pager-d{position:absolute;left:0;top:22px;z-index:6}
.ot-inboxchip{position:absolute;top:22px;right:8px;z-index:4;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;background:#fff;border:1px solid var(--ot-line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ot-body);box-shadow:0 6px 16px -10px rgba(26,29,38,.25)}
.ot-inboxchip b{font-size:15px;font-weight:700;color:var(--ot-ink);font-variant-numeric:tabular-nums;display:inline-block;min-width:3ch;text-align:right}
.ot-inboxchip span{color:var(--ot-muted);margin-left:-3px}
.ot-count.ot-tick{animation:ot-roll calc(180ms / var(--r)) ease-out}
@keyframes ot-roll{from{transform:translateY(45%);opacity:.2}to{transform:none;opacity:1}}

.ot-feed{position:absolute;left:0;right:0;top:0;height:min(100%,860px);display:flex;justify-content:center;gap:20px;overflow:hidden;opacity:.3;
  -webkit-mask-image:linear-gradient(transparent 0,transparent 72px,#000 150px,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0,transparent 72px,#000 150px,#000 78%,transparent 100%);pointer-events:none}
.ot-col{width:180px;flex:none}
.ot-col:nth-child(2) .ot-track{transform:translateY(-54px)}
.ot-col:nth-child(3) .ot-track{transform:translateY(-118px)}
.ot-fc{background:#fff;border:1px solid var(--ot-line);border-radius:12px;padding:11px 12px 12px;margin-bottom:14px;box-shadow:0 1px 2px rgba(26,29,38,.04)}
.ot-fc p{display:flex;align-items:center;gap:6px;font-size:12.5px}
.ot-fc p img{width:14px;height:14px;object-fit:contain}
.ot-fc b{color:var(--ot-ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-fc time{margin-left:auto;font-size:11px;color:var(--ot-faint);font-variant-numeric:tabular-nums}
.ot-fc>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ot-body);min-height:35px}
.ot-fc em{display:inline-block;margin-top:8px;font-style:normal;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 8px;color:var(--ot-muted);background:#f3f4f7}
.ot-fc em.ot-new,.ot-fc em.ot-rep{color:var(--ot-g);background:var(--ot-gbg)}

.ot-mcard{display:none}
.ot-plane{position:absolute;left:-6px;top:4px;width:260px;height:auto;z-index:5;pointer-events:none;transform:rotate(-4deg)}

.ot-twrap{position:relative;z-index:3;width:min(480px,100%);margin:0 auto}
.ot-ticket{position:relative;background:#fff;border:1px solid var(--ot-line);border-radius:16px;box-shadow:var(--ot-card-shadow);font-variant-numeric:tabular-nums}
.ot-th{display:flex;align-items:flex-start;gap:12px;padding:14px 18px 12px;border-bottom:1px solid var(--ot-soft)}
.ot-who{min-width:0;flex:1}
.ot-who>b{display:block;font-size:15px;font-weight:700;color:var(--ot-ink);line-height:1.25}
.ot-who>span:not(.ot-lands){font-size:12.5px;color:var(--ot-muted)}
.ot-vip{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ot-vtext);background:var(--ot-vchip);border-radius:4px;padding:1px 5px}
.ot-pillbox{margin-top:2px}
.ot-pillbox .ot-pill-wait{visibility:hidden;opacity:0}
/* where the automations land: the tag and the rep's face, in the ticket header */
.ot-lands{display:flex;align-items:center;gap:10px;margin-top:7px;min-height:22px}
.ot-tag{display:inline-flex;align-items:center;gap:5px;flex:none;font-style:normal;font-size:11.5px;font-weight:600;line-height:1.45;border-radius:999px;padding:1px 9px 1px 7px;white-space:nowrap}
.ot-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.ot-tag-b{color:#2b5a99;background:#e8f1fb}
.ot-tag-t{color:#1d7466;background:#e2f4f1}
.ot-tag-a{color:#95560f;background:#fcf1dd}
.ot-tag-r{color:#a02f2f;background:#fcecec}
.ot-asg{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;font-weight:600;color:var(--ot-ink);white-space:nowrap}
.ot-asg img{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--ot-line)}
.ot-msg{padding:13px 18px 2px}
.ot-msg-h{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ot-muted);margin-bottom:4px}
.ot-msg-h b{color:var(--ot-ink);font-weight:700}
.ot-msg-h img{width:13px;height:13px;object-fit:contain;margin-left:4px}
.ot-msg>p:last-child{font-size:14.5px;line-height:1.62;color:var(--ot-body)}

/* THE AUTOMATION TRACE: what ran on arrival, before anyone read the message */
.ot-auto{position:relative;margin:10px 12px 0;border:1px solid var(--ot-line);border-radius:12px;background:#fbfbfd;padding:9px 12px 7px}
.ot-auto-h{display:flex;align-items:center;gap:7px;margin-bottom:2px;font-size:11.5px;color:var(--ot-muted);white-space:nowrap}
.ot-auto-h svg{width:13px;height:13px;color:var(--ot-v);flex:none}
.ot-auto-h b{font-size:12.5px;font-weight:700;color:var(--ot-ink)}
.ot-auto-h span{margin-left:auto;font-variant-numeric:tabular-nums}
.ot-auto ol{position:relative;list-style:none}
.ot-auto ol::before,.ot-auto ol::after{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:1.5px;border-radius:2px}
.ot-auto ol.ot-lastrule::before,.ot-auto ol.ot-lastrule::after{bottom:41px}
.ot-auto ol::before{background:#e6e3f3}
.ot-auto ol::after{background:var(--ot-v2);transform-origin:50% 0;transform:scaleY(max(0,calc((var(--a,var(--n,4)) - 1) / (var(--n,4) - 1))))}
.ot-auto li{position:relative;display:flex;align-items:center;gap:8px;height:28px;font-size:13px;color:var(--ot-body);white-space:nowrap}
.ot-auto li.ot-rule2{flex-wrap:wrap;height:auto;padding:3px 0 5px;row-gap:3px}
.ot-then{flex:1 0 100%;display:flex;align-items:center;gap:8px;padding-left:29px}
/* a row flashes green as its tick lands (a highlighter over the row, opacity only) */
.ot-auto li::after{content:"";position:absolute;top:1px;bottom:1px;left:-7px;right:-7px;border-radius:7px;background:#e3f4e9;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.ot-auto li.ot-fl::after{animation:ot-fl calc(760ms / var(--r)) ease-out 1}
@keyframes ot-fl{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.ot-ai{position:relative;z-index:1;flex:none;width:21px;height:21px;border-radius:50%;background:#fff;border:1px solid var(--ot-line);display:grid;place-items:center}
.ot-ai img{width:12px;height:12px;object-fit:contain}
.ot-ai svg{width:12px;height:12px;color:var(--ot-v)}
.ot-al{flex:none;width:52px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9aa0ad}
.ot-at{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ot-at b{color:var(--ot-ink);font-weight:700}
.ot-at q{color:var(--ot-ink)}
.ot-arr{flex:none;width:13px;height:13px;color:var(--ot-faint)}
.ot-atk{flex:none;width:13px;height:13px;margin-left:auto;color:var(--ot-g)}
.ot-auto .ot-asg img{width:20px;height:20px}

.ot-reply{margin:10px 12px 12px;border:1px solid var(--ot-line);border-radius:12px;padding:12px 14px 12px;transition:border-color calc(300ms / var(--r)),opacity calc(300ms / var(--r))}
.ot-rh{justify-items:start;height:26px}
.ot-rh p{display:flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap}
.ot-rh svg{width:12px;height:12px;color:var(--ot-v);flex:none}
.ot-rh-read,.ot-rh-draft{font-weight:700;color:var(--ot-vtext);letter-spacing:.01em}
.ot-rh-read,.ot-rh-draft{visibility:hidden;opacity:0}
.ot-rh-sent img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.ot-rh-sent b{font-size:13.5px;color:var(--ot-ink)}
.ot-rh-sent span{font-size:12px;color:var(--ot-muted)}
.ot-dots{display:inline-flex;gap:3px;margin-left:2px}
.ot-dots i{width:4px;height:4px;border-radius:50%;background:var(--ot-v2);opacity:.35}
.ot-rt{margin-top:6px;font-size:14.5px;line-height:1.74;color:var(--ot-body)}
.ot-rt .ot-c{transition:none}
.ot-ph,.ot-hl{background:linear-gradient(var(--ot-v2),var(--ot-v2)) 0 100%/100% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:1px}
.ot-n{position:relative;display:inline}
.ot-n::after{content:attr(data-n);position:absolute;left:-6px;top:-.62em;width:13px;height:13px;border-radius:50%;background:var(--ot-v);color:#fff;font-size:8.5px;font-weight:800;line-height:13px;text-align:center;font-style:normal;box-shadow:0 0 0 2px #fff}
.ot-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ot-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ot-line);border-radius:999px;padding:3px 10px 3px 8px;font-size:11.5px;font-weight:600;color:var(--ot-body);background:#fff}
.ot-chip img{width:12px;height:12px}
.ot-chip svg{width:12px;height:12px;color:var(--ot-v)}
.ot-rf{justify-items:start;margin-top:12px;min-height:30px}
.ot-rf p{display:flex;align-items:center;gap:8px}
.ot-rf-draft{visibility:hidden;opacity:0}
.ot-use{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:8px;background:linear-gradient(135deg,#6d5ef0 0%,#8f7bff 55%,#a18aff 100%);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 6px 12px -6px rgba(90,50,224,.6);transition:transform calc(120ms / var(--r))}
.ot-edit{display:inline-flex;align-items:center;height:30px;padding:0 11px;border:1px solid var(--ot-line);border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ot-body)}
.ot-rf small{font-size:11.5px;color:var(--ot-faint);margin-left:4px}
.ot-rf-sent{font-size:12.5px;color:var(--ot-muted)}
.ot-rf-sent svg{width:14px;height:14px;color:var(--ot-g);flex:none}
.ot-twrap>.ot-toast{position:relative;z-index:2;margin:-20px 0 0 -16px}
.ot-under{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:10px;padding:0 4px}
.ot-demo{font-size:12px;font-weight:600;color:var(--ot-muted);background:rgba(255,255,255,.92);border-radius:999px;padding:2px 9px}

/* the captions and the annotated sources, static: a row under the hero */
.ot-cap{grid-area:cap;align-self:start;margin-top:64px;max-width:420px}
.ot-cap>p+p{margin-top:26px}
.ot-cap b{display:block;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ot-ink)}
.ot-cap span{display:block;margin-top:10px;font-size:16px;line-height:1.55;color:var(--ot-body)}
.ot-srcs{grid-area:srcs;margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;max-width:664px;position:relative}
.ot-src{background:#fff;border:1px solid var(--ot-line);border-radius:14px;padding:12px 14px 13px;box-shadow:0 14px 30px -20px rgba(26,29,38,.28)}
.ot-sh{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ot-muted);margin-bottom:8px}
.ot-sh img{width:14px;height:14px;object-fit:contain}
.ot-sh svg{width:14px;height:14px;color:var(--ot-v)}
.ot-line{position:relative;display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ot-body);padding:3px 0}
.ot-line-q{color:var(--ot-muted)}
.ot-line-q::before{content:"";width:15px;flex:none}
.ot-num{flex:none;width:15px;height:15px;margin-top:2px;border-radius:50%;background:var(--ot-v);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center}
.ot-prod{display:flex;align-items:center;gap:10px;padding:2px 0 8px}
.ot-prod img{width:40px;height:40px;border-radius:9px;background:#f6f5f2;object-fit:contain;flex:none}
.ot-prod p{min-width:0;flex:1;line-height:1.3}
.ot-prod b{display:block;font-size:13.5px;color:var(--ot-ink)}
.ot-prod span{font-size:12px;color:var(--ot-muted)}
.ot-ship{font-style:normal;font-size:11px;font-weight:600;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:2px 9px;flex:none}
.ot-ship-a{color:var(--ot-am);background:var(--ot-ambg)}
.ot-threads,.ot-pgut{display:none}

/* =====================================================================
   HERO: the animated loop, desktop (html.ot-motion, 900px and up)
   ===================================================================== */
@media (min-width:900px){
  .ot-motion .ot-hero-in{height:clamp(820px,calc(100svh - 74px),960px);padding-bottom:0;grid-template-rows:100%;grid-template-areas:"copy stage"}
  .ot-motion .ot-stage,.ot-motion .ot-cap,.ot-motion .ot-srcs{grid-area:stage}
  .ot-motion .ot-stage{padding:0;margin:20px 0}
  .ot-motion .ot-feed{height:100%;opacity:1;transition:opacity calc(400ms / var(--r))}
  .ot-motion .ot-s-frz .ot-feed{opacity:.4}
  .ot-motion .ot-s-tr .ot-feed{opacity:.3}
  .ot-motion .ot-s-exp .ot-feed{opacity:.2}
  .ot-motion .ot-s-rest .ot-feed{opacity:.26}
  .ot-motion .ot-s-close .ot-feed{transition:opacity calc(300ms / var(--r)) calc(200ms / var(--r))}
  .ot-motion .ot-inboxchip{transition:opacity calc(300ms / var(--r))}
  .ot-motion .ot-s-exp .ot-inboxchip{opacity:0}
  .ot-motion .ot-track{will-change:transform}
  .ot-motion .ot-col .ot-track{transform:none}

  /* the ticket's card: drops into the pile, lifts out, opens, and sinks back after */
  .ot-motion .ot-mcard{display:block;position:absolute;z-index:3;left:var(--mx,120px);top:var(--my,300px);width:400px;min-height:178px;background:#fff;border:1px solid var(--ot-line);border-radius:16px;padding:14px 16px;
    box-shadow:0 12px 32px -18px rgba(26,29,38,.28);transform-origin:50% 50%;opacity:0;transform:translate3d(0,-72px,0) scale(.97);
    transition:transform calc(560ms / var(--r)) cubic-bezier(.2,.8,.2,1),box-shadow calc(500ms / var(--r)),opacity calc(170ms / var(--r))}
  .ot-motion .ot-s-in .ot-mcard{opacity:1;transform:none}
  .ot-motion .ot-s-frz .ot-mcard{transform:scale(1.04);box-shadow:0 30px 60px -24px rgba(26,29,38,.35)}
  .ot-motion .ot-s-open .ot-mcard{opacity:0;transform:scale(1.12);pointer-events:none}
  .ot-motion .ot-s-close .ot-mcard{opacity:0;transform:translate3d(0,60px,0) scale(.97)}
  .ot-mc-h{display:flex;align-items:center;gap:10px}
  .ot-mc-h p{flex:1;min-width:0;line-height:1.25}
  .ot-mc-h b{display:block;font-size:15px;color:var(--ot-ink)}
  .ot-mc-h p span{font-size:12.5px;color:var(--ot-muted)}
  .ot-mc-st .ot-chip-wait{opacity:0;transform:scale(.9);transition:opacity calc(200ms / var(--r)),transform calc(260ms / var(--r))}
  .ot-mc-st .ot-chip-new{transition:opacity calc(200ms / var(--r))}
  .ot-s-frz .ot-mc-st .ot-chip-new{opacity:0}
  .ot-s-frz .ot-mc-st .ot-chip-wait{opacity:1;transform:none;transition-delay:calc(300ms / var(--r))}
  .ot-s-frz .ot-mc-st .ot-hand{animation:ot-hand calc(700ms / var(--r)) calc(300ms / var(--r)) ease-in-out 1;transform-origin:6px 6px}
  @keyframes ot-hand{to{transform:rotate(360deg)}}
  .ot-mc-b{margin-top:9px;font-size:14px;line-height:1.5;color:var(--ot-body)}
  .ot-mc-f{display:flex;align-items:center;gap:6px;margin-top:10px}
  .ot-mc-f span{font-size:11px;font-weight:600;color:var(--ot-muted);background:#f3f4f7;border-radius:6px;padding:2px 7px}
  .ot-mc-f .ot-vipc{color:var(--ot-vtext);background:var(--ot-vchip)}
  .ot-mc-f small{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;color:var(--ot-muted)}
  .ot-mc-f small img{width:12px;height:12px}
  .ot-motion .ot-mcard .ot-ring rect{stroke-dashoffset:1;transition:stroke-dashoffset calc(560ms / var(--r)) cubic-bezier(.65,0,.35,1)}
  .ot-motion .ot-s-frz .ot-mcard .ot-ring rect{stroke-dashoffset:0}

  /* the ticket: rest (centred), closed (folded into its card), exploded (left, smaller) */
  .ot-motion .ot-twrap{position:absolute;left:0;top:64px;width:var(--tw,480px);margin:0;transform-origin:0 0;perspective:1400px;
    transform:translate3d(var(--rx,92px),0,0) scale(var(--rs,1));
    transition:transform calc(620ms / var(--r)) cubic-bezier(.22,.8,.22,1),opacity calc(240ms / var(--r))}
  .ot-motion .ot-hero:not(.ot-s-open) .ot-twrap{transform:translate3d(var(--cx,152px),var(--cy,236px),0) scale(var(--cs,.83));opacity:0}
  .ot-motion .ot-s-close .ot-twrap{transition:transform calc(520ms / var(--r)) cubic-bezier(.5,0,.3,1),opacity calc(180ms / var(--r))}
  .ot-motion .ot-s-close .ot-twrap>.ot-toast{opacity:0;transform:translateY(8px);transition:opacity calc(140ms / var(--r)),transform calc(200ms / var(--r))}
  /* the automations run with the ticket nearly full size, to the left, its reply not there yet */
  .ot-motion .ot-s-tr .ot-twrap{transform:translate3d(var(--kx,-24px),0,0) scale(var(--ts,.96))}
  .ot-motion .ot-s-exp .ot-twrap{transform:translate3d(var(--kx,-24px),0,0) scale(var(--ks,.84))}
  .ot-motion .ot-ticket{transition:clip-path calc(620ms / var(--r)) cubic-bezier(.22,.8,.22,1);clip-path:inset(-40px -40px -60px -40px round 16px)}
  .ot-motion .ot-hero:not(.ot-s-open) .ot-ticket{clip-path:inset(0 0 calc(100% - var(--clip,231px)) 0 round 20px)}
  .ot-motion .ot-s-tr .ot-ticket{clip-path:inset(-40px 0 calc(var(--ah,600px) - var(--clipA,400px)) 0 round 16px)}
  /* while it is cut short, the card still gets its own rounded bottom edge */
  .ot-motion .ot-ticket::after{content:"";position:absolute;left:-1px;right:-1px;top:calc(var(--clipA,400px) - 17px);height:16px;border:1px solid var(--ot-line);border-top:0;border-radius:0 0 16px 16px;opacity:0;pointer-events:none;transition:opacity calc(160ms / var(--r))}
  .ot-motion .ot-s-tr .ot-ticket::after{opacity:1;transition-duration:0s}
  .ot-motion .ot-s-exp .ot-ticket{animation:ot-tilt calc(520ms / var(--r)) cubic-bezier(.4,0,.2,1) 1}
  @keyframes ot-tilt{0%{transform:none}45%{transform:rotateY(-12deg)}100%{transform:none}}

  /* sources: the Shopify card flies out as the automations find the order; the
     knowledge base and the AI profile follow when Copilot starts reading */
  .ot-motion .ot-srcs{display:block;margin:20px 0;max-width:none;pointer-events:none;z-index:4}
  .ot-motion .ot-src{position:absolute;right:0;top:var(--y,40px);width:var(--sw,224px);opacity:0;transform:translate3d(var(--fx,-240px),var(--fy,200px),0) scale(.86);
    transition:transform calc(560ms / var(--r)) cubic-bezier(.22,.8,.22,1),opacity calc(300ms / var(--r))}
  /* the Shopify record flies out of the trace row that found it */
  .ot-motion .ot-hero:not(.ot-s-rest) .ot-src-a{transform:translate3d(var(--ax,0px),var(--ay,0px),0) scale(.55)}
  .ot-motion .ot-hero.ot-s-shop .ot-src-a,.ot-motion .ot-s-read .ot-src-b,.ot-motion .ot-s-read .ot-src-c{opacity:1;transform:none}
  .ot-motion .ot-s-read .ot-src-c{transition-delay:calc(110ms / var(--r))}
  /* folding back into the chips: they dissolve fast so they never sit over the reply */
  .ot-motion .ot-s-rest .ot-src{transition:transform calc(520ms / var(--r)) cubic-bezier(.5,0,.3,1),opacity calc(200ms / var(--r)) calc(60ms / var(--r))}
  .ot-motion .ot-src-d{display:none}
  .ot-motion .ot-src-a .ot-ship{display:none}
  .ot-motion .ot-src .ot-prod b{white-space:nowrap}
  .ot-motion .ot-src .ot-num{opacity:0;transform:scale(.4);transition:opacity calc(200ms / var(--r)),transform calc(260ms / var(--r)) cubic-bezier(.3,1.6,.5,1)}
  .ot-motion .ot-src .ot-line{background:linear-gradient(var(--ot-v2),var(--ot-v2)) 23px calc(100% - 1px)/0 2px no-repeat;transition:background-size calc(300ms / var(--r))}
  .ot-motion .ot-src .ot-line.ot-on{background-size:calc(100% - 23px) 2px}
  .ot-motion .ot-src .ot-line.ot-on .ot-num{opacity:1;transform:none}
  .ot-motion .ot-threads{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
  .ot-threads .ot-lead{fill:none;stroke:var(--ot-v2);stroke-width:1.4;stroke-dasharray:.5 3.5;stroke-linecap:round}
  .ot-threads .ot-th1{fill:none;stroke:var(--ot-v2);stroke-width:1.25;stroke-linecap:round}
  .ot-threads circle{fill:var(--ot-v)}
  .ot-threads circle.ot-sd{fill:#fff;stroke:var(--ot-v);stroke-width:1.5}
  /* the automation thread is Shopify data, so it runs green */
  .ot-threads .ot-trth .ot-th1{stroke:var(--ot-g2);stroke-width:1.5}
  .ot-threads .ot-trth circle{fill:var(--ot-g2)}
  .ot-threads .ot-trth circle.ot-sd{fill:#fff;stroke:var(--ot-g2)}

  /* captions over the dimmed pile: first the automations, then Copilot */
  .ot-motion .ot-cap{display:grid;align-self:end;margin:0 0 18px -24px;padding:12px 28px 10px 24px;max-width:580px;border-radius:16px;background:radial-gradient(120% 140% at 30% 50%,rgba(255,255,255,.97) 55%,rgba(255,255,255,0) 100%);opacity:0;transform:translateY(10px);z-index:4;
    transition:opacity calc(400ms / var(--r)),transform calc(400ms / var(--r))}
  .ot-motion .ot-s-cap .ot-cap{opacity:1;transform:none;transition-delay:calc(200ms / var(--r))}
  .ot-motion .ot-nocap .ot-cap{display:none}
  .ot-motion .ot-cap>p{grid-area:1/1;margin:0;transition:opacity calc(320ms / var(--r)),transform calc(420ms / var(--r)) cubic-bezier(.2,.8,.2,1)}
  .ot-motion .ot-hero:not(.ot-s-read):not(.ot-s-rest) .ot-cap-b{opacity:0;transform:translate3d(0,10px,0)}
  .ot-motion .ot-s-read .ot-cap-a,.ot-motion .ot-s-rest .ot-cap-a{opacity:0;transform:translate3d(0,-10px,0);transition:opacity calc(160ms / var(--r)),transform calc(200ms / var(--r))}
  .ot-motion .ot-s-read .ot-cap-b{transition:opacity calc(320ms / var(--r)) calc(180ms / var(--r)),transform calc(420ms / var(--r)) cubic-bezier(.2,.8,.2,1) calc(180ms / var(--r))}
  .ot-motion .ot-cap b{font-size:22px}
  .ot-motion .ot-cap span{font-size:15px;margin-top:6px}
  .ot-motion .ot-cap>p::before{content:"";display:block;width:28px;height:2px;border-radius:2px;background:var(--ot-v2);margin-bottom:10px}
  .ot-motion .ot-cap-a b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ot-g2);box-shadow:0 0 0 3px rgba(79,193,143,.2);margin:0 10px 3px 1px;vertical-align:middle}

  /* the plane and the toast */
  .ot-motion .ot-plane{left:0;top:0;width:300px;opacity:0;z-index:2;transform:translate3d(-400px,90px,0)}
  .ot-motion .ot-twrap>.ot-toast{position:absolute;left:-18px;top:calc(var(--ah,470px) - 22px);margin:0;transition:opacity calc(300ms / var(--r)),transform calc(360ms / var(--r)) cubic-bezier(.3,1.4,.5,1)}
  .ot-motion .ot-under{opacity:1;transition:opacity calc(300ms / var(--r))}
  .ot-motion .ot-s-tr .ot-under{opacity:0;transition-duration:0s}
}
@media (min-width:900px) and (max-width:1299px){
  .ot-pager button{padding-right:4px;gap:0}
  .ot-pager button b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ot-pbar{left:8px;right:8px}
}
@media (min-width:900px) and (max-width:1180px){
  .ot-inboxchip{display:none}
}

/* ticket micro states (shared by desktop and phone) */
.ot-ticket.ot-k-wait .ot-pill-ok{visibility:hidden;opacity:0}
.ot-ticket.ot-k-wait .ot-pill-wait{visibility:visible;opacity:1}
.ot-ticket.ot-k-read .ot-rh-read,.ot-ticket.ot-k-draft .ot-rh-draft{visibility:visible;opacity:1}
.ot-ticket.ot-k-read .ot-rh-sent,.ot-ticket.ot-k-draft .ot-rh-sent{visibility:hidden;opacity:0}
.ot-ticket.ot-k-read:not(.ot-k-pre) .ot-dots i{animation:ot-dot 1s ease-in-out infinite}
.ot-ticket.ot-k-read .ot-dots i:nth-child(2){animation-delay:.15s}
.ot-ticket.ot-k-read .ot-dots i:nth-child(3){animation-delay:.3s}
@keyframes ot-dot{0%,100%{opacity:.25}40%{opacity:1}}
.ot-ticket.ot-k-read .ot-reply,.ot-ticket.ot-k-draft .ot-reply{border-color:#d9d5ea;border-style:dashed}
.ot-ticket.ot-k-pre .ot-reply{opacity:.4}
.ot-ticket.ot-k-nochips .ot-chips{visibility:hidden;opacity:0}
.ot-ticket.ot-k-dfoot .ot-rf-draft{visibility:visible;opacity:1}
.ot-ticket.ot-k-dfoot .ot-rf-sent{visibility:hidden;opacity:0}
.ot-ticket.ot-k-press .ot-use{transform:scale(.94)}
.ot-ticket.ot-k-wait~.ot-toast{opacity:0;transform:translateY(10px) scale(.96)}
.ot-motion .ot-chips,.ot-motion .ot-rh>*,.ot-motion .ot-rf>*,.ot-motion .ot-pill{transition:opacity calc(260ms / var(--r)),visibility 0s}

/* the automation trace, as it runs: data-a on the ticket counts the steps done */
.ot-motion .ot-auto li{transition:opacity calc(260ms / var(--r)),transform calc(380ms / var(--r)) cubic-bezier(.2,.8,.2,1)}
.ot-motion .ot-auto .ot-atk{transition:transform calc(340ms / var(--r)) cubic-bezier(.3,1.7,.5,1) calc(140ms / var(--r)),opacity calc(160ms / var(--r)) calc(140ms / var(--r))}
.ot-motion .ot-auto ol::after{transition:transform calc(420ms / var(--r)) cubic-bezier(.4,0,.2,1)}
.ot-ticket[data-a="0"] .ot-auto li,.ot-ticket[data-a="1"] .ot-auto li:nth-child(n+2),.ot-ticket[data-a="2"] .ot-auto li:nth-child(n+3),.ot-ticket[data-a="3"] .ot-auto li:nth-child(n+4),
.ot-ptrace[data-a="0"] li,.ot-ptrace[data-a="1"] li:nth-child(n+2),.ot-ptrace[data-a="2"] li:nth-child(n+3),.ot-ptrace[data-a="3"] li:nth-child(n+4){opacity:.2;transform:translate3d(-6px,0,0)}
.ot-ticket[data-a="0"] .ot-auto li .ot-atk,.ot-ticket[data-a="1"] .ot-auto li:nth-child(n+2) .ot-atk,.ot-ticket[data-a="2"] .ot-auto li:nth-child(n+3) .ot-atk,.ot-ticket[data-a="3"] .ot-auto li:nth-child(n+4) .ot-atk,
.ot-ptrace[data-a="0"] li .ot-atk,.ot-ptrace[data-a="1"] li:nth-child(n+2) .ot-atk,.ot-ptrace[data-a="2"] li:nth-child(n+3) .ot-atk,.ot-ptrace[data-a="3"] li:nth-child(n+4) .ot-atk{opacity:0;transform:scale(.3)}
/* ... and the tag and the face fly up from their rows into the header */
.ot-motion .ot-lands>*{transition:transform calc(620ms / var(--r)) cubic-bezier(.34,1.3,.5,1) calc(220ms / var(--r)),opacity calc(140ms / var(--r)) calc(220ms / var(--r))}
.ot-ticket[data-tg="0"] .ot-lands .ot-tag,.ot-ticket[data-as="0"] .ot-lands .ot-asg{opacity:0;transform:translate3d(var(--lx,0px),var(--ly,60px),0)}

/* typing: untyped characters keep their space, so nothing reflows */
.ot-typing .ot-c{opacity:0}
.ot-typing .ot-c.ot-on{opacity:1}
.ot-typing .ot-c.ot-cur{position:relative}
.ot-typing .ot-c.ot-cur::after{content:"";position:absolute;right:-2px;top:.15em;bottom:.1em;width:2px;border-radius:1px;background:var(--ot-v2)}
/* annotation in the animated build: only phrases already drafted carry a mark */
.ot-motion .ot-ph,.ot-motion .ot-hl{background-size:0 2px;transition:background-size calc(260ms / var(--r))}
.ot-motion .ot-n::after{opacity:0;transform:scale(.3);transition:opacity calc(160ms / var(--r)),transform calc(260ms / var(--r)) cubic-bezier(.3,1.6,.5,1)}
.ot-motion .ot-ph.ot-lit,.ot-motion .ot-hl.ot-lit{background-size:100% 2px}
.ot-motion .ot-n.ot-lit::after{opacity:1;transform:none}

/* the rolling question and meta line: a crisp vertical roll, fixed height */

/* =====================================================================
   SECTION 2: WHY IT WAITS
   ===================================================================== */
.ot-why{background:#f9f8fe;padding:112px 0 120px;overflow:hidden}
.ot-why-a{max-width:1440px;margin:0 auto;padding:0 80px;display:grid;grid-template-columns:480px 60px minmax(0,700px);align-items:start}
.ot-photo{position:relative;width:480px;height:640px;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,29,38,.38);background:#ece9e3}
.ot-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.2);transform-origin:50% 66%}
.ot-photo-chip{position:absolute;left:20px;top:20px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.94);font-size:12.5px;font-weight:600;color:var(--ot-ink);box-shadow:0 8px 20px -12px rgba(26,29,38,.4)}
.ot-photo-chip i{width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--ot-v)}
.ot-glass{position:absolute;left:20px;right:20px;bottom:20px;padding:14px 16px 15px;border-radius:14px;background:rgba(26,29,38,.8);color:#fff}
.ot-glass b{display:block;font-size:17px;font-weight:700}
.ot-gchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ot-gchips em{font-style:normal;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.ot-spine{position:relative;height:640px}
.ot-spine i{position:absolute;left:29px;top:36px;bottom:36px;width:2px;border-radius:2px;background:linear-gradient(#dcd8ec,var(--ot-v) 18%,var(--ot-v) 82%,#dcd8ec)}
.ot-spine i::before,.ot-spine i::after{content:"";position:absolute;left:-5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ot-v)}
.ot-spine i::before{top:18%}
.ot-spine i::after{top:62%}
.ot-why-t{padding-top:18px}
.ot-h2{font-size:clamp(44px,4.2vw,60px);line-height:1.02;font-weight:800;letter-spacing:-.03em;color:var(--ot-ink);margin-top:20px;text-wrap:balance}
.ot-h2 .ot-shim{padding-right:.04em}
.ot-quote{margin-top:10px}
.ot-quote p{margin-top:20px;font-size:20px;line-height:1.6;color:var(--ot-body);max-width:640px}
.ot-sig{display:flex;align-items:center;gap:12px;margin-top:28px}
.ot-sig img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.ot-sig b{font-size:15px;color:var(--ot-ink)}
.ot-sig span{font-size:14px;color:var(--ot-muted)}
.ot-bio{margin-top:32px;padding-top:28px;border-top:1px solid var(--ot-line);font-size:17px;line-height:1.65;color:var(--ot-body);max-width:600px}
.ot-readout{display:none}

.ot-why-b{max-width:1440px;margin:120px auto 0;padding:0 60px}
.ot-dlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ot-dl{fill:none;stroke:var(--ot-v);stroke-width:1.5;stroke-dasharray:3 0;stroke-linecap:round;transition:stroke calc(500ms / var(--r)),stroke-dasharray calc(700ms / var(--r)) cubic-bezier(.4,0,.2,1)}
.ot-dl:nth-child(2){transition-delay:120ms}
.ot-dl:nth-child(3){transition-delay:240ms}
.ot-dp{fill:none;stroke:var(--ot-v3);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.08 1.2;stroke-dashoffset:.08;opacity:0}
.ot-pre .ot-dl{stroke:#c9c5da;stroke-dasharray:3 4}
.ot-in .ot-dp{animation:ot-pulse 1s calc(700ms + var(--d,0ms)) ease-in-out 1}
.ot-in .ot-dp:nth-child(5){--d:120ms}
.ot-in .ot-dp:nth-child(6){--d:240ms}
@keyframes ot-pulse{0%{opacity:1;stroke-dashoffset:.08}90%{opacity:1}100%{opacity:0;stroke-dashoffset:-1.1}}
.ot-dlab{position:absolute;font-size:11px;font-weight:600;color:var(--ot-faint);background:#f9f8fe;padding:1px 6px;border-radius:6px;white-space:nowrap}
.ot-frag{position:absolute;width:300px;background:#fff;border:1px solid var(--ot-line);border-radius:12px;overflow:hidden;box-shadow:0 10px 24px -18px rgba(26,29,38,.3)}
.ot-frag-1{left:0;top:164px}
.ot-frag-2{left:880px;top:22px;width:280px}
.ot-frag-3{left:880px;top:304px;width:280px}
.ot-fh{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;background:#f4f5f8;border-bottom:1px solid var(--ot-soft);font-size:12px;font-weight:700;color:var(--ot-muted)}
.ot-fh img{width:14px;height:14px}
.ot-fh svg{width:14px;height:14px;color:var(--ot-muted)}
.ot-fb{display:flex;align-items:center;gap:10px;padding:11px 12px 12px;font-size:13px;line-height:1.45;color:var(--ot-body);min-height:58px}
.ot-fb img{width:30px;height:30px;border-radius:7px;background:#f6f5f2;object-fit:contain;flex:none}
.ot-fb img.ot-face{width:26px;height:26px;border-radius:50%;object-fit:cover}
.ot-fb b{color:var(--ot-ink)}
.ot-bticket{position:absolute;left:420px;top:92px;width:360px;background:#fff;border:1px solid var(--ot-line);border-radius:16px;padding:14px 16px 12px;box-shadow:var(--ot-card-shadow)}
.ot-bt-h{display:flex;align-items:center;gap:10px}
.ot-bt-h p{flex:1;min-width:0;line-height:1.25}
.ot-bt-h b{display:block;font-size:14.5px;color:var(--ot-ink)}
.ot-bt-h p span{font-size:12px;color:var(--ot-muted)}
.ot-bt-m{margin-top:10px;padding-top:9px;border-top:1px solid var(--ot-soft);font-size:13px;line-height:1.5;color:var(--ot-body)}
.ot-bt-m span{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ot-muted);margin-bottom:2px}
.ot-bt-m span img{width:12px;height:12px;object-fit:contain}
.ot-dcap{margin-top:36px;text-align:center;font-size:22px;line-height:1.4;font-weight:700;color:var(--ot-ink)}
.ot-dcap b,.ot-dcap span{display:block;font-weight:700}
.ot-dcap em{font-style:normal;color:var(--ot-vtext)}
.ot-dcap small{display:block;margin-top:10px;font-size:12px;font-weight:600;color:var(--ot-muted)}
@media (min-width:900px) and (max-width:1240px){
    .ot-why-a{grid-template-columns:400px 48px minmax(0,1fr);padding:0 40px}
  .ot-photo{width:400px;height:560px}
  .ot-spine{height:560px}
  .ot-spine i{left:23px}
}

/* =====================================================================
   SECTION 3: HOW IT WORKS (charcoal inset panel)
   ===================================================================== */
.ot-how{background:#fff;padding:0 0 16px}
.ot-panel{position:relative;margin:0 16px;border-radius:40px;background:#1a1d26;color:#b9bccb;padding:120px 0 140px;overflow:clip}
.ot-stars{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 30px 40px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 190px 120px,#fff 50%,transparent 60%),radial-gradient(1.4px 1.4px at 330px 60px,#d9d2ff 50%,transparent 60%),radial-gradient(1px 1px at 90px 230px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 270px 300px,#fff 50%,transparent 60%),radial-gradient(1.2px 1.2px at 400px 210px,#fff 50%,transparent 60%);
  background-size:460px 340px}
.ot-stars::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.6px 1.6px at 120px 80px,#fff 50%,transparent 60%),radial-gradient(1.3px 1.3px at 520px 260px,#e6e0ff 50%,transparent 60%),radial-gradient(1.5px 1.5px at 700px 40px,#fff 50%,transparent 60%);background-size:820px 420px;opacity:.3}
.ot-how-h{position:relative;max-width:1280px;margin:0 auto;padding:0 64px}
.ot-eyebrow-d{color:#fff}
.ot-eyebrow-d i{width:9px;height:9px;border-radius:50%;background:var(--ot-warm)}
.ot-h2-d{position:relative;width:fit-content;color:#fff;font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.035em;margin-top:22px;padding-bottom:26px;text-wrap:initial}
.ot-h2-d::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:#3a3f50}
.ot-h2-d>span{position:relative;display:inline-block}
.ot-h2-d>span::after{content:"";position:absolute;left:calc(50% - 4px);bottom:-26px;width:8px;height:8px;border-radius:50%;background:var(--ot-warm);box-shadow:0 0 0 3px #1a1d26;transition:background .3s,transform .3s}
.ot-beads{display:none}
.ot-how-sub{margin-top:26px;font-size:20px;line-height:1.55;color:#b9bccb;max-width:620px}

.ot-opts{display:grid;gap:12px;margin-top:24px}

/* the product window */
.ot-win{position:relative;min-height:0;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);color:var(--ot-body);font-variant-numeric:tabular-nums}
.ot-wbar{flex:none;height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;background:#fafbfc;border-bottom:1px solid #edeef2}
.ot-wbar>i{width:10px;height:10px;border-radius:50%;background:var(--ot-line)}
.ot-wbar span{margin-left:8px;font-size:13px;font-weight:600;color:var(--ot-muted)}
.ot-livechip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:3px 10px}
.ot-livechip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ot-g2)}
.ot-figcap{margin-top:12px;font-size:12px;font-weight:500;color:var(--ot-muted)}

/* state 1: diagnose */

/* state 2: decide */
.ot-cmsg-ig{background:#fafbfc}
.ot-plan-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-muted)}
.ot-seg-th{position:absolute;left:3px;top:3px;width:calc(50% - 3px);height:28px;border-radius:7px;background:#fff;box-shadow:0 2px 6px -2px rgba(26,29,38,.25);transition:transform .3s cubic-bezier(.3,1.2,.5,1)}
.ot-planrows{list-style:none}
.ot-planrows li{padding:8px 2px;border-bottom:1px solid #edeef2;transition:opacity .35s calc(var(--i) * 60ms),transform .35s calc(var(--i) * 60ms)}
.ot-planrows b{display:block;font-size:12.5px;color:var(--ot-ink);font-weight:600}
.ot-own{display:grid;justify-items:start;margin-top:4px}
.ot-own>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;transition:opacity .25s}
.ot-own img{width:11px;height:11px}
.ot-own-us{color:var(--ot-vtext);background:var(--ot-vchip)}
.ot-own-you{color:var(--ot-g);background:var(--ot-gbg);opacity:0}
.ot-pre .ot-planrows li{opacity:0;transform:translateY(6px)}


/* state 4: run */
.ot-runsent{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ot-g)}
.ot-runsent svg{width:13px;height:13px}
.ot-runpill .ot-chip-wait{visibility:hidden;opacity:0}
.ot-herreply{align-self:flex-end;max-width:78%;background:#f6f7fa;border-radius:12px 12px 4px 12px;padding:8px 12px;font-size:13px;line-height:1.5;color:var(--ot-body);transition:opacity .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.ot-toast-w{position:absolute;left:16px;bottom:14px;transition:opacity .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}

/* the close */
.ot-close{position:relative;max-width:980px;margin:120px auto 0;padding:0 24px;text-align:center}
.ot-close-h{font-size:clamp(40px,3.9vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:#fff}
.ot-close>p{margin-top:18px;font-size:18px;line-height:1.55;color:#b9bccb}
.ot-cbwrap{position:relative;display:inline-block;margin-top:36px}
.ot-trace{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.ot-trace rect{fill:none;stroke:var(--ot-v3);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1)}
.ot-cbtn.r-btn{height:60px;padding:0 34px;font-size:18px;font-weight:700;border-radius:12px;background-repeat:no-repeat;background-size:100% 100%;transition:background-size 450ms 850ms cubic-bezier(.4,0,.2,1),transform 150ms,box-shadow 150ms}
.ot-plat{display:block;margin-top:22px;font-size:15px;font-weight:600;color:#c9c2ff;text-decoration:none}
.ot-plat:hover{text-decoration:underline}
.ot-close.ot-pre .ot-trace rect{stroke-dashoffset:1;transition:none}
.ot-close.ot-pre .ot-cbtn{background-size:0 100%;background-color:rgba(255,255,255,.07);box-shadow:none;transition:none}

.ot-end{background:#f9f8fe;padding:36px 16px 56px;text-align:center;font-size:14px;color:var(--ot-muted)}
.ot-end a{color:var(--ot-vtext);font-weight:600}

/* ---------- sticky stage (JS, desktop): one window, four states ---------- */

/* =====================================================================
   PHONE (under 900px): its own composition
   ===================================================================== */
@media (max-width:899px){
  .ot-dsk{display:none!important}
  .ot-ph-only{display:inline}
  .ot-hero{background:linear-gradient(#fff,#f9f8fe 70%,#fff)}
  .ot-hero-in{display:flex;flex-direction:column;max-width:560px;padding:0 16px 64px 32px}
  .ot-copy{padding-top:12px}
  .ot-cat{height:28px;font-size:12.5px;padding:0 11px}

  /* the notification stack: the ticket being handled on top, what the automations
     did right under it, the tickets already handled below */
  .ot-notifs{display:block;position:relative;height:284px;margin-top:26px}
  .ot-pplane{position:absolute;left:-40px;top:-42px;width:190px;z-index:0;transform:translate3d(176px,2px,0) rotate(-4deg)}
  .ot-pplane{opacity:0}
  .ot-bn{position:absolute;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:11px;padding:0 12px 0 13px;border-radius:18px;background:#fff;border:1px solid var(--ot-line);box-shadow:0 10px 24px -14px rgba(26,29,38,.3);
    transform-origin:50% 100%;transition:transform calc(420ms / var(--r)) cubic-bezier(.2,.9,.25,1.05),opacity calc(300ms / var(--r))}
  .ot-bn>img{width:22px;height:22px;object-fit:contain;flex:none}
  .ot-bn>div{flex:1;min-width:0;line-height:1.3}
  .ot-bn b{display:block;font-size:14px;color:var(--ot-ink)}
  .ot-bn>div span{display:block;font-size:14px;font-weight:500;color:var(--ot-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ot-bst{align-self:flex-start;margin-top:10px;flex:none}
  .ot-bst>*{transition:opacity calc(220ms / var(--r))}
  .ot-bst time{font-size:12px;color:var(--ot-faint);justify-self:end;margin-top:2px}
  .ot-wait{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ot-am);background:var(--ot-ambg);border-radius:999px;padding:2px 7px;white-space:nowrap}
  .ot-wait svg{width:11px;height:11px}
  .ot-brep{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:2px 8px 2px 2px;white-space:nowrap}
  .ot-brep img{width:16px;height:16px;border-radius:50%;object-fit:cover}
  .ot-bn[data-st="time"] .ot-wait,.ot-bn[data-st="time"] .ot-brep,.ot-bn[data-st="wait"] time,.ot-bn[data-st="wait"] .ot-brep,.ot-bn[data-st="rep"] time,.ot-bn[data-st="rep"] .ot-wait{opacity:0}
  .ot-bn[data-slot="0"]{transform:translate3d(0,0,0);z-index:9}
  .ot-bn[data-slot="1"]{transform:translate3d(0,202px,0);z-index:8}
  .ot-bn[data-slot="2"]{transform:translate3d(0,211px,0) scale(.94);z-index:7;opacity:.72}
  .ot-bn[data-slot="3"]{transform:translate3d(0,218px,0) scale(.88);z-index:6;opacity:.42}
  .ot-bn[data-slot="4"],.ot-bn[data-slot="5"],.ot-bn[data-slot="6"],.ot-bn[data-slot="7"]{transform:translate3d(0,222px,0) scale(.84);z-index:5;opacity:0}
  .ot-bn[data-slot="pre"]{transform:translate3d(0,-26px,0) scale(.96);z-index:10;opacity:0;transition:none}
  .ot-bn .ot-ring{inset:-4px;transition:opacity calc(180ms / var(--r))}
  .ot-bn:not([data-slot="0"]) .ot-ring{opacity:0}
  .ot-bn .ot-ring rect{stroke-dashoffset:1;transition:stroke-dashoffset calc(600ms / var(--r)) cubic-bezier(.65,0,.35,1)}
  .ot-bn[data-slot="0"]:not([data-st="time"]) .ot-ring rect{stroke-dashoffset:0}
  .ot-bn[data-slot="0"][data-st="rep"] .ot-ring rect{stroke:var(--ot-g2)}
  .ot-bn:not([data-i]) .ot-ring{display:none}

  /* the compact automation trace */
  .ot-ptrace{position:absolute;left:10px;right:10px;top:72px;z-index:8;background:#fff;border:1px solid var(--ot-line);border-radius:14px;padding:8px 12px 7px;box-shadow:0 14px 30px -20px rgba(26,29,38,.35);transform-origin:50% 0;
    transition:opacity calc(300ms / var(--r)),transform calc(420ms / var(--r)) cubic-bezier(.2,.8,.2,1)}
  .ot-motion .ot-hero:not(.ot-p-trace) .ot-ptrace{opacity:0;transform:translate3d(0,-12px,0) scale(.96)}
  .ot-pt-h{display:flex;align-items:center;gap:6px;height:20px;margin-bottom:3px;font-size:12px;color:var(--ot-muted);white-space:nowrap}
  .ot-pt-h>svg{width:12px;height:12px;color:var(--ot-v);flex:none}
  .ot-pt-h b{color:var(--ot-ink);font-weight:700}
  .ot-pt-h .ot-stack{margin-left:auto}
  .ot-pt-h em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:600;white-space:nowrap;transition:opacity calc(240ms / var(--r))}
  .ot-pt-h em svg{width:11px;height:11px}
  .ot-pt-cp{color:var(--ot-vtext)}
  .ot-pt-cp .ot-dots{margin-left:0}
  .ot-motion .ot-p-draft .ot-pt-cp .ot-dots i{animation:ot-dot 1s ease-in-out infinite}
  .ot-pt-cp .ot-dots i:nth-child(2){animation-delay:.15s}
  .ot-pt-cp .ot-dots i:nth-child(3){animation-delay:.3s}
  .ot-pt-cp svg{color:var(--ot-v)}
  .ot-pt-ok{color:var(--ot-g)}
  .ot-pt-ok img{width:16px;height:16px;border-radius:50%;object-fit:cover}
  .ot-pt-on,.ot-pt-cp{opacity:0}
  .ot-motion .ot-pt-ok{opacity:0}
  .ot-motion .ot-hero:not(.ot-p-draft):not(.ot-p-sent) .ot-pt-on{opacity:1}
  .ot-motion .ot-p-draft .ot-pt-cp,.ot-motion .ot-p-sent .ot-pt-ok{opacity:1}
  .ot-ptrace ol{list-style:none}
  .ot-ptrace li{display:flex;align-items:center;gap:8px;height:22px;font-size:13px;color:var(--ot-body);white-space:nowrap;transition:opacity calc(260ms / var(--r)),transform calc(380ms / var(--r)) cubic-bezier(.2,.8,.2,1)}
  .ot-ptrace .ot-ai{width:19px;height:19px}
  .ot-ptrace .ot-ai img,.ot-ptrace .ot-ai svg{width:11px;height:11px}
  .ot-ptrace .ot-tag{font-size:11.5px}
  .ot-ptrace .ot-asg{font-size:12.5px}
  .ot-ptrace .ot-asg img{width:18px;height:18px}
  .ot-ptrace .ot-atk{transition:transform calc(340ms / var(--r)) cubic-bezier(.3,1.7,.5,1) calc(140ms / var(--r)),opacity calc(160ms / var(--r)) calc(140ms / var(--r))}
  .ot-ndemo{position:absolute;left:4px;bottom:-27px;font-size:11.5px;font-weight:600;color:var(--ot-muted)}
  .ot-pager.ot-pager-p{display:flex;justify-content:flex-end;gap:4px;margin:4px 0 0;height:30px}
  .ot-notifs{margin-bottom:34px}
  .ot-motion .ot-notifs{margin-bottom:0}
  .ot-pager.ot-pager-p[hidden]{display:none}
  .ot-pager-p button{height:30px;padding:0 3px;gap:0;box-shadow:none;border-color:transparent;background:none;overflow:visible}
  .ot-pager-p button::before{content:"";position:absolute;inset:-7px -3px}
  .ot-pager-p .ot-pp{width:30px}
  .ot-pager-p button.ot-on{border-color:#cfc6fb;background:#fff}
  .ot-pager-p button b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ot-pager-p button .ot-av{width:24px;height:24px;font-size:9px}
  .ot-pager-p .ot-pbar{left:6px;right:6px;bottom:1px}

  /* the gutter thread, from the stack down past the headline to the answer below */
  .ot-gt{display:block;position:absolute;left:-18px;top:calc(40px + 30px + 32px);bottom:-72px;width:16px;pointer-events:none}
  .ot-gt-h{position:absolute;left:0;top:0;width:18px;height:14px;border-top:2px solid var(--ot-v);border-left:2px solid var(--ot-v);border-top-left-radius:12px;transform-origin:100% 0;transition:transform calc(220ms / var(--r))}
  .ot-gt-v{position:absolute;left:0;top:12px;bottom:0;width:2px;background:var(--ot-v);transform-origin:50% 0;transition:transform calc(900ms / var(--r)) calc(160ms / var(--r)) cubic-bezier(.3,.7,.2,1)}
  .ot-gt-b{position:absolute;left:-5px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ot-v);transition:opacity calc(300ms / var(--r)) calc(1000ms / var(--r))}
  .ot-motion .ot-hero:not(.ot-p-gt) .ot-gt-h{transform:scaleX(0)}
  .ot-motion .ot-hero:not(.ot-p-gt) .ot-gt-v{transform:scaleY(0)}
  .ot-motion .ot-hero:not(.ot-p-gt) .ot-gt-b{opacity:0}
  .ot-gt-b::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--ot-v);opacity:0}
  .ot-hero.ot-p-gt .ot-gt-b::after{animation:ot-beadring 2.4s ease-out infinite}
  @keyframes ot-beadring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}

  .ot-av-s{width:24px;height:24px;font-size:9px}
  .ot-av-s img{width:11px;height:11px;padding:1.5px}
  .ot-h1{margin-top:8px}
  .ot-sub{font-size:16px;margin-top:12px}
  .ot-ctas{margin-top:20px;flex-direction:column;gap:6px}
  .ot-ctas .r-btn.primary{width:100%;height:56px;font-size:17px}
  .ot-ctas .r-btn.ghost{background:none;border:0;height:40px;padding:0;justify-content:flex-start;color:var(--ot-vtext);font-size:16px}
  .ot-ctas .r-btn.ghost:hover{background:none;text-decoration:underline}
  .ot-byline{margin-top:10px;font-size:13.5px}

  /* THE ANSWER, below the fold */
  .ot-cap{position:relative;margin-top:72px;max-width:none}
  .ot-cap>p+p{margin-top:22px}
  .ot-cap::before,.ot-stage::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;background:var(--ot-v)}
  .ot-cap::before{bottom:-20px}
  .ot-cap b{font-size:24px}
  .ot-cap span{font-size:15px}
  .ot-stage{padding-top:56px;margin-top:0}
  .ot-inboxchip,.ot-feed,.ot-mcard,.ot-pager-d{display:none!important}
  .ot-plane{left:auto;right:-6px;top:8px;width:180px}
  .ot-motion .ot-plane{left:0;right:auto;top:8px;transform:none;opacity:0}
  .ot-twrap{width:100%}
  .ot-th{padding:12px 13px;gap:10px}
  .ot-th .ot-av{width:32px;height:32px}
  .ot-who>b{font-size:14.5px}
  .ot-who>span:not(.ot-lands){font-size:12px;line-height:1.35;display:block}
  .ot-pill{font-size:11px;padding:3px 9px}
  .ot-msg{padding:12px 13px 2px}
  .ot-msg>p:last-child{font-size:14px}
  .ot-auto{margin:10px 8px 0;padding:8px 10px 6px}
  .ot-auto-h span{display:none}
  .ot-al{display:none}
  .ot-auto li{font-size:12.5px;gap:7px;height:26px}
  .ot-auto li.ot-rule2{height:auto}
  .ot-then{padding-left:28px}
  .ot-auto ol::before,.ot-auto ol::after{top:13px;bottom:13px}
  .ot-auto ol.ot-lastrule::before,.ot-auto ol.ot-lastrule::after{bottom:39px}
  .ot-reply{margin:10px 8px 8px;padding:11px 12px}
  .ot-rh p{font-size:12px}
  .ot-rh-read{white-space:normal!important}
  .ot-rt{font-size:14px}
  .ot-rf small{display:none}
  .ot-rf-sent{font-size:11.5px}
  .ot-under{justify-content:space-between;margin-top:10px}
  .ot-twrap>.ot-toast{margin:-18px 0 0 8px}
  .ot-srcs{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:22px;max-width:none}
  .ot-pgut{display:block;position:absolute;left:-18px;top:-22px;bottom:30px;width:2px;background:var(--ot-v);border-radius:2px}
  .ot-src{position:relative}
  .ot-src::before{content:"";position:absolute;left:-18px;top:22px;width:18px;height:2px;background:var(--ot-v)}
  .ot-src::after{content:"";position:absolute;left:-23px;top:17px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ot-v);box-sizing:border-box}
  .ot-motion .ot-hero.ot-a-rw .ot-src:not(.ot-on){opacity:0;transform:translate3d(0,-14px,0) scale(.97)}
  .ot-motion .ot-src{transition:opacity calc(320ms / var(--r)),transform calc(420ms / var(--r)) cubic-bezier(.2,.9,.3,1.1)}
  .ot-motion .ot-pgut{transform-origin:50% 0;transform:scaleY(var(--pg,1))}
  .ot-motion .ot-src .ot-num{transition:transform calc(260ms / var(--r)) cubic-bezier(.3,1.6,.5,1)}
  .ot-motion .ot-hero.ot-a-rw .ot-src:not(.ot-on) .ot-num{transform:scale(.3)}
  .ot-motion .ot-ph.ot-lit,.ot-motion .ot-hl.ot-lit{background-size:100% 2px}

  /* section 2 */
  .ot-why{padding:88px 0 72px}
  .ot-why-a{display:block;padding:0 16px}
  .ot-why-t{display:contents}
  .ot-eyebrow{margin-bottom:18px}
  .ot-why-a{display:flex;flex-direction:column;align-items:stretch}
  .ot-why-a .ot-eyebrow{order:-2;align-self:flex-start}
  .ot-photo{order:-1;width:100%;height:auto;aspect-ratio:342/440;border-radius:20px}
  .ot-gchips{display:none}
  .ot-spine{display:none}
  .ot-h2{font-size:36px;line-height:1.05;margin-top:32px}
  .ot-quote p{font-size:17px}
  .ot-sig{margin-top:22px}
  .ot-bio{margin-top:24px;padding-top:22px;font-size:16px}
  .ot-readout{display:block;margin-top:28px;border-top:1px solid var(--ot-line)}
  .ot-readout div{display:flex;align-items:baseline;gap:14px;height:64px;border-bottom:1px solid var(--ot-line);padding-top:16px}
  .ot-readout dt{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ot-ink);min-width:118px}
  .ot-readout dd{font-size:15px;color:var(--ot-muted)}
  .ot-why-b{margin-top:72px;padding:0 16px 0 32px}
    .ot-dlines,.ot-dlab{display:none}
  .ot-frag{position:relative;left:auto!important;top:auto!important;width:auto!important;overflow:visible}
  .ot-frag .ot-fh{border-radius:12px 12px 0 0}
  .ot-frag-1{margin-right:28px}
  .ot-frag-2{margin-left:18px;margin-right:6px}
  .ot-frag-3{margin-left:8px;margin-right:18px}
  .ot-frag::before{content:"";position:absolute;right:100%;top:16px;width:18px;border-top:1.5px dashed var(--ot-v);transition:border-color .5s}
  .ot-frag-2::before{width:36px}
  .ot-frag-3::before{width:26px}
      .ot-pre .ot-frag::before{border-top-color:#c9c5da}
  .ot-bticket{position:relative;left:auto;top:auto;width:auto;margin-top:12px}
  .ot-bticket::before{content:"";position:absolute;left:-23px;top:22px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ot-v);box-sizing:border-box}
  .ot-dcap{margin-top:28px;font-size:19px;text-align:left}

  /* section 3 */
  .ot-panel{margin:0 8px;border-radius:28px;padding:72px 0 80px}
  .ot-how-h{padding:0 16px}
  .ot-h2-d{font-size:40px;line-height:1.08;letter-spacing:-.03em;padding-bottom:22px}
  .ot-h2-d>span::after,.ot-h2-d::before{display:none}
  .ot-h2-d{padding-bottom:0}
  .ot-how-sub{font-size:16px;margin-top:22px}
                                  .ot-win{height:auto}
                  .ot-herreply{max-width:88%}
    .ot-figcap{padding:0 4px}
  .ot-close{margin-top:88px;padding:0 20px}
  .ot-close-h{font-size:36px;line-height:1.06}
  .ot-close>p{font-size:16px}
  .ot-cbwrap{display:block;margin-top:30px}
  .ot-cbtn.r-btn{width:100%;height:56px;justify-content:center;font-size:17px}
  .ot-how{padding-bottom:8px}
}
@media (max-width:420px){
}

/* =====================================================================
   MODES
   ===================================================================== */
/* shimmer loops only when motion is welcome and not frozen for capture */
@media (prefers-reduced-motion:no-preference){
}
/* capture frames and rewinds: no transitions, no running animations */
.ot-frame *,.ot-frame *::before,.ot-frame *::after,.ot-instant *,.ot-instant *::before,.ot-instant *::after{transition:none!important}
.ot-frame *,.ot-frame *::before,.ot-frame *::after{animation-play-state:paused!important}
.ot-paused,.ot-paused *,.ot-paused *::before,.ot-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
    html:not(.ot-frame) .ot-bn,html:not(.ot-frame) .ot-src{transition:none}
  .ot-trace rect,.ot-cbtn.r-btn{transition:none}
}

/* Decide: the workshop notes carry over into the plan */
.ot-carry{margin-top:12px;border:1px dashed #d9d5ea;border-radius:12px;padding:10px 12px}
.ot-carry p{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ot-ink)}
.ot-carry p img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.ot-carry p span{font-weight:500;color:var(--ot-muted);margin-left:auto}
.ot-carry ul{list-style:none;margin-top:6px}
.ot-carry li{display:flex;gap:7px;font-size:12.5px;line-height:1.45;color:var(--ot-body);padding:3px 0}
.ot-carry li svg{width:13px;height:13px;color:var(--ot-g);flex:none;margin-top:2px}

/* emoji: always the colour emoji face, never a monochrome system glyph */
.ot-emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-weight:400}

/* =====================================================================
   STEP 3 · BUILD: the drafting sheet (The Blueprint's build sweep, laid in
   the charcoal band as a real sheet of paper). The CSS below is the FINISHED,
   built sheet. JS layers the ink plan and the build line on top while it plays.
   ===================================================================== */
.ot-bcopy p{font-size:17px;line-height:1.6;color:#b9bccb}
.ot-bcopy .ot-bself{margin-top:10px;font-size:15px;line-height:1.5;color:#8f93a3}


/* numbered callouts, drawn on the sheet itself */

/* the plate: the real system, with its generated ink plan and the build line over it */
/* the face of the hero ticket each rule handled */

/* the generated ink plan (JS only, shown while the build plays) */

/* the build line: violet, 1.5px, with its small charcoal tag */

/* who drew it follows the choice made in Decide */

/* the foot: legend, replay, title block */

/* desktop, JS: steps 1 and 2 share the sticky window; the sheet and step 4 run full width */
/* narrower desktops: the sheet folds into two rows of two, each group keeps its numbered head */

/* phone: the sheet stacks, the build line runs top to bottom */
@media (max-width:899px){
      .ot-bcopy p{margin-top:16px;font-size:16px}
  .ot-bcopy .ot-bself{margin-top:10px;font-size:14.5px}
                                                                              }

/* the build: stamps and faces wait for the line, then pop (frames hold them landed) */