/* ============================================================
   Plentibytes marketing site: Evergreen design system
   Matches the app (apps/app/src/evergreen.css): Ink, Pine, Leaf, Fern,
   Paper with a 24px grid. Type: Schibsted Grotesk (titles), Source Sans 3
   (everything else), Space Grotesk ONLY for the Plentibytes logo, IBM Plex
   Mono for small labels. All copy lives in the HTML; js/main.js only adds
   motion and the audience switch.
   ============================================================ */

:root {
  --ink: #0F1511;
  --graphite: #2A302C;
  --muted: #5F6A63;
  --pine: #0C3A1E;
  --pine-2: #114A27;
  --leaf: #3FA35C;
  --go: #1E8A3C;
  --fern: #E7F0E6;
  --line: #DEE4DB;
  --paper: #F3F5F1;
  --white: #FFFFFF;
  --signal: #C8372D;
  --amber: #B6791F;
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font-display: "Schibsted Grotesk", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-logo: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgba(15, 21, 17, .06), 0 2px 8px rgba(15, 21, 17, .05);
  --shadow: 0 2px 4px rgba(15, 21, 17, .05), 0 12px 32px rgba(15, 21, 17, .09);
  --shadow-lg: 0 4px 10px rgba(15, 21, 17, .08), 0 30px 70px rgba(15, 21, 17, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--graphite); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--pine); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
[id] { scroll-margin-top: 84px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 16px; } body { font-size: 16px; } }

.eyebrow { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: -.005em; color: var(--go); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 640px; }
.section { padding: 104px 0; }
.section-tight { padding: 64px 0; }
.section.alt { background: #F3F1EA; }
.section-head { display: grid; gap: 14px; margin-bottom: 52px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head.center .lede { margin: 0 auto; }
@media (max-width: 640px) { .section { padding: 72px 0; } .section-head { margin-bottom: 36px; } }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; padding: 15px 22px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--pine); box-shadow: 0 8px 22px rgba(12, 58, 30, .28); }
.btn-go { background: var(--leaf); color: #07140B; }
.btn-go:hover { background: #4DB86A; box-shadow: 0 8px 24px rgba(63, 163, 92, .35); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--pine); }
.btn-ondark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ondark:hover { border-color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--fern); }
.btn-sm { padding: 10px 15px; font-size: .92rem; border-radius: 10px; }
.btn svg { flex: 0 0 auto; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(15, 21, 17, .05); }
.site-header.on-dark:not(.scrolled) { background: rgba(15, 21, 17, .55); }
.site-header:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.on-dark:not(.scrolled) .nav-links a:not(.btn) { color: #E7EDE8; }
.site-header.on-dark:not(.scrolled) .logo { color: #fff; }
.site-header.on-dark:not(.scrolled) .nav-toggle span, .site-header.on-dark:not(.scrolled) .nav-toggle span::before, .site-header.on-dark:not(.scrolled) .nav-toggle span::after { background: #fff; }
.site-header.on-dark:not(.scrolled) .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.nav { display: flex; align-items: center; gap: 18px; height: 68px; }
.logo { font-family: var(--font-logo); font-weight: 700; font-size: 1.42rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.logo em { font-style: normal; color: var(--leaf); }
.logo { display: inline-flex; align-items: center; }
.logo-mark { width: 28px; height: 28px; flex: 0 0 auto; margin-right: 8px; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Header links: turn green, and an underline grows out from the middle. */
.nav-links a:not(.btn) { position: relative; font-weight: 600; font-size: .98rem; color: var(--graphite); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: color .25s var(--ease); }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--go); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .35s var(--ease); }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn):focus-visible { color: var(--go); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after, .nav-links a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--go); }
.nav-links .btn { margin-left: 6px; }
.nav-cta-mini { display: none; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; margin: 0 auto; transition: transform .38s var(--ease), background-color .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
/* the three lines morph into an X: the middle one fades, the outer two meet and turn */
.nav-toggle[aria-expanded="true"] span { background-color: transparent !important; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu: a full-screen sheet under the header. Page links are large
   and spaced, Sign in and Book a demo sit at the bottom, and the only control
   in the header is the close button (the mini Book a demo hides). The sheet
   scrolls on its own and never lets the page behind it move. */
@media (max-width: 920px) {
  .nav-toggle { display: grid; place-items: center; margin-left: 0; }
  .nav-cta-mini { display: inline-flex; margin-left: auto; }
  /* while open the header holds only the logo and the X */
  body.menu-open .nav-cta-mini { display: none; }
  body.menu-open .nav-toggle { margin-left: auto; }
  .nav-links { display: flex; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); background: #fff; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s; }
  .nav-links.open { visibility: visible; opacity: 1; transform: none; }
  .nav-links li { display: block; }
  .nav-links a:not(.btn) { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; padding: 16px 2px; border-radius: 0; color: var(--ink) !important; }
  /* the selected page is underlined right under its own words */
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a[aria-current="page"]:not(.btn) { color: var(--go) !important; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
  .nav-links li:nth-last-child(2) { margin-top: auto; padding-top: 28px; }
  .nav-links .btn { margin: 12px 0 0; width: 100%; padding: 17px; font-size: 1.02rem; }
  .nav-links.open li { animation: menu-in .6s var(--ease) both; }
  .nav-links.open li:nth-child(1) { animation-delay: .08s; } .nav-links.open li:nth-child(2) { animation-delay: .14s; } .nav-links.open li:nth-child(3) { animation-delay: .2s; } .nav-links.open li:nth-child(4) { animation-delay: .26s; } .nav-links.open li:nth-child(n+5) { animation-delay: .32s; }
  .site-header.on-dark:not(.scrolled) .nav-links .btn-ghost { color: var(--ink); border-color: var(--line); }
  /* While open, the page is pinned and the HEADER itself becomes the sheet:
     fixed to the whole screen (not sticky, no blur), so nothing about the
     page's scroll position can move or hide it. Swipes stay inside it. */
  html.menu-open { overflow: hidden; height: 100%; }
  body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  body.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-bottom-color: transparent; overscroll-behavior: contain; touch-action: pan-y; pointer-events: none; }
  body.menu-open .site-header .container { pointer-events: auto; }
  /* the top bar stays white; the sheet under it (.nav-links) is what fades */
  body.menu-open .site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 68px; background: #fff; border-bottom: 1px solid var(--line); }
  body.menu-open .site-header .nav { position: relative; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- hero: a living town map, text on the left ----------
   The map (img/hero/town.svg) sits behind everything and scrolls slower
   than the page. Truck routes draw themselves, trucks drive them, and stop
   callouts pop up in turn. A paper-colored wash on the left keeps the
   headline readable. All of it is decorative (aria-hidden). */
.hero { position: relative; margin-top: -68px; min-height: min(96vh, 900px); padding: 180px 0 170px; background: #F3F1EA; overflow: hidden; isolation: isolate; }
.hero-map { position: absolute; inset: 0; z-index: -1; }
.map-svg { position: absolute; left: 0; top: -6%; width: 100%; height: 118%; }
#cam { will-change: transform; }
.hero-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F3F1EA 0%, rgba(243, 241, 234, .95) 30%, rgba(243, 241, 234, .55) 45%, rgba(243, 241, 234, 0) 57%), linear-gradient(180deg, rgba(243, 241, 234, 0) 62%, #F3F1EA 100%); pointer-events: none; }
/* The map layer, drawn like the Dispatch map in the app (apps/app
   routeMap.js + ui.css): route areas, route labels, stops in the route's
   colour (green once done, red when past due, square for commercial),
   trucks as badges in their route's colour, home base in black. Pins keep
   their size while the camera zooms, like map markers. */
.area { fill-opacity: .13; stroke-width: 1.6; stroke-opacity: .85; vector-effect: non-scaling-stroke; }
.area.off { fill-opacity: .07; stroke-opacity: .35; }
.plan { fill: none; stroke-width: 2.4; stroke-opacity: .32; stroke-linejoin: round; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.plan.t7 { stroke-opacity: 0; transition: stroke-opacity .5s; }
.plan.t7.on { stroke-opacity: .5; }
.trail { fill: none; stroke-width: 5; stroke-opacity: .8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pin { transition: opacity .5s var(--ease); }
.stop .dot { transition: transform .5s var(--ease); }
.stop circle, .stop rect { fill: var(--rc); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .6)); transition: fill .4s; }
.stop.off { opacity: .55; }
.stop.done circle, .stop.done rect { fill: #1E8A3C; }
.stop.pd circle, .stop.pd rect { fill: #C8372D; }
.stop text { font: 700 5.4px var(--font-body); fill: #fff; text-anchor: middle; opacity: 0; transition: opacity .4s; }
.near .stop:not(.off) .dot { transform: scale(2); }
.near .stop:not(.off) text { opacity: 1; }
.stop.goback circle { stroke: #F9A825; stroke-width: 2.4; }
.rlabel rect { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.rlabel text { font: 700 10.5px var(--font-mono); fill: #fff; text-anchor: middle; }
.rlabel.off { opacity: .6; }
.near .rlabel { opacity: 0; }
.home { filter: drop-shadow(0 2px 4px rgba(15, 21, 17, .35)); }
.truck { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.truck text { font: 700 11.5px var(--font-body); }
.tag text { font: 700 11px var(--font-body); fill: #fff; text-anchor: middle; }
.ring circle { animation: ring-pulse 1.6s ease-in-out infinite; transform-origin: 0 0; }
@keyframes ring-pulse { 50% { transform: scale(1.15); opacity: .6; } }
html:not(.js) #pins { display: none; } /* pins are placed by the script */
#site { opacity: 0; transition: opacity .8s var(--ease); }
#site.on { opacity: 1; }

.hero-inner { position: relative; }
.hero-copy { max-width: 640px; display: grid; gap: 22px; justify-items: start; }
.hero-kicker { font-weight: 700; color: var(--go); font-size: 1rem; letter-spacing: -.005em; }
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; max-width: 15ch; }
.hero h1 .line { display: inline-block; }
.hero h1 .accent { color: var(--pine); }
.hero .lede { font-size: 1.2rem; color: var(--graphite); max-width: 540px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn-ghost { background: rgba(255, 255, 255, .7); }
/* headline lines rise in once, one after another */
.js .hero h1 .line { opacity: 0; transform: translateY(.4em); animation: line-in .9s var(--ease) forwards; }
.js .hero h1 .line:nth-child(2) { animation-delay: .08s; } .js .hero h1 .line:nth-child(3) { animation-delay: .18s; } .js .hero h1 .line:nth-child(4) { animation-delay: .26s; }
@keyframes line-in { to { opacity: 1; transform: none; } }

/* audience switch: two doors */
.aud { display: grid; gap: 10px; margin-top: 6px; }
.aud-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); box-shadow: var(--shadow-sm); justify-self: start; }
.aud-switch a { font-weight: 700; font-size: .96rem; color: var(--muted); text-decoration: none; padding: 9px 15px; border-radius: 9px; transition: background .25s var(--ease), color .25s var(--ease); }
.aud-switch a:hover { color: var(--ink); }
.aud-switch a[aria-selected="true"] { background: var(--ink); color: #fff; }
.aud-segments { font-size: .95rem; color: var(--muted); }
.aud-segments[hidden] { display: none; }

/* product frame rising over the bottom of the hero */
.hero-product { position: relative; margin-top: -140px; padding-bottom: 20px; z-index: 2; }
.hero-product .shot { max-width: 1100px; margin: 0 auto; box-shadow: 0 4px 10px rgba(15, 21, 17, .08), 0 40px 90px rgba(15, 21, 17, .22); }
.hero-shot[hidden] { display: none; }

/* map parallax + product rise, driven by scroll where supported */
@supports (animation-timeline: scroll()) {
  .hero-map { animation: map-drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  @keyframes map-drift { to { transform: translateY(18%) scale(1.06); } }
  .hero-copy { animation: copy-lift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes copy-lift { to { transform: translateY(-40px); opacity: .25; } }
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 100%; }
  @keyframes rise { from { transform: perspective(1400px) rotateX(14deg) translateY(40px) scale(.94); } to { transform: none; } }
}
@media (max-width: 860px) {
  .hero { padding: 150px 0 150px; min-height: 0; }
  .hero-map::after { background: linear-gradient(180deg, rgba(243, 241, 234, .9) 0%, rgba(243, 241, 234, .82) 55%, #F3F1EA 100%); }
  .hero-product { margin-top: -110px; }
}

/* browser-framed screenshot */
.shot { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F7F9F6; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D7DDD5; }
.shot-bar span { margin-left: 10px; font-family: var(--font-mono); font-size: .72rem; color: #8A958D; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; }
.shot img { width: 100%; height: auto; background: var(--fern); aspect-ratio: 16 / 9.4; object-fit: cover; object-position: top left; }
.shot-dark { border-color: rgba(255, 255, 255, .12); }

/* ---------- logo marquee (placeholder slots until logos are approved) ---------- */
.logos { padding: 38px 0 42px; border-bottom: 1px solid var(--line); background: #fff; }
.logos-label { text-align: center; font-size: .95rem; color: var(--muted); margin-bottom: 20px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track ul { display: flex; gap: 56px; list-style: none; align-items: center; }
.logo-slot { height: 38px; min-width: 140px; display: grid; place-items: center; }
.logo-slot img { max-height: 34px; width: auto; filter: grayscale(1) contrast(.9); opacity: .7; transition: opacity .2s, filter .2s; }
.logo-slot img:hover { opacity: 1; filter: none; }
.logo-slot.placeholder { border: 1.5px dashed #CBD4C9; border-radius: 10px; color: #9AA59D; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }

/* ---------- two sides of every pickup ---------- */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.side { position: relative; border-radius: var(--radius-lg); padding: 38px; display: grid; gap: 18px; align-content: start; overflow: hidden; }
.side-hauler { background: var(--ink); color: #C9D5CC; }
.side-hauler h3 { color: #fff; }
.side-site { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.side h3 { font-size: 1.7rem; letter-spacing: -.02em; }
.side .tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.side-hauler .tag { color: var(--leaf); }
.side-site .tag { color: var(--go); }
.side ul { list-style: none; display: grid; gap: 12px; }
.side li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.side li svg { margin-top: 3px; }
.side-hauler li svg { color: var(--leaf); }
.side-site li svg { color: var(--go); }
.side .who { display: flex; flex-wrap: wrap; gap: 6px; }
.side .who span { font-size: .84rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.side-hauler .who span { background: rgba(255, 255, 255, .07); color: #DCE5DE; border: 1px solid rgba(255, 255, 255, .12); }
.side-site .who span { background: var(--fern); color: var(--pine); }
.side .more { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.side-hauler .more { color: #fff; }
@media (max-width: 860px) { .sides { grid-template-columns: 1fr; } .side { padding: 28px; } }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.feature + .feature { margin-top: 110px; }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 16px; }
.feature-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.feature-copy .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--go); }
.feature-copy .kicker .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fern); color: var(--pine); }
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.ticks li svg { margin-top: 4px; color: var(--go); }
.ticks strong { color: var(--ink); }
@media (max-width: 920px) { .feature { grid-template-columns: 1fr; gap: 32px; } .feature.flip .feature-copy { order: 0; } .feature + .feature { margin-top: 76px; } }

/* site owner segment cards */
.seg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 64px; }
.seg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; align-content: start; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.seg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.seg-card .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--fern); color: var(--pine); }
.seg-card strong { font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; }
.seg-card span { font-size: .92rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 1000px) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .seg-grid { grid-template-columns: 1fr; } }

/* ---------- AI agent (dark) ---------- */
.dark { background: var(--ink); color: #BFCBC2; position: relative; overflow: hidden; isolation: isolate; }
.dark::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(63, 163, 92, .16), transparent 62%); }
.dark h2, .dark h3 { color: #fff; }
.dark .lede { color: #AAB8AE; }
.dark .eyebrow { color: var(--leaf); }
.agent { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.agent-copy { display: grid; gap: 20px; }
.channels { display: flex; flex-wrap: wrap; gap: 8px; }
.channels span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #E3EAE4; padding: 8px 13px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.channels svg { color: var(--leaf); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 6px; }
.act strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 3px; }
.act span { font-size: .95rem; color: #A8B6AC; }
.rules-note { padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(63, 163, 92, .35); background: rgba(63, 163, 92, .08); color: #D3E2D6; font-size: .98rem; }
.rules-note strong { color: #fff; }
@media (max-width: 920px) { .agent { grid-template-columns: 1fr; gap: 40px; } .acts { grid-template-columns: 1fr; } }

/* chat card with rolling conversations (js/main.js .chat-stage) */
.chat-card { background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; color: var(--graphite); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-head .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pine); color: #fff; font-family: var(--font-logo); font-weight: 700; }
.chat-head strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: .98rem; }
.chat-head span { font-size: .8rem; color: var(--muted); }
.chat-head .live { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--go); display: inline-flex; align-items: center; gap: 6px; }
.chat-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(63, 163, 92, .18); }
.chat-stage { position: relative; min-height: 400px; background: var(--paper); }
.chat { position: absolute; inset: 0; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.chat.is-active { opacity: 1; visibility: visible; }
.chat .label { align-self: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #8A958D; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; }
.bubble.user { align-self: flex-end; background: var(--pine); color: #fff; border-bottom-right-radius: 5px; }
.bubble.agent { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.event { align-self: center; max-width: 92%; background: var(--fern); color: var(--pine); font-size: .82rem; font-weight: 600; border-radius: 10px; padding: 7px 12px; }
.bubble time { display: block; font-family: var(--font-mono); font-size: .62rem; opacity: .6; margin-top: 4px; }
.js .bubble { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.js .bubble.shown { opacity: 1; transform: none; }
.js .bubble.typing { opacity: 1; transform: none; display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9AA59D; animation: typing-bounce 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- try it yourself (live demo call) ---------- */
.try { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sms-cta { position: relative; background: var(--pine); color: #fff; border-radius: var(--radius-lg); padding: 40px 36px; }
.sms-cta .eyebrow { color: var(--leaf); }
.sms-cta h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 10px 0 10px; color: #fff; }
.sms-cta h2 strong { color: var(--leaf); }
.sms-cta h2 a { color: #fff; text-decoration: underline; text-decoration-color: var(--leaf); }
.sms-cta-sub { color: #CFDCD2; margin-bottom: 18px; }
.sms-cta-fine { font-size: .8rem; color: #9FB8A6; line-height: 1.6; }
.sms-cta-fine a { color: #D6E4D9; }
.try .email-cta { background: #fff; color: var(--graphite); border: 1px solid var(--line); box-shadow: var(--shadow-sm); align-self: start; }
.try .email-cta h2, .try .email-cta h2 a { color: var(--ink); }
.try .email-cta .sms-cta-sub { color: var(--muted); }
.try .email-cta .eyebrow { color: var(--go); }
.sms-cta-brand { font-size: .92rem; color: var(--pine); background: var(--fern); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 920px) { .try { grid-template-columns: 1fr; } .sms-cta { padding: 30px 22px; } }
.demo-call-form { margin-top: 6px; }
.dc-step { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #DCE7DF; margin: 0 0 10px; }
.dc-scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.dc-scenario { position: relative; display: block; cursor: pointer; }
.dc-scenario input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-scenario > span { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; height: 100%; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s; }
.dc-scenario strong { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; line-height: 1.3; }
.dc-scenario small { font-size: .82rem; color: #B7CCBC; line-height: 1.4; }
.dc-scenario:hover > span { background: rgba(255, 255, 255, .1); }
.dc-scenario input:checked + span { background: rgba(63, 163, 92, .22); border-color: var(--leaf); }
.dc-scenario input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: 2px; }
.dc-scenario.dc-hidden { display: none; }
.dc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.demo-call-form label { display: grid; gap: 6px; font-weight: 600; font-size: .88rem; color: #DCE7DF; }
.dc-optional { font-weight: 400; font-size: .8rem; color: #9FB8A6; }
.demo-call-form input, .demo-call-form select { font: inherit; font-size: 1rem; color: var(--ink); background: #F6FAF5; border: 1.5px solid transparent; border-radius: 10px; padding: 11px 13px; width: 100%; }
.demo-call-form input:focus, .demo-call-form select:focus { border-color: var(--leaf); outline: none; }
.demo-call-form .btn { min-width: 200px; }
.demo-call-form .form-status { margin-top: 12px; }
.demo-call-form .form-status.ok { color: var(--leaf); }
.demo-call-form .form-status.error { color: #FFB4A8; }
.dc-more { margin: -4px 0 16px; }
.dc-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: #DCE7DF; list-style: none; }
.dc-more summary::-webkit-details-marker { display: none; }
.dc-more summary::before { content: "+ "; color: var(--leaf); }
.dc-more[open] summary::before { content: "\2013  "; }
.dc-more label { margin-top: 10px; }
.dc-spinner { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--leaf); border-radius: 50%; animation: dc-spin .8s linear infinite; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-overlay { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(12, 58, 30, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--radius-lg); animation: fade-in .25s ease both; }
.dc-spinner-big { width: 38px; height: 38px; border-radius: 50%; border: 3.5px solid rgba(255, 255, 255, .25); border-top-color: var(--leaf); animation: dc-spin .8s linear infinite; }
.dc-spinner-big.done { border-color: var(--leaf); animation: none; }
.dc-overlay-text { color: #fff; font-weight: 600; font-size: 1.02rem; text-align: center; padding: 0 20px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) { .dc-grid, .dc-scenarios { grid-template-columns: 1fr; } }

/* ---------- platform tour ---------- */
.tour { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.tour figure { display: grid; gap: 12px; }
.tour figure:nth-child(1), .tour figure:nth-child(2) { grid-column: span 3; }
.tour figure:nth-child(n+3) { grid-column: span 2; }
.tour figcaption strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.02rem; }
.tour figcaption span { font-size: .94rem; color: var(--muted); }
@media (max-width: 920px) { .tour { grid-template-columns: 1fr; } .tour figure:nth-child(n) { grid-column: auto; } }

/* ---------- you stay in control ---------- */
.control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ctl { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.ctl .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fern); color: var(--pine); }
.ctl h3 { font-size: 1.08rem; }
.ctl p { font-size: .96rem; color: var(--muted); }
@media (max-width: 920px) { .control { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .control { grid-template-columns: 1fr; } }

/* ---------- sensors ---------- */
.sensors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sensor { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.sensor img { width: 150px; height: 150px; object-fit: contain; background: var(--paper); border-radius: 16px; }
.sensor .tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--go); }
.sensor h3 { font-size: 1.4rem; margin: 2px 0 6px; }
.sensor p { font-size: .96rem; color: var(--muted); }
@media (max-width: 920px) { .sensors { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sensor { grid-template-columns: 1fr; } }

/* ---------- book a demo band ---------- */
.demo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--ink); color: #BFCBC2; border-radius: 28px; padding: 52px; position: relative; overflow: hidden; isolation: isolate; }
.demo-band::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(63, 163, 92, .35), transparent 65%); }
.demo-band h2 { color: #fff; margin-bottom: 14px; }
.demo-band ul { list-style: none; display: grid; gap: 10px; margin: 18px 0; }
.demo-band li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: #D5E0D8; }
.demo-band li svg { margin-top: 4px; color: var(--leaf); }
.demo-alt { font-size: .95rem; }
.demo-alt a { color: #fff; }
.demo-band .demo-form { background: #fff; border-radius: 18px; padding: 26px; }
@media (max-width: 920px) { .demo-band { grid-template-columns: 1fr; padding: 32px 20px; border-radius: 22px; } }
.demo-form { display: grid; gap: 14px; }
.demo-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.demo-form input, .demo-form select, .demo-form textarea { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 13px; width: 100%; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(12, 58, 30, .15); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-status { font-size: .92rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--go); }
.form-status.error { color: var(--signal); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muted-line { color: var(--muted); font-size: .95rem; }

/* demo modal */
.demo-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.demo-modal[hidden] { display: none; }
.demo-modal-scrim { position: absolute; inset: 0; background: rgba(15, 21, 17, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.demo-modal-card { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; animation: pop-in .22s var(--ease) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
.demo-modal-card h3 { font-size: 1.35rem; margin-bottom: 4px; }
.demo-modal-card .muted-line { margin-bottom: 14px; }
.demo-modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; }
.demo-modal-x:hover { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding: 0 0 18px; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #9FAEA3; padding: 56px 0 40px; }
.site-footer .logo { color: #fff; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-grid nav a { color: #C9D5CC; text-decoration: none; font-size: .95rem; }
.footer-grid nav a:hover { color: #fff; }
.footer-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .88rem; }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: .08s; }
.js .reveal-delay-2 { transition-delay: .16s; }
.js .reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ring circle { animation: none; }
  .nav-links.open li { animation: none; }
  .js .hero h1 .line { animation: none; opacity: 1; transform: none; }
  .hero-map, .hero-copy, .rise { animation: none !important; }
  .js .reveal, .js .bubble { opacity: 1 !important; transform: none !important; transition: none !important; }
  .typing i, .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- haulers: scrollytelling ----------
   Wide screens with JS: the screenshot column stays pinned and swaps to the
   story in view (js/main.js sets .is-active). Otherwise each story shows its
   own screenshot underneath. */
.story { display: grid; grid-template-columns: 1fr; gap: 64px; }
.story-step { display: grid; gap: 28px; }
.story-stage { display: none; }
.stage-sticky { position: sticky; top: 104px; aspect-ratio: 16 / 10.4; }
.stage-shot { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.stage-shot.is-active { opacity: 1; transform: none; }
.stage-progress { position: absolute; left: 0; right: 0; bottom: -26px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stage-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--pine); transition: width .5s var(--ease); }
@media (min-width: 921px) {
  .js .story { grid-template-columns: .85fr 1.15fr; }
  .js .story-stage { display: block; }
  .js .story .step-shot { display: none; }
  .js .story-step { min-height: 78vh; align-content: center; opacity: .28; transition: opacity .5s var(--ease); }
  .js .story-step.is-active { opacity: 1; }
  .js .story-step:first-child { min-height: 60vh; align-content: start; padding-top: 12vh; }
}

/* ---------- two sides: slide in from their own sides ---------- */
@supports (animation-timeline: view()) {
  .slide-l, .slide-r { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .slide-l { --from: -60px; }
  .slide-r { --from: 60px; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(var(--from)) rotate(calc(var(--from) / -60 * 1.2deg)); } to { opacity: 1; transform: none; } }
}

/* ---------- site owner types: an editorial row, not a card grid ---------- */
.seg-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seg-card { background: none; border: 0; border-radius: 0; padding: 22px 18px; }
.seg-card + .seg-card { border-left: 1px solid var(--line); }
.seg-card:hover { transform: none; box-shadow: none; background: #F3F1EA; }
@media (max-width: 1000px) { .seg-card + .seg-card { border-left: 0; } .seg-card { border-bottom: 1px solid var(--line); } }

/* ---------- platform tour: pans sideways as you scroll down ---------- */
@supports (view-timeline-name: --t) {
  @media (min-width: 921px) {
    #platform { overflow: clip; }
    .tour-pin { height: 240vh; view-timeline-name: --tour; }
    .tour-pin .tour { position: sticky; top: 110px; display: flex; gap: 28px; width: max-content; animation: tour-pan linear both; animation-timeline: --tour; animation-range: contain 0% contain 100%; }
    .tour-pin .tour figure { width: min(62vw, 780px); grid-column: auto !important; }
    @keyframes tour-pan { to { transform: translateX(calc(-100% + min(100vw, 1200px) - 48px)); } }
  }
}

/* screenshots settle into place as they arrive (instead of the same fade) */
@supports (animation-timeline: view()) {
  .feature .shot, .step-shot, .ctl, .sensor { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes settle { from { transform: translateY(46px) scale(.97); opacity: .2; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .slide-l, .slide-r, .feature .shot, .step-shot, .ctl, .sensor, .tour-pin .tour { animation: none !important; }
  .stage-shot { transition: none; }
}

/* ---------- quieter labels and fewer boxes ---------- */
.feature-copy .kicker { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--go); gap: 8px; }
.feature-copy .kicker .ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--go); }
.side .tag, .sensor .tag { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.control { gap: 0 40px; }
.ctl { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0 30px; }
.ctl .ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--go); }
.seg-card .ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--go); }
.chat .label, .shot-bar span { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.seg-card .ico, .ctl .ico, .feature-copy .kicker .ico { display: inline-flex; justify-self: start; }



/* ---------- hero mini-app: the platform, live ----------
   A small Plentibytes window on the map (js/main.js "hero scenes"): the
   dispatch board, a route's stops checking off, a customer's text or call
   arriving and the AI agent answering, with the actions it takes shown as
   lines, like the real Inbox. */
.app-panel { position: absolute; right: max(24px, calc((100vw - 1200px) / 2 + 24px)); bottom: 196px; width: 360px; transform-origin: 100% 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 6px rgba(15, 21, 17, .08), 0 24px 60px rgba(15, 21, 17, .2); border: 1px solid rgba(15, 21, 17, .06); transition: opacity .4s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease); }
.app-panel.out { opacity: 0; }
/* board mode sits back small so the map shows; a conversation zooms it in */
.app-panel.ap-board { transform: scale(.8); }
.app-panel.ap-chat { transform: translateY(-40px) scale(1.04); box-shadow: 0 4px 10px rgba(15, 21, 17, .1), 0 36px 80px rgba(15, 21, 17, .28); }
.app-panel.ap-board .ap-body { height: 212px; }
.ap-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ink); color: #fff; }
.ap-mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--leaf); color: #07140B; font-family: var(--font-logo); font-weight: 700; font-size: .78rem; }
.ap-title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.ap-chan { font-size: .8rem; color: #AFC1B4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-live { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--leaf); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ap-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(63, 163, 92, .25); }
.ap-body { height: 272px; transition: height .7s var(--ease); padding: 12px; background: #F6F7F4; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden; }
.ap-body > * { animation: ap-in .35s var(--ease) both; }
@keyframes ap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ap-msg { max-width: 86%; padding: 8px 11px; border-radius: 13px; font-size: .86rem; line-height: 1.4; }
.ap-msg small { display: block; font-size: .68rem; font-weight: 700; opacity: .6; margin-bottom: 2px; }
.ap-msg.cust { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ap-msg.ai { align-self: flex-end; background: var(--pine); color: #fff; border-bottom-right-radius: 4px; }
.ap-msg.typing { display: inline-flex; gap: 4px; padding: 11px 13px; }
.ap-msg.typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .7); animation: typing-bounce 1s ease-in-out infinite; }
.ap-msg.typing i:nth-child(2) { animation-delay: .15s; } .ap-msg.typing i:nth-child(3) { animation-delay: .3s; }
.ap-event { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 94%; font-size: .74rem; font-weight: 700; color: var(--pine); background: var(--fern); border-radius: 8px; padding: 5px 9px; }
.ap-event svg { flex: 0 0 auto; }
.ap-event.blue { color: #1F4E82; background: #E4EEF8; }
.ap-event.amber { color: #7A4B05; background: #FBF1DC; }
.ap-event.red { color: #9C2A22; background: #FBE7E4; }
/* live phone call: a bar under the header with a moving voice meter and a timer */
.ap-call { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--pine); color: #fff; font-size: .8rem; }
.ap-call[hidden] { display: none; }
.ap-call b { font-weight: 700; }
.ap-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.ap-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--leaf); animation: ap-wave 1s ease-in-out infinite; transform-origin: 50% 50%; }
.ap-wave i:nth-child(2) { animation-delay: .15s; } .ap-wave i:nth-child(3) { animation-delay: .3s; } .ap-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes ap-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.ap-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: #CFE3D4; }
.ap-meter { height: 5px; border-radius: 5px; background: rgba(122, 75, 5, .15); overflow: hidden; width: 90px; }
.ap-meter i { display: block; height: 100%; width: 0; background: #C9822B; transition: width 1.6s var(--ease); }
.ap-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-size: .82rem; color: var(--graphite); }
.ap-row b { color: var(--ink); font-weight: 700; }
.ap-row .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; border: 1.5px solid var(--ink); color: var(--ink); background: #fff; transition: background .3s, border-color .3s, color .3s; }
.ap-row.done .n { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.ap-row .t { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-row.done .t { color: var(--go); font-weight: 700; }
.ap-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 4px; }
.ap-bar i { display: block; height: 100%; border-radius: 5px; transition: width .8s var(--ease); }
.ap-route { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .82rem; }
.ap-route .top { display: flex; justify-content: space-between; gap: 8px; }
.ap-route b { color: var(--ink); }
.ap-route span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .app-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-panel { display: none; } }