/* ============================================================================
   BOWER — design system
   ----------------------------------------------------------------------------
   One stylesheet for the marketing site and the partner portal, so the product a
   partner buys looks like the page that sold it to them.

   The name is a satin bowerbird: it finds things, and it builds a structure to win
   with. The males collect blue objects, which is where the accent comes from. That
   is the whole brand and it is not decoration, it is the two verbs of the product.

   TYPE ROLES. Four, always distinct, never collapsed into each other:
     .eyebrow    small, tracked, accent      what section is this
     h1 / h2     large, tight, heavy         the claim
     .sub        medium, muted, generous     the qualification
     .copy       body, muted                 the detail
   A section missing its eyebrow is a section that has not decided what it is about.

   Dark first. A light theme follows the viewer's system setting, because a portal
   open on a tradie's laptop in a bright office is a real situation.
   ========================================================================== */

:root{
  /* Canvas */
  --ink:#07080A;
  --panel:#0D0F13;
  --panel-2:#12151A;
  --raise:#171B21;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);

  /* Text */
  --bone:#F3F1EC;
  --mute:#98A0AB;
  --faint:#666E79;

  /* Accent: the bower is blue */
  --blue:#3D6BFF;
  --blue-lit:#7A9BFF;
  --blue-dim:rgba(61,107,255,.13);
  --blue-edge:rgba(61,107,255,.34);

  /* Semantics */
  --gold:#E8B24C;          /* money kept */
  --leak:#FF5F52;          /* money lost */
  --good:#3FCF8E;          /* fixed, won */
  --warn:#F0A13C;

  --r:14px;
  --r-lg:20px;
  --wrap:1180px;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#FBFAF8; --panel:#FFFFFF; --panel-2:#F5F6F8; --raise:#EEF0F3;
    --line:rgba(10,14,20,.10); --line-2:rgba(10,14,20,.18);
    --bone:#101319; --mute:#5A6572; --faint:#8A939E;
    --blue:#1F4FE0; --blue-lit:#1F4FE0; --blue-dim:rgba(31,79,224,.08); --blue-edge:rgba(31,79,224,.24);
    --leak:#D63B2E; --good:#178F5D; --gold:#9A6C11;
  }
}
:root[data-theme="light"]{
  --ink:#FBFAF8; --panel:#FFFFFF; --panel-2:#F5F6F8; --raise:#EEF0F3;
  --line:rgba(10,14,20,.10); --line-2:rgba(10,14,20,.18);
  --bone:#101319; --mute:#5A6572; --faint:#8A939E;
  --blue:#1F4FE0; --blue-lit:#1F4FE0; --blue-dim:rgba(31,79,224,.08); --blue-edge:rgba(31,79,224,.24);
  --leak:#D63B2E; --good:#178F5D; --gold:#9A6C11;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-lit);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- type roles */

.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.185em;text-transform:uppercase;
  color:var(--blue-lit);margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none;
}
.eyebrow.plain::before{display:none}

h1,h2,h3,h4{margin:0;font-weight:770;letter-spacing:-.028em;line-height:1.06}
h1{font-size:clamp(40px,7.2vw,74px)}
h2{font-size:clamp(29px,4.4vw,46px);line-height:1.09}
h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.018em;line-height:1.25;font-weight:700}
h4{font-size:16px;letter-spacing:-.01em;font-weight:680;line-height:1.35}

.sub{font-size:clamp(17px,1.9vw,20.5px);line-height:1.55;color:var(--mute);
  margin:20px 0 0;max-width:60ch;font-weight:420}
.copy{color:var(--mute);margin:12px 0 0;font-size:15.5px;line-height:1.65}
.copy-tight{margin-top:8px}
.small{font-size:13.5px;color:var(--faint);line-height:1.55}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
strong{font-weight:660;color:var(--bone)}
.accent{color:var(--blue-lit)}
.leak-text{color:var(--leak)}
.good-text{color:var(--good)}
.gold-text{color:var(--gold)}

/* -------------------------------------------------------------------- chrome */

header.top{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  backdrop-filter:saturate(1.7) blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:800;
  letter-spacing:-.04em;font-size:19px}
.brand .mark{width:26px;height:26px;flex:none}
.brand small{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-left:2px}
.topnav{display:none;gap:28px;margin-right:8px}
.topnav a{color:var(--mute);font-size:14.5px;font-weight:520;transition:color .15s}
.topnav a:hover{color:var(--bone)}
@media(min-width:920px){.topnav{display:flex}}

.ribbon{background:var(--blue-dim);border-bottom:1px solid var(--blue-edge);
  padding:9px 0;font-size:13px;text-align:center;color:var(--blue-lit);font-weight:560}
.ribbon strong{color:var(--bone)}

/* ------------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;font-weight:650;font-size:15.5px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .13s cubic-bezier(.2,.8,.3,1),box-shadow .16s,background .16s,border-color .16s;
  background:none;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 8px 24px -10px var(--blue)}
.btn-p:hover:not(:disabled){box-shadow:0 14px 32px -10px var(--blue);background:#4A76FF}
.btn-g{border-color:var(--line-2);color:var(--bone)}
.btn-g:hover:not(:disabled){border-color:var(--bone);background:var(--panel-2)}
.btn-q{color:var(--mute);padding:9px 14px}
.btn-q:hover:not(:disabled){color:var(--bone);background:var(--panel-2)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:15px 30px;font-size:17px}
.btn-danger{border-color:rgba(255,95,82,.4);color:var(--leak)}
.btn-danger:hover:not(:disabled){background:rgba(255,95,82,.1);border-color:var(--leak)}
.btn-full{width:100%}

/* ------------------------------------------------------------------ surfaces */

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card-2{background:var(--panel-2)}
.card-hover{transition:border-color .18s,transform .18s}
.card-hover:hover{border-color:var(--blue-edge);transform:translateY(-2px)}

.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:620;border:1px solid var(--line);background:var(--panel-2);
  color:var(--mute);white-space:nowrap}
.pill-blue{background:var(--blue-dim);border-color:var(--blue-edge);color:var(--blue-lit)}
.pill-leak{background:rgba(255,95,82,.11);border-color:rgba(255,95,82,.3);color:var(--leak)}
.pill-good{background:rgba(63,207,142,.11);border-color:rgba(63,207,142,.3);color:var(--good)}
.pill-warn{background:rgba(240,161,60,.11);border-color:rgba(240,161,60,.3);color:var(--warn)}
.pill-gold{background:rgba(232,178,76,.11);border-color:rgba(232,178,76,.3);color:var(--gold)}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot-live{background:var(--good);box-shadow:0 0 0 0 rgba(63,207,142,.6);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,207,142,.5)}
  70%{box-shadow:0 0 0 8px rgba(63,207,142,0)}
  100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}
}

/* ------------------------------------------------------------------ sections */

section.band{padding:96px 0;border-top:1px solid var(--line);position:relative}
section.band.tight{padding:64px 0}
.head{max-width:62ch;margin:0 0 52px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center .sub{margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------- grids */

.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

/* ------------------------------------------------------------------- inputs */

.field{display:block;margin:0 0 16px}
.field label{display:block;font-size:13px;font-weight:640;color:var(--mute);
  margin:0 0 7px;letter-spacing:.01em}
.field .hint{font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],
input[type=number],select,textarea{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--bone);font-size:15.5px;
  transition:border-color .15s,background .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:var(--panel)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:90px;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--raise);outline:none;padding:0;border:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--blue);cursor:grab;border:3px solid var(--ink);box-shadow:0 2px 10px -2px var(--blue)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--blue);
  cursor:grab;border:3px solid var(--ink)}

.check{display:flex;gap:11px;align-items:flex-start;padding:11px 0;cursor:pointer}
.check input{margin:3px 0 0;accent-color:var(--blue);width:17px;height:17px;flex:none}
.check span{font-size:14.5px;line-height:1.5}
.check .why{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}

/* -------------------------------------------------------------------- toggle */

.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px}
.seg button{padding:7px 17px;border-radius:999px;border:0;background:none;cursor:pointer;
  font-size:13.5px;font-weight:620;color:var(--mute);transition:.15s}
.seg button[aria-pressed=true]{background:var(--blue);color:#fff}

/* --------------------------------------------------------------- data display */

.stat{padding:22px 0}
.stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);
  font-weight:660;margin:0 0 8px}
.stat .v{font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.stat .n{font-size:13px;color:var(--faint);margin-top:8px;line-height:1.5}

.bar{height:7px;border-radius:99px;background:var(--raise);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.bar.leak i{background:var(--leak)}
.bar.good i{background:var(--good)}
.bar.gold i{background:var(--gold)}

table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--faint);font-weight:660;padding:0 14px 12px;border-bottom:1px solid var(--line)}
table.data td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:var(--panel-2)}
table.data td.right,table.data th.right{text-align:right}

/* grade badge, A worst to E least */
.grade{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  font-size:13px;font-weight:800;flex:none}
.grade.A{background:rgba(255,95,82,.18);color:var(--leak)}
.grade.B{background:rgba(255,140,82,.16);color:#FF8C52}
.grade.C{background:rgba(240,161,60,.16);color:var(--warn)}
.grade.D{background:rgba(152,160,171,.14);color:var(--mute)}
.grade.E{background:rgba(152,160,171,.09);color:var(--faint)}

/* -------------------------------------------------------- the working strip  */
/* Used everywhere a dollar figure appears. Never a number without its inputs.  */

/* Separators are borders on the cells, not a coloured container showing through the
   gaps. With gap+background, a row that does not divide evenly leaves visible grey
   holes where the missing cells would be, and a hole in a panel of financial working
   reads as a rendering fault. */
.working{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:18px}
.working .w{background:var(--panel);padding:14px 15px;position:relative;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.working .w .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:660}
.working .w .v{font-size:21px;font-weight:760;letter-spacing:-.025em;margin-top:4px}
.working .w .h{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.45}
.working .w.edited{background:var(--blue-dim)}
.working .w.edited::after{content:"edited";position:absolute;top:9px;right:10px;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lit);font-weight:700}

.formula{font-family:var(--mono);font-size:12.5px;color:var(--mute);margin-top:14px;
  padding:12px 14px;background:var(--panel-2);border-radius:10px;border:1px solid var(--line);
  overflow-x:auto;white-space:nowrap}

/* ------------------------------------------------------------------- notices */

.note{display:flex;gap:12px;padding:15px 17px;border-radius:12px;font-size:14px;
  line-height:1.55;border:1px solid var(--line);background:var(--panel-2);align-items:flex-start}
.note svg{flex:none;margin-top:2px}
.note-blue{background:var(--blue-dim);border-color:var(--blue-edge);color:var(--blue-lit)}
.note-warn{background:rgba(240,161,60,.09);border-color:rgba(240,161,60,.28);color:var(--warn)}
.note-leak{background:rgba(255,95,82,.09);border-color:rgba(255,95,82,.28);color:var(--leak)}
.note-good{background:rgba(63,207,142,.08);border-color:rgba(63,207,142,.26);color:var(--good)}
.note strong{color:inherit}

.sample-mark{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--warn);
  background:repeating-linear-gradient(45deg,rgba(240,161,60,.12),rgba(240,161,60,.12) 6px,transparent 6px,transparent 12px);
  border:1px dashed rgba(240,161,60,.45);padding:3px 9px;border-radius:6px}

/* ------------------------------------------------------------------- details */

details.q{border-bottom:1px solid var(--line);padding:20px 0}
details.q summary{cursor:pointer;font-weight:640;font-size:17.5px;list-style:none;
  display:flex;justify-content:space-between;gap:24px;align-items:center;letter-spacing:-.012em}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--blue-lit);
  border-bottom:2px solid var(--blue-lit);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
details.q[open] summary::after{transform:rotate(225deg) translateY(-3px)}
details.q .copy{max-width:74ch}

/* ------------------------------------------------------------------- footer */

footer.foot{padding:56px 0 72px;border-top:1px solid var(--line);color:var(--faint);font-size:14px}
footer.foot a:hover{color:var(--bone)}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}

/* ------------------------------------------------------------------ utility */

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-tight{gap:8px}
.between{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack>*+*{margin-top:14px}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px}
.hide{display:none!important}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fade .4s cubic-bezier(.2,.8,.3,1) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:10px;top:10px;border-radius:9px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================================
   PORTAL
   ========================================================================== */

.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1000px){.app{grid-template-columns:236px 1fr}}

.rail{
  border-right:1px solid var(--line);background:var(--panel);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
@media(max-width:999px){
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;gap:6px;
    border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .rail .rail-head,.rail .rail-foot{display:none}
}
.rail-head{padding:6px 12px 22px}
.rail a.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14.5px;font-weight:560;color:var(--mute);transition:.14s;white-space:nowrap}
.rail a.nav:hover{background:var(--panel-2);color:var(--bone)}
.rail a.nav[aria-current=page]{background:var(--blue-dim);color:var(--blue-lit);font-weight:640}
.rail a.nav svg{flex:none;opacity:.85}
.rail .sep{height:1px;background:var(--line);margin:14px 6px}
.rail-foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}

.main{min-width:0;padding:28px 24px 90px}
@media(min-width:1000px){.main{padding:36px 40px 100px}}
.view{display:none}
.view.on{display:block;animation:fade .3s cubic-bezier(.2,.8,.3,1) both}

.page-head{margin:0 0 30px}
.page-head h2{font-size:clamp(25px,3vw,33px)}

/* dashboard cards */
.cards{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.cards{grid-template-columns:repeat(5,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);font-weight:660}
.kpi .v{font-size:32px;font-weight:800;letter-spacing:-.035em;margin-top:9px;line-height:1}
.kpi .n{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.45}

/* sparkline */
.spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:14px}
.spark i{flex:1;background:var(--blue);border-radius:2px 2px 0 0;min-height:2px;opacity:.9;
  transition:height .4s cubic-bezier(.2,.8,.3,1)}
.spark i.sim{background:var(--raise)}

/* prospect rows */
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  transition:border-color .15s;margin-bottom:9px}
.prow:hover{border-color:var(--line-2)}
.prow .nm{font-weight:640;font-size:15.5px;letter-spacing:-.01em}
.prow .meta{font-size:12.5px;color:var(--faint);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.prow .money{text-align:right;font-weight:740;font-size:17px;letter-spacing:-.02em}

/* stage chips */
.stages{display:flex;gap:6px;flex-wrap:wrap}
.stage-chip{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:620;
  border:1px solid var(--line);background:var(--panel-2);color:var(--mute);cursor:pointer;transition:.14s}
.stage-chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}

/* drawer */
.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.on{display:block}
.drawer .veil{position:absolute;inset:0;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(720px,100%);
  background:var(--ink);border-left:1px solid var(--line);overflow-y:auto;
  animation:slide .28s cubic-bezier(.2,.8,.3,1) both}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer .panel-head{position:sticky;top:0;background:color-mix(in srgb,var(--ink) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:18px 24px;z-index:2}
.drawer .panel-body{padding:24px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 24px;overflow-x:auto}
.tabs button{padding:12px 16px;border:0;background:none;cursor:pointer;font-size:14.5px;
  font-weight:600;color:var(--mute);border-bottom:2px solid transparent;white-space:nowrap;transition:.14s}
.tabs button:hover{color:var(--bone)}
.tabs button[aria-selected=true]{color:var(--blue-lit);border-bottom-color:var(--blue)}

/* chat rehearsal */
.chat{display:flex;flex-direction:column;gap:11px;max-height:440px;overflow-y:auto;padding:4px}
.msg{max-width:82%;padding:11px 15px;border-radius:15px;font-size:14.5px;line-height:1.5}
.msg.agent{background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.msg.caller{background:var(--blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg .who{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  opacity:.65;margin-bottom:4px}

/* site preview iframe */
.preview-frame{width:100%;height:620px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;display:block}
.device{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.preview-wrap{transition:max-width .3s cubic-bezier(.2,.8,.3,1);max-width:100%;margin:0 auto}
.preview-wrap.phone{max-width:400px}

/* toast */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:min(560px,92vw)}
.toast{background:var(--raise);border:1px solid var(--line-2);border-radius:12px;
  padding:13px 18px;font-size:14.5px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  animation:fade .25s both;pointer-events:auto;width:100%}
.toast.bad{border-color:rgba(255,95,82,.45)}
.toast.good{border-color:rgba(63,207,142,.45)}