/* ═══════════════════════════════════════════════════════════════════════════
   /try in the Infinivo brand (studio/design-library/INFINIVO-BRAND.md), 2026-10-14.
   Loaded LAST, over tokens/shell/casefile/channels.css, in the same slot the
   Framer-template layer used: it changes the look, not the mechanics. Every id,
   state class and animation hook is untouched.
   Geist + Geist Mono, light, cool greys, one cobalt (#2545a7), hairlines not
   shadows, 16px cards, pill buttons in ink.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#2545a7;
  --navy-deep:#1d3888;
  --glow:#5a74c4;
  --peri:#b7c3e8;
  --ok:#14a05a;
  --ink:#15181e;
  --mut:#464b54;
  --faint:#6b707a;
  --hair:#e7e8eb;
  --hair-soft:#f3f4f6;
  --prac-accent:#2545a7;
  --e:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.16,1,.3,1);

  --t-bg:#fcfcfd; --t-card:#f3f4f6; --t-card-dark:#e7e8eb; --t-white:#fff;
  --t-serif:'Geist',system-ui,-apple-system,sans-serif;
  --t-besley:'Geist',system-ui,-apple-system,sans-serif;
  --t-sans:'Geist',system-ui,-apple-system,sans-serif;
  --t-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --t-sh-card:inset 0 0 0 1px #e7e8eb;
  --t-sh-raised:inset 0 0 0 1px #d9dbdf;
  --t-sh-soft:inset 0 0 0 1px #e7e8eb;
  --t-sh-nav:inset 0 0 0 1px #e7e8eb,0 1px 2px rgba(21,24,30,.04);
}

body{background:var(--t-bg);font-family:var(--t-sans);font-weight:400;color:var(--ink)}
.mono{font-family:var(--t-mono)}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--navy)}

/* ── template nav: logo · desk rail · booking pill ── */
.chrome{padding:24px 24px 0}
.tnav{pointer-events:auto;position:relative;margin:0 auto;width:max-content;max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:20px;padding:6px 6px 6px 20px;border-radius:16px;
  background:var(--t-white);box-shadow:var(--t-sh-nav)}
.tnav-logo{flex:none;display:block;font:600 21px/40px var(--t-sans);letter-spacing:-.03em;color:var(--ink);
  white-space:nowrap;text-decoration:none;transition:opacity .1s var(--e)}
.tnav-logo i{font-style:normal;color:var(--navy)}
.tnav-logo:hover{opacity:.72}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;white-space:nowrap;
  padding:10px 16px;border-radius:16px;font:500 16px/1.2 var(--t-serif);background:var(--t-white);color:var(--ink);
  transition:padding .1s var(--e),gap .1s var(--e)}
.tbtn.black{background:#2545a7;color:#fff}
.tbtn.black:hover{background:#1d3888}
.tbtn .ic{width:0;height:19px;margin-left:-10px;opacity:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:width .1s var(--e),opacity .1s var(--e),margin .1s var(--e)}
@media (hover:hover){
  .tbtn:hover{padding:10px 10px 10px 16px;gap:8px}
  .tbtn:hover .ic{width:19px;opacity:1;margin-left:0}
}

/* ── both rails = the template's step indicator ── */
.prac,.seg{border:1px solid rgba(0,0,0,.1);background:var(--t-card);border-radius:500px;padding:1px;gap:4px;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.prac .ind,.seg .ind{background:var(--t-white);box-shadow:var(--t-sh-raised);border-radius:16px;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1),width .4s cubic-bezier(.34,1.3,.64,1),height .4s cubic-bezier(.34,1.3,.64,1)}
.pracb,.segb{font:500 16px/1.2 var(--t-sans);color:rgba(0,0,0,.58);padding:8px 16px;border-radius:16px;
  transition:color .25s var(--e),background-color .25s var(--e)}
.pracb[aria-selected="true"],.segb[aria-selected="true"]{color:#000}
@media (hover:hover){
  .pracb[aria-selected="false"]:hover,.segb[aria-selected="false"]:hover{color:#000;background:var(--t-card-dark)}
}
.chromestack{margin-top:12px;gap:0}
.seg{background:var(--t-card);box-shadow:none}
.pracfirm{font:500 14px/1.2 var(--t-sans);color:var(--mut);padding-top:10px}
.pracfirm b{color:var(--ink);font-weight:600}

/* ── scene headings: the template's eyebrow tag, serif headline, grey sub ── */
.eyebrow{display:none}

.intro h1,.costhead h1,.sitehead h2{font-family:var(--t-sans);font-weight:400;letter-spacing:-.045em;line-height:1.05;color:var(--ink);text-wrap:balance}
.intro h1,.costhead h1{margin-top:16px;font-size:clamp(36px,4.2vw,56px)}
.sitehead h2{margin-top:16px;font-size:clamp(28px,3vw,36px)}
.sitehead h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--mut)}
.intro .sub,.costhead .sub,.sitehead .sub{margin-top:16px;font:500 16px/1.45 var(--t-sans);color:var(--mut)}
.intro .sub b,.costhead .sub b,.sitehead .sub b{color:var(--ink);font-weight:600}
.stagew{padding-top:184px}

/* ── the call: template orb in a 200px slot (canvas keeps its headroom) ── */
.orbzone{width:200px;height:200px;margin-top:32px}
.halo{inset:-60px;background:radial-gradient(circle,rgba(37,69,167,.08),transparent 62%)}
.orbcv{inset:-50px;width:300px;height:300px}
.tap{margin-top:24px;font:500 14px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut);
  display:inline-flex;padding:8px 16px;border-radius:16px;background:var(--t-white);box-shadow:var(--t-sh-raised)}
.status{font:500 13px/1.3 var(--t-sans);letter-spacing:0;color:var(--mut)}
.cap{font-family:var(--t-serif);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cap .who{font-family:var(--t-sans);font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--faint)}
.cap.agent{color:var(--navy)}
.cap.agent .who{color:#8a9fdc}

/* break-it chips: white template pills */
.chips .clab{font:500 13px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut);margin-bottom:4px}
.chip{border:0;background:var(--t-white);box-shadow:var(--t-sh-raised);backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:8px 16px;font:500 14px/1.2 var(--t-sans);color:var(--ink)}
.chip:hover{border:0;color:#000;background:var(--t-card-dark);transform:none;box-shadow:var(--t-sh-raised)}
.chip.sent{color:var(--navy);background:var(--t-white);box-shadow:inset 0 0 0 1px var(--navy)}

/* ── the status bar: the template nav pill, docked at the bottom ── */
.glass{background:var(--t-white);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:16px;
  box-shadow:var(--t-sh-nav);padding:10px 12px 10px 22px;gap:16px}
.gseg{font:500 14px/1.2 var(--t-sans);color:var(--mut);align-items:center}
.gseg b{font-family:var(--t-besley);font-weight:600;color:var(--ink);letter-spacing:-.02em;font-size:15px}
.gseg.q b{color:var(--navy)}
.gseg em{font-family:inherit;font-style:normal;color:var(--ink)}
.gseg.wide{font-size:13px}
.gaddr{font:500 13px/1.2 var(--t-sans);color:var(--navy)}
.gdiv{background:rgba(0,0,0,.1)}
.gmute{font:500 14px/1.2 var(--t-sans);color:var(--mut)}
.gbtn{font:500 14px/1.2 var(--t-sans);color:var(--mut);padding:8px 12px;border-radius:16px;transition:background-color .1s var(--e),color .1s var(--e)}
.gbtn:hover{color:var(--ink);background:var(--t-card-dark)}
.gbtn.strong{background:#2545a7;color:#fff;box-shadow:none;font:500 16px/1.2 var(--t-serif);padding:10px 16px;margin:0}
.gbtn.strong:hover{background:#1d3888;color:#fff;transform:none;opacity:1}

/* ── the record card: a template card ── */
.revealcard{background:var(--t-white);border:0;border-radius:16px;box-shadow:var(--t-sh-card),0 40px 90px -40px rgba(0,0,0,.18);padding:24px 28px 20px}
.rec-k{font:500 12px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.rec-firm{font-family:var(--t-serif);font-style:normal;font-weight:500;font-size:22px;letter-spacing:-.01em;margin-top:6px;
  padding-bottom:14px;border-bottom:2px solid var(--t-card-dark);color:var(--ink)}
.rec-r{border-bottom:1px solid var(--t-card-dark);padding:7px 0}
.rec-r dt{font:500 12px/1.3 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.rec-r dd{font:500 14px/1.35 var(--t-sans);color:var(--ink)}
.rec-r dd.tbd{color:rgba(0,0,0,.3);font-style:normal}
.rec-stamp{border-radius:16px;border-width:1.5px;font:600 12px/1 var(--t-sans);letter-spacing:.08em;padding:8px 14px;
  border-color:var(--navy);color:var(--navy);background:var(--t-white)}
.rec-stamp.urgent{background:var(--navy);border-color:var(--navy);color:#fff}
.rec-stamp.open{border-color:rgba(0,0,0,.25);color:var(--mut)}
.rec-stampnote{font:500 11px/1.3 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.rec-note{border-top:1px solid var(--t-card-dark);font:500 12px/1.5 var(--t-sans);color:var(--mut)}

/* ── your site: the browser frame as a template card ── */
.browser{border:0;border-radius:16px;background:var(--t-white);box-shadow:var(--t-sh-card),0 34px 80px -34px rgba(0,0,0,.22)}
.bbar{background:var(--t-card);border-bottom:1px solid var(--t-card-dark);padding:12px 18px}
.bbar i{background:#d9dbdf}
.url{border:0;background:var(--t-white);border-radius:16px;box-shadow:var(--t-sh-soft);font:500 13px/1.2 var(--t-sans);color:var(--mut)}
.bnote{font:500 12px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.cue{background:var(--t-white);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:16px;box-shadow:var(--t-sh-nav);
  font:500 14px/1.2 var(--t-sans);color:var(--mut)}
.cue b{color:var(--ink);font-weight:600}
.cue .arr{color:var(--navy)}
.sitefoot{font:500 13px/1.3 var(--t-sans);letter-spacing:0;color:var(--faint)}
.sitefoot em{font-family:inherit;font-style:normal;color:var(--ink)}
.chan-site{padding-top:172px}

/* ── email: the Gmail windows stay Gmail (realism is the point), framed as cards ── */
.mailcard,.replycard{border-radius:16px;box-shadow:var(--t-sh-card),0 40px 90px -40px rgba(0,0,0,.2)}
.gm-refnote{font:500 13px/1.4 var(--t-sans);color:var(--faint)}
.pdot{background:#d9dbdf}
.pstep.on .pdot,.pstep.done .pdot{background:var(--navy);box-shadow:0 0 0 5px rgba(37,69,167,.12)}
.plab{font:500 12px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.pstep.on .plab,.pstep.done .plab{color:var(--ink)}
.pline{background:#d9dbdf}
.pline i{background:var(--navy)}
.pipenote{font:500 13px/1.4 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.pipe-alt{color:var(--navy)}

/* ── cost: the three figures become the template's stat cards ── */
.beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(1136px,94vw);align-items:stretch}
.beat{background:var(--t-card);border-radius:16px;box-shadow:var(--t-sh-soft);padding:24px;min-height:200px;
  text-align:left;justify-content:space-between;gap:10px}
.beat .n{order:-1;font-family:var(--t-besley);font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.beat.main{background:var(--t-white)}
.beat.main .n{font-size:clamp(40px,4.4vw,56px);color:var(--navy);letter-spacing:-.03em}
.beat .lab,.beat.main .lab{margin-top:auto;font:500 16px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.beat .sub2{font:500 13px/1.2 var(--t-sans);letter-spacing:0;color:var(--faint)}
.controls{width:min(1136px,94vw);background:var(--t-card);border-radius:16px;box-shadow:var(--t-sh-card);padding:24px 28px;margin-top:8px}
.ctl .lab{font:500 13px/1.35 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.ctl .val{font-family:var(--t-besley);font-weight:600;font-size:16px;color:var(--ink)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--navy) var(--fill,50%),#d9dbdf var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;border:0;background:#fff;box-shadow:var(--t-sh-raised),0 0 0 1px rgba(0,0,0,.06)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#d9dbdf}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--navy)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;background:#fff;box-shadow:var(--t-sh-raised)}
.stagew.cost{padding-top:184px}

/* ── the one-pager wizard: a template card with template buttons ── */
.modal{background:rgba(240,240,240,.7)}
.modal-card{border:0;border-radius:16px;background:var(--t-card);box-shadow:var(--t-sh-card),0 50px 110px -40px rgba(0,0,0,.25);padding:32px}
.modal-x{color:var(--faint);top:18px;right:22px}
.mc-k{font:500 13px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--navy)}
.modal-card h3{font-family:var(--t-serif);font-weight:500;font-size:30px;letter-spacing:-.02em;margin-top:10px}
.mc-sub{font:500 14px/1.5 var(--t-sans);color:var(--mut)}
.flab{font:500 13px/1.2 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.f input,.f select,.f textarea{border:0;border-radius:12px;background:var(--t-white);box-shadow:var(--t-sh-card);
  font:500 15px/1.4 var(--t-sans);padding:12px 14px;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{box-shadow:var(--t-sh-card),0 0 0 2px var(--navy)}
.f input::placeholder,.f textarea::placeholder{color:rgba(0,0,0,.3)}
.dict{border:0;box-shadow:var(--t-sh-raised)}
.dict:hover{color:var(--navy)}
.dict.live{background:var(--navy)}
.wiz-dots i{background:#d9dbdf}
.wiz-dots i.on{background:var(--navy)}
.wiz-back{border:0;background:var(--t-white);box-shadow:var(--t-sh-raised);color:var(--ink);font:500 16px/1.2 var(--t-serif);padding:10px 18px}
.wiz-back:hover{background:var(--t-card-dark)}
.mc-submit{background:#2545a7;color:#fff;box-shadow:none;font:500 16px/1.2 var(--t-serif);border-radius:16px;padding:12px 0}
.mc-submit:hover{background:#1d3888;opacity:1;transform:none}
.mc-submit.wiz-next{padding:10px 22px}
.mc-submit.ghost{background:var(--t-white);color:var(--ink);box-shadow:var(--t-sh-raised);border:0}
.mc-fine{font:500 12px/1.4 var(--t-sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.tk-word{font-family:var(--t-serif);font-style:normal;font-weight:500;font-size:40px;color:var(--ink)}
.tk-sub{font:500 15px/1.6 var(--t-sans);color:var(--mut)}
.tk-sub b{color:var(--ink)}
.tk-sub span{color:var(--navy)}

/* ── phones: one nav pill up top (logo + desk rail), the channel rail under it ── */
@media (max-width:900px){
  .chrome{padding:12px 12px 14px;background:linear-gradient(to bottom,#f0f0f0 72%,rgba(240,240,240,0))}
  .tnav{gap:8px;padding:5px 5px 5px 14px;width:100%}
  .tnav-logo{font-size:16px;line-height:34px}
  .tnav-cta{display:none}
  .tnav .prac{flex:1;min-width:0;max-width:none}
  .seg{position:relative;top:auto;right:auto;left:auto;transform:none}
  .chromestack{margin-top:8px}
  .pracb,.segb{font-size:14px;padding:7px 12px}
  .stagew{padding-top:178px}
  .chan-site{padding-top:150px}
  .stagew.cost{padding-top:178px}
  .beats{grid-template-columns:1fr;width:100%}
  .beat{min-height:0;padding:20px}
  .controls{padding:20px}
  .glass{padding:9px 10px 9px 16px}
}
@media (max-width:760px){
  .prac{gap:2px}
  .pracb{font-size:13px;padding:6px 8px}
  .segb{font-size:13px;padding:6px 10px}
  .glass{gap:10px;padding:8px 8px 8px 14px}
  .gseg,.gmute{font-size:13px}
}
@media (max-width:420px){
  #gcap{display:none}
}

/* ═══════════ compaction pass (2026-10-04, Heidar) ═══════════
   One bar at each edge, nothing in between that can collide: the header is
   opaque where content would scroll under it, the scenes centre only when
   they fit (safe center) and otherwise start below the header, and every
   focal object scales with the window's HEIGHT so a 720px laptop gets the
   whole scene without scrolling. The eyebrow pill is gone: the header
   already says whose desk and which channel. */
:root{--chrome-h:138px;--bar-h:92px;--orb:clamp(132px,24vh,200px)}
.eyebrow{display:none}
.chrome{padding:16px 24px 10px;
  background:linear-gradient(to bottom,var(--t-bg) 0,var(--t-bg) calc(100% - 14px),rgba(240,240,240,0) 100%)}
.chromestack{margin-top:8px}
.pracfirm{padding-top:8px;font-size:13px}

.stagew,.stagew.cost{min-height:100vh;min-height:100dvh;justify-content:safe center;
  padding:calc(var(--chrome-h) + 20px) 40px calc(var(--bar-h) + var(--safe-b))}
.chan-site{padding-top:calc(var(--chrome-h) + 16px)}
.sitehead{padding:0 40px 18px}

.intro h1,.costhead h1{margin-top:0;font-size:clamp(30px,min(4.2vw,6.4vh),56px)}
.sitehead h2{margin-top:0;font-size:clamp(24px,min(3vw,4.6vh),36px)}
.intro .sub,.costhead .sub,.sitehead .sub{margin-top:12px;font-size:clamp(14px,2vh,16px)}

/* the orb: one size variable, canvas keeps its 1.5x headroom */
.orbzone{width:var(--orb);height:var(--orb);margin-top:clamp(16px,3.2vh,32px)}
.orbcv{inset:calc(var(--orb) * -.25);width:calc(var(--orb) * 1.5);height:calc(var(--orb) * 1.5)}
.halo{inset:calc(var(--orb) * -.3)}
.tap{margin-top:clamp(12px,2.4vh,24px)}

/* bottom bars: compact pills, centred, never wider than the screen */
.glass{padding:9px 20px;gap:14px;bottom:calc(20px + var(--safe-b))}
.glass-solo{padding:6px}
.glass-solo .gbtn.strong{margin:0}

/* cost: stat cards and the controls card shrink with the window */
.beats{margin-top:clamp(16px,3vh,32px)}
.beat{min-height:clamp(120px,20vh,200px);padding:clamp(16px,2.4vh,24px)}
.beat .n{font-size:clamp(24px,3.6vh,32px)}
.beat.main .n{font-size:clamp(34px,6vh,56px)}
.beat .lab,.beat.main .lab{font-size:clamp(14px,1.9vh,16px)}
.controls{padding:clamp(16px,2.4vh,24px) 28px}
.ctl .top{margin-bottom:6px;min-height:0}

/* email: the compose window gives back height on short windows */
.gm-brand{margin-top:clamp(10px,2vh,18px)}
.gm-body{height:clamp(150px,30vh,284px)}
.gm-refnote{margin-bottom:8px}

@media (max-width:900px){
  :root{--chrome-h:124px;--bar-h:84px;--orb:clamp(128px,26vh,180px)}
  .chrome{padding:10px 12px 10px}
  .stagew,.stagew.cost{padding-left:16px;padding-right:16px}
  .chan-call .stagew,.chan-email .stagew{justify-content:flex-start}
  .chan-site .framewrap{padding-bottom:calc(24px + var(--safe-b))}
  .sitehead{padding:0 16px 14px}
  .beats{gap:8px}
  .beat{min-height:0}
  .controls{padding:18px}
  .gm-body{height:clamp(140px,28vh,240px)}
}
@media (max-width:900px){
  /* the frame is the point on a phone: the cue and the frame label step aside */
  .cue,.bnote{display:none}
  .sitefoot{padding:0 16px 12px}
  .url{max-width:none}
}
/* the slim call bar has room for the whole label on phones */
.glass .gseg .lg{display:inline}

/* ── call, on air: compact transcript, and the stage reserves the chips'
   height so a long utterance pushes the stack up instead of under them ── */
:root{--chips-h:118px}
.captions{height:100px;min-height:0;margin-top:clamp(10px,2vh,18px);width:min(620px,92vw)}
.cap{font-size:18px;line-height:1.42}
.cap .who{margin-bottom:4px;font-size:12px}
.cap .txt{-webkit-line-clamp:3}
.status{margin-top:8px}
body.oncall .chan-call .stagew{padding-bottom:calc(var(--bar-h) + var(--chips-h) + var(--safe-b))}
body.oncall .orbzone{--orb:clamp(110px,18vh,170px)}
.chips{gap:7px;max-width:760px;bottom:calc(var(--bar-h) - 14px + var(--safe-b))}
.chip{font-size:14px;padding:7px 14px}
.chips .clab{font-size:12px;margin-bottom:2px}
@media (max-height:760px){.captions{height:74px}.cap .txt{-webkit-line-clamp:2}}
@media (max-width:900px){
  :root{--chips-h:150px}
  .captions{height:88px}
  .cap{font-size:15px}
  .chip{font-size:13px;padding:6px 12px}
}

/* ── email finale: the reply and the record sit side by side IN FLOW, below
   the header, instead of absolutely centred on the window. Centred, a tall
   record pushed both cards' tops up under the header on laptop heights. ── */
@media (min-width:901px){
  body.m-done .chan-email .stagew{display:grid;grid-template-columns:repeat(2,minmax(0,520px));
    justify-content:center;align-content:start;align-items:start;gap:24px;
    padding-top:calc(var(--chrome-h) + 24px)}
  body.m-done .chan-email .stagew>*:not(.replycard):not(.revealcard){grid-column:1/-1}
  body.m-done .replycard,body.m-done .chan-email .revealcard{position:relative;left:auto;top:auto;width:auto;
    transform:none;animation:finalein .7s var(--e) backwards}
  body.m-done .chan-email .revealcard{animation-delay:.12s;max-height:calc(100dvh - var(--chrome-h) - 48px);padding:20px 26px 16px}
  .chan-email .revealcard .rec-r{padding:4.5px 0}
  .chan-email .revealcard .rec-r dd{font-size:13px}
  .chan-email .revealcard .rec-firm{padding-bottom:8px}
  .chan-email .revealcard .rec-note{margin-top:8px;padding-top:8px}
}
@keyframes finalein{from{opacity:0;transform:translateY(14px);filter:blur(4px)}}
/* phones: the wordmark and all four desks share one pill */
@media (max-width:420px){
  .tnav{gap:4px;padding-left:12px}
  .tnav-logo{font-size:15px;letter-spacing:-.03em}
  .prac{gap:0}
  .pracb{font-size:12.5px;padding:6px 7px}
}

/* ═════════ v5 (2026-10-14): pills stay pills; logo mark ═════════ */
.tbtn,.prac .ind,.seg .ind,.pracb,.segb,.chip,.glass,.cue,.url,.gbtn,.gbtn.strong,.mc-submit,.wiz-back,.tap{border-radius:999px}
.tnav{border-radius:999px;background:rgba(252,252,253,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.tnav-logo{display:inline-flex;align-items:center;gap:8px;font:600 19px/40px var(--t-sans);letter-spacing:-.035em}
.tnav-logo img{width:24px;height:24px;border-radius:7px}
.tbtn.black{font:500 14px/1 var(--t-sans);letter-spacing:-.01em;padding:0 16px;height:38px}
.pracb,.segb{font:500 14px/1.2 var(--t-sans);color:var(--faint);padding:7px 14px}
.pracb[aria-selected="true"],.segb[aria-selected="true"]{color:var(--ink)}
.prac,.seg{background:var(--t-card);border:1px solid var(--hair)}
.prac .ind,.seg .ind{background:#fff;box-shadow:inset 0 0 0 1px #d9dbdf}
.pracfirm{font:400 13px/1.2 var(--t-sans);color:var(--faint)}
.pracfirm b{color:var(--ink);font-weight:500}
.intro .sub,.costhead .sub,.sitehead .sub{font:400 16px/1.55 var(--t-sans)}
.intro .sub b,.costhead .sub b,.sitehead .sub b{font-weight:500}

/* ═════════ Call: the call card + transcript + live record ═════════ */
.chan-call .stagew.callstage{min-height:100vh;justify-content:flex-start;padding:178px 24px 96px}
.chan-call .intro{text-align:center}
.chan-call .intro h1{font-size:clamp(34px,4vw,54px)}
.callgrid{margin-top:48px;width:min(1120px,100%);display:grid;grid-template-columns:301px minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"phone tx lead";column-gap:24px;row-gap:14px;align-items:stretch}
.callgrid .phonecol{grid-area:phone;align-self:start}
.callgrid .txpane{grid-area:tx;min-height:631px}
.callgrid .lead{grid-area:lead;min-width:0}
.landnote{margin:10px 0 0;text-align:left;font:400 12.5px/1.45 var(--t-sans);color:#9a9fa8}
.halo{display:none}

/* ═════════ the phone: iOS 26, recreated in points (402 x 874) and scaled whole.
   Same build as the homepage's call perk (projects/infinivo-site-v5/web/components/home/ios.tsx). ═════════ */
.phonecol{display:flex;flex-direction:column;align-items:center;gap:12px}
.phonestage{display:block;padding:0;background:none;box-shadow:none;border-radius:0}
.phonecol .orbcv{display:none}
.iph{--s:.7;position:relative;width:calc(430px * var(--s));height:calc(902px * var(--s))}
.iph-body{position:absolute;top:0;left:0;width:430px;height:902px;transform:scale(var(--s));transform-origin:top left;border-radius:74px;padding:11px;background:#000;border:3px solid #9d9992;box-shadow:inset 0 0 0 1px #2a2a2a}
.ios-screen{position:relative;width:402px;height:874px;border-radius:60px;overflow:hidden;color:#fff;background:#f2f2f7;font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,'Geist',sans-serif;letter-spacing:0}
.ios-island{position:absolute;top:11px;left:50%;width:126px;height:37px;margin-left:-63px;border-radius:20px;background:#000;z-index:9}
.ios-sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 52px;z-index:3}
.ios-time{font-size:17px;font-weight:600;color:#fff}
.ios-sbr{display:flex;align-items:center;gap:6px}
.ios-sbr svg{fill:#fff}
.ios-bat{width:27px;height:13px;border-radius:4px;border:1.2px solid rgba(255,255,255,.45);padding:1.5px;position:relative}
.ios-bat i{display:block;width:78%;height:100%;border-radius:2px;background:#fff}
.ios-bat::after{content:"";position:absolute;right:-4px;top:3.5px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.45)}
.ct .ios-time{color:#000}
.ct .ios-sbr svg{fill:#000}
.ct .ios-bat{border-color:rgba(0,0,0,.4)}
.ct .ios-bat i{background:#000}
.ct .ios-bat::after{background:rgba(0,0,0,.4)}
.ios-home{position:absolute;bottom:9px;left:50%;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:#000;z-index:9;transition:background .4s}
body.dialing .ios-home,body.oncall .ios-home{background:rgba(255,255,255,.85)}

/* contact card (before and after the call) */
.ct{position:absolute;inset:0;padding-top:54px;color:#000;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#dfe4ec 0%,#eef0f4 42%,#f2f2f7 62%);transition:opacity .45s var(--e)}
.ct-poster{margin-top:56px}
.ct-mono{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#a5aab2,#858a93);color:#fff;font-size:52px;font-weight:500;letter-spacing:-.01em}
.ct-name{margin-top:18px;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.01em}
.ct-sub{margin-top:4px;font-size:16px;color:#6c6c70}
.ct-acts{margin-top:26px;display:grid;grid-template-columns:repeat(4,78px);gap:10px}
.ct-a{height:62px;border-radius:14px;border:0;background:rgba(255,255,255,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#007aff;font:inherit}
.ct-a svg{width:24px;height:24px}
.ct-a b{font-size:12px;font-weight:500;color:#007aff}
.ct-call{cursor:pointer;background:#34c759;color:#fff;box-shadow:0 0 0 0 rgba(52,199,89,.5);animation:callping 2.2s ease-out infinite}
.ct-call b{color:#fff}
.ct-call:hover{filter:brightness(1.05)}
@keyframes callping{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%,100%{box-shadow:0 0 0 14px rgba(52,199,89,0)}}
.ct-card{margin-top:22px;width:350px;border-radius:14px;background:#fff;overflow:hidden}
.ct-row{display:flex;flex-direction:column;padding:11px 16px;font-size:13px;color:#000}
.ct-row+.ct-row{border-top:.5px solid #c6c6c8}
.ct-row b{font-size:17px;font-weight:400;color:#007aff;margin-top:1px}
.ct-last{display:none}
body.ended .ct-last{display:flex}
.ct-last b{color:#000}

/* in-call screen */
.ic{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--e)}
body.dialing .ic,body.oncall .ic{opacity:1;pointer-events:auto}
body.dialing .ct,body.oncall .ct{opacity:0;pointer-events:none}
.ios-bg{position:absolute;inset:0;background:
  radial-gradient(120% 60% at 10% 18%,rgba(70,120,128,.95),transparent 60%),
  radial-gradient(90% 55% at 70% 42%,rgba(4,80,128,.95),transparent 65%),
  radial-gradient(110% 60% at 20% 72%,rgba(10,92,98,.9),transparent 62%),
  linear-gradient(180deg,#0b4a5f 0%,#035782 45%,#04406a 75%,#062b4f 100%)}
.ios-timer{position:absolute;top:86px;left:0;right:0;text-align:center;font-size:22px;font-weight:400;color:#62cded;font-variant-numeric:tabular-nums;z-index:2}
.ic-calling{display:none;animation:callpulse 1.6s ease-in-out infinite}
@keyframes callpulse{50%{opacity:.45}}
body.dialing .ic-calling{display:inline}
body.dialing .ic-live{display:none}
.ios-name{position:absolute;top:116px;left:16px;right:16px;text-align:center;font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.01em;color:#fff;z-index:2}
.ios-grid{position:absolute;left:44px;top:596px;width:314px;display:grid;grid-template-columns:repeat(3,78px);justify-content:space-between;row-gap:22px;z-index:2}
.ios-btn{display:flex;flex-direction:column;align-items:center;gap:8px;width:78px}
.ios-c{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(150,215,225,.14);border:1px solid rgba(190,240,245,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.08);backdrop-filter:blur(12px)}
.ios-c svg{width:31px;height:31px}
.ios-l{font-size:15px;font-weight:400;color:#fff}
.ios-btn.dim .ios-c{color:rgba(255,255,255,.32)}
.ios-btn.end .ios-c{background:#c8070d;border-color:rgba(255,120,110,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ios-btn.end svg{width:36px;height:36px}
.ios-btn.end{cursor:pointer}
.ios-btn.end:hover .ios-c{filter:brightness(1.12)}
body.muted .ios-btn:nth-child(3) .ios-c{background:#fff;color:#000}

.phonecol .tap{margin:0;padding:0 4px;background:none;box-shadow:none;text-align:center;font:400 12.5px/1.45 var(--t-sans);color:var(--faint);max-width:30ch}
.phonecol .tap b{color:var(--ink);font-weight:500}
body.oncall .phonecol .tap,body.dialing .phonecol .tap{visibility:hidden}
.phonecol .status{min-height:18px;text-align:center;font:400 13px/1.4 var(--t-sans);color:var(--mut);max-width:32ch;margin:0}
.phonecol .status.warn{color:#b42318}
@media (prefers-reduced-motion:reduce){.ct-call,.ic-calling{animation:none}}

.callside{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;min-height:430px}
.pane{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pane-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--hair);font-size:13px;font-weight:500;color:var(--ink)}
.pane-k{font-size:11.5px;font-weight:400;color:var(--faint)}
.pane-k b{color:var(--ink);font-weight:500}
.chan-call .captions{position:static;height:auto;max-height:440px;flex:1;width:auto;margin:0;padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;text-align:left}
.tx-empty{margin:auto;font-size:13px;color:var(--faint);text-align:center;max-width:24ch}
.chan-call .cap{position:static;display:grid;grid-template-columns:56px 1fr;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--e),transform .35s var(--e);font:400 14px/1.5 var(--t-sans);color:var(--mut);letter-spacing:-.005em;max-width:none;text-align:left}
.chan-call .cap.on{opacity:1;transform:none}
.chan-call .cap .who{font:400 11px/21px var(--t-mono);color:#9a9fa8;text-transform:none;letter-spacing:0}
.chan-call .cap.agent{color:var(--ink)}
.chan-call .cap.agent .who{color:var(--navy)}
.chan-call .cap .txt{font-family:var(--t-sans)}

.recpane .revealcard.rec{position:static;width:auto;max-width:none;margin:0;border-radius:0;box-shadow:none;background:none;padding:6px 16px 14px;transform:none;opacity:1;flex:1;overflow-y:auto}
.rec.live .rec-k,.rec.live .rec-firm{display:none}
.rec .rec-r{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--t-card)}
.rec .rec-r dt{font:400 12px/1.4 var(--t-sans);color:var(--faint)}
.rec .rec-r dd{font:400 13.5px/1.4 var(--t-sans);color:var(--ink);min-height:19px}
.rec.live .rec-r dd.tbd{color:transparent}
.rec.live .rec-r dd.tbd::after{content:"";display:inline-block;width:26px;height:1px;background:#d9dbdf;vertical-align:middle}
.rec .rec-r.fresh{animation:recfresh 1.6s var(--e)}
@keyframes recfresh{0%{background:rgba(37,69,167,.08)}100%{background:transparent}}
.rec-stampline{margin-top:12px}
.rec-stamp{border-radius:999px;font:500 11px/1 var(--t-mono);letter-spacing:.04em;padding:7px 12px}
.rec-stamp.ok{background:#e3f6ea;border-color:#e3f6ea;color:#0f7a43}
.rec-stamp.urgent{background:var(--navy);border-color:var(--navy);color:#fff}
.rec-note{font:400 12px/1.5 var(--t-sans);color:var(--faint)}

.chan-call .chips{position:static;transform:none;left:auto;bottom:auto;width:min(1080px,100%);margin-top:18px;opacity:1 !important;pointer-events:auto !important;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.chan-call .chips .clab{width:100%;text-align:left;font:400 13px/1.2 var(--t-sans);color:var(--faint);margin-bottom:2px}
.chip{background:#fff;box-shadow:inset 0 0 0 1px var(--hair);font:400 13.5px/1 var(--t-sans);color:var(--mut);padding:9px 14px}
.chip:hover{background:var(--t-card);color:var(--ink);box-shadow:inset 0 0 0 1px #d9dbdf}
.chip.sent{color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}

.results{width:min(1080px,100%);margin-top:40px}

@media (max-width:900px){
  .chan-call .stagew.callstage{padding:150px 16px 72px}
  .callgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone" "tx" "lead"}
  .callgrid .txpane{height:auto;min-height:0}
  .chan-call .captions{max-height:300px;min-height:140px}
}

/* the old fixed chips bar: on the call tab it sits in flow now */
body.oncall .chan-call .chips,body.ended .chan-call .chips{opacity:1 !important;pointer-events:auto !important;transform:none !important}
.recpane .revealcard.rec{max-height:none;filter:none}
.recpane .rec-rows{display:block}
.phonecol .tap{display:block}
@media (max-width:600px){
  .tnav-logo span{display:none}
  .tnav{gap:6px}
}
@media (max-width:600px){
  .tnav{max-width:calc(100vw - 24px)}
  .tnav-cta{display:none}
  .prac{overflow-x:auto;scrollbar-width:none;min-width:0}
  .prac::-webkit-scrollbar{display:none}
  .pracb{padding:7px 11px;font-size:13.5px}
}
/* the End button is #orbzone (call.js's toggle); strip every old orb sizing rule off it */
.ios-grid .ios-btn.orbzone{width:78px !important;height:auto !important;margin:0 !important;transform:none !important;animation:none !important;position:static;border-radius:0}
/* the lead's pane heights are fixed to the phone (902 x .6); the transcript scrolls inside its own */
@media (min-width:901px){.callgrid .txpane .captions{flex:1 1 0;max-height:none;min-height:0}}
@media (min-width:901px) and (max-width:1100px){
  .callgrid{grid-template-columns:301px minmax(0,1fr);grid-template-areas:"phone tx" "lead lead"}
}
/* during the call the hidden hint stops holding the status line down */
body.oncall .phonecol .tap,body.dialing .phonecol .tap{display:none}
/* desktop: the transcript and phone start level with the app windows (under the 44px step
   rail); the hints under the phone and the lead hang below the row so every bottom edge lines up */
@media (min-width:901px){
  .phonecol{position:relative}
  .phonefoot{position:absolute;top:100%;left:0;right:0;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
  .callgrid .lead{position:relative;display:flex;flex-direction:column}
  .callgrid #call-record{flex:1}
  .callgrid .landnote{position:absolute;top:100%;left:0;right:0}
}
@media (min-width:1101px){
  .callgrid .phonecol,.callgrid .txpane{margin-top:44px}
  .callgrid .txpane{min-height:0}
}
@media (max-width:900px){.phonefoot{display:flex;flex-direction:column;align-items:center;gap:8px}}
/* the logo is the wordmark alone (2026-10-14); on phones the word stays, since there is no mark */
.tnav-logo{font-size:24px;letter-spacing:-.04em;padding:0 6px}
.tnav-logo i{color:#2545a7}
.tnav-logo span{display:inline !important}
@media (max-width:600px){.tnav-logo{font-size:19px;padding:0 4px}}
/* the break-it lines sit inside the transcript pane, as its footer: they feed that conversation */
.chan-call .txpane .chips{flex:none;width:auto;margin:0;padding:12px 16px 14px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;background:transparent}
.chan-call .txpane .chips .clab{width:100%;margin:0 0 4px;font:400 12.5px/1.3 var(--t-sans);color:var(--faint)}
.chan-call .txpane .chip{font:400 13px/1 var(--t-sans);padding:8px 12px}
@media (min-width:901px){.chan-call .txpane .chips{margin:0;padding-left:16px}}
/* Large monitors: scale the whole demo up, same steps as the homepage. Viewport-sized
   rules divide by --z so a "full screen" stage stays one screen tall. */
html{--z:1}
@media (min-width:1800px){html{zoom:1.12;--z:1.12}}
@media (min-width:2300px){html{zoom:1.3;--z:1.3}}
@media (min-width:1800px){
  .chan,.stagew,.stagew.cost,.chan-site,.chan-call .stagew.callstage{min-height:calc(100dvh / var(--z))}
}
/* Phones: the header takes two rows. Logo and Book on top, the four desks full width
   underneath, so no desk is cut off at the edge. Everything below moves down one row. */
@media (max-width:600px){
  .tnav{flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:6px;column-gap:8px;
    width:calc(100vw - 24px);max-width:none;border-radius:22px;padding:6px}
  .tnav-logo{padding:0 8px}
  .tnav .tnav-cta{display:inline-flex !important;height:34px;padding:0 14px;font-size:13.5px}
  .tnav .prac{order:3;flex:1 1 100%;width:100%;max-width:none;overflow:visible;display:flex}
  .tnav .pracb{flex:1 1 auto;justify-content:center;text-align:center;padding:7px 6px;font-size:13.5px}
  :root{--chrome-h:168px}
  .chan-call .stagew.callstage{padding-top:196px}
  .chan-site{padding-top:186px}
  .cue{display:none}
}
/* Phones: the cost tab's one-pager button is a bottom bar with its own ground, so it never sits on a slider */
@media (max-width:600px){
  .glass.glass-solo{left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;border-radius:0;
    padding:10px 16px calc(10px + var(--safe-b,0px));background:rgba(252,252,253,.94);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--hair)}
  .glass-solo .gbtn.strong{width:100%;justify-content:center}
}
.gr-note{font-size:12px !important}

/* ═════════ the one-pager request (2026-10-14): two panels, brand surfaces, no serif, no shadows ═════════ */
.modal{background:rgba(21,24,30,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-card{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;padding:0;width:min(860px,calc(100vw - 32px));max-width:none;
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:0 30px 80px -30px rgba(21,24,30,.35);overflow:hidden}
.modal-card > .modal-form,.modal-card > .modal-thanks{padding:32px 32px 26px;min-width:0}
.modal-x{z-index:3}
.mc-side{padding:28px 24px;background:#f3f4f6;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:18px;text-align:left}
.mcs-k,.mc-k{font:400 12px/1.3 'Geist Mono',ui-monospace,monospace;color:var(--faint)}
.mcs-nums{display:flex;flex-direction:column;gap:12px}
.mcs-nums div{padding-bottom:12px;border-bottom:1px solid var(--hair)}
.mcs-nums dt{font:400 12.5px/1.3 var(--t-sans);color:var(--faint)}
.mcs-nums dd{margin-top:4px;font:400 26px/1 var(--t-sans);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.mcs-nums .main dd{color:#2545a7}
.mcs-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.mcs-list li{position:relative;padding-left:20px;font:400 13px/1.45 var(--t-sans);color:var(--mut)}
.mcs-list li::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:5px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.mcs-who{margin-top:auto;font:400 12.5px/1.45 var(--t-sans);color:var(--faint)}
.modal-card h3{font-family:var(--t-sans);font-weight:400;font-size:30px;letter-spacing:-.04em;margin-top:10px;color:var(--ink)}
.mc-sub{font:400 14.5px/1.55 var(--t-sans);color:var(--mut)}
.flab{font:400 13px/1.2 var(--t-sans);color:var(--mut)}
.f input,.f select,.f textarea{border:1px solid #d9dbdf;border-radius:12px;background:#fff;box-shadow:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#2545a7;box-shadow:0 0 0 3px rgba(37,69,167,.14)}
.wiz-dots i.on{background:#2545a7}
.mc-submit{font:500 15px/1.2 var(--t-sans);border-radius:999px}
.mc-submit.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #d9dbdf}
.wiz-back{font:500 15px/1.2 var(--t-sans)}
.mc-fine{font:400 12.5px/1.4 var(--t-sans);color:var(--faint)}
.tk-word{font-family:var(--t-sans);font-weight:400;font-size:40px;letter-spacing:-.04em}
.tk-sub{font:400 15px/1.6 var(--t-sans)}
.tk-sub span{color:#2545a7}
@media (max-width:760px){
  .modal-card{grid-template-columns:1fr;max-height:calc(100dvh - 32px);overflow-y:auto}
  .modal-card > .modal-form,.modal-card > .modal-thanks{padding:24px 20px 20px}
  .mc-side{order:2;border-right:0;border-top:1px solid var(--hair);padding:20px}
  .mcs-nums{flex-direction:row;gap:14px}
  .mcs-nums div{flex:1;border-bottom:0;padding-bottom:0}
  .mcs-nums dd{font-size:19px}
  .mcs-list,.mcs-who{display:none}
}

.ct-mono.has-logo{background:none;overflow:hidden}
.ct-mono .ct-logo{width:100%;height:100%;display:block}