/* The drawn phone, shared by the home page (hero and AI Reply) and How it works (the AI Reply story). Loaded after site.css (and pages.css).
   --ph is its height; --ar its width over height (phone.js sets it from phone.webp); --sx..--sr is the screen rectangle (phone-screen.json, % of the image).
   The defaults below are those same measured values, so the photo of the phone is drawn as soon as it arrives, without waiting for the script.
   --su is 1% of the screen's width in px: every size inside the phone is a multiple of it, so the screen scales with the phone. */
.rig { --ph: var(--rig-h, min(72svh, 680px)); --ar: .47; --pw: calc(var(--ph) * var(--ar)); --sx: 3.78%; --sy: 1.54%; --sw: 92.44%; --sh: 97.04%; --sr: 8.82; --swn: 92.44; --su: calc(var(--pw) * var(--swn) / 10000); --ts: 1; transform-origin: 50% 100%;
  position: relative; width: var(--pw); height: var(--ph); }
.phone { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1600px) rotateY(-10deg) rotateX(3deg); }
.phone-body { position: absolute; inset: 0; border-radius: 13% / 6.2%; background: linear-gradient(150deg, var(--plum-soft), var(--plum) 45%, #1B0F36); box-shadow: inset 0 0 0 2px rgba(251, 248, 255, .6), inset 0 0 0 calc(var(--pw) * .02) #1B0F36, 0 60px 90px -40px rgba(43, 26, 79, .55); }
.phone.has-img .phone-body { display: none; }
.phone-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 46px 40px rgba(43, 26, 79, .32)); }
.phone.has-img .phone-img { visibility: visible; }

.screen { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); border-radius: calc(var(--pw) * var(--sr) / 100); overflow: hidden; background: var(--mist); color: var(--plum); transform: translateZ(1px);
  font: 400 calc(var(--su) * 4.3 * var(--ts))/1.35 var(--font); text-align: left; }
.screen p, .screen ul { max-width: none; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(251, 248, 255, .95), inset 0 0 0 3px rgba(185, 169, 227, .55); pointer-events: none; }
.cam { position: absolute; z-index: 3; top: 1.5%; left: 50%; width: calc(var(--su) * 4.2); height: calc(var(--su) * 4.2); margin-left: calc(var(--su) * -2.1); border-radius: 50%; background: #1B0F36; box-shadow: 0 0 0 calc(var(--su) * .5) rgba(43, 26, 79, .25); }
.scr-head { position: absolute; top: 6.2%; left: calc(var(--su) * 4); right: calc(var(--su) * 4); display: flex; align-items: center; gap: calc(var(--su) * 2.6); padding-bottom: calc(var(--su) * 2.2); border-bottom: 1px solid rgba(43, 26, 79, .14); }
.scr-head .av { flex: none; width: calc(var(--su) * 8); height: calc(var(--su) * 8); border-radius: 50%; background: linear-gradient(150deg, var(--cloud-rose), var(--sky)); }
.scr-head em { font-style: normal; font-weight: 500; color: var(--plum); }
.thread { position: absolute; inset: 15% calc(var(--su) * 4) 0; }
.m { position: absolute; left: 0; margin: 0; max-width: 78%; padding: calc(var(--su) * 2.4) calc(var(--su) * 3.4); border-radius: calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 1.2); background: var(--cloud-rose); color: var(--plum); }
.m-her { top: 1%; }
.m-him { top: 18%; left: auto; right: 0; max-width: 84%; border-radius: calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 1.2) calc(var(--su) * 4.4); background: var(--plum-soft); color: var(--on-sky); opacity: 0; }

/* the toolbar row with the AI Reply chip, the message box, the keyboard */
.tbar { position: absolute; z-index: 1; left: calc(var(--su) * 3); right: calc(var(--su) * 3); top: 46.2%; height: 5.2%; display: flex; align-items: center; gap: calc(var(--su) * 2); }
.tb-ico { flex: none; width: calc(var(--su) * 5); height: calc(var(--su) * 5); border-radius: 50%; background: rgba(43, 26, 79, .14); }
.tb-chip { padding: calc(var(--su) * 1.1) calc(var(--su) * 3); border-radius: 999px; background: rgba(251, 248, 255, .8); font-size: .8em; line-height: 1.2; white-space: nowrap; }
.tb-chip--lit { background: var(--plum); color: var(--mist); font-weight: 500; transform-origin: 50% 50%; }
.fbar { position: absolute; z-index: 1; left: calc(var(--su) * 3); right: calc(var(--su) * 3); top: 52.4%; min-height: 11.6%; display: flex; align-items: center; padding: calc(var(--su) * 2) calc(var(--su) * 11) calc(var(--su) * 2) calc(var(--su) * 3.6); border-radius: calc(var(--su) * 5); background: rgba(251, 248, 255, .96); box-shadow: 0 2px 8px rgba(43, 26, 79, .14); font-size: 1em; line-height: 1.3; }
.fbar::after { content: ""; position: absolute; right: calc(var(--su) * 1.6); top: 50%; width: calc(var(--su) * 7); height: calc(var(--su) * 7); margin-top: calc(var(--su) * -3.5); border-radius: 50%; background: var(--plum); }
.fbar::before { content: ""; position: absolute; right: calc(var(--su) * 3.7); top: 50%; z-index: 1; width: calc(var(--su) * 2.2); height: calc(var(--su) * 2.2); margin-top: calc(var(--su) * -1); border-top: 2px solid var(--mist); border-right: 2px solid var(--mist); transform: rotate(45deg); }
.fbar mark { background: rgba(231, 169, 201, .6); color: inherit; border-radius: .2em; padding: 0 .1em; }
.ft { min-width: 0; overflow-wrap: anywhere; }
.caret { display: inline-block; flex: none; width: 2px; height: 1.15em; margin-inline: 1px; vertical-align: text-bottom; background: var(--plum); }
@media (prefers-reduced-motion: no-preference) { .caret { animation: blink 1.1s steps(2, jump-none) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
.kbd-bg { position: absolute; left: 0; right: 0; top: 65%; bottom: 0; background: color-mix(in srgb, var(--lavender) 58%, var(--mist)); }

/* The keyboard is a sibling of the screen (not inside its clip) so its keys can lift off it in 3D. */
.kbd { --ko: 1; position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); transform-style: preserve-3d; transform: translateZ(2px); pointer-events: none; }
.kbd .krow { position: absolute; left: calc(var(--su) * 1.8); right: calc(var(--su) * 1.8); display: flex; gap: calc(var(--su) * 1.5); height: 6.6%; }
.kbd .krow--2 { left: calc(var(--su) * 6); right: calc(var(--su) * 6); }
.kk { flex: 1 1 0; display: grid; place-items: center; min-width: 0; border-radius: calc(var(--su) * 2); background: linear-gradient(180deg, rgba(251, 248, 255, .94), rgba(251, 248, 255, .5)); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 4px rgba(126, 123, 208, .3), 0 calc(var(--su) * .8) calc(var(--su) * 1.6) rgba(43, 26, 79, .24); color: var(--plum); font: 500 calc(var(--su) * 4.3 * var(--ts))/1 var(--font); font-style: normal; opacity: var(--ko); transform: translateZ(calc(var(--pop, 0) * var(--su) * 7)) scale(calc(1 + var(--pop, 0) * .07)); }
.kk--w { flex-grow: 1.45; background: linear-gradient(180deg, rgba(185, 169, 227, .85), rgba(185, 169, 227, .5)); }
.kk--sp { flex-grow: 5.2; }

/* AI Reply sheet: slides up over the lower screen and holds the captured lines, then the reply kinds and the one draft */
.ar { position: absolute; z-index: 2; left: 0; right: 0; top: 40%; bottom: 0; padding: calc(var(--su) * 3.6) calc(var(--su) * 4) 0; border-radius: calc(var(--su) * 6) calc(var(--su) * 6) 0 0; background: color-mix(in srgb, var(--lavender) 52%, var(--mist)); box-shadow: 0 -8px 24px rgba(43, 26, 79, .16); transform: translateY(100%); }
.ar-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 calc(var(--su) * 2.4); }
.ar-bar b { font-weight: 600; }
.ar-bar span, .ar-lab { font: 600 calc(var(--su) * 2.8 * min(var(--ts), 1.3))/1.2 var(--font); text-transform: uppercase; letter-spacing: .11em; color: var(--plum-soft); }
.ar-lab { margin: 0 0 calc(var(--su) * 2); }
.ar-cap, .ar-pick { position: absolute; left: calc(var(--su) * 4); right: calc(var(--su) * 4); top: 15%; }
.ar-pick { opacity: 0; }
.ar-cap ul { display: grid; gap: calc(var(--su) * 2); }
.ar-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--su) * 2.4); padding: calc(var(--su) * 2.2) calc(var(--su) * 3); border-radius: calc(var(--su) * 3); background: rgba(251, 248, 255, .72); font-size: 1em; }
.ar-row i { flex: none; display: grid; place-items: center; width: calc(var(--su) * 5.6); height: calc(var(--su) * 5.6); border-radius: 50%; background: rgba(43, 26, 79, .12); font-style: normal; font-size: .9em; line-height: 1; }
.ar-row::after { content: ""; position: absolute; left: calc(var(--su) * 3); right: calc(var(--su) * 11); top: 50%; height: 2px; background: var(--plum); transform: scaleX(var(--rm, 0)); transform-origin: 0 50%; }
.circles { display: flex; justify-content: space-between; gap: calc(var(--su) * 2); margin: 0 0 calc(var(--su) * 3); }
.circles li { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: calc(var(--su) * 1.2); font-size: .74em; line-height: 1.2; text-align: center; }
.circles i { width: calc(var(--su) * 8.5); height: calc(var(--su) * 8.5); border-radius: 50%; border: 2px solid var(--plum-soft); }
.circles .is-on i { background: var(--plum); border-color: var(--plum); }
.ar-go { margin: 0 0 calc(var(--su) * 3); padding: calc(var(--su) * 2.4) 0; border-radius: 999px; background: var(--plum); color: var(--mist); text-align: center; font-weight: 500; }
.ar-draft { margin: 0; padding: calc(var(--su) * 2.6) calc(var(--su) * 3.4); border-radius: calc(var(--su) * 3); background: rgba(251, 248, 255, .85); box-shadow: inset 0 0 0 2px var(--plum); line-height: 1.3; opacity: 0; }
html[dir="rtl"] .kbd, html[dir="rtl"] .phone { direction: ltr; }

/* buttons a visitor presses to replay or step a sample */
/* quiet outline buttons: the sample's controls never outweigh the page's Join button */
.replay { min-height: 44px; padding: .5rem 1.2rem; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--plum); color: var(--plum); font: 500 .9375rem/1 var(--font); cursor: pointer; transition: background-color 200ms var(--ease); }
.replay:hover { background: rgba(43, 26, 79, .08); }
.replay:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.replay[disabled] { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------- the AI Reply story (How it works): the phone turns to face you, then stays beside four steps
   and follows them as the page scrolls (nothing holds the page). Narrow screens: nothing is sticky; each step carries its own crop of the phone. */
.reply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.reply-stage { --rig-h: min(72svh, 680px); position: sticky; top: calc(var(--bar-top) + var(--bar-h) + .8rem); display: grid; justify-items: center; gap: .6rem; }
.reply-stage .demo-tag { color: var(--plum); text-transform: none; letter-spacing: .02em; }
.reply-ctl { display: flex; gap: .6rem; }
.reply-steps { display: grid; padding-block: 2vh 0; }
.rstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; align-content: start; align-items: start; min-height: 52svh; padding-top: 6svh; }
.rstep--last { min-height: 80svh; }
.rpin { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--plum-soft); color: var(--plum); font: 600 1rem/1 var(--font); transition: background-color 200ms var(--ease); }
.rstep.is-on .rpin { background: var(--glow); box-shadow: inset 0 0 0 2px var(--plum); }
.rstep-body { display: grid; gap: .6rem; justify-items: start; }
.rstep h3 { font: 600 clamp(1.5rem, 2.4vw, 2.2rem)/1.15 var(--font); letter-spacing: -.02em; }
.rstep p { max-width: 30rem; font-size: 1.1875rem; line-height: 1.5; }
.rstep .rstep-send { margin-top: .8rem; font: 600 clamp(1.3rem, 2vw, 1.8rem)/1.2 var(--font); letter-spacing: -.01em; }
.rstep .rstep-sent { font: 500 .8125rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--plum-soft); }
.rstep-media { --rig-h: min(74svh, calc((100vw - 2.5rem) * 2)); grid-column: 1 / -1; display: flex; justify-content: center; height: calc(var(--rig-h) * (var(--cy1) - var(--cy0))); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }
.rstep-media .rig { margin: calc(var(--rig-h) * var(--cy0) * -1) 0 0; flex: none; }
.reply-stage.is-live .phone, .rstep-media.is-live .phone { will-change: transform; }
@media (max-width: 860px) {
  .reply-grid { grid-template-columns: minmax(0, 1fr); }
  .reply-stage { display: none; }
  .rstep, .rstep--last { min-height: 0; padding-block: 1.8rem 0; }
}
@media (max-width: 767px) { .rig { --ts: 1.3; } }
.reply-story { margin-top: clamp(1rem, 4vh, 2.5rem); }
.reply-story .reply-note { margin-top: 1.2rem; color: var(--plum-soft); text-transform: none; letter-spacing: .02em; }