/* /try/, the live desk page, on the structure of Heidar's /try/ (25 Oct). Its own stylesheet: no hero, no footer,
   no site.css. Inter throughout (self-hosted), Montserrat only for the made-up company sites' headlines.
   The iPhone is drawn in real points (an iPhone 17 Pro: 402 by 874) and scaled with zoom, so iOS sizes stay iOS sizes. */

:root{--bg:#FAFAFA;--ink:#0B0B0D;--ink2:#54545B;--ink3:#8E8E95;--line:#E6E6EA;--card:#fff;--gold:#A97C19;--gold-ink:#7A5810;--gold-soft:#F6F0E1;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.32,1.25,.45,1);--blue:#007AFF;--green:#34C759;--red:#FF3B30}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* no line ends on one to three words left over (Mikail, 28 Oct): every block balances its lines, except the live
   transcript, which grows as the call goes */
body{text-wrap:balance}
.tx-log,elevenlabs-convai{text-wrap:wrap}
.nw{white-space:nowrap}
p,h1,h3{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}

/* ---------- the bar, the switchers, the company line ---------- */
/* The header is one piece that stays on screen while the demo scrolls: the logo, the trade switcher, the button and
   the channel switcher move together (Mikail, 2 Nov: "the switcher, the logo and the book a call button should be
   sticky ... all one sticky moving together"). On a laptop the trade switcher sits inside the white bar between the
   logo and the button; on a phone the bar holds the logo and the button and the trade switcher sits under it. Once
   stuck the header gets a frosted card. It floats 10-12px under the top edge, so an iPhone paints no band
   (ios-full-bleed: nothing pinned covers the top edge's middle). */
.chrome{position:sticky;top:12px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 24px);
  margin:12px auto 0;padding:6px;border-radius:30px;text-align:center;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),-webkit-backdrop-filter .3s,backdrop-filter .3s}
.chrome.stuck{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 0 0 1px var(--line),0 12px 30px -16px rgba(20,20,30,.3)}
.firm{margin-top:4px;padding:0 16px;text-align:center}
.bar{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 8px 24px -14px rgba(20,20,30,.22)}
.bar-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 17px/1 "Inter",sans-serif;letter-spacing:-.02em;white-space:nowrap}
.bar-logo img{display:block;height:23px;width:auto}
.bar-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:11px 18px;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,#D3AC52 0%,#B88A2C 52%,#9A7215 100%);text-shadow:0 1px 1px rgba(74,48,2,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(90,60,6,.3),0 6px 16px -8px rgba(169,124,25,.7);
  text-decoration:none;font:650 14px/1 "Inter",sans-serif;transition:transform .2s var(--ease),filter .2s,box-shadow .2s}
.bar-cta:hover{filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(90,60,6,.25),0 10px 22px -10px rgba(169,124,25,.85)}
.bar-cta:active{transform:scale(.97)}
.bar-cta.big{padding:15px 26px;font-size:15px}
.pills{position:relative;display:inline-flex;padding:3px;border-radius:999px;background:#EFEFF1;box-shadow:inset 0 0 0 1px #E4E4E8;max-width:100%;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pb{position:relative;z-index:1;flex:0 0 auto;border:0;background:none;cursor:pointer;padding:8px 15px;border-radius:999px;
  font:500 14px/1.2 "Inter",sans-serif;color:var(--ink3);white-space:nowrap;transition:color .35s var(--ease)}
.pb[aria-pressed="true"]{color:var(--ink)}
.pb:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ind{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px #D9D9DE,0 1px 2px rgba(0,0,0,.06),0 4px 10px -6px rgba(0,0,0,.18);
  transition:transform .52s var(--spring),width .52s var(--spring),height .3s var(--ease)}
.pills.no-anim .ind{transition:none}
.firm{font-size:13px;color:var(--ink3);transition:opacity .25s,filter .25s,transform .3s var(--ease)}
.firm b{font-weight:500;color:var(--ink)}

/* ---------- the channels and how they switch ---------- */
.try{max-width:1200px;margin:0 auto;padding:0 20px 56px}
.intro{max-width:720px;margin:42px auto 34px;text-align:center}
.intro h1,.intro h2{margin:0;font:600 54px/1.04 "Inter",sans-serif;letter-spacing:-.04em}
.intro p{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--ink2)}
.intro b{font-weight:500;color:var(--ink)}
/* a pane arrives piece by piece: every [data-st] in it (title, line, cards) rises out of a blur in turn (try.js sets --i) */
.chan.enter [data-st]{animation:stin .62s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes stin{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.chan.leave{animation:chanout .2s var(--ease) both}
@keyframes chanin{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes chanout{to{opacity:0;transform:translateY(-8px);filter:blur(4px)}}
.swap,.intro p span[data-k]{transition:opacity .2s var(--ease),transform .32s var(--ease),filter .32s var(--ease)}
.try.swapping .swap,.try.swapping .intro p span[data-k],.chrome.swapping~.firm{opacity:0;transform:translateY(6px);filter:blur(4px)}
.pane-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink3)}
.center{text-align:center}
.fine{margin:40px auto 0;max-width:62ch;text-align:center;font-size:12.5px;line-height:1.55;color:var(--ink3)}

/* ---------- call: phone, transcript, CRM ---------- */
.grid3{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,404px);gap:24px;align-items:start}
.col-phone{display:flex;flex-direction:column;align-items:center;gap:14px}
.under{max-width:300px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.cap{max-width:300px;min-height:40px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--ink)}
.cap-t{display:inline-block;transition:opacity .25s var(--ease),transform .35s var(--ease),filter .3s}
.cap-t.out{opacity:0;transform:translateY(5px);filter:blur(3px)}
.under a{color:var(--ink);font-weight:600;white-space:nowrap}
.pane{display:flex;flex-direction:column;background:var(--card);border-radius:20px;box-shadow:0 0 0 1px var(--line),0 24px 48px -36px rgba(20,20,30,.25)}
.tx{height:652px}
.pane-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink3)}
.live i{width:7px;height:7px;border-radius:50%;background:#C9C9CE}
.try.oncall .live{color:var(--red)}
.try.oncall .live i{background:var(--red);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.tx-log{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.tx-log > :first-child{margin-top:auto}
.tx-empty{margin:auto;max-width:24ch;text-align:center;font-size:13.5px;color:var(--ink3)}
.tl{animation:tlin .35s var(--ease) both}
.tl b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--ink3)}
.tl.d b{color:var(--gold)}
.tl p{font-size:14.5px;line-height:1.5}
.tl.note p{font-size:13px;color:var(--ink2);background:var(--gold-soft);padding:10px 12px;border-radius:12px}
@keyframes tlin{from{opacity:0;transform:translateY(6px)}}
.chips{padding:14px 18px 16px;border-top:1px solid var(--line)}
.clab{font-size:12.5px;color:var(--ink3);margin-bottom:10px;transition:color .3s}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:0;cursor:pointer;padding:7px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink);
  transition:background .2s,box-shadow .2s,transform .2s var(--ease)}
.chip:hover{background:#F5F5F7}
.chip:active{transform:scale(.97)}
.chip.sent{background:var(--gold-soft);box-shadow:inset 0 0 0 1px #E8D9B2;color:var(--gold-ink)}
.chips.nudge .clab{color:var(--gold-ink)}

/* the flow: a rail exactly as wide as the window under it, then three windows on one stage */
.flow{display:flex;flex-direction:column}
.fl-rail{display:flex;gap:4px;padding:4px;margin:0 0 12px;border-radius:999px;background:#EFEFF1;box-shadow:inset 0 0 0 1px #E4E4E8}
.fl-step{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:32px;padding:0 10px;border:0;border-radius:999px;background:none;cursor:default;
  font:500 12.5px/1 "Inter",sans-serif;color:#A2A2A8;white-space:nowrap;transition:color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.fl-step span{overflow:hidden;text-overflow:ellipsis}
.fl-step i{display:inline-grid;flex:0 0 auto;width:0;overflow:hidden;transition:width .45s var(--spring)}
.fl-step svg{width:13px;height:13px;color:var(--gold);stroke-width:2.4}
.fl-step.done{color:var(--ink2);cursor:pointer}
.fl-step.done i{width:13px}
.fl-step.on{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px #D9D9DE,0 2px 6px -3px rgba(0,0,0,.18)}
.fl-stage{position:relative;height:604px;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 48px -36px rgba(20,20,30,.25)}
.fw{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(24px) scale(.985);filter:blur(4px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .55s var(--ease),filter .45s var(--ease)}
.fw.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.fw.past{transform:translateX(-24px) scale(.985)}
.crm-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#14171C;color:#fff}
.crm-co{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.crm-co b{font-weight:600}
.crm-logo{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--tone,#A97C19)}
.crm-logo svg{width:18px;height:18px}
.crm-bar nav{display:flex;gap:14px;margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.62)}
.crm-bar nav span{display:inline-flex;align-items:center;gap:5px}
.crm-bar nav svg{width:14px;height:14px}
.crm-bar nav .on{color:#fff}
.crm-bar nav span:not(.on){font-size:0;gap:0}
.crm-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 18px 12px}
.crm-av{width:44px;height:44px;border-radius:50%;background:#ECECEF;display:grid;place-items:center;font-size:15px;font-weight:600;color:#fff;transition:background .4s}
.crm-av.on{background:var(--tone,#A97C19)}
.crm-name{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#B5B5BB;transition:color .4s}
.crm-name.on{color:var(--ink)}
.crm-from{font-size:12.5px;color:var(--ink3)}
.crm-badge{padding:4px 10px;border-radius:999px;background:#EAF1FB;color:#1F4FA8;font-size:12px;font-weight:600}
.crm-tabs{display:flex;align-items:flex-end;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink3)}
.crm-tabs span{padding:10px 0 9px;border-bottom:2px solid transparent}
.crm-tabs .on{color:var(--ink);font-weight:500;border-color:var(--ink)}
.crm-tabs em{margin-left:auto;padding-bottom:10px;font-style:normal;font-size:12.5px}
.crm-tabs em b{font-weight:600;color:var(--ink)}
.crm-rows{flex:1;min-height:0;overflow:auto}
.cr-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;min-height:41px;padding:0 18px;border-bottom:1px solid #F0F0F3;font-size:13.5px}
.cr-row:last-child{border-bottom:0}
.cr-l{font-weight:500;color:#2B3A55}
.cr-v{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-v i{display:inline-block;width:26px;height:2px;border-radius:2px;background:#E3E3E8;vertical-align:middle}
.cr-row.on{animation:rowfresh 1.6s var(--ease)}
@keyframes rowfresh{0%{background:var(--gold-soft)}100%{background:transparent}}
/* Outlook, as the owner's inbox and calendar */
.ol-bar{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px;background:#0F6CBD;color:#fff}
.ol-bar b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ol-waffle{display:grid;grid-template-columns:repeat(3,4px);gap:2.5px}
.ol-waffle i{width:4px;height:4px;border-radius:1px;background:#fff}
.ol-search{display:inline-flex;align-items:center;gap:7px;flex:1;max-width:190px;height:30px;margin-left:auto;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.18);font-size:13px;color:rgba(255,255,255,.85)}
.ol-search svg{width:14px;height:14px}
.ol-me{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#C5E0F5;color:#0F3A5E;font-size:11.5px;font-weight:600}
.ol-mail{flex:1;min-height:0;overflow:auto;padding:16px 18px;color:#1F1F1F}
.ol-subj{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.ol-from{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;margin:14px 0 12px;padding-bottom:12px;border-bottom:1px solid #EDEBE9}
.ol-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tone)}
.ol-av svg{width:22px;height:22px}
.ol-from b{display:block;font-size:13.5px;font-weight:600}
.ol-from span{font-size:12.5px;color:#616161}
.ol-from time{font-size:12px;color:#616161}
.ol-mail p{font-size:13.5px;line-height:1.55;margin:0 0 10px}
.ol-mail dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 10px;margin:0 0 12px;padding:12px;border-radius:10px;background:#F5F5F5;font-size:13px}
.ol-mail dt{color:#616161}
.ol-mail dd{margin:0;font-weight:500}
.ol-mail .ol-book{padding:10px 12px;border-left:3px solid #0F6CBD;background:#EFF6FC;border-radius:0 8px 8px 0}
.ol-mail .ol-close{color:#616161;font-size:12.5px}
.ol-cal{flex:1;min-height:0;display:flex;flex-direction:column}
.ol-tools{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #EDEBE9;font-size:13px;color:#424242}
.ol-tools .t{padding:4px 10px;border-radius:5px;box-shadow:inset 0 0 0 1px #D1D1D1}
.ol-tools b{font-weight:600;color:#1F1F1F}
.ol-tools .v{margin-left:auto;color:#0F6CBD;font-weight:600}
.ol-grid{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:46px minmax(0,1fr);overflow:hidden}
.ol-hours{position:relative}
.ol-hours span{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;color:#616161}
.ol-day{position:relative;border-left:1px solid #EDEBE9;background:repeating-linear-gradient(180deg,transparent 0 calc(var(--h) - 1px),#EDEBE9 calc(var(--h) - 1px) var(--h))}
.ol-ev{position:absolute;left:6px;right:8px;padding:6px 9px;border-radius:5px;font-size:12px;line-height:1.35;overflow:hidden;background:#F0F0F0;color:#424242;border-left:3px solid #A0A0A0}
.ol-ev b{display:block;font-weight:600;color:#242424}
.ol-ev.new{background:#DEECF9;border-left-color:#0F6CBD;color:#0F3A5E;box-shadow:0 6px 16px -10px rgba(15,108,189,.6);animation:evpop .7s var(--spring) both}
.ol-ev.new b{color:#0F3A5E}
@keyframes evpop{from{opacity:0;transform:scale(.9)}}
.ol-card{margin:0 12px 12px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #E1DFDD,0 8px 20px -14px rgba(0,0,0,.35);font-size:13px;animation:evpop .7s .15s var(--spring) both}
.ol-card b{display:block;font-size:14.5px;margin-bottom:3px}
.ol-card p{margin:3px 0 0;color:#424242}

/* ---------- the iPhone, in real points ---------- */
.ip{--z:.74;zoom:var(--z);position:relative;width:420px;height:892px;padding:3px;border-radius:66px;flex:0 0 auto;
  background:linear-gradient(145deg,#4A4A4E 0%,#2A2A2D 30%,#3D3D41 55%,#1E1E21 80%,#38383C 100%);
  box-shadow:0 0 0 .6px rgba(0,0,0,.5),0 60px 90px -50px rgba(10,10,20,.55),0 24px 40px -26px rgba(10,10,20,.35)}
.ip-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2C2C2F,#4C4C50 60%,#2A2A2D)}
.ip-act{left:-2.5px;top:158px;height:34px}.ip-vu{left:-2.5px;top:220px;height:64px}.ip-vd{left:-2.5px;top:298px;height:64px}
.ip-pwr{right:-2.5px;top:256px;height:104px}.ip-cam{right:-2.5px;top:560px;height:72px;border-radius:3px}
.ip-bezel{width:414px;height:886px;padding:6px;border-radius:63px;background:#050506}
.ip-screen{position:relative;width:402px;height:874px;border-radius:57px;overflow:hidden;background:#F2F2F7;isolation:isolate;--sb:#000;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.ip-rim{position:absolute;z-index:60;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #000;pointer-events:none}
.ip:not([data-state="contact"]) .ip-screen{--sb:#fff}
.ip-status{position:absolute;z-index:30;left:0;right:0;top:0;height:59px;color:var(--sb);transition:color .45s}
.ip-time{position:absolute;left:0;width:138px;top:0;height:59px;display:flex;align-items:center;justify-content:center;padding-left:6px;
  font:600 16.5px/1 "Inter",sans-serif;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.ip-sys{position:absolute;right:0;width:138px;top:0;height:59px;display:flex;align-items:center;justify-content:center;gap:6px;padding-right:6px}
.ip-cell{display:inline-flex;align-items:flex-end;gap:1.5px;height:10.5px}
.ip-cell i{width:3px;border-radius:.8px;background:currentColor}
.ip-wifi{width:15.5px;height:11px;fill:currentColor}
.ip-batt{position:relative;width:24.5px;height:11.5px;margin-right:2px;border-radius:3.6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent)}
.ip-batt i{position:absolute;left:2px;top:2px;bottom:2px;width:15.5px;border-radius:1.8px;background:currentColor}
.ip-batt::after{content:"";position:absolute;right:-2.6px;top:4px;width:1.4px;height:3.5px;border-radius:0 1px 1px 0;background:color-mix(in srgb,currentColor 40%,transparent)}
.ip-island{position:absolute;z-index:40;top:11px;left:50%;width:126px;height:37px;margin-left:-63px;border-radius:20px;background:#000;
  transition:width .6s var(--spring),margin-left .6s var(--spring)}
.ip-live{position:absolute;left:13px;top:50%;display:flex;align-items:center;gap:2px;height:14px;margin-top:-7px;opacity:0;transition:opacity .35s .15s}
.ip-live b{width:2.4px;height:4px;border-radius:2px;background:var(--green)}
.ip.talking .ip-live b{animation:eq .8s ease-in-out infinite}
.ip-live b:nth-child(2){animation-delay:.12s}.ip-live b:nth-child(3){animation-delay:.24s}.ip-live b:nth-child(4){animation-delay:.36s}
.ip-dot{position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--green);opacity:0;transition:opacity .35s .15s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
.ip[data-state="live"] .ip-island{width:166px;margin-left:-83px}
.ip[data-state="live"] .ip-live,.ip[data-state="live"] .ip-dot{opacity:1}
.ip-home{position:absolute;z-index:30;left:50%;bottom:6.5px;width:139px;height:5px;margin-left:-69.5px;border-radius:3px;background:rgba(0,0,0,.42);transition:background .45s}
.ip:not([data-state="contact"]) .ip-home{background:rgba(255,255,255,.5)}
.ip-app{position:absolute;inset:0;padding-top:59px}

/* the contact card, iOS 26 */
.ct{background:linear-gradient(180deg,color-mix(in srgb,var(--tone,#A97C19) 14%,#F2F2F7) 0,#F2F2F7 320px);color:#000}
.ct-nav{display:flex;justify-content:space-between;padding:8px 18px 0;font-size:17px;color:var(--blue)}
.ct-nav span{display:inline-flex;align-items:center;gap:2px}
.ct-nav svg{width:24px;height:24px;margin-left:-8px;stroke-width:2.6}
.ct-hero{text-align:center;padding-top:22px}
.ct-av{display:inline-grid;place-items:center;width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--tone) 70%,#fff),var(--tone) 55%,color-mix(in srgb,var(--tone) 75%,#000));
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.ct-av svg{width:64px;height:64px}
.ct-name{margin-top:14px;font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.ct-sub{margin-top:5px;font-size:15px;color:#6C6C70}
.ct-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px;margin-top:24px}
.ct-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:64px;border:0;border-radius:14px;background:#fff;color:var(--blue);cursor:pointer;
  transition:transform .2s var(--ease),filter .2s}
.ct-act svg{width:23px;height:23px}
.ct-act span{font-size:12px;line-height:1}
.ct-act.go{background:var(--green);color:#fff;animation:ring 2.4s infinite}
.ct-act:not(.go){cursor:default}
.ct-act:active{transform:scale(.95);filter:brightness(.92)}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 14px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.ct-card{margin:16px 16px 0;background:#fff;border-radius:12px;overflow:hidden}
.ct-row{display:flex;flex-direction:column;gap:2px;padding:11px 16px;position:relative}
.ct-row + .ct-row::before,.ct-plain span + span::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:#C6C6C8}
.ct-l{font-size:13px;color:#000}
.ct-v{font-size:17px;color:#000;letter-spacing:-.01em}
.ct-v.link{color:var(--blue)}
.ct-plain span{display:block;position:relative;padding:11px 16px;font-size:17px;color:var(--blue)}

/* the call, iOS 26 */
/* the move into the call, the way iOS does it: the call screen grows out of the green button as a circle while the
   card sinks back, then the name and the keys settle in a beat later; hanging up runs it backwards into the button */
.cs{background:linear-gradient(180deg,color-mix(in srgb,var(--tone,#A97C19) 55%,#1C1C1E) 0%,#1E1E21 46%,#0D0D0F 100%);color:#fff;text-align:center;
  clip-path:circle(0px at 154px 353px);pointer-events:none;transition:clip-path .75s cubic-bezier(.65,0,.3,1)}
.ip:not([data-state="contact"]) .cs{clip-path:circle(140% at 154px 353px);pointer-events:auto}
.ct{transition:transform .75s cubic-bezier(.65,0,.3,1),filter .75s cubic-bezier(.65,0,.3,1)}
.ip:not([data-state="contact"]) .ct{transform:scale(.93);filter:brightness(.55) blur(2px)}
.cs-top,.cs-keys{transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ip[data-state="contact"] .cs-top{opacity:0;transform:translateY(14px)}
.ip[data-state="contact"] .cs-keys{opacity:0;transform:translateY(24px)}
.ip:not([data-state="contact"]) .cs-top{transition-delay:.25s}
.ip:not([data-state="contact"]) .cs-keys{transition-delay:.38s}
.cs-top{padding-top:58px}
.cs-meter{display:block;width:300px;height:70px;margin:34px auto 0;opacity:0;transition:opacity .5s .2s}
.ip[data-state="live"] .cs-meter{opacity:1}
.cs-state em{font-style:normal;color:rgba(255,255,255,.45)}
.cs-av{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.cs-av svg{width:50px;height:50px}
.cs-name{margin-top:14px;font-size:34px;font-weight:600;letter-spacing:-.025em}
.cs-state{margin-top:6px;font-size:17px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.cs-state > span{display:none}
.ip[data-state="calling"] .s-calling,.ip[data-state="live"] .s-live,.ip[data-state="ended"] .s-end{display:inline}
.cs-keys{position:absolute;left:0;right:0;bottom:76px;display:grid;grid-template-columns:repeat(3,1fr);row-gap:28px;padding:0 34px;transition:opacity .4s}
.ip[data-state="ended"] .cs-keys{opacity:0;pointer-events:none}
.cs-key{display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:none;cursor:pointer;color:#fff;font-size:13px}
.cs-key i{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);transition:background .2s,transform .15s}
.cs-key svg{width:32px;height:32px;color:#fff}
.cs-key.end i{background:var(--red);box-shadow:none}
.cs-key.on i{background:#fff}
.cs-key.on svg{color:#000}
.cs-key:active i{transform:scale(.94)}
.cs-key.facetime,.cs-key.more,.cs-key.keypad{cursor:default}

/* ---------- your site: a browser window, the company's site, the chat box ---------- */
.bw{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(10,10,20,.45)}
.bw-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 14px;background:#F1F1F3;border-bottom:1px solid #E2E2E6}
.bw-dots{display:flex;gap:7px}
.bw-dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.bw-dots i:nth-child(2){background:#FEBC2E}.bw-dots i:nth-child(3){background:#28C840}
.bw-tab{display:inline-flex;align-items:center;gap:7px;min-width:300px;justify-content:center;padding:6px 16px;border-radius:8px;background:#fff;font-size:13px;color:var(--ink2);box-shadow:0 0 0 1px #E2E2E6}
.bw-tab svg{width:12px;height:12px;color:var(--ink3)}
.bw-view{position:relative;height:min(720px,calc(100vh - 210px));min-height:560px;background:#fff}
.bw-frame{display:block;width:100%;height:100%;border:0;transition:opacity .35s}
.bw-frame.loading{opacity:0}
.bw-open{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bw-side{justify-self:end;font-size:12px;color:var(--ink3)}

/* ---------- email ---------- */
.narrow{max-width:640px;margin:0 auto}
.mc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(10,10,20,.35)}
.mc-top{display:flex;justify-content:space-between;padding:12px 16px;background:#F2F5FA;font-size:14px}
.mc-win{display:inline-flex;gap:14px;align-items:center}
.mc-win i{width:11px;height:1.6px;background:var(--ink3);border-radius:1px}
.mc-win i:nth-child(2){height:9px;width:9px;background:none;box-shadow:inset 0 0 0 1.5px var(--ink3);border-radius:1.5px}
.mc-win i:nth-child(3){position:relative;width:11px;height:11px;background:none}
.mc-win i:nth-child(3)::before,.mc-win i:nth-child(3)::after{content:"";position:absolute;left:5px;top:-1px;width:1.6px;height:13px;background:var(--ink3);transform:rotate(45deg)}
.mc-win i:nth-child(3)::after{transform:rotate(-45deg)}
.mc-row{display:flex;gap:10px;margin:0 16px;padding:11px 0;border-bottom:1px solid #EDEDF0;font-size:14.5px}
.mc-row span{color:var(--ink3)}
.mc-row b{font-weight:500}
.mc-body{display:block;width:100%;border:0;resize:vertical;padding:14px 16px;font:400 15px/1.6 "Inter",sans-serif;color:var(--ink);outline:none}
.mc-foot{display:flex;align-items:center;gap:16px;padding:12px 16px 16px}
.mc-send{text-decoration:none;display:inline-flex;align-items:center;border-radius:999px;background:#0B57D0;color:#fff;font-weight:600;font-size:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.mc-send span{padding:10px 18px 10px 22px}
.mc-send i{align-self:stretch;width:34px;border-left:1px solid rgba(255,255,255,.35);background:linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%) 13px 15px/5px 5px no-repeat,linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%) 16.5px 15px/5px 5px no-repeat}
/* Gmail (25 Oct, round 4): the app line above the window, the blue compose bar, the To chip, the tool row */
.gm-app{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.gm-brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;color:#5F6368}
.gm-brand b{font-weight:400;letter-spacing:-.01em}
.gm-logo{width:28px;height:21px}
.gm-saved{font-size:12.5px;color:var(--ink3)}
.gm .mc-top{background:#F2F6FC;color:#041E49}
.gm .mc-row{align-items:center}
.gm-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 12px 3px 3px;border-radius:999px;box-shadow:inset 0 0 0 1px #C4C7C5;font-weight:400;font-size:14px}
.gm-chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0B57D0;color:#fff;font:600 11px/1 "Inter",sans-serif;font-style:normal}
.gm .mc-row em{margin-left:auto;font-style:normal;font-size:13.5px;color:#444746}
.gm-subj b{font-weight:600}
.gm-tools{display:inline-flex;gap:14px;align-items:center;margin-left:4px}
.gm-tools svg{width:18px;height:18px;fill:none;stroke:#444746;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cost ---------- */
.wide{max-width:1140px;margin:0 auto}
.cc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* cost, 25 Oct round 4: the label on top, the number at the foot, the headline card in Soltrack black and gold */
.cc-card{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:158px;padding:22px 24px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cc-card span{order:-1;font-size:14px;color:var(--ink2)}
.cc-card b{font-size:min(40px,14cqw);white-space:nowrap;font-weight:600;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cc-card.big{background:#0E0E10;box-shadow:0 30px 60px -36px rgba(14,14,16,.55)}
.cc-card.big span{color:rgba(255,255,255,.62)}
.cc-card.big b{font-size:min(56px,15.5cqw);color:#D8B660}
.cc-sliders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:12px;padding:24px 28px 26px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cc-s input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:8px 0;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,#B08A2E var(--p,50%),#E4E4E8 var(--p,50%))}
.cc-s input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.cc-s input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.18)}
.cc-s input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.12)}
.cc-math{margin-top:14px;text-align:center;font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
.chan[data-pane="cost"] .center{margin-top:30px}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .grid3{grid-template-columns:auto minmax(0,1fr)}
  .col-crm{grid-column:1 / -1}
}
@media (max-width:760px){
  .chrome{top:10px;width:auto;max-width:none;margin:10px 6px 0;align-items:stretch;border-radius:32px 32px 25px 25px}
  /* the bar is a grid here: the white pill is its ::before on the first row, under the logo and the button, and
     the trade switcher takes the second row */
  .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
  .bar::before{content:"";grid-area:1/1/2/4;align-self:stretch;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 24px -14px rgba(20,20,30,.22)}
  .bar-logo{grid-area:1/1;margin-left:14px}
  .bar-cta{grid-area:1/3;margin:8px}
  .bar .trades{grid-area:2/1/3/4}
  /* both switchers fill the width, each button growing by the same amount, so the lozenge and the labels sit evenly
     across the rail instead of bunching at its left */
  .trades,.chans{width:100%}
  .trades .pb,.chans .pb{flex:1 1 auto}
  .chans .pb{padding:8px 10px;font-size:13.5px}
  .try{padding:0 14px 40px}
  .intro{margin:28px auto 22px}
  .intro h1,.intro h2{font-size:38px}
  .intro p{font-size:15.5px}
  .grid3{grid-template-columns:minmax(0,1fr);gap:18px}
  .ip{--z:.78}
  .tx{height:auto}
  .tx-log{height:260px;flex:0 0 auto}
  .crm-bar nav span{font-size:0;gap:0}
  .crm-bar nav svg{width:16px;height:16px}
  .fl-rail{justify-content:center}
  .cc-cards,.cc-sliders{grid-template-columns:minmax(0,1fr)}
  .cc-card{min-height:120px}
  .bw-side{display:none}
  .bw-tab{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.ind,.swap,.ip-app{transition:none!important}}

/* the made-up companies' logos fill their round photo, as a contact photo does (25 Oct, round 4) */
.ct-av,.cs-av,.crm-logo,.ol-av{overflow:hidden;background:none!important}
.ct-av svg.logo,.cs-av svg.logo,.crm-logo svg.logo,.ol-av svg.logo{width:100%;height:100%;display:block}

/* ═══ ROUND 4 (25 Oct): iOS 26 in-call screen, the rail and the three tools, the script ═══ */
/* the Phone app in a call: duration over the name, six 78pt glass keys at the foot, the contact's poster behind */
.try[data-desk="movers"] .ip{--poster:linear-gradient(178deg,#9B7330 0%,#6A4E22 34%,#3A2C18 66%,#1C160E 100%)}
.try[data-desk="restoration"] .ip{--poster:linear-gradient(178deg,#2E8C95 0%,#1B6168 34%,#0F3A3F 66%,#08191C 100%)}
.try[data-desk="garage"] .ip{--poster:linear-gradient(178deg,#C86A2E 0%,#8A431B 34%,#462414 66%,#1A0F0A 100%)}
.cs{background:var(--poster,#1C1C1E)}
.cs-top{position:absolute;inset:0 0 auto;height:200px;padding:0}
.cs-state{position:absolute;top:86px;left:0;right:0;margin:0;text-align:center;font-size:22px;font-weight:400;line-height:26px;color:rgba(235,235,245,.78);font-variant-numeric:tabular-nums}
.cs-name{position:absolute;top:116px;left:16px;right:16px;margin:0;text-align:center;font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.01em;color:#fff}
.cs-keys{position:absolute;left:44px;right:auto;top:596px;bottom:auto;width:314px;display:grid;grid-template-columns:repeat(3,78px);justify-content:space-between;row-gap:22px;padding:0}
.cs-key{gap:8px;font-size:15px;font-weight:400;color:#fff;letter-spacing:0}
.cs-key i{width:78px;height:78px;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -10px 18px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.cs-key svg{width:31px;height:31px}
.cs-key.facetime i{color:rgba(255,255,255,.34)}
.cs-key.end i{background:#EB3B30;box-shadow:inset 0 0 0 1px rgba(255,140,130,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.cs-key.end svg{width:36px;height:36px}
.cs-key.on i{background:#fff;color:#000}

/* the rail: the tool each step lands in, joined by a line that fills in gold as the lead moves on; only the open step is a pill */
.fl-rail{display:flex;align-items:center;gap:6px;padding:0;margin:0 0 12px;background:none;box-shadow:none;border-radius:0}
.fl-s{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 8px;border:0;border-radius:999px;background:transparent;
  font:500 12.5px/1 "Inter",sans-serif;color:#9A9FA8;white-space:nowrap;transition:background .35s,box-shadow .35s,color .35s}
.fl-s:not(:disabled){cursor:pointer}
.fl-s:not(:disabled):hover{color:var(--ink)}
.fl-ic{display:grid;place-items:center;opacity:.42;filter:grayscale(1);transition:opacity .35s,filter .35s}
.tl-mark{width:14px;height:14px;display:block}
.fl-s.on,.fl-s.done{color:var(--ink)}
.fl-s.on{background:#fff;box-shadow:inset 0 0 0 1px #D9DBDF,0 2px 6px -3px rgba(0,0,0,.14)}
.fl-s.on .fl-ic,.fl-s.done .fl-ic{opacity:1;filter:none}
.fl-s.lv .fl-l::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-radius:50%;background:#34C759;vertical-align:1px;animation:livedot 1.4s ease-in-out infinite}
@keyframes livedot{50%{opacity:.25}}
.fl-line{flex:1;min-width:8px;height:1.5px;border-radius:1px;background:#E7E8EB;position:relative;overflow:hidden}
.fl-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#D8B660,#A97C19);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.fl-line.done::after{transform:none}

/* the windows: one at a time, each an outlined box of its own, swaying in from the side it lives on */
.fl-stage{position:relative;height:621px;margin:-1px -1px -16px;border-radius:0;background:none;overflow:hidden;box-shadow:none}
.fw{position:absolute;inset:1px 1px 16px;display:flex;opacity:0;transform:translateX(40px) rotate(1.4deg) scale(.985);transform-origin:50% 100%;filter:blur(3px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .45s}
.fw.past{transform:translateX(-40px) rotate(-1.4deg) scale(.985)}
.fw.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.rs{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:14px;background:#fff;overflow:hidden;font:400 13.5px/1.45 "Inter",sans-serif;color:#15181E;
  box-shadow:0 0 0 1px #D9DBDF,0 24px 48px -36px rgba(20,20,30,.32)}
.fx-wait[data-fx="fade"]{opacity:0;transform:translateY(4px)}
.fx-wait[data-fx="write"]{clip-path:inset(0 100% 0 0)}
[data-fx]{transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1),clip-path var(--fx-d,.5s) cubic-bezier(.4,0,.2,1)}

/* the CRM: SmartMoving for the movers, HighLevel for the others */
.cr-top{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;flex:none}
.cr-top .tl-mark{width:20px;height:20px}
.cr-brand{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;letter-spacing:-.015em}
.cr-nav{display:flex;gap:14px;margin-left:auto;font-size:12.5px}
.cr-nav span{padding:14px 0 12px;border-bottom:2px solid transparent}
.cr-me{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:10.5px;font-weight:600;flex:none}
.cr-logo{display:block;height:19px;width:auto;flex:none}
.rs-sm .cr-top{background:#fff;box-shadow:inset 0 -1px 0 #E5E7EB}
.rs-sm .cr-nav span{color:#6B7280}
.rs-sm .cr-nav .on{color:#0973EB;border-color:#0973EB}
.rs-sm .cr-me{background:#0973EB;color:#fff}
.rs-hl .cr-top{background:#0B1220}
.rs-hl .cr-loc{padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.1);font-size:12px;color:#E5E7EB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rs-hl .cr-nav span{color:rgba(255,255,255,.62)}
.rs-hl .cr-nav .on{color:#fff;border-color:#2896FB}
.rs-hl .cr-me{background:#2896FB;color:#fff}
.cr-lh{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:16px 16px 10px}
.cr-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ECEDF0;color:#fff;font-size:15px;font-weight:600;transition:background .4s}
.cr-av.on{background:#5B6B86}
.cr-who b{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em;color:#B5B8BF;transition:color .4s}
.cr-who b.on{color:#155EEF}
.rs-sm .cr-who b.on{color:#0973EB}
.cr-who span{font-size:12.5px;color:#6B7280}
.cr-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.cr-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:#EEF2F8;color:#2B4A7A}
.cr-tag.oc{background:#E9F8EE;color:#147A3B}
.cr-tag.oc::before{content:"";width:6px;height:6px;border-radius:50%;background:#22A04B;animation:livedot 1.4s ease-in-out infinite}
.cr-tag.urgent{background:#D92D20;color:#fff;animation:tagpop .5s cubic-bezier(.3,1.4,.5,1)}
.cr-tag.booked{background:#EAF2FF;color:#155EEF}
@keyframes tagpop{from{transform:scale(.6);opacity:0}}
.cr-tabs{display:flex;align-items:flex-end;gap:18px;padding:0 16px;box-shadow:inset 0 -1px 0 #ECEDF0;font-size:13px;color:#6B7280;flex:none}
.cr-tabs span{padding:9px 0 8px;border-bottom:2px solid transparent}
.cr-tabs .on{color:#15181E;font-weight:600;border-color:#155EEF}
.rs-sm .cr-tabs .on{border-color:#0973EB}
.cr-tabs em{margin-left:auto;padding-bottom:9px;font-style:normal;font-size:12px;color:#6B7280}
.cr-list{flex:1;min-height:0;overflow:auto;margin:0;padding:2px 16px 8px}
.cr-r{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;box-shadow:inset 0 -1px 0 #F1F2F4;transition:background .8s}
.cr-r dt{font-size:12.5px;font-weight:600;color:#2B3A55}
.cr-r dd{margin:0;font-size:13.5px;color:#15181E;overflow-wrap:anywhere}
.cr-r.empty dd::before{content:"";display:inline-block;width:26px;height:2px;border-radius:2px;background:#E3E4E8;vertical-align:middle}
.cr-r.fresh{background:linear-gradient(90deg,rgba(216,182,96,.18),rgba(216,182,96,0) 70%)}
.cr-r.fresh dd{animation:write .7s cubic-bezier(.4,0,.2,1) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Outlook: the booking on the company calendar */
.ol-t{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;background:#fff;box-shadow:inset 0 -1px 0 #EDEBE9;flex:none}
.ol-wf{display:grid;grid-template-columns:repeat(3,3.5px);gap:2.5px;margin-right:2px}
.ol-wf i{width:3.5px;height:3.5px;border-radius:1px;background:#424242}
.ol-a{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:#1F1F1F}
.ol-a .tl-mark{width:20px;height:20px}
.ol-crumb{font-size:12.5px;color:#616161}
.ol-s{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:28px;padding:0 10px;border-radius:7px;background:#F3F2F1;color:#616161;font-size:12.5px;min-width:96px}
.ol-s svg,.sl-q svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ol-me2{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#A97C19;color:#fff;font-size:10.5px;font-weight:600;flex:none}
.ol-b{flex:1;min-height:0;overflow:auto;padding:12px;background:#FAF9F8}
.ol-e{border-radius:10px;background:#fff;box-shadow:0 0 0 1px #E1DFDD,0 6px 16px -12px rgba(0,0,0,.3);border-top:3px solid #0F6CBD;padding:14px 14px 12px}
.ol-e.urgent{border-top-color:#C50F1F}
.ol-eh{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:start}
.ol-sq{width:12px;height:12px;margin-top:5px;border-radius:3px;background:#0F6CBD}
.ol-e.urgent .ol-sq{background:#C50F1F}
.ol-eh b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#0F6CBD}
.ol-e.urgent .ol-eh b{color:#C50F1F}
.ol-eh span{font-size:12.5px;color:#616161}
.ol-cat{height:22px;padding:0 9px;border-radius:5px;background:#E6F2FB;color:#0F548C;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.ol-e.urgent .ol-cat{background:#FDE7E9;color:#A4262C}
.ol-r{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;margin-top:10px;font-size:13px;color:#242424}
.ol-r svg{width:16px;height:16px;margin-top:1px;fill:none;stroke:#616161;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ol-att{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 12px;border-radius:7px;box-shadow:inset 0 0 0 1px #D1D1D1;font-size:12.5px;color:#0F6CBD}
.ol-att svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ol-n{margin-top:12px;padding-top:10px;box-shadow:inset 0 1px 0 #EDEBE9}
.ol-n p{margin:3px 0 0;font-size:12.5px;color:#424242}
.ol-n p.h{margin:0 0 4px;font-weight:600;color:#242424}
.ol-n p span{color:#616161}
.ol-day{margin-top:12px}
.ol-day p{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#616161}
.ol-d{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;align-items:center;margin-top:5px;font-size:12px;color:#424242}
.ol-d time{color:#616161;font-variant-numeric:tabular-nums}
.ol-d span{padding:6px 9px;border-radius:5px;background:#F0F0F0;border-left:3px solid #C8C6C4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-d.me span{background:#DEECF9;border-left-color:#0F6CBD;color:#0F3A5E;font-weight:600}
.ol-e.urgent ~ .ol-day .ol-d.me span{background:#FDE7E9;border-left-color:#C50F1F;color:#7A1E1E}

/* Slack: the team hears about it */
.sl-top{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;background:#3F0E40;color:#fff;flex:none}
.sl-tile{display:grid;place-items:center}
.sl-tile .tl-mark{width:20px;height:20px}
.sl-ws{font-size:14px;font-weight:700}
.sl-q{margin-left:auto;height:26px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.75);font-size:12px;display:inline-flex;align-items:center;gap:6px;min-width:96px}

.sl-ch{display:flex;align-items:center;gap:8px;padding:10px 14px;box-shadow:inset 0 -1px 0 #E8E8E8;font-size:14.5px;font-weight:700;flex:none}
.sl-ch em{margin-left:auto;display:flex;font-style:normal}
.sl-ch em i{width:20px;height:20px;margin-left:-5px;border-radius:5px;box-shadow:0 0 0 2px #fff;display:grid;place-items:center;font:600 9px/1 "Inter";color:#fff;font-style:normal}
.sl-feed{flex:1;min-height:0;overflow:auto;padding:12px 14px}
.sl-intro b{display:block;font-size:17px;font-weight:800}
.sl-intro span{display:block;margin-top:2px;font-size:13px;color:#616061}
.sl-day{display:flex;align-items:center;margin:14px 0 10px;font-size:11.5px;font-weight:700;color:#1D1C1D}
.sl-day::before,.sl-day::after{content:"";flex:1;height:1px;background:#E8E8E8}
.sl-day span{padding:3px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px #E8E8E8}
.sl-msg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px}
.sl-bot{width:36px;height:36px;border-radius:7px;overflow:hidden}
.sl-bot svg{width:100%;height:100%;display:block}
.sl-who{display:flex;align-items:center;gap:6px;font-size:14px}
.sl-who b{font-weight:800}
.sl-app{padding:0 4px;border-radius:3px;background:#E8E8E8;font-size:10px;font-weight:700;color:#616061}
.sl-time{font-size:12px;color:#616061}
.sl-lead{margin-top:2px;font-size:14px}
.sl-lead b{font-weight:700}
.sl-att{margin-top:8px;padding:2px 0 2px 12px;border-left:4px solid #2EB67D}
.sl-att.urgent{border-left-color:#E01E5A}
.sl-f{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.sl-f div span{display:block}
.sl-f .k{font-size:13px;font-weight:700}
.sl-f .v{font-size:13px;color:#1D1C1D;overflow-wrap:anywhere}
.sl-links{display:flex;gap:14px;margin-top:10px;font-size:13px;color:#1264A3}
.sl-btns{display:flex;gap:8px;margin-top:10px}
.sl-b{height:30px;padding:0 12px;border-radius:5px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px #BBBBBB;color:#1D1C1D}
.sl-b.pri{background:#007A5A;box-shadow:none;color:#fff}
.sl-seen{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#616061}
.sl-seen i{width:18px;height:18px;border-radius:5px;background:#A97C19;color:#fff;display:grid;place-items:center;font:600 8.5px/1 "Inter";font-style:normal}
.sl-c{margin:0 14px 14px;padding:10px 12px;border-radius:8px;box-shadow:inset 0 0 0 1px #BBBBBB;color:#868686;font-size:13.5px;flex:none}

/* the script under the transcript: one line at a time, a full run of the desk in about two minutes */
.chips{padding:12px 18px 16px}
.ch-tabs{display:inline-flex;gap:2px;margin-bottom:12px;padding:3px;border-radius:999px;background:#F1F1F3}
.ch-t{border:0;background:none;padding:6px 12px;border-radius:999px;font:500 12.5px/1 "Inter",sans-serif;color:var(--ink3);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.ch-t.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px #E4E4E8}
.sc .clab{display:flex;justify-content:space-between;align-items:baseline}
.sc-n{font-variant-numeric:tabular-nums}
.sc-box{position:relative;overflow:hidden;border-radius:14px}
.sc-line{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;border:0;cursor:pointer;padding:12px 14px;border-radius:14px;
  background:#FBF7EC;box-shadow:inset 0 0 0 1px #EADFC2;font:500 15px/1.4 "Inter",sans-serif;color:var(--ink);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.sc-line:hover{background:#F8F1DF}
.sc-line q{flex:1;quotes:'"' '"'}
.sc-line small{flex:none;font-size:11.5px;font-weight:500;color:var(--gold-ink)}
.sc-line.out{transform:translateY(-110%);opacity:0}
.sc-line.in{transform:translateY(110%);opacity:0;transition:none}
.sc-line.done{background:#F2F8F3;box-shadow:inset 0 0 0 1px #CFE6D4;cursor:default}
.sc-dots{display:flex;gap:4px;margin-top:10px}
.sc-dots i{flex:1;height:3px;border-radius:2px;background:#E7E7EB;transition:background .4s}
.sc-dots i.done{background:#B08A2E}
.sc-dots i.on{background:#E6D3A2}

/* the calculator: every number can be typed over as well as dragged */
.cc-s{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;min-width:0}
.cc-s label{font-size:13.5px;line-height:1.3;color:var(--ink2)}
.cc-s .cc-v{-webkit-appearance:none;appearance:none;width:104px;margin:0;height:32px;padding:0 9px;border:0;border-radius:8px;background:#F4F4F6;text-align:right;font:600 16px/1 "Inter",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s,background .2s}
.cc-s .cc-v:hover{box-shadow:inset 0 0 0 1px #DADAE0}
.cc-s .cc-v:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 1.5px #B08A2E}
.cc-s input[type="range"]{grid-column:1/-1}
.cc-src{max-width:760px;margin:10px auto 0;text-align:center;font-size:12px;line-height:1.55;color:var(--ink3)}
@media (max-width:760px){.fl-rail{gap:4px}.fl-s{padding:0 9px;font-size:12px}.fl-ic{display:none}.fl-line{min-width:6px}.cc-s .cc-v{width:110px}}
@media (min-width:761px) and (max-width:1180px){.cc-sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}}

/* ---------- the Email channel (26 Oct): compose in Gmail on the left, the email's way through the desk on the right ---------- */
.em{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:22px;align-items:start;max-width:1040px;margin:0 auto}
.em .mc-send{cursor:pointer}
.em-alt{display:flex;align-items:center;gap:18px;margin:12px 4px 0;font-size:13.5px}
.em-alt a,.em-copy{padding:0;border:0;background:none;color:var(--ink2);font:inherit;text-decoration:underline;text-decoration-color:#C9C9CF;text-underline-offset:3px;cursor:pointer}
.em-alt a:hover,.em-copy:hover{color:var(--ink)}
.em-track{padding:20px 22px 22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -44px rgba(10,10,20,.3)}
.em-h{font-size:15px;font-weight:600}
.em-status{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.em-status.bad{color:#B3261E}
.em-steps{display:grid;gap:0;margin:16px 0 0;padding:0;list-style:none}
.em-steps li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:11px;padding:7px 0;font-size:14px;color:var(--ink3);transition:color .3s}
.em-steps li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:31px;bottom:-7px;width:1px;background:var(--line)}
.em-steps li.done:not(:last-child)::after{background:#D9C38B}
.em-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #DADAE0;color:transparent;
  transition:background .3s,box-shadow .3s,color .3s}
.em-steps svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.em-steps li.done{color:var(--ink)}
.em-steps li.done i{background:linear-gradient(180deg,#D8B660,#A97C19);box-shadow:none;color:#fff}
.em-steps li.now i{box-shadow:inset 0 0 0 1.5px var(--gold);animation:em-pulse 1.4s ease-in-out infinite}
@keyframes em-pulse{50%{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 5px rgba(169,124,25,.14)}}
.em-steps em{font-style:normal;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.em-reply,.em-rec{margin-top:18px;animation:em-in .5s var(--ease) both}
.em-reply[hidden],.em-rec[hidden]{display:none}
@keyframes em-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.em-cap{margin-bottom:8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.em-msg{padding:14px 16px 15px;border-radius:12px;background:#F8F9FA;box-shadow:inset 0 0 0 1px #ECEDEF}
.em-mh{display:flex;align-items:center;gap:10px}
.em-mh>div{min-width:0}
.em-av{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--tone,#1C2B3D);color:#fff;font-size:13px;font-weight:600}
.em-mh p{font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-from,.em-to{font-size:12.5px;color:var(--ink3)}
.em-when{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.em-body{margin-top:11px;font-size:14px;line-height:1.58;white-space:pre-wrap;color:#1F1F1F}
.em-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:0;padding:14px 16px;border-radius:12px;background:#FFFDF7;box-shadow:inset 0 0 0 1px #EFE3C4;font-size:13.5px}
.em-fields dt{color:var(--ink3)}
.em-fields dd{margin:0;font-weight:500}
@media (max-width:880px){.em{grid-template-columns:minmax(0,1fr)}}
.em .mc-send span{white-space:nowrap}
.em .gm-chip{min-width:0;max-width:100%}
.em .gm-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.em .gm-tools,.em .mc-row em{display:none}.em .mc-row{font-size:14px}.em .gm-chip{font-size:13.5px}}


/* ═══ ROUND 6 (26 Oct): Heidar's Email and cost tabs in our colours, the one-pager, a switcher that glides ═══ */
/* Email and cost sit in the middle of the screen, as his do */
.chan.mid{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 168px);padding:12px 0 28px}
.chan.mid .intro{margin:0 auto 30px}
.chan[data-pane="cost"]{padding-bottom:96px}

/* the Email tab: one Gmail card, centred */
.em{display:block;max-width:640px;margin:0 auto}
.em .mc{box-shadow:0 0 0 1px #E3E3E8,0 30px 60px -38px rgba(10,10,20,.32)}
.gm-subj{display:flex;align-items:center;gap:7px;cursor:text}
.em-code{flex:none;font-weight:600;white-space:nowrap;color:var(--ink)}
.em-subj{flex:1;min-width:0;margin:0;padding:0;border:0;outline:none;background:none;font:600 14.5px/1.4 "Inter",sans-serif;color:var(--ink);text-overflow:ellipsis}
.em .mc-body{min-height:180px;resize:none}
.em .mc-body:focus,.em-subj:focus{background:none}
.gm-chip i{background:#D93025}
.mc-foot .gm-trash{width:18px;height:18px;margin-left:auto;fill:none;stroke:#444746;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.em .pane-note{margin-top:14px;line-height:1.65}
.em-other{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:#CFCFD5;text-underline-offset:3px}
.em-other:hover{text-decoration-color:var(--ink)}

/* the cost tab: three white cards, the money in gold, one row of sliders, the sources folded away */
.cc{width:100%;max-width:1140px;margin:0 auto}
.cc-card{justify-content:space-between;gap:26px;min-height:172px;padding:22px 24px 20px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 20px 44px -38px rgba(20,20,30,.3)}
.cc-card b{font-size:min(36px,12.5cqw);line-height:1}
.cc-card span{order:0;font-size:14.5px;color:var(--ink2)}
.cc-card.big{background:#fff;box-shadow:0 0 0 1.5px #E6D5A8,0 26px 52px -38px rgba(169,124,25,.5)}
.cc-card.big span{color:var(--ink2)}
.cc-card.big b{font-size:min(54px,15.5cqw);color:var(--gold)}
.cc-sliders{gap:34px;margin-top:12px;padding:22px 26px 18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cc-s label{font-size:13px;color:var(--ink2)}
.cc-s .cc-v{width:7.2ch;height:auto;padding:2px 0;border-radius:0;background:none;box-shadow:none;font-size:17px;text-align:right;border-bottom:1.5px dashed transparent;transition:border-color .2s}
.cc-s .cc-v:hover{box-shadow:none;border-bottom-color:#D6D6DC}
.cc-s .cc-v:focus{background:none;box-shadow:none;border-bottom-color:var(--gold)}
.cc-s input[type="range"]{margin:10px 0 4px}
.cc-src{max-width:720px;margin:16px auto 0;text-align:center;font-size:12.5px;line-height:1.55;color:var(--ink3)}
.cc-src summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--ink2)}
.cc-src summary::-webkit-details-marker{display:none}
.cc-src summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.cc-src[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.cc-src p{margin-top:8px}
.cc-src[open] p{animation:stin .45s var(--ease) both}

/* the one-pager button: centred at the foot of the screen while the cost tab is open (not full width, so Safari paints no band) */
.op-open{position:fixed;z-index:20;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));margin:0;padding:15px 26px;border:0;border-radius:999px;cursor:pointer;
  font:600 15px/1 "Inter",sans-serif;color:#fff;white-space:nowrap;text-shadow:0 1px 1px rgba(74,48,2,.32);
  background:linear-gradient(180deg,#D3AC52 0%,#B88A2C 52%,#9A7215 100%);
  box-shadow:0 0 0 5px rgba(250,250,250,.92),0 0 0 6px #E6E6EA,inset 0 1px 0 rgba(255,255,255,.4),0 18px 34px -14px rgba(120,84,10,.55);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,18px);
  transition:opacity .35s var(--ease),transform .55s var(--spring),visibility 0s linear .55s,filter .2s}
body[data-chan="cost"] .op-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:.5s,.5s,0s,0s}
body.op-on .op-open{opacity:0;visibility:hidden;transition-delay:0s,0s,.35s,0s}
.op-open:hover{filter:brightness(1.06)}
.op-open:active{transform:translate(-50%,0) scale(.97)}
.op-open:focus-visible{outline:2px solid var(--gold);outline-offset:8px}

/* the pop-up: the numbers on the left, one question at a time on the right */
html.op-lock{overflow:hidden}
.op{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(18,15,9,0);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .35s var(--ease),backdrop-filter .35s,-webkit-backdrop-filter .35s}
.op.in{background:rgba(18,15,9,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.op-card{position:relative;display:grid;grid-template-columns:262px minmax(0,1fr);width:min(860px,100%);max-height:calc(100svh - 40px);overflow:auto;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 44px 90px -34px rgba(20,14,4,.45);opacity:0;transform:translateY(20px) scale(.96);
  transition:opacity .28s var(--ease),transform .5s var(--spring)}
.op.in .op-card{opacity:1;transform:none}
.op-x{position:absolute;z-index:2;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s}
.op-x:hover{background:#F1F1F3;color:var(--ink)}
.op-x svg{width:20px;height:20px}
.op-side{display:flex;flex-direction:column;padding:30px 26px 26px;background:#F7F5F0;border-right:1px solid #ECE7DB}
.op-k{font:500 11.5px/1.3 "Inter",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.op-nums{margin:12px 0 0}
.op-nums div{padding:12px 0;border-bottom:1px solid #E9E4D8}
.op-nums dt{font-size:12.5px;color:var(--ink2)}
.op-nums dd{margin:3px 0 0;font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.op-nums dd.g{color:var(--gold)}
.op-list{display:grid;gap:9px;margin:18px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.45;color:var(--ink2)}
.op-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px}
.op-list svg{width:15px;height:15px;margin-top:2px;color:var(--gold);stroke-width:2.4}
.op-by{margin-top:auto;padding-top:20px;font-size:12.5px;color:var(--ink3)}
.op-main{display:flex;flex-direction:column;min-width:0;padding:34px 36px 26px}
.op-ask{display:flex;flex-direction:column}
.op-main h3{margin-top:10px;font:600 30px/1.12 "Inter",sans-serif;letter-spacing:-.03em;color:var(--ink)}
.op-p{margin-top:12px;max-width:44ch;font-size:15px;line-height:1.55;color:var(--ink2)}
.op-steps{display:grid;margin-top:24px}
.op-step{grid-area:1/1;display:flex;flex-direction:column;gap:9px;opacity:0;visibility:hidden;transform:translateX(26px);
  transition:opacity .28s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.op-step.past{transform:translateX(-26px)}
.op-step.on{opacity:1;visibility:visible;transform:none;transition-delay:.1s,.1s,0s}
.op-step>span{font-size:13.5px;font-weight:500;color:var(--ink)}
.op-step input,.op-step select,.op-step textarea{width:100%;height:50px;margin:0;padding:0 15px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #DCDCE1;
  font:400 16px/1.4 "Inter",sans-serif;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .2s}
.op-step select{padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2354545B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.op-step textarea{height:96px;padding:13px 15px;resize:none}
.op-step input::placeholder,.op-step textarea::placeholder{color:#A9A9B0}
.op-step input:focus,.op-step select:focus,.op-step textarea:focus{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 4px rgba(169,124,25,.13)}
.op-step.bad input,.op-step.bad select{box-shadow:inset 0 0 0 1.5px #C5352B,0 0 0 4px rgba(197,53,43,.1);animation:shake .38s var(--ease)}
@keyframes shake{25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.op-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.op-err{min-height:20px;margin-top:10px;font-size:13px;color:#B3261E}
.op-nav{display:flex;align-items:center;gap:12px;margin-top:6px}
.op-back,.op-next,.op-home{height:44px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font:600 14.5px/1 "Inter",sans-serif;white-space:nowrap;transition:filter .2s,opacity .25s,transform .2s var(--ease)}
.op-back,.op-home{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #DCDCE1}
.op-back:hover,.op-home:hover{box-shadow:inset 0 0 0 1px #B9B9C0}
.op-back.off{opacity:0;pointer-events:none}
.op-next{margin-left:auto;color:#fff;text-shadow:0 1px 1px rgba(74,48,2,.32);background:linear-gradient(180deg,#D3AC52 0%,#B88A2C 52%,#9A7215 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -10px rgba(120,84,10,.6)}
.op-next:hover{filter:brightness(1.06)}
.op-next:active,.op-back:active{transform:scale(.97)}
.op-next.busy{opacity:.7;cursor:progress}
.op-dots{flex:1;display:flex;justify-content:center;gap:6px}
.op-dots i{width:6px;height:6px;border-radius:50%;background:#DEDEE3;transition:background .3s,transform .35s var(--spring)}
.op-dots i.done{background:#D9C38B}
.op-dots i.on{background:var(--gold);transform:scale(1.35)}
.op-fine{margin-top:18px;text-align:center;font-size:12.5px;color:var(--ink3)}
.op-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:300px;text-align:center;animation:stin .55s var(--ease) both}
.op-done[hidden]{display:none}
.op-ok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--gold-soft);color:var(--gold);box-shadow:inset 0 0 0 1px #E8D9B2}
.op-ok svg{width:24px;height:24px;stroke-width:2.6}
.op-done h3{margin-top:4px}
.op-done-p{max-width:36ch;font-size:15px;line-height:1.55;color:var(--ink2);text-wrap:balance}
.op-home{margin-top:8px}

/* the transcript card's switcher: one lozenge glides between the two tabs, the panels blur out and their pieces come in in turn */
.ch-tabs{position:relative}
.ch-t,.ch-t.on{position:relative;z-index:1;background:none;box-shadow:none;transition:color .35s var(--ease)}
.ch-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px #E4E4E8;
  transition:transform .52s var(--spring),width .52s var(--spring)}
.ch-p{transition:opacity .2s var(--ease),filter .2s,transform .22s var(--ease)}
.ch-p.ch-out{opacity:0;filter:blur(5px);transform:translateY(-5px)}
.ch-p.ch-in>*{animation:stin .5s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.ch-p.ch-in .chip{animation:stin .45s var(--ease) both;animation-delay:calc(var(--j,0) * 45ms + 120ms)}

@media (max-width:760px){
  .chan.mid{min-height:0;padding:0 0 12px}
  .chan[data-pane="cost"]{padding-bottom:84px}
  .cc-card{min-height:118px;gap:18px}
  .cc-sliders{gap:22px;padding:20px 20px 16px}
  .op-open{bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:14px 22px;font-size:14.5px}
  .op{padding:12px}
  .op-card{grid-template-columns:minmax(0,1fr);max-height:calc(100svh - 24px)}
  .op-side{order:2;padding:16px 20px 18px;border-right:0;border-top:1px solid #ECE7DB}
  .op-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
  .op-nums div{padding:0;border:0}
  .op-nums dt{font-size:11.5px;line-height:1.3}
  .op-nums dd{font-size:18px}
  .op-list,.op-by{display:none}
  .op-main{padding:26px 20px 18px}
  .op-main h3{font-size:26px;padding-right:30px}
  .op-p{font-size:14.5px}
  .op-x{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){.chan.enter [data-st],.ch-p.ch-in>*,.ch-p.ch-in .chip{animation:none}.op,.op-card,.op-step,.op-open{transition:none}}

/* ═══ ROUND 7 (26 Oct): Email and cost fit the screen, no page scroll, like Heidar's ═══
   try.js sets --mid-h (the height left under the header) and --fit (a zoom below 1 only when a short screen needs it). */
body[data-chan="email"] .try,body[data-chan="cost"] .try{padding-bottom:0}
body[data-chan="email"] .fine,body[data-chan="cost"] .fine{display:none}
.chan.mid{min-height:var(--mid-h,calc(100svh - 168px));padding:16px 0 22px}
.chan.mid>*{zoom:var(--fit,1)}
.chan[data-pane="cost"]{padding-bottom:92px}
@media (max-width:760px){
  .chan.mid{padding:6px 0 14px}
  .chan[data-pane="cost"]{padding-bottom:80px}
  .chan.mid .intro{margin-bottom:20px}
  .em .mc-body{min-height:120px}
  /* the money on its own row, the other two side by side, the sliders two by two */
  .cc-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cc-card.big{grid-column:1/-1;order:-1}
  .cc-card,.cc-card.big{min-height:0;gap:8px;padding:14px 16px 13px;border-radius:16px}
  .cc-card b{font-size:26px}
  .cc-card.big b{font-size:40px}
  .cc-card span{font-size:13px}
  .cc-sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding:16px 16px 12px;border-radius:16px}
  .cc-s{gap:6px 8px}
  .cc-s label{font-size:12.5px}
  .cc-s .cc-v{width:auto;max-width:78px;font-size:15px}
  .cc-src{margin-top:10px}
}

/* ---------- the channels as one row (Mikail, 1 Nov, after a pricing page he sent): on a wide screen the chosen
   channel sits in the middle and its neighbours wait at the window's edges, smaller, faded and a little blurred.
   A switch slides the whole row and the stage eases to the new channel's height; a click on a neighbour's edge
   switches to it. try.js sets --off (places from the chosen one) and --step (one place, in px). Under 1180px, and
   with reduced motion, the channels keep the fade they had. Nothing here is fixed or sticky, so the iPhone edges
   are untouched. */
.stage{position:relative}
.stage.row{width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip;transition:height .62s var(--ease)}
.stage.row>.chan{width:var(--w,1160px);margin-left:auto;margin-right:auto}
.stage.row>.chan{--sc:1;--op:1;--bl:0px;transform-origin:50% 0;
  transform:translateX(calc(var(--off,0) * var(--step,1200px))) scale(var(--sc));opacity:var(--op);filter:blur(var(--bl));
  transition:transform .66s var(--ease),opacity .5s var(--ease),filter .5s var(--ease),visibility 0s}
.stage.row>.chan:not(.on){position:absolute;top:0;left:0;right:0}
.stage.row>.chan.side{--sc:.9;--op:.42;--bl:3px}
.stage.row>.chan.away{--sc:.9;--op:0;--bl:3px;visibility:hidden;transition:transform .66s var(--ease),opacity .5s var(--ease),filter .5s var(--ease),visibility 0s .66s}
.stage.row.still,.stage.row.still>.chan{transition:none}
.stage.row.hov-l,.stage.row.hov-r{cursor:pointer}
.stage.row.hov-l>.chan.side.l,.stage.row.hov-r>.chan.side.r{--op:.62;--bl:1.5px}