/* Generated by scripts/build-talk-to-juney.mjs from site-concepts/web-chat/13-deck. Don't edit by hand. */
/* kit.css tokens (juney.ai's own, as 13 was built with), on the module's two roots only. Type is the site's Inter. */
.ttj {
  --page: #ffffff;
  --panel: #f7f6f3;
  --panel-2: #f1f0ec;
  --ink: #1e1d1c;
  --ink-strong: #0e0e10;
  --ink-2: #57534e;
  --ink-3: #6f6b66;
  --ink-faint: #8c8780;
  --line: rgb(30 29 28 / 0.09);
  --line-2: rgb(30 29 28 / 0.15);
  --juney-periwinkle: #8fa3f2;
  --juney-lantern: #5a70c8;
  --juney-accent-ink: #4b5bb5;
  --juney-accent-soft: #eef1fd;
  --juney-gradient: linear-gradient(92deg, #4b5bb5 0%, #6a7ee2 38%, #8b74c8 72%, #9a6a85 100%);
  --wallpaper-day: linear-gradient(in oklab 180deg, #6f88d6 0%, #94a8e6 48%, #c6d2f2 100%);
  --wallpaper-night: linear-gradient(in oklab 180deg, #161a30 0%, #1e2445 60%, #2a335f 100%);
  --amber: #ffb35f;
  --amber-soft: #fff0dd;
  --green: #157332;
  --radius: 1rem;
  --fs-hero: clamp(2.5rem, 1.55rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 72rem;
  --section: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  --ease-out: cubic-bezier(.22, .7, .2, 1);
  --shadow-card: 0 1px 2px rgb(30 29 28 / .04), 0 12px 32px -18px rgb(30 29 28 / .18);
  --shadow-float: 0 1px 2px rgb(30 29 28 / .05), 0 24px 60px -28px rgb(30 29 28 / .32);
  --font-site: var(--font-juney-sans), "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-app-serif: "Erode", Georgia, serif;
  --font-app-sans: "General Sans", system-ui, sans-serif;
}
/* 13's page: Inter at 1rem/1.6, the site's ink and features. The module ignores whatever text styles it's placed in. */
.ttj { font-family: var(--font-site); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--ink); letter-spacing: normal; text-align: start; text-transform: none; white-space: normal; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.ttj, .ttj *, .ttj *::before, .ttj *::after { box-sizing: border-box; }
/* the browser defaults 13 was built on, which the site's Tailwind reset clears */
.ttj p { margin: 1em 0; text-wrap: wrap; }
.ttj button { padding: 1px 6px; }
.ttj input { padding: 1px 2px; }
.ttj-hero { position: relative; }

/* ── glass-orb.css ── */
/* Juney's glass orb (22 Oct 2026): a glass sphere holding a small sky (upside down, as glass does) and her amber light.
   The orb for every web chat concept. Mount it with GlassOrb.mount(el, { size, tint }) from glass-orb.js; this file
   only styles what the script builds. Motion lives inside the orb: clouds drift through the glass and her light
   rises and falls. No rings, ripples or pulses. Works on file:// (no URL masks; the cloud art is a background image). */

/* the tint, interpolated when it changes (setTint animates) */
@property --g-a { syntax: '<color>'; inherits: true; initial-value: #6f88d6; }
@property --g-b { syntax: '<color>'; inherits: true; initial-value: #94a8e6; }
@property --g-c { syntax: '<color>'; inherits: true; initial-value: #d3dcf6; }
@property --g-tr { syntax: '<number>'; inherits: true; initial-value: 111; }
@property --g-tg { syntax: '<number>'; inherits: true; initial-value: 136; }
@property --g-tb { syntax: '<number>'; inherits: true; initial-value: 214; }
@property --g-size { syntax: '<length>'; inherits: true; initial-value: 120px; }

.ttj .gorb {
  --g-size: 120px;          /* set by setSize */
  --g-lv: 0;                /* her voice level, 0..1, set by setLevel */
  --g-sx: 0; --g-sy: 0;     /* the pointer, -1..1, desktop only */
  --g-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative; display: block; flex: none; width: var(--g-size); height: var(--g-size); pointer-events: none; isolation: isolate;
  transition: --g-a .9s var(--g-ease), --g-b .9s var(--g-ease), --g-c .9s var(--g-ease), --g-tr .9s var(--g-ease), --g-tg .9s var(--g-ease), --g-tb .9s var(--g-ease);   /* a size change is a transform (setSize), never an animated layout */
}
.ttj .gorb.g-instant { transition: none; }
.ttj .gorb > i { position: absolute; display: block; border-radius: 50%; }

/* the glow it casts into whatever it floats in */
.ttj .g-glow { inset: -56%;
  background: radial-gradient(closest-side, rgb(255 222 184 / .5) 0%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .36) 36%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .12) 64%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / 0) 100%);
  opacity: calc(.75 + .25 * var(--g-lv)); transform: scale(calc(.92 + .26 * var(--g-lv))); }
/* the caustic: her light focused through the glass onto the surface below */
.ttj .g-pool { left: -22%; right: -22%; top: 90%; height: 28%;   /* its softness is in the gradients (no live blur) */
  background:
    radial-gradient(ellipse 18.5% 27% at 54% 40%, rgb(255 253 246 / .96) 0%, rgb(255 236 206 / .9) 24%, rgb(255 222 176 / .62) 52%, rgb(255 222 176 / .2) 78%, rgb(255 222 176 / 0) 100%),
    radial-gradient(ellipse 35.5% 44% at 52% 42%, rgb(255 204 150 / .55) 0%, rgb(255 204 150 / .22) 58%, rgb(255 204 150 / 0) 100%),
    radial-gradient(ellipse 46% 46% at 50% 46%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .34) 0%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .12) 55%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / 0) 100%);
  transform: scale(calc(.94 + .2 * var(--g-lv))); opacity: calc(.75 + .25 * var(--g-lv)); }
.ttj .g-pool b { position: absolute; inset: 14% 26%; border-radius: 50%; opacity: calc(.3 + .5 * var(--g-lv)); mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 .15 1 .15 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / calc(var(--g-size) * .75) calc(var(--g-size) * .75);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 80%); mask-image: radial-gradient(closest-side, #000 20%, transparent 80%); }   /* still: its drift repainted every frame and couldn't be seen */
/* the glass: a small sky inside, darker at the bottom, its tint deepening at the rim */
.ttj .g-body { inset: 0;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0) 52%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .3) 84%, rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .62) 100%),
    radial-gradient(circle at 50% 108%, rgb(255 255 255 / .7) 0, rgb(255 255 255 / 0) 46%),
    linear-gradient(180deg, var(--g-c) 0%, var(--g-b) 54%, var(--g-a) 100%);
  box-shadow: inset 0 calc(var(--g-size) * -.06) calc(var(--g-size) * .12) rgb(255 255 255 / .45), 0 calc(var(--g-size) * .11) calc(var(--g-size) * .22) calc(var(--g-size) * -.085) rgb(var(--g-tr) var(--g-tg) var(--g-tb) / .95); }
/* clouds drifting through the glass */
.ttj .g-cl { inset: 0; overflow: hidden; opacity: .62;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 98%); mask-image: radial-gradient(closest-side, #000 55%, transparent 98%); }
.ttj .g-cl b { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--g-size) * 4); background: url("/talk-to-juney/glass-orb/orb-clouds.png") repeat-x 0 0 / calc(var(--g-size) * 2) 100%; animation: ttj-g-drift 16s linear infinite; }
@keyframes ttj-g-drift { to { transform: translateX(calc(var(--g-size) * -2)); } }
/* her light: an amber core with a warm haze, rising and falling */
.ttj .g-haze { inset: 0; background: radial-gradient(ellipse 70% 52% at 50% 74%, rgb(255 196 132 / .5), rgb(255 196 132 / 0) 100%); opacity: calc(.7 + .3 * var(--g-lv)); animation: ttj-g-breathe 4s ease-in-out infinite; }
.ttj .g-core { inset: 16%;
  background: radial-gradient(closest-side, #fffbf3 0%, #ffe8c6 20%, rgb(255 196 128 / .92) 42%, rgb(255 179 95 / .42) 68%, rgb(255 179 95 / 0) 100%);
  opacity: calc(.82 + .18 * var(--g-lv)); transform: translateY(16%) scale(calc(.74 + .42 * var(--g-lv)));
  animation: ttj-g-breathe 4s ease-in-out infinite; }
@keyframes ttj-g-breathe { 0%, 100% { opacity: .62; translate: 0 5%; } 50% { opacity: 1; translate: 0 -4%; } }
@keyframes ttj-g-breathe-soft { 0%, 100% { opacity: .7; translate: 0 3%; } 50% { opacity: .95; translate: 0 -2%; } }
/* the glass surface: a lit rim, a thin dispersion fringe, a specular highlight and a glint that follow the pointer */
.ttj .g-rim { inset: 0; box-shadow: inset 0 0 0 max(1px, calc(var(--g-size) * .008)) rgb(255 255 255 / .85), inset 0 0 calc(var(--g-size) * .1) calc(var(--g-size) * .008) rgb(255 255 255 / .38), inset calc(var(--g-size) * -.05) calc(var(--g-size) * -.065) calc(var(--g-size) * .1) calc(var(--g-size) * -.058) rgb(255 255 255 / .95); }
.ttj .g-disp { inset: -1px; background: conic-gradient(from 210deg, rgb(255 255 255 / 0), rgb(143 163 242 / .55) 10%, rgb(232 160 196 / .5) 20%, rgb(255 200 150 / .55) 30%, rgb(255 255 255 / 0) 42%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 88%, #000 96%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 88%, #000 96%, transparent 100%); }
.ttj .g-spec { left: 17%; top: 9%; width: 42%; height: 24%; background: radial-gradient(closest-side, rgb(255 255 255 / .9), rgb(255 255 255 / .3) 60%, rgb(255 255 255 / 0) 100%);
  transform: translate(calc(var(--g-sx) * 8%), calc(var(--g-sy) * 8%)) rotate(-20deg); transition: transform .5s var(--g-ease); }
.ttj .g-glint { left: 30%; top: 17%; width: 8%; height: 8%; background: #fff; filter: blur(calc(var(--g-size) * .004));
  transform: translate(calc(var(--g-sx) * 30%), calc(var(--g-sy) * 30%)); transition: transform .5s var(--g-ease); }

/* small sizes: fewer, simpler layers so it stays a clean bead of light */
.ttj .gorb.g-small .g-pool, .ttj .gorb.g-small .g-disp, .ttj .gorb.g-small .g-glint { display: none; }
.ttj .gorb.g-small .g-glow { inset: -40%; }

/* calm: a neighbour card, slower and quieter */
.ttj .gorb.g-calm .g-cl b { animation-duration: 30s; }
.ttj .gorb.g-calm .g-core, .ttj .gorb.g-calm .g-haze { animation-name: ttj-g-breathe-soft; animation-duration: 5s; }

/* speaking: the light follows her voice instead of breathing */
.ttj .gorb.g-speaking .g-core, .ttj .gorb.g-speaking .g-haze { animation: none; }
.ttj .gorb.g-speaking .g-core { opacity: calc(.7 + .3 * var(--g-lv)); }

/* calling: her light flickers inside the glass, like a line ringing */
.ttj .gorb[data-state="calling"] .g-core { animation: ttj-g-calling 1.1s ease-in-out infinite; }
@keyframes ttj-g-calling { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* dim: the call is over */
.ttj .gorb[data-state="dim"] .g-core { opacity: .22; transform: translateY(16%) scale(.74); animation: none; transition: opacity .9s, transform .9s; }
.ttj .gorb[data-state="dim"] .g-pool, .ttj .gorb[data-state="dim"] .g-haze { opacity: .35; animation: none; }

/* while it breathes (its scale fixed), her light gets its own layer so the breath never repaints; while she speaks the scale
   changes, so no will-change then: Chrome re-rasters at the new scale and the light stays crisp */
.ttj .gorb:not(.g-off):not(.g-speaking) .g-core, .ttj .gorb:not(.g-off):not(.g-speaking) .g-haze { will-change: transform, opacity; }

/* off-screen: everything stops */
.ttj .gorb.g-off, .ttj .gorb.g-off * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .ttj .gorb, .ttj .gorb * { animation: none !important; transition: none !important; }
}


/* ── sky-warm.css ── */
/* Warm sunrise light in the moving sky (Andrew, 22 Oct: "all need a bit more orange in the clouds", meaning the background sky;
   then "put some red in as well, like the phone": the rose band of the site's phone sky, #eecdd6).
   One shared layer so every concept warms by the same amount. Put <div class="sky-warm" aria-hidden="true"></div> inside the
   section's sky, above the cloud art and below the cards. Amber stays light, never a surface: these are soft glows only. */

.ttj .sky-warm {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30% 24% at 34% 52%, rgb(236 146 168 / .52), transparent 70%),
    radial-gradient(28% 22% at 70% 64%, rgb(230 132 156 / .46), transparent 70%),
    radial-gradient(38% 30% at 20% 70%, rgb(255 170 85 / .58), transparent 70%),
    radial-gradient(34% 26% at 82% 40%, rgb(255 188 128 / .52), transparent 70%),
    radial-gradient(52% 30% at 55% 74%, rgb(255 160 100 / .44), transparent 72%),
    radial-gradient(30% 22% at 46% 18%, rgb(255 205 155 / .36), transparent 70%);
  /* Fades out before the section's top and bottom edges, so the warmth never ends in a line
     (the layer overhangs the section by 12%, so its visible band is about 10%–90% of its box). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 60%, transparent 84%);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 60%, transparent 84%);
  animation: ttj-sky-warm-drift 46s ease-in-out infinite alternate;
}
@keyframes ttj-sky-warm-drift {
  0%   { transform: translate3d(-2.5%, 1%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(3%, .5%, 0) scale(1.02); }
}
/* Night (17): the warmth sits low, as a glow on the horizon under the cards. */
.ttj .sky-warm.is-night {
  background:
    radial-gradient(60% 26% at 50% 100%, rgb(255 165 100 / .26), transparent 72%),
    radial-gradient(30% 20% at 18% 82%, rgb(255 179 95 / .16), transparent 70%),
    radial-gradient(30% 20% at 84% 78%, rgb(255 190 130 / .14), transparent 70%);
}
@media (prefers-reduced-motion: reduce) { .ttj .sky-warm { animation: none; } }


/* ── 13-deck ── */

/* 13 · Deck. The live demo takes the hero film's place: three calls at once, Ask Juney in the middle and a call on each
   side, fanned symmetrically. Each card is an industry with its glass orb, the business, what the caller says, and one
   Call Juney button. The deck loops: flick, tap a side card, or use the arrows. Call lifts the card into the call, and
   the orb travels to its top. Scroll away mid-call and it carries on above the Ask Juney widget in the corner. */
.ttj {
  --e-out: cubic-bezier(.22, .7, .2, 1);
  --e-pop: cubic-bezier(.34, 1.5, .6, 1);
  --end: #e0443a;
  --green-soft: #e3f5e6;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}
.ttj .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.ttj-still .ttj *:not(.gorb *), html.ttj-still .ttj *:not(.gorb *)::before, html.ttj-still .ttj *:not(.gorb *)::after { transition: none !important; animation: none !important; }
html.ttj-still .ttj .gorb, html.ttj-still .ttj .gorb * { transition: none !important; animation-play-state: paused !important; animation-delay: -2.6s !important; }   /* a frozen deep link shows her orb mid-breath, not at rest */
html.ttj-sheet-lock, html.ttj-sheet-lock body { overflow: hidden; }
.ttj button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.ttj svg { display: block; }
.ttj :focus-visible { outline: 2px solid var(--juney-accent-ink); outline-offset: 3px; }
.ttj .mono { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--ink-3); margin: 0; }

/* ── The hero's sky carries on below the crop (sampled from its last rows, with its own slope), then clears ── */
.ttj .demo { position: relative; isolation: isolate; padding: 8px 0 56px; }
.ttj .sky { position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none; }
.ttj .sky i { position: absolute; inset: 0; }
.ttj .sky .a { background: linear-gradient(90deg, #edeaf5 1.39%, #e9e7f4 4.17%, #e7e4f3 6.94%, #e5e1f2 9.72%, #e2ddf1 12.50%, #e0dbf1 15.28%, #dfdaef 18.06%, #e4e0f1 20.83%, #ece8f4 23.61%, #f2eff6 26.39%, #f5f3f8 29.17%, #f8f7f9 31.94%, #fafafc 34.72%, #fbfbfc 37.50%, #fcfcfc 40.28%, #fdfdfd 43.06%, #fdfdfd 45.83%, #fefefe 48.61%, #fefefe 51.39%, #fdfdfd 54.17%, #fdfdfd 56.94%, #fcfcfc 59.72%, #fbfbfc 62.50%, #fafafc 65.28%, #f8f7fa 68.06%, #f5f3f8 70.83%, #f2eff6 73.61%, #ece9f4 76.39%, #e5e1f1 79.17%, #e1dcf0 81.94%, #e7e3f3 84.72%, #eae6f4 87.50%, #ebe7f5 90.28%, #edeaf5 93.06%, #efedf5 95.83%, #f2eff6 98.61%); }
.ttj .sky .b { background: linear-gradient(90deg, #f1eff5 1.39%, #eae7f4 4.17%, #e8e4f0 6.94%, #e6e0f2 9.72%, #e2d9ef 12.50%, #ded5ee 15.28%, #d8d0e8 18.06%, #dbd5e9 20.83%, #e5dfec 23.61%, #ece5ee 26.39%, #f0ecf0 29.17%, #f3eff3 31.94%, #f5f5f7 34.72%, #f5f5f8 37.50%, #f6f6f6 40.28%, #f9f9f9 43.06%, #fafafa 45.83%, #fcfcfc 48.61%, #fcfcfc 51.39%, #fafafa 54.17%, #f9f9f9 56.94%, #f6f6f6 59.72%, #f5f5f8 62.50%, #f5f5f8 65.28%, #f2f0f4 68.06%, #efebef 70.83%, #ece5ef 73.61%, #e5e0ed 76.39%, #ddd7e9 79.17%, #ddd4eb 81.94%, #e7e0f1 84.72%, #ece4f4 87.50%, #eee6f6 90.28%, #efeaf3 93.06%, #f2eef6 95.83%, #f9f3f8 98.61%); }
.ttj .sky .a, .ttj .sky .grain { -webkit-mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .97) 60px, rgb(0 0 0 / .85) 140px, rgb(0 0 0 / .58) 240px, rgb(0 0 0 / .3) 340px, rgb(0 0 0 / .1) 420px, transparent 480px); mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .97) 60px, rgb(0 0 0 / .85) 140px, rgb(0 0 0 / .58) 240px, rgb(0 0 0 / .3) 340px, rgb(0 0 0 / .1) 420px, transparent 480px); }
.ttj .sky .b { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .32) 20px, rgb(0 0 0 / .62) 45px, rgb(0 0 0 / .8) 75px, rgb(0 0 0 / .82) 110px, rgb(0 0 0 / .7) 160px, rgb(0 0 0 / .42) 240px, rgb(0 0 0 / .16) 330px, transparent 420px); mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .32) 20px, rgb(0 0 0 / .62) 45px, rgb(0 0 0 / .8) 75px, rgb(0 0 0 / .82) 110px, rgb(0 0 0 / .7) 160px, rgb(0 0 0 / .42) 240px, rgb(0 0 0 / .16) 330px, transparent 420px); }
.ttj .sky .grain { mix-blend-mode: overlay; opacity: var(--grain, .88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 600px) {
  .ttj .sky { height: 440px; --grain: .86; }
  .ttj .sky .a { background: linear-gradient(90deg, #e2b6c0 2.78%, #e8babc 8.33%, #ecc0bb 13.89%, #f0cabf 19.44%, #f4d2c4 25.00%, #f7d8c6 30.56%, #f8dcc8 36.11%, #fadec9 41.67%, #fbdecb 47.22%, #fadfcc 52.78%, #f9ddca 58.33%, #f9dcc8 63.89%, #f8d8c6 69.44%, #f5d2c3 75.00%, #f0cac0 80.56%, #edc1bc 86.11%, #e9bbbc 91.67%, #e2b6bf 97.22%); }
  .ttj .sky .b { background: linear-gradient(90deg, #e7a5a9 2.78%, #edaea5 8.33%, #eeb1a0 13.89%, #efbaa5 19.44%, #f0c1a8 25.00%, #f2c9ab 30.56%, #f2caaa 36.11%, #f8cda8 41.67%, #f8caa8 47.22%, #f7caab 52.78%, #f6c8ab 58.33%, #f3cbab 63.89%, #f2c6ab 69.44%, #f2c3a9 75.00%, #efbaa6 80.56%, #eeb2a3 86.11%, #ecaba3 91.67%, #e4a0a1 97.22%); }
  .ttj .sky .a, .ttj .sky .grain { -webkit-mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .97) 50px, rgb(0 0 0 / .82) 120px, rgb(0 0 0 / .55) 200px, rgb(0 0 0 / .25) 290px, transparent 370px); mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .97) 50px, rgb(0 0 0 / .82) 120px, rgb(0 0 0 / .55) 200px, rgb(0 0 0 / .25) 290px, transparent 370px); }
  .ttj .sky .b { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .3) 18px, rgb(0 0 0 / .6) 40px, rgb(0 0 0 / .78) 65px, rgb(0 0 0 / .8) 95px, rgb(0 0 0 / .66) 140px, rgb(0 0 0 / .38) 210px, rgb(0 0 0 / .12) 290px, transparent 360px); mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .3) 18px, rgb(0 0 0 / .6) 40px, rgb(0 0 0 / .78) 65px, rgb(0 0 0 / .8) 95px, rgb(0 0 0 / .66) 140px, rgb(0 0 0 / .38) 210px, rgb(0 0 0 / .12) 290px, transparent 360px); }
}

/* the sky is alive: two glows breathe and wander at the sides, tinted by the hour on the dial, and the app's cloud
   field drifts across them in two layers that move at different speeds as you scroll. It fades in below the seam,
   so the join with the hero stays exact, and it keeps clear of the middle where the words are. */
.ttj .sky .fx { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 70%, transparent 100%); }
.ttj .glow { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #a8b4ec; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #c8bcee; }
.ttj .sky { transition: --g1 1s var(--e-out), --g2 1s var(--e-out); }
.ttj .g1 { left: -12vw; top: 70px; width: 48vw; height: 470px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g1) 62%, transparent), color-mix(in srgb, var(--g1) 20%, transparent) 60%, transparent); animation: ttj-wanderA 19s ease-in-out infinite alternate, ttj-breatheG 7s ease-in-out infinite; }
.ttj .g2 { right: -12vw; top: 130px; width: 46vw; height: 440px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 58%, transparent), color-mix(in srgb, var(--g2) 18%, transparent) 60%, transparent); animation: ttj-wanderB 23s ease-in-out infinite alternate, ttj-breatheG 8.5s ease-in-out infinite -3s; }
.ttj .g3 { left: 26vw; top: 300px; width: 48vw; height: 260px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 28%, transparent), transparent); animation: ttj-wanderC 29s ease-in-out infinite alternate, ttj-breatheG 9s ease-in-out infinite -5s; }
@keyframes ttj-wanderA { 0% { translate: 0 0; scale: 1; } 50% { translate: 4vw 30px; scale: 1.14; } 100% { translate: -2vw -22px; scale: .92; } }
@keyframes ttj-wanderB { 0% { translate: 0 0; scale: 1.06; } 50% { translate: -4vw -26px; scale: .9; } 100% { translate: 2vw 30px; scale: 1.16; } }
@keyframes ttj-wanderC { 0% { translate: -6vw 0; } 100% { translate: 6vw -20px; } }
@keyframes ttj-breatheG { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.ttj .clouds { position: absolute; inset: 0;   /* the cloud field shows at the sides and keeps clear of the middle */
  -webkit-mask-image: radial-gradient(ellipse 34% 80% at 6% 46%, #000 30%, transparent 100%), radial-gradient(ellipse 34% 80% at 94% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 80% at 6% 46%, #000 30%, transparent 100%), radial-gradient(ellipse 34% 80% at 94% 50%, #000 30%, transparent 100%); }
.ttj .drift { position: absolute; top: 30px; left: 0; width: calc(100% + 960px); height: 500px; background: url("/talk-to-juney/field/cloud_white.webp") repeat-x 0 0 / 960px 100%; opacity: .85; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); animation: ttj-drift 80s linear infinite; }
.ttj .d2 { top: 110px; background-image: url("/talk-to-juney/field/cloud_depth.webp"); background-size: 1200px 100%; width: calc(100% + 1200px); opacity: .6; animation-duration: 130s; animation-name: ttj-drift2; }
@keyframes ttj-drift { to { translate: -960px 0; } }
@keyframes ttj-drift2 { to { translate: -1200px 0; } }
.ttj .demo.is-off .sky *, .ttj .demo.is-off .sky { animation-play-state: paused !important; }
@media (max-width: 600px) { .ttj .g1, .ttj .g2 { width: 80vw; height: 360px; } .ttj .g1 { left: -42vw; } .ttj .g2 { right: -42vw; } .ttj .g3 { left: 10vw; width: 80vw; } .ttj .drift { height: 400px; } .ttj .clouds { -webkit-mask-image: radial-gradient(ellipse 42% 70% at 0% 45%, #000 30%, transparent 100%), radial-gradient(ellipse 42% 70% at 100% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 42% 70% at 0% 45%, #000 30%, transparent 100%), radial-gradient(ellipse 42% 70% at 100% 50%, #000 30%, transparent 100%); } }
@media (prefers-reduced-motion: reduce) { .ttj .glow, .ttj .drift { animation: none !important; } }

/* the module's height always follows what it shows, and glides when that changes */
.ttj .slot { position: relative; width: min(100% - 2 * var(--gutter), 990px); margin: 0 auto; transition: height .5s var(--e-out); }
.ttj .slot.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .ttj .slot { transition: none; } }

/* ── The picker: a looping deck of three cards, symmetric, with plain chevrons outside it ── */
.ttj .picker { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "deck" "note"; justify-items: center; transition: opacity .3s var(--e-out), translate .45s var(--e-out); }
.ttj .slot[data-view="call"] .picker { opacity: 0; translate: 0 10px; pointer-events: none; visibility: hidden; transition: opacity .16s var(--e-out), translate .3s var(--e-out), visibility 0s .3s; }
.ttj .deck-stage { grid-area: deck; position: relative; width: 100%; height: var(--dh, 470px); margin-top: 6px; touch-action: pan-y; outline: none; }
.ttj .dk { position: absolute; left: 50%; top: 0; width: var(--dw, 340px); min-height: var(--ch, 0px); margin-left: calc(var(--dw, 340px) / -2); padding: 16px 22px 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; text-align: center; transform-origin: 50% 85%; will-change: transform; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ttj .dk[data-slot="0"] { cursor: grab; }
.ttj .dk.is-dragging { cursor: grabbing; }
.ttj .dk:not([data-slot="0"]) .cta { pointer-events: none; }
.ttj .dk .cta { transition: background-color .45s var(--e-out), color .45s var(--e-out), box-shadow .45s var(--e-out), transform .2s var(--e-out); }
.ttj .dk:not([data-slot="0"]) .cta { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }   /* only the centre card's button is black */
.ttj .dk[data-slot="2"], .ttj .dk[data-slot="-2"] { pointer-events: none; }
.ttj .dk[data-slot="2"] .gorb *, .ttj .dk[data-slot="-2"] .gorb * { animation-play-state: paused !important; }
.ttj .dk-orbrow { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ttj .dk-orb { position: relative; width: var(--do, 150px); height: var(--do, 150px); flex: none; }
.ttj .dk-orb .orb-host { position: absolute; inset: 0; display: grid; place-items: center; }
.ttj .dk .inc-t { margin: 14px 0 0; font-size: 25px; line-height: 1.12; letter-spacing: -.022em; font-weight: 600; color: var(--ink-strong); text-wrap: balance; }   /* no size transition: animating font-size relaid the title every frame and the cards jittered (TRI-1657, 26 Oct) */
/* the type, shared with 18 Glass (all Inter): a 30px title on the front card, 25px on the neighbours, a 19px caller line, the 50px pill */
.ttj .dk[data-slot="0"] .inc-t, .ttj .deck-stage.measure .dk .inc-t { font-size: 30px; line-height: 1.08; letter-spacing: -.03em; }
.ttj .dk .inc-b { margin: 4px 0 0; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.ttj .dk .inc-line { margin: 12px 0 auto; padding-bottom: 22px; font-size: 19px; line-height: 1.32; letter-spacing: -.012em; font-weight: 500; color: var(--ink-strong); text-wrap: balance; }   /* cards hug their content: 22px from the quote to Call Juney */
.ttj .dk .cta { height: 50px; border-radius: 99px; font-size: 15.5px; font-weight: 500; }
.ttj .dk[data-slot="0"] .cta { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 10px 22px -12px rgb(14 14 16 / .6); }
.ttj .cc .cc-head .mono { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }   /* in a call: 18's eyebrow and title */
.ttj .cc .cc-title { margin: 4px 0 0; font-size: 25px; line-height: 1.12; letter-spacing: -.022em; font-weight: 600; color: var(--ink-strong); }
.ttj .dk .act-row { width: 100%; margin-top: 0; }
.ttj .dk:focus-visible { outline: 2px solid var(--juney-accent-ink); outline-offset: 4px; }
.ttj .arr { appearance: none; border: 0; cursor: pointer; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .7); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); transition: transform .2s var(--e-out), background-color .2s, color .2s; }
.ttj .arr:hover { background: #fff; color: var(--ink-strong); }
.ttj .arr:active { transform: scale(.92); }
.ttj .arr svg { width: 18px; height: 18px; }
.ttj .m-arr { display: none; }
.ttj .d-arr { position: absolute; z-index: 40; top: calc(var(--dh, 470px) / 2); translate: 0 -50%; }
.ttj .d-arr[data-act="prev"] { left: calc(50% - var(--dw, 340px) * 1.24 - 94px); }   /* clear of the side card by about 16px (Andrew: the arrows sit just outside the cards) */
.ttj .d-arr[data-act="next"] { right: calc(50% - var(--dw, 340px) * 1.24 - 94px); }
.ttj .pk-note { grid-area: note; margin: 11px 0 0; font-size: .9375rem; color: var(--ink-3); text-align: center; text-wrap: balance; }
.ttj .cap-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .ttj .cap-fine { display: inline; } .ttj .cap-touch { display: none; } }
.ttj .demo { overflow: clip; overflow-clip-margin: 64px; }   /* the sky's overhang sat under the opaque page below anyway; clipping it spares that page a 17M px layer */
.ttj .orb-host { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

/* Juney's glass orb is the kit component (kit/glass-orb): GlassOrb.mount(el, { size, tint }). Motion lives inside it. */
.ttj .demo.is-off .gorb *, .ttj .panel-layer[inert] .gorb *, .ttj .dock:not([data-place="docked"]):not([data-place="open"]) .gorb * { animation-play-state: paused !important; }

/* the card text: industry, business, the caller's line, one button */
.ttj .inc { grid-area: card; position: relative; width: min(100%, 440px); margin-top: 4px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.ttj .inc-body { display: grid; }
.ttj .inc-layer { grid-area: 1 / 1; transition: opacity .3s var(--e-out), translate .45s var(--e-out), filter .3s var(--e-out); }
.ttj .inc-layer.out { opacity: 0; translate: 0 -6px; filter: blur(3px); }
.ttj .inc-layer.in { opacity: 0; translate: 0 6px; filter: blur(3px); transition: none; }
.ttj .inc-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.ttj .tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-2); }
.ttj .tile svg { width: 18px; height: 18px; }
.ttj .inc-t { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.022em; color: var(--ink-strong); line-height: 1.15; }
.ttj .inc-b { margin: 4px 0 0; font-size: .9375rem; color: var(--ink-3); line-height: 1.3; }
.ttj .inc-line { margin: 14px 0 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; color: var(--ink-strong); text-wrap: balance; }
.ttj .act-row { display: grid; margin-top: 22px; }
.ttj .cta, .ttj .btn2 { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; min-width: 0; border-radius: 999px; font: 500 1rem/1 var(--font-site); white-space: nowrap; transition: background-color .2s, border-color .2s, transform .25s var(--e-out); }
.ttj .cta { border: 0; background: var(--ink); color: #fff; }
.ttj .cta:hover { background: #000; }
.ttj .btn2 { border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.ttj .btn2:hover { background: var(--panel); border-color: rgb(30 29 28 / .22); }
.ttj .cta:active, .ttj .btn2:active { transform: scale(.98); }
.ttj .cta svg, .ttj .btn2 svg { width: 18px; height: 18px; flex: none; }

/* the proof chip (the site's audience-card chip): waiting as the goal, then landing when Juney does it */
.ttj .proof { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem .75rem .75rem; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px -16px rgb(30 29 28 / .4), 0 0 0 1px var(--line); text-align: left; }
.ttj .proof-icon { position: relative; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 10px; display: grid; place-items: center; background: var(--juney-accent-soft); color: var(--juney-accent-ink); transition: background-color .4s var(--e-out), color .4s; }
.ttj .proof-icon svg { width: 15px; height: 15px; }
.ttj .proof-icon .ic { display: grid; place-items: center; }
.ttj .proof-icon .ck { position: absolute; opacity: 0; }
.ttj .proof-txt { display: grid; min-width: 0; line-height: 1.3; }
.ttj .proof small { font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ttj .proof strong { font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttj .proof em { font-size: .75rem; font-style: normal; color: var(--ink-3); }
.ttj .goal[data-landed="false"] .proof { box-shadow: none; background: rgb(255 255 255 / .5); outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.ttj .goal[data-landed="false"] .proof-txt, .ttj .goal[data-landed="false"] .proof-icon { opacity: .62; }
.ttj .goal[data-landed="true"] .proof-icon { background: var(--green-soft); color: var(--green); }
.ttj .goal[data-landed="true"] .proof-icon .ic { opacity: 0; }
.ttj .goal[data-landed="true"] .proof-icon .ck { opacity: 1; }
.ttj .goal[data-landed="true"] .proof-icon .ck path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.ttj .goal.is-landing .proof { animation: ttj-settle .9s var(--e-out) both; }
.ttj .goal.is-landing .proof-icon .ck path { animation: ttj-draw .5s .25s var(--e-out) both; }
@keyframes ttj-settle { 0% { transform: translateY(-14px) scale(1.06); box-shadow: 0 30px 50px -18px rgb(30 29 28 / .45), 0 0 0 1px var(--line); } 45% { transform: translateY(2px) scale(.985); } 70% { transform: translateY(-1px) scale(1.004); } 100% { transform: none; } }
@keyframes ttj-draw { from { stroke-dashoffset: 24; } }
.ttj .goal-cap { margin: 0 0 8px; display: flex; gap: 6px; justify-content: center; }
.ttj .goal-cap .post { display: none; color: var(--green); }
.ttj .goal[data-landed="true"] .goal-cap .pre { display: none; }
.ttj .goal[data-landed="true"] .goal-cap .post { display: inline; }

/* ── The call card (in the page, and the dock's panel) ───────────────────── */
.ttj .card-slot { position: absolute; left: 50%; top: 0; translate: -50% 0; width: var(--cw, 470px); visibility: hidden; }
.ttj .slot[data-view="call"] .card-slot { visibility: visible; }
.ttj .cc { position: relative; display: flex; flex-direction: column; padding: 20px 22px 18px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); color: var(--ink); }
.ttj .cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ttj .cc-title { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; color: var(--ink-strong); }
.ttj .cc-x { appearance: none; border: 0; background: var(--panel); cursor: pointer; width: 40px; height: 40px; margin: -4px -6px 0 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: background-color .2s; }
.ttj .cc-x:hover { background: var(--panel-2); color: var(--ink-strong); }
.ttj .cc-x svg { width: 17px; height: 17px; }
.ttj .cc-x .x-min { display: none; }
.ttj .cc-orb { position: relative; align-self: center; width: var(--co, 160px); height: var(--co, 160px); margin-top: 8px; transition: width .62s cubic-bezier(.2, 1.12, .32, 1), height .62s cubic-bezier(.2, 1.12, .32, 1); }
.ttj .card-slot .cc[data-mode="text"] .cc-orb { --co: 104px; }   /* typing: the orb steps back so the conversation has the room */
.ttj .panel-layer .cc-orb { --co: 96px; margin-top: 8px; transition: width .62s cubic-bezier(.2, 1.12, .32, 1), height .62s cubic-bezier(.2, 1.12, .32, 1); }   /* sized by fitTx; she stays up top, under the title (30 Oct) */
.ttj .cc-orb .orb-host { position: absolute; inset: 0; }
.ttj .cc-orb .g-pool, .ttj .pill-orb .g-pool, .ttj .hs-orb .g-pool { display: none; }   /* no caustic under the small orbs: it would sit on the words */
.ttj .cc .cc-state { margin-top: 10px; }

.ttj .cc-state { margin: 0; align-self: center; display: flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 20px; }
.ttj .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgb(21 115 50 / .14); }
.ttj .cc[data-sub="connecting"] .live-dot, .ttj .cc[data-sub="ended"] .live-dot, .ttj .cc[data-sub="error"] .live-dot, .ttj .cc[data-mode="text"] .live-dot { display: none; }
.ttj .cc-space { flex: 1; min-height: 12px; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 10px 0 12px; overflow: hidden; }
.ttj .cc-brief:empty { display: none; }
.ttj .cc-brief { margin: 0; max-width: 18rem; font-size: .875rem; color: var(--ink-3); text-align: center; text-wrap: balance; }
.ttj .goal { width: 100%; max-width: 320px; }
.ttj .cc .goal[data-landed="false"] { display: none; }   /* the outcome appears only when she does it */
.ttj .cc[data-mode="text"] .cc-space { flex: none; padding: 10px 0 2px; }
.ttj .cc[data-sub="error"] .cc-space > * { display: none; }   /* no hole where the brief was */
.ttj .cc[data-sub="connecting"] .goal { visibility: hidden; }
.ttj .cc[data-mode="text"] .cc-brief, .ttj .cc[data-mode="text"] .goal[data-landed="false"] { display: none; }
.ttj .cc[data-mode="text"] .goal-cap { display: none; }

/* the transcript: the last few turns as a short conversation. Juney on the left on the warm panel, with her tiny orb;
   you on the right in a soft periwinkle bubble. Her line now is full ink; earlier lines step back but stay readable. */
.ttj .cc-tx { flex: none; display: flex; flex-direction: column; min-height: 0; }
.ttj .tx-head { display: none; }
.ttj .tx-list { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 64px; }
.ttj .tx-msg { display: block; max-width: 88%; animation: ttj-msgin .45s var(--e-out) both; }
@keyframes ttj-msgin { from { opacity: 0; translate: 0 6px; } }
.ttj .tx-msg[data-role="juney"] { align-self: flex-start; }
.ttj .tx-msg[data-role="you"] { align-self: flex-end; }
.ttj .tx-who { display: flex; align-items: center; gap: 6px; margin: 0 0 5px 2px; font-size: .75rem; font-weight: 500; line-height: 1; color: var(--ink-3); }
.ttj .tx-msg[data-role="you"] .tx-who { justify-content: flex-end; margin: 0 2px 5px 0; }
.ttj .mo { flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(34% 26% at 36% 28%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 100%), radial-gradient(42% 36% at 50% 66%, rgb(255 226 186 / .95), rgb(255 190 120 / 0) 100%), linear-gradient(180deg, var(--c, #d3dcf6), var(--b, #94a8e6) 54%, var(--a, #6f88d6));
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .8), 0 1px 3px rgb(var(--tint, 111 136 214) / .55); }
.ttj .tx-text { margin: 0; padding: 10px 14px 11px; border-radius: 18px; font-size: .97rem; line-height: 1.45; text-wrap: pretty; }
.ttj .tx-msg[data-role="juney"] .tx-text { background: var(--panel); color: var(--ink-2); border-top-left-radius: 6px; }
.ttj .tx-msg[data-role="you"] .tx-text { background: var(--juney-accent-soft); color: var(--juney-accent-ink); border-top-right-radius: 6px; }
.ttj .tx-msg.is-last[data-role="juney"] .tx-text { color: var(--ink-strong); }
.ttj .typing { display: none; align-self: flex-start; gap: 5px; padding: 13px 15px; border-radius: 18px; border-top-left-radius: 6px; background: var(--panel); }
.ttj .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: ttj-tdot 1.1s ease-in-out infinite; }
.ttj .typing i:nth-child(2) { animation-delay: .14s; } .ttj .typing i:nth-child(3) { animation-delay: .28s; }
@keyframes ttj-tdot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.ttj .tx-list[data-typing="true"] .typing { display: flex; }
.ttj .tx-empty { margin: 0; align-self: flex-start; padding: 10px 14px 11px; border-radius: 18px; border-top-left-radius: 6px; background: var(--panel); font-size: .9375rem; color: var(--ink-3); }
.ttj .tx-list:has(.tx-msg) .tx-empty, .ttj .cc[data-sub="error"] .tx-empty { display: none; }
.ttj .tx-err { display: none; margin: 0; align-self: flex-start; padding: 10px 14px 11px; border-radius: 18px; border-top-left-radius: 6px; background: var(--panel); font-size: .97rem; line-height: 1.5; color: var(--ink-strong); }
.ttj .cc[data-sub="error"] .tx-err { display: block; }
.ttj .cc[data-sub="error"] .tx-list { display: none; }
.ttj .cc[data-mode="text"] .tx-list { padding: 10px 0 2px; }
.ttj .tx-note { display: none; align-self: center; font-size: .75rem; color: var(--ink-3); }
.ttj .cc[data-mode="text"] .tx-note { display: block; }

.ttj .cc-chips { flex: none; margin-top: 14px; }
.ttj .chips-cap { margin: 0 0 8px 2px; display: flex; align-items: center; gap: 6px; }
.ttj .chips-cap svg { width: 13px; height: 13px; color: var(--juney-accent-ink); }
.ttj .cc[data-mode="text"] .chips-cap { display: none; }
.ttj .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ttj .chip { appearance: none; cursor: pointer; flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); font: 500 .9rem/1.2 var(--font-site); white-space: nowrap; transition: background-color .2s, border-color .2s, transform .25s var(--e-out), opacity .3s; }
.ttj .chip svg { width: 14px; height: 14px; color: var(--juney-accent-ink); }
.ttj .chip:hover { border-color: var(--juney-periwinkle); }
.ttj .chip:active { transform: scale(.96); }
.ttj .chip[aria-disabled="true"] { opacity: .42; pointer-events: none; }
.ttj .chip.is-said { background: var(--juney-accent-soft); border-color: var(--juney-periwinkle); }
.ttj .cc-compose { display: none; flex: none; margin-top: 10px; align-items: center; gap: 6px; height: 52px; padding: 4px 4px 4px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); }
.ttj .cc[data-mode="text"] .cc-compose { display: flex; }
.ttj .cc-compose:focus-within { border-color: var(--juney-lantern); box-shadow: 0 0 0 3px rgb(143 163 242 / .25); }
.ttj .cc-compose input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: none; font: 400 16px/1 var(--font-site); color: var(--ink-strong); }
.ttj .cc-compose input::placeholder { color: var(--ink-faint); }
.ttj .send { appearance: none; border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.ttj .send:disabled { background: var(--panel-2); color: var(--ink-faint); cursor: default; }
.ttj .send svg { width: 18px; height: 18px; }
.ttj .cc-foot { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 16px; }
.ttj .qbtn { appearance: none; border: 0; cursor: pointer; height: 44px; min-width: 96px; padding: 0 16px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--panel); color: var(--ink-2); font: 500 .875rem/1 var(--font-site); transition: background-color .2s, color .2s; }
.ttj .qbtn:hover { background: var(--panel-2); color: var(--ink-strong); }
.ttj .qbtn svg { width: 17px; height: 17px; flex: none; }
.ttj .cc-mute { justify-self: end; }
.ttj .cc-mute[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ttj .mic-off { display: none; }
.ttj [aria-pressed="true"] .mic-on { display: none; }
.ttj [aria-pressed="true"] .mic-off { display: block; }
.ttj .cc-end { appearance: none; border: 0; cursor: pointer; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--end); color: #fff; box-shadow: 0 12px 24px -12px rgb(224 68 58 / .8); transition: transform .25s var(--e-out), background-color .2s; }
.ttj .cc-end:hover { background: #ea5448; }
.ttj .cc-end:active { transform: scale(.93); }
.ttj .cc-end svg { width: 25px; height: 25px; }
.ttj .cc-type { justify-self: start; }
.ttj .cc-type .i-talk, .ttj .cc[data-mode="text"] .cc-type .i-type { display: none; }
.ttj .cc[data-mode="text"] .cc-type .i-talk { display: block; }
.ttj .cc[data-mode="text"] .cc-foot { grid-template-columns: 1fr; }
.ttj .cc[data-mode="text"] .cc-mute, .ttj .cc[data-mode="text"] .cc-end { display: none; }
.ttj .cc[data-mode="text"] .cc-type { justify-self: center; }
.ttj .cc-ended { display: none; flex: none; margin-top: 14px; min-height: 64px; align-items: center; justify-content: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.ttj .cc-ended .link { appearance: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: .9375rem; }
.ttj .cc-ended .link.ghost { background: var(--panel); color: var(--ink); }
.ttj .cc[data-sub="ended"] .cc-foot, .ttj .cc[data-sub="error"] .cc-foot, .ttj .cc[data-sub="ended"] .cc-chips, .ttj .cc[data-sub="error"] .cc-chips, .ttj .cc[data-sub="ended"] .cc-compose { display: none; }
.ttj .cc[data-sub="ended"] .cc-ended, .ttj .cc[data-sub="error"] .cc-ended { display: flex; }
.ttj .cc[data-sub="connecting"] .cc-chips { opacity: .45; pointer-events: none; }
.ttj .cc .on-err { display: none; }
.ttj .cc[data-sub="error"] .on-err { display: inline-flex; align-items: center; }
.ttj .cc[data-sub="error"] .on-end { display: none; }
.ttj .cc.is-entering > * { animation: ttj-rise .55s var(--e-out) both; }
.ttj .cc.is-entering > :nth-child(3), .ttj .cc.is-entering > :nth-child(4) { animation-delay: .05s; } .ttj .cc.is-entering > :nth-child(5) { animation-delay: .1s; } .ttj .cc.is-entering > :nth-child(n+6) { animation-delay: .15s; }
@keyframes ttj-rise { from { opacity: 0; translate: 0 8px; } }

.ttj .morph { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; visibility: hidden; }
.ttj .morph .m-card { position: absolute; inset: 0; border-radius: 24px; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.ttj .morph .m-orb { position: absolute; left: 0; top: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .85), 0 14px 30px -16px rgb(60 60 120 / .5); }

@media (max-width: 960px) {
  .ttj .d-arr { display: none; }
  /* phones, two takes. A (default): a stack. The next two calls sit under the front card, smaller, their tinted
     bottoms peeking out 10px and 20px below it, like a deck you could flick through. B (?stack=fan): the neighbours
     fan out to the sides, tinted, with the top of their orb showing faintly in the sliver. Either way nothing rises
     above the front card, and only the front card shows words and a button. */
  .ttj .dk { transform-origin: 50% 50%; }
  html[data-ttj-stack="stack"] .ttj .dk { transform-origin: 50% 100%; }
  .ttj .dk::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--edge, #fff); opacity: 0; transition: opacity .3s var(--e-out); pointer-events: none; }
  html[data-ttj-stack="fan"] .ttj .dk:not([data-slot="0"])::before, html[data-ttj-stack="stack"] .ttj .dk:is([data-depth="1"], [data-depth="2"])::before { opacity: 1; transition-duration: .16s; }
  .ttj .dk :is(.dk-orb, .inc-t, .inc-b, .inc-line, .act-row) { transition: opacity .28s var(--e-out) .04s, translate .45s var(--e-out); }
  .ttj .dk:not([data-slot="0"]) :is(.dk-orb, .inc-t, .inc-b, .inc-line, .act-row) { opacity: 0; transition-duration: .06s, .45s; transition-delay: 0s; }   /* gone before the new front card has moved off it */
  html[data-ttj-stack="fan"] .ttj .dk[data-slot="-1"] .dk-orb { opacity: .5; translate: calc(var(--do) / 2 + 6px - var(--dw) / 2) 0; }   /* B: the orb slides out into the visible edge */
  html[data-ttj-stack="fan"] .ttj .dk[data-slot="1"] .dk-orb { opacity: .5; translate: calc(var(--dw) / 2 - var(--do) / 2 - 6px) 0; }
  .ttj .dk[data-slot="0"] .m-arr { display: grid; }
  .ttj .dk { padding: 14px 12px 18px; }
  .ttj .dk-orbrow { gap: 12px; }
  .ttj .pk-note { margin-top: 8px; }   /* the instruction sits about 22px under the stack */
}
@media (max-width: 600px) {
  .ttj .demo { padding-bottom: 44px; }
  .ttj .inc { padding: 16px 16px 16px; border-radius: 22px; }
  .ttj .tile { width: 36px; height: 36px; border-radius: 11px; }
  .ttj .inc-head { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; }
  .ttj .inc-t { font-size: 1.3125rem; }
  .ttj .inc-b { font-size: .9375rem; }
  .ttj .inc-line { margin-top: 10px; font-size: 1.125rem; }
  .ttj .act-row { margin-top: 20px; }
  .ttj .cta, .ttj .btn2 { height: 48px; font-size: .9375rem; gap: 8px; }
  .ttj .cc { padding: 18px 18px 16px; border-radius: 22px; }
  .ttj .cc-orb { --co: 120px; margin-top: 6px; }
  .ttj .card-slot .cc[data-mode="text"] .cc-orb { --co: 84px; }
  .ttj .qbtn { min-width: 84px; padding: 0 14px 0 12px; }
}

/* ── The demo call in progress: when a hero demo call is live and you scroll away, it carries on in a small strip
      stacked above the Juney launcher, with its orb, name and timer, Return to scroll back, and End ── */
.ttj .hstrip { position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 7px 0 8px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); white-space: nowrap; pointer-events: auto;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--e-out), transform .35s var(--e-out), visibility 0s .35s; }
.ttj .dock[data-hcall="true"][data-place="docked"] .hstrip, .ttj .dock[data-hcall="true"][data-place="open"] .hstrip { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--e-out), transform .5s var(--e-out), visibility 0s; }
/* One bar at a time (Andrew, 22 Oct: two Juney bars stacked): while a demo call is live and you've scrolled away, its strip
   takes the ask bar's place, and the bar and its questions step aside until the call ends */
.ttj .dock[data-hcall="true"][data-place="docked"] .hstrip { bottom: 0; }
.ttj .dock[data-hcall="true"][data-place="docked"] .dk-shell { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--e-out), visibility 0s .2s; }
.ttj .dock[data-hcall="true"][data-place="docked"] .dock-qs { display: none !important; }
@media (max-width: 600px) { .ttj .dock[data-hcall="true"][data-place="docked"] .hstrip { left: 0; width: auto; } .ttj .dock[data-hcall="true"][data-place="docked"] .hs-txt { flex: 1; } .ttj .dock[data-hcall="true"][data-place="docked"] .hs-txt b { max-width: none; } }   /* on phones it spans the bar's width, so the business name fits */
.ttj .hs-orb { position: relative; flex: none; width: 40px; height: 40px; }
.ttj .hs-txt { display: grid; min-width: 0; line-height: 1.25; padding-right: 4px; }
.ttj .hs-txt b { max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; font-weight: 600; color: var(--ink-strong); }
.ttj .hs-txt small { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ttj .hs-btn { appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--panel); color: var(--ink); font: 500 .875rem/1 var(--font-site); }
.ttj .hs-btn:hover { background: var(--panel-2); }
.ttj .hs-end { appearance: none; border: 0; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--end); color: #fff; }
.ttj .hs-end:hover { background: #ea5448; }
.ttj .hs-end svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .ttj .dock[data-place="open"] .hstrip { visibility: hidden; opacity: 0; } .ttj .hs-txt b { max-width: 130px; } }

/* ── The dock ────────────────────────────────────────────────────────────── */
.ttj .dock { position: fixed; z-index: 60; right: 24px; bottom: 24px; visibility: hidden; pointer-events: none; }
.ttj .dock[data-place="hidden"] .hstrip { visibility: hidden !important; }
.ttj .dock[data-place="docked"], .ttj .dock[data-place="open"], .ttj .dock[data-place="leaving"] { visibility: visible; }
.ttj .dock[data-hide="true"][data-pill="idle"]:not([data-place="open"]):not([data-hcall="true"]) { visibility: hidden; }
.ttj .dk-shell { position: relative; width: 196px; height: 52px; border-radius: 26px; overflow: hidden; pointer-events: auto; transform-origin: 100% 100%; background: #fff; box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.ttj .dock[data-place="leaving"] .dk-shell { pointer-events: none; }
.ttj .pill-layer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--pill-h, 52px); display: flex; align-items: center; gap: 4px; padding: 0 7px 0 5px; }
.ttj .pill-main { appearance: none; border: 0; background: none; cursor: pointer; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 6px 0 0; text-align: left; border-radius: 999px; }
.ttj .pill-orb { flex: none; width: 44px; height: 44px; position: relative; }

.ttj .pill-text { position: relative; flex: 1; min-width: 0; height: 38px; }
.ttj .pt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; white-space: nowrap; opacity: 0; translate: 0 5px; transition: opacity .2s var(--e-out), translate .35s var(--e-out); }
.ttj .pt > * { overflow: hidden; text-overflow: ellipsis; }
.ttj .dock[data-pill="idle"] .pt-idle, .ttj .dock[data-pill="call"] .pt-call, .ttj .dock[data-pill="ended"] .pt-ended { opacity: 1; translate: 0 0; transition-delay: .06s; }
.ttj .pt-idle { font-size: .9375rem; font-weight: 500; color: var(--ink-strong); }
.ttj .pt b { font-size: .875rem; font-weight: 600; color: var(--ink-strong); }
.ttj .pt small { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ttj .pill-meter { flex: none; display: flex; align-items: center; gap: 2px; height: 18px; width: 26px; color: var(--ink-faint); }
.ttj .pill-meter i { flex: none; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.2); }
.ttj .pill-meter[data-who="juney"] { color: var(--ink); }
.ttj .pill-meter[data-who="you"] { color: var(--juney-lantern); }
.ttj .pill-btn { appearance: none; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); transition: background-color .2s, color .2s; }
.ttj .pill-btn:hover { background: var(--panel); color: var(--ink-strong); }
.ttj .pill-btn svg { width: 18px; height: 18px; }
.ttj .pill-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ttj .pill-end { background: var(--end); color: #fff; }
.ttj .pill-end:hover { background: #ea5448; color: #fff; }
.ttj .pill-meter, .ttj .pill-btn { display: none; }
.ttj .dock[data-pill="call"] .pill-meter { display: flex; }
.ttj .dock[data-pill="call"] .pill-btn { display: grid; }
.ttj .dock[data-pill="call"][data-mode="text"] .pill-meter, .ttj .dock[data-pill="call"][data-mode="text"] .js-mute { display: none; }
.ttj .dock[data-folded="true"] .pill-text { opacity: 0; }
.ttj .dock[data-pill="idle"] .pill-orb { width: 42px; height: 42px; }

.ttj .panel-layer { position: absolute; right: 0; bottom: 0; width: var(--pw, 544px); height: var(--ph, 780px); display: flex; flex-direction: column; }
.ttj .panel-layer .cc { flex: 1; min-height: 0; height: auto; border-radius: 0; box-shadow: none; background: none; padding-top: 18px; }
.ttj .panel-layer .cc-x .x-close { display: none; }
.ttj .panel-layer .cc-x .x-min { display: block; }
.ttj .panel-layer .cc .cc-space { flex: none; min-height: 12px; padding: 4px 0 10px; }
.ttj .panel-layer .cc .cc-brief { display: none; }
.ttj .panel-layer .cc .goal[data-landed="false"] { display: none; }
.ttj .panel-layer .cc .cc-tx { flex: 1; min-height: 0; }
.ttj .panel-layer .cc .tx-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: none; gap: 10px; padding-top: 14px; }   /* every turn stays and scrolls (30 Oct) */
.ttj :is(.panel-layer, .card-slot) .cc .tx-list::before { content: ""; position: sticky; z-index: 1; flex: none; height: 16px; background: linear-gradient(#fff, rgb(255 255 255 / 0)); pointer-events: none; }   /* the fade over lines that have scrolled up (30 Oct): a sticky white wash, not a mask, which made Chrome repaint the whole transcript on every scroll frame. Chrome sticks it inside the list's top padding, so top and margin-top pull it back to the edge by that padding; margin-bottom gives back its 16px and the 10px gap */
.ttj .panel-layer .cc .tx-list::before { top: -14px; margin: -14px 0 -12px; }
.ttj .card-slot .cc .tx-list::before { top: -16px; margin: -16px 0 -10px; }
.ttj .card-slot .cc .cc-head { position: relative; z-index: 2; }   /* her orb's glow stays over the fade, not cut flat by it */
.ttj .panel-layer:not([data-tight="false"]) .cc-kick { display: none; }   /* a short screen: the title alone */
.ttj .panel-layer[data-tight="very"] :is(.cc-chips, .cc-orb, .cc-space) { display: none; }   /* a very short one (under 560, e.g. a phone on its side): the transcript keeps the chips' and the orb's room; the status line still says who's talking, and typing still works */
.ttj .panel-layer .cc .tx-list::-webkit-scrollbar { display: none; }
.ttj .panel-layer .chips { flex-wrap: nowrap; overflow: hidden; margin: -5px -22px; padding: 5px 22px; }   /* one row of whole chips (30 Oct): fitTx hides any that wouldn't fit, so the transcript keeps the room three stacked chips took; the 5px keeps the focus ring */
.ttj .panel-layer .chips .chip { flex: none; }
@media (max-width: 600px) { .ttj .panel-layer .chips { margin: -5px -18px; padding: 5px 18px; } }
.ttj .pn-grab { display: none; }
.ttj .pn-idle { display: none; position: relative; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 28px 28px; }
.ttj .panel-layer[data-session="idle"] .pn-idle { display: flex; }
.ttj .panel-layer[data-session="idle"] .cc { display: none; }
.ttj .pn-min { position: absolute; top: 16px; right: 16px; margin: 0; }
.ttj .pn-orb { position: relative; width: 140px; height: 140px; margin-bottom: 22px; }
.ttj .pn-idle .inc-line { margin-bottom: 22px; }
.ttj .pn-call { width: 100%; max-width: 300px; }
.ttj .scrim { position: fixed; inset: 0; z-index: 59; background: rgb(14 14 16 / .34); opacity: 0; visibility: hidden; transition: opacity .3s var(--e-out), visibility 0s .3s; }
.ttj .rest { position: relative; }
.ttj .closing-mark { position: absolute; left: 0; right: 0; top: 90.5%; bottom: 0; pointer-events: none; }
.ttj .dock-spacer { height: calc(88px + env(safe-area-inset-bottom)); }
.ttj #safe { position: fixed; top: 0; left: 0; width: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); visibility: hidden; pointer-events: none; }
@media (max-width: 600px) {
  .ttj .dock { right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ttj .panel-layer { right: auto; left: 50%; translate: -50% 0; }
  .ttj .closing-mark { top: 88.4%; }
  .ttj .pn-grab { display: block; flex: none; width: 40px; height: 5px; margin: 8px auto -4px; border-radius: 3px; background: var(--line-2); }
  .ttj .dock[data-place="open"] ~ .scrim { opacity: 1; visibility: visible; transition: opacity .3s var(--e-out); }
}
@media (prefers-reduced-motion: reduce) {
  .ttj .w, .ttj .typing i, .ttj .cc.is-entering > *, .ttj .goal.is-landing .proof, .ttj .goal.is-landing .proof-icon .ck path { animation: none !important; }
  .ttj .inc-layer { transition: opacity .15s linear !important; translate: none !important; filter: none !important; }
  .ttj .picker { transition: opacity .15s linear !important; translate: none !important; }
}


/* Accent flag (Andrew, 23 Oct): the demo agents speak with different accents, so each card and call says which one */
.ttj .acc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; }
.ttj .acc i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.ttj .acc[data-acc="au"] i { background-image: url("/talk-to-juney/flags/au.svg"); }
.ttj .acc[data-acc="us"] i { background-image: url("/talk-to-juney/flags/us.svg"); }
.ttj .acc[data-acc="gb"] i { background-image: url("/talk-to-juney/flags/gb.svg"); }
.ttj .dk > .acc { position: absolute; top: 14px; right: 14px; z-index: 2; }
.ttj .dk:is([data-slot="-1"], [data-slot="-2"]) > .acc { right: auto; left: 14px; }   /* a left-hand card's right corner is under the centre card: its flag sits on the outer corner */
.ttj .cc-kick { display: flex; align-items: center; gap: 8px; margin: 0; }
.ttj .cc-kick .acc { height: 20px; letter-spacing: .06em; }

/* The cards invite a click (pointer devices): the card lifts 4px with a deeper shadow, its orb breathes and Call Juney
   glows in time. Side cards lift too. Keyboard focus gets the lift. No rings, no bounce; reduced motion keeps the lift only. */
@media (hover: hover) and (pointer: fine) {
  .ttj .dk { transition: padding .45s var(--e-out), width .45s var(--e-out), margin-left .45s var(--e-out), translate .32s var(--e-out), box-shadow .32s var(--e-out); }
  .ttj .slot[data-view="pick"] .dk:is(:hover, :has(:focus-visible)), .ttj .slot[data-view="pick"] .deck-stage:focus-visible .dk[data-slot="0"] { translate: 0 -4px; box-shadow: var(--shadow-float), 0 0 0 1px var(--line), 0 26px 44px -24px rgb(40 36 90 / .5); }
  .ttj .slot[data-view="pick"] .dk:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }   /* 30 Oct: the lift moved the card's bottom edge off a pointer resting there, it dropped back under it and lifted again, ~10 times a second (Andrew: "flashing and jittering like crazy"); this strip keeps the spot it left hovered */
  .ttj .dk:not([data-slot="0"]) { cursor: pointer; }
  .ttj .slot[data-view="pick"] .dk[data-slot="0"]:hover .dk-orb { animation: ttj-dk-breathe 1.6s ease-in-out infinite; }
  .ttj .slot[data-view="pick"] .dk[data-slot="0"]:hover .cta::after { animation: ttj-dk-glow 1.6s ease-in-out infinite; }
}
@keyframes ttj-dk-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes ttj-dk-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.ttj .dk .cta { position: relative; }
.ttj .dk .cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 24px 3px rgb(143 163 242 / .55); opacity: 0; pointer-events: none; }   /* only opacity animates: no repaint of a shadow per frame */
@media (prefers-reduced-motion: reduce) { .ttj .dk :is(.dk-orb, .cta) { animation: none !important; } .ttj .dk .cta::after { animation: none !important; } }
/* (the sky’s last-140px fade to white now lives in each sky layer, so the sky needs no mask surface of its own) */

/* A live call has no reply chips and no outcome card: you just talk, and her own words are the payoff. After her greeting
   one quiet line suggests what to say; then the stand-in mic plays the caller until the call reaches its point. */
.ttj .card-slot .cc-chips { display: none !important; }
.ttj .cc .goal { display: none !important; }
.ttj .card-slot .cc .cc-space { flex: none; min-height: 0; padding: 0; }   /* 30 Oct: it only holds its brief when shown; empty, it took half the spare room, so her first line sat low under a hole */
.ttj .tx-hint { align-self: flex-start; display: flex; align-items: center; gap: 6px; margin: 0 0 0 2px; font-size: .8125rem; line-height: 1.35; color: var(--ink-3); animation: ttj-msgin .45s var(--e-out) both; transition: opacity .3s var(--e-out); }
.ttj .tx-hint svg { flex: none; width: 13px; height: 13px; }
.ttj .tx-hint.is-gone { opacity: 0; }

/* Desktop: the side cards still tuck behind the centre card, like a deck. Inside each, the edge under the centre card gets
   extra padding (the overlap plus 12px), so its orb, words and full-width white button sit in the part you can see. */
@media (min-width: 961px) {
  .ttj .deck-stage { --pin: 72px; --grow: 16px; }
  .ttj .dk { transition: padding .45s var(--e-out), width .45s var(--e-out), margin-left .45s var(--e-out), translate .32s var(--e-out), box-shadow .32s var(--e-out); }
  .ttj .dk[data-slot="1"] { width: calc(var(--dw) + var(--grow)); padding-left: var(--pin); padding-right: 30px; }   /* a touch wider outward, the overlap unchanged */
  .ttj .dk[data-slot="-1"] { width: calc(var(--dw) + var(--grow)); margin-left: calc(var(--dw) / -2 - var(--grow)); padding-right: var(--pin); padding-left: 30px; }
  .ttj .dk:not([data-slot="0"]) .inc-line { font-size: 17px; }
  .ttj .deck-stage.measure .dk { width: var(--dw); margin-left: calc(var(--dw) / -2); padding-left: 22px; padding-right: 22px; }
  .ttj .deck-stage.measure .dk .inc-line { font-size: 19px; }
  .ttj .dk .g-glow { transition: inset .45s var(--e-out); }
  .ttj .dk:not([data-slot="0"]) .g-glow { inset: -46%; }   /* a side orb's glow fades out before the centre card's edge, never stopping at it */
}

/* The corner keeps suggested questions: live, a tap sends the question to the Ask Juney agent as a typed message.
   Before a call, four sit under Call Juney; during one, two or three follow-ups sit under the transcript. */
.ttj .panel-layer .chips-cap { display: none; }
.ttj .pn-or { margin: 20px 0 10px; font-size: .8125rem; color: var(--ink-3); }
.ttj .pn-qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 330px; }
.ttj .pn-qs .chip { min-height: 40px; font-size: .875rem; }
/* The docked ask bar: Juney's orb, a field, a mic that calls her and a send. Four questions rise above it on hover or focus. */
.ttj .dock[data-pill="idle"] .pill-main { display: none; }
.ttj .askbar { display: none; flex: 1; min-width: 0; height: 100%; align-items: center; gap: 6px; margin: 0; padding: 0 0 0 1px; }
.ttj .dock[data-pill="idle"] .askbar { display: flex; }
.ttj .ab-orb { position: relative; flex: none; width: 38px; height: 38px; margin-right: 4px; }
.ttj .ab-orb .orb-host { position: absolute; inset: 0; display: grid; place-items: center; }
.ttj .ab-orb .g-pool { display: none; }
.ttj .ab-field { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font: 400 15px/1 var(--font-site); color: var(--ink-strong); }
.ttj .ab-field::placeholder { color: var(--ink-3); }
.ttj .ab-btn { appearance: none; border: 0; cursor: pointer; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s, color .2s; }
.ttj .ab-btn svg { width: 18px; height: 18px; }
.ttj .ab-mic { background: var(--panel); color: var(--ink-2); }
.ttj .ab-mic:hover { background: var(--panel-2); color: var(--ink-strong); }
.ttj .ab-send { background: var(--ink); color: #fff; }
.ttj .ab-send:hover:not(:disabled) { background: #000; }
.ttj .ab-send:disabled { background: rgb(30 29 28 / .1); color: rgb(255 255 255 / .9); cursor: default; }
.ttj .dk-shell:has(.ab-field:focus) { box-shadow: var(--shadow-float), 0 0 0 1.5px rgb(143 163 242 / .9); }
.ttj .dock-qs { position: absolute; right: 0; bottom: calc(100% + 10px); display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.ttj .dock[data-place="docked"][data-pill="idle"] .dock-qs { display: flex; }
.ttj .dock[data-hcall="true"] .dock-qs { bottom: calc(100% + 76px); }
.ttj .dq { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); font: 500 .875rem/1 var(--font-site); white-space: nowrap; box-shadow: 0 10px 24px -16px rgb(40 36 90 / .45); opacity: 0; translate: 0 8px; visibility: hidden; pointer-events: none; transition: opacity .18s var(--e-out), translate .18s var(--e-out), visibility 0s .18s; }
.ttj .dq svg { flex: none; width: 16px; height: 16px; color: var(--juney-accent-ink); }
.ttj .dq:hover { color: var(--ink-strong); border-color: rgb(30 29 28 / .28); }
.ttj .dock[data-qs="true"] .dq { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; transition: opacity .18s var(--e-out), translate .18s var(--e-out), visibility 0s; }
.ttj .dock[data-qs="true"] .dq:nth-child(3) { transition-delay: .05s; }   /* nearest the bar rises first */
.ttj .dock[data-qs="true"] .dq:nth-child(2) { transition-delay: .1s; }
.ttj .dock[data-qs="true"] .dq:nth-child(1) { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .ttj .dq, .ttj .dock[data-qs="true"] .dq { translate: none; } }
@media (max-width: 600px) { .ttj .ab-field { font-size: 16px; } }

/* ── Performance (look unchanged): ── */
/* the sky: the static base (two washes and the grain) is one painted group, faded over its last 140px; the grain blends
   only with that base, so nothing animated sits under a live blend */
.ttj .sky .base { position: absolute; inset: 0; isolation: isolate; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
.ttj .sky .fx { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 70%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 140px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 70%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-composite: intersect; }
.ttj .sky-warm { -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 60%, transparent 84%), linear-gradient(to bottom, #000 calc(90.32% - 140px), transparent 90.32%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 60%, transparent 84%), linear-gradient(to bottom, #000 calc(90.32% - 140px), transparent 90.32%); mask-composite: intersect; }
/* the glows are soft by their own gradients (no live blur(46px)): each box grows by the old blur radius and its stops follow */
.ttj .glow { filter: none; }
.ttj .g1 { left: calc(-12vw - 46px); top: 24px; width: calc(48vw + 92px); height: 562px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g1) 56%, transparent), color-mix(in srgb, var(--g1) 34%, transparent) calc(38% - 18px), color-mix(in srgb, var(--g1) 19%, transparent) calc(60% - 28px), color-mix(in srgb, var(--g1) 7%, transparent) calc(100% - 52px), color-mix(in srgb, var(--g1) 1.5%, transparent) calc(100% - 22px), transparent); }
.ttj .g2 { right: calc(-12vw - 46px); top: 84px; width: calc(46vw + 92px); height: 532px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 52%, transparent), color-mix(in srgb, var(--g2) 31%, transparent) calc(38% - 18px), color-mix(in srgb, var(--g2) 17%, transparent) calc(60% - 28px), color-mix(in srgb, var(--g2) 6%, transparent) calc(100% - 52px), color-mix(in srgb, var(--g2) 1.5%, transparent) calc(100% - 22px), transparent); }
.ttj .g3 { left: calc(26vw - 46px); top: 254px; width: calc(48vw + 92px); height: 352px; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 25%, transparent), color-mix(in srgb, var(--g2) 13%, transparent) calc(50% - 24px), color-mix(in srgb, var(--g2) 3%, transparent) calc(100% - 52px), transparent); }
@media (max-width: 600px) { .ttj .g1, .ttj .g2 { width: calc(80vw + 92px); height: 452px; } .ttj .g1 { left: calc(-42vw - 46px); } .ttj .g2 { right: calc(-42vw - 46px); } .ttj .g3 { left: calc(10vw - 46px); width: calc(80vw + 92px); } .ttj .inc-layer { filter: none !important; } }
/* phones: the glows and the warm light hold still (painted once into the sky, no layers of their own); the cloud field still drifts */
@media (max-width: 600px) { .ttj .glow, .ttj .sky-warm { animation: none !important; will-change: auto; } .ttj .glow { transform: none; } }
/* cards off the deck (invisible) keep no orb and no layer */
.ttj .dk:is([data-slot="2"], [data-slot="-2"]) .gorb { display: none; }
.ttj .dk:is([data-slot="2"], [data-slot="-2"]) { will-change: auto; }
/* the call card's orb rests while the card is hidden */
.ttj .slot:not([data-view="call"]) .card-slot .gorb :is(.g-core, .g-haze, .g-cl b) { animation: none !important; will-change: auto !important; }
/* the call card's orb container changes size at once (a transform carries the change, see flipMove) */
.ttj .cc-orb, .ttj .panel-layer .cc-orb { transition: none; }
/* a hidden tab: every animation rests */
html.ttj-tab-hidden .ttj *, html.ttj-tab-hidden .ttj *::before, html.ttj-tab-hidden .ttj *::after { animation-play-state: paused !important; }
/* the page below the demo loads its picture when you get near it */
.ttj .rest:not(.is-near) .ctx-rest { background-image: none; }

/* ── The demo never changes height: idle, in a call and after it (Andrew: "it should not move, otherwise it looks bad").
      The slot has one height; the idle deck sits centred in it; the call card fills it and its transcript scrolls inside. ── */
.ttj { --slot-h: 500px; }   /* 500 since the call orb went to 96px (Andrew, 23 Oct: too much gap above the cards) */
@media (max-width: 960px) { .ttj { --slot-h: 500px; } }
.ttj .demo { padding-bottom: 32px; }
.ttj .slot { height: var(--slot-h) !important; transition: none !important; }
.ttj .card-slot .cc { height: calc(var(--slot-h) - 20px); margin-top: 20px; }   /* in a call the card keeps air under the hero's meta line (the idle deck sits lower in the slot anyway) */
.ttj .card-slot .cc-orb { --co: 56px; }
.ttj .card-slot .cc[data-mode="text"] .cc-orb { --co: 56px; }
@media (max-width: 600px) { .ttj .card-slot .cc-orb, .ttj .card-slot .cc[data-mode="text"] .cc-orb { --co: 52px; } }
.ttj .card-slot .cc-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* earlier turns step back to two lines, as in the corner panel, so the last three turns stay in view; the newest two read in full */
.ttj .card-slot .tx-list > .tx-msg:not(:nth-last-child(-n+2 of .tx-msg)) .tx-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ttj .card-slot .cc-who .cc-orb { flex: none; margin: 0; align-self: center; }
.ttj .card-slot .cc-who .cc-state { margin: 3px 0 0; justify-content: flex-start; align-self: flex-start; }
/* three turns of the conversation in view (Andrew, 23 Oct: "I need to see 3 people's transcripts"): smaller orb, tighter status and space */

.ttj .card-slot .cc .cc-legal { margin-top: 8px; max-width: none; font-size: 11px; }
.ttj .card-slot .cc > * { flex-shrink: 0; }   /* only the transcript gives way in the fixed card */
.ttj .card-slot .cc > .cc-tx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ttj .card-slot .cc .tx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: auto; overflow-anchor: none; scrollbar-width: none; margin-top: 2px; padding-top: 16px; }   /* the fade only touches lines that have scrolled up */
.ttj .card-slot .cc .tx-list::-webkit-scrollbar { display: none; }
.ttj .dk { will-change: auto; }

/* ── The mic and the connection (23 Oct). Andrew: "We need to ensure the mic is enabled, tell users to do so, and have
      error messages." Each problem is one line in the same call card, under the same orb (calm: no rings, dimmed on an
      error), with one action and Type instead where it helps. The card keeps its height; nothing below moves. ── */
.ttj .cc-gate { display: none; }
.ttj .cc[data-gate] .cc-gate { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 4px 44px; text-align: center; }   /* a touch above centre, under the orb */
.ttj .cc[data-gate] :is(.cc-state, .cc-space, .cc-tx, .cc-chips, .cc-compose, .cc-foot, .cc-ended, .cc-legal) { display: none !important; }
.ttj .panel-layer .cc[data-gate] .cc-orb { --co: 96px !important; margin-top: auto !important; }   /* the corner is tall: the orb and the words sit together in its middle */
.ttj .panel-layer .cc[data-gate] .cc-gate { flex: none; margin-bottom: auto; padding: 28px 4px 40px; }
.ttj .gate-line { margin: 0; max-width: 23rem; font-size: 17px; line-height: 1.42; letter-spacing: -.008em; font-weight: 500; color: var(--ink-strong); text-wrap: balance; }
.ttj .gate-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ttj .g-btn { appearance: none; border: 0; cursor: pointer; min-height: 48px; min-width: 132px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 .9375rem/1 var(--font-site); transition: background-color .2s, transform .25s var(--e-out); }
.ttj .g-btn:hover { background: #000; }
.ttj .g-btn.ghost { background: var(--panel); color: var(--ink); }
.ttj .g-btn.ghost:hover { background: var(--panel-2); color: var(--ink-strong); }
.ttj .g-btn:active { transform: scale(.98); }
.ttj .g-btn[hidden] { display: none; }
.ttj .cc[data-gate] .cc-gate > * { animation: ttj-msgin .45s var(--e-out) both; }
.ttj .cc[data-gate] .cc-gate > :nth-child(2) { animation-delay: .06s; }
/* the call dropped: the transcript stays, and the last line says so */
.ttj .cc[data-end="dropped"] .end-dur { display: none; }
.ttj .tx-end { display: block !important; align-self: center; margin: 2px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); text-align: center; }
/* consent, as fine print under the controls (Andrew, 23 Oct: "it can just be below it: by continuing the call, you agree
   to xyz", then "below here", on the Mute / End / Type row). Only while a call or chat is on; never on the idle cards. */
.ttj .cc-legal { flex: none; margin: 12px auto 0; max-width: 24rem; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); text-align: center; text-wrap: balance; }
.ttj .cc-legal .lg-l { display: block; }   /* one sentence per line, never a break inside "Privacy Policy" */
.ttj .cc-legal a { color: var(--juney-accent-ink); text-decoration: underline; text-decoration-color: rgb(75 91 181 / .45); text-underline-offset: 2px; }
.ttj .cc-legal a:hover { text-decoration-color: currentColor; }
.ttj .cc:is([data-sub="idle"], [data-sub="ended"], [data-sub="error"]) .cc-legal { display: none; }
.ttj .cc[data-mode="text"] .lk-call, .ttj .cc:not([data-mode="text"]) .lk-chat { display: none; }
/* the docked strip says what's wrong, with Return; an X instead of End when there's no call to end */
.ttj .hs-warn { display: none; align-items: center; gap: 6px; }
.ttj .hs-warn i { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--end); }
.ttj .dock[data-hwarn] .hs-txt small:not(.hs-warn) { display: none; }
.ttj .dock[data-hwarn] .hs-warn { display: flex; }
.ttj .dock[data-hwarn="error"] .hs-warn i { display: block; }
.ttj .hs-x { display: none; appearance: none; border: 0; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; background: var(--panel); color: var(--ink-2); }
.ttj .hs-x:hover { background: var(--panel-2); color: var(--ink-strong); }
.ttj .hs-x svg { width: 16px; height: 16px; }
.ttj .dock[data-hwarn]:not([data-hlive]) .hs-end { display: none; }
.ttj .dock[data-hwarn]:not([data-hlive]) .hs-x { display: grid; }
@media (prefers-reduced-motion: reduce) { .ttj .cc[data-gate] .cc-gate > *, .ttj .tx-hint { animation: none !important; } }