/**** RESET ****/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0; padding:0;
  outline:none;
  font-size:1em;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  font-size:1em;
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
  text-decoration: none;
}

em { font-style:normal; }

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**** Styles ****/
/*********************************************** Structure ************************************************/

body, a, h1, h2, h3, h4, p, #lightbox, #lightbox * {transition:all 0.2s; -webkit-transition:all 0.2s }


#fv_loader      { position: fixed; top:0; left:0; height:4px; background-color:var(--accent-1); z-index:99999; width:0; opacity:0; }
#fv_transition  { position: fixed; top:0; left:0; width:0; height:100%; background-color:#eeeeee; z-index: 99998; overflow: hidden; }

/* ::-webkit-scrollbar { display: none; } */
:root {

  --section-bg-color-light: #F8F8F8;
  --section-bg-color-dark:  #191D1E;
  --section-bg-color-alt:  #737478;

  --bg-color-dark-pop: #272B2C;
  --bg-alt-highlightt: #A2A1A0;
  --bg-alt-highlight: #BEBEBE;
  /*--bg-alt-highlight: #FFFFFF;*/
  --bg-alt-highlight-dark: #000;
  --illustration-bg: #F1F1F1;       /* the flat canvas of the Figma illustrations (Background/Level 1): an illustrated panel takes it */
  --illustration-bg-dark: #111111;

  --pure-white:#ffffff;
  --deep-dark: #151818;
  --pure-white-60: rgba(255,255,255,0.8); /* the surfaces at 60%: a frosted card over a glow (the call demos' column and card) */
  --deep-dark-60:  rgba(21,24,24,0.7);

  --faded-bg-color-light: #C5CED8;
  --faded-bg-color-dark: #191D1E;

  --faded-text-color-light: #A6B4C2;
  --faded-text-color-dark: #303637;

  --text-color-light:#151818;
  --text-color-dark: #FFFFFF;

  --display-color-light-on: #151818;
  --display-color-light-off:#ECECEC;

  /*--accent-1: #FFCD5D;*/
  --accent-1: #ffffff;
  --accent-2: #F9B92A;
  --accent-dark-1: #151818;

  --spacer-xxl:150px;
  --spacer-xl:90px;
  --spacer-l: 50px;
  --spacer-m: 30px;
  --spacer-s: 20px;
  --spacer-xs:10px;

  --border-radius:10px;

  --mobile-cta-padding:8px 8px 8px 16px;
  --mobile-cta-margin:8px 8px 8px 0px;
  --mobile-cta-size:16px;

  --toggle-sizer:12px;
  --gap:20px;

  --black-10: rgba(0,0,0,0.1);
  --white-10: rgba(255,255,255,0.1);
  --black-20: rgba(0,0,0,0.2);
  --white-20: rgba(255,255,255,0.2);
  --black-20: rgba(0,0,0,0.2);
  --white-20: rgba(255,255,255,0.2);

  /* a dimmed page behind a drawer or sheet */
  --scrim:      rgba(0,0,0,0.6);
  --scrim-dark: rgba(60,60,60,0.65);

  /* error / destructive text (.message.error, p.error, destructive menu items) */
  --error:      #ff0000;
  --error-dark: #ff6b6b;

  /* success / neutral info accents (toasts: the dot and the draining bar; .message.success keeps its fill) */
  --success:      #00AC1F;
  --success-dark: #34D058;
  --info:         #A6B4C2;
  --info-dark:    #7E8A93;

  /* the side glow (call sheet): top to bottom, peach / sand / orchid / cyan — the native app's glowSide */
  --glow-side-1:#FD8C6E;
  --glow-side-2:#FCCE88;
  --glow-side-3:#E895FF;
  --glow-side-4:#00FDEE;

  --full-height-form: calc(100vh - 250px);

}

.mt-xl{ margin-top:var(--spacer-xl)!important }
.mt-l { margin-top:var(--spacer-l)!important }
.mt-m { margin-top:var(--spacer-m)!important }
.mt-s { margin-top:var(--spacer-s)!important }
.mt-xs { margin-top:var(--spacer-xs)!important }

.mb-xl{ margin-bottom:var(--spacer-xl)!important }
.mb-l { margin-bottom:var(--spacer-l)!important }
.mb-m { margin-bottom:var(--spacer-m)!important }
.mb-s { margin-bottom:var(--spacer-s)!important }
.mb-xs { margin-bottom:var(--spacer-xs)!important }

.mr-xl{ margin-right:var(--spacer-xl)!important }
.mr-l { margin-right:var(--spacer-l)!important }
.mr-m { margin-right:var(--spacer-m)!important }
.mr-s { margin-right:var(--spacer-s)!important }
.mr-xs { margin-right:var(--spacer-xs)!important }

.ml-xl{ margin-left:var(--spacer-xl)!important }
.ml-l { margin-left:var(--spacer-l)!important }
.ml-m { margin-left:var(--spacer-m)!important }
.ml-s { margin-left:var(--spacer-s)!important }
.ml-xs { margin-left:var(--spacer-xs)!important }

.pt-xxl { padding-top:var(--spacer-xxl)!important }
.pb-xxl { padding-bottom:var(--spacer-xxl)!important }

.pt-xl{ padding-top:var(--spacer-xl)!important }
.pt-l { padding-top:var(--spacer-l)!important }
.pt-m { padding-top:var(--spacer-m)!important }
.pt-s { padding-top:var(--spacer-s)!important }
.pt-xs { padding-top:var(--spacer-xs)!important }

.pb-xl{ padding-bottom:var(--spacer-xl)!important }
.pb-l { padding-bottom:var(--spacer-l)!important }
.pb-m { padding-bottom:var(--spacer-m)!important }
.pb-s { padding-bottom:var(--spacer-s)!important }
.pb-xs { padding-bottom:var(--spacer-xs)!important }

.pl-xl{ padding-left:var(--spacer-xl)!important }
.pl-l { padding-left:var(--spacer-l)!important }
.pl-m { padding-left:var(--spacer-m)!important }
.pl-s { padding-left:var(--spacer-s)!important }
.pl-xs { padding-left:var(--spacer-xs)!important }

.pr-xl{ padding-right:var(--spacer-xl)!important }
.pr-l { padding-right:var(--spacer-l)!important }
.pr-m { padding-right:var(--spacer-m)!important }
.pr-s { padding-right:var(--spacer-s)!important }
.pr-xs { padding-right:var(--spacer-xs)!important }

.p-xl { padding:var(--spacer-xl)!important }
.p-l { padding:var(--spacer-l)!important }
.p-m { padding:var(--spacer-m)!important }
.p-s { padding:var(--spacer-s)!important }
.p-xs { padding:var(--spacer-xs)!important }

.wrap                 { overflow: hidden; opacity:0; transition:all 0.25s; -webkit-transition:all 0.25s; position: relative }
.loaded               { opacity: 1 }
.nooverflow           { overflow: hidden }
.overflow             { overflow: visible }
.none                 { display: none; opacity:0; position: absolute; top:-10000px; left:-10000px; width:0px; height:0px; overflow: hidden; z-index: -1 }
.hidden               { display: none }
.scale0               { transform:scale(0,0); -webkit-transform:scale(0,0); }
.abs                  { position:absolute; }
.fullwidth            { width:100% }
.fullheight           { height:100% }
.abs.fullwidth        { left:0; right:0; }
.below                { z-index:9 }
.above                { z-index:11 }
.blurred              { background-color:rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dark .blurred        { background-color:rgba(0,0,0,0.2) }
.rel                  { position:relative; }
.fixed                { position:fixed; z-index:11 }
.notinteractive       { pointer-events:none }

.feature-overlay-grid { position:absolute; bottom:0; left:0; right:0; z-index:2 }

.vh200                { height:200vh }
.vh100                { height:100vh }
.vh90                 { height:90vh }
.vh80                 { height:80vh }
.vh70                 { height:70vh }
.vh60                 { height:60vh }
.vh50                 { height:50vh }
.vh40                 { height:40vh }
.vh30                 { height:30vh }
.vh20                 { height:20vh }
.vh10                 { height:10vh }

@supports (height: 100dvh) {
  .vh100 {
    height: 100dvh;
  }
}

/* The signed-in shell (.layout.vh100, every app page) ends ABOVE the system gesture bar / home indicator. viewport-fit=cover
   (head.php) lets the page draw under that bar; the shell gives the strip back, so nothing of the app sits beneath it — the
   strip shows the body background. --app-safe-bottom is the one knob: the inset the browser reports (0 with a 3-button bar,
   where the page is never drawn under it, and on desktop); add to it if a device under-reports, e.g.
   calc(env(safe-area-inset-bottom, 0px) + 8px). Floating elements carry their own inset (cookie banner, schedule menu,
   the call sheet and its close button). */
:root { --app-safe-bottom:env(safe-area-inset-bottom, 0px) }

/*
.layout.vh100 { height:calc(100vh - var(--app-safe-bottom)) }
@supports (height: 100dvh) {
  body.webapp {height:calc(100dvh - var(--app-safe-bottom)); overflow:hidden; }
  .layout.vh100 { height:calc(100dvh - var(--app-safe-bottom)) }
}*/

.spinner              { position: absolute; display: block; overflow: hidden; z-index:30; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; }
.spinner svg          { width:24px; height: 24px; transition:all 0.25s; -webkit-transition:all 0.25s; transform:scale(0); -webkit-transform:scale(0); opacity:0; }
.spinner.active svg   { transform:scale(1); -webkit-transform:scale(1); opacity:1; }
.spinner              { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite }

.pointer { cursor:pointer }

.fv_cursor .inner .spinner   { width:100px; height:100px; margin:-50px 0 0 -50px }
.fv_cursor .inner .spinner svg { width:100px; height:100px; }

.fv_cursor.loading .inner .spinner svg { transform:scale(1); -webkit-transform:scale(1); opacity:1; }

.dark                 { color:var(--text-color-dark) }
.dark.deepdark, .deepdark { background-color:var(--deep-dark) }
.dark #wordmark path  { fill:#ffffff }
.accentcolor          { color:var(--accent-2) }
.opacity25            { opacity:0.25 }
.fade50, .opacity50   { opacity:0.5 }
.opacity75            { opacity:0.75 }
.opacity0             { opacity:0 }

.shim                 { position: absolute; z-index:9; left:0; right:0; bottom:-1px; top:0; background:rgba(0,0,0,0.5); }
.bgfx                 { transition: all 1s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 1s cubic-bezier(.17,.67,.22,.98); background-size: cover; background-position: center center; background-repeat: no-repeat; transform:scale(1,1); -webkit-transform:scale(1,1); opacity:0.7; }
section.active .bgfx  { transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); opacity:1; transition: all 8s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 8s cubic-bezier(.17,.67,.22,.98); }

.testimonial img { width:100px; margin-left:auto; margin-right:auto }

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*********************************************** Context menu ************************************************/

.contextmenu-wrap           { position:fixed; z-index: 100; /*top:50px;*/; bottom:calc(44px + env(safe-area-inset-bottom, 0px)); left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:10px; height:1px }
.contextmenu                { display:flex; flex-direction:row; justify-content:space-between; align-items:center; background-color: rgba(230,230,230, 0.7); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
.contextmenu.hidden         { bottom:-100px }
.contextmenu-items          { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:0; gap:4px }

.contextmenu-items a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; text-decoration:none; font-weight:500 }
.contextmenu-items a:hover  { background-color:var(--black-10) }
.contextmenu-items a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
.contextmenu-items span     { display:none }

.dark .contextmenu                { background-color: rgba(50,50,50,0.5); }
.dark .contextmenu-items a        { color:var(--text-color-dark) }
.dark .contextmenu-items a:hover  { background-color:var(--white-10) }
.dark .contextmenu-items a.active { color:var(--text-color-light); background-color:var(--accent-1) }

#mobile-menu.contextmenu-wrap,
#mobile-menu.contextmenu-wrap { display:none }


/*********************************************** Lightbox ************************************************/

.boxshadow1     { box-shadow:0px 0px 60px rgba(0,0,0,0.05) }
.dark .boxshadow1     { box-shadow:0px 0px 60px rgba(255,255,255,0.1) }

.zmenu          { position: fixed; top:0; left:0; right:0; height:100vh; max-height:100vh; z-index: 21; display: none; opacity: 0; }
.zmenu.active   { display: block; }

.zpanel         { position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid transparent; display: none; z-index: 21 }
.zpanel.light   { background-color: rgba(240,240,240,0.9) }
.zpanel.white   { background-color: #ffffff }
.zpanel.alt     { background-color: #191D1E }
.zpanel.darkbg  { background-color: rgba(0,0,0,0.8) }
.zpanel.sectionbg { background-color:var(--section-bg-color-light) }
.dark .zpanel.sectionbg { background-color:var(--section-bg-color-dark) }

.zpanel.translucent { background-color:rgba(255,255,255,0.7) }
.dark .zpanel.translucent { background-color:rgba(0,0,0,0.7) }

.zpanel.flex.active { display: flex; align-items:center; }
.zpanel.flex section { flex-grow:1; }
.zpanel header  { justify-content:flex-end; position: fixed; left:auto; right:0; width:100px; padding-bottom:0; }

.zpanel.active  { display: block; }

.lightbox_src   { width:100%; margin:auto; cursor: zoom-out }

.lightbox_container         { position: absolute; z-index: 11; width:90vw; min-height: 100vh; left:5vw; right:5vw; }
video.lightbox_video,
img.lightbox_image          { width:100%; max-width: 1600px; transition:all 0.5s; -webkit-transition:all 0.5s; border-radius:8px; margin:5vh auto; }

@media all and (max-height:600px){
  .zpanel.flex.active { align-items: flex-start; padding:100px 0; }
}

.lightbox_zoomout           { cursor: zoom-out }

a.small_close             { font-family:"Inter", sans-serif; text-decoration: none; font-size:25px; color:#fff; width:40px; height:40px; position: absolute; top:0; right:0; z-index:12; text-align: center; line-height: 40px; opacity: 0.3; transition:all 0.25s; -webkit-transition:all 0.25s; }
a.small_close:hover         { opacity: 1; color:#007fff; }
a.small_close.circle        { background: rgba(0,0,0,0.5); opacity:1; border-radius:50%; overflow: hidden; color:#ffffff; top:15px; right:15px; position: fixed; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
a.small_close.circle:hover      { color:#000000; background: #FFCD5D; }

a.chevron-prev,
a.chevron-next { padding:10px; display: block; border-radius: 50%; overflow: hidden; background-color: rgba(0,0,0,0.1); transition:all 0.25s; -webkit-transition:all 0.25s; }

a.chevron-prev svg,
a.chevron-next svg { display: block; width:20px; height:20px; transition:all 0.25s; -webkit-transition:all 0.25s }

a.chevron-prev:hover,
a.chevron-next:hover { background: #FFCD5D; box-shadow:0px 0px 40px rgba(0,0,0,0.2) }

svg .chevron-path { fill:#fff; }

a.chevron-prev:hover svg .chevron-path,
a.chevron-next:hover svg .chevron-path { fill:#000 }

a.chevron-prev          { margin:6px 3px 6px 6px }
a.chevron-next          { margin:6px 6px 6px 3px }

.lightbox_controls_container { position:fixed; z-index: 12; bottom:calc(30px + env(safe-area-inset-bottom, 0px)); left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center  }
.lightbox_controls { border-radius:30px; background:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display:flex; flex-direction:row; justify-content:space-between; align-items:center }

/*********************************************** Layout ************************************************/

body      { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; background-color:var(--section-bg-color-light); font-weight:300; overflow-x:hidden; }
/* viewport-fit=cover (head.php): the page may draw under the system bars, so whatever hugs an edge pads itself with the
   safe-area insets — 0 wherever there is no notch, home indicator or gesture bar. Sideways: the body; bottom: each
   bottom-pinned element below (and the call sheet, call-sheet.css). */
body      { padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px) }
body.dark { background-color:var(--section-bg-color-dark) }
.page     { position:relative; z-index:10; margin:0 auto; background-color:var(--section-bg-color-light); color:var(--text-color-light); }

header    { padding:30px 50px; position:absolute; top:0; left:0; right:0; z-index: 14; display:flex; flex-direction:row; justify-content:space-between; align-items:center }
header.centered { justify-content:center; }
footer    { margin:0; padding:0 }

nav.mobile-overlay-nav svg.img { width:60px }

.applogo { padding:10px 0 }
.applogo svg.img,
footer svg.img,
header svg.img { width:80px }

body.dark footer svg.img linearGradient stop.stop-start,
nav.mobile-overlay-nav svg.img linearGradient stop.stop-start,
nav.appnav svg.img linearGradient stop.stop-start,
header svg.img linearGradient stop.stop-start   { stop-color:#000000 }

body.dark footer svg.img linearGradient stop.stop-end,
nav.mobile-overlay-nav svg.img linearGradient stop.stop-end,
nav.appnav svg.img linearGradient stop.stop-end,
header svg.img linearGradient stop.stop-end     { stop-color:#676767 }

body.dark header svg.img linearGradient stop.stop-start,
body.dark nav.appnav svg.img linearGradient stop.stop-start,
body.dark nav.mobile-overlay-nav svg.img linearGradient stop.stop-start,
footer svg.img linearGradient stop.stop-start  { stop-color:#ffffff }

body.dark header svg.img linearGradient stop.stop-end,
body.dark nav.appnav svg.img linearGradient stop.stop-end,
body.dark nav.mobile-overlay-nav svg.img linearGradient stop.stop-end,
footer svg.img linearGradient stop.stop-end    { stop-color:#676767 }

nav       { position:relative; z-index: 11; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; gap:20px }
nav a     { text-decoration:none; color:currentColor; opacity:0.5; border-bottom: 2px solid rgba(0,0,0,0); position:relative; }
nav a:hover, nav a:focus, nav a:active,
nav a.active { opacity:1 }
nav a.active { border-bottom-color: var(--accent-2); font-weight:bold }

nav.desktop-nav a { border-bottom:none }
nav.desktop-nav a.active:after { content:""; display:block; position:absolute; bottom:-10px; left:50%; width:6px; height:6px; background:currentColor; border-radius:50%; margin-left:-3px }

nav.desktop-ctas { gap:16px }
nav.desktop-ctas a.cta { min-width:auto; opacity:1; padding:6px 12px }

/* Nav popover — the marketing nav's "Use cases" hover sheet (Vlad, 2026-10-22; markup in templates/nav.php, Init_Nav_Popover
   in f.js). The item is static so nav.desktop-nav (position:relative) is the containing block: the panel centres under the nav, as in the mock.
   The surface is .blurred; ::before is the invisible bridge over the gap under the nav, inside the hover region, so a
   diagonal move from the link into any tile never leaves it (it ends under the link row, and the links sit above it
   anyway, so the neighbouring items stay hoverable — a hover there closes the sheet after the grace). Type is the product's classes in the markup; layout, elevation and motion only here. */
nav.desktop-nav .nav-item { position:static; margin-bottom:2px }
nav.desktop-nav .nav-item.open > a { opacity:1 }

.nav-popover { position:absolute; top:calc(100% + 22px); left:50%; z-index:12; width:min(750px, calc(100vw - 160px)); border-radius:12px; text-align:left;
  box-shadow:0 24px 60px var(--black-10), 0 2px 8px var(--black-10);
  opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%, 6px);
  transition:opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s }

.dark .nav-popover { box-shadow:0 24px 60px var(--scrim), inset 0 0 0 1px var(--white-10) }

.nav-popover.blurred { background-color:rgba(255,255,255,0.4); backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4) } /* .blurred's 20% / 10px lets the hero headline bleed through; denser here, never on .blurred */
.dark .nav-popover.blurred { background-color:rgba(39,43,44,0.4) } /* --bg-color-dark-pop: a raised surface reads lighter than the dark hero behind it */

/* the header sits at z-index 14, above the page's fixed scrollspy anchors (13), at all times — a per-sheet body class once lifted it only
   while a sheet was open, and moving from the Product sheet to the Use cases one dropped it mid-fade (the anchors painted over the open sheet) */
.nav-popover::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:20px } /* = the 22px gap under the links, less 2px: it must never reach the link row */
nav.desktop-nav > a, nav.desktop-nav .nav-item > a { position:relative; z-index:13 } /* the links stay above the sheet and its bridge, so a neighbour is always hoverable while the sheet is open */
.nav-item.open .nav-popover { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0); transition-delay:0s }

nav.desktop-nav .nav-popover a, nav.desktop-nav .nav-popover a.active { opacity:1; border-bottom:none; display:block; font-weight:inherit } /* nav a dims and bolds; a tile is neither */
/* A tile's ::after is its hover / active highlight (the admin menu's trick: z-index -1 under the tile, above the sheet). The
   selectors carry nav.desktop-nav .nav-popover so they beat nav.desktop-nav a.active:after — the trigger's dot — on the active tile. */
.nav-popover-tile { position:relative }
nav.desktop-nav .nav-popover .nav-popover-tile:after { content:""; opacity:0; display:block; z-index:-1; position:absolute; top:-8px; left:-8px; right:10px; bottom:-8px; width:auto; height:auto; margin:0; border-radius:6px; background-color:rgba(0,0,0,0.04); transition:all 0.2s ease-out }
.dark nav.desktop-nav .nav-popover .nav-popover-tile:after { background-color:rgba(255,255,255,0.08) }
nav.desktop-nav .nav-popover .nav-popover-tile.active:after,
nav.desktop-nav .nav-popover .nav-popover-tile:hover:after { opacity:1 }
.nav-popover-tile p.ts-m { opacity:0.85 }
.nav-popover-tile:hover p.ts-m, .nav-popover-tile:focus p.ts-m, .nav-popover-tile.active p.ts-m { opacity:1 }
.nav-popover-more { text-align:right }
.nav-popover-more a { display:inline-block }
.nav-popover.nav-popover-narrow { width:min(480px, calc(100vw - 160px)) } /* the Product sheet: two tiles (col6), half the use-cases sheet */

@media (prefers-reduced-motion: reduce) { .nav-popover { transition:none } }

/* The /use-case index cards and the phone menu's expandable Use cases group (nav.php; Init_Toggles flips .open on the wrapper) */
a.use-case-card { display:block; text-decoration:none; color:currentColor }
.mobile-group .mobile-submenu { display:none; border-radius:4px; }
.mobile-group.open .mobile-submenu { display:block }
.mobile-group .nav-chevron { display:flex; opacity:0.5; transition:transform 0.15s ease-out }
.mobile-group.open .nav-chevron { transform:rotate(180deg) }

a.menu{ width:36px; height:36px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:14px; line-height:14px }
a.menu.active { background-color:var(--section-bg-color-dark); color:var(--text-color-light); border:none }

.avatar{ cursor: default; width:32px; height:32px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:10px; font-weight:600; /*background:rgba(230,230,230, 0.5)*/ }
.dark .avatar { border-color:rgba(255,255,255,0.15); /*background-color:rgba(77,77,77,0.5)*/ }

.avatar.large { width:48px; height:48px; border-radius:24px; font-size:12px }

.avatar.primary { border:none; background-color:var(--section-bg-color-dark); color:var(--text-color-dark) }
.dark .avatar.primary { background-color:var(--section-bg-color-light); color:var(--text-color-light) }

.large-avatar{ cursor: default; width:80px; height:80px; border-radius:40px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:40px; font-weight:600; /*background:rgba(230,230,230, 0.5)*/ }
.dark .large-avatar { border-color:rgba(255,255,255,0.15); /*background-color:rgba(77,77,77,0.5)*/ }
/* a profile photo in place of the initials (avatar_inner / avatar_class): the photo fills the circle, no hairline */
.avatar.has-photo, .large-avatar.has-photo { border-color:transparent; overflow:hidden }
.avatar img, .large-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block }

.dark nav a.menu { border-color:rgba(255,255,255,0.1) }
.dark nav a.menu.active { background-color:var(--section-bg-color-light); color:var(--text-color-dark); }
.dark nav a.menu svg path { fill:var(--text-color-dark); }
.dark nav a.menu svg path.svg-icon-stroke { fill:none !important }

nav a.menu svg.dark-mode    { display:block }
nav a.menu svg.light-mode   { display:none }

body.dark nav a.menu svg.dark-mode    { display:none }
body.dark nav a.menu svg.light-mode   { display:block }

.page-menu a,
section   { position:relative; z-index:10; padding:0 120px; overflow:hidden; }
section.hero { padding-top:var(--spacer-xxl); }
section.signup{padding-top:var(--spacer-xxl); padding-left:0; padding-right:0 }

.alt { background-color:var(--pure-white); }
.dark .alt,
.dark.alt { background-color:var(--deep-dark) }

.alt-highlight { background-color:var(--bg-alt-highlight); }
.dark .alt-highlight { background-color:var(--bg-alt-highlight-dark); }

.highlight-bg { background-color:#ccc }
.dark.highlight-bg { background-color:#111 }
.dark .dark.highlight-bg { background-color:#111 }

.cowork { background: linear-gradient(180deg,rgba(150, 89, 58, 1) 0%, rgba(208, 143, 110, 1) 20vh); }

.alt2 { background-color:var(--section-bg-color-alt); }

section .page-menu { margin:0 -120px }

.page-menu a { text-decoration:none; color:currentColor; position:relative; z-index: 10; display: block; padding-top:45px; padding-bottom:45px }
.page-menu a p::before { display:block; position:absolute; top:50%; margin-left:-50px; content:"→"; opacity:0.25; transform:translateY(-50%); }
.page-menu a p { display:flex; flex-direction:row; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto}
.page-menu a p span { opacity:0.8; font-weight:500 }
.page-menu a p span.meta { border-radius:20px; display:block; padding:1px 10px; text-transform:uppercase; font-weight:300; opacity:0.4; font-size:10px; }


.dark #section-secondary .page-menu a:hover,
.page-menu a:hover { background-color:#fff }

.dark .page-menu a:hover { background-color:var(--accent-dark-1) }

.dark #section-secondary .page-menu,
.page-menu { border-bottom:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p span.meta,
.page-menu a p span.meta { background-color:#ECECEC }

.dark #section-secondary .page-menu a,
.page-menu a { border-top:1px solid rgba(0,0,0,0.1) }

.dark #section-secondary .page-menu a p::before,
.page-menu a p::before {color:currentColor;}

.dark #section-secondary .page-menu a.active,
.page-menu a.active { background-color:var(--accent-dark-1); color:var(--text-color-dark); }

.dark #section-secondary .page-menu a.active p:before,
.page-menu a.active p:before{color: var(--text-color-dark); opacity: 1 }

.dark #section-secondary .page-menu a.active p span,
.page-menu a.active p span { opacity:1; font-weight:400 }

.dark #section-secondary .page-menu a.active p span.meta,
.page-menu a.active p span.meta { background-color:#ffffff; color:var(--text-color-light); opacity:1; font-weight: 500 }


.dark .page-menu a.active { background-color:var(--accent-1); color:var(--text-color-light); }
.dark .page-menu a.active p:before{color: var(--text-color-light); opacity: 1 }
.dark .page-menu a.active p span.meta { background-color:var(--accent-dark-1); color:var(--text-color-dark); opacity:1}

.dark .page-menu { border-bottom:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p span.meta { background-color:#34393A }
.dark .page-menu a { border-top:1px solid rgba(255,255,255,0.1) }
.dark .page-menu a p::before {color:#ffffff}

article   { position:relative; display: block; z-index:10; max-width:1200px; margin:0 auto }
article.narrow { max-width:1100px; /* padding-left:var(--spacer-m); padding-right:var(--spacer-m)*/ }
article.wide { max-width:10000px }

.product-demo-container { position:absolute; border-radius:var(--border-radius); top:var(--spacer-m); right:var(--spacer-m); left:50%; bottom:var(--spacer-m); overflow:hidden; }
.product-demo { position:relative; height:90vh; border-radius:var(--border-radius); overflow: hidden;
    background-image:url("/_s/img/bg/bg1.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:scroll;
    background-size:auto 100%;
}

/* Glow */
#section-intro { background-position:top center; background-repeat:no-repeat; background-size:100% auto }
#section-intro { background-image:url("/_s/img/bg/hero/glow.png"); }
.dark #section-intro { background-image:url("/_s/img/bg/hero/glow.png") }


/* Cowork landing page */

:root {
  --overlay-to: rgba(255,255,255,1);
  --overlay-from: rgba(0,0,0,0);

  --dark-overlay-to: rgba(0,0,0,1);
  --dark-overlay-from: rgba(0,0,0,0);
}

#section-intro-cowork {background: linear-gradient(180deg,rgba(150, 89, 58, 1) 0%, rgba(208, 143, 110, 1) 150px); }

.video-hero-bg .glow { position:absolute; top:0; left:0; right:0; bottom:0; height:50vh; z-index:3 }
.video-hero-bg .glow { background-image:url("/_s/img/bg/hero/glow.png"); background-position:top center; background-repeat:no-repeat; background-size:100% auto  }
.dark .video-hero-bgg {background: linear-gradient(180deg,var(--dark-overlay-from) 0%, var(--dark-overlay-to) 150px); }

.video-overlay { position:absolute; z-index:2; top:0; left:0; right:0; height:30%; }
.video-overlay { background: linear-gradient(180deg,var(--section-bg-color-light) 10%, var(--overlay-from) 100%);}

.cowork-overlay { position:absolute; z-index:2; top:0; left:0; right:0; height:20% }
.cowork-overlay { background: linear-gradient(180deg,rgba(208, 143, 110, 1) 10%, rgba(208, 143, 110, 0) 100%);}

.cowork-overlay.bottom { top:auto; bottom:0; }
.cowork-overlay.bottom { background: linear-gradient(0deg,rgba(208, 143, 110, 1) 50%, rgba(208, 143, 110, 0) 100%);}


.dark .video-overlay { background: linear-gradient(180deg,rgba(25, 29, 30, 1) 10%, rgba(25, 29, 30, 0) 100%) }

.hero-asset { position:relative; margin:-400px -120px 0 }
.hero-asset video, .hero-asset img { width:100%; }

.video-bg { position:relative; margin:0 -120px 0 }
.video-bg video, .video-bg img { display:block; width:100%; margin-bottom:-20px } /* the hero set's video, or its still when the set has no video (use_case_hero_media) */

#onboard-illustration { background-position:center center; background-repeat:no-repeat; background-size:cover }
#onboard-illustration { background-image:url("/_s/img/onboard/1-light.webp"); }
.dark #onboard-illustration { background-image:url("/_s/img/onboard/1-dark.webp"); }

#onboard-illustration.the-village-hive { background-image:url("/_s/img/affiliates/the-village-hive.webp"); }

/*#section-intro { background-image:url("/_s/img/bg/bg.png"); background-position:top center ; background-repeat:no-repeat; background-size:100% auto }*/

/*.dark
#pattern-2 { background-image:url("/_s/img/Pattern-2-Dark.svg"); background-position:top right; background-repeat:no-repeat; }
#pattern-2 { background-image:url("/_s/img/Pattern-2-Light.svg"); background-position:top right; background-repeat:no-repeat; position:absolute; top:0; left:0; right:0; height:100vh; z-index:9 }
*/


#section-secondary.dark { background-color:var(--section-bg-color-dark); background-image:url("/_s/img/bg/footer/dark.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto }
.dark #section-secondary { background-color:var(--section-bg-color-light); color:var(--text-color-light); background-image:url("/_s/img/bg/footer/light.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto}

.dark #section-secondary .playlist-container,
.dark #section-secondary .playlist .cell { border-color:rgba(0,0,0,0.1) }

.dark #section-secondary
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.dark #section-secondary
.flexgrid.playlist .cell:hover  { background-color:rgba(255,255,255,0.5) }

.dark #section-secondary #wordmark path  { fill:var(--accent-dark-1) }

#section-secondary { z-index:13 }

.features { border-radius:4px }
.rounded { border-radius:var(--border-radius); }
.rounded-container { overflow:hidden; border-radius:var(--border-radius); margin:var(--spacer-m); position:relative }
.rounded-container.pop { z-index:20 }

.cta-bg { background-image:url("/_s/img/bg/cta.webp"); background-position:center center; background-repeat:no-repeat; background-size:cover }
.dark .cta-bg { background-image:url("/_s/img/bg/cta2.webp")}

.integrations-block,
#integrations-block { background-image:url("/_s/img/integrations/Dots-Light.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto }

.dark .integrations-block,
.dark #integrations-block { background-image:url("/_s/img/integrations/Dots-Dark.svg") }

#integrations-block .logos.light {display: block }
#integrations-block .logos.dark {display: none }

.dark #integrations-block .logos.light {display: none }
.dark #integrations-block .logos.dark {display: block }

#integrations-block .logos { position:relative; width:100%; height:1px; z-index:20 }
#integrations-block .logos img { width:100px; position:absolute; box-shadow:30px 30px 50px rgba(0,0,0,0.1); border-radius:var(--border-radius) }
.dark #integrations-block .logos img { box-shadow:30px 30px 50px rgba(0,0,0,0.5) }

#integrations-block .logos img.img1 { top:-230px; left:230px; width:70px  }
#integrations-block .logos img.img2 { top:-120px; left:80px; }
#integrations-block .logos img.img3 { top:10px; left:0; width:70px  }
#integrations-block .logos img.img4 { top:120px; left:80px  }
#integrations-block .logos img.img5 { top:230px; left:230px; width:70px  }

#integrations-block .logos img.img6 { top:-230px; right:230px; width:70px  }
#integrations-block .logos img.img7 { top:-120px; right:80px; }
#integrations-block .logos img.img8 { top:10px; right:0; width:70px  }
#integrations-block .logos img.img9 { top:120px; right:80px  }
#integrations-block .logos img.img0 { top:230px; right:230px; width:70px  }

a.cta               { display:inline-block; min-width:120px; text-align: center; text-decoration:none; background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; color:var(--text-color-dark); border-radius:4px; padding:10px 16px; font-weight:700; transition: background-position 500ms ease-out; position: relative;}
a.cta span          { display:none; margin-left:6px; text-align:center; line-height:40px; height:40px; width:40px; border-radius:4px; background-color:var(--section-bg-color-light); color:var(--text-color-light); }
a.cta.disabled      { opacity:.4; pointer-events:none; } /* wallet-blocked state; server re-gates regardless */

a.cta.round         { border-radius:50px }
a.cta.round span    { border-radius:20px;  }

.dark a.cta         { background-image: linear-gradient(120deg, #fff 25%, #aaa 37.5%, #777, #aaa 62.5%, #fff 75%); color:var(--text-color-light); }
.dark a.cta span    { background:var(--section-bg-color-dark); color:var(--text-color-dark); }

.dark a.cta:hover, a.cta:hover {

    background-position:left center;

    /*&::before {
        --vibrance: 50%;
        content: " ";
        position: absolute;
        inset: 10px 10px -10px;
        background: linear-gradient(to right in oklch longer hue, oklch(95% var(--vibrance) 0) 0 100%);
        filter: blur(20px);
        border-radius: inherit;
        z-index: -1;
    }*/
}


a.cta.alt { background:transparent; color:currentColor; border:1px solid rgba(0,0,0,0.1); font-weight:400 }
a.cta.alt span { background-color:var(--section-bg-color-dark); color:var(--text-color-dark); }

a.cta.alt:hover { border-color:#000; color:currentColor; }

.dark a.cta.alt { border-color:rgba(255,255,255,0.15); color:currentColor; }
.dark a.cta.alt span { background-color:var(--section-bg-color-light); color:var(--text-color-light); }

.dark a.cta.alt:hover { border-color:#fff; color:currentColor; }

a.large-cta { text-decoration:none; color:var(--accent-2); letter-spacing:-0.04em; font-weight:300; position:relative; padding-right:3em }

/*a.large-cta:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; position:absolute; right:-80px; top:50%; margin:-50px 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s;}
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:120px; height:120px; margin-top:-60px; right:-90px }*/

a.large-cta:after { content:""; display:block; width:3em; height:3em; border-radius:3em; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; background-size:1.5em; position:absolute; right:0.5em; top:50%; margin:-1.5em 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s }
a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:3.2em; height:3.2em; margin-top:-1.6em; right:0.4em }

a.large-cta.reel-cta:hover:after { background-color:rgba(249,185,42, 0.6); width:400px; height:400px; margin-top:-200px; margin-right:-200px; right:-45px; border-radius:200px }

.scrolldash-container { height:100px; position:relative; width:2px }
.scrolldash   { height:100%; width:2px; background-color:var(--text-color-light); margin-left: 0; position:absolute; top:0; left:0; -webkit-animation:scrolldashanimation 2s linear infinite; -moz-animation:scrolldashanimation 2s linear infinite; animation:scrolldashanimation 2s linear infinite }
.dark .scrolldash { background-color:var(--text-color-dark) }

.vdash { height:100px; margin-left:auto; margin-right:auto; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px }
.dark .vdash { border-color:rgba(255,255,255,0.1) }

.ldash { height:100px; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px }
.dark .ldash { border-color:rgba(255,255,255,0.1) }

body.dark, .dark .page, .dark section, section.dark { color:var(--text-color-dark); }
section.dark,
.dark .page { background-color:var(--section-bg-color-dark) }


.page { overflow:hidden; }

.faded-text h1.display,
.faded-text { color:var(--faded-text-color-light); }

.dark .faded-text h1.display,
.dark .faded-text { color:var(--faded-text-color-dark) !important; }

/*
section { color:var(--faded-text-color-light) }
section.active { color:var(--text-color-light) }

.dark section, section.dark { color:var(--faded-text-color-dark) }
.dark section.active, section.dark.active { color:var(--text-color-dark) } */

footer a { text-decoration:none; color:currentColor; }

a.deco                              { text-decoration:none; color:currentColor; }
a.deco                              { position: relative; z-index:12 }
a.deco:after                        { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.2s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.2s all cubic-bezier(.23,.71,.08,.78); }
a.deco.active:after,
a.deco:focus:after,
body.desktop a.deco:active:after, 
body.desktop a.deco:hover:after     { opacity:1; width:100%; left:0;}

a.deco2                              { text-decoration:none; color:currentColor }
a.deco2                              { position: relative; z-index:12 }
a.deco2:before                       { content:""; opacity:1; position: absolute; z-index:12; bottom:-5px; width:100%; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.25s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.25s all cubic-bezier(.23,.71,.08,.78); }
a.deco2.active:before,
a.deco2:focus:before,
body.desktop a.deco2:active:before, 
body.desktop a.deco2:hover:before     { opacity:0.5; width:0; left:100%;}

a.deco2:after                        { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:1s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:1s all cubic-bezier(.23,.71,.08,.78); }
a.deco2.active:after,
a.deco2:focus:after,
body.desktop a.deco2:active:after, 
body.desktop a.deco2:hover:after     { opacity:1; width:100%; left:0;}


/*********************************************** Typography ************************************************/

h1.display  { font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:600; font-size:70px; letter-spacing:-0.01em; line-height:1em }
h1.display.display-small  { font-size:60px }
h1.display.display-light  { font-size:60px; font-weight:300; line-height:1.25em }
h2.display.display-light  { font-size:40px; font-weight:300; line-height:1.25em }
h1,h2,h3,h4 { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:200; line-height:1.3em; letter-spacing:-0.02em }

h1.gradient-text { background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; transition: background-position 3500ms ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.dark h1.gradient-text { background-image: linear-gradient(120deg, #fff 40%, #aaa 49%, #777, #aaa 51%, #fff 60%); }

section.active h1.gradient-text { background-position:left center }

/*.large-cta, */
h1        { font-size:40px; }
h2        { font-size:32px }
h3        { font-size:24px }
h4        { font-size:20px }

p         { font-size:18px; line-height:1.5em }
.ts-m     { font-size:14px; line-height:1.5em }
.ts-s     { font-size:12px; line-height:20px }
.ts-xs     { font-size:10px; line-height:10px }

.dark h1.display, h1.display.dark { color:var(--accent-1) }

.heavy    { font-weight:700 }
.center   { text-align:center; }
.text-block,
.quote    { max-width:600px; margin-left:auto; margin-right:auto }

.strikethrough { text-decoration: line-through; }


/*********************************************** Scrollspy Anchors ************************************************/

.scrollspy-anchor-wrap { position:fixed; z-index:13; display:block; margin-left:50px; margin-top:var(--spacer-xxl); }
.scrollspy-anchors { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; white-space: nowrap; transform:rotate(90deg) translate3d(0,0,0); transform-origin: bottom left; margin:-25px 0 0 -5px}
.scrollspy-anchors a { text-decoration:none; color:currentColor; opacity:0.5 }
.scrollspy-anchors a:hover, .scrollspy-anchors a:focus, .scrollspy-anchors a:active,
.scrollspy-anchors a.active { opacity:1; font-weight:500 }
.scrollspy-anchors span { opacity:0.2 }

.dark .scrollspy-anchors a.active { color:var(--accent-1); }
.dark.faded .scrollspy-anchors a.active { color:var(--faded-text-color-dark) }

/*********************************************** Flexgrid ************************************************/

.flexgrid                       { box-sizing: border-box; position: relative; z-index: 12; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap }
/* .none is declared before .flexgrid, so on a row its display / position lost: a "hidden" row kept its padding and
   border in the flow (the Manage agents search left a gap per hidden row, 2026-10-14). On a flexgrid, .none wins. */
.flexgrid.none                  { display: none }
.flexgrid.nowrap                { flex-wrap: nowrap }
.flexgrid.nowrap .cell          { flex-grow: 1 }
.flexgrid.reverse               { flex-wrap: wrap-reverse; }

.flexgrid .cell                 { display: flex; justify-content: center; align-items: stretch; align-content: space-between; position: relative; z-index: 12; flex-grow: 0; box-sizing: border-box }
.flexgrid .cell.col1            { width:8.33%   }
.flexgrid .cell.col2            { width:16.66%  } 
.flexgrid .cell.col3            { width:24.99%  }

.flexgrid .cell,
.flexgrid .cell.col4            { width:33.33%  }
.flexgrid .cell.col5            { width:41.66%  }
.flexgrid .cell.col6            { width:50%   }
.flexgrid .cell.col7            { width:58.32%  }
.flexgrid .cell.col8            { width:66.63%  }
.flexgrid .cell.col9            { width:74.98%  }
.flexgrid .cell.col10           { width:83.33%  }
.flexgrid .cell.col11           { width:91.63%  }
.flexgrid .cell.col12           { width:100%  }

.flexgrid.project-list.spaced.offset { overflow:visible; }

.viewport_desktop .flexgrid.project-list.offset .cell:nth-child(3n+2){ margin-top:-100px; }

.viewport_mobile .flexwrap .flexgrid.project-list.offset .cell:nth-child(2n) { margin-top:0 }
.viewport_mobile .flexgrid.project-list.offset .cell:nth-child(2n),
.viewport_tablet .flexgrid.project-list.offset .cell:nth-child(2n){ margin-top:-50px; }

.flexgrid .cell .cc             { padding:0; position: relative; white-space:normal; width:100%; }

.flexgrid.spaced                { margin-left:-10px; margin-right:-10px }
.flexgrid.spaced .cell .cc      { padding:10px }

.flexgrid.cards .cell .cc       { background-color:rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin:0 10px 20px; padding:var(--spacer-m); border-radius:var(--border-radius) }

.rounded-card                   { border-radius:var(--border-radius); overflow:hidden; background-color:var(--pure-white) }
.dark .rounded-card             { background-color:var(--deep-dark) }

.dark 
.flexgrid.cards .cell .cc       { background-color:rgba(20,20,20,0.5);}

.card-icon { display:block; width:50px; background-color:rgba(0,0,0,0.03); border-radius:4px }
.dark .card-icon { background-color:rgba(255,255,255, 0.05); }

.project-tile a                 { display:block; overflow:hidden; }
.project-tile img               { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; }
.project-tile video             { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; opacity:1; display:block; }
.grid-video { width:100%; margin-bottom:-10px }

.project-tile video.playing     { opacity:1 }

.flexgrid.project-list          { border-radius:var(--border-radius) }

.project-tile-wrap,
.flexgrid.spaced .project-tile a, 
.flexgrid.spaced .project-tile img, 
.flexgrid.spaced .project-tile video { border-radius:var(--border-radius); overflow:hidden; }

.project-tile span {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; position:absolute; top:20px; left:20px; color:rgba(255,255,255,0.7); z-index:14; display:block; padding:4px 8px; background-color:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius:20px; opacity:0; text-align:center; min-width:60px }
.project-tile:hover span       { opacity:1 }

.case-study-container { background-color:var(--accent-dark-1); border-radius:var(--border-radius); overflow:hidden; }
.dark #section-secondary .case-study-container { background-color:#ffffff }


.flexgrid .cc.signup-form { background-color:var(--pure-white); border-radius:var(--border-radius) }

.product-curtain { position:absolute; bottom:0; left:0; right:0; height:200px; background: linear-gradient(0deg, rgba(190,190,190,1) 20%, rgba(190,190,190,0) 100%); }
.dark .product-curtain { background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%); }

.product-curtain.cowork { background: linear-gradient(0deg,rgba(208, 143, 110, 1) 50%, rgba(208, 143, 110, 0) 100%); }

/*********************************************** Marquee ************************************************/

.marquee                { width:100%; overflow:hidden; position:relative; pointer-events: none; display: flex; overflow: hidden; user-select: none; gap: var(--gap);}
.marquee .curtain-left  { position:absolute; z-index:12; top:0; left:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,1) 20%, rgba(248,248,248,0) 100%); }
.marquee .curtain-right { position:absolute; z-index:12; top:0; right:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 80%); }

.alt .marquee .curtain-left  { background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); }
.alt .marquee .curtain-right { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); }

.dark .marquee .curtain-left  { background: linear-gradient(90deg, rgba(25,29,30,1) 20%, rgba(25,29,30,0) 100%); }
.dark .marquee .curtain-right { background: linear-gradient(90deg, rgba(25,29,30,0) 0%, rgba(25,29,30,1) 80%); }

.dark .alt .marquee .curtain-left,
.dark.deepdark .marquee .curtain-left  { background: linear-gradient(90deg, rgba(21,24,24,1) 20%, rgba(21,24,24,0) 100%); }
.dark .alt .marquee .curtain-right,
.dark.deepdark .marquee .curtain-right { background: linear-gradient(90deg, rgba(21,24,24,0) 0%, rgba(21,24,24,1) 80%); }

.marquee .strip         { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); }
.marquee .strip .tile   { min-width:200px; flex-grow:0 }
.marquee .strip .tile img { width:100px }

.marquee .strip p { white-space:nowrap; display:inline-block; opacity:1; margin-right:20px; font-size:30px; font-weight:900; text-transform:uppercase; font-style:italic; }
.marquee .strip p:nth-child(even) { opacity:0.25 }

.dark .marquee .strip .tile img { filter:invert(1); }

.fast { --speed: 5s; }
.slow { --speed: 30s; }
.superslow { --speed:180s }

.forward {
    animation: marquee-move-text var(--speed) linear infinite var(
      --direction,
      forwards
    );
}

.backward {
    animation: marquee-move-text var(--speed) linear infinite var(
      --direction,
      reverse
    );
}

@keyframes marquee-move-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/*********************************************** Playlist ************************************************/

.playlist-container             { border-radius:var(--border-radius); border:1px solid rgba(0,0,0,0.1); overflow:hidden }
.flexgrid.playlist              { margin:0 -2px -1px 0 }
.flexgrid.playlist .cell .cc    { padding:20px }

.flexgrid.justified .cell .cc { display:flex; flex-direction: column; justify-content:space-between; }


.dark
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-dark); }
.flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); }

.flexgrid.playlist .cell .cc svg.icon,
.flexgrid.playlist .cell .cc img{ margin-bottom:30px }
.flexgrid.playlist .cell        { border:1px solid rgba(0,0,0,0.1); border-width:0 1px 1px 0 }

/* HOVER */
/*.flexgrid.playlist .cell                { cursor:pointer }*/
.flexgrid.playlist .cell:hover          { background-color:rgba(255,255,255,0.5) }
.dark .flexgrid.playlist .cell:hover    { background-color:rgba(0,0,0,0.25) }

.dark .playlist-container,
.dark .flexgrid.playlist .cell  { border-color:rgba(255,255,255,0.1) }

a.thumb { display:block; border-radius:35px; position: relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
a.thumb div { margin:0 auto; display:block; width:70px; height:70px; position:relative; border-radius:35px; overflow:hidden; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; border:2px solid rgba(0,0,0,0.2) }
a.thumb:hover div { border:3px solid var(--accent-1) }

.dark a.thumb div { border-color:rgba(220,220,220,0.2) }
.dark a.thumb:hover div { border-color:var(--accent-1) }

a.thumb:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; z-index: -1; transition:all 0.15s; -webkit-transition:all 0.15s; opacity: 0; transform:scale(0.8)}
a.thumb:hover:after { background-color:rgba(249,185,42, 0.2); opacity:1; transform:scale(1) }

/*********************************************** Utility ************************************************/

.valign { align-items: center; display:flex; }
.balign { align-items:flex-end; display:flex; }
.talign { align-items:flex-start; display:flex; }
.bordertop { border-top:1px solid rgba(0,0,0,0.1); }
.borderbottom { border-bottom:1px solid rgba(0,0,0,0.1); }
.borderright { border-right:1px solid rgba(0,0,0,0.1); }
.borderleft { border-left:1px solid rgba(0,0,0,0.1); }
.ta-right { text-align:right; }
.marginauto { margin-left:auto; margin-right:auto }

.dark .bordertop, .dark .borderright, .dark .borderleft,
.dark .borderbottom { border-color:rgba(255,255,255,0.1) }

.transparent { background:transparent !important; }

.pill { display:block; width:100px; padding:6px 12px; border-radius:30px; border:1px solid rgba(0,0,0,0.1); background-color: var(--section-bg-color-light); text-align:center }
.dark .pill { border-color:rgba(255,255,255,0.15); background-color:var(--section-bg-color-dark) }


/*********************************************** Animations ************************************************/


@keyframes scrolldashanimation {
  0% {
    height:100%;
    top:0;
  }

  20% {
    height:0;
    top:100%;
  }

  80% {
    height:0;
    top:0;
  }

  100% {
    height:100%;
    top:0;
  }
}

/*********************************************** Play-stop button ************************************************/

body.no_cursor *,
body.no_cursor  { cursor:none !important; }

/*

fv_cursor
  custom-cursor-content
    play-stop-button
      inner
      video
*/

.fv_cursor_backdrop { transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; position: fixed; top:0; left:0; right:0; bottom:-100px; z-index:-1; display:block; background-color:rgba(0,0,0,0.1); opacity:0 }
.fv_cursor_backdrop.active { z-index:98; opacity:1 }
.fv_cursor { transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out; position: absolute; pointer-events: none; z-index:199; top:0; left:0; width:0; height:0; display:block }
.fv_cursor .custom-cursor-content { pointer-events:none; margin:0; position:absolute; top:-150px; left:-150px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; display:block; transform:scale(0); }
#cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0.35) }

.play-stop-button { width:300px; height:300px; border-radius:150px; overflow:hidden; background-color:rgba(100,100,100,0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; align-items: center; justify-content: center; box-shadow:80px 80px 80px rgba(0,0,0,0.2) }
.play-stop-button .inner { position: relative; z-index:2; background-color:var(--accent-1); color:var(--text-color-light); width:260px; height:260px; overflow:hidden; border-radius:130px; display: flex; align-items: center; justify-content: center; text-align: center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(1); font-size:40px; font-weight:500 }
.play-stop-button .inner span { transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; opacity:1 }
.play-stop-button .video { position: absolute; z-index:1; top:50%; left:50%; margin:-130px 0 0 -130px; width:260px; height:260px; overflow:hidden; border-radius:130px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(0) }
.play-stop-button .video video { width:260px; height:260px; object-fit: cover; overflow:hidden; border-radius:130px; display:block; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; opacity:0 }
.play-stop-button .video .video-progress {opacity:0; display: none; position:absolute; height:2px; bottom:0; left:0; right:0; z-index:12; background-color:rgba(255,255,255,0.3); overflow:hidden; border-radius:1px }
.play-stop-button .video .video-progress-inner { height:2px; width:50%; background-color:#ffffff }


#cursor.fv_cursor.loading .play-stop-button .inner { background-color:transparent; }
#cursor.fv_cursor.loading .play-stop-button .inner span { opacity:0 }
#cursor.fv_cursor.active_cursor .play-stop-button .inner {transform:scale(0.8); }
#cursor.fv_cursor.active_cursor .play-stop-button .video {transform:scale(0.8); }

#cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video { transform:scale(1); }
#cursor.fv_cursor.active_cursor.playing .play-stop-button .video video { opacity:1 }

body.touch #cursor.fv_cursor.active_cursor.playing .play-stop-button .inner,
#cursor.fv_cursor.active_cursor.playing .play-stop-button .inner {transform:scale(0); }

body.touch .fv_cursor       { position:fixed; top:auto; bottom:-20px; left:50% }
body.touch .fv_cursor       { transition:none; -webkit-transition:none; } 
body.touch #cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0) }
body.touch #cursor.fv_cursor.active_cursor.loading .custom-cursor-content,
body.touch #cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(0.7) }
body.touch .play-stop-button .inner { background-color: transparent}
body.touch .play-stop-button .inner span { display: none }

.circular-progress        { position: absolute; top:0px; left:0px; z-index: 12; pointer-events: none; display:block; }
.circular-progress svg    { width:260px; height:260px; float:left; transform: rotate(-90deg); transform-origin: center; opacity:0; transition:all 0.5s ease-out }

#cursor.fv_cursor.active_cursor.playing .circular-progress svg #circle1 { transition:stroke-dashoffset 0.5s linear;  }
#cursor.fv_cursor.active_cursor.playing .circular-progress svg { opacity:1 }

#cursor.fv_cursor.active_cursor.playing .play-stop-button .video .video-progress {opacity: 1}

.background-video { position:absolute; display: flex; align-items: center; justify-content: center; top:50vh; left:0; right:0; height:100vh; z-index:9; opacity:0.25 }
.background-video video { display: block; width:50vw; height:50vw; border-radius:25vw; overflow:hidden; object-fit: cover }
.hero-video-spacer { height:50vh }

.fullscreen_video { display:block; width:100%; height:100vh; object-fit:cover; overflow: hidden }


/*********************************************** App nav ************************************************/

nav.appnav { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:0px; width:70px; min-width:70px; border-right:1px solid rgba(0,0,0,0.1); padding:20px 0 }
.dark nav.appnav { border-color:rgba(255,255,255,0.15) }
nav a.logo { opacity:1 }
nav.appnav svg.img { width:40px; display: block; margin:0 auto 20px }

nav.appnav .line { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:12px; background:var(--pure-white); border-radius:50px; padding:5px }
nav.appnav .line.active .avatar a { opacity: 1 }
.appnav-wrapper { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:10px; }
nav.appnav .line a.active { border-bottom:none }
.dark nav.appnav .line { background-color:var(--bg-color-dark-pop) }

nav.appnav .line .line-links { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:20px; margin:5px 0 10px 0; white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; }
nav.appnav .line .line-links a { text-decoration:none; color:currentColor; opacity:0.5; border-bottom:none }
nav.appnav .line .line-links a:hover, nav.appnav .line .line-links a:focus, nav.appnav .line .line-links a:active,
nav.appnav .line .line-links a.active { opacity:1; font-weight:500 }
nav.appnav .line .line-links span { opacity:0.2 }

.dark nav.appnav .line .line-links a.active { color:var(--accent-1); }
.dark.faded nav.appnav .line .line-links a.active { color:var(--faded-text-color-dark) }


/*********************************************** Inbox ************************************************/

section.app                 { padding:0 }
.layout                     { position:relative; z-index: 13; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:0px; top:0; left:0; right:0 }
.message-list               { width:500px; min-width:300px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; border-right:1px solid rgba(0,0,0,0.1) }
.dark .message-list         { border-color:rgba(255,255,255,0.1) }
.message-item               { position:relative; border-bottom:1px none rgba(0,0,0,0.1); border-left:2px solid transparent; cursor:pointer; opacity:1; transition:all 0.25s ease-out; margin-bottom:10px }
.message-item.active        { z-index:1; border-left-color:#000000; /*background-color:rgba(255,255,255,0.2);*/ opacity:1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dark .message-item         { border-bottom:1px none rgba(255,255,255,0.1) }
.dark .message-item.active  { border-left-color:#ffffff; /*background-color:rgba(40,40,40,0.3)*/ }
.message-item.unseen        { border-left-color:var(--accent-2) } /* a call a sync brought in while the page was open; cleared on click (InboxRender.markSeen) */
.message-item[data-remind-due] { border-left-color:var(--accent-2) } /* a call whose follow-up reminder is due: the unseen mark, until the click that opens it completes the reminder */

/* Bulk selection (InboxSelect, inbox_view.js; List View V2 store pages): the caller's avatar is the row's checkbox — tap it to
   select; while anything is selected every avatar shows the empty box and a tap anywhere on a row toggles it. The look is the
   schedule table's .sched-box: --text-color-light fill + the same tick, tokens only. The row itself keeps its look (the open
   call's background would stack with a tint): the checked avatar is the mark, as in the native app. */
.list-view-v2 #message_list .message-item .avatar { cursor:pointer; position:relative; transition:background-color 0.15s ease-out, border-color 0.15s ease-out }
@media (hover:hover){ .list-view-v2 #message_list .message-item .avatar:hover { border-color:var(--text-color-light) } }
body.call-select-active #message_list .message-item .avatar { color:transparent; border-color:var(--text-color-light) }
body.call-select-active #message_list .message-item .avatar svg { visibility:hidden }
.list-view-v2 #message_list .message-item.selected .avatar { background-color:var(--text-color-light); border-color:var(--text-color-light); color:transparent }
.list-view-v2 #message_list .message-item.selected .avatar svg { visibility:hidden }
.list-view-v2 #message_list .message-item.selected .avatar::after { content:''; position:absolute; left:12px; top:8px; width:5px; height:11px; border:solid var(--pure-white); border-width:0 2px 2px 0; transform:rotate(45deg) }
@media (hover:hover){ .dark .list-view-v2 #message_list .message-item .avatar:hover { border-color:var(--text-color-dark) } }
.dark.call-select-active #message_list .message-item .avatar { border-color:var(--text-color-dark) }
.dark .list-view-v2 #message_list .message-item.selected .avatar { background-color:var(--text-color-dark); border-color:var(--text-color-dark) }
.dark .list-view-v2 #message_list .message-item.selected .avatar::after { border-color:var(--text-color-light) }
/* its menu: the outbound schedule's .contextmenu pill, kept at the bottom of the scrolling list (sticky in the list panel)
   instead of .contextmenu-wrap's fixed viewport bar */
/* sticky offsets count from inside the scroll container's padding: the list panel's pb-xxl (--spacer-xxl) is taken back out */
.contextmenu-wrap.call-select-menu { position:sticky; z-index:5; left:auto; right:auto; bottom:calc(16px - var(--spacer-xxl) + env(safe-area-inset-bottom, 0px)); height:auto; padding:8px 0 }

.message-item .message-item-summary { opacity:0.5 }
.message-item.active .message-item-summary { opacity:1 }

.message-item.active::after { position:absolute; content:""; display:block; z-index:-1; top:0; left:8px; right:8px; bottom:0; border-radius:4px; overflow:hidden; background-color:rgba(0,0,0,0.03); backdrop-filter: blur(10px) }
.dark .message-item.active::after { background-color:rgba(255,255,255,0.06) }

/* Plan limits (call views): a locked row (limited AND the owner not entitled) shows the lock line instead
   of its summary; selecting it swaps the details pane for the pay gate */

.message-item[data-locked] .lock-message {}
.message-item[data-locked] .locked-summary {}
/*.message-item[data-locked] .locked-summary::before { content:"\1F512\00A0"; font-style:normal }*/
.message-details-paygate           { padding:24px; min-height:60vh; display:flex; flex-direction:column; justify-content:flex-start; }
.message-details-paygate article   { max-width:420px; margin:0 auto }

/* Appointments category (call views): Calls | Schedule tabs; the schedule replaces the list while its tab is open */
.appointments-hidden               { display:none!important }
#appointments-tabs                 { border-bottom:none }
#appointments-tabs .tab.active     { margin-bottom:0 }
.appointments .appointment-day p   { display:flex; gap:8px; align-items:baseline }
.appointments .appointment-row     { display:flex; flex-direction:row; align-items:baseline; gap:12px; border-top:1px solid rgba(0,0,0,0.1); border-left:2px solid transparent; cursor:pointer; transition:all 0.25s ease-out }
.appointments .appointment-row:hover { background-color:rgba(0,0,0,0.03) }
.appointments .appointment-row.active { border-left-color:#000000; background-color:rgba(255,255,255,0.2) }
.appointments .appointment-time    { flex:0 0 64px; white-space:nowrap; font-variant-numeric:tabular-nums }
.appointments .appointment-who     { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#appointments-tabs .tab.tab-empty,
#appointments-tabs.tab-empty        { display:none } /* HIDE_EMPTY_CATEGORIES: an empty Upcoming / Past tab; the bar when only Calls is left */
.dark .appointments .appointment-row { border-top-color:rgba(255,255,255,0.1) }
.dark .appointments .appointment-row:hover { background-color:rgba(255,255,255,0.04) }
.dark .appointments .appointment-row.active { border-left-color:#ffffff; background-color:rgba(40,40,40,0.3) }

.message-details-panel      { width:600px; min-width:300px; opacity:0; position:relative; transition:opacity 0.5s ease-out }
.message-details-panel.active { opacity:1 }

.caller-details-panel       { max-width:400px; position:absolute; top:0; right:0; bottom:0; transition:opacity 0.5s ease-out; }

.call-record { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px }

.caller-details-container,
.message-details-container  { position:relative; height:100%; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; padding:24px}
.full-width-container       { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; }


.panel { width:600px; min-width:200px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; }
.panel.xnarrow{ width:250px; }
.panel.narrow { width:350px; }
.panel.wide { width:950px }
.panel.xwide { width:auto; flex-grow:1 }


#audio { min-width:100%; display:none; }

/* Visualizer
.vis { position: relative; z-index:2; width:100%; height:300px; border-radius:16px; overflow: hidden; cursor:pointer; borderr:1px solid rgba(0,0,0,0.05); }
.dark .vis { border-color:rgba(255,255,255,0.1) }
.vis .container { position: absolute; top:25%; left:var(--spacer-m); right:var(--spacer-m); bottom:25%; z-index:2; pointer-events:none }
.vis audio { width: calc( 100% - 40px ); position: absolute; z-index: 3; bottom:20px; left:20px; opacity:1 }

.vis #vis_caller_details { position:absolute; top:0; left:0; right:0; pointer-events:none }
.vis #message_details_summary { position:absolute; bottom:0; left:0; right:0; pointer-events:none }

.vis-line { position:absolute; top:0; bottom:0; left:0; width:0; background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%); z-index:-1; pointer-events: none}
.dark .vis-line { background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.05) 100%);}

.vis-progress { height:2px; background-color:#000000; width:50% }
.dark .vis-progress { background-color:#ffffff }

*/

/* Revert colors for the visualizer */
.vis .vis-container { cursor:pointer; height:350px; }
.vis .vis-container,
.vis { position: relative; z-index:2; width:100%; border-radius:16px; overflow: hidden }
.vis .container { position: absolute; top:30%; left:var(--spacer-m); right:var(--spacer-m); bottom:30%; z-index:2; pointer-events:none }
.vis audio { width: calc( 100% - 40px ); position: absolute; z-index: 3; bottom:20px; left:20px; opacity:1 }

.vis #vis_caller_details { position:absolute; top:0; left:0; right:0; pointer-events:none }
.vis .message_details { position:absolute; bottom:0; left:0; right:0; z-index:3 }

.vis { color:var(--text-color-dark) !important }
.dark .vis { color:var(--text-color-light) !important }

.vis              { background-color:rgba(0,0,0,1) !important }
.dark .vis        { background-color:rgba(255,255,255,1) !important }

.vis-line             { position:absolute; top:0; bottom:0; left:0; width:0; z-index:-1; pointer-events: none}
.vis-line             { background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.20) 100%) }
.dark .vis-line       { background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%) }

.vis-progress { height:2px; background-color:#fff; width:50% }
.dark .vis-progress { background-color:#000 }

#cta-play-pause .hide-on-pause { display:none }
#cta-play-pause.playing .hide-on-pause { display:block }

#cta-play-pause .hide-on-playing { display:block }
#cta-play-pause.playing .hide-on-playing { display:none }


/* Mobile ctas */
.mobile-cta-container-wrap  { position:absolute; z-index:101; left:0; right:0; top:92dvh; height:8dvh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;}
.mobile-cta-container       { width:100%; padding-bottom:24px; z-index:100; display:flex; flex-direction:row; justify-content:center; align-items:center; /*height:1px*/ }
.mobile-cta-container       { background-image: linear-gradient(0deg,rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%); }
.mobile-cta-item-wrap       { display:flex; flex-direction:row; justify-content:space-between; align-items:center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
.mobile-cta-items           { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; margin:0 auto; padding:0; gap:4px }


.mobile-nav-container-wrap  { position:fixed; z-index:1000; left:auto; right:0; top:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;}
.mobile-nav-container-wrap .mobile-cta-container { padding-bottom:0px; padding-top:var(--spacer-m); background-image:none !important; /*linear-gradient(0deg,rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100%);*/ justify-content:flex-end; padding-right:var(--spacer-m)}

.mobile-cta                 { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; white-space:nowrap; border-radius:30px; background-color:var(--section-bg-color-dark); color:var(--text-color-dark); text-decoration:none; padding:var(--mobile-cta-padding); overflow:hidden; position:relative; z-index:2 }
.mobile-cta.none            { display:none } /* .mobile-cta's display:flex would otherwise beat .none (view switching hides the unused action icon) */
.mobile-cta .icon           { display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:30px; overflow:hidden; position:relative; margin:var(--mobile-cta-margin) }
.mobile-cta .icon svg       { width:var(--mobile-cta-size); height:var(--mobile-cta-size) }
.mobile-cta-icon-stroke     { stroke:var(--text-color-dark) }
.mobile-cta .label          { display:flex; padding:var(--mobile-cta-margin); line-height:var(--mobile-cta-size); box-sizing:border-box; font-weight:500; transition:all 0.2s ease-out; overflow:hidden; }

.mobile-cta.icon-button     { justify-content:center; padding:0; width:40px; height:40px; }
.mobile-cta.icon-button .icon { margin:0 }

.dark .mobile-cta-container { background-image: linear-gradient(0deg,rgba(20, 29, 30, 1) 0%, rgba(20, 29, 30, 0) 100%); }
.dark .mobile-cta           { background-color:var(--section-bg-color-light); color:var(--text-color-light); }
.dark .mobile-cta-icon-stroke{ stroke:var(--text-color-light) }
.mobile-cta-icon-fill       { fill:var(--text-color-dark) } /* a filled glyph (play, pause): the stroke class's twin */
.dark .mobile-cta-icon-fill { fill:var(--text-color-light) }

/* the drag handle of a sheet that swipes away (the call sheet, the 3.2 App Menu): centred by its side margins — it sits
   inside a block wrapper, where align-self does nothing — and its vertical margins are the grab strip's height (call_sheet.js
   measures the wrapper's box, so keep the handle the strip's only content) */
.sheet-handle { width:40px; height:5px; margin:8px auto; border-radius:999px; background:currentColor; opacity:0.2 }

/* .mobile-cta.alt — the outlined (secondary) icon button: a.cta.alt's treatment for .mobile-cta. Transparent, the
   surrounding text colour, a hairline from the alpha tokens; an inset shadow rather than a border, so it measures
   exactly what the filled button does. One filled .mobile-cta per group (the primary action), the rest .alt. */
.mobile-cta.alt,
.dark .mobile-cta.alt       { background-color:transparent; color:currentColor }
.mobile-cta.alt             { box-shadow:inset 0 0 0 1px var(--black-10) }
.dark .mobile-cta.alt       { box-shadow:inset 0 0 0 1px var(--white-10) }
.mobile-cta.alt:hover,
.dark .mobile-cta.alt:hover { box-shadow:inset 0 0 0 1px currentColor }
.mobile-cta.alt:after       { display:none }
.mobile-cta.alt .mobile-cta-icon-stroke,
.dark .mobile-cta.alt .mobile-cta-icon-stroke { stroke:currentColor }
.mobile-cta.alt .mobile-cta-icon-fill,
.dark .mobile-cta.alt .mobile-cta-icon-fill   { fill:currentColor }

.dark .mobile-nav-container-wrap .mobile-cta-container { background-image:transparent; /* linear-gradient(0deg,rgba(20, 29, 30, 0) 0%, rgba(20, 29, 30, 1) 100%);*/ }

.mobile-cta .off-state            { transition:all 0.2s ease-out; transform:scale(1,1) }
.mobile-cta .on-state             { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute }

.mobile-cta.active .off-state     { transform:scale(0,0) }
.mobile-cta.active .on-state      { transform:scale(1,1) }

.mobile-cta.active .hide-on-active { display:none }

.mobile-cta:after { content:""; display:'block'; z-index:-1; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; width:100px; height:100px; border-radius:50px; overflow:hidden; background-color:#fff; opacity:0.5; transform:scale(0,0) }
.mobile-cta:hover:after { transform:scale(1,1); opacity:0.2; transition:all 0.5s ease-out; }

.dark .mobile-cta:after { background-color:var(--accent-2) }
.mobile-cta:hover:after { opacity:0 }

/* Mobile overlay */
.mobile-overlay             { position:fixed; z-index:101; top:0; left:0; right:0; display:flex; pointer-events:none; flex-direction:column; justify-content:flex-end; align-items:center; background-color:rgba(0,0,0,0); padding:10px 30px 90px 30px; transition:all 0.3s ease-out }
.mobile-overlay-backdrop    { position:absolute; z-index:100; top:0; left:0; right:0; bottom:0 }
.mobile-menu                { position:relative; z-index:101; background-color:#F0F0F0; border-radius:24px; width:100%; max-width:400px; padding:4px; opacity:0; transform:translateY(20px) scale(0.95,0.95); transition:all 0.08s ease-out }

.mobile-menu.bright         { background-color:var(--pure-white) }
.dark .mobile-menu.bright   { background-color:var(--deep-dark) }

.mobile-overlay.top-align  { justify-content:flex-start; padding:90px 24px calc(10px + env(safe-area-inset-bottom, 0px)) 24px; }
/* The menu never outgrows the screen (the Use cases group expands it; Vlad, 2026-10-22): the overlay is the viewport (.vh100, dvh,
   border-box), the menu is capped at it as a flex column, the logo row stays put and the list scrolls inside — the App Menu's shape. */
.mobile-overlay.top-align .mobile-menu { max-height:100%; display:flex; flex-direction:column; min-height:0 }
.mobile-overlay.top-align .mobile-menu > nav.mobile-overlay-nav { flex:0 0 auto }
.mobile-overlay.top-align .mobile-menu > .admin-menu { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
.mobile-nav-container-wrap .mobile-cta { box-shadow:0px 0px 20px rgba(0,0,0,0.4); }
.dark .mobile-nav-container-wrap .mobile-cta { box-shadow:0px 0px 20px rgba(255,255,255,0.4); }
/*.mobile-overlay.top-align .mobile-overlay-backdrop { background-image:linear-gradient(0deg,rgba(20, 29, 30, 0) 0%, rgba(20, 29, 30, 1) 100%); opacity:0; transition:all 0.3s ease-out}
.dark .mobile-overlay.top-align .mobile-overlay-backdrop { background-image:linear-gradient(0deg,rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%); opacity:0 }*/

body.mobile-menu-active .mobile-overlay { pointer-events:unset; background-color:rgba(0,0,0,0.4);}
body.mobile-menu-active .mobile-menu    { opacity:1; transform:translateY(0) scale(1,1); }
body.mobile-menu-active.dark .mobile-overlay { background-color:rgba(50,50,50,0.9) }

body.mobile-menu-active .mobile-overlay.top-align .mobile-menu { box-shadow:0px 0px 100px rgba(0,0,0,0.4) }
body.dark.mobile-menu-active .mobile-overlay.top-align .mobile-menu { box-shadow:0px 0px 100px rgba(99,99,99,0.7) }
body.mobile-menu-active.dark .mobile-overlay.top-align,
body.mobile-menu-active .mobile-overlay.top-align { background-color:transparent !important; background-image:none !important }

body.mobile-menu-active .mobile-overlay.top-align .mobile-overlay-backdrop { opacity:1 }

.mobile-menu-line   { background-color:#ffffff; border-radius:20px }
.mobile-menu-line a { display:block; text-decoration:none; color:currentColor }

.mobile-menu nav { justify-content:space-between; }

.dark .mobile-menu { background-color:var(--section-bg-color-dark) }
.dark .mobile-menu-line { background-color:var(--bg-color-dark-pop) }

.svg-icon-fill-inverse { fill:#ffffff }
.dark .svg-icon-fill-inverse { fill:#000000 }


.svg-icon-fill { fill:#000000 }
.dark .svg-icon-fill { fill:#ffffff }

.menu.active .svg-icon-fill { fill:#ffffff }
.dark .menu.active .svg-icon-fill { fill:#000000 }

.svg-icon-stroke-normal { stroke:#000000 }
.dark .svg-icon-stroke-normal { stroke:#ffffff }

#section-secondary .svg-icon-fill { fill:#ffffff }
.dark #section-secondary .svg-icon-fill { fill:#000000 }

.dark .active .svg-icon-stroke,
.svg-icon-stroke { stroke:#000000 }

.active .svg-icon-stroke,
.dark .svg-icon-stroke { stroke:#ffffff }

.menu .off-state { transition:all 0.2s ease-out; transform:scale(1,1); width:16px; height:16px }
.menu .on-state { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute; width:16px; height:16px }

.menu.active .off-state { transform:scale(0,0) }
.menu.active .on-state { transform:scale(1,1) }


/* help center article body (includes/help/articles): a readable line length; the type is the product's classes */
.help-article { max-width:760px }

.admin-menu .integration-header { cursor:pointer; border-left:2px solid rgba(0,0,0,0); text-decoration:none; color:currentColor; }
.admin-menu .integration-header.active { border-left:2px solid var(--text-color-light)}
.dark .admin-menu .integration-header.active { border-left-color:var(--text-color-dark)}

.admin-menu .integration-header p { font-weight:500; opacity:0.9 }
.admin-menu .integration-header.active p { font-weight:500; opacity:1 }

.admin-menu .integration-header.active { position:relative; z-index:1;}
.admin-menu .integration-header.active::after { position:absolute; content:""; display:block; z-index:-1; top:0; left:8px; right:8px; bottom:0; border-radius:4px; overflow:hidden; background-color:rgba(0,0,0,0.03); backdrop-filter: blur(10px) }
.dark .admin-menu .integration-header.active::after { background-color:rgba(255,255,255,0.06) }

.badge { display:flex; border-radius:4px; padding:0 6px; min-width:20px; min-height:20px; align-items: center; justify-content: center; overflow:hidden; background-color:rgba(0,0,0,0.08) }
.dark .badge { background-color:rgba(255,255,255,0.2) }

.admin-menu .integration-header .badge{opacity:0.5 }
.admin-menu .integration-header.active .badge{opacity:1 }

.highlight { position:relative; display:inline-block; padding:0 4px; margin:0 2px }
.highlight:before { content:""; position:absolute; top:0px; left:-1px; right:-1px; bottom:0px; border-radius:4px; background:rgba(0,0,0,0.1) }

.dark .highlight:before { background-color:rgba(255,255,255,0.15) }

.large_badge { display:flex; border-radius:4px; padding:0 10px; min-width:40px; min-height:40px; align-items:center; justify-content:center; overflow:hidden; background-color:#000; color:#fff }
.dark .large_badge { background-color:#fff; color:#000 }

/* the phone call search (CallSearchBar, inbox_view.js; call_view.php's local branch): the round button at the right of the
   profile header opens the search as a pill in the header's place, the native app's; the ✕ in the pill clears and closes.
   Tablet and desktop keep the plain box under the title. */
.call-search-open { margin-left:auto }
.call-search-close { flex:0 0 auto }
@media all and (max-width:600px){
  #search-wrap.search-in-header { display:none }
  /* the pill: 4px around the 40px ✕ (the wrap's pl-m / pr-m / pb-s utilities are !important, so the padding is too), the text 20px in;
     it grows out of the button's corner (transform-origin right) */
  body.call-search-open #search-wrap.search-in-header:not(.none) { display:flex; align-items:center; gap:8px; margin:0 var(--spacer-m) var(--spacer-l) var(--spacer-m); padding:4px 4px 4px 20px !important; border-radius:32px; background-color:var(--pure-white); box-shadow:0 8px 30px var(--black-10); transform-origin:right center; animation:call-search-in 0.22s cubic-bezier(0.215,0.61,0.355,1) }
  body.dark.call-search-open #search-wrap.search-in-header:not(.none) { background-color:var(--deep-dark); box-shadow:0 8px 30px var(--white-10) }
  body.call-search-open #search-wrap.search-in-header .search_input { flex:1 1 auto; min-width:0; padding:12px 0; margin:0 }
  body.call-search-open .call-view-profile { display:none !important } /* the pill takes the header's place (hideondesktop forces block on phones: !important) */
  .call-view-profile.call-search-restored { animation:call-search-back 0.2s ease-out } /* the header coming back (CallSearchBar.close sets the class for a moment) */
  @keyframes call-search-in { from { opacity:0; transform:scaleX(0.85) translateY(-6px) } to { opacity:1; transform:none } }
  @keyframes call-search-back { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
  @media (prefers-reduced-motion: reduce) { body.call-search-open #search-wrap.search-in-header:not(.none), .call-view-profile.call-search-restored { animation:none } }
}
.search_input { background:transparent; border:none; color:var(--text-color-light); }
.dark .search_input { color:var(--text-color-dark); }

.search_input::placeholder { opacity:0.5; color:var(--text-color-light) }
.dark .search_input::placeholder { color:var(--text-color-dark) }

/* HIDE_EMPTY_CATEGORIES: a zero-count category, or a group label with nothing left under it */
.admin-menu .tag-empty { display:none }
.group-header .inline-cta { display:block; width:20px; height:20px; border-radius:4px; text-decoration:none; text-align:center; color:transparent; overflow:hidden; background-color:rgba(0,0,0,0.1); opacity:0.1 }
.group-header:hover .inline-cta { display:block; opacity:0.5; color:currentColor; }
.group-header .inline-cta:hover { opacity:1; color:currentColor; }

.dark .group-header .inline-cta { background-color:rgba(255,255,255,0.1) }

.group-header,
.integration-header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px }
.integration-header div { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:16px }
.integration-header div.stack { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:2px }
.integration-header.talign div { align-items:flex-start }

.integration-header.packed div { gap:6px }
.rendered-model { color:rgba(0,0,0,0.5); }
.dark .rendered-model {color:rgba(255,255,255,0.5)}

.feature-item { border-left:2px solid var(--black-10); padding:var(--spacer-s) var(--spacer-m) }
.dark .feature-item { border-left-color:var(--white-10) }
.feature-item.active { border-left-color:currentColor; }

.feature-item div { opacity:0.7 }
.feature-item.active div { opacity:1 }

.rendered-model span.heavy { color:var(--text-color-light) }
.dark .rendered-model span.heavy { color:var(--text-color-dark) }

.tile-icon { padding:2px; border:1px solid rgba(0,0,0,0.1); border-radius:7px; display:block !important; width:60px; min-width:60px }
.tile-icon img { margin:0 !important }
.tile-icon.tile-photo { text-decoration:none }
.tile-icon.tile-photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; display:block }

.dark .tile-icon { border-color:rgba(255,255,255,0.15) }

/* Drag-and-drop upload zone (reusable) */
.dropzone            { border:2px dashed rgba(0,0,0,0.15); border-radius:var(--border-radius); padding:var(--spacer-s) var(--spacer-s); text-align:center; cursor:pointer; color:var(--faded-text-color-dark); transition:border-color .2s, background-color .2s, color .2s; }
.dropzone:hover      { border-color:rgba(0,0,0,0.35); }
.dropzone.dragover   { border-color:var(--accent-2); background-color:rgba(249,185,42,0.06); color:var(--text-color-light); }
.dropzone.has-file   { border-style:solid; border-color:rgba(0,0,0,0.2); color:var(--text-color-light); }
.dropzone svg        { display:block; margin:0 auto var(--spacer-xs); }
.dark .dropzone      { border-color:rgba(255,255,255,0.18); color:var(--faded-text-color-light); }
.dark .dropzone:hover    { border-color:rgba(255,255,255,0.4); }
.dark .dropzone.dragover { background-color:rgba(249,185,42,0.10); color:var(--text-color-dark); }
.dark .dropzone.has-file { border-color:rgba(255,255,255,0.25); color:var(--text-color-dark); }

/* full-width link-button (the primary <button> uses form button.fullwidth) */
a.cta.fullwidth      { display:block; width:100%; }

#section-secondary .tile-icon { border-color:rgba(255,255,255,0.15) }
.dark #section-secondary .tile-icon { border-color:rgba(0,0,0,0.1) }

.hide-on-dark { display:block }
.hide-on-light { display:none }

.dark .hide-on-dark { display:none }
.dark .hide-on-light { display:block }

#section-secondary .hide-on-dark { display:block; }
#section-secondary .hide-on-light { display:none; }

.dark #section-secondary .hide-on-dark { display:none; }
.dark #section-secondary .hide-on-light { display:block; }

.toggle         { display:inline-block; text-decoration: none; color:var(--text-color-light); padding:2px; border-radius:20px; overflow:hidden; transition:all 0.2s ease-out; border:1px solid rgba(0,0,0,0.5); max-width:30px }
.toggle span    { display:block; text-decoration: none; background-color:var(--text-color-light); width:var(--toggle-sizer); height:var(--toggle-sizer); border-radius:var(--toggle-sizer); text-align:center; line-height:var(--toggle-sizer); margin-right:var(--toggle-sizer); transition:all 0.2s ease-out }

.toggle:hover { background-color:#eee }

.toggle.active { background-color:var(--text-color-light); color:var(--text-color-dark) }
.toggle.active span { background:var(--text-color-dark); margin-left:var(--toggle-sizer); margin-right:0 }

.dark .toggle { color:var(--text-color-dark); border-color:rgba(255,255,255,0.5) }
.dark .toggle:hover { background-color:rgba(255,255,255,0.1) }
.dark .toggle span { background-color:var(--text-color-dark); }
.dark .toggle.active { background-color:var(--text-color-dark); color:var(--text-color-light) }
.dark .toggle.active span { background:var(--text-color-light); }

/* Custom checkbox (call schedule table) — monochrome, themes cleanly in dark */
input[type=checkbox].sched-box {
	appearance:none; -webkit-appearance:none;
	width:18px; height:18px; margin:0; padding:0;
	border:1.5px solid rgba(0,0,0,0.3); border-radius:5px;
	background-color:var(--pure-white);
	vertical-align:-4px; position:relative; cursor:pointer; flex:0 0 auto;
	transition:background-color 0.15s ease-out, border-color 0.15s ease-out;
}
input[type=checkbox].sched-box:hover    { border-color:rgba(0,0,0,0.6); }
input[type=checkbox].sched-box:checked  { background-color:var(--text-color-light); border-color:var(--text-color-light); }
input[type=checkbox].sched-box:checked::after {
	content:''; position:absolute; left:5px; top:1px;
	width:4px; height:9px; border:solid var(--pure-white); border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
input[type=checkbox].sched-box:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }

.dark input[type=checkbox].sched-box           { border-color:rgba(255,255,255,0.35); background-color:transparent; }
.dark input[type=checkbox].sched-box:hover     { border-color:rgba(255,255,255,0.65); }
.dark input[type=checkbox].sched-box:checked   { background-color:var(--text-color-dark); border-color:var(--text-color-dark); }
.dark input[type=checkbox].sched-box:checked::after { border-color:var(--text-color-light); }

/* Consent checkbox row inside a form (marketing opt-in on /start, outbound upload attestation):
   opts out of the floating-label positioning in forms3.css */
form label.consent { position:static; display:flex; align-items:flex-start; gap:8px; margin:0; opacity:1; font-size:12px; line-height:20px; cursor:pointer; }
form label.consent input[type=checkbox] { flex:0 0 auto; margin-top:2px; }

/* Cookie consent pill (templates/cookie-banner.php, libs/fast/consent.js) — modelled on the
   mobile scrollspy pill; z-index 99 sits above .message.fixed (90) and below the context
   menu (100) and the mobile overlay/CTA (101). Hidden while a dialog or the mobile menu is open. */
.cookie-banner { position:fixed; z-index:99; right:calc(24px + env(safe-area-inset-right, 0px)); bottom:calc(24px + env(safe-area-inset-bottom, 0px)); max-width:640px; display:flex; flex-direction:row; align-items:center; gap:14px; padding:8px 8px 8px 20px; border-radius:50px; background-color:rgba(230,230,230,0.75); color:var(--text-color-light); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,0.12); transition:opacity 0.2s ease-out, transform 0.2s ease-out; -webkit-transition:opacity 0.2s ease-out, transform 0.2s ease-out }
.cookie-banner[hidden] { display:none !important }
.cookie-banner p { margin:0; white-space:nowrap }
.cookie-banner p a { color:currentColor; text-decoration:underline; text-underline-offset:2px }
.cookie-actions { display:flex; flex-direction:row; gap:6px; flex-shrink:0 }
.cookie-banner button { appearance:none; -webkit-appearance:none; font:inherit; font-size:12px; line-height:20px; cursor:pointer; background:transparent; color:currentColor; border:1px solid rgba(0,0,0,0.18); border-radius:30px; padding:6px 14px; margin:0; transition:border-color 0.2s ease-out }
.cookie-banner button:hover, .cookie-banner button:focus-visible { border-color:currentColor; outline:none }
body.dark .cookie-banner { background-color:rgba(50,50,50,0.6); color:var(--text-color-dark) }
body.dark .cookie-banner button { border-color:rgba(255,255,255,0.25) }
body.zoomed .cookie-banner, body.mobile-menu-active .cookie-banner { opacity:0; pointer-events:none; transform:translateY(20px) }
@media all and (max-width:600px){
	.cookie-banner { left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); max-width:none; flex-wrap:wrap; justify-content:flex-end; border-radius:24px; padding:14px 16px }
	.cookie-banner p { white-space:normal; flex:1 1 100% }
}

/* Inline error text (schedule "Failed" label, negative wallet balance) — same red as .message.error */
p.error, p.error a.deco { color:var(--error); }
.dark p.error, .dark p.error a.deco { color:var(--error-dark); }


/*********************************************** Tabs ************************************************/
.tabs { border-bottom:1px solid var(--black-10); justify-content:flex-start; gap:0px }
.dark .tabs { border-bottom-color:var(--white-10); }
.tabs.stretched .tab { flex-grow:1 }
.tabs .tab { opacity:0.5; font-weight:600; flex-grow:0; justify-content:center; cursor:pointer }
.tabs .tab div {gap:8px }
.tabs .tab:hover,
.tabs .tab.active { opacity:1; border-bottom:1px solid currentColor; margin-bottom:-1px }
/* tabs that navigate (separate server-rendered views) are <a>s — keep the tab look, not the link look */
.tabs a.tab, .tabs a.tab:hover { color:inherit; text-decoration:none; transition:none }

/*********************************************** Animated border ************************************************/

.animated-stroke {
  background: linear-gradient(var(--section-bg-color-dark), var(--section-bg-color-dark)) padding-box, linear-gradient(
        var(--angle),
        #ffffff,
        var(--section-bg-color-dark)
      ) border-box;
  animation: 4s rotate linear infinite;
}

.animated-stroke-orig {
  background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
        var(--angle),
        #070707,
        #687aff
      ) border-box;
  animation: 4s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/*********************************************** Layout Media Queries ************************************************/

body.ios .hideonios { display:none !important }
body.android .hideonandroid { display:none !important }

@media (display-mode: standalone) {
  body.desktop.webapp .wrap { border-radius:16px; margin:4px; overflow:hidden; max-width:auto !important }
  body.desktop.webapp .vh100 { height:calc(100dvh - 8px) }

  body.viewport_mobile.webapp .wrap,
  body.viewport_mobile.webapp .page { border-radius:16px 16px 0 0; }

  body.webapp {background-color: #E4E8E9 }
  body.dark.webapp { background-color:#292E2F }

}

/*
@media (display-mode: standalone) {
  body.webapp.dark,
  body.webapp { background-color:#000 }
  body.webapp .wrap {border-radius:8px; overflow: hidden}

  @media all and (max-width:600px){
    body.webapp .wrap {border-radius:16px; overflow: hidden}
  }
}*/

@media all and (max-width:600px){

  .hero-asset { margin:-200px -200px 0 }
  .video-bg { margin:-150px -250px -40px }
  .video-bg article { margin:0 80px }

  /*.app #section-intro { background-position: left center; background-image:url("/_s/img/bg/hero/left-glow.svg"); background-size:auto 100% }*/

  :root {

    --spacer-xxl:130px;
    --spacer-xl:50px;
    --spacer-l: 30px;
    --spacer-m: 20px;
    --spacer-s: 15px;
    --spacer-xs:10px;

    --border-radius:8px;
    --full-height-form: calc(100vh - 200px);
  }

  .reduce-pt,
  #section-secondary { 
    --spacer-xxl: 50px
  }

  .marquee .strip p { font-size:16px }
  .superslow { --speed:60s }

  header          { padding:30px }
  footer          { padding-bottom:var(--spacer-xl) }
  footer svg.img,
  header svg.img  { width:80px }

  .page-menu a    { padding:30px }
  section         { padding:0 30px }
  section .page-menu { margin:0 -30px }

  h1.display      { font-size:10vw }
  h1.display.display-small { font-size:8vw }
  h1.display.display-light { font-size:9vw }   /* the light hero headline: the 60px desktop rule is more specific than h1.display above */
  h2.display.display-light { font-size:7vw }
  h1              { font-size:40px }
  h2              { font-size:24px }
  h3              { font-size:20px }
  h4              { font-size:18px }
  p               { font-size:16px; line-height:1.5em }

  header {flex-direction:column; align-items:flex-start; flex-wrap:wrap}
  nav { margin:0 -20px; padding:0 20px; border-bottomm:1px solid rgba(0,0,0,0.1); margin-top:20px; flex-grow: 1; align-items: flex-start; justify-content: flex-start;}
  nav a { margin-bottom:-1px; padding:5px 0; font-size:14px !important }
  .dark nav { border-bottom-color:rgba(255,255,255,0.1); padding:0 20px }

  .mobile-menu nav { margin:0; border-bottom:none }

  .ts-m           { font-size:14px; line-height:1.5em }
  .ts-s           { font-size:12px; line-height:1.25em }
  .ts-xs          { font-size:10px; line-height:1em }

  .mb-mobile-l    { margin-bottom:var(--spacer-l) }
  .ta-left-mobile{ text-align:left; }

  .flexgrid .cell.col-sm-1        { width:25%; }
  .flexgrid .cell.col-sm-2        { width:50%; }
  .flexgrid .cell.col-sm-3        { width:75%; }
  .flexgrid .cell.col-sm-4        { width:100%; }
  .flexgrid .cell.col-sm-33        { width:33.33%; }

  .flexwrap                       { -webkit-overflow-scrolling:touch; white-space: nowrap; overflow-x: scroll; margin-left:-30px; margin-right:-30px; padding-left:0; padding-bottom:0; }
  .flexwrap .flexgrid             { flex-wrap: nowrap; padding-left:30px; padding-right: 28px; padding-bottom:20px }
  .flexwrap .flexgrid .cell       { flex-grow:0; min-width: 75vw }
  .flexwrap .flexgrid .cell .cc   { margin-right:1px }
  .flexwrap .flexgrid.spaced      { margin:0 }
  .flexwrap .flexgrid.spaced .cell .cc { padding-right:0; padding-left:0 }

  .dark #section-secondary .flexwrap.case-study-container,
  .flexwrap.case-study-container { background-color:transparent }
  .flexwrap .flexgrid.cards .cell .cc { padding:var(--spacer-l); margin:0 20px 0 0 }

  .flexwrap.narrow .flexgrid .cell { flex-grow:0; min-width: 45vw }
  .flexwrap.small .flexgrid .cell  { flex-grow:0; min-width: 25vw }
  .rounded .flexwrap.narrow .flexgrid .cell { flex-grow:0; min-width: 45% }

  .flexwrap.hero-feature-grid .flexgrid { padding-bottom:0 }

  .flexwrap .flexgrid.project-list { overflow:auto }
  .flexwrap .flexgrid.project-list .project-tile a,
  .flexwrap .flexgrid.project-list .project-tile img,
  .flexwrap .flexgrid.project-list .project-tile video { border-radius:0; overflow:hidden; }

  .flexwrap .flexgrid.project-list .cell:first-child .project-tile a,
  .flexwrap .flexgrid.project-list .cell:first-child .project-tile img,
  .flexwrap .flexgrid.project-list .cell:first-child .project-tile video { border-radius:var(--border-radius) 0 0 var(--border-radius) }

  .flexwrap .flexgrid.project-list .cell:last-child .project-tile a,
  .flexwrap .flexgrid.project-list .cell:last-child .project-tile img,
  .flexwrap .flexgrid.project-list .cell:last-child .project-tile video { border-radius:0 var(--border-radius) var(--border-radius) 0 }

  .contextmenu-wrap { top:auto; bottom:calc(44px + env(safe-area-inset-bottom, 0px)) }
  
  
  /*
  .scrollspy-anchor-wrap { display:none }
  */
  
  .scrollspy-anchor-wrap  { position:fixed; z-index:100; display:block; margin-left:0; left:34px; right:34px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); top:auto; background-color: rgba(220,220,220, 0.6); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:5px 10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out }
  .scrollspy-anchors      { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:5px 0; gap:0px }
  .scrollspy-anchor-wrap.hidden { bottom:-100px }

  .scrollspy-anchors a        { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; font-size:11px }
  .scrollspy-anchors a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) }
  .scrollspy-anchors span     { display:none }

  .dark .scrollspy-anchor-wrap { background-color: rgba(70,70,70,0.5); }
  .dark .scrollspy-anchors a        { color:var(--text-color-dark) }
  .dark .scrollspy-anchors a.active { color:var(--text-color-light); background-color:var(--accent-1) } 

  .hideonmobile { display:none !important; width:0 !important; height:0 !important }
  .hideondesktop { display:block !important }

  .flexgrid.playlist .cell .cc svg.icon,
  .flexgrid.playlist .cell .cc img{ margin-bottom:20px }

  .flexwrap .project-tile span { left:10px; }
  .project-tile span { opacity:1 }
  .page-menu a p span.meta { font-size:8px }

  .related-project { top:50px; left:10px; right:10px; bottom:50px }
  .playlist-container { border-radius:var(--border-radius) }
  .rounded-container { margin:0 20px 10px 20px; border-radius:var(--border-radius); overflow:hidden; }

  .marquee .strip .tile   { min-width:100px; flex-grow:0 }
  .marquee .strip .tile img { width:70px }

  #integrations-block { background-size:90% auto }
  #integrations-block .logos.light {display: flex }
  #integrations-block .logos.dark {display:none }

  .dark #integrations-block .logos.light {display: none }
  .dark #integrations-block .logos.dark {display:flex }

  #integrations-block .logos { height:80px; margin-top:60px; margin-bottom:40px; flex-direction:row; justify-content:flex-start; align-items:center; white-space: nowrap; gap:10px }
  #integrations-block .logos img { border-radius:4px; width:60px !important; position:static }

  /*
  a.cta { display:flex; min-width:200px; max-width:250px; flex-direction:row; justify-content:space-between; align-items: center; margin-bottom:10px; }
  */
  a.cta { min-width:120px; text-align:center; margin-bottom:10px }
  /* Inbox */
  .layout { flex-wrap:nowrap; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch }
  .message-details-panel { min-width:100vw }
  .message-list {  min-width:100vw; max-width:100vw }

  nav.appnav { display:none }
  #mobile-menu.contextmenu-wrap { display:flex; }

  .message-container { border-radius:0; overflow: hidden; margin:0 0 30px 0; /*background-color:#F0F0F0; border-top:1px solid rgba(0,0,0,0.1)*/ }
  .dark .message-container { border-color:rgba(255,255,255,0.1) }

/*
  .message-container            { background-color:rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .dark .message-container      { background-color:rgba(0,0,0,0.2) }
*/


  .message-list { border:none; padding:0px; max-width:100% }
  .message-item:first-child { border-top:none }
  .message-item,
  .message-item.active { border-left-style:none; }
  .message-item.active { border-left-style:none; background-color:var(--pure-white) }
  .message-item.unseen { border-left-style:solid } /* the marker stays on phones, where the active row has no border */
  .message-item[data-remind-due] { border-left-style:solid }
  .message-item .message-item-summary { opacity:1 }
  .appointments .appointment-row,
  .appointments .appointment-row.active { border-left-style:none }
  .appointments .appointment-row.active { background-color:var(--pure-white) }

  /*.dark .message-container { background-color:var(--bg-color-dark-pop) }*/
  .dark .message-item.active { background-color:rgba(255,255,255,0.05) }
  .dark .appointments .appointment-row.active { background-color:rgba(255,255,255,0.05) }

  .tile-icon { width:48px; min-width:48px; }

  .panel { min-width:50vw; max-width:50vw; }
  .panel.wide { min-width:100vw; max-width:100vw; }

  .feature-overlay-grid { position:relative; }

  .product-curtain { height:50px; }

  .message-details-container { padding:0; border-radius:0px }
  .vis { border-radius:0 }

  .tabs-container { padding:0; /*background-color:#191D1E*/ }
  /*.dark .tabs-container { background-color:#F8F8F8 }*/

  .tabs { padding:0; border-radius:0; background-color:#F8F8F8 }
  .dark .tabs { background-color:#191D1E }
  .tab-content-group { padding:24px }

  .integration-header.stack-mobile { flex-direction:column; justify-content:flex-start; align-content:flex-start; align-items:flex-start; }

  .contextmenu-wrap           { bottom:calc(120px + env(safe-area-inset-bottom, 0px));}
}

@media all and (min-width:601px) and (max-width:1024px){

  .hero-asset { margin:-200px -200px 0 }

  /* the nav popover on a tablet: the viewport's width (the tiles stay 4-up, col-md-1) */
  .nav-popover { width:calc(100vw - 48px) }

  .video-bg { margin-top:0px }

  .product-curtain { height:100px }

  .feature-overlay-grid { position:relative; }

  .flexgrid .cell.col-md-1        { width:25% }
  .flexgrid .cell.col-md-2        { width:50% }
  .flexgrid .cell.col-md-3        { width:75% }
  .flexgrid .cell.col-md-4        { width:100% }

  .ta-left-tablet                 { text-align:left; }
  .hideontablet { display:none !important }

  /* tablets have the phone's App Menu dock (appmenu-v3.css, since 2026-10-14): the fixed pill (the outbound schedule's
     actions) lifts above it, as on phones */
  .contextmenu-wrap           { bottom:calc(120px + env(safe-area-inset-bottom, 0px)) }

  h1.display { font-size:9vw }
  h1.display.display-light { font-size:6vw }

  .message-list { width:360px; min-width:360px; flex:0 0 360px }
  
  .rounded-container { margin:20px }

  #integrations-block { background-size:80% auto }
  #integrations-block .logos img { border-radius:4px }

  #integrations-block .logos img.img1 { top:-230px; left:50px; width:50px  }
  #integrations-block .logos img.img2 { top:-140px; left:20px; width:70px }
  #integrations-block .logos img.img3 { top:0px; left:0; width:70px  }
  #integrations-block .logos img.img4 { top:120px; left:20px; width:70px  }
  #integrations-block .logos img.img5 { top:240px; left:50px; width:50px  }

  #integrations-block .logos img.img6 { top:-230px; right:50px; width:50px  }
  #integrations-block .logos img.img7 { top:-140px; right:20px; width:70px }
  #integrations-block .logos img.img8 { top:0px; right:0; width:70px  }
  #integrations-block .logos img.img9 { top:120px; right:20px; width:70px  }
  #integrations-block .logos img.img0 { top:240px; right:50px; width:50px  }

}

@media all and (min-width:1025px){
    .hideondesktop { display:none !important }
}


@media all and (min-width:2001px) {

  .page { margin-top:60px; margin-bottom:60px; border-radius:12px; overflow:hidden; max-width:2000px }
  body.dark { background-color:#292E2F }
  body.darkk,
  body { background-color:#E4E8E9 }

  h1.display { font-size:70px }

  section.app,
  .layout { height:90vh }

  .mobile-cta-container-wrap { top:80dvh; }

  .contextmenu-wrap { bottom:calc(10vh + env(safe-area-inset-bottom, 0px)) }

  @media (display-mode: standalone) {
    .page { margin:0; border-radius:16px; max-width:none }
    section.app, .layout { height:calc(100dvh - 8px) }
  }

}

@media all and (max-height:850px){
    #onboard-grid { min-height:850px }
    .vh100.valign { align-items: flex-start; padding:150px 0 50px; height:auto }
}

/* ---------- the knowledge-base / SMS editor (includes/forms/markdown_editor.php, markdown_editor.js) ----------
   Layout and the toolbar's box only: the preview's type is the product's classes the renderer emits (Markdown::html). */
.md-import-row { display:flex; gap:8px; align-items:stretch }
.md-import-row .input { flex:1 1 auto; min-width:0 }
.md-import-row button { flex:0 0 auto; white-space:nowrap }
.md-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.md-tool { font-size:13px; line-height:1; padding:7px 10px; border:1px solid var(--black-10); border-radius:4px; background:transparent; color:inherit; cursor:pointer; font-family:inherit }
.md-tool:hover { border-color:currentColor }
body.dark .md-tool { border-color:var(--white-10) }
.md-preview { min-height:var(--full-height-form); padding:8px 12px; border:1px solid var(--black-10); border-radius:var(--border-radius) }
body.dark .md-preview { border-color:var(--white-10) }
.md-preview ul, .md-preview ol { padding-left:20px }
.md-preview li { margin-bottom:4px }
.md-preview code, .md-footer code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.9em }
/* the JSON tree (JsonTree, json_tree.js; the Manage agents viewer): objects and lists fold as <details>, a guide line
   down each open level, keys copy their path, non-string values heavy */
.json-tree { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap:anywhere }
.json-tree summary { cursor:pointer; list-style:none; position:relative; padding-left:16px }
.json-tree summary::-webkit-details-marker { display:none }
.json-tree summary::before { content:"\25B8"; position:absolute; left:0; top:0; opacity:0.5; transition:transform 0.15s }
.json-tree details[open] > summary::before { transform:rotate(90deg) }
.json-tree .jt-leaf { padding-left:16px }
.json-tree .jt-children { margin-left:5px; padding-left:10px; border-left:1px solid var(--black-10) }
body.dark .json-tree .jt-children { border-left-color:var(--white-10) }
.json-tree .jt-key, .json-tree span.jt-val, .json-tree .jt-meta { cursor:copy }
.json-tree .jt-key:hover, .json-tree span.jt-val:hover, .json-tree .jt-meta:hover { text-decoration:underline }
.json-tree .jt-number, .json-tree .jt-boolean, .json-tree .jt-null { font-weight:700 }
.json-tree a.jt-link { color:inherit; text-decoration:none; opacity:0.5 }
.json-tree a.jt-link:hover { opacity:1 }
.json-tree mark.jt-mark { background-color:var(--accent-2); color:var(--text-color-light); border-radius:2px }
.json-tree mark.jt-current { box-shadow:0 0 0 2px var(--text-color-light) }
body.dark .json-tree mark.jt-current { box-shadow:0 0 0 2px var(--text-color-dark) }
.md-footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }

/* ---------- /admin/newsletter: editor + preview ---------- */
.nl-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.nl-tool { font-size:13px; line-height:1; padding:7px 10px; border:1px solid rgba(0,0,0,0.12); border-radius:4px; background:transparent; color:inherit; cursor:pointer; font-family:inherit }
.nl-tool:hover { border-color:#000 }
body.dark .nl-tool { border-color:rgba(255,255,255,0.15) }
body.dark .nl-tool:hover { border-color:#fff }
.newsletter-editor { min-height:280px; padding:16px 18px; border:1px solid rgba(0,0,0,0.12); border-radius:var(--border-radius); background:var(--pure-white); outline:none; line-height:1.55; overflow-wrap:anywhere }
.newsletter-editor:focus { border-color:var(--accent-2) }
.newsletter-editor:empty:before { content:attr(data-placeholder); opacity:.4 }
.newsletter-editor[contenteditable=false] { opacity:.8 }
.newsletter-editor h2 { font-size:20px; margin:16px 0 6px 0 }
.newsletter-editor h3 { font-size:17px; margin:14px 0 4px 0 }
.newsletter-editor p { margin:0 0 10px 0 }
.newsletter-editor ul, .newsletter-editor ol { margin:0 0 10px 0; padding-left:22px }
.newsletter-editor a { color:var(--accent-2); text-decoration:underline }
.newsletter-editor img { display:block; max-width:100%; height:auto; border-radius:8px; margin:0 0 10px 0 }
.newsletter-editor a[data-button] { display:inline-block; background:#151818; color:#fff; text-decoration:none; padding:8px 18px; border-radius:20px; font-weight:700 }
body.dark .newsletter-editor { background:var(--bg-color-dark-pop); border-color:rgba(255,255,255,0.12) }
.newsletter-preview { width:100%; height:680px; border:1px solid rgba(0,0,0,0.12); border-radius:var(--border-radius); background:#fff }
body.dark .newsletter-preview { border-color:rgba(255,255,255,0.12) }


.content-placeholder{
  width: 100%;
  padding-top:125%;
  background: #ccc;
}

.content-placeholder.small { width:50%; padding-top:50% }
/**** Forms ****/
:root {
  --form-width: 450px;
  --form-inner: 350px;
}

.form_steps 					{ background-color:rgba(255,255,255,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:8px; border:1px solid rgba(0,0,0,0.1); overflow: hidden; position: relative; max-width:var(--form-width); display: flex; flex-wrap:nowrap; gap:0px; flex-direction: row; justify-content:flex-start; align-items:stretch; align-content:flex-start;}
.dark .form_steps 		{ background-color:rgba(30,30,30,0.25); border-color:rgba(255,255,255,0.15);  }

/*.zpanel .form_wrap  	{ min-width:400px }*/
.form_wrap  					{ flex-grow:0; display: block; margin:0 auto; overflow: hidden; position: relative; min-width:100%; padding:50px; box-sizing: border-box  }
.form_wrap.off 				{ margin-left:-100%; }

.form_wrap, form 			{ width:auto; }

form 									{ padding:0 }
form .row 						{ position: relative; z-index: 1; margin:0 0 30px 0 }
form .row:last-child  { margin-bottom:0; }
form .row.actions			{ display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; position: relative; overflow:hidden }

form .row_multi label { top:0; margin-top:16px; }
form .row_multi label.on { margin-top:-10px; }

form label 						{ font-size:14px; line-height: 10px; font-weight: 400; text-transform:none; position: absolute; top:50%; margin-top:-5px; left:0; z-index: 4; transition:all 0.2s; -webkit-transition:all 0.2s; opacity:0.5; cursor: pointer}
form label.on 				{ top:0; margin:-10px 0 0 0; font-size:12px; opacity:0.5; z-index: 4; }

form .input 					{ font-size:16px; color:currentColor; font-weight: 500; border:1px solid rgba(0,0,0,0.1); border-width:0 0 1px 0; background:transparent; border-radius:0; margin:0 0 1px 0; padding:10px 0; width:100%; outline:none; -webkit-transition:border-color 0.2s; transition:border-color 0.2s; position: relative; z-index: 3; box-sizing:border-box; }
.dark form .input 		{ border-color:rgba(255,255,255,0.2) }

form .input:focus 		{ border-color:#000000; border-width:0 0 2px 0; margin-bottom:0; }
.dark form .input:focus{ border-color:#fff; border-width:0 0 2px 0; margin-bottom:0; }

.dark form input.error,
form .input.error 		{ border-color:#ff0000;}

form button 				{ font-weight: 500; cursor: pointer; display: inline-block; line-height: 30px; border:none; border-radius:4px; min-width: 120px; text-align: center; float: right; outline: none; padding:8px 10px; background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; color:var(--text-color-dark); transition: background-position 500ms ease-out; position: relative; }
form button:hover,
form button:focus 	{ background-color: #0B65FF }

.dark form button   { background-image: linear-gradient(120deg, #fff 25%, #aaa 37.5%, #777, #aaa 62.5%, #fff 75%); color:var(--text-color-light); }
.dark form button:hover, form button:hover { background-position:left center; }

form button.fullwidth { width:100%; padding-left:0; padding-right:0; }

.form_wrap.compact button { position: absolute; top:50%; right:2px; z-index: 2; transform: translateY(-50%); -webkit-transform:translateY(-50%); margin:0; }

form .option 				{ position:absolute; top:50%; margin-top:-6px; padding-left:0px; width:50% }
form .option label	{ padding-left:0px; position: relative; top:-3px; }
form .option input 	{ width:16px; height: 16px; outline: none }

form .options 			{ border:1px solid #eeeeee; border-width:0 0 1px 0; padding-bottom:5px; }
.options .option 		{ position: static; top:0; margin:0 0 10px 0; width:auto; }

/* The form's message slot (`data-messagebox`): a form's or a dialog's outcome is the product's toast card ANCHORED
   here (Show_Message → Toast.show {anchor}, forms.js / toast.js; Vlad, 2026-10-19), at the top of the panel where the
   old inline message slid in. The slot itself draws nothing and takes no clicks — the card inside does (toast.css,
   .toast-anchor .toast). The legacy empty <p> stays in the markup for the forms' wiring. */
.message 						{ position: absolute; top:5px; left:5px; right:5px; z-index: 2; pointer-events:none }
.message > p:empty 	{ display:none }
.message.fixed  		{ position:fixed; top:10px; width:300px; left:50%; margin-left:-150px; z-index:90 }

form textarea.input { min-height: 120px; max-height:300px; line-height: 22px; min-width:200px; max-width:100%; padding:0 0 0 0; margin:10px 0 0 0; }
form textarea.input.tall { min-height: 300px; max-height: 600px; line-height: 30px; }
form textarea.input.fullscreen { min-height: 300px; max-height: 90vh; height:90vh}

/* a destructive submit (account deletion): the product button's shimmer in red, in both themes; faded until it can be pressed */
form button.danger,
.dark form button.danger { background-image: linear-gradient(120deg, #D0011B 25%, #E8334A 37.5%, #FF8A98, #E8334A 62.5%, #A80016 75%); color:#ffffff; }
form button.danger:disabled { opacity:.4; cursor:default; }
form button.danger:disabled:hover { background-position: right center; }
form button.danger.loading:before,
form button.danger:active:before,
.dark form button.danger.loading:before,
.dark form button.danger:active:before { border-color:transparent #ffffff #ffffff #ffffff; }

form button.loading,
form button:active { color:transparent; position: relative }
form button:active:before,
form button.loading:before { content:""; display:block; position:absolute; left:50%; top:50%; border-radius:50%; box-sizing:border-box; border:2px solid #ffffff; border-color:transparent #ffffff #ffffff #ffffff; width:16px; height:16px; margin:-8px 0 0 -8px; text-align:center; color:#ffffff; line-height: 10px; text-indent: 0; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; }

.dark form button:active:before,
.dark form button.loading:before { border-color:transparent #000000 #000000 #000000; }

@-moz-keyframes spin 		{ 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin 				{ 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


.fullscreen { display:flex; flex-direction:column; justify-content:space-between; align-items:stretchs; align-content:stretch; }
.fullscreen form { flex-grow: 1;}
.fullscreen textarea { flex-grow: 1; height:70vh; max-height:90vh !important; border-width:1px 1px 1px 1px; border-radius:8px; padding:8px !important}
.fullscreen textarea:focus { border-width:1px }
.fullscreen.row { }

textarea.input.fullheight { min-height:var(--full-height-form); min-height:var(--full-height-form); border-width:1px 1px 1px 1px; padding:8px !important; border-radius:8px; resize:none }
textarea.input.fullheight:focus { border-width:1px 1px 1px 1px; }

/*************************************

Mobile

*************************************/

@media all and (max-width:600px){
	form label,
	form button,
	form .input { font-size:14px; }

	.form_steps { width:90vw }
	.form_steps .form_wrap 	{ padding:30px }

	form button { padding:5px; }
}






/*************************************

Tablet

*************************************/

@media all and (min-width:601px) and (max-width:1024px){

	form label,
	form button,
	form .input { font-size:16px; }

	form button { padding:5px; }
}






/*************************************

Desktop

*************************************/

@media all and (min-width:1025px) and (max-width:1440px){
	form label,
	form button,
	form .input { font-size:16px; }

	form button { padding:5px; }
}






/*************************************

Desktop HD

*************************************/

@media all and (min-width:1441px){
}
/**** App Menu V3 ****/
/* App Menu V3 (config APP_MENU_VERSION = 3 / 3.1 / 3.2 / 3.3; includes/inbox/app_menu.php, templates/appnav-v3.php).
   ONE element per page: above 1024px a normal .panel.xnarrow beside the rail (the .admin-menu row
   rules in styles.css apply); at 1024px and below — phones AND tablets since 2026-10-14 (Vlad) — the
   same element becomes the fixed menu: the 3.2 sheet opened by the bottom-centre dock button and
   closed by a tap on the backdrop, a swipe or any choice. On a tablet the rail goes too (the dock is
   the way to Account, Admin and Sign out: the sheet's settings group shows there), while the call
   list and the details column stay side by side — call-sheet.css and the single-pane rules stay at
   600px. The rule that steps the dock aside for the call sheet's close button is phone-only: on a
   tablet a call is always open. Everything here is in the .app-menu* namespace, which no V2 markup carries. */

.app-menu                      { padding-bottom:var(--spacer-m) }
.app-menu-cta .label           { /*display:none*/ }
.app-menu-line p               { margin:0 }
.app-menu-header               { border-bottom:1px none rgba(0,0,0,0.08); margin-bottom:4px; border-radius:20px 20px 0 0 }
.dark .app-menu-header         { border-bottom-color:rgba(255,255,255,0.1) }
.app-menu-header svg.img       { width:80px; display:block }
.app-menu-header a.menu        { margin-left:8px }
/* the active line's avatar: ONE rule for the rail and the 3.3 phone bar (.app-menu-lines prints the rail's markup) */
nav.appnav .line.active .avatar, .app-menu-lines .line.active .avatar          { background-color:var(--text-color-light); color:var(--text-color-dark); border-color:var(--text-color-light) }
.dark nav.appnav .line.active .avatar, .dark .app-menu-lines .line.active .avatar    { background-color:var(--text-color-dark); color:var(--text-color-light); border-color:var(--text-color-dark) }
/* …and with a profile photo: the photo stays as it is, a ring in the same colour marks the line */
nav.appnav .line.active .avatar.has-photo, .app-menu-lines .line.active .avatar.has-photo             { background-color:transparent; border-color:transparent; box-shadow:0 0 0 2px var(--text-color-light) }
.dark nav.appnav .line.active .avatar.has-photo, .dark .app-menu-lines .line.active .avatar.has-photo { background-color:transparent; border-color:transparent; box-shadow:0 0 0 2px var(--text-color-dark) }
nav.appnav .line .avatar a, .app-menu-lines .line .avatar a               { text-decoration:none; color:currentColor; border-bottom:none; display:flex; width:100%; height:100%; align-items:center; justify-content:center }
/* crossing a breakpoint (f.js Mark_Viewport_Change, html.viewport-changing for 300ms): the panel turns from the column into the
   hidden sheet, or back, and the dock and the backdrop appear or go — none of it animates, or the menu flashes across the screen */
html.viewport-changing .panel.xnarrow.app-menu, html.viewport-changing .app-menu-backdrop, html.viewport-changing .app-menu-dock, html.viewport-changing .app-menu-dock .mobile-cta-container::before, html.viewport-changing .app-menu-topfade { transition:none !important }
.app-menu-when-dark            { display:none }
body.dark .app-menu-when-dark  { display:flex }
body.dark .app-menu-when-light { display:none }

@media all and (max-width:1024px){ /* phones and tablets: the sheet, the dock, the backdrop */

  .app-menu-scroll { background-color:var(--pure-white); border-radius:var(--border-radius) }
  .dark .app-menu-scroll { background-color:var(--deep-dark); }

  .app-menu-header { margin:0 }
  .app-menu-header.hideondesktop { display:flex !important }  /* .hideondesktop forces block here; the header is the logo | icons flex row */
  .panel.xnarrow.app-menu {  /* outranks .panel.xnarrow's fixed 250px and the phone .panel min/max-width */
    position:fixed; z-index:1000; top:90px; left:24px; right:24px; width:auto; min-width:0; max-width:400px; margin:0 auto;
    max-height:calc(100dvh - 110px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    border-radius:24px; border-right:none; padding:4px 4px 16px 4px;
    background-color:var(--pure-white); backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:0; pointer-events:none; transform:translateY(20px) scale(0.95,0.95); transition:all 0.08s ease-out;
  }
  .dark .panel.xnarrow.app-menu                              { background-color:var(--deep-dark) }
  body.mobile-menu-active .panel.xnarrow.app-menu            { opacity:1; pointer-events:auto; transform:translateY(0) scale(1,1); box-shadow:0px 0px 100px rgba(0,0,0,0.4); background-color:var(--section-bg-color-light); }
  body.dark.mobile-menu-active .panel.xnarrow.app-menu       { box-shadow:0px 0px 100px rgba(99,99,99,0.7); background-color: var(--section-bg-color-dark); }

  /* 3.1: the header row stays put and only the groups scroll, inside their own container. The panel
     becomes a clipping flex column (!important: settings pages render it with .hideondesktop, which
     forces display:block here); its max-height still caps the whole menu. */
  .panel.xnarrow.app-menu.app-menu-fixed-header   { display:flex !important; flex-direction:column; overflow:hidden; padding-bottom:0 }
  .app-menu-fixed-header > .app-menu-header       { flex:0 0 auto }
  .app-menu-fixed-header > .app-menu-scroll       { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:16px }

  .app-menu-backdrop                           { position:fixed; z-index:999; top:0; left:0; right:0; bottom:0; pointer-events:none; background-color:rgba(0,0,0,0); transition:background-color 0.3s ease-out }
  body.mobile-menu-active .app-menu-backdrop   { pointer-events:auto; background-color:rgba(0,0,0,0.4) }
  body.mobile-menu-active.dark .app-menu-backdrop { background-color:rgba(50,50,50,0.9) }

  /* the button sits over the top-right ~64px: keep the list header's count badge and the details
     pane's call / archive icons clear of it (the nav block is always the layout's first child) */
  /*.app-menu-phone ~ .message-list .call-view-header                          { padding-right:80px !important }
  .app-menu-phone ~ .message-details-panel .call-view-pane-header > div:last-child { padding-right:72px }*/

  /* ---------- 3.2: the phone menu is a sheet — the call sheet's box and motion (call-sheet.css; AppNavIncludeTest keeps
     the two in step) — and the button sits at the bottom centre ---------- */

  /* the panel: fixed in the call sheet's box, no cap of its own; closed = hidden + slightly down and small, open reverses
     it. The closed transform keeps --menu-drag, so a flung sheet fades out where it is (the call sheet's lesson). */
  .panel.xnarrow.app-menu.app-menu-sheet {
    top:calc(10px + env(safe-area-inset-top, 0px)); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); left:10px; right:10px;
    max-width:none; max-height:none; margin:0; border-radius:32px; padding:0;
    transform:translateY(calc(24px + var(--menu-drag, 0px))) scale(0.96);
    transition:opacity 0.15s cubic-bezier(0.55,0.055,0.675,0.19), transform 0.15s cubic-bezier(0.55,0.055,0.675,0.19);
  }
  body.mobile-menu-active .panel.xnarrow.app-menu.app-menu-sheet { transform:translateY(var(--menu-drag, 0px)) scale(1); box-shadow:none; transition:opacity 0.2s cubic-bezier(0.215,0.61,0.355,1), transform 0.2s cubic-bezier(0.215,0.61,0.355,1) }
  body.mobile-menu-active .panel.xnarrow.app-menu.app-menu-sheet.dragging { transition:none }
  body.mobile-menu-active .panel.xnarrow.app-menu.app-menu-sheet.settling { transition:transform 0.25s cubic-bezier(0.215,0.61,0.355,1) }
  body.mobile-menu-active .panel.xnarrow.app-menu.app-menu-sheet.flinging { transition:transform 0.18s cubic-bezier(0.55,0.055,0.675,0.19) }
  .app-menu-sheet .app-menu-scroll { border-radius:16px; padding:24px 0 16px 0; margin:0 4px }

  /* the top part: the drag handle + the header row, the swipe-down surface (touch-action:none hands the gesture to
     DragDismiss; the buttons in the row keep their own taps) */
  .app-menu-sheet .app-menu-top { flex:0 0 auto; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent }
  .app-menu-top.hideondesktop { display:block !important }
  .app-menu-sheet .app-menu-header { border-radius:0 }

  /* the backdrop: the call sheet's scrim, and it follows the drag (DragDismiss sets its opacity) */
  body.mobile-menu-active .app-menu-phone .app-menu-backdrop { background-color:var(--scrim) }
  body.mobile-menu-active.dark .app-menu-phone .app-menu-backdrop { background-color:var(--scrim-dark) }
  .app-menu-backdrop.dragging { transition:none }

  /* the dock: bottom centre, the button over a fade into the page — the legacy overlay's. FIXED to the viewport, above
     the gesture bar by the safe-area inset, exactly like the call sheet's close button: the first cut sat absolute at the
     bottom of .layout and in the installed Android app the shell rendered taller than the viewport after every load,
     so the dock was clipped off the bottom while the sheet's fixed close button was fine. Only the button takes taps;
     the fade lets them through to the list. Hidden while a call sheet is open: its close button sits there.
     The dock sits above the open menu's backdrop (999) and panel (1000): the button is the menu's X while it is open,
     like the call sheet's close button over its scrim. Without a z-index of its own it painted in DOM order inside
     .layout — first, before the list — and the frosted list card (a backdrop-filter is a stacking layer) covered it.
     The fade is a ::before under the button and goes while the menu is open: the scrim covers the list then, and the
     fade would sit over the open sheet's bottom edge. */
  .app-menu-dock { position:fixed; z-index:1001; left:0; right:0; bottom:env(safe-area-inset-bottom, 0px); display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none; transition:opacity 0.2s, transform 0.25s ease-out }
  .app-menu-dock .mobile-cta-container { position:relative; padding:56px 0 24px 0; background-image:none }
  .app-menu-dock .mobile-cta-container::before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(0deg, var(--section-bg-color-light) 0%, rgba(248,248,248,0) 100%); transition:opacity 0.2s }
  .dark .app-menu-dock .mobile-cta-container::before { background-image:linear-gradient(0deg, var(--section-bg-color-dark) 0%, rgba(25,29,30,0) 100%) }
  body.webapp .app-menu-dock .mobile-cta-container::before { border-radius:0 0 28px 28px } /* the app shell's .wrap corners, which a fixed dock is no longer clipped by */
  body.mobile-menu-active .app-menu-dock .mobile-cta-container::before { opacity:0 }
  .app-menu-dock .mobile-cta { pointer-events:auto; box-shadow:0px 0px 20px var(--black-20) }
  .dark .app-menu-dock .mobile-cta { box-shadow:0px 0px 20px var(--white-20) }
  /* the bulk selection's menu sits at the bottom of the list there: the dock slides down out of view, and once it is gone it takes
     no taps and no focus (visibility, after the slide); the button is switched off itself — its own pointer-events:auto would win */
  body.call-select-active .app-menu-dock { opacity:0; pointer-events:none; transform:translateY(100%); visibility:hidden; transition:opacity 0.2s, transform 0.25s ease-in, visibility 0s linear 0.25s }
  body.call-select-active .app-menu-dock .mobile-cta { pointer-events:none }

  /* the top fade (app_menu_top_fade): the dock's fade turned the other way up at the top edge, under the status bar too,
     shown once the page's scroll pane has moved — body.app-scrolled, set by Init_Top_Fade (f.js) from .message-list /
     .full-width-container, the panes the phone pages scroll inside (never the window). Takes no taps. Gone while the
     menu is open (it would sit over the scrim, like the dock's) and while a call sheet is open, like the dock. */
  .app-menu-topfade { position:fixed; z-index:1001; top:0; left:0; right:0; height:calc(64px + env(safe-area-inset-top, 0px)); pointer-events:none; opacity:0; transition:opacity 0.2s; background-image:linear-gradient(180deg, var(--section-bg-color-light) 0%, rgba(248,248,248,0) 100%) }
  .dark .app-menu-topfade { background-image:linear-gradient(180deg, var(--section-bg-color-dark) 0%, rgba(25,29,30,0) 100%) }
  body.viewport_mobile.webapp .app-menu-topfade { border-radius:16px 16px 0 0 } /* the app shell's .wrap top corners (styles.css, standalone) */
  body.app-scrolled .app-menu-topfade { opacity:1 }
  body.mobile-menu-active .app-menu-topfade, body.call-sheet-open .app-menu-topfade { opacity:0 }

  /* ---------- 3.3: the lines as avatars and the view tabs in the sheet's fixed part, under the header row, beside the
     gesture surface (not inside it: the avatar row pans sideways, and DragDismiss skips a pointer that starts on a link).
     Both are phone-only flex rows, so they need !important over .hideondesktop's display:block (the header's precedent).
     The tabs are the product's .tabs / .tab markup; the panel is .admin-menu, whose row rules paint a left border and an
     ::after pill on any .integration-header.active — cancelled here, and so is the phone .tabs background. The scrolling
     list starts with All calls: the first category group's label is hidden on phones. ---------- */
  .app-menu-tabbed .app-menu-lines { display:flex !important; flex:0 0 auto; flex-direction:row; align-items:center; gap:8px; padding:4px 16px 8px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .app-menu-tabbed .app-menu-lines .line { flex:0 0 auto }
  .app-menu-tabbed .app-menu-tabs { display:flex !important; flex:0 0 auto; margin:0 16px 4px 16px; background-color:transparent; border-left:none; border-bottom:none; border-radius:0 }
  .app-menu-tabbed .app-menu-tabs .tab { border-left:none; border-bottom-width:2px }
  .app-menu-tabbed .app-menu-tabs .tab.active::after { content:none }
  .app-menu-tabbed .app-menu-scroll > [data-tag-group] > .group-header:first-child { display:none }
  /* a tab is a preview (AppMenuTabs, inbox_view.js): while the panel is previewing, a wrapper the page hides with .none
     (another view's categories) shows anyway — .none's hiding undone property by property — and the wrappers of the
     other views step aside under the preview's own class; .none itself is never touched, it is the page's state */
  .app-menu-tabbed.app-menu-previewing [data-tag-group].none { display:block; opacity:1; position:static; top:auto; left:auto; width:auto; height:auto; overflow:visible; z-index:auto }
  .app-menu-tabbed.app-menu-previewing [data-tag-group].app-menu-preview-off { display:none }
}

/* phones only: the dock steps aside for the call sheet's close button, which sits in its place (the drawer). On a tablet the
   call sheet is the details column with no close button, and a call is open whenever the list has one. */
@media all and (max-width:600px){
  body.call-sheet-open .app-menu-dock { opacity:0; pointer-events:none }
  body.call-sheet-open .app-menu-dock .mobile-cta { pointer-events:none } /* the button's own pointer-events:auto would win over the dock's none */
}

/* tablets: the phone menu over the two-panel call view. The markup keeps its phone-only classes (hideondesktop hideontablet;
   the tests pin them), so the parts the sheet needs are shown here over styles.css's .hideontablet, with the same !important
   the phone range uses over .hideondesktop. The rail goes (styles.css hides it on phones; it has no hideon class), the
   desktop-only rows of the 3.3 panel (the views and line-switcher groups, hideonmobile) stay hidden inside the sheet, and the
   sheet itself is centred at a phone's width rather than stretched across the tablet. */
@media all and (min-width:601px) and (max-width:1024px){
  nav.appnav { display:none }
  .app-menu-phone.hideontablet { display:block !important }
  .app-menu-top.hideontablet { display:block !important }
  .app-menu-header.hideontablet { display:flex !important }
  .app-menu [data-app-menu-group='settings'].hideontablet, .app-menu [data-app-menu-group='inboxes'].hideontablet { display:block !important }
  .app-menu-tabbed [data-app-menu-group='views'].hideonmobile, .app-menu-tabbed [data-app-menu-group='lines'].hideonmobile { display:none !important }
  .panel.xnarrow.app-menu.app-menu-sheet { max-width:480px; margin:0 auto }
  .cookie-banner { bottom:calc(84px + env(safe-area-inset-bottom, 0px)) } /* clear of the dock, as on phones */
}

/**** Call Details 2.0 (the phone drawer) ****/
/*
 * Call Details 2.0 — the call sheet (includes/inbox/call_sheet.php, _s/js/libs/call_sheet.js), a port of the
 * native app's. ONE component at every width, all of it under .call-details-v2 (the section class
 * render_call_view() adds for version 2; version 1 never sees a rule from this file):
 *   shared          — tokens, the top part, the sound form, the transcript, the panes
 *   <=600px         — a floating drawer over the list: scrim, swipe-dismiss, the round close button, the more menu
 *   >=601px         — the details column beside the list: full height, tabs instead of the more menu, no close button
 * What shows where is the product's hideonmobile / hideondesktop / hideontablet classes in the markup.
 *
 * Buttons are the product's .mobile-cta / .mobile-cta.alt (styles.css) — nothing here draws one.
 * Layout, colour tokens and motion only. Type is the product's own classes in the markup (ts-m / ts-s /
 * heavy / opacity50, <h4 class='heavy'>) — do not add font-size, line-height or font-weight rules here.
 */

.call-sheet, .call-sheet-scrim, .call-sheet-close { display:none }

/* The sheet's colours are the product's tokens (:root in styles.css), re-pointed for dark mode — no raw colour
   in this file. The surface is the App Menu's (white / --deep-dark). */
.call-details-v2 {
  --cs-bg:var(--pure-white); --cs-text:var(--text-color-light);
  --cs-border:var(--black-10); --cs-hover:var(--black-10);
  --cs-scrim:var(--scrim); --cs-error:var(--error);
  --cs-ease-out:cubic-bezier(0.215,0.61,0.355,1); --cs-ease-in:cubic-bezier(0.55,0.055,0.675,0.19);
}
body.dark .call-details-v2 {
  --cs-bg:var(--deep-dark); --cs-text:var(--text-color-dark);
  --cs-border:var(--white-10); --cs-hover:var(--white-10);
  --cs-scrim:var(--scrim-dark); --cs-error:var(--error-dark);
}

/* the legacy pane stays in the DOM (it holds #audio and AudioMotion's canvases) but never shows under version 2 */
.call-details-v2 .message-details-panel { display:none }

.call-details-v2 .call-sheet { display:flex; flex-direction:column; border-radius:32px; overflow:hidden; background:var(--cs-bg); color:var(--cs-text); opacity:0; visibility:hidden; pointer-events:none }
.call-details-v2 .call-sheet.open { opacity:1; visibility:visible; pointer-events:auto }
.call-details-v2 .call-sheet .none { display:none !important }

/* side glow: four blobs hanging off the left edge, never reaching past a third of the width */
.call-sheet .cs-glow { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; transition:opacity 0.25s ease-out }
.call-sheet .cs-glow i { position:absolute; display:block; border-radius:50%; transform:translate(-50%,-50%); animation:cs-drift 16s ease-in-out infinite alternate }
.call-sheet .cs-glow i:nth-child(1) { left:-70px; top:30%; width:270px; height:270px; opacity:0.7;  background:radial-gradient(circle closest-side, var(--glow-side-1) 0%, transparent 100%); animation-duration:17s }
.call-sheet .cs-glow i:nth-child(2) { left:-20px; top:42%; width:190px; height:190px; opacity:0.64; background:radial-gradient(circle closest-side, var(--glow-side-2) 0%, transparent 100%); animation-duration:15s; animation-delay:-1.5s }
.call-sheet .cs-glow i:nth-child(3) { left:-10px; top:55%; width:170px; height:170px; opacity:0.58; background:radial-gradient(circle closest-side, var(--glow-side-3) 0%, transparent 100%); animation-duration:19s; animation-delay:-0.8s }
.call-sheet .cs-glow i:nth-child(4) { left:-64px; top:67%; width:262px; height:262px; opacity:0.7;  background:radial-gradient(circle closest-side, var(--glow-side-4) 0%, transparent 100%); animation-duration:16s; animation-delay:-2.5s }
@keyframes cs-drift { from { transform:translate(-50%,-50%) scale(1) } to { transform:translate(calc(-50% + 30px), calc(-50% - 24px)) scale(1.14) } }

/* top part: the tap / scrub surface, and on phones the swipe-dismiss one (touch-action:none hands every gesture to call_sheet.js) */
.call-sheet .cs-header { position:relative; z-index:2; flex:none; display:flex; flex-direction:column; gap:4px; padding:0 24px var(--spacer-m); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:pointer }
/* the handle is the product's .sheet-handle (styles.css); .cs-handle is the hook call_sheet.js measures the grab strip from */

.call-sheet .cs-swap { position:relative }
.call-sheet .cs-caller { display:flex; flex-direction:row; align-items:center; gap:8px; transition:opacity 0.16s var(--cs-ease-in) }
.call-sheet .cs-caller-text { flex:1; min-width:0; padding-left:4px }
.call-sheet .cs-date-inline::before { content:"\00a0\00b7\00a0" } /* tablet + desktop: the date sits beside the number (phones keep it in the more menu) */
.call-sheet .cs-actions { display:flex; flex-direction:row; gap:8px }
/* Reply: the pending marker, a dot on the button's corner (the phone menu item carries a .highlight span instead) */
/* the button clips its content (.mobile-cta: overflow:hidden on a round box), which cut the dot off: a button that carries
   a dot lets it overflow — safe on .alt, whose hover ripple (:after) is off — and the dot is centred ON the circle's edge
   (the edge of a 40px circle passes ~6px in from the corner of its box), so it reads as a badge, whole */
.call-sheet [data-cs-reply], .call-sheet [data-cs-remind-toggle] { position:relative; overflow:visible }
.call-sheet .cs-reply-dot { position:absolute; z-index:1; top:2px; right:3px; width:8px; height:8px; border-radius:50%; background:currentColor; pointer-events:none }
/* Reminder: the same dot when one is set; its presets menu is a second .cs-menu (phones: in the more menu's place) */
/* the Reply dialog (and Starter's plan panel) opens OVER the open sheet, which stays put underneath: a .zpanel is z 21, the drawer 1101 */
body.call-sheet-open #zoom-outbox, body.call-sheet-open #zoom-update-plan, body.call-sheet-open #zoom-rename-caller { z-index:1200 }
.call-sheet .cs-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.call-sheet .cs-readout { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:opacity 0.16s var(--cs-ease-in) }
.call-sheet.scrubbing .cs-caller { opacity:0; transition-timing-function:var(--cs-ease-out) }
.call-sheet.scrubbing .cs-readout { opacity:1; transition-timing-function:var(--cs-ease-out) }

/* the buttons are .mobile-cta / .mobile-cta.alt; here only how they sit in the row, and which glyph of a pair shows */
.call-sheet .mobile-cta { flex:none }
.call-sheet .cs-icon-person, .call-sheet .cs-icon-pause { display:none }
.call-sheet.no-number [data-cs-call] { pointer-events:none }
.call-sheet.no-number .cs-icon-phone { display:none }
.call-sheet.no-number .cs-icon-person { display:block }
.call-sheet.playing .cs-icon-play { display:none }
.call-sheet.playing .cs-icon-pause { display:block }

.call-sheet.playing .cs-glow { opacity:0.5 }

/* sound form: flat 20px bars at rest, scaleY driven per frame while playing (.live drops the settle transition) */
.call-sheet .cs-wave { display:flex; flex-direction:row; justify-content:space-between; align-items:center; height:100px; pointer-events:none }
.call-sheet .cs-wave i { display:block; flex:none; width:3px; height:20px; background:var(--cs-text); opacity:0.1; transform:scaleY(1); transition:transform 0.25s ease-out, opacity 0.15s linear }
.call-sheet .cs-wave i.played { opacity:1 }
.call-sheet .cs-wave.live i { transition:opacity 0.15s linear }

.call-sheet .cs-locked { display:flex; flex-direction:column; gap:8px; padding:12px 0 }

.call-sheet .cs-divider { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cs-border); opacity:0 }

/* bottom part: the only thing that scrolls */
.call-sheet .cs-body { position:relative; z-index:1; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:12px 0 72px 0 }
.call-sheet .cs-pane-padded { padding:0 24px }
.call-sheet .cs-state { padding:0 24px }

.call-sheet .cs-row { padding:0 24px 32px 24px; opacity:1; transition:opacity 0.2s ease-out; -webkit-tap-highlight-color:transparent }
.call-sheet .cs-row:last-child { padding-bottom:0 }
.call-sheet .cs-row.cs-dim { opacity:0.25 }
.call-sheet .cs-row.cs-seekable { cursor:pointer }
.call-sheet .cs-row.cs-seekable:active .cs-row-in { opacity:0.6 }
.call-sheet .cs-row-in { display:flex; flex-direction:row; align-items:flex-start; gap:16px }
/* avatars are the product's: .avatar.primary (filled) for the caller, .avatar for the assistant — here only how they
   sit in the row, and the assistant's outlined look (no .cs-avatar on the caller: its transparent fill would win) */
.call-sheet .avatar { flex:none }
.call-sheet .cs-avatar { border-color:var(--cs-border); background:transparent; color:var(--cs-text) }
.call-sheet .cs-meta { flex:1; min-width:0 }
.call-sheet .cs-row-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px }
.call-sheet .cs-row-text { overflow-wrap:anywhere }

.call-sheet .cs-fade { position:absolute; z-index:3; left:0; right:0; bottom:0; height:72px; pointer-events:none; background:linear-gradient(to bottom, transparent 0%, var(--cs-bg) 100%) }

/* tabs (tablet + desktop; the markup is the product's .tabs / .tab, switched by call_sheet.js) */
.call-sheet .cs-tabs { position:relative; z-index:2; flex:none; padding:0 }

/* the more menu (phones) */
.call-sheet .cs-menu { position:absolute; z-index:5; top:64px; right:24px; min-width:220px; padding:8px 0; border-radius:16px; border:1px solid var(--cs-border); background:var(--cs-bg); box-shadow:0 12px 40px var(--black-20) }
.call-sheet .cs-menu-header { display:flex; flex-direction:column; padding:8px 16px 10px 16px }
.call-sheet .cs-menu-item { display:block; padding:12px 16px; color:var(--cs-text); text-decoration:none; pointer-events:relative; position:relative; }
.call-sheet .cs-menu-item:hover:after { content:""; display:block; position:absolute; top:4px; left:4px; right:4px; bottom:4px; border-radius:4px; background:var(--cs-hover); opacity:0.4 } /* the 10% token at 40% = a 4% wash */
.call-sheet .cs-menu-item:active { opacity:0.6 }
.call-sheet .cs-menu-danger { color:var(--cs-error) }
.call-sheet .cs-menu-rule { height:1px; margin:8px 0; background:var(--cs-border) }


/* ---------- phones: a floating drawer over the list ---------- */
@media all and (max-width:600px) {

  .call-details-v2 .layout { overflow-x:hidden } /* no second page to swipe to */

  /* the open call IS the drawer, so the row behind the scrim carries no selected look: the list's white fill + 20px
     backdrop blur sat there unseen and then popped off as the scrim lifted (a backdrop filter cannot fade) — a flash
     on every dismiss. Tablet + desktop keep the highlight: there the row and the column show side by side. */
  .call-details-v2 .message-item.active,
  body.dark .call-details-v2 .message-item.active { background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }

  /* scrim, drawer, close button: closed = hidden + slightly down and small; .open reverses it.
     The closed transform keeps --cs-drag: a drawer flung off-screen must fade out down there — without it the
     exit transition pulled it back to the centre for its 150ms, a flash after every swipe-dismiss */
  /* pointer-events follow .open at once — visibility only flips when the fade ends, and until then the closing scrim and
     close button used to swallow the first tap on the list (a third of a second after a swipe-dismiss) */
  .call-details-v2 .call-sheet-scrim { display:block; position:fixed; z-index:1100; top:0; left:0; right:0; bottom:0; background:var(--cs-scrim); opacity:0; visibility:hidden; pointer-events:none; touch-action:none; transition:opacity 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
  .call-details-v2 .call-sheet-scrim.open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.2s var(--cs-ease-out), visibility 0s }
  .call-details-v2 .call-sheet-scrim.dragging { transition:none }

  /* the insets are 0 unless the page draws under a system bar (viewport-fit=cover): the drawer and its close button stay clear of it */
  .call-details-v2 .call-sheet { position:fixed; z-index:1101; top:calc(10px + env(safe-area-inset-top, 0px)); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); left:10px; right:10px; transform:translateY(calc(24px + var(--cs-drag, 0px))) scale(0.96); transition:opacity 0.15s var(--cs-ease-in), transform 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
  .call-details-v2 .call-sheet.open { transform:translateY(var(--cs-drag, 0px)) scale(1); transition:opacity 0.2s var(--cs-ease-out), transform 0.2s var(--cs-ease-out), visibility 0s }
  .call-details-v2 .call-sheet.open.dragging { transition:none }
  .call-details-v2 .call-sheet.open.settling { transition:transform 0.25s var(--cs-ease-out) }
  .call-details-v2 .call-sheet.open.flinging { transition:transform 0.18s var(--cs-ease-in) }

  .call-details-v2 .call-sheet-close { display:flex; position:fixed; z-index:1102; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%; margin-left:-24px; opacity:0; visibility:hidden; pointer-events:none; transform:scale(0.8); transition:opacity 0.15s var(--cs-ease-in), transform 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
  .call-details-v2 .call-sheet-close.open { opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); transition:opacity 0.2s var(--cs-ease-out), transform 0.2s var(--cs-ease-out), visibility 0s }

  @media (prefers-reduced-motion: reduce) {
    .call-details-v2 .call-sheet, .call-details-v2 .call-sheet.open { transform:translateY(var(--cs-drag, 0px)) }
  }
}

/* ---------- tablet + desktop: the details column beside the list, full height ---------- */
@media all and (min-width:601px) {

  /* where .message-details-panel used to be: same width, stretched by .layout to the full height (no bottom margin);
     no surface of its own — the page shows through */
  .call-details-v2 .call-sheet { position:relative; flex:0 1 600px; background:none; border-radius:16px; width:600px; min-width:300px; margin:0; transition:opacity 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
  .call-details-v2 .call-sheet.open { transition:opacity 0.5s ease-out, visibility 0s }

  /* the top part is a frosted card on the page (the list's active-row glass); the transcript sits straight on the page */
  .call-sheet .cs-header { padding-top:var(--spacer-m); padding-bottom:32px; border-radius:0px; /*background-color:var(--white-20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);*/ }
  .dark .call-sheet .cs-header       { /*background-color:var(--black-20)*/ }

  /* the presets menu hangs under the Reminder button: one button (40px) and one gap (8px) left of the column's edge */

  .call-sheet .cs-body { padding-top:24px }
  /* no sheet surface here, so nothing to glow on, divide from, or fade into */
  .call-sheet .cs-divider, .call-sheet .cs-fade,
  .dark .call-sheet .cs-glow,
  .call-sheet .cs-glow { display:none !important }

}

@media (prefers-reduced-motion: reduce) {
  .call-sheet .cs-glow i { animation:none }
}

/* desktop only: the reminder presets open under the Reminder button in the caller row's action group. Phones AND tablets
   (since 2026-10-14 the tablet's caller row is the phone's) open them from the more menu's item, in the more menu's place —
   the base .cs-menu position above. */
@media all and (min-width:1025px) {
  .call-sheet .cs-remind-menu { top:calc(var(--spacer-m) + 48px); right:72px }
}

/**** Toasts (page-level outcomes; forms keep their .message) ****/
/*
 * Toasts (Toast, _s/js/libs/toast.js; Vlad, 2026-10-14): the outcome of a page-level action — a row action, a bulk
 * action, a toggle, a failed request — as a stack of small cards top-right (across the top on phones), newest on top.
 * A form's or a dialog's outcome is the same card ANCHORED in the form's .message slot (Vlad, 2026-10-19; the slot's
 * position is forms3.css's): it drops in from above where the old inline message slid in, one per slot, no stack.
 * A neutral card with the type's colour on a dot and on the 2px bar that drains while the toast lives; hover or focus
 * pauses it. Layout, colour tokens and motion only: the type is ts-s and the padding p-xs in the markup, and every
 * colour is a :root token re-pointed for dark mode here.
 */
.toast-anchor, .toasts {
	--toast-bg:var(--pure-white);
	--toast-text:var(--text-color-light);
	--toast-border:var(--black-10);
	--toast-shadow:var(--black-20);
	--toast-success:var(--success);
	--toast-error:var(--error);
	--toast-info:var(--info);
	--toast-ease-out:cubic-bezier(0.215,0.61,0.355,1);
	--toast-ease-in:cubic-bezier(0.55,0.055,0.675,0.19);
}
body.dark .toast-anchor, body.dark .toasts {
	--toast-bg:var(--deep-dark);
	--toast-text:var(--text-color-dark);
	--toast-border:var(--white-10);
	--toast-success:var(--success-dark);
	--toast-error:var(--error-dark);
	--toast-info:var(--info-dark);
}
.toasts {
	position:fixed; z-index:1300;
	top:calc(16px + env(safe-area-inset-top, 0px));
	right:calc(16px + env(safe-area-inset-right, 0px));
	width:340px; max-width:calc(100vw - 32px);
	display:flex; flex-direction:column;
	pointer-events:none;
	transition:top 0.2s var(--toast-ease-out);
}
/* an open dialog's close button sits fixed at 15/15: the stack steps below it */
body.zoomed .toasts { top:calc(64px + env(safe-area-inset-top, 0px)) }

/* the outer box collapses when a toast leaves (the padding lives on .toast-body, so the height can reach 0) */
.toast {
	pointer-events:auto; position:relative; overflow:hidden;
	margin-bottom:8px;
	background:var(--toast-bg); color:var(--toast-text);
	border:1px none var(--toast-border); border-radius:4px;
	box-shadow:0 12px 40px var(--toast-shadow);
	opacity:0; transform:translateX(16px);
	transition:opacity 0.2s var(--toast-ease-out), transform 0.2s var(--toast-ease-out), height 0.15s var(--toast-ease-in), margin 0.15s var(--toast-ease-in);
}
.toast.in { opacity:1; transform:none }
.toast.out { opacity:0; transform:translateX(8px); transition-duration:0.15s; transition-timing-function:var(--toast-ease-in) }
.toast.gone { height:0 !important; margin-bottom:0; border-width:0 }
.toast.bump { animation:toast-bump 0.25s var(--toast-ease-out) }

.toast-success { --toast-accent:var(--toast-success) }
.toast-error   { --toast-accent:var(--toast-error) }
.toast-info    { --toast-accent:var(--toast-info) }

.toast-body { display:flex; align-items:flex-start; gap:10px }
.toast-body p { flex:1; min-width:0; margin:0; overflow-wrap:anywhere }
.toast-dot { flex:none; width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--toast-accent) }
.toast-close { flex:none; display:flex; margin:2px -4px 0 0; color:var(--toast-text); opacity:0.5; transition:opacity 0.15s }
.toast-close:hover, .toast-close:focus-visible { opacity:1 }
.toast-close svg { display:block }

/* the time left: drains from full width to nothing over the toast's duration (set inline), paused with the timer */
.toast-bar {
	position:absolute; left:0; right:0; bottom:0; height:2px;
	background:var(--toast-accent);
	transform-origin:left center;
	animation:toast-drain linear forwards;
}
.toast.paused .toast-bar { animation-play-state:paused }

/* anchored in a form's slot: drops in from above (the stack's slides in from the right), no gap below, and a lighter
   shadow because it lies on the panel, not over the page */
.toast-anchor .toast { margin-bottom:0; transform:translateY(-8px); box-shadow:0 6px 24px var(--toast-shadow) }
.toast-anchor .toast.in { transform:none }
.toast-anchor .toast.out { transform:translateY(-4px) }

@keyframes toast-drain { from { transform:scaleX(1) } to { transform:scaleX(0) } }
@keyframes toast-bump { 0% { transform:scale(1) } 40% { transform:scale(1.02) } 100% { transform:scale(1) } }

@media (max-width:600px) {
	.toasts {
		top:calc(10px + env(safe-area-inset-top, 0px));
		left:calc(10px + env(safe-area-inset-left, 0px));
		right:calc(10px + env(safe-area-inset-right, 0px));
		width:auto; max-width:none;
	}
	body.zoomed .toasts { top:calc(64px + env(safe-area-inset-top, 0px)) }
}

/* no slide or bump; the bar still drains, because it is the time left, not decoration */
@media (prefers-reduced-motion: reduce) {
	.toast, .toast.out, .toast-anchor .toast, .toast-anchor .toast.out { transform:none }
	.toast.bump { animation:none }
}

/**** The Test dialog (/admin/account/{id}: a web call / a chat with the assistant) ****/
/* The Test dialog (dialogs/admin-agent-test.php; Vlad, 2026-10-15): the call sheet's treatment — layout, colour tokens
   and motion only, the sheet's rules (call-sheet.css) scoped under .agent-test because the sheet scopes its own under
   .call-sheet. The type is the product's classes in the markup (ts-m / ts-s / heavy / opacity50, <h4 class='heavy'>),
   the rows the sheet's (.cs-row), the buttons .mobile-cta. AgentTestCssTest fails on a font rule or a raw colour here. */
.agent-test {
  --cs-text:currentColor; --cs-border:var(--black-10); --cs-error:var(--error);
}
body.dark .agent-test { --cs-border:var(--white-10); --cs-error:var(--error-dark) }

.agent-test .none { display:none !important }
.agent-test .at-sheet { max-width:600px; margin:0 auto }

/* top part: the caller row, the notes, the bar strip and the summary (the sheet's .cs-header on tablet + desktop) */
.agent-test .at-header { position:relative; display:flex; flex-direction:column; gap:4px; padding:var(--spacer-s) 24px 24px 24px }
.agent-test .cs-caller { display:flex; flex-direction:row; align-items:center; gap:8px }
.agent-test .cs-caller-text { flex:1; min-width:0; padding-left:4px }
.agent-test .cs-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.agent-test .at-status::before { content:"\00a0\00b7\00a0" } /* the status sits beside the number the way the sheet's date does */
.agent-test .at-status:empty::before { content:none }
.agent-test .mobile-cta { flex:none }
.agent-test .at-mode { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-left:4px }
.agent-test .at-mode .toggle-wrap { text-align:right }
.agent-test [data-agent-test-mode][data-forced] { pointer-events:none }
.agent-test .at-mode-note { padding-top:8px }
.agent-test .at-vars { padding-top:var(--spacer-s) }

.agent-test .at-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.agent-test .at-tab-short { display:none }

/* the call button: the phone glyph while idle, the stop square while a call runs (.live), its surface the error token then */
.agent-test .at-icon-stop { display:none }
.agent-test [data-agent-test-call].live .at-icon-call { display:none }
.agent-test [data-agent-test-call].live .at-icon-stop { display:block }
.agent-test [data-agent-test-call].live { background-color:var(--cs-error) }
.agent-test [data-agent-test-call].busy { opacity:0.5; pointer-events:none }
.agent-test [data-agent-test-mute].active { box-shadow:inset 0 0 0 1px currentColor; opacity:0.5 }

/* the bar strip: the sheet's sound form — flat 20px bars at rest, scaleY driven per frame by the live level while a call runs */
.agent-test .cs-wave { display:flex; flex-direction:row; justify-content:space-between; align-items:center; height:100px; pointer-events:none }
.agent-test .cs-wave i { display:block; flex:none; width:3px; height:20px; background:var(--cs-text); opacity:0.1; transform:scaleY(1); transition:transform 0.25s ease-out, opacity 0.15s linear }
.agent-test .cs-wave.live i { opacity:0.6; transition:opacity 0.15s linear }

.agent-test h4[data-agent-test-summary]:empty { display:none }

/* the tabs are the product's .tabs / .tab (stretched, with the sheet's glyphs); the panes are the only thing below them */
.agent-test .cs-tabs { position:relative; z-index:2; padding:0 }
.agent-test .cs-body { padding:24px 0 0 0 }
.agent-test .cs-pane-padded { padding:0 24px }
.agent-test .cs-state { padding:0 24px }

/* transcript and chat rows: the sheet's */
.agent-test .cs-row { padding:0 24px 32px 24px; opacity:1; transition:opacity 0.2s ease-out }
.agent-test .cs-row:last-child { padding-bottom:0 }
.agent-test .cs-row.cs-partial { opacity:0.5 }
.agent-test .cs-row-in { display:flex; flex-direction:row; align-items:flex-start; gap:16px }
.agent-test .avatar { flex:none }
.agent-test .cs-avatar { border-color:var(--cs-border); background:transparent; color:var(--cs-text) }
.agent-test .cs-meta { flex:1; min-width:0 }
.agent-test .cs-row-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px }
.agent-test .cs-row-text { white-space:pre-wrap; overflow-wrap:anywhere }
.agent-test .at-chat .cs-row { padding-left:0; padding-right:0 } /* the pane carries the side padding */
.agent-test .at-chat:not(:empty) { margin-bottom:var(--spacer-m) }

/* the chat's compose row: the box grows, the send button stays its size */
.agent-test .at-compose { display:flex; flex-direction:row; align-items:flex-end; gap:12px }
.agent-test .at-compose textarea { flex:1; min-width:0; resize:vertical }

/* phones: the caller's line keeps the number and the status (the kind label goes, as the sheet's date does), the third tab
   reads "Text" — a long label beside two others wraps the tab row */
@media all and (max-width:600px) {
  .agent-test .at-kind { display:none }
  .agent-test .at-tab-long { display:none }
  .agent-test .at-tab-short { display:inline }
  .agent-test .at-header, .agent-test .cs-pane-padded, .agent-test .cs-state, .agent-test .cs-row { padding-left:0; padding-right:0 }
  .agent-test .at-header { padding-top:56px } /* clear of the panel's round close button, which sits in the top-right corner */
}

/**** Settings tiles (the /account grids: icon buttons, phone padding) ****/
/* Settings tiles (the /account grids; phase 2 widens `.tile-grid` to the admin tiles). Layout only: the buttons are
   the call sheet's .mobile-cta.icon-button.alt (styles.css), their glyphs follow currentColor, the type is the
   product's classes in the markup. */

/* the action column: the tile's icon buttons side by side, the sheet's 8px (.cs-actions), never shrunk — the text
   column gives way instead (a flex item's minimum is its content, so the old text button was pushed off the phone) */
.tile-grid .integration-header .tile-actions { gap:8px; flex:0 0 auto }
.tile-grid .integration-header > div:first-child { min-width:0 }

@media all and (max-width:600px){
  /* the tile padding on phones: the grid's spacer-l (50px) left two words a line */
  .tile-grid .cell .cc.p-l { padding:var(--spacer-s) !important }
}

/* a section footer's action (the Danger Zone's Retry / Delete account): the button where the text button sat — right on
   wide screens, left on phones (the ta-right / ta-left-mobile pair, which text-align cannot give a flex button) */
.tile-footer-actions { display:flex; justify-content:flex-end; gap:8px }
@media all and (max-width:600px){
  .tile-footer-actions { justify-content:flex-start }
}

/**** Page blocks (platform/includes/blocks/: the hero's mosaic grid) ****/
/* ---------------------------------------------------------------------------------------------------------------------
   Page blocks (platform/includes/blocks/): layout, colour tokens and motion only — type is the product's own classes in
   the markup (display display-light, ts-m, heavy …), and a test fails on a font rule or a raw colour in this file.

   Hero block — the mosaic media grid. A box 12 columns wide and --rows rows tall (a row is a sixteenth of the width,
   so the box is 16 : --rows); each tile carries its placement as custom properties (--c column, --s span, --r row,
   --h height, --z stacking) and the stylesheet turns them into position and size. The box climbs --rise rows into the
   intro's space (margin-top: a percentage of the WIDTH, like every margin), so the first tiles sit level with the
   headline. On phones the same tiles become the site's horizontal swipe row (the flexwrap pattern) and the parallax
   stays off (data-parallax-min-width, f.js).
   ------------------------------------------------------------------------------------------------------------------ */
:root {
	--mosaic-gap: var(--gap);
	--mosaic-shadow: 0 24px 64px -16px var(--black-10), 0 8px 24px -8px var(--black-10);
	--mosaic-shadow-key: 48px 64px 140px -24px var(--black-20), 0 16px 40px -16px var(--black-10);
}
body.dark {
	--mosaic-shadow: 0 24px 64px -16px var(--scrim-dark), 0 8px 24px -8px var(--scrim-dark);
	--mosaic-shadow-key: 48px 64px 140px -24px var(--scrim-dark), 0 16px 40px -16px var(--scrim-dark);
}

/* Hero highlights (use_case_hero_highlights, Vlad 2026-11-06): the key-feature strip's markup (hero-feature-grid: tablets keep its
   2 × 2 hairlined grid, phones its swipe row — nothing to add here), and on DESKTOP up to four frosted cards on a 6 × 3 grid of
   square cells across the article's width (the box is 2 : 1), IN THE FLOW — the section grows with the grid, so no tile is ever
   clipped — while the hero's photo becomes the section's background: absolute, at its natural width, anchored to the section's
   bottom, so the desk sits on the bottom edge and the photo's top lands under the CTAs (Vlad, 2026-11-06; an absolute grid over an
   in-flow photo lost its bottom row to the section's overflow as the width shrank). Each card carries its place as custom
   properties — --c column, --r row, --s columns spanned, --h rows spanned (the mosaic's four) — and the stylesheet turns them into
   grid lines; a card taller than its cell grows the row. Frosted on the surface tokens with the mosaic's soft shadow. The type is
   the markup's. */
#section-hero > article { position:relative }
@media (min-width:1025px) {
	.hero-feature-grid.hero-highlights { position:relative; z-index:13; margin-top:-50px; border-top:0; border-bottom:0 }
	.hero-highlights .flexgrid { display:grid; grid-template-columns:repeat(6, 1fr); grid-template-rows:repeat(3, 1fr); gap:var(--mosaic-gap); aspect-ratio:2 / 1 }
	.hero-highlights .flexgrid .cell { grid-column:var(--c, auto) / span var(--s, 1); grid-row:var(--r, auto) / span var(--h, 1); width:auto; border-left:0; border-radius:16px; background:var(--pure-white-60); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--mosaic-shadow) }
	body.dark .hero-highlights .flexgrid .cell { background:var(--deep-dark-60) }
	.hero-highlights .flexgrid .cell > .cc { width:100% }
	/* the photo behind the article (styles.css gives it the flow and the -400px rise below this width); its light / dark twins keep
	   their hide-on-* display, so no display rule here */
	#section-hero .hero-asset { position:absolute; left:50%; bottom:0; width:100%; margin:0; transform:translateX(-50%); z-index:1 }
	#section-hero .hero-asset img { vertical-align:bottom }
}
/* narrow desktops: the natural-width photo would end under the grid's top while the text-wrapped cells grow tall, so it stays
   wider than the viewport (centred, the sides clipped by the section) and tall enough to sit behind every row */
@media (min-width:1025px) and (max-width:1300px) { #section-hero .hero-asset { width:1700px } }
/* tablets + phones: tighter tiles than the strip's (the cells are narrower here) — the padding utility carries !important */
@media (max-width:1024px) { .hero-highlights .flexgrid .cell > .cc.p-m { padding:var(--spacer-s) !important } }

.hero-mosaic { position:relative; z-index:13; width:100%; aspect-ratio:16 / var(--rows, 12); margin-top:calc(var(--rise, 0) * -6.25%); margin-bottom:calc(var(--sink, 0) * -6.25%) !important }
/* the key feature's copy is col6; a sink tile (column 7 or later) runs down beside it, so the copy must stay under the tiles' box */
.hero-feature { position:relative; z-index:12 }
.mosaic-tile {
	position:absolute; overflow:hidden; z-index:var(--z, 1);
	left:calc((var(--c) - 1) * 100% / 12);
	width:calc(var(--s) * 100% / 12 - var(--mosaic-gap));
	top:calc((var(--r) - 1) * 100% / var(--rows, 12));
	height:calc(var(--h) * 100% / var(--rows, 12) - var(--mosaic-gap));
	background:var(--bg-alt-highlight);
	box-shadow:var(--mosaic-shadow);
	will-change:transform;
}
body.dark .mosaic-tile { background:var(--bg-alt-highlight-dark) }
.mosaic-tile.key { box-shadow:var(--mosaic-shadow-key) }
.mosaic-tile img, .mosaic-tile video { display:block; width:100%; height:100%; object-fit:cover }
.mosaic-tile.empty::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, var(--black-10), transparent) }

/* Bento grid (Vlad, 2026-10-25): a flexgrid whose cells are filled edge to edge by media. One row height per breakpoint
   (--bento-row, a :root token — override it inline on a grid: style='--bento-row:360px'), the spaced gutter (.flexgrid.spaced:
   10px of .cc padding each side) is the gap, the media covers the cell (object-fit) inside the product's radius; a placeholder
   <div> in a cell shows the highlight tint the same way. Markup: <div class='flexgrid spaced bento'><div class='cell col5'><div class='cc'>
   <img …></div></div> …; a cell may wrap its media in one <a>. */
:root { --bento-row:450px }
.flexgrid.bento .cell .cc { height:var(--bento-row) }
.flexgrid.bento .cell .cc > a { display:block; height:100% }
/* the tint sits on the media (and on a placeholder div) inside the radius — never on .cc, whose padded content box has square
   corners and used to peek out behind the rounded media (2026-10-25) */
.flexgrid.bento .cell .cc > img, .flexgrid.bento .cell .cc > video, .flexgrid.bento .cell .cc > a > img, .flexgrid.bento .cell .cc > a > video, .flexgrid.bento .cell .cc > div { display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--border-radius); overflow:hidden; background:var(--bg-alt-highlight) }
body.dark .flexgrid.bento .cell .cc > img, body.dark .flexgrid.bento .cell .cc > video, body.dark .flexgrid.bento .cell .cc > a > img, body.dark .flexgrid.bento .cell .cc > a > video, body.dark .flexgrid.bento .cell .cc > div { background:var(--bg-alt-highlight-dark) }
/* a cell's light / dark image twins (use_case_media): the fill rule above outranks the site's .hide-on-* toggles, so they are restated at its weight */
.flexgrid.bento .cell .cc > .hide-on-light, body.dark .flexgrid.bento .cell .cc > .hide-on-dark { display:none }
body.dark .flexgrid.bento .cell .cc > .hide-on-light { display:block }

/* the static grid: the home page's project-list tiles, media only — the tiles keep the product's radius */
.hero-static-tile img, .hero-static-tile video { display:block; width:100%; border-radius:var(--border-radius) }

/* phones + tablets: the key-feature strip's treatment instead of the frosted cards (Vlad, 2026-11-06) — flat tiles with hairlines
   between (the strip's bordertop / borderbottom on the row, borderleft between tiles; p-m padding). Tablets: a 2 × 2 grid with the
   strip's tablet row rule; phones: the strip's swipe row (45vw tiles, bled by the 30px gutter). Back in the flow here — the photo
   rises only 200px on these widths, and a row laid over it would cover the subject. */
@media (max-width:1024px) {
	.hero-highlights { position:relative; aspect-ratio:auto; margin:var(--spacer-l) 0 0; gap:0; border-top:1px solid var(--black-10); border-bottom:1px solid var(--black-10) }
	body.dark .hero-highlights { border-color:var(--white-10) }
	.hero-highlight-item { grid-column:auto; grid-row:auto; padding:var(--spacer-m); border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-left:1px solid var(--black-10) }
	body.dark .hero-highlight-item { background:none; border-left-color:var(--white-10) }
	.hero-highlight-item:first-child { border-left:0 }
}
@media (min-width:601px) and (max-width:1024px) {
	.hero-highlights { grid-template-columns:1fr 1fr; grid-template-rows:auto }
	.hero-highlight-item:nth-child(n+3) { border-top:1px solid var(--black-10) }
	.hero-highlight-item:nth-child(odd) { border-left:0 }
	body.dark .hero-highlight-item:nth-child(n+3) { border-top-color:var(--white-10) }
}
@media (max-width:600px) {
	.hero-highlights { display:flex; margin:var(--spacer-l) -30px 0; padding:0 30px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-left:30px; scrollbar-width:none }
	.hero-highlights::-webkit-scrollbar { display:none }
	.hero-highlight-item { flex:0 0 45vw; scroll-snap-align:start }
}

@media (min-width:601px) and (max-width:1024px) {
	/* the intro and the key-feature copy are 75% wide on tablets: nothing rises beside them or sinks under them */
	.hero-mosaic { margin-top:0; margin-bottom:var(--spacer-xl) !important }
	:root { --bento-row:300px }
	/* the key-feature strip (hero-feature-grid: bordertop + borderbottom, .borderleft between cells) goes 2 × 2 here: the second
	   row gets a top hairline of its own and each row's first cell drops the left one (Vlad, 2026-10-25) */
	.hero-feature-grid .flexgrid .cell:nth-child(n+3) { border-top:1px solid var(--black-10) }
	.hero-feature-grid .flexgrid .cell:nth-child(odd) { border-left:0 }
	body.dark .hero-feature-grid .flexgrid .cell:nth-child(n+3) { border-top-color:var(--white-10) }
}

@media (max-width:600px) {
	:root { --bento-row:240px; --bento-row-flexgrid:500px; --feature-slide-image-height:400px }
	.flexgrid.bento .cell .cc { padding:5px }

	.flexwrap .flexgrid.bento .cell .cc { height:var(--bento-row-flexgrid) }
	.flexwrap .flexgrid.bento .cell:last-child .cc { padding-right:var(--spacer-l) }

	.flexwrap .flexgrid.bento .cell .cc > img, .flexwrap .flexgrid.bento .cell .cc > video, .flexwrap .flexgrid.bento .cell .cc > a > img, .flexwrap .flexgrid.bento .cell .cc > a > video, .flexwrap .flexgrid.bento .cell .cc > div { border-radius:0px }

	.flexwrap .flexgrid.bento .cell:first-child .cc > img, .flexwrap .flexgrid.bento .cell:first-child .cc > video, .flexwrap .flexgrid.bento .cell:first-child .cc > a > img, .flexwrap .flexgrid.bento .cell:first-child .cc > a > video, .flexwrap .flexgrid.bento .cell:first-child .cc > div { border-radius:8px 0 0 8px }
	.flexwrap .flexgrid.bento .cell:last-child .cc > img, .flexwrap .flexgrid.bento .cell:last-child .cc > video, .flexwrap .flexgrid.bento .cell:last-child .cc > a > img, .flexwrap .flexgrid.bento .cell:last-child .cc > a > video, .flexwrap .flexgrid.bento .cell:first-child .cc > div { border-radius:0 8px 8px 0 }

	/* the mosaic becomes a swipe row: the tiles keep their proportions (span / height on the 12 × 16 box = 4s : 3h) */
	.hero-mosaic { aspect-ratio:auto; margin:0 -30px var(--spacer-l) !important; padding:0 30px 40px; display:flex; align-items:flex-start; gap:var(--spacer-s); overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none }
	.hero-mosaic::-webkit-scrollbar { display:none }
	.mosaic-tile { position:static; flex:0 0 75vw; width:auto; height:auto; aspect-ratio:calc(var(--s) * 4) / calc(var(--h) * 3); scroll-snap-align:start; box-shadow:var(--mosaic-shadow); transform:none !important }
}

/* Feature slider (blocks/feature-slider.php; Vlad, 2026-11-02): the list on the left, the slides on the right. The active item's
   left border is the progress bar — its ::before fills top to bottom over --fs-duration (set inline by the block) and the JS
   (feature_slider.js) advances on animationend, so the animation IS the timer; .paused on the root (hover, a finger down, out of
   view, a hidden tab) holds it where it is. The slides stack in a bento-sized box (--bento-row, the fill rule's values) and swap
   with a fade and a slight scale (0.98 in and out; Vlad, 2026-11-02 — the vertical slide went). Layout, tokens and motion only: the
   type is the markup's (ts-m heavy / ts-s). */
.feature-slider .feature-item { position:relative; display:flex; width:100%; appearance:none; -webkit-appearance:none; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; border:0; border-left:2px solid var(--black-10); border-radius:0 }
body.dark .feature-slider .feature-item { border-left-color:var(--white-10) }
.feature-slider .feature-item.active { border-left-color:var(--black-10) } /* the fill paints the colour, never the border (styles.css's static .feature-item.active turns the border itself) */
body.dark .feature-slider .feature-item.active { border-left-color:var(--white-10) }
.feature-slider .feature-item:focus-visible { outline:2px solid currentColor; outline-offset:-2px }
.feature-slider .feature-item::before { content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px; background:currentColor; transform:scaleY(0); transform-origin:top; pointer-events:none }
.feature-slider .feature-item.active::before { animation:feature-progress var(--fs-duration, 6000ms) linear forwards }
.feature-slider.paused .feature-item.active::before { animation-play-state:paused }
/* a manual choice (a click on an item) stops the timer for good: the chosen item's bar sits at 100% and nothing advances */
.feature-slider.manual .feature-item.active::before { animation:none; transform:scaleY(1) }
@keyframes feature-progress { to { transform:scaleY(1) } }
@keyframes feature-progress-x { to { transform:scaleX(1) } }

/* the slides box fills the row's full height — the list's, or --fs-height when the list is shorter (the bento row by default; the
   phone block below sets its own value) — by stretching inside its cell like any flex child */
.feature-slider { --fs-height:var(--fs-height-wide, var(--bento-row)) } /* --fs-height-wide: the block's "height" option, inline on the root */
.feature-slider .cell:last-child .cc { display:flex; align-items:stretch }
.feature-slides { position:relative; flex:1 1 auto; min-height:var(--fs-height); border-radius:var(--border-radius); overflow:hidden; /*background:var(--bg-alt-highlight)*/ }
body.dark .feature-slides { background:var(--bg-alt-highlight-dark) }
.feature-slide { position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(0.98); transition:opacity 0.15s ease-out, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); pointer-events:none }
.feature-slide.active { opacity:1; transform:none }
.feature-slide.leaving { opacity:0; transform:scale(0.98) }

@media (prefers-reduced-motion: reduce) {
	.feature-slide, .feature-slide.leaving { transform:none; transition:opacity 0.2s linear } /* the bar still fills: it is the time left, not decoration */
}

@media (max-width:600px) {
	/* phones: the slides first, then the items as the site's horizontal swipe row (the hero mosaic's recipe); the active card's
	   TOP edge is the bar, filling left to right; the JS scrolls the active card into view on every advance */
	.feature-slider { --fs-height:var(--feature-slide-image-height) } /* THE PHONE HEIGHT OF THE IMAGE BOX: change this value (the bento row, 240px, by default) */
	.feature-slider .cell:last-child { order:-1 }
	.feature-slider .cell:first-child .cc { padding-right:0 !important }
	.feature-slider .feature-items { display:flex; width:auto; gap:var(--spacer-s); margin:var(--spacer-m) -30px 0; padding:0 30px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-left:30px; scrollbar-width:none } /* width:auto over .fullwidth, so the negative margins widen the rail to the viewport instead of shifting a column-wide box left (the right 60px were cut off); the snapport starts after the padding, so a card snaps to the section's edge, never under the bleed */
	.feature-slider .feature-items::-webkit-scrollbar { display:none }
	.feature-slider .feature-item { flex:0 0 78vw; scroll-snap-align:start; align-items:flex-start; border-left:0; border-top:2px solid var(--black-10); padding:var(--spacer-s) 0 0 } /* the rail stretches every card to the tallest: the text starts at the top of each card, never centred in the spare height (Vlad, 2026-11-09) */
	body.dark .feature-slider .feature-item, body.dark .feature-slider .feature-item.active { border-top-color:var(--white-10) }
	.feature-slider .feature-item::before { top:-2px; bottom:auto; left:0; right:0; width:auto; height:2px; transform:scaleX(0); transform-origin:left }
	.feature-slider .feature-item.active::before { animation-name:feature-progress-x }
	.feature-slider.manual .feature-item.active::before { animation:none; transform:scaleX(1) }
}

/* Call recording widget (a `call` item of the feature slider; Vlad, 2026-11-02 / 2026-11-03): the app's call sheet at each width,
   standalone. The sheet's rules are copied under .feature-call — its own .call-sheet scope is display:none outside the inbox —
   the way agent-test.css did; the tokens are the sheet's; the type is the markup's (ts-m heavy / ts-s / h4.heavy). Three parts
   like call-sheet.css: shared, phones (the CARD in the slide and the DRAWER in the body-level host call_widget.js makes: the scrim,
   the ✕, the swipe through --cs-drag), tablet + desktop (the details COLUMN in the slide box: no glow, no handle, no fade). Driven
   by call_widget.js: .playing swaps the glyphs and dims the glow, .cs-dim the rows not being spoken, .played the bars behind the
   playhead, .open the drawer. */
.feature-call, .feature-call-host { --cs-bg:var(--pure-white); --cs-text:var(--text-color-light); --cs-border:var(--black-10); --cs-hover:var(--black-10); --cs-scrim:var(--scrim); --cs-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1); --cs-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19) }
body.dark .feature-call, body.dark .feature-call-host { --cs-bg:var(--deep-dark); --cs-text:var(--text-color-dark); --cs-border:var(--white-10); --cs-hover:var(--white-10); --cs-scrim:var(--scrim-dark) }
/* the slide root paints the box: the tint under the hero's glow (Vlad, 2026-11-03) */
.feature-slide.feature-call { top:0; left:0; right:0; bottom:0; width:auto; height:auto; display:flex; flex-direction:column; color:var(--cs-text); overflow:hidden; background-color:var(--bg-alt-highlight); background-image:url("/_s/img/bg/hero/glow.png"); background-position:top center; background-repeat:no-repeat; background-size:100% auto }
body.dark .feature-slide.feature-call { background-color:var(--bg-alt-highlight-dark) }
.feature-slide.feature-call.active { pointer-events:auto }
.feature-call .none { display:none !important }
.cw-sheet.feature-call { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; color:var(--cs-text); overflow:hidden }
/* the side glow: the sheet's four blobs off the left edge (cs-drift is call-sheet.css's keyframes, in the same bundle) */
.feature-call .cs-glow { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; transition:opacity 0.25s ease-out }
.feature-call .cs-glow i { position:absolute; display:block; border-radius:50%; transform:translate(-50%,-50%); animation:cs-drift 16s ease-in-out infinite alternate }
.feature-call .cs-glow i:nth-child(1) { left:-70px; top:30%; width:270px; height:270px; opacity:0.7;  background:radial-gradient(circle closest-side, var(--glow-side-1) 0%, transparent 100%); animation-duration:17s }
.feature-call .cs-glow i:nth-child(2) { left:-20px; top:42%; width:190px; height:190px; opacity:0.64; background:radial-gradient(circle closest-side, var(--glow-side-2) 0%, transparent 100%); animation-duration:15s; animation-delay:-1.5s }
.feature-call .cs-glow i:nth-child(3) { left:-10px; top:55%; width:170px; height:170px; opacity:0.58; background:radial-gradient(circle closest-side, var(--glow-side-3) 0%, transparent 100%); animation-duration:19s; animation-delay:-0.8s }
.feature-call .cs-glow i:nth-child(4) { left:-64px; top:67%; width:262px; height:262px; opacity:0.7;  background:radial-gradient(circle closest-side, var(--glow-side-4) 0%, transparent 100%); animation-duration:16s; animation-delay:-2.5s }
.feature-call.playing .cs-glow { opacity:0.5 }
/* the top part: the handle (phones), the caller row, the strip, the summary */
.feature-call .cw-header { position:relative; z-index:2; flex:none; display:flex; flex-direction:column; gap:4px; padding:0 24px var(--spacer-m); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; cursor:pointer }
.feature-call .sheet-handle { margin:12px auto 8px }
/* the scrub: the caller row fades out and the readout (now / total) takes its place while the finger drags sideways (.scrubbing) */
.feature-call .cs-swap { position:relative }
.feature-call .cs-caller { display:flex; flex-direction:row; align-items:center; gap:8px; transition:opacity 0.16s var(--cs-ease-in) }
.feature-call .cs-readout { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; margin:0; opacity:0; pointer-events:none; transition:opacity 0.16s var(--cs-ease-in) }
.feature-call.scrubbing .cs-caller { opacity:0; transition-timing-function:var(--cs-ease-out) }
.feature-call.scrubbing .cs-readout { opacity:1; transition-timing-function:var(--cs-ease-out) }
/* the hairline under the top part: call_widget.js fades it in as the transcript scrolls, at every width (Vlad, 2026-11-03) */
.feature-call .cs-divider { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cs-border); opacity:0 }
.feature-call .cs-caller-text { flex:1; min-width:0; padding-left:4px }
.feature-call .cs-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.feature-call .mobile-cta { flex:none }
.feature-call .cw-avatar { pointer-events:none }
.feature-call .cs-icon-pause { display:none }
.feature-call.playing .cs-icon-play { display:none }
.feature-call.playing .cs-icon-pause { display:block }
.feature-call [data-cw-play][aria-disabled='true'] { opacity:0.35; pointer-events:none }
.feature-call .cs-wave { display:flex; flex-direction:row; justify-content:space-between; align-items:center; height:100px; pointer-events:none }
.feature-call .cs-wave i { display:block; flex:none; width:3px; height:20px; background:var(--cs-text); opacity:0.1; transform:scaleY(1); transition:transform 0.25s ease-out, opacity 0.15s linear }
.feature-call .cs-wave i.played { opacity:1 }
.feature-call .cs-wave.live i { transition:opacity 0.15s linear }
/* the bottom part: the one scroller, the rows, the fade */
.feature-call .cw-body { position:relative; z-index:1; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:12px 0 72px 0 }
.feature-call .cs-pane-padded { padding:0 24px }
.feature-call .cs-row { padding:0 24px 32px 24px; opacity:1; transition:opacity 0.2s ease-out }
.feature-call .cs-row:last-child { padding-bottom:0 }
.feature-call .cs-row.cs-dim { opacity:0.25 }
.feature-call .cs-row.cs-seekable { cursor:pointer }
.feature-call .cs-row.cs-seekable:active .cs-row-in { opacity:0.6 }
.feature-call .cs-row-in { display:flex; flex-direction:row; align-items:flex-start; gap:16px }
.feature-call .avatar { flex:none }
.feature-call .cs-avatar { border-color:var(--cs-border); background:transparent; color:var(--cs-text) }
.feature-call .cs-meta { flex:1; min-width:0 }
.feature-call .cs-row-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px }
.feature-call .cs-row-text { overflow-wrap:anywhere }
.feature-call .cs-fade { position:absolute; z-index:3; left:0; right:0; bottom:0; height:72px; pointer-events:none; background:linear-gradient(to bottom, transparent 0%, var(--cs-bg) 100%) }
/* the ⋮ menu: the sheet's */
.feature-call .cw-menu { position:absolute; z-index:5; top:64px; right:24px; min-width:220px; padding:8px 0; border-radius:16px; border:1px solid var(--cs-border); background:var(--cs-bg); box-shadow:0 12px 40px var(--black-20) }
.feature-call .cs-menu-header { padding:4px 16px 8px; margin:0 }
.feature-call .cs-menu-item { display:block; position:relative; padding:12px 16px; color:var(--cs-text); text-decoration:none }
.feature-call .cs-menu-item:hover:after { content:""; display:block; position:absolute; top:4px; left:4px; right:4px; bottom:4px; border-radius:4px; background:var(--cs-hover); opacity:0.4 }
.feature-call .cs-menu-item:active { opacity:0.6 }
.feature-call .cs-menu-rule { height:1px; margin:8px 0; background:var(--cs-border) }
@media (prefers-reduced-motion: reduce) { .feature-call .cs-glow i { animation:none } }
@keyframes cw-rest { from { transform:scaleY(calc(var(--h, 0.5) * 0.85)) } to { transform:scaleY(calc(var(--h, 0.5) * 1.1)) } }

/* ---------- phones: the card in the slide, the drawer in the host ---------- */
@media (max-width:600px) {
	/* the card (Vlad's mockup, 2026-11-03): a rounded card centred in the box — the caller and the filled Play button, a resting
	   sound form, the summary; the whole card is the tap. The slide root is a flex column, so it centres the wrapper */
	.feature-slide.feature-call { justify-content:center; background-color:var(--bg-alt-highlight); }
	.dark .feature-slide.feature-call { background-color:var(--bg-alt-highlight-dark); }

	.feature-call .cw-card-wrap { flex:none; padding:0 32px } /* the hide classes sit here: .hideondesktop's display:block is harmless on a wrapper */
	.feature-call .cw-card { position:relative; display:flex; flex-direction:column; gap:28px; padding:28px; border-radius:24px; background:var(--pure-white-60); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:var(--cs-text); overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent } /* frosted over the glow, like the column; the drawer stays solid */
	body.dark .feature-call .cw-card { background:var(--deep-dark-60) }
	.feature-call .cw-card:active { opacity:0.85 }
	.feature-call .cw-card:focus-visible { outline:none }
	.feature-call .cw-card .cs-caller { align-items:flex-start }
	.feature-call .cw-card .cs-caller-text { padding-left:0 }
	.feature-call .cw-card > p.heavy { margin:0 } /* the summary (a paragraph since Vlad's tweak) */
	body.dark .feature-call .cw-card .mobile-cta { background-color:var(--white-10); color:var(--text-color-dark) } /* the mockup's dark button: a lighter disc on the dark card, the glyph light */
	body.dark .feature-call .cw-card .mobile-cta-icon-fill { fill:var(--text-color-dark) }
	/* the resting sound form: every bar at its seeded height (--h), the first stretch dark, the whole row breathing slightly
	   (cw-rest: each bar between 0.85 and 1.1 of its height, out of step through --d) — the app's idle ripple, in CSS */
	.feature-call .cw-card .cs-wave { height:80px; gap:0 }
	.feature-call .cw-card .cs-wave i { height:80px; opacity:0.3; transform:scaleY(var(--h, 0.5)); transform-origin:center; transition:none; animation:cw-rest 2.6s ease-in-out infinite alternate; animation-delay:var(--d, 0s) }
	.feature-call .cw-card .cs-wave i.played { opacity:1 }
	/* the sheet lives in the host on phones (call_widget.js moves it there); one left in a slide stays out of sight */
	.feature-slide.feature-call > .cw-sheet { display:none }
	/* the drawer: call-sheet.css's phone rules under the host — scrim, sheet, close button; closed = hidden + slightly down and small,
	   .open reverses it; the closed transform keeps --cs-drag so a flung sheet fades out where it was flung */
	.feature-call-host .fc-scrim { display:block; position:fixed; z-index:1100; top:0; left:0; right:0; bottom:0; background:var(--cs-scrim); opacity:0; visibility:hidden; pointer-events:none; touch-action:none; transition:opacity 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
	.feature-call-host .fc-scrim.open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 0.2s var(--cs-ease-out), visibility 0s }
	.feature-call-host .fc-scrim.dragging { transition:none }
	.feature-call-host .cw-sheet { display:flex; position:fixed; z-index:1101; top:calc(10px + env(safe-area-inset-top, 0px)); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); left:10px; right:10px; border-radius:32px; background:var(--cs-bg); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(calc(24px + var(--cs-drag, 0px))) scale(0.96); transition:opacity 0.15s var(--cs-ease-in), transform 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
	.feature-call-host .cw-sheet.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(var(--cs-drag, 0px)) scale(1); transition:opacity 0.2s var(--cs-ease-out), transform 0.2s var(--cs-ease-out), visibility 0s }
	.feature-call-host .cw-sheet.open.dragging { transition:none }
	.feature-call-host .cw-sheet.open.settling { transition:transform 0.25s var(--cs-ease-out) }
	.feature-call-host .cw-sheet.open.flinging { transition:transform 0.18s var(--cs-ease-in) }
	/* the page's scroll-spy pill slides out while the drawer is up (its own .hidden rule's offset) */
	body.feature-call-open .scrollspy-anchor-wrap { bottom:-100px }
	.feature-call-host .fc-close { display:flex; position:fixed; z-index:1102; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%; margin-left:-24px; opacity:0; visibility:hidden; pointer-events:none; transform:scale(0.8); transition:opacity 0.15s var(--cs-ease-in), transform 0.15s var(--cs-ease-in), visibility 0s linear 0.15s }
	.feature-call-host .fc-close.open { opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); transition:opacity 0.2s var(--cs-ease-out), transform 0.2s var(--cs-ease-out), visibility 0s }
	body.feature-call-open { overflow:hidden }
	@media (prefers-reduced-motion: reduce) {
		.feature-call-host .cw-sheet, .feature-call-host .cw-sheet.open { transform:translateY(var(--cs-drag, 0px)) }
		.feature-call .cw-card .cs-wave i { animation:none }
	}
}

/* ---------- tablet + desktop: the details column in the slide box ---------- */
@media (min-width:601px) {
	.feature-call .cw-card-wrap, .feature-call .cs-glow, .feature-call .cs-fade, .feature-call-host { display:none !important }
	/* the column is a card on the box (Vlad, 2026-11-03): the sheet's surface token, a 16px radius, 24px off the box's edges —
	   here only: the phone drawer is the same element in the host, fixed to its own insets */
	.feature-slide.feature-call > .cw-sheet { background:var(--pure-white-60); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:16px; margin:24px } /* frosted over the glow (Vlad): the drawer in the host stays solid */
	body.dark .feature-slide.feature-call > .cw-sheet { background:var(--deep-dark-60) }
	.feature-call .cw-header { padding-top:var(--spacer-m); padding-bottom:32px }
	.feature-call .cw-body { padding-top:24px }
}

/* Illustrated panels (Vlad, 2026-11-09; includes/blocks/illustration.php, docs/architecture/illustrations.md): an .alt-highlight
   panel whose art is one of the Figma illustrations. The art is a square on a flat canvas (--illustration-bg, Figma's
   Background/Level 1; the tokens are in styles.css's :root), so the panel takes that colour and carries NO .product-curtain; the art's glow runs to its edges, so
   the edge that meets the panel's text is faded out with a mask: the side beside the text from 1025px up (the left edge; the
   right one with .art-left, a panel whose art sits on the left), the top edge when the panel stacks (1024px and down). */
.alt-highlight.illustrated { background-color:var(--illustration-bg) }
.dark .alt-highlight.illustrated { background-color:var(--illustration-bg-dark) }
.panel-art img { width:100%; height:auto; -webkit-mask-image:linear-gradient(90deg, transparent 0, black 14%); mask-image:linear-gradient(90deg, transparent 0, black 14%) }
.panel-art.art-left img { -webkit-mask-image:linear-gradient(270deg, transparent 0, black 14%); mask-image:linear-gradient(270deg, transparent 0, black 14%) }
@media all and (max-width:1024px){
	.panel-art img, .panel-art.art-left img { -webkit-mask-image:linear-gradient(180deg, transparent 0, black 12%); mask-image:linear-gradient(180deg, transparent 0, black 12%) }
}

/* The /product tiles (product_feature_tiles, T1–T4): the art is a 2000px square with its composition in the middle 70%, shown in
   a tile about 250px wide, so the image is enlarged inside the tile's own clip (the link is overflow:hidden) to bring the UI
   closer. 1.3 keeps every composition whole: the widest (T4) is 69% of the square, the window shows 77%. */
.product-tiles .project-tile img { transform:scale(1.3) }