/* Canopy workspace, "Thread" version: a calm, light picture of the product that scales like an image.
   One fixed 1200px canvas (460px stacked on phones). Dotted lines run from each highlighted phrase to the
   record field it filled. Every class carries the tw- prefix, so nothing collides with the page's own styles. */

#platform .workspace-tilt { padding:0; background:none; box-shadow:none; border-radius:0; }
#platform .workspace-tilt > .dashboard { display:none; }

.tw { --t1:1.25s; --t2:1.7s; --t3:2.15s; --t4:2.6s; --lag:.9s; --ease-move:cubic-bezier(.16,1,.3,1); --ease-fade:cubic-bezier(.32,.72,0,1);
  position:relative; isolation:isolate; color:#292a2d; font-family:Inter,Arial,sans-serif; }
.tw-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Quiet dotted backdrop that fades out towards the edges, with a cool light behind the transcript. */
.tw::before { content:""; position:absolute; z-index:-1; inset:-56px calc(50% - 50vw); pointer-events:none;
  background-image:radial-gradient(#d0d6de 1px,transparent 1.3px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 62% at 50% 50%,#000 20%,transparent 100%); mask-image:radial-gradient(60% 62% at 50% 50%,#000 20%,transparent 100%); }
.tw::after { content:""; position:absolute; z-index:-1; inset:-56px calc(50% - 50vw); pointer-events:none;
  background:radial-gradient(30% 38% at 30% 46%,#dbe3f4b3,#dbe3f400); }

.tw-stage { position:relative; width:100%; height:calc(var(--h,690px) * var(--z,1)); }
.tw-stage:not(.tw-ready) .tw-canvas { visibility:hidden; }
.tw-canvas { position:absolute; left:0; top:0; width:1200px; transform-origin:0 0; transform:scale(var(--z,1)); pointer-events:none; user-select:none; -webkit-user-select:none; }
.tw-camera { position:relative; transform-origin:0 0; }

/* Window and frame */
.tw-window { position:relative; width:1200px; display:grid; grid-template-columns:68px 1fr; background:#f1f3f6; border-radius:18px; overflow:hidden; font-size:16px; line-height:normal; letter-spacing:normal; text-align:left;
  box-shadow:0 0 0 1px #0b0e121c,0 2px 4px #0b0e120f,0 30px 60px -22px #0b0e1240,0 90px 150px -50px #0b0e1233; }
.tw-window :is(img,svg) { display:block; flex:none; }
.tw-window :where(div,p,small,strong,em) { margin:0; }
.tw-window :where(small,em) { font-style:normal; }

.tw-rail { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 0 20px; background:#fff; border-right:1px solid #e6e9ee; }
.tw-brand { display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #e3e7ec,0 6px 16px -8px #0b0e1240; }
.tw-ri { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:#8a929c; }
.tw-ri.tw-on { background:linear-gradient(150deg,#9cfaff,#45e7ef); color:#073c43; box-shadow:inset 0 1px 0 #ffffff8c,0 0 0 1px #3ad9e059,0 8px 20px -8px #2abec7; }
.tw-ri.tw-on::before { content:""; position:absolute; left:-14px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:#2abec7; }
.tw-rule { width:22px; height:0; margin:8px 0; border-top:1px solid #e6e9ee; }
.tw-acct { display:grid; place-items:center; width:34px; height:34px; margin-top:auto; border-radius:50%; background:linear-gradient(140deg,#f3f5f8,#e3e7ec); color:#3b414a; font-size:11px; font-weight:600; letter-spacing:.02em; box-shadow:0 0 0 1px #dde2e8; }

.tw-app { display:flex; flex-direction:column; min-width:0; }
.tw-top { position:relative; padding-bottom:70px; background:linear-gradient(#fafbfc,#eef2f5); border-bottom:1px solid #e3e7ec; overflow:hidden; }
/* A faint blueprint grid that fades towards the middle. */
.tw-top::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#1b2a3a0b 1px,transparent 1px),linear-gradient(90deg,#1b2a3a0b 1px,transparent 1px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 55%,#000 100%); mask-image:linear-gradient(90deg,#000 0%,transparent 55%,#000 100%); }
.tw-titlebar { position:relative; display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 20px 0 30px; border-bottom:1px solid #e3e7ec; }
.tw-crumb { display:flex; align-items:center; gap:6px; font-size:11px; color:#7a828c; }
.tw-crumb strong { font-weight:550; color:#23272d; }
.tw-dots-win { display:flex; gap:8px; }
.tw-dots-win i { width:12px; height:12px; border-radius:50%; background:#f5bf4f; box-shadow:inset 0 0 0 1px #0000001a; }
.tw-dots-win i:nth-child(2) { background:#62c554; }
.tw-dots-win i:nth-child(3) { background:#ef6a5e; }
.tw-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:30px 30px 0; }
.tw-title { font-size:36px; line-height:1.08; font-weight:520; letter-spacing:-.03em; background:linear-gradient(180deg,#14181d 35%,#4b535d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tw-sub { display:flex; align-items:center; gap:9px; margin-top:10px!important; font-size:14px; color:#626a74; }
.tw-live { width:7px; height:7px; border-radius:50%; background:#007b89; box-shadow:0 0 0 3px #64f5ff99; }

/* Cards lift over the tinted band. */
.tw-body { position:relative; display:grid; grid-template-columns:520px 462px; gap:90px; align-items:stretch; margin-top:-44px; padding:0 30px 30px; }
.tw-doc,.tw-rec { border-radius:16px; background:#fff; box-shadow:0 0 0 1px #0b0e120f,0 1px 2px #0b0e120d,0 24px 50px -26px #0b0e1247; }

/* Transcript */
.tw-doc { padding:22px 28px 26px; }
.tw-doc-h,.tw-rec-h { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; letter-spacing:-.01em; color:#171b20; }
.tw-doc-h { margin-bottom:20px; }
.tw-doc-h svg,.tw-rec-h svg { width:20px; height:20px; }
.tw-dh-ic { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(150deg,#b0fcff,#4feaf2); color:#07525b; box-shadow:inset 0 0 0 1px #2fcbd359; }
.tw-turns { position:relative; display:grid; gap:18px; }
.tw-turns::before { content:""; position:absolute; left:17.5px; top:40px; bottom:40px; width:1px; background:repeating-linear-gradient(#d6dce3 0 3px,transparent 3px 7px); }
.tw-turn { position:relative; display:grid; grid-template-columns:36px 1fr; gap:14px; }
.tw-av { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#eef0ec; color:#4b525c; font-size:10px; font-weight:600; }
.tw-ph { background:#dfe4ec url("../../../assets/portrait.webp") 46% 24%/240% no-repeat; }
.tw-pav.tw-ph { background:#dfe4ec url("../../../assets/portrait.webp") 46% 24%/240% no-repeat; }
.tw-av.tw-ph { box-shadow:0 0 0 3px #fff,0 0 0 4px #e1e6ec; }
.tw-av-brand { background:#fff; box-shadow:0 0 0 3px #fff,0 0 0 4.5px #4feaf2,0 4px 14px -4px #3adee8; }
.tw-who { display:flex; align-items:center; gap:8px; margin:7px 0 4px!important; font-size:12px; font-weight:600; color:#20252b; }
.tw-who em { padding:2px 8px; border-radius:999px; background:#c4f7f9; color:#07525b; font-size:9.5px; font-weight:600; letter-spacing:.02em; box-shadow:inset 0 0 0 1px #7ce6eb; }
.tw-q { font-size:16px; line-height:1.8; color:#4d545e; }
.tw-agent .tw-q { display:inline-block; padding:9px 16px; border-radius:4px 16px 16px 16px; background:linear-gradient(#f6f8fa,#eef1f5); color:#2a2f36; line-height:1.6; box-shadow:inset 0 0 0 1px #e1e6ec; }
.tw-mark { --mk:#d9f8fa; --mh:100%; --my:0%; padding:1px 2px; border-radius:3px; color:#23262b; background:linear-gradient(var(--mk),var(--mk)) no-repeat 0 var(--my)/100% var(--mh); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tw-summary { margin-top:24px; padding:15px 18px 16px; border:1px solid #e3e7ec; border-radius:12px; background:#f6f8fa; }
.tw-summary-h { display:flex; align-items:center; gap:7px; margin-bottom:6px!important; font-size:11.5px; font-weight:600; color:#3b414a; }
.tw-summary-h svg { color:#6b727c; }
.tw-summary p { font-size:13px; line-height:1.65; color:#59606a; }

/* Record */
.tw-rec { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.tw-band { position:relative; height:78px; padding:16px 20px; background:linear-gradient(#f7f8fa,#eef1f5); }
.tw-band::before { content:""; position:absolute; inset:0; background-image:radial-gradient(#2b382126 1px,transparent 1.2px); background-size:12px 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000); mask-image:linear-gradient(90deg,transparent 30%,#000); }
.tw-rec-h { position:relative; }
.tw-person { position:relative; display:grid; grid-template-columns:64px 1fr auto; align-items:end; gap:14px; margin:-30px 20px 16px; padding-bottom:16px; border-bottom:1px solid #eef0f3; }
.tw-pav { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#eef0ec; box-shadow:0 0 0 4px #fff,0 10px 24px -10px #0b0e1266; }
.tw-person strong { display:block; font-size:18px; font-weight:600; letter-spacing:-.01em; color:#171b20; }
.tw-person small { display:block; margin-top:3px; font-size:12px; color:#7a828c; }
.tw-tag { display:inline-flex; align-items:center; gap:6px; margin-bottom:6px; padding:4px 10px; border-radius:999px; background:#c4f7f9; color:#07525b; font-size:11px; font-weight:600; box-shadow:inset 0 0 0 1px #7ce6eb; }
.tw-tag i { width:6px; height:6px; border-radius:50%; background:#007b89; box-shadow:0 0 0 2px #007b8933; }
.tw-items { display:grid; gap:10px; margin:0 20px 18px; }
.tw-item { display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:center; padding:11px 14px; border:1px solid #e7eaee; border-radius:12px; background:#fff; box-shadow:0 1px 2px #0b0e120a; }
.tw-item > div { display:grid; gap:3px; justify-items:start; }
.tw-item small { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8a919a; }
.tw-item strong { font-size:17px; line-height:1.3; font-weight:520; letter-spacing:-.01em; color:#171b20; }
.tw-item span.tw-v { font-size:12px; color:#6b727c; }
.tw-tile { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,#b0fcff,#4feaf2); color:#07525b; box-shadow:inset 0 1px 0 #ffffffa6,inset 0 0 0 1px #2fcbd359,0 6px 14px -8px #1fb5bf; }
.tw-crm { display:flex; align-items:center; gap:10px; margin-top:auto; padding:13px 20px; border-top:1px solid #eef0f3; background:#f8f9fb; font-size:12px; font-weight:500; color:#4d545e; }
.tw-crm-logo { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#fff; box-shadow:0 0 0 1px #e4e8ec; }
.tw-ok { display:grid; place-items:center; width:20px; height:20px; margin-left:auto; border-radius:50%; background:#64f5ff; color:#073c43; box-shadow:0 0 0 3px #64f5ff33; }

/* While the lines are measured, the cards sit in their resting layout. */
.tw.tw-measuring :is(.tw-window,.tw-doc,.tw-rec) { transition:none!important; transform:none!important; filter:none!important; opacity:1!important; }

/* Threads are drawn in canvas units, so they stay attached at every screen size. */
.tw-threads { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.tw-threads path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tw-threads :is(.tw-halo,.tw-track,.tw-reveal) { stroke-dasharray:1 1; }
.tw-threads .tw-halo { stroke:#fff; stroke-width:6; opacity:.9; }
.tw-threads .tw-track { stroke:#007b89; stroke-width:1; opacity:.22; }
.tw-threads .tw-reveal { stroke:#fff; stroke-width:12; }
/* The dots keep flowing from the phrase to the record. */
.tw-threads .tw-flow { stroke-width:2.6; stroke-dasharray:0 7; animation:tw-flow .9s linear infinite; }
.tw-motion-observed:not([data-flow-active]) .tw-threads .tw-flow { animation-play-state:paused; }
@keyframes tw-flow { to { stroke-dashoffset:-7; } }
.tw-threads .tw-start { fill:#fff; stroke:#20252b; stroke-width:1.5; }
.tw-threads .tw-glow { fill:#64f5ff; opacity:.5; }
.tw-threads .tw-end { fill:#64f5ff; stroke:#20252b; stroke-width:1.5; }
.tw-threads .tw-head-glow { fill:#64f5ff; opacity:.6; }
.tw-threads .tw-head-core { fill:#d6fdff; stroke:#12646b; stroke-width:1.2; }
.tw-threads :is(.tw-start,.tw-end,.tw-glow) { transform-box:fill-box; transform-origin:center; }

/* Values resolve from a quiet placeholder bar into text. */
.tw-v { --sk:#e9edf1; background:linear-gradient(var(--sk),var(--sk)) no-repeat 0 55%/100% 0%; border-radius:4px; }

/* Motion. Nothing is hidden unless the script arms the picture, so no-JS and reduced motion show the final state.
   It rises in, the two cards settle, the highlights sweep, the lines draw and each record value resolves.
   It replays each time the picture comes into view. --from is +1 when it left below, -1 when above.
   Transitions run both ways, so leaving the view rewinds it smoothly instead of snapping. */
.tw [data-k=req] { --i:var(--t1); }
.tw [data-k=time] { --i:var(--t2); }
.tw [data-k=next] { --i:var(--t3); }
.tw [data-k=cb] { --i:var(--t4); }
.tw .tw-fill { --f:calc(var(--i) + var(--lag)); }
.tw-window,.tw-doc,.tw-rec { transition:transform 1.4s var(--ease-move),opacity 1.1s var(--ease-fade),filter 1s var(--ease-fade); }
.tw-window { will-change:transform,opacity; }
.tw-doc { transition-delay:.2s; }
.tw-rec { transition-delay:.34s; }
.tw-armed:not(.tw-play) .tw-window { opacity:0; transform:translate3d(0,calc(var(--from,1) * 56px),0) scale(.975); filter:blur(12px); }
.tw-armed:not(.tw-play) .tw-doc { opacity:0; transform:translate3d(0,calc(var(--from,1) * 34px),0); filter:blur(6px); }
.tw-armed:not(.tw-play) .tw-rec { opacity:0; transform:translate3d(0,calc(var(--from,1) * 44px),0); filter:blur(6px); }
.tw-armed:not(.tw-play) .tw-head { opacity:0; }

.tw-armed:not(.tw-play) .tw-mark { background-size:0% var(--mh); }
.tw-play .tw-mark { animation:tw-sweep .75s cubic-bezier(.22,.61,.36,1) var(--i) both; }
@keyframes tw-sweep { from { background-size:0% var(--mh); } }
.tw-armed:not(.tw-play) .tw-fill .tw-v { color:transparent; background-size:100% 62%; }
.tw-play .tw-fill .tw-v { animation:tw-resolve .6s ease var(--f) both; }
@keyframes tw-resolve { from { color:transparent; background-size:100% 62%; } }
.tw-play .tw-fill { animation:tw-ping 1.1s ease var(--f) both; }
@keyframes tw-ping { 0% { box-shadow:0 0 0 0 #64f5ff00; } 30% { box-shadow:0 0 0 3px #64f5ffb3; } 100% { box-shadow:0 0 0 0 #64f5ff00; } }
.tw-armed:not(.tw-play) .tw-live { box-shadow:0 0 0 0 #64f5ff00; }
.tw-play .tw-live { animation:tw-breathe 1.6s ease .2s both; }
@keyframes tw-breathe { 0% { box-shadow:0 0 0 0 #3adee8cc; } 60% { box-shadow:0 0 0 8px #64f5ff00; } 100% { box-shadow:0 0 0 3px #64f5ff99; } }

.tw-armed:not(.tw-play) .tw-threads :is(.tw-halo,.tw-track,.tw-reveal) { stroke-dashoffset:1; }
.tw-armed:not(.tw-play) .tw-threads :is(.tw-start,.tw-end,.tw-glow) { transform:scale(0); }
.tw-play .tw-threads :is(.tw-halo,.tw-track,.tw-reveal) { animation:tw-draw .8s cubic-bezier(.45,0,.2,1) calc(var(--i) + .2s) both; }
.tw-play .tw-threads .tw-start { animation:tw-pop .35s cubic-bezier(.3,1.6,.5,1) calc(var(--i) + .1s) both; }
.tw-play .tw-threads .tw-end { animation:tw-pop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i) + .95s) both; }
.tw-play .tw-threads .tw-glow { animation:tw-bloom 1.2s ease-out calc(var(--i) + .95s) both; }
@keyframes tw-draw { from { stroke-dashoffset:1; } }
@keyframes tw-pop { from { transform:scale(0); } }
@keyframes tw-bloom { 0% { transform:scale(0); opacity:.8; } 45% { transform:scale(1.6); opacity:.35; } 100% { transform:scale(1); opacity:.5; } }

/* The icon tile lights up when its thread arrives. */
.tw-armed:not(.tw-play) .tw-tile { background:#eef0f3; color:#a0a7b0; box-shadow:inset 0 0 0 1px #e3e7ea; }
.tw-play .tw-tile { animation:tw-light .6s ease var(--f) both; }
@keyframes tw-light { from { background:#eef0f3; color:#a0a7b0; box-shadow:inset 0 0 0 1px #e3e7ea; } }

@media (prefers-reduced-motion:reduce) {
  .tw *,.tw-window,.tw-doc,.tw-rec { animation:none!important; transition:none!important; }
}

/* Phones: its own fixed 460px canvas, scaled like an image. The transcript sits above the record,
   and the dotted lines run down a lane on the right, so every line lands on a field you can see. */
@media (max-width:760px) {
  .tw-canvas,.tw-window { width:460px; }
  .tw-window { grid-template-columns:1fr; border-radius:16px; }
  .tw-rail { display:none; }
  .tw-titlebar { padding:0 18px; }
  .tw-crumb { font-size:12px; }
  .tw-heading { flex-direction:column; align-items:flex-start; gap:20px; padding:24px 18px 0; }
  .tw-title { font-size:32px; }
  .tw-sub { font-size:15px; }
  .tw-top { padding-bottom:60px; }
  .tw-body { grid-template-columns:384px; gap:20px; margin-top:-38px; padding:0 60px 20px 16px; }
  .tw-doc { padding:20px 20px 22px; }
  .tw-doc-h { font-size:17px; }
  .tw-who { font-size:13px; }
  .tw-summary-h { font-size:12.5px; }
  .tw-summary p { font-size:14px; }
  .tw-person small,.tw-item span.tw-v,.tw-crm { font-size:13px; }
  .tw-item small { font-size:11px; }
  .tw-rec-h { font-size:17px; }
}