/*
 * push.tt marketing site.
 *
 * Design language follows the category leader: light and airy rather than a
 * dark "tech" page — white and warm-cream sections, photo-led hero, alternating
 * product shots, generous whitespace, orange used sparingly as an accent rather
 * than a wash. The dark treatment is reserved for the product UI itself, which
 * is what appears inside the device frames.
 *
 * Plain HTML + CSS, no build step: a landing page should load instantly on a
 * bad connection, which is the same audience we sell to. Fonts are self-hosted
 * because a security product calling a font CDN hands a visitor log to a third
 * party.
 */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url("fonts/poppins_regular.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url("fonts/poppins_medium.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url("fonts/poppins_semibold.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url("fonts/poppins_bold.ttf") format("truetype"); }

:root {
  --orange: #ff7a00;
  --orange-ink: #d1560a;          /* orange that passes contrast on white */
  --orange-soft: #fff3e6;
  --grad: linear-gradient(135deg, #ffb04a, #ff9a2b 40%, #ff7a00 75%, #e86a00);

  --ink: #1c2529;                 /* headings */
  --body: #56606b;                /* body copy */
  --muted: #8b939d;
  --line: #e8e4dd;

  --white: #ffffff;
  --cream: #fbf7f2;               /* alternating section wash */
  --cream-deep: #f5efe6;

  /* the product UI is dark — device screens only */
  --app-bg: #0f1115;
  --app-surface: #171a20;
  --green: #3dd68c;

  --maxw: 1140px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--body);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

/* ---------------------------------------------------------------- mark */

/*
 * The mark: a broken ring with a centre dot.
 *
 * Geometry is the brand sheet's, and matches the Kotlin implementation exactly
 * — two EQUAL 140° arcs left and right, with 40° gaps centred on 12 and 6.
 * Keep them symmetric: an earlier version here had a 100° left arc against a
 * 140° right one, which read as a logo with its left side chopped off.
 */
/*
 * THE mark — the canonical file, not a redrawing of it.
 *
 * This used to be a `border` under a conic-gradient mask, and that approach
 * cannot produce either of the things that make the mark the mark: a border is
 * one flat colour, so no gradient, and a conic mask cuts the arcs square, so no
 * round caps. The site logo was a lookalike sitting next to the real one.
 *
 * The console needs its ring drawn in code because it tints at runtime with an
 * org's white-label accent. The marketing site never does — it is always push.tt
 * orange — so it can simply USE `icon.svg`, the file raster.mjs copies here from
 * packages/branding/assets/mark.svg. That is as close to "the same as the app"
 * as it is possible to get: the same bytes.
 *
 * It also removes a copy of the geometry. This file used to be one of the places
 * CLAUDE.md warns you have to keep in step; it no longer is.
 *
 * The url is relative to THIS STYLESHEET, which sits at the site root, so it
 * resolves for pages at any depth.
 */
.mark {
  position: relative; flex: none; aspect-ratio: 1;
  background: url("icon.svg") center / contain no-repeat;
}
.wordmark { font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.wordmark .tt { color: var(--orange); }

/* ---------------------------------------------------------------- nav */

header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav { display: flex; align-items: center; height: 64px; gap: 30px; }
nav .brand { display: flex; align-items: center; gap: 9px; flex: none; }
nav .brand .mark { width: 26px; }
nav .brand .wordmark { font-size: 1.14rem; }
nav .links { display: flex; gap: 24px; }
/*
 * Direct children only. These rules are for the top-level bar items; without
 * the child combinator `white-space: nowrap` also lands on every link inside
 * the mega-menu, so the item descriptions cannot wrap and run out of the card.
 */
nav .links > a {
  font-size: 0.9rem; font-weight: 500; color: var(--body);
  white-space: nowrap;   /* "White label" must never wrap mid-item */
}
nav .links > a:hover { color: var(--ink); }
nav .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
nav .right .btn { white-space: nowrap; }

/*
 * The hero is dark and the page below it is light, so the bar has to switch.
 * `.over` is the at-rest state (sitting on the hero); a scroll listener drops it
 * once the hero is behind us. Transitioned so the swap isn't a flash.
 */
header { transition: background 0.25s, border-color 0.25s; }
header.over {
  background: rgba(14, 16, 21, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
header.over .wordmark { color: #fff; }
/* Direct children only: the panel is white even when the bar is dark, so the
   light-on-dark colour must not leak into the menu items inside it. */
header.over .links > a { color: #b9c0c9; }
header.over .links > a:hover { color: #fff; }
header.over .btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
header.over .btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 9px;
  font-weight: 600; font-size: 0.94rem; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: filter 0.15s, transform 0.15s, background 0.15s;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-quiet { color: var(--orange-ink); background: var(--orange-soft); }
.btn-sm { padding: 8px 16px; font-size: 0.87rem; }

/* ---------------------------------------------------------------- hero */

/*
 * Dark, glossy hero over a light page.
 *
 * The centrepiece is the logo at scale: the mark's centre dot rendered as an
 * actual lit sphere, wrapped by the broken ring. It reads as the push-to-talk
 * button, which is the one gesture the whole product is about — so the brand
 * mark and the primary interaction are literally the same object.
 */
.hero {
  position: relative;
  /*
   * Pulled up behind the sticky bar so the bar's backdrop-filter samples the
   * dark hero instead of the white body — otherwise a translucent dark bar over
   * white renders grey.
   */
  margin-top: -65px;
  /* No bottom padding: the tablet is meant to be cut off by the fold. */
  padding: 150px 0 0;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(255, 122, 0, 0.20), transparent 62%),
    radial-gradient(700px 420px at 82% 78%, rgba(255, 154, 43, 0.13), transparent 60%),
    linear-gradient(168deg, #14161d 0%, #0e1015 46%, #16110d 100%);
  overflow: hidden;
}
/*
 * Film grain. Large, smooth, dark gradients band visibly on 8-bit displays —
 * the wide radial glows here are exactly the worst case. A few percent of noise
 * dithers the steps away. Inline SVG so it costs no request.
 */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero .lede { color: #b9c0c9; }
.hero .note { color: #79808b; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 22px;
  background: rgba(255, 122, 0, 0.12);
  border: 1px solid rgba(255, 122, 0, 0.3);
  font-size: 0.8rem; font-weight: 600; color: #ffb066;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.2);
}
.hero .btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.11); }

/* --------------------------------------------------- the sphere */

/*
 * The stage is authored in a fixed 1180 x 640 design space and scaled as one
 * unit. The console mockup inside it has far too much internal structure to
 * reflow safely at every width — scaling keeps every proportion exact, and the
 * wrapper's height tracks the scale so layout below stays correct.
 */
.stage-wrap {
  --ss: 1;
  position: relative; margin-top: 58px;
  height: calc(740px * var(--ss));
}
.stage {
  position: absolute; top: 0; left: 50%;
  width: 1180px; height: 740px;
  transform: translateX(-50%) scale(var(--ss));
  transform-origin: top center;
}

/* holds the ring and the orb concentrically */
.orbit {
  position: absolute; top: -50px; left: 50%;
  width: 1820px; aspect-ratio: 1;
  transform: translateX(-50%);
}

/* ambient bloom behind everything */
.orbit::before {
  content: ""; position: absolute; inset: 4%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 130, 10, 0.4) 0%,
              rgba(255, 110, 0, 0.15) 32%, transparent 58%);
  filter: blur(20px);
}

/*
 * The lit sphere. Layer order matters:
 *   1. body gradient with the light source up-left
 *   2. inset terminator shadow for roundness
 *   3. warm bounce light from the lower-right rim
 *   4. a small specular highlight
 */
/*
 * The orb is a globe: the same lit orange sphere, with the world's coastlines
 * on it and the far hemisphere showing faintly through, so it reads as
 * translucent glass rather than a printed ball.
 *
 * The material lives in the inlined SVG (apps/site/tools/build-globe.mjs) —
 * gradients have to be inside the element that carries the map, or the map
 * would sit on top of an inset box-shadow it should be lit by. Only the outer
 * glow stays in CSS, since that paints outside the box.
 */
.orb {
  position: absolute; inset: 10%; z-index: 1; border-radius: 50%;
  /* Sits at 0.9 so the sphere reads as glass over the dark hero rather than as
     a solid ball. Applies to the outer glow too, which is the point — dimming
     the body while leaving the bloom at full strength makes it look lit from
     inside rather than translucent. */
  opacity: 0.9;
  box-shadow:
    0 60px 170px rgba(190, 70, 0, 0.5),
    0 0 240px rgba(255, 122, 0, 0.3);
}
/*
 * Three stacked layers, in physical order: the lit sphere, then the map on it,
 * then the specular highlight — which is a reflection on the glass and so must
 * paint over the coastlines, not under them.
 */
.orb > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.globe-map { border-radius: 50%; }

/*
 * The two arcs cradling the globe — the mark's strokes at scale, with the globe
 * standing in for its centre dot, rendered as an atmospheric shell.
 *
 * Real SVG arcs rather than the conic-gradient mask used before, because the
 * mark's strokes have ROUNDED ends and a mask can only produce flat radial cuts.
 * Same geometry as `.mark`: two 140-degree arcs, 40-degree gaps on 12 and 6.
 * The round caps eat about 3 degrees at each end, which lands the visible gap
 * right where the brand sheet has it.
 *
 * The material is in the inlined SVG, which is where the layering has to live.
 * All that is left here is the bloom that paints OUTSIDE the element box — kept
 * wide and weak, because the haze pass inside the SVG now does most of that
 * work and stacking the two at full strength turns the shell into a lamp.
 */
/*
 * The bloom lives on a WRAPPER, not on the svg, and that is load-bearing.
 *
 * CSS applies filter before mask, so with drop-shadow on the masked element the
 * glow was generated from the untapered arcs and then sliced by the mask —
 * drawing a long straight blade across a broad soft area, far more visible than
 * the hard cap the mask was added to remove. On a parent it runs on already
 * tapered content and has nothing to cut.
 */
.halo-glow {
  position: absolute; inset: 0; display: block;
  filter: drop-shadow(0 0 52px rgba(255, 128, 12, 0.18));
}
.halo {
  position: absolute; inset: 0;
  opacity: 0.9;

  /*
   * Dissolves both ends of both arcs.
   *
   * The thing being fixed: a stroke ENDS, and its round cap is a shape. Because
   * the shell's gradient is radial, the cap sweeps across the bright limb and
   * draws a hooked crescent — the tips read as commas rather than as gas
   * running out.
   *
   * Two other approaches were built and rejected, and their failures are why
   * this one looks the way it does:
   *   - A Gaussian blur on an SVG mask is ISOTROPIC. Widened enough to dissolve
   *     25 degrees of arc it ate the shell radially long before it softened the
   *     tip, and the graduated-dash variant that fixed that took over two
   *     minutes to rasterise at 3x. Far too expensive for a hero.
   *   - A short conic ramp left a visible ray, which turned out to be the
   *     drop-shadow being cut — see .halo-glow above.
   *
   * A conic gradient is the right shape (the fade has to run AROUND the circle,
   * and SVG has no conic gradient) and costs nothing. Angles are the mark's
   * own, offset 90 degrees because conic-gradient starts at 12 o'clock while
   * the SVG arcs are measured from 3: bodies at 20-160 and 200-340, gaps of 40
   * centred on 12 and 6.
   *
   * Alpha is fully zero out to 22 degrees — two degrees past the arc's
   * geometric start — so the round cap never paints at all. Dimming it is not
   * enough; the cap is a shape, and at even a tenth of its opacity the crescent
   * comes back. The 30-degree ramp then opens on a very gentle toe (0.02, 0.08,
   * 0.22) so no single isoline carries a step big enough to see.
   *
   * Keep in step with the mark's arcs if that geometry ever moves
   * (packages/branding/assets/mark.svg).
   */
  --halo-fade: conic-gradient(from 0deg,
      transparent 0deg 22deg,
      rgba(0, 0, 0, 0.02) 27deg,
      rgba(0, 0, 0, 0.08) 32deg,
      rgba(0, 0, 0, 0.22) 37deg,
      rgba(0, 0, 0, 0.44) 42deg,
      rgba(0, 0, 0, 0.72) 47deg,
      #000 52deg 128deg,
      rgba(0, 0, 0, 0.72) 133deg,
      rgba(0, 0, 0, 0.44) 138deg,
      rgba(0, 0, 0, 0.22) 143deg,
      rgba(0, 0, 0, 0.08) 148deg,
      rgba(0, 0, 0, 0.02) 153deg,
      transparent 158deg 202deg,
      rgba(0, 0, 0, 0.02) 207deg,
      rgba(0, 0, 0, 0.08) 212deg,
      rgba(0, 0, 0, 0.22) 217deg,
      rgba(0, 0, 0, 0.44) 222deg,
      rgba(0, 0, 0, 0.72) 227deg,
      #000 232deg 308deg,
      rgba(0, 0, 0, 0.72) 313deg,
      rgba(0, 0, 0, 0.44) 318deg,
      rgba(0, 0, 0, 0.22) 323deg,
      rgba(0, 0, 0, 0.08) 328deg,
      rgba(0, 0, 0, 0.02) 333deg,
      transparent 338deg 360deg);
  -webkit-mask-image: var(--halo-fade);
  mask-image: var(--halo-fade);
}

/* --------------------------------------------------- devices on the globe */

/*
 * Handsets, tablets and radios pinned to places on the sphere.
 *
 * The overlay matches the orb's box exactly (both inset 10% of .orbit), which
 * is what lets devices.js position by the projection's own -1..1 disc
 * coordinates and multiply by half the box. Above the orb, below the tablet.
 *
 * Three nested transforms, deliberately, because they change on different
 * clocks and would fight if combined: .gd is written every frame with the
 * position, .gd-depth every frame with foreshortening, and .gd-inner is a CSS
 * transition the pop class drives. One element carrying all three would have
 * the per-frame writes cancelling the transition on every tick.
 */
.orb-devices { position: absolute; inset: 10%; z-index: 2; pointer-events: none; }

.gd {
  position: absolute; left: 50%; top: 50%;
  opacity: 0; transition: opacity 0.45s ease;
  will-change: transform;
}
.gd.is-near { opacity: 1; }
.gd-depth, .gd-inner { display: block; }
.gd-inner {
  /* Overshoots slightly and settles — the "pop". A plain ease reads as a
     resize; the overshoot is what makes it feel like it jumped forward. */
  transition: transform 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
  transform-origin: 50% 100%;
  /* Positioned, so the tag's `top: 100%` anchors under the DEVICE. Without it
     the tag resolved against .gd — a zero-height positioning anchor — and sat
     on top of the body where it was invisible. */
  position: relative;
}
.gd.pop .gd-inner { transform: scale(1.55); }

/*
 * Real hardware, drawn as SVG. Sizes are the drawn viewBox scaled to fit the
 * globe: big enough to tell a rugged handset from a slab phone from a tablet,
 * small enough that eight of them read as devices on a map rather than clutter.
 */
.gd-body { display: block; position: relative; }
.dsvg { display: block; overflow: visible; }
.gd-pixel  .dsvg { width: 38px; }
.gd-galaxy .dsvg { width: 36px; }
.gd-rugged .dsvg { width: 44px; }
.gd-tablet .dsvg { width: 72px; }

/* A dark chassis on a lit orange sphere reads as a hole punched in the globe;
   the pale rim and the shadow are what put it ON the surface. */
.dsvg .d-body, .dsvg .d-bump {
  stroke: rgba(255, 226, 196, 0.3); stroke-width: 0.9;
  filter: drop-shadow(0 2px 3px rgba(60, 20, 0, 0.55));
}
.dsvg .d-bump { fill: #4d5563; }
.dsvg .d-screen { fill: #0d1015; }
.dsvg .d-cam { fill: #0a0d11; }
.dsvg .d-key, .dsvg .d-ant { fill: #4a515b; }
.dsvg .d-ptt { fill: #6b7482; transition: fill 0.25s ease; }
.dsvg .d-grille rect { fill: #262c35; }
.dsvg .d-rows rect { fill: #39414d; }
.dsvg .d-ring { stroke: #4a5361; transition: stroke 0.25s ease; }
.dsvg .d-dot, .dsvg .d-live { fill: #6a727d; transition: fill 0.25s ease; }

/* ---- talking and listening ---- */

/*
 * Same semantics as the app: orange is you transmitting, cyan is somebody else
 * talking. Reusing them here means the hero teaches the colour language the
 * product actually uses, rather than decorating with it.
 */
.gd.is-tx .dsvg .d-ring { stroke: var(--orange); }
.gd.is-tx .dsvg .d-dot,
.gd.is-tx .dsvg .d-live { fill: #ffd9a8; }
.gd.is-tx .dsvg .d-ptt { fill: var(--orange); }
.gd.is-rx .dsvg .d-ring { stroke: #2fd4de; }
.gd.is-rx .dsvg .d-dot,
.gd.is-rx .dsvg .d-live { fill: #cbfaff; }

.gd.is-tx .dsvg .d-body { filter: drop-shadow(0 0 5px rgba(255, 122, 0, 0.95)); }
.gd.is-rx .dsvg .d-body { filter: drop-shadow(0 0 5px rgba(47, 212, 222, 0.9)); }

/*
 * The place name, only while popped — eight permanent labels would be a map,
 * not a hero. It carries its own dark pill because pale text sitting directly
 * on a lit orange sphere is unreadable at 9px.
 */
.gd-tag {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 7px; white-space: nowrap;
  padding: 2px 7px; border-radius: 100px;
  background: rgba(12, 15, 19, 0.82);
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffd9a8; opacity: 0; transition: opacity 0.3s ease;
}
.gd.pop .gd-tag { opacity: 1; }

/* Below this the globe itself is only a few hundred px — devices would be
   specks, and seven of them would read as noise on the coastlines. */
@media (max-width: 760px) { .orb-devices { display: none; } }

/* --------------------------------------------------- the product stage */

/*
 * Scenes take turns. Each is parked small and invisible at the point on the
 * globe its device sits on, and grows from there to rest in the middle of the
 * stage; showcase.js supplies --dx/--dy as the vector back to that device.
 *
 * The start state has to live on `.scene` rather than a modifier class, because
 * a scene has to be ALREADY at its start position on the frame the transition
 * begins — set both in the same frame and the browser collapses them and the
 * mockup simply appears, fully grown, with no travel.
 */
.showcase { position: absolute; inset: 0; z-index: 3; }

.scene {
  --dx: 0px; --dy: 0px;
  position: absolute; left: 50%; top: 330px;
  transform: translate(-50%, 0) translate(var(--dx), var(--dy)) scale(0.1);
  opacity: 0; visibility: hidden;
  transition:
    transform 0.62s cubic-bezier(0.22, 0.92, 0.24, 1),
    opacity 0.36s ease,
    visibility 0s linear 0.62s;
}
.scene.on {
  transform: translate(-50%, 0) scale(1);
  opacity: 1; visibility: visible;
  transition:
    transform 0.62s cubic-bezier(0.22, 0.92, 0.24, 1),
    opacity 0.34s ease,
    visibility 0s;
}
/* Leaving is quicker than arriving — a mockup that lingers on the way out
   collides with the next one coming up. */
.scene.off { transition-duration: 0.42s, 0.28s, 0s; transition-delay: 0s, 0s, 0.42s; }
.scene.static { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; transition: none; }

/* The tablet keeps its looks but hands positioning to its scene. */
.sc-tablet .tablet { position: relative; top: auto; left: auto; transform: none; }

/* ---- phone frame ---- */

/*
 * Handsets start higher up the stage than the console does. The stage is 740px
 * tall and the hero crops whatever runs past it — fine for the dashboard, whose
 * content is top-loaded, but it was slicing the bottom off the push-to-talk
 * ring, which is the one thing these scenes exist to show.
 */
.sc-phone, .sc-radio { top: 128px; }

.pdev {
  /* The hero centres its text; an app screen must not. Same trap the console
     tablet already carries a note about. */
  text-align: left;
  width: 330px; border-radius: 40px; padding: 11px;
  background: linear-gradient(158deg, #3a4049 0%, #23272f 26%, #0f1216 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.09) inset,
    0 46px 90px rgba(0, 0, 0, 0.62),
    0 10px 30px rgba(0, 0, 0, 0.5);
}
.pscreen {
  height: 592px; border-radius: 30px; overflow: hidden;
  background: var(--app-bg); display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* top tab bar — order matches the real app: mic, people, chat */
.ptop { display: flex; align-items: center; gap: 4px; padding: 13px 14px 0; }
.pback {
  width: 17px; height: 17px; flex: none; margin-right: 8px;
  border-left: 2px solid #d9dbdf; border-bottom: 2px solid #d9dbdf;
  transform: rotate(45deg) scale(0.7);
}
.ptab { flex: 1; display: grid; place-items: center; padding-bottom: 9px; position: relative; color: #79808b; }
.ptab svg { width: 19px; height: 19px; }
.ptab.on { color: var(--orange); }
.ptab.on::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2.5px; border-radius: 2px; background: var(--orange);
}
.pkebab { display: grid; gap: 2.5px; margin-left: 8px; }
.pkebab i { width: 3px; height: 3px; border-radius: 50%; background: #d9dbdf; display: block; }

/* channel header */
.pchan {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-bottom: 1px solid #23272e; background: #14171c;
}
.pavatar {
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(47, 212, 222, 0.12); border: 1.5px solid rgba(47, 212, 222, 0.55);
  color: #2fd4de; font-weight: 700; font-size: 16px;
}
.pavatar i {
  position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--green); border: 2px solid var(--app-bg);
}
.pchan-t { flex: 1; min-width: 0; }
.pchan-t b { display: block; font-size: 16px; color: #fff; }
.pchan-t em { display: block; font-style: normal; font-size: 11.5px; color: var(--green); margin-top: 1px; }
.pchev {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid #8b919c; border-bottom: 2px solid #8b919c; transform: rotate(45deg);
}

.pbody { flex: 1; display: flex; flex-direction: column; padding: 14px; min-height: 0; }
.prow-top { display: flex; align-items: center; gap: 12px; }
.pcam {
  width: 20px; height: 16px; flex: none; border: 2px solid #8b919c; border-radius: 4px;
}
.pemg {
  margin: 0 auto; padding: 7px 16px; border-radius: 100px;
  border: 1.5px solid rgba(255, 93, 93, 0.75); color: #ff7b7b;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}

.pfoot { display: flex; align-items: center; gap: 14px; padding: 0 16px 16px; }
.pico { width: 17px; height: 17px; border: 2px solid #79808b; border-radius: 4px; flex: none; }
.pbars { margin-left: auto; display: flex; gap: 2.5px; align-items: flex-end; }
.pbars i { width: 3.5px; background: var(--green); border-radius: 1px; display: block; }
.pbars i:nth-child(1) { height: 5px; }
.pbars i:nth-child(2) { height: 8px; }
.pbars i:nth-child(3) { height: 11px; }
.pbars i:nth-child(4) { height: 14px; }

/* ---- the push-to-talk ring ---- */

.pring {
  margin: auto; width: 214px; height: 214px; border-radius: 50%;
  position: relative; display: grid; place-items: center;
}
.pring-track {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #1a1e25, #0e1116);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.028);
}
.pring-arc {
  position: absolute; inset: 0; border-radius: 50%;
  border: 5px solid #b4600d;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, border-width 0.2s ease;
}
.pring-mic { position: relative; z-index: 2; color: #fff; }
.pring-mic svg { width: 46px; height: 46px; display: block; }
.pring-cap {
  text-align: center;
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: #d9dbdf; opacity: 0;
}
.cap-idle { opacity: 1; }
.pring-pulse { position: absolute; inset: 0; }
.pring-pulse i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 138, 0, 0.5); opacity: 0;
}

/* live speech level, under the ring */
.plevel { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 30px; }
.plevel i {
  width: 4px; height: 5px; border-radius: 2px; background: #2b313a; display: block;
  transform-origin: 50% 100%;
}

/*
 * Talk scene. One press: idle, key up, talk, release, then somebody answers.
 * Timings are shared across the ring, the caption and the level meter, so they
 * have to move together — change one and the mic appears to key itself.
 */
.sc-phone[data-scene="talk"].play .pring-arc { animation: talk-arc 6s ease-in-out both; }
.sc-phone[data-scene="talk"].play .cap-idle { animation: cap-idle 6s linear both; }
.sc-phone[data-scene="talk"].play .cap-tx { animation: cap-tx 6s linear both; }
.sc-phone[data-scene="talk"].play .cap-rx { animation: cap-rx 6s linear both; }
.sc-phone[data-scene="talk"].play .pring-pulse i { animation: talk-pulse 1.5s ease-out 3; }
.sc-phone[data-scene="talk"].play .pring-pulse i:nth-child(2) { animation-delay: 0.75s; }
.sc-phone[data-scene="talk"].play .plevel i { animation: talk-level 0.62s ease-in-out infinite alternate; }
/* The meter only exists while the mic is actually open. Left running it showed
   speech level during "Hold to talk" and while somebody else was talking. */
.sc-phone[data-scene="talk"] .plevel { opacity: 0; }
.sc-phone[data-scene="talk"].play .plevel { animation: cap-tx 6s linear both; }

@keyframes talk-arc {
  0%, 12%   { border-color: #b4600d; box-shadow: none; border-width: 5px; }
  16%, 52%  { border-color: #ff8a00; box-shadow: 0 0 34px rgba(255, 122, 0, 0.55); border-width: 8px; }
  58%, 62%  { border-color: #b4600d; box-shadow: none; border-width: 5px; }
  68%, 100% { border-color: #2fd4de; box-shadow: 0 0 34px rgba(47, 212, 222, 0.45); border-width: 6px; }
}
@keyframes cap-idle { 0%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes cap-tx   { 0%, 14% { opacity: 0; } 16%, 56% { opacity: 1; color: #ffb04a; } 58%, 100% { opacity: 0; } }
@keyframes cap-rx   { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; color: #2fd4de; } }
@keyframes talk-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes talk-level { from { transform: scaleY(1); background: #2b313a; } to { transform: scaleY(3.4); background: var(--orange); } }
.plevel i:nth-child(2n)  { animation-duration: 0.44s !important; }
.plevel i:nth-child(3n)  { animation-duration: 0.78s !important; }
.plevel i:nth-child(5n)  { animation-duration: 0.53s !important; }

/* ---- voice log ---- */

.pbody-log { padding: 12px 0 0; }
.pdate {
  align-self: center; padding: 4px 12px; border-radius: 100px; background: #1d222a;
  font-size: 10.5px; font-weight: 600; color: #8b919c; margin-bottom: 10px;
}
.plog { flex: 1; }
.plogrow {
  display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid #1e232a;
  opacity: 0;
}
.pav {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.pav-you { background: rgba(255, 122, 0, 0.18); border: 1.5px solid var(--orange); color: #ffb04a; }
.pav-lf  { background: rgba(214, 178, 61, 0.16); border: 1.5px solid #d6b23d; color: #e8ca63; }
.pav-dm  { background: rgba(47, 212, 222, 0.14); border: 1.5px solid #2fd4de; color: #7fe9f0; }
.plog-t { min-width: 0; }
.plog-t b { display: block; font-size: 13.5px; color: #fff; }
.plog-t em { display: block; font-style: normal; font-size: 11px; color: #8b919c; margin: 1px 0 4px; }
.ptrans { display: block; font-size: 12.5px; color: #c9ced6; line-height: 1.45; }
/* The transcription line, produced on the sending device — it types itself in
   because that is the one thing on this screen a still frame cannot show. */
.ptype { white-space: nowrap; overflow: hidden; width: 0; }
.pcaret {
  display: inline-block; width: 1.5px; height: 12px; background: var(--orange);
  vertical-align: -2px; margin-left: 2px;
}
.sc-phone[data-scene="history"].play .plogrow { animation: log-in 0.5s ease-out both; }
.sc-phone[data-scene="history"].play .plogrow:nth-child(2) { animation-delay: 0.5s; }
.sc-phone[data-scene="history"].play .plogrow:nth-child(3) { animation-delay: 1.0s; }
.sc-phone[data-scene="history"].play .ptype { animation: type-in 2.4s steps(30, end) 1.6s both; }
.sc-phone[data-scene="history"].play .pcaret { animation: caret 0.6s steps(1) 1.6s 7; }
@keyframes log-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes type-in { from { width: 0; } to { width: 100%; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.pplay {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  padding: 12px 18px; border-top: 1px solid #1e232a;
}
.prate { font-size: 12px; font-weight: 700; color: #d9dbdf; }
.pskip { width: 11px; height: 12px; background: #d9dbdf; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pskip:last-child { transform: scaleX(-1); }
.pplaybtn { width: 15px; height: 17px; background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pcompose { display: flex; align-items: center; gap: 12px; padding: 12px 16px 18px; }
.pplus { width: 15px; height: 15px; flex: none; position: relative; }
.pplus::before, .pplus::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: #d9dbdf;
}
.pplus::before { width: 15px; height: 2px; }
.pplus::after { width: 2px; height: 15px; }
.pinput {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid #2c3138;
  font-size: 12.5px; color: #6f7783;
}
.psend { width: 17px; height: 15px; background: #8b919c; clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); }

/* ---- emergency ---- */

.pbanner {
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
  background: rgba(255, 93, 93, 0.13); border: 1px solid rgba(255, 93, 93, 0.55);
  opacity: 0; transform: translateY(-12px);
}
.pbanner-h { display: block; font-size: 13px; font-weight: 700; color: #ff8f8f; letter-spacing: 0.02em; }
.pbanner-s { display: block; font-size: 11px; color: #c9ced6; margin-top: 3px; }
.packs { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.packs i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 9px; font-weight: 700;
  background: #23272e; color: #d9dbdf; border: 1px solid #3a4049; opacity: 0;
}
.packs em { font-style: normal; font-size: 10.5px; color: #8b919c; margin-left: 4px; opacity: 0; }
.pemg-live { border-color: #ff5d5d; color: #ff5d5d; }

.sc-phone[data-scene="emergency"].play .pemg-live { animation: emg-press 6s ease-in-out both; }
.sc-phone[data-scene="emergency"].play .pring-arc { animation: emg-arc 6s ease-in-out both; }
.sc-phone[data-scene="emergency"].play .cap-hold { animation: cap-idle 6s linear both; }
.sc-phone[data-scene="emergency"].play .cap-live { animation: cap-rx 6s linear both; }
.sc-phone[data-scene="emergency"].play .pbanner { animation: emg-banner 6s ease-out both; }
.sc-phone[data-scene="emergency"].play .packs i { animation: ack-in 0.4s ease-out both; }
.sc-phone[data-scene="emergency"].play .ack1 { animation-delay: 3.1s; }
.sc-phone[data-scene="emergency"].play .ack2 { animation-delay: 3.7s; }
.sc-phone[data-scene="emergency"].play .ack3 { animation-delay: 4.4s; }
.sc-phone[data-scene="emergency"].play .packs em { animation: ack-in 0.4s ease-out 4.9s both; }
.sc-phone[data-scene="emergency"].play .pring-pulse i { animation: emg-pulse 1.4s ease-out 2.6s infinite; }
.sc-phone[data-scene="emergency"].play .pring-pulse i:nth-child(2) { animation-delay: 3.3s; }

@keyframes emg-press {
  0%, 18%   { background: transparent; box-shadow: none; }
  26%, 42%  { background: rgba(255, 93, 93, 0.22); box-shadow: 0 0 22px rgba(255, 93, 93, 0.5); }
  46%, 100% { background: rgba(255, 93, 93, 0.16); box-shadow: 0 0 14px rgba(255, 93, 93, 0.35); }
}
@keyframes emg-arc {
  0%, 40%   { border-color: #b4600d; box-shadow: none; }
  46%, 100% { border-color: #ff5d5d; box-shadow: 0 0 34px rgba(255, 93, 93, 0.5); border-width: 8px; }
}
@keyframes emg-banner {
  0%, 40%  { opacity: 0; transform: translateY(-12px); }
  50%, 100% { opacity: 1; transform: none; }
}
@keyframes ack-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes emg-pulse {
  0%   { transform: scale(1); opacity: 0.55; border-color: rgba(255, 93, 93, 0.6); }
  100% { transform: scale(1.3); opacity: 0; border-color: rgba(255, 93, 93, 0.6); }
}

/* ---- the handheld radio ---- */

.rdev {
  text-align: left;
  position: relative; width: 232px; padding: 20px 18px 26px; border-radius: 22px;
  background: linear-gradient(158deg, #3f454e 0%, #23272f 30%, #121519 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.1) inset,
    0 46px 90px rgba(0, 0, 0, 0.62),
    0 10px 30px rgba(0, 0, 0, 0.5);
}
.rant {
  position: absolute; top: -46px; right: 26px; width: 11px; height: 52px; border-radius: 6px;
  background: linear-gradient(180deg, #4a515b, #23272e);
}
.rscreen {
  border-radius: 10px; padding: 14px 13px; background: #0b0e12;
  box-shadow: 0 0 0 1px #2c3138 inset;
}
.rchan { display: block; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.03em; margin-bottom: 14px; }
.rmeta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.rmeta i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #8b919c; letter-spacing: 0.08em; }
.rsig { width: 26px; height: 9px; background: linear-gradient(90deg, var(--green) 70%, #2b313a 70%); border-radius: 2px; }
.rgrille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 20px; }
.rgrille i { height: 5px; border-radius: 3px; background: #1a1e25; display: block; }
.rknobs { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.rknobs span {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a515b, #1c2027);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.rptt {
  position: absolute; left: -7px; top: 96px; width: 9px; height: 66px; border-radius: 5px;
  background: linear-gradient(180deg, #4a515b, #23272e);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sc-radio.play .rptt { animation: r-ptt 4.6s ease-in-out both; }
/*
 * The radio's transmit state is carried by the PTT bar and the screen glow
 * alone. There was a MONITORING/TRANSMITTING label here that swapped between
 * two stacked spans; it computed correctly at every offset on both opacity and
 * visibility and still painted the idle one, and rather than keep chasing it or
 * ship a label capable of showing the wrong state, it is gone. The bar and the
 * glow say the same thing and demonstrably work.
 */
.sc-radio.play .rscreen { animation: r-screen 4.6s ease-in-out both; }
@keyframes r-ptt {
  0%, 12%   { background: linear-gradient(180deg, #4a515b, #23272e); box-shadow: none; }
  18%, 76%  { background: linear-gradient(180deg, #ffb04a, #e86a00); box-shadow: 0 0 18px rgba(255, 122, 0, 0.7); }
  84%, 100% { background: linear-gradient(180deg, #4a515b, #23272e); box-shadow: none; }
}
@keyframes r-screen {
  0%, 12%   { box-shadow: 0 0 0 1px #2c3138 inset; }
  18%, 76%  { box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.55) inset, 0 0 24px rgba(255, 122, 0, 0.18); }
  84%, 100% { box-shadow: 0 0 0 1px #2c3138 inset; }
}

/* The device this scene came from is over here now, so dim its dot. */
.gd.is-away .dsvg { opacity: 0.35; }
.gd.is-away .gd-tag { opacity: 0; }

/*
 * Below this the stage is scaled so far down that a 330px phone is thumbnail
 * sized and its animated detail is illegible — the console, which is mostly
 * large numbers, is the one that still reads. So it parks and the cycling stops.
 */
@media (max-width: 760px) {
  .scene { display: none; }
  .sc-tablet { display: block; transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; }
}

/* --------------------------------------------------- the console tablet */

/*
 * Landscape tablet standing in front of the orb, cropped by the bottom of the
 * hero. The screen is a faithful rebuild of the console's Dashboard — same
 * panes, same nav, same badge semantics — because a product shot that shows a
 * UI we don't ship is a lie that costs us on the first demo call.
 */
.tablet {
  position: absolute; z-index: 3; top: 330px; left: 50%;
  width: 1010px; transform: translateX(-50%);
  text-align: left;   /* the hero centres its text; a console pane must not be */
  border-radius: 26px; padding: 13px;
  background: linear-gradient(158deg, #363c46 0%, #23272f 26%, #14171c 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 50px 90px rgba(0, 0, 0, 0.62),
    0 10px 30px rgba(0, 0, 0, 0.5);
}
.tscreen {
  display: flex; height: 640px;
  border-radius: 15px; overflow: hidden;
  background: var(--app-bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* sidebar */
.tside {
  width: 232px; flex: none; padding: 20px 14px;
  background: #171a20; border-right: 1px solid #2c3138;
}
.tlogo { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.tlogo .mark { width: 26px; }
.tname { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.tname .tt { color: var(--orange); }
.torg { font-size: 10.5px; color: #8b919c; margin-top: 1px; }
.tnav {
  padding: 9px 12px; border-radius: 8px; margin-bottom: 2px;
  font-size: 13px; font-weight: 500; color: #d9dbdf;
}
.tnav.on { background: rgba(255, 122, 0, 0.15); color: var(--orange); font-weight: 600; }

/* main pane */
.tmain { flex: 1; padding: 22px 24px; min-width: 0; }
.tmain h3 { font-size: 21px; color: #fff; margin-bottom: 4px; }
.tmain > p { font-size: 12px; color: #8b919c; margin-bottom: 18px; }

.tstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tstat {
  background: #171a20; border: 1px solid #2c3138;
  border-radius: 10px; padding: 12px 13px;
}
.tstat b { display: block; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.tstat b.ok { color: var(--green); }
.tstat span { font-size: 10.5px; color: #8b919c; }

.tcard {
  margin-top: 16px; padding: 16px 18px 4px;
  background: #171a20; border: 1px solid #2c3138; border-radius: 12px;
}
.tcard h4 { font-size: 15px; color: #fff; margin-bottom: 6px; }
.trow { padding: 11px 0; border-bottom: 1px solid #2c3138; }
.tline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tline strong { font-size: 13px; font-weight: 600; color: #fff; }
.trow em { display: block; font-style: normal; font-size: 11px; color: #8b919c; margin-top: 4px; }
.tbadge {
  flex: none; font-size: 10.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.tbadge.ok { color: var(--green); background: rgba(61, 214, 140, 0.14); }
.tbadge.warn { color: #ffab48; background: rgba(255, 154, 43, 0.15); }

/*
 * One knob. Everything in the stage is design-space px, so the whole scene —
 * orb, ring, tablet, and every label inside it — stays in proportion.
 *
 * Each step is sized for the NARROWEST width in its bucket, so the tablet lands
 * around 85-88% of the viewport and never touches the edges. The ring is wider
 * than the tablet by design and bleeds off both sides, which is the point.
 */
@media (max-width: 1160px) { .stage-wrap { --ss: 0.92; } }
@media (max-width: 1060px) { .stage-wrap { --ss: 0.83; } }
@media (max-width: 960px)  { .stage-wrap { --ss: 0.75; } }
@media (max-width: 860px)  { .stage-wrap { --ss: 0.66; } }
@media (max-width: 760px)  { .stage-wrap { --ss: 0.57; } }
@media (max-width: 660px)  { .stage-wrap { --ss: 0.48; } }
@media (max-width: 560px)  { .stage-wrap { --ss: 0.41; } }
@media (max-width: 480px)  { .stage-wrap { --ss: 0.35; } }
@media (max-width: 400px)  { .stage-wrap { --ss: 0.28; } }

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.hero .lede { font-size: 1.08rem; max-width: 34rem; margin: 0 auto 30px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .note { font-size: 0.84rem; color: var(--muted); margin-top: 18px; }

/* ---------------------------------------------------------------- logos */

.logos { padding: 26px 0 66px; }
.logos .row {
  display: flex; gap: 46px; justify-content: center; align-items: center;
  flex-wrap: wrap; opacity: 0.5;
}
.logos .lg {
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
  letter-spacing: -0.02em; white-space: nowrap;
}
.logos .cap {
  text-align: center; font-size: 0.76rem; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px;
}

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

section { padding: 92px 0; }
.wash { background: var(--cream); }
.wash-deep { background: var(--cream-deep); }

.kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-ink); margin-bottom: 12px;
}
h2 { font-size: clamp(1.75rem, 3.4vw, 2.45rem); margin-bottom: 16px; }
.sub { font-size: 1.04rem; max-width: 36rem; }
.head-center { text-align: center; }
.head-center .sub { margin-inline: auto; }
.head { margin-bottom: 52px; }

/* alternating feature rows */
.row2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.row2 + .row2 { margin-top: 104px; }
.row2.flip .visual { order: 2; }
.row2 h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: 14px; }
.row2 p { font-size: 1.02rem; }
.row2 .visual { display: flex; justify-content: center; }
/*
 * Overlapped pair: the front phone is you, the one behind is the other party.
 * Both need `position: relative` — a negative z-index alone would drop the back
 * phone behind the section's own background and it would vanish.
 */
/* Widths sized so the pair still fits the 430px column at the 980px breakpoint. */
.row2 .visual.pair { padding-left: 24px; }
.row2 .visual.pair .phone { width: 216px; position: relative; z-index: 1; }
.row2 .visual.pair .phone.back {
  margin-left: -50px; margin-top: 44px; z-index: 0;
  transform: rotate(6deg); transform-origin: top left;
}
.row2 ul { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.row2 li { display: flex; gap: 10px; font-size: 0.95rem; }
.row2 li svg { width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 5px; }

/* ---------------------------------------------------------------- phone */

.phone {
  width: 258px; border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #2a2f37, #14171c);
  box-shadow: 0 26px 60px rgba(28, 37, 41, 0.22);
  flex: none;
}
.phone .screen {
  background: var(--app-bg); border-radius: 26px; overflow: hidden;
  aspect-ratio: 9 / 18.5; display: flex; flex-direction: column;
  padding: 14px 12px 10px;
}
.screen .bar { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; }
.screen .bar .mark { width: 16px; }
.screen .bar .nm { font-size: 0.63rem; font-weight: 600; color: #fff; }
.screen .bar .st {
  margin-left: auto; font-size: 0.53rem; color: var(--green);
  background: rgba(61, 214, 140, 0.14); padding: 2px 7px; border-radius: 20px;
}
.screen .chan { font-size: 0.7rem; font-weight: 600; color: #fff; }
.screen .chan em { display: block; font-style: normal; font-size: 0.56rem; color: var(--green); }

.ring {
  margin: auto; width: 152px; height: 152px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 44%, #1a1e25, #0e1116);
}
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  padding: 5px; background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 3.6s linear infinite;
}
.ring.cyan::before { background: linear-gradient(135deg, #7fe9f0, #2fd4de 60%, #1ba7b0); animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring::before { animation: none; } }
.ring svg { width: 38px; height: 38px; }
.ring .cap {
  position: absolute; bottom: 34px; font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.13em; color: #d9dbdf; white-space: nowrap;
}
.ring.cyan .cap { color: #2fd4de; }

.screen .logrow {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid #23272e;
}
.screen .logrow .av {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: rgba(255, 122, 0, 0.2); border: 1px solid rgba(255, 122, 0, 0.6);
}
.screen .logrow .who { font-size: 0.58rem; font-weight: 600; color: #fff; }
.screen .logrow .meta { font-size: 0.5rem; color: #8b919c; }
.screen .logrow .dur { margin-left: auto; font-size: 0.55rem; color: #d9dbdf; }
.screen .foot { display: flex; gap: 9px; align-items: center; padding-top: 8px; }
.screen .foot .bars { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; }
.screen .foot .bars i { width: 2.5px; background: var(--green); border-radius: 1px; display: block; }

/* ---------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.stat .n {
  font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 700; color: var(--ink);
  letter-spacing: -0.03em; line-height: 1;
}
.stat .l { font-size: 0.9rem; color: var(--body); margin-top: 8px; }
.stat .n .u { color: var(--orange); }

/* ---------------------------------------------------------------- cards */

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.wash .tile { background: #fff; }
.tile:hover { box-shadow: 0 14px 34px rgba(28, 37, 41, 0.08); transform: translateY(-2px); }
.tile .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-ink); margin-bottom: 16px;
}
.tile .ico svg { width: 20px; height: 20px; }
.tile h3 { font-size: 1.05rem; margin-bottom: 8px; }
.tile p { font-size: 0.92rem; }

/* ---------------------------------------------------------------- security */

.sec { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.spec {
  background: var(--app-bg); border-radius: 16px; padding: 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.79rem; line-height: 1.9; color: #d9dbdf; overflow-x: auto;
}
.spec .k { color: #ff9a2b; }
.spec .c { color: #6f7783; }

.checklist { list-style: none; display: grid; gap: 20px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist svg { width: 20px; height: 20px; color: var(--orange); flex: none; margin-top: 3px; }
.checklist strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px; }
.checklist span { font-size: 0.92rem; }

.honest {
  margin-top: 26px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: 12px; padding: 20px 22px;
}
.honest h4 { font-size: 0.98rem; margin-bottom: 8px; }
.honest p { font-size: 0.9rem; }

/* ---------------------------------------------------------------- plans */

/* Four tiers now that Personal is free — auto-fit rather than a fixed count, so
   the row reflows to two-up on a tablet instead of squeezing to unreadable. */
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; max-width: 1320px; margin: 0 auto;
}
.plan { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.plan.hi { border-color: var(--orange); box-shadow: 0 16px 40px rgba(255, 122, 0, 0.13); position: relative; }
.plan.hi::after {
  content: "Most popular"; position: absolute; top: -12px; left: 34px;
  background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.plan h3 { font-size: 1.3rem; }
.plan .price { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; margin-top: 6px; }
/* Four cards are narrower than three: without this the unit wraps mid-phrase
   and reads as "/ user /" on one line and "month" on the next. */
.plan .price small { font-size: 0.85rem; font-weight: 400; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.plan .desc { font-size: 0.92rem; margin: 10px 0 22px; }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.plan li { display: flex; gap: 10px; font-size: 0.93rem; }
.plan li svg { width: 16px; height: 16px; color: var(--orange); flex: none; margin-top: 4px; }
.plan .btn { width: 100%; }

/* What a line item actually is, next to the line item. */
.plan .tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: 1px;
}
.plan .tag.ok  { color: #1f7a4d; background: #e6f7ee; }
.plan .tag.dev { color: #5a5f75; background: #eef0f6; }

.plans-note {
  max-width: 46rem; margin: 30px auto 0; text-align: center;
  font-size: 0.9rem; color: var(--muted);
}
.plans-note em { font-style: normal; font-weight: 600; color: var(--body); }

/* ---------------------------------------------------------------- whitelabel */

.wl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.swatch { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.swatch .row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.swatch .mark { width: 26px; }
.swatch .nm { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.swatch p { font-size: 0.88rem; }
.swatch.blue { --orange: #2f80ed; --grad: linear-gradient(135deg, #6aa8f5, #2f80ed 60%, #2668bf); }
.swatch.green { --orange: #12b981; --grad: linear-gradient(135deg, #4bd6a8, #12b981 60%, #0d8f63); }

/* ---------------------------------------------------------------- band */

/*
 * Closing CTA. Echoes the hero: same dark ground, same orb, so the page opens
 * and closes on the mark. Half the sphere sits below the fold of the block —
 * cropped rather than repeated at full size, which would just look duplicated.
 */
.band {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; text-align: center;
  border-radius: 28px; padding: 76px 32px 116px;
}
.band::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: -152px; width: 220px; height: 220px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 33% 27%,
    #ffd99b 0%, #ffab3d 13%, #ff8c10 27%, #f97400 42%,
    #d85800 60%, #9e3c00 79%, #4e1a00 100%);
  box-shadow:
    inset -12px -14px 28px rgba(104, 28, 0, 0.7),
    inset 0 0 2px 1px rgba(255, 196, 130, 0.5),
    0 -6px 80px rgba(255, 122, 0, 0.26);
}
.band > * { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band .sub { color: #b7bec6; margin-inline: auto; margin-bottom: 28px; }
.band .btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18); color: #fff;
}
.band .btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }
.band-wrap { padding: 0 0 92px; }
.pill-row { display: flex; gap: 30px; justify-content: center; margin-top: 40px; flex-wrap: wrap; font-weight: 700; }
.pill-row span:nth-child(2) { color: var(--orange); }

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

/*
 * Six columns on their own full-width row rather than pushed to the right of
 * the brand. With this many groups the old `margin-left: auto` flex row left
 * each column about 140px, which wrapped "Frontline Communication" onto three
 * lines; a full-width grid gives every column the same ~180px and one baseline.
 */
footer { border-top: 1px solid var(--line); padding: 52px 0 36px; }
.foot-top { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 38px; }
.foot-top .brand { display: flex; align-items: center; gap: 10px; }
.foot-top .mark { width: 28px; }
.foot-top .wordmark { font-size: 1.14rem; }
.tagline { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.foot-cols {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 34px 24px; margin-bottom: 38px;
}
.foot-col h5 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot-col a { display: block; font-size: 0.86rem; line-height: 1.45; margin-bottom: 9px; }
.foot-col a:hover { color: var(--orange-ink); }
/*
 * Unlinked entries for things that genuinely are not downloadable yet. Shown
 * rather than omitted, because "where is the iOS app" is the question, and the
 * answer belongs here instead of behind a 404.
 */
.foot-col .soon-link {
  display: block; font-size: 0.86rem; line-height: 1.45; margin-bottom: 9px; color: var(--muted);
}
.foot-col .soon-link em {
  font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange-ink); background: var(--orange-soft);
  border-radius: 100px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
}
.foot-bot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px; font-size: 0.83rem; color: var(--muted);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; }
  .row2, .sec { grid-template-columns: 1fr; gap: 44px; }
  .row2.flip .visual { order: 0; }
  .grid3, .wl { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Drop the nav links before they start crowding the CTAs, not at phone width. */
@media (max-width: 900px) {
  nav .links { display: none; }
}

@media (max-width: 700px) {
  .grid3, .wl, .plans, .stats { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  section { padding: 62px 0; }
  .band { padding: 56px 22px 92px; border-radius: 22px; }
  .band::before { width: 170px; height: 170px; bottom: -120px; }
  .hero { padding-top: 116px; }
  .stage-wrap { margin-top: 30px; }
}

/* ================================================================ menus */

/*
 * Mega-menu on native <details>/<summary>.
 *
 * The panel is a wide centred sheet rather than a column of links, because
 * twelve destinations grouped by what they are for is navigable and a
 * twelve-item list is not. Each item carries an icon and a one-line summary so
 * the choice can be made from the menu instead of by trial and error.
 */
nav .menu { position: relative; }
nav .menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.9rem; font-weight: 500; color: var(--body);
  transition: color 0.15s;
}
nav .menu > summary::-webkit-details-marker { display: none; }
nav .menu > summary svg { opacity: 0.65; transition: transform 0.18s; }
nav .menu[open] > summary svg { transform: rotate(180deg); }
nav .menu > summary:hover,
nav .menu[open] > summary { color: var(--ink); }
header.over nav .menu > summary { color: #b9c0c9; }
header.over nav .menu > summary:hover,
header.over nav .menu[open] > summary { color: #fff; }

nav .drop {
  /*
   * `left: 50%` needs NO dock adjustment, and adding one broke it.
   *
   * `header` establishes the containing block for this fixed element, so the 50%
   * resolves against the HEADER's width — which already narrows with the page
   * inset. Subtracting half the rail on top of that double-counted: the menu
   * landed 186 px off the left edge of the screen. Measured `left` was 220px,
   * i.e. 50% of 860 minus 210, which is what named the containing block.
   *
   * The width does need help, but from `100%` rather than `100vw`: viewport units
   * are always the viewport and know nothing of the inset, so a 1000 px menu
   * inside an 860 px header ran under the rail. `100%` is the containing block,
   * so it follows the inset with no variable at all.
   */
  position: fixed; left: 50%; top: 72px; z-index: 70;
  width: min(1000px, calc(100% - 3rem));
  transform: translateX(-50%);
  max-height: calc(100vh - 6rem); overflow-y: auto;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(28, 37, 41, 0.28);
}
nav .menu[open] > .drop { animation: drop-in 0.16s ease-out; }
/* Transparent bridge across the gap below the header, so travelling from the
   summary to the panel never passes over dead space. */
nav .menu[open] > .drop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { nav .menu[open] > .drop { animation: none; } }

/* Four columns since the eSIM store added a group. At the panel's 1000px cap
   that is 250px each, which still fits a two-line blurb. */
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mcol {
  min-width: 0; padding: 8px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
}
.mcol-h {
  padding: 4px 12px 8px;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

.mcol a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mcol a:hover { background: var(--white); border-color: #ffd6ab; }

.mcol .ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--orange-ink);
  background: var(--orange-soft); border: 1px solid #ffd6ab;
  transition: background 0.15s, border-color 0.15s;
}
.mcol .ico svg { width: 18px; height: 18px; }
.mcol a:hover .ico { background: #ffe6cc; border-color: var(--orange); }

/* flex:1 + min-width:0 is the pair that makes a flex child actually wrap
   instead of sizing to its longest line and overflowing the card. */
.mcol .txt { flex: 1 1 auto; min-width: 0; }
.mcol .t {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
}
.mcol .d {
  display: block; margin-top: 2px;
  font-size: 0.79rem; line-height: 1.45; color: var(--body);
  overflow-wrap: break-word;
}
/* Shown in the menu, not just on the page: the state should be known before
   the click, not discovered after it. */
.mcol .soon, .mnav .soon {
  flex: none; padding: 1px 7px; border-radius: 100px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5a5f75; background: #eef0f6; border: 1px solid #d9dde9;
}

@media (max-width: 1040px) { .mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { nav .menu { display: none; } }

/* ---- mobile disclosure nav ---- */

.menu-mobile { display: none; order: 9; margin-left: 12px; }
.menu-mobile > summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile .bars { display: grid; gap: 4px; }
.menu-mobile .bars i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); }
header.over .menu-mobile > summary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
header.over .menu-mobile .bars i { background: #fff; }

.mnav {
  /* Same containing block as `nav .drop`, so the 12 px inset is already correct. */
  position: fixed; left: 12px; right: 12px; top: 68px; z-index: 70;
  max-height: calc(100vh - 5rem); overflow-y: auto;
  padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -16px rgba(28, 37, 41, 0.3);
}
.mnav-h {
  padding: 12px 12px 6px;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.mnav-h:first-child { padding-top: 4px; }
.mnav a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 9px;
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
}
.mnav a:hover { background: var(--orange-soft); color: var(--orange-ink); }

@media (max-width: 900px) {
  .menu-mobile { display: block; }
  /* The CTAs would crowd a 40px tap target; the panel carries Pricing instead. */
  nav .right .btn-ghost { display: none; }
}

/* ============================================================= subpages */

.subhero {
  padding: 62px 0 8px; text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}
.crumb { font-size: 0.84rem; color: var(--muted); margin-bottom: 16px; }
.crumb a:hover { color: var(--orange-ink); }
.crumb span { margin: 0 6px; opacity: 0.6; }
.subhero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 16px; }
.subhero .lede {
  font-size: 1.1rem; max-width: 40rem; margin: 0 auto 26px; color: var(--body);
}
.subhero .cta-row { margin-bottom: 34px; }

/*
 * Status is stated above the fold on every page. Half of these describe things
 * that ship and half describe things that don't, and letting a reader discover
 * that halfway down would be the dishonest version of this site.
 */
.pill {
  display: inline-block; margin-bottom: 18px;
  padding: 5px 14px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.pill.ok   { color: #1f7a4d; background: #e6f7ee; border: 1px solid #b9e6cd; }
.pill.warn { color: var(--orange-ink); background: var(--orange-soft); border: 1px solid #ffd6ab; }
.pill.dev  { color: #5a5f75; background: #eef0f6; border: 1px solid #d9dde9; }

.status-note {
  max-width: 44rem; margin: 0 auto 34px; padding: 16px 20px;
  text-align: left; font-size: 0.95rem;
  background: var(--cream-deep); border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0; color: var(--body);
}
.status-note strong { color: var(--ink); }

/* ---- screenshots ---- */

/* width:100% — a flex figure otherwise shrink-wraps and sits left of centre. */
.shot { margin: 0; width: 100%; display: flex; justify-content: center; }
.shot img { display: block; max-width: 100%; height: auto; }
.shot.is-phone img {
  width: 300px; border-radius: 26px;
  box-shadow: 0 24px 54px rgba(28, 37, 41, 0.22);
}
.shot.is-console img {
  width: 100%; max-width: 660px; border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 54px rgba(28, 37, 41, 0.16);
}
.shot.hero-shot { margin-top: 8px; transform: translateY(28px); }
.shot.hero-shot.is-phone img { width: 280px; }
.shot.hero-shot.is-console img { max-width: 860px; }

/* ---- built-in email ---- */

/*
 * The mail page needs to make one product idea visible before it explains it:
 * this is a rugged radio and a real inbox on the same issued device. The mockup
 * is HTML rather than a screenshot so the address and message subjects stay
 * legible at every density, and so a narrow screen can recompose it instead of
 * shrinking one large bitmap into unreadability.
 */
.mail-hero-art {
  position: relative; width: min(100%, 920px); height: 620px;
  margin: 12px auto 0; overflow: hidden; text-align: left;
  border-radius: 30px;
  background:
    radial-gradient(560px 360px at 52% 44%, rgba(255, 122, 0, 0.22), transparent 68%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(155deg, #171a21, #0d0f14 62%, #1b120c);
  background-size: auto, 42px 42px, 42px 42px, auto;
  box-shadow: 0 30px 70px rgba(28, 37, 41, 0.18);
}
.mail-hero-art::before {
  content: "ONE DEVICE"; position: absolute; top: 34px; right: 42px;
  font-size: clamp(2.7rem, 7vw, 5.8rem); line-height: 0.9; font-weight: 700;
  letter-spacing: -0.06em; color: rgba(255,255,255,0.035);
}
.mail-hero-art::after {
  content: ""; position: absolute; left: -90px; bottom: -140px;
  width: 360px; height: 360px; border-radius: 50%;
  border: 56px solid rgba(255, 122, 0, 0.055);
}
.mail-radio {
  position: absolute; z-index: 3; left: 50%; top: 58px;
  width: 286px; height: 528px; transform: translateX(-50%);
  border: 5px solid #333740; border-radius: 32px 32px 44px 44px;
  background: linear-gradient(145deg, #262a32, #15181e 62%, #0d0f13);
  box-shadow: 0 34px 55px rgba(0,0,0,0.48), inset 1px 1px 1px rgba(255,255,255,0.08);
}
.mail-radio::before {
  content: "PUSH.TT"; position: absolute; left: 0; right: 0; top: 22px;
  text-align: center; color: #9298a2; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.18em;
}
.mail-radio-aerial {
  position: absolute; left: 27px; top: -73px; width: 21px; height: 76px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(90deg, #111318, #353942 48%, #0d0f13);
  box-shadow: inset 3px 0 4px rgba(255,255,255,0.04);
}
.mail-radio-knob {
  position: absolute; top: -25px; width: 35px; height: 28px;
  border-radius: 7px 7px 3px 3px;
  background: repeating-linear-gradient(90deg, #15171c 0 4px, #2e3239 4px 7px);
  border-bottom: 4px solid #090a0d;
}
.mail-radio-knob.one { right: 24px; }
.mail-radio-knob.two { right: 72px; width: 27px; }
.mail-radio-ptt {
  position: absolute; left: -13px; top: 112px; width: 10px; height: 86px;
  border-radius: 7px 0 0 7px; background: var(--orange);
  box-shadow: -3px 0 10px rgba(255,122,0,0.3);
}
.mail-radio-ptt::after {
  content: "PTT"; position: absolute; left: -14px; top: 34px;
  transform: rotate(-90deg); font-size: 0.46rem; font-weight: 700;
  letter-spacing: 0.1em; color: #ffc387;
}
.mail-radio-screen {
  position: absolute; left: 21px; right: 21px; top: 45px; height: 416px;
  overflow: hidden; border: 2px solid #050609; border-radius: 18px;
  background: #f7f6f3; color: #20252b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 2px #3b3f47;
  font-family: Poppins, sans-serif;
}
.mail-status {
  height: 20px; padding: 5px 10px 0; display: flex; justify-content: space-between;
  background: #11141a; color: #bfc4cc; font-size: 0.45rem; letter-spacing: 0.06em;
}
.mail-appbar {
  height: 51px; padding: 8px 10px; display: flex; align-items: center; gap: 9px;
  background: #171a20; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mail-appbar > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.mail-appbar strong { font-size: 0.72rem; line-height: 1.25; }
.mail-appbar small {
  overflow: hidden; color: #8f96a1; font-size: 0.42rem; white-space: nowrap;
  text-overflow: ellipsis;
}
.mail-menu { color: #aab0b9; font-size: 0.8rem; }
.mail-compose {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--orange); color: #fff; font-size: 0.9rem;
}
.mail-honesty {
  padding: 5px 8px; text-align: center; background: #fff3e6; color: #9a4a08;
  border-bottom: 1px solid #f4d7b9; font-size: 0.43rem; font-weight: 600;
}
.mail-message {
  min-height: 76px; padding: 10px 8px; display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto; gap: 8px;
  border-bottom: 1px solid #e5e2dc; background: #fff;
}
.mail-message.unread { background: #fff9f2; }
.mail-message > span { min-width: 0; display: flex; flex-direction: column; }
.mail-message strong, .mail-message em, .mail-message small {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mail-message strong { color: #20252b; font-size: 0.58rem; line-height: 1.3; }
.mail-message.unread strong, .mail-message.unread em { color: #b64c05; }
.mail-message em { color: #333941; font-size: 0.5rem; font-style: normal; font-weight: 600; }
.mail-message small { color: #8a9199; font-size: 0.45rem; margin-top: 2px; }
.mail-message time { color: #9198a0; font-size: 0.43rem; }
.mail-avatar {
  width: 29px; height: 29px; display: grid; place-items: center;
  border-radius: 50%; background: #ffe0be; color: #a94504;
  font-size: 0.6rem; font-style: normal;
}
.mail-avatar.blue { background: #dce8ff; color: #315ca7; }
.mail-avatar.green { background: #dff5e8; color: #278055; }
.mail-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50px;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  background: #171a20; color: #7f8792; border-top: 1px solid #0b0d10;
}
.mail-tabs span { display: grid; justify-items: center; gap: 1px; font-size: 0.56rem; }
.mail-tabs span.active { color: #ff9a2b; }
.mail-tabs small { font-size: 0.39rem; }
.mail-radio-speaker {
  position: absolute; left: 86px; right: 86px; bottom: 25px;
  display: flex; justify-content: space-between;
}
.mail-radio-speaker i { width: 4px; height: 20px; border-radius: 3px; background: #090b0e; }
.mail-identity-card, .mail-included-card {
  position: absolute; z-index: 4; padding: 20px 22px; border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.mail-identity-card {
  left: 42px; top: 92px; width: 265px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.09); color: #fff;
}
.mail-id-label { display: block; margin-bottom: 17px; color: #ffad5f; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.15em; }
.mail-identity-card strong { display: block; font-size: 1rem; }
.mail-identity-card > span:not(.mail-id-label) { display: block; color: #aeb4bd; font-size: 0.7rem; word-break: break-all; }
.mail-identity-card i { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: #dce1e7; font-size: 0.62rem; font-style: normal; }
.mail-identity-card i b { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(61,214,140,0.13); }
.mail-included-card {
  right: 40px; bottom: 72px; width: 215px;
  border: 1px solid #f3d3b2; background: rgba(255,248,240,0.95); color: var(--ink);
}
.mail-included-card > span { display: block; color: var(--body); font-size: 0.61rem; }
.mail-included-card > strong { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 1.15rem; }
.mail-included-card i { font-style: normal; color: var(--orange-ink); }

.mail-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.mail-steps article {
  min-height: 184px; padding: 24px; display: flex; flex-direction: column; gap: 22px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
}
.mail-steps article > b {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); font-size: 0.9rem;
}
.mail-steps article span { display: flex; flex-direction: column; gap: 7px; }
.mail-steps article strong { color: var(--ink); font-size: 0.98rem; }
.mail-steps article small { color: var(--body); font-size: 0.82rem; line-height: 1.55; }

/* The home-page feature uses the same radio so the landing page and detail
   page cannot drift into showing two different products. */
.mail-home { position: relative; overflow: hidden; }
.mail-home::before {
  content: ""; position: absolute; right: -160px; top: 30px;
  width: 430px; height: 430px; border-radius: 50%;
  background: var(--orange-soft); opacity: 0.75;
}
.mail-home-grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.mail-home-copy .sub { margin-bottom: 25px; }
.mail-home-points { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; margin: 24px 0 30px; }
.mail-home-points span { display: flex; gap: 8px; color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.mail-home-points b { color: var(--orange); }
.mail-home-visual {
  position: relative; height: 510px; overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 36%, rgba(255,122,0,0.22), transparent 38%), linear-gradient(150deg, #171a21, #0d0f14);
}
.mail-home-visual .mail-radio { top: 40px; transform: translateX(-50%) scale(0.86); transform-origin: top center; }
.mail-home-domain {
  position: absolute; z-index: 5; right: 26px; top: 34px; padding: 12px 15px;
  border-radius: 12px; background: rgba(255,255,255,0.94); box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.mail-home-domain span { display: block; color: var(--muted); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; }
.mail-home-domain strong { color: var(--ink); font-size: 0.72rem; }

@media (max-width: 860px) {
  .mail-hero-art { height: 650px; }
  .mail-identity-card { left: 22px; top: 38px; }
  .mail-included-card { right: 22px; bottom: 32px; }
  .mail-radio { top: 92px; }
  .mail-home-grid { grid-template-columns: 1fr; gap: 40px; }
  .mail-home-copy { max-width: 38rem; }
  .mail-home-visual { width: 100%; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .mail-hero-art { height: 660px; border-radius: 20px; }
  .mail-hero-art::before { top: 24px; right: 18px; font-size: 3rem; }
  .mail-radio { top: 112px; transform: translateX(-50%) scale(0.82); transform-origin: top center; }
  .mail-identity-card { left: 14px; right: 14px; top: 20px; width: auto; padding: 14px 16px; }
  .mail-id-label { margin-bottom: 6px; }
  .mail-identity-card i { margin-top: 8px; }
  .mail-included-card { right: 14px; bottom: 18px; width: 192px; padding: 13px 15px; }
  .mail-steps { grid-template-columns: 1fr; }
  .mail-steps article { min-height: 0; flex-direction: row; }
  .mail-home-points { grid-template-columns: 1fr; }
  .mail-home-visual { height: 470px; }
  .mail-home-visual .mail-radio { top: 28px; transform: translateX(-50%) scale(0.78); }
  .mail-home-domain { top: 18px; right: 14px; }
}

/* ---- two handsets talking (radio-replacement hero) ---- */

/*
 * One shared 11-second clock drives the whole scene.
 *
 * Every gated element animates with the SAME duration and NO animation-delay,
 * and each state's window is encoded in its keyframe percentages instead. That
 * is the only thing keeping the transmitting ring, the receiving ring, the four
 * captions and the packet flow in step without a line of JavaScript — reach for
 * animation-delay to stagger any of them and the whole thing drifts apart.
 *
 * The travelling dots do need a stagger, so they run their own short loop and
 * are gated by a PARENT that fades on the shared clock. Independent inside,
 * synchronised outside.
 */
.talkflow {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  margin-top: 22px;
}
.talkflow .phone { width: 208px; }
.tf-unit { margin: 0; text-align: center; }
.tf-unit figcaption { margin-top: 14px; font-size: 0.79rem; color: var(--muted); }
.tf-note {
  text-align: center; font-size: 0.86rem; color: var(--muted);
  margin: 18px auto 0; max-width: 30rem; transform: translateY(0);
}

.tf-ring {
  margin: auto; width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 44%, #1a1e25, #0e1116);
}
.tf-ring > svg { width: 34px; height: 34px; position: relative; z-index: 2; }

/* Three stacked ring layers; exactly one is ever at opacity 1. */
.tf-ring .rg {
  position: absolute; inset: 0; border-radius: 50%; padding: 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tf-ring .rg-idle { background: #2b313a; }
.tf-ring .rg-tx { padding: 7px; background: var(--grad); }
.tf-ring .rg-rx { background: linear-gradient(135deg, #7fe9f0, #2fd4de 60%, #1ba7b0); }

.tf-ring .cap {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em;
  color: #d9dbdf; white-space: nowrap;
}
.tf-ring .c-tx { color: #ffb04a; }
.tf-ring .c-rx { color: #2fd4de; }

/* Transmit pulse. Own loop; the wrapper is what the shared clock switches. */
.tf-pulse { position: absolute; inset: 0; }
.tf-pulse i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 138, 0, 0.5);
  animation: tf-pulse 1.8s ease-out infinite;
}
.tf-pulse i:nth-child(2) { animation-delay: 0.9s; }
@keyframes tf-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---- the link between them ---- */

.tf-link {
  position: relative; flex: 1 1 auto; max-width: 180px; min-width: 76px;
  align-self: center; height: 40px; margin-bottom: 34px;
}
.tf-line {
  position: absolute; left: 0; right: 0; top: 19px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--line) 16%, var(--line) 84%, transparent);
}
.tf-flow { position: absolute; left: 6px; right: 6px; top: 19px; height: 2px; }
.tf-flow i {
  position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.16);
  animation: tf-drift 1.5s linear infinite;
}
/*
 * Same orange both ways. Orange means "someone is transmitting" everywhere else
 * in the product, and the packets in flight ARE the transmission — colouring
 * the return leg cyan made the audio change meaning halfway across the gap.
 */
.tf-flow.rev i { animation-name: tf-drift-rev; }
.tf-flow i:nth-child(2) { animation-delay: 0.375s; }
.tf-flow i:nth-child(3) { animation-delay: 0.75s; }
.tf-flow i:nth-child(4) { animation-delay: 1.125s; }
@keyframes tf-drift {
  0%   { left: 0;    opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes tf-drift-rev {
  0%   { left: 100%; opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { left: 0;    opacity: 0; }
}
/* Sits on the line and masks it, so packets pass behind the seal. */
.tf-seal {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 2px 9px; border-radius: 100px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: var(--orange-ink);
}

/* ---- the shared clock ---- */

.talkflow .rg, .talkflow .cap, .talkflow .tf-pulse, .talkflow .tf-flow {
  opacity: 0;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}
/* Paired stops (3%/5%) switch cleanly instead of cross-fading through a state
   where both rings are half-lit and the handset reads as neither. */
@keyframes tf-phase1 {
  0%, 3%    { opacity: 0; }
  5%, 41%   { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes tf-phase2 {
  0%, 50%   { opacity: 0; }
  52%, 88%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes tf-idle {
  0%, 3%    { opacity: 1; }
  5%, 41%   { opacity: 0; }
  43%, 50%  { opacity: 1; }
  52%, 88%  { opacity: 0; }
  90%, 100% { opacity: 1; }
}
.tf-a .rg-tx, .tf-a .c-tx, .tf-a .tf-pulse,
.tf-b .rg-rx, .tf-b .c-rx,
.talkflow .tf-flow.fwd { animation-name: tf-phase1; }

.tf-b .rg-tx, .tf-b .c-tx, .tf-b .tf-pulse,
.tf-a .rg-rx, .tf-a .c-rx,
.talkflow .tf-flow.rev { animation-name: tf-phase2; }

.talkflow .rg-idle, .talkflow .c-idle { animation-name: tf-idle; }

@media (max-width: 860px) {
  .talkflow .phone { width: 176px; }
  .tf-ring { width: 116px; height: 116px; }
  .tf-ring > svg { width: 29px; height: 29px; }
  /* The longest caption is "<NAME> IS TALKING" — at the full size it clears the
     ring, at this one it broke out of it on both sides. */
  .tf-ring .cap { bottom: 20px; font-size: 0.44rem; letter-spacing: 0.07em; }
}
@media (max-width: 640px) {
  .talkflow { gap: 3px; }
  .talkflow .phone { width: 136px; padding: 6px; }
  .talkflow .phone .screen { border-radius: 20px; padding: 10px 8px 8px; }
  .tf-ring { width: 92px; height: 92px; }
  .tf-ring > svg { width: 23px; height: 23px; }
  .tf-ring .cap { bottom: 14px; font-size: 0.4rem; letter-spacing: 0.05em; }
  .tf-link { max-width: 60px; min-width: 34px; margin-bottom: 26px; }
  .tf-seal { display: none; }
  .tf-flow i { width: 6px; height: 6px; top: -2px; }
  .tf-unit figcaption { font-size: 0.68rem; }
}

/*
 * Reduced motion freezes it on the representative frame — left transmitting,
 * right receiving — rather than dropping to a dead pair of idle handsets, which
 * would show none of what the picture is here to show.
 */
@media (prefers-reduced-motion: reduce) {
  .talkflow *, .talkflow *::before { animation: none !important; }
  .tf-a .rg-tx, .tf-a .c-tx, .tf-b .rg-rx, .tf-b .c-rx { opacity: 1; }
  .talkflow .rg-idle, .talkflow .c-idle,
  .tf-a .rg-rx, .tf-a .c-rx, .tf-b .rg-tx, .tf-b .c-tx,
  .talkflow .tf-flow, .talkflow .tf-pulse { opacity: 0; }
}

/* ---- error pages ---- */

/*
 * Deliberately spare. These carry the mark, the code, one honest sentence and a
 * way out — no mega-menu, no six-column footer, nothing to wander into while
 * something is broken. The 5xx pages in particular are served exactly when part
 * of the stack has already failed, so the fewer moving parts, the better.
 */
.err-body { display: flex; flex-direction: column; min-height: 100vh; }
.err-bar { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.err-bar .brand { display: inline-flex; align-items: center; gap: 10px; }
.err-bar .mark { width: 28px; }
.err-bar .wordmark { font-size: 1.16rem; }

.err {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 56px 24px 72px; max-width: 40rem; margin: 0 auto;
}
.err-ring { width: 172px; height: 172px; margin-bottom: 30px; }
.err h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 14px; }
.err .lede { font-size: 1.06rem; color: var(--body); }

.err-note {
  margin-top: 24px; padding: 15px 18px; max-width: 34rem;
  font-size: 0.9rem; text-align: left;
  background: var(--cream); border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0; color: var(--body);
}
.err .cta-row { margin-top: 32px; }

.err-links {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-size: 0.9rem; width: 100%; max-width: 34rem;
}
.err-links a:hover { color: var(--orange-ink); }
.err-foot {
  padding: 0 24px 28px; text-align: center; font-size: 0.82rem; color: var(--muted);
}

@media (max-width: 600px) {
  .err { padding: 40px 22px 56px; }
  .err-ring { width: 138px; height: 138px; margin-bottom: 24px; }
}

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

.sec-row { padding: 78px 0; }
.sec-row:nth-child(even) { background: var(--cream); }
.sec-row .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sec-row.flip .col { order: 2; }
.sec-plain { padding: 68px 0; }
.sec-plain .wrap { max-width: 46rem; }

.sec-row h2, .sec-plain h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin-bottom: 14px; }
.sec-row .col > p, .sec-plain .col > p { font-size: 1.02rem; }
.sec-row ul, .sec-plain ul { list-style: none; margin-top: 20px; display: grid; gap: 11px; }
.sec-row li, .sec-plain li { display: flex; gap: 10px; font-size: 0.95rem; align-items: flex-start; }
.sec-row li svg, .sec-plain li svg {
  width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 5px;
}

.inline-note {
  margin-top: 20px; padding: 13px 16px; font-size: 0.9rem;
  background: var(--orange-soft); border-radius: 10px; color: var(--orange-ink);
}
.sec-row:nth-child(even) .inline-note { background: #fff; }

/* ---- full-width blocks (contact cards, address, whitelabel swatches) ---- */

/*
 * A third section shape, beside the two-column row and the narrow prose block.
 * The grids these hold — three contact cards, three swatches — are unreadable
 * squeezed into half a row, and centring them in the prose column wastes the
 * page. Alternation is kept in step with .sec-row so the cream/white rhythm
 * does not break where the shapes are mixed on one page.
 */
.sec-wide { padding: 78px 0; }
.sec-wide:nth-child(even) { background: var(--cream); }
.sec-wide h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin-bottom: 14px; }
.sec-wide > .wrap > p { font-size: 1.02rem; max-width: 46rem; }
.sec-wide > .wrap > ul { list-style: none; margin-top: 20px; display: grid; gap: 11px; max-width: 46rem; }
.sec-wide li { display: flex; gap: 10px; font-size: 0.95rem; align-items: flex-start; }
.sec-wide li svg { width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 5px; }
.sec-wide .grid3, .sec-wide .wl, .sec-wide .addr-grid { margin-top: 34px; }
.sec-wide .inline-note { max-width: 46rem; }
.sec-wide:nth-child(even) .inline-note { background: #fff; }

/* An inline link inside body copy or a card — the global `a` is colour: inherit. */
.lnk { color: var(--orange-ink); font-weight: 600; }
.lnk:hover { text-decoration: underline; }
.contact-grid .tile p + p { margin-top: 12px; }

.addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.addr-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.addr-card .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-ink); margin-bottom: 14px;
}
.addr-card .ico svg { width: 19px; height: 19px; }
.addr-card h4 { font-size: 0.98rem; margin-bottom: 8px; }
.addr-card address { font-style: normal; font-size: 0.93rem; line-height: 1.7; }
.addr-card p { font-size: 0.93rem; }

@media (max-width: 980px) { .addr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .addr-grid { grid-template-columns: 1fr; }
  .sec-wide { padding: 52px 0; }
}

@media (max-width: 980px) {
  .sec-row .row2 { grid-template-columns: 1fr; gap: 36px; }
  .sec-row.flip .col { order: 0; }
}
@media (max-width: 700px) {
  .sec-row, .sec-plain { padding: 52px 0; }
  .subhero { padding-top: 40px; }
  .shot.hero-shot { transform: translateY(18px); }
}

/* ---- contact form ---- */

/*
 * Lives on the contact page. The <form> has a real action and method, so if
 * contact.js fails to load the browser still posts it — a JS-only form that
 * silently does nothing is the failure nobody notices until a lead is lost.
 */
.cform { margin-top: 34px; text-align: left; }
.cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: block; }
.cform label > span {
  display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.cform label > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.cform input, .cform select, .cform textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
}
.cform textarea { resize: vertical; min-height: 130px; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft);
}
.cform-msg { margin-top: 16px; }

/* Off-screen rather than display:none — a bot reading the DOM still finds it,
   which is the point, while nobody using the page ever does. */
.cform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.cform-status { font-size: 0.9rem; margin: 0; }
.cform-status.is-ok { color: #1f7a4d; }
.cform-status.is-err { color: #c0392b; }

@media (max-width: 640px) { .cform-grid { grid-template-columns: 1fr; } }

/* ---- pricing page ---- */

.pricing-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 34px;
  background: var(--cream-deep); border-radius: 100px;
}
.pricing-toggle button {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  padding: 9px 20px; border: none; border-radius: 100px;
  background: transparent; color: var(--body);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}
.pricing-toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(28, 37, 41, 0.1); }
.pricing-toggle button em {
  font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 100px;
  background: var(--orange-soft); color: var(--orange-ink);
}
.pricing-toggle button.on em { background: var(--orange); color: #fff; }

/* Reserves the line so switching term does not jog the cards up and down. */
.term-note { min-height: 1.4em; margin-top: 6px; font-size: 0.84rem; color: var(--muted); }

/* The saving is only true on the annual view; showing it on monthly would be
   claiming a discount the customer is not getting. */
.pricing-page .plan .price { transition: none; }

/* An in-development marker inside a section heading, so the status sits with
   the claim rather than in a footnote below it. */
.sec-row h2 .tag, .sec-plain h2 .tag, .sec-wide h2 .tag {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 100px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: 4px; color: #5a5f75; background: #eef0f6; white-space: nowrap;
}

/* ================================================================ dispatchflow
 *
 * The dispatch hero: a console position and a driver's handset running one
 * exchange. See apps/site/tools/dispatchflow.mjs for the scenario and the
 * timeline; this file holds the clock.
 *
 * ONE SHARED CLOCK. Every gated element uses `var(--dfc)` and NO
 * animation-delay — each state's window lives in its keyframe percentages
 * instead. That is the only thing holding the bar tint, four talker names, the
 * meter, the talk button, the channel dot, three log rows and four handset
 * captions in step without a line of JavaScript. Stagger any of them with
 * animation-delay and the scene drifts apart within one loop.
 *
 * Windows, matching the module's header:
 *   idle 0-16 · rx1 18-39 · idle 41-46 · tx 48-69 · rx2 71-82 · idle 84-100
 * The 2% ramps between them are the crossfade.
 *
 * The panel is DARK on a light page, exactly as the console is, and carries its
 * own tokens rather than the site's — this is a picture of another product's
 * surface, so it must not inherit this one's palette.
 */
.dispatchflow {
  --dfc: 15s;
  --dfBg: #0f1115;
  --dfSurface: #171a20;
  --dfSurface2: #1e222a;
  --dfBorder: #2c3138;
  --dfText: #ffffff;
  --dfMuted: #a8aeb9;
  --dfDim: #767d8a;
  --dfLive: #22c98b;
  --dfAccent: #ff7a00;

  display: flex; align-items: flex-start; justify-content: center;
  gap: 20px; margin-top: 22px; flex-wrap: wrap;
}
.df-desk { margin: 0; flex: 1 1 560px; max-width: 720px; min-width: 0; }
.df-unit { margin: 0; text-align: center; flex: 0 0 auto; }
.dispatchflow .phone { width: 188px; }
.df-desk figcaption, .df-unit figcaption {
  margin-top: 12px; font-size: 0.79rem; color: var(--muted); text-align: center;
}
.df-note {
  text-align: center; font-size: 0.86rem; color: var(--muted);
  margin: 16px auto 0; max-width: 32rem;
}
/* ODbL. The basemap is derived from OSM, so this line ships with it. */
.df-credit { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--muted); opacity: 0.75; }

.df-panel {
  background: var(--dfBg); color: var(--dfText);
  border: 1px solid var(--dfBorder); border-radius: 12px; overflow: hidden;
  font-size: 12px; line-height: 1.35;
  box-shadow: 0 24px 60px rgba(15, 17, 21, 0.28);
}
.df-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--dfBorder);
}
.df-eyebrow { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dfDim); }
.df-h1 { font-size: 16px; font-weight: 700; }
.df-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dfLive); border: 1px solid color-mix(in srgb, var(--dfLive) 45%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.df-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--dfLive); }

/* ---- the bar: who holds the floor ---- */
.df-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--dfBorder); min-height: 52px;
  animation: df-bar var(--dfc) infinite;
}
@keyframes df-bar {
  0%, 16%   { background: var(--dfSurface); box-shadow: inset 0 -2px 0 transparent; }
  18%, 39%  { background: color-mix(in srgb, var(--dfLive) 13%, var(--dfSurface));
              box-shadow: inset 0 -2px 0 var(--dfLive); }
  41%, 46%  { background: var(--dfSurface); box-shadow: inset 0 -2px 0 transparent; }
  48%, 69%  { background: color-mix(in srgb, var(--dfAccent) 16%, var(--dfSurface));
              box-shadow: inset 0 -2px 0 var(--dfAccent); }
  71%, 82%  { background: color-mix(in srgb, var(--dfLive) 13%, var(--dfSurface));
              box-shadow: inset 0 -2px 0 var(--dfLive); }
  84%, 100% { background: var(--dfSurface); box-shadow: inset 0 -2px 0 transparent; }
}

/*
 * Every state's label is stacked in the same box and cross-faded, so switching
 * speaker never moves the layout underneath it.
 */
.df-who { display: grid; gap: 1px; min-width: 0; }
.df-talker, .df-on { display: grid; }
.df-talker { font-size: 14px; font-weight: 700; }
.df-on { font-size: 10.5px; color: var(--dfMuted); }
.df-on b { color: var(--dfText); font-weight: 600; }
.df-s { grid-area: 1 / 1; white-space: nowrap; opacity: 0; }

.df-idle { animation: df-w-idle var(--dfc) infinite; }
.df-rx1  { animation: df-w-rx1  var(--dfc) infinite; }
.df-tx   { animation: df-w-tx   var(--dfc) infinite; }
.df-rx2  { animation: df-w-rx2  var(--dfc) infinite; }

@keyframes df-w-idle {
  0%, 16% { opacity: 1 } 18%, 39% { opacity: 0 }
  41%, 46% { opacity: 1 } 48%, 82% { opacity: 0 } 84%, 100% { opacity: 1 }
}
@keyframes df-w-rx1 { 0%, 16% { opacity: 0 } 18%, 39% { opacity: 1 } 41%, 100% { opacity: 0 } }
@keyframes df-w-tx  { 0%, 46% { opacity: 0 } 48%, 69% { opacity: 1 } 71%, 100% { opacity: 0 } }
@keyframes df-w-rx2 { 0%, 69% { opacity: 0 } 71%, 82% { opacity: 1 } 84%, 100% { opacity: 0 } }

/* The talker's colour follows the floor: green for them, orange only for you. */
.df-talker .df-rx1, .df-talker .df-rx2 { color: var(--dfLive); }
.df-talker .df-tx { color: var(--dfAccent); }

/* ---- meter: flat and live stacked, cross-faded ---- */
.df-meters { position: relative; width: 42px; height: 18px; flex: none; }
.df-meter {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; gap: 2px;
}
.df-meter i { flex: 1; border-radius: 1px; background: var(--dfDim); height: 3px; }
.df-flat { animation: df-w-flat var(--dfc) infinite; }
.df-live { opacity: 0; animation: df-w-live var(--dfc) infinite; }
@keyframes df-w-flat {
  0%, 16% { opacity: 1 } 18%, 39% { opacity: 0 }
  41%, 46% { opacity: 1 } 48%, 82% { opacity: 0 } 84%, 100% { opacity: 1 }
}
@keyframes df-w-live {
  0%, 16% { opacity: 0 } 18%, 39% { opacity: 1 }
  41%, 46% { opacity: 0 } 48%, 82% { opacity: 1 } 84%, 100% { opacity: 0 }
}
/* Independent inside, synchronised outside — the bounce is its own loop, and
   only the colour rides the shared clock. */
.df-live i {
  animation: df-bounce 0.44s ease-in-out infinite alternate, df-metercol var(--dfc) infinite;
  animation-delay: var(--d), 0s;
}
@keyframes df-bounce {
  from { height: 3px }
  to   { height: calc(3px + 13px * var(--s)) }
}
@keyframes df-metercol {
  0%, 46%  { background: var(--dfLive) }
  48%, 69% { background: var(--dfAccent) }
  71%, 100%{ background: var(--dfLive) }
}

/* ---- talk control ---- */
.df-ptt { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.df-target { display: grid; gap: 1px; text-align: right; }
.df-target .l { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dfDim); }
.df-target .v { font-size: 11px; font-weight: 700; }
.df-talk {
  height: 32px; min-width: 124px; display: grid; place-items: center;
  border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #12151b;
  background: linear-gradient(135deg, #ffb04a, #ff7a00 60%, #e86a00);
  animation: df-talk var(--dfc) infinite;
}
/* Keyed is FLAT accent with a halo, never the gradient — the gradient is the
   resting state and the difference is what tells you the floor is yours. */
@keyframes df-talk {
  0%, 46%   { background: linear-gradient(135deg, #ffb04a, #ff7a00 60%, #e86a00);
              box-shadow: none; }
  48%, 69%  { background: var(--dfAccent);
              box-shadow: 0 0 0 3px color-mix(in srgb, var(--dfAccent) 35%, transparent); }
  71%, 100% { background: linear-gradient(135deg, #ffb04a, #ff7a00 60%, #e86a00);
              box-shadow: none; }
}
.df-key {
  font-size: 9px; letter-spacing: 0.08em; color: var(--dfDim);
  border: 1px solid var(--dfBorder); border-radius: 4px; padding: 3px 6px;
}

/* ---- body: rail, map, log ---- */
.df-body { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; }
.df-rail, .df-side { background: var(--dfSurface); min-width: 0; }
.df-rail { border-right: 1px solid var(--dfBorder); }
.df-side { border-left: 1px solid var(--dfBorder); }
.df-railhead {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--dfBorder);
  font-size: 8.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dfDim);
}
.df-chan {
  display: block; padding: 7px 10px; border-left: 3px solid transparent; color: var(--dfMuted);
}
.df-chan.on { border-left-color: var(--dfLive); background: color-mix(in srgb, var(--dfLive) 9%, transparent); color: var(--dfText); }
.df-chan.sel { border-left-color: var(--dfAccent); background: color-mix(in srgb, var(--dfAccent) 11%, transparent); color: var(--dfText); }
.df-chan .n { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; }
.df-chan .s { display: block; font-size: 9.5px; color: var(--dfDim); margin-top: 1px; }
.df-chan.on .s { color: var(--dfLive); }
.df-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dfDim); flex: none; }
.df-chan.on .df-dot { background: var(--dfLive); }
/* The selected channel's dot brightens while somebody is actually on it. */
.df-chan.sel .df-dot { animation: df-livedot var(--dfc) infinite; }
@keyframes df-livedot {
  0%, 16%   { box-shadow: none }
  18%, 39%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dfLive) 30%, transparent) }
  41%, 70%  { box-shadow: none }
  71%, 82%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dfLive) 30%, transparent) }
  84%, 100% { box-shadow: none }
}

.df-map { position: relative; min-height: 210px; background: var(--dfBg); overflow: hidden; }
/*
 * A real street map, not a grid — OpenStreetMap geometry for the port district,
 * extracted once by build-basemap.mjs and COMMITTED. One same-origin file, no
 * tile server, no third-party request from a page about a product that cannot
 * read your traffic. The credit under the animation is an ODbL requirement, not
 * decoration.
 */
.df-map::before {
  content: ""; position: absolute; inset: 0;
  background: url("img/basemap-port.svg") center / cover no-repeat;
  opacity: 1;
}
.df-pin {
  position: absolute; display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; color: var(--dfMuted); white-space: nowrap; transform: translate(-4px, -50%);
}
.df-pin i { width: 7px; height: 7px; border-radius: 50%; background: var(--dfAccent); flex: none; }
.df-moving { animation: df-drive var(--dfc) linear infinite; }
/* One unit moves, and it is the one talking. A fleet where every pin drifts
   reads as a screensaver rather than a map. */
/* Van 12 follows a road on the basemap — the four stops are points on the same
   route, so it tracks the street instead of cutting across blocks. */
@keyframes df-drive {
  0%   { left: 22.5%; top: 79.0% }
  35%  { left: 29.0%; top: 74.5% }
  70%  { left: 33.5%; top: 69.5% }
  100% { left: 38.5%; top: 64.0% }
}
.df-scale {
  position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--dfDim);
}
.df-scale em { display: block; width: 54px; height: 1px; background: var(--dfDim); }

/* ---- the log ---- */
.df-entry {
  display: block; padding: 8px 10px; border-bottom: 1px solid var(--dfBorder);
  opacity: 0; transform: translateY(-4px);
}
/* Each row lands as its transmission ENDS, which is when the transcript
   actually exists — the sending device transcribes, so there is nothing to
   show until the speaker lets go. */
.df-e1 { animation: df-row1 var(--dfc) infinite; }
.df-e2 { animation: df-row2 var(--dfc) infinite; }
.df-e3 { animation: df-row3 var(--dfc) infinite; }
@keyframes df-row1 {
  0%, 38%  { opacity: 0; transform: translateY(-4px) }
  41%, 96% { opacity: 1; transform: translateY(0) }
  100%     { opacity: 0; transform: translateY(-4px) }
}
@keyframes df-row2 {
  0%, 68%  { opacity: 0; transform: translateY(-4px) }
  71%, 96% { opacity: 1; transform: translateY(0) }
  100%     { opacity: 0; transform: translateY(-4px) }
}
@keyframes df-row3 {
  0%, 81%  { opacity: 0; transform: translateY(-4px) }
  84%, 96% { opacity: 1; transform: translateY(0) }
  100%     { opacity: 0; transform: translateY(-4px) }
}
.df-eh { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; }
.df-eh b { margin-left: auto; font-weight: 400; font-size: 9px; color: var(--dfDim); }
.df-eb { display: block; margin-top: 3px; font-size: 10.5px; color: var(--dfMuted); }
.df-k { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--dfDim); }
.df-k-voice {
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(var(--dfMuted) 0 60%, transparent 60%);
}

/* ---- the handset ---- */
.df-ring {
  margin: auto; width: 126px; height: 126px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 44%, #1a1e25, #0e1116);
}
.df-ring > svg { width: 30px; height: 30px; position: relative; z-index: 2; }
.df-ring .rg {
  position: absolute; inset: 0; border-radius: 50%; padding: 5px; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.df-ring .rg-idle { background: #2b313a; animation: df-w-idle var(--dfc) infinite; }
.df-ring .rg-tx { padding: 7px; background: var(--grad); animation: df-w-rx1 var(--dfc) infinite; }
.df-ring .rg-rx { background: linear-gradient(135deg, #6cf0b6, #22c98b 60%, #14a06d);
                  animation: df-w-heard var(--dfc) infinite; }
/*
 * The handset is PRIYA'S, so the states are inverted against the console's:
 * her transmission (rx1 on the desk) is her ring going orange, and both other
 * speakers are her ring going green. Getting this backwards is the mistake that
 * makes the two halves look like two unrelated animations.
 */
@keyframes df-w-heard {
  0%, 46%  { opacity: 0 } 48%, 69% { opacity: 1 }
  71%, 82% { opacity: 1 } 84%, 100% { opacity: 0 }
}
.df-ring .cap {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 0.46rem; font-weight: 700; letter-spacing: 0.11em;
  color: #d9dbdf; white-space: nowrap; opacity: 0;
}
.df-ring .c-idle { animation: df-w-idle var(--dfc) infinite; }
.df-ring .c-tx   { color: #ffb04a; animation: df-w-rx1 var(--dfc) infinite; }
.df-ring .c-rx1  { color: #6cf0b6; animation: df-w-tx  var(--dfc) infinite; }
.df-ring .c-rx2  { color: #6cf0b6; animation: df-w-rx2 var(--dfc) infinite; }

.df-pulse { position: absolute; inset: 0; opacity: 0; animation: df-w-rx1 var(--dfc) infinite; }
.df-pulse i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 138, 0, 0.5);
  animation: df-pulse 1.8s ease-out infinite;
}
.df-pulse i:nth-child(2) { animation-delay: 0.9s; }
@keyframes df-pulse {
  0%   { transform: scale(1);    opacity: 0.7 }
  100% { transform: scale(1.55); opacity: 0 }
}

@media (max-width: 720px) {
  .df-body { grid-template-columns: 122px minmax(0, 1fr); }
  .df-side { display: none; }
  .df-target { display: none; }
}

/* ========================================================= Dispatch solution */

.dispatch-body {
  background: #fffaf4;
  color: var(--ink);
}
.dispatch-page { overflow: clip; }
.dispatch-eyebrow {
  display: inline-block; margin-bottom: 14px;
  color: var(--orange); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.dispatch-hero {
  position: relative; padding: 78px 0 90px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,151,54,0.16), transparent 38%),
    linear-gradient(180deg, #fff8ee 0%, #fffaf4 68%, #fff 100%);
}
.dispatch-hero__glow {
  position: absolute; left: 50%; top: 230px; width: 760px; height: 520px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: rgba(255,122,0,0.11); filter: blur(100px);
}
.dispatch-hero__copy {
  position: relative; z-index: 1; max-width: 930px; text-align: center;
}
.dispatch-hero__copy .crumb { justify-content: center; margin-bottom: 18px; }
.dispatch-hero__copy .pill { margin-bottom: 18px; }
.dispatch-hero__copy h1 {
  max-width: 900px; margin-inline: auto;
  font-size: clamp(3.2rem, 7vw, 6.6rem); line-height: 0.94; letter-spacing: -0.065em;
}
.dispatch-hero__copy .lede {
  max-width: 720px; margin: 26px auto 0;
  color: #565d65; font-size: clamp(1.05rem, 1.8vw, 1.34rem); line-height: 1.6;
}
.dispatch-hero__copy .cta-row { justify-content: center; margin-top: 30px; }
.dispatch-hero__product {
  position: relative; z-index: 1; max-width: 1320px; margin-top: 66px;
}

.dispatch-capture { position: relative; margin: 0; min-width: 0; }
.dispatch-capture__shell {
  overflow: hidden; border: 1px solid #2b2f36; border-radius: 24px;
  background: #0c0e12;
  box-shadow: 0 36px 90px rgba(25,28,33,0.24), 0 2px 0 rgba(255,255,255,0.08) inset;
}
.dispatch-capture__bar {
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
  border-bottom: 1px solid #2a2e35; background: #16191e;
}
.dispatch-capture__bar i { width: 8px; height: 8px; border-radius: 50%; background: #414750; }
.dispatch-capture__bar i:first-child { background: #ff7a00; }
.dispatch-capture__bar span {
  margin-left: 8px; color: #8f969f; font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.04em;
}
.dispatch-capture__viewport {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0c0e12;
}
.dispatch-capture__viewport img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transform: scale(1); transform-origin: center;
}
.dispatch-capture figcaption {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 13px;
  color: #59616a; font-size: 0.69rem; font-weight: 650;
}
.dispatch-capture figcaption span {
  color: #8b929a; font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase;
}
.dispatch-capture.is-overview .dispatch-capture__viewport img { object-fit: contain; }
.dispatch-capture.is-channels .dispatch-capture__viewport img {
  transform: scale(1.62); transform-origin: 31% 22%;
}
.dispatch-capture.is-map .dispatch-capture__viewport img {
  transform: scale(1.65); transform-origin: 50% 47%;
}
.dispatch-capture.is-log .dispatch-capture__viewport img {
  transform: scale(1.75); transform-origin: 86% 22%;
}

.dispatch-hero__facts {
  position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(980px, calc(100% - 48px)); margin: -34px auto 0;
  border: 1px solid #e3ddd4; border-radius: 18px; background: rgba(255,255,255,0.96);
  box-shadow: 0 20px 50px rgba(36,31,27,0.13); backdrop-filter: blur(12px);
}
.dispatch-hero__facts span {
  display: flex; min-height: 78px; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; color: #777d84; font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dispatch-hero__facts span + span { border-left: 1px solid #ece7df; }
.dispatch-hero__facts strong {
  margin-bottom: 4px; color: #1c2529; font-size: 1.2rem; letter-spacing: -0.02em; text-transform: none;
}
.dispatch-status {
  max-width: 980px; margin: 36px auto 0; padding: 15px 20px;
  border: 1px solid #ead7bf; border-radius: 13px; background: #fff4e7;
  color: #685d52; font-size: 0.82rem; line-height: 1.55; text-align: center;
}
.dispatch-status strong { color: #b95c00; }

.dispatch-overview { padding: 108px 0 86px; background: #fff; }
.dispatch-overview__intro { max-width: 800px; margin: 0 auto 52px; text-align: center; }
.dispatch-overview__intro h2,
.dispatch-feature h2,
.dispatch-limits h2 {
  font-size: clamp(2.3rem, 4.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.048em;
}
.dispatch-overview__intro p {
  max-width: 680px; margin: 20px auto 0; color: #666d75; font-size: 1.02rem; line-height: 1.72;
}
.dispatch-capability-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.dispatch-capability-grid article {
  min-height: 220px; padding: 27px 25px;
  border: 1px solid #ece7df; border-radius: 18px; background: #fffaf4;
}
.dispatch-capability-grid article > span {
  display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 38px;
  border-radius: 50%; background: #ffead5; color: #b85c00;
  font: 750 0.66rem/1 var(--mono);
}
.dispatch-capability-grid h3 { margin-bottom: 10px; font-size: 1.12rem; }
.dispatch-capability-grid p { color: #6b7279; font-size: 0.83rem; line-height: 1.58; }
.dispatch-proof {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: 950px; margin: 52px auto 0;
  border-top: 1px solid #e6e1da; border-bottom: 1px solid #e6e1da;
}
.dispatch-proof a { display: flex; align-items: center; gap: 13px; padding: 17px 20px; color: #3d454c; }
.dispatch-proof a + a { border-left: 1px solid #e6e1da; }
.dispatch-proof b { color: var(--orange); font: 750 0.63rem/1 var(--mono); }
.dispatch-proof span { font-size: 0.76rem; font-weight: 700; }

.dispatch-feature { padding: 118px 0; background: #fffaf4; }
.dispatch-feature.is-flipped { background: #f2f4f2; }
.dispatch-feature__grid {
  display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 7vw, 100px); align-items: center;
}
.dispatch-feature.is-flipped .dispatch-feature__copy { order: 2; }
.dispatch-feature.is-flipped .dispatch-feature__media { order: 1; }
.dispatch-feature__copy > p {
  margin-top: 20px; color: #626a72; font-size: 0.98rem; line-height: 1.72;
}
.dispatch-feature__copy .frontline-feature-list { margin-top: 28px; }
.dispatch-feature__copy .frontline-feature-list li { border-color: rgba(28,37,41,0.12); }
.dispatch-feature__media .dispatch-capture__viewport { aspect-ratio: 1.42 / 1; }

.dispatch-limits { padding: 118px 0; background: #171a1f; color: #fff; }
.dispatch-limits__intro { max-width: 800px; }
.dispatch-limits__intro .dispatch-eyebrow { color: #ff9a3d; }
.dispatch-limits__intro h2 { color: #fff; }
.dispatch-limits__intro > p {
  max-width: 690px; margin-top: 20px; color: #aeb5bd; font-size: 1rem; line-height: 1.7;
}
.dispatch-limits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 54px; }
.dispatch-limits__grid article {
  min-height: 270px; padding: 27px;
  border: 1px solid #363b43; border-radius: 17px; background: #1d2127;
}
.dispatch-limits__grid article > span {
  display: inline-block; margin-bottom: 42px; color: #ff9230; font: 750 0.68rem/1 var(--mono);
}
.dispatch-limits__grid p { color: #c2c7cd; font-size: 0.83rem; line-height: 1.7; }
.dispatch-limits__grid strong { color: #fff; }
.dispatch-closing { margin-top: 0; }

@media (max-width: 980px) {
  .dispatch-hero { padding-top: 62px; }
  .dispatch-hero__copy h1 { font-size: clamp(3.2rem, 10vw, 5rem); }
  .dispatch-capability-grid { grid-template-columns: repeat(2, 1fr); }
  .dispatch-feature__grid { grid-template-columns: 1fr; }
  .dispatch-feature.is-flipped .dispatch-feature__copy,
  .dispatch-feature.is-flipped .dispatch-feature__media { order: initial; }
  .dispatch-feature__copy { max-width: 720px; }
  .dispatch-limits__grid { grid-template-columns: 1fr; }
  .dispatch-limits__grid article { min-height: 0; }
}

@media (max-width: 680px) {
  .dispatch-hero { padding: 48px 0 68px; }
  .dispatch-hero__copy { text-align: left; }
  .dispatch-hero__copy .crumb,
  .dispatch-hero__copy .cta-row { justify-content: flex-start; }
  .dispatch-hero__copy h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .dispatch-hero__copy .lede { font-size: 1rem; }
  .dispatch-hero__product { margin-top: 44px; }
  .dispatch-capture__shell { border-radius: 16px; }
  .dispatch-capture__bar { height: 31px; }
  .dispatch-capture__bar span { font-size: 0.5rem; }
  .dispatch-capture figcaption { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dispatch-hero__facts {
    grid-template-columns: repeat(2, 1fr); width: calc(100% - 20px); margin-top: -18px;
  }
  .dispatch-hero__facts span:nth-child(3) { border-left: 0; border-top: 1px solid #ece7df; }
  .dispatch-hero__facts span:nth-child(4) { border-top: 1px solid #ece7df; }
  .dispatch-status { text-align: left; }
  .dispatch-overview,
  .dispatch-feature,
  .dispatch-limits { padding: 82px 0; }
  .dispatch-capability-grid { grid-template-columns: 1fr; }
  .dispatch-capability-grid article { min-height: 0; }
  .dispatch-capability-grid article > span { margin-bottom: 24px; }
  .dispatch-proof { grid-template-columns: 1fr; }
  .dispatch-proof a + a { border-top: 1px solid #e6e1da; border-left: 0; }
  .dispatch-feature__media .dispatch-capture__viewport { aspect-ratio: 1.05 / 1; }
  .dispatch-feature__copy h2,
  .dispatch-limits h2 { font-size: clamp(2.25rem, 11vw, 3.1rem); }
}

/*
 * Motion is the whole point here, so reduced-motion does not get a static first
 * frame — it gets the state that carries the most information: the dispatcher
 * mid-transmission, with all three log rows present.
 */
@media (prefers-reduced-motion: reduce) {
  .dispatchflow *, .dispatchflow *::before, .dispatchflow *::after {
    animation: none !important;
  }
  .dispatchflow .df-tx, .dispatchflow .df-live,
  .dispatchflow .df-entry, .dispatchflow .rg-rx, .dispatchflow .c-rx1 { opacity: 1; }
  .dispatchflow .df-entry { transform: none; }
  .df-bar { background: color-mix(in srgb, var(--dfAccent) 16%, var(--dfSurface));
            box-shadow: inset 0 -2px 0 var(--dfAccent); }
  .df-talk { background: var(--dfAccent); }
  .df-live i { height: 11px; background: var(--dfAccent); }
  .df-moving { left: 27%; top: 62%; }
}

/* ============================ support chat widget ============================
 *
 * THIS IS THE APP, IN A POPUP. Same palette, same voice-log rows, same PTT
 * ring — because the widget's job on a marketing page is to show what the
 * product is, and a generic bubble chat would misrepresent it.
 *
 * Two things it deliberately copies rather than invents:
 *
 *   - THE PALETTE IS THE APP'S, not the site's. Values from
 *     apps/android/design/Theme.kt: bg #0F1115, surface #171A20, surfaceAlt
 *     #20242C, border #2C3138, text/dim/faint, and cyan #2FD4DE for "somebody
 *     else is talking". A dark panel on a light page is the point — a visitor
 *     is looking at the product, not at more website.
 *   - MESSAGES ARE A VOICE LOG, NOT BUBBLES. HistoryPane.kt is explicit that
 *     "chat bubbles are the wrong metaphor for PTT — you scan a log and play
 *     through it": full-width rows, avatar, sender, direction arrow, time,
 *     transcription slot, hairline between. The first version of this widget
 *     used bubbles, which is exactly what the app rejected.
 */
.sw { position: fixed; right: 18px; bottom: 18px; z-index: 900;
      /* The app's own type stack, not the site's marketing face. */
      font-family: Poppins, ui-sans-serif, system-ui, sans-serif; font-size: 14px; }

/* --- the app's tokens, scoped so nothing on the site inherits them --- */
.sw-panel, .sw-launch {
  --a-bg: #0f1115;
  --a-surface: #171a20;
  --a-alt: #20242c;
  --a-border: #2c3138;
  --a-text: #ffffff;
  --a-dim: #d9dbdf;
  --a-faint: #8b919c;
  --a-primary: #ff7a00;
  --a-primary-light: #ff9a2b;
  --a-primary-deep: #e86a00;
  --a-receiving: #2fd4de;
  --a-danger: #ff5d5d;
  --a-available: #3dd68c;
}

.sw-launch {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 11px 18px 11px 14px; font-family: inherit;
  background: linear-gradient(135deg, var(--a-primary-light), var(--a-primary) 55%, var(--a-primary-deep));
  color: #1a0e00; font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 26px -10px rgba(232, 106, 0, 0.6);
}
.sw-launch:hover { filter: brightness(1.05); }
.sw-launch-i { display: block; width: 18px; height: 18px; }

/* [hidden] must beat display:flex — see the note by .sw-form. */
.sw-panel[hidden] { display: none; }
/*
 * THREE SIZES: floating (default), tall, and docked to the right edge.
 *
 * `--sw-dock` is the width the page is inset by, and it is 0 unless the rail is
 * open. Everything that reads it does so with a `0px` fallback, so a browser that
 * never sees the docked class behaves exactly as it did before this existed.
 */
.sw-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(372px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  background: var(--a-bg); color: var(--a-dim);
  border: 1px solid var(--a-border); border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

/* Taller, still floating: same width, most of the viewport. */
.sw-panel.is-tall { height: calc(100vh - 108px); }
/*
 * DOCKED: a full-height rail flush to the right edge, with the page inset beside
 * it rather than hidden under it.
 *
 * `position: fixed` rather than absolute, because `.sw` is pinned 18 px off the
 * bottom-right corner and the rail must reach the top of the viewport. The right
 * border and square corners are what make it read as part of the page instead of
 * a card floating over it.
 */
.sw-panel.is-dock {
  position: fixed; inset: 0 0 0 auto;
  /* ONE source for the rail's width. The page's inset and the panel itself must
   * be the same number, and two copies of `min(420px, 100vw)` is how they stop
   * being — so the JS toggles a class and never names a width. */
  width: var(--sw-dock-w); height: auto; max-height: none;
  border-radius: 0; border-width: 0 0 0 1px;
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.7);
}
/*
 * The launcher would sit on top of its own rail, so it goes while docked. Closing
 * the panel drops the class and brings it straight back — which is also the only
 * way back, so it must not be conditional on anything else.
 */
html.sw-docked .sw-launch { display: none; }
/*
 * The inset. `header` is `position: sticky`, so it is laid out in normal flow and
 * narrows with body's content box — which is precisely why the site's chrome
 * follows the rail without being touched. Its two `position: fixed` dropdowns do
 * NOT, so they read the same variable below.
 */
/*
 * The rail's width, in one place.
 *
 * No `min(…, 100vw)`: the rail is disabled outright below a 460 px viewport, so
 * 420 px always fits wherever it applies. Nothing needs half of it — the site's
 * fixed dropdowns resolve their percentages against `header`, which insets on its
 * own, and trying to help them was the bug.
 */
:root { --sw-dock-w: 420px; }
html.sw-docked { --sw-dock: 420px; }
html.sw-docked body { padding-right: var(--sw-dock, 0px); }

/* --- header: avatar + status dot + title + E2EE badge, as TalkTopBar --- */
.sw-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--a-border);
  background: var(--a-surface); flex: none;
}
.sw-ava {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #1a0e00;
  background: linear-gradient(135deg, var(--a-primary-light), var(--a-primary-deep));
}
.sw-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--a-faint); border: 3px solid var(--a-surface);
}
.sw-dot.is-on { background: var(--a-available); }
.sw-hgroup { flex: 1; min-width: 0; }
.sw-title { display: flex; align-items: center; gap: 6px; color: var(--a-text); font-weight: 600; }
.sw-sub { font-size: 12px; color: var(--a-faint); }
.sw-sub.is-on { color: var(--a-available); }
/* The app's E2EE badge: lock glyph on a 16% primary wash. */
.sw-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255, 122, 0, 0.16); color: var(--a-primary);
  border-radius: 6px; padding: 1px 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}
.sw-close {
  border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--a-faint); padding: 0 2px; flex: none; font-family: inherit;
}
.sw-close:hover { color: var(--a-text); }
/*
 * The alert-sound toggle, beside the ×.
 *
 * `gap` on .sw-head is 12px, which is right between the avatar and the title and
 * too much between two icon buttons — the negative margin pulls them into one
 * control cluster rather than two floating glyphs. The 18px box matches the ×'s
 * optical size at its 22px font.
 */
.sw-mute, .sw-size {
  border: 0; background: none; cursor: pointer; padding: 2px; flex: none;
  color: var(--a-faint); line-height: 0; margin-right: -6px;
  display: grid; place-items: center; border-radius: 6px;
}
.sw-mute svg, .sw-size svg { width: 18px; height: 18px; display: block; }
.sw-mute:hover, .sw-size:hover { color: var(--a-text); }
/* Muted is a STATE, so it carries the tinted wash the design system uses for
 * one — not a greyed-out button, which would read as "unavailable". */
.sw-mute.is-off { color: var(--a-primary); background: rgba(255, 122, 0, 0.14); }
.sw-mute:focus-visible, .sw-size:focus-visible, .sw-close:focus-visible {
  outline: 2px solid var(--a-primary); outline-offset: 2px;
}

/* --- the log --- */
.sw-body { flex: 1; overflow-y: auto; min-height: 0; }
.sw-empty { padding: 28px 18px; text-align: center; color: var(--a-faint); font-size: 13px; }

.sw-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(44, 49, 56, 0.55);   /* Hairline() */
}
.sw-row-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
}
.sw-row-main { flex: 1; min-width: 0; }
.sw-row-top { display: flex; align-items: center; gap: 6px; }
.sw-who { color: var(--a-text); font-weight: 600; font-size: 13.5px; }
.sw-lock { font-size: 10px; }
.sw-dur { margin-left: auto; color: var(--a-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.sw-meta { display: flex; align-items: center; gap: 4px; color: var(--a-faint); font-size: 11.5px; margin-top: 1px; }
.sw-arrow { font-size: 10px; }
.sw-text { color: var(--a-dim); font-size: 13.5px; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
/* The permanent transcription slot, as in the app. */
.sw-trans { display: flex; gap: 4px; color: var(--a-faint); font-size: 11.5px; margin-top: 2px; }
.sw-play {
  border: 0; background: none; color: var(--a-primary); cursor: pointer;
  font-size: 15px; padding: 2px 4px; flex: none; font-family: inherit;
}
/* Date pill: surfaceAlt, fully rounded, M/d/yy. */
.sw-date { display: flex; justify-content: center; padding: 10px 0; }
.sw-date span {
  background: var(--a-alt); color: var(--a-dim);
  border-radius: 50px; padding: 4px 12px; font-size: 11px; font-weight: 600;
}

/* --- the PTT ring --- */
.sw-ptt-wrap {
  position: relative;
  flex: none; display: grid; place-items: center; gap: 8px;
  padding: 14px 0 12px; border-top: 1px solid var(--a-border);
  background: radial-gradient(120% 80% at 50% 100%, #13161b, var(--a-bg));
}
/*
 * COLLAPSED: the same button, laid out as a row.
 *
 * Not a second control — one DOM, restyled. Every state class the ring carries
 * (is-tx, is-rx, is-requesting, is-offline) and every handler bound to it keep
 * working, which is the whole reason to do it in CSS: a compact PTT built as its
 * own element would be a second place for "who holds the floor" to be drawn, and
 * that is the one thing on a radio that must never disagree with itself.
 *
 * It stays a BUTTON rather than disappearing. Collapsing to save space must not
 * quietly remove the ability to talk, and the caption still reads who is
 * speaking — 118 px of ring becomes 42, the state stays legible.
 */
.sw-ptt-wrap.is-min {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 11px; padding: 8px 10px 8px 12px;
}
/*
 * `flex: none` is load-bearing, not tidiness. In the collapsed row the ring is a
 * flex item with the default `flex-shrink: 1`, so the caption and the handle
 * squeezed it to 17 px wide by 42 tall — an oval, measured before it shipped.
 * A circle whose width comes from `width` alone is not a circle inside a flex row.
 */
.sw-ptt-wrap.is-min .sw-ring { width: 42px; height: 42px; flex: none; }
/* And the caption yields instead, rather than pushing the handle off the end. */
.sw-ptt-wrap.is-min .sw-cap {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*
 * The annulus is masked at a FIXED 6 px, so at 42 px it would be a third of the
 * radius and read as a disc rather than a ring. Scaled with the button.
 */
.sw-ptt-wrap.is-min .sw-ring::before {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.sw-ptt-wrap.is-min .sw-ring.is-tx::before {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.sw-ptt-wrap.is-min .sw-ring-mic { width: 17px; height: 17px; }
.sw-ptt-wrap.is-min .sw-cap { font-size: 10px; text-align: left; }

/* The collapse handle: floating in the corner when open, in the row when not. */
.sw-pttcol {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: none; cursor: pointer; padding: 3px; line-height: 0;
  color: var(--a-faint); border-radius: 6px; display: grid; place-items: center;
}
.sw-pttcol svg { width: 16px; height: 16px; display: block; }
.sw-pttcol:hover { color: var(--a-text); background: var(--a-alt); }
.sw-pttcol:focus-visible { outline: 2px solid var(--a-primary); outline-offset: 1px; }
.sw-ptt-wrap.is-min .sw-pttcol { position: static; margin-left: auto; }
.sw-ring {
  position: relative; width: 118px; height: 118px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; background: none; touch-action: none;
  display: grid; place-items: center;
}
/* The ring itself: a conic sweep masked to an annulus, so it can carry the
 * brand gradient the way the app's Canvas sweep does. */
.sw-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-primary-light), var(--a-primary) 40%,
              var(--a-primary-deep) 70%, var(--a-primary-light));
  opacity: 0.6;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  transition: opacity 0.18s;
}
.sw-ring-mic { width: 34px; height: 34px; color: rgba(255,255,255,0.92); }
.sw-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--a-dim); text-transform: uppercase; }

/* Requesting: rotate, as ringStyle(REQUESTING) does at 900ms. */
.sw-ring.is-requesting::before { opacity: 0.9; animation: sw-spin 0.9s linear infinite; }
/* Transmitting: full opacity, thicker stroke, glow, slow rotation. */
.sw-ring.is-tx::before {
  opacity: 1; animation: sw-spin 2.6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
}
.sw-ring.is-tx { box-shadow: 0 0 34px -6px rgba(255, 122, 0, 0.35); }
.sw-ring.is-tx .sw-cap, .sw-cap.is-tx { color: var(--a-primary); }
/*
 * Receiving COUNTER-rotates and is cyan. Both, deliberately: direction as well
 * as hue, so "them" never reads as "you" for a colour-blind user. The app makes
 * the same choice for the same reason.
 */
.sw-ring.is-rx::before {
  opacity: 0.95; background: conic-gradient(from 0deg, var(--a-receiving), #1b9aa3 60%, var(--a-receiving));
  animation: sw-spin 3.4s linear infinite reverse;
}
.sw-ring.is-offline::before { background: var(--a-border); opacity: 1; animation: none; }
.sw-ring.is-offline .sw-ring-mic { color: rgba(255,255,255,0.35); }
@keyframes sw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sw-ring::before { animation: none !important; }
}

/* --- composer --- */
.sw-note { padding: 8px 14px; font-size: 11.5px; color: var(--a-faint); line-height: 1.45; flex: none; }
.sw-note.is-ok { color: var(--a-available); }
.sw-note.is-warn { color: var(--a-primary-light); }
.sw-link { color: var(--a-primary-light); font-weight: 600; }

/* A class setting display:flex beats the [hidden] attribute on specificity, so
 * without this the composer stayed visible with nobody on the other end. */
.sw-form[hidden] { display: none; }
.sw-form {
  display: flex; gap: 8px; padding: 10px 12px; flex: none;
  border-top: 1px solid var(--a-border); background: var(--a-surface);
}
.sw-input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--a-border); border-radius: 10px;
  background: var(--a-bg); color: var(--a-text);
}
.sw-input::placeholder { color: var(--a-faint); }
.sw-input:focus { outline: none; border-color: var(--a-primary); }
.sw-send {
  border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; font: inherit;
  font-weight: 700; color: #1a0e00;
  background: linear-gradient(135deg, var(--a-primary-light), var(--a-primary) 55%, var(--a-primary-deep));
}
.sw-send:hover { filter: brightness(1.04); }

@media (max-width: 460px) {
  .sw { right: 12px; bottom: 12px; left: 12px; }
  .sw-panel { width: auto; left: 0; right: 0; height: calc(100vh - 96px); }
  /*
   * A phone has nothing to dock beside, and it is already effectively full
   * screen — so both larger modes collapse back to the one mobile layout rather
   * than becoming a rail nobody can see the page behind. The stored preference
   * is left alone: it is the visitor's desktop choice and comes back with the
   * wider screen.
   */
  .sw-panel.is-tall, .sw-panel.is-dock {
    position: absolute; inset: auto 0 auto 0; width: auto;
    height: calc(100vh - 96px);
    border-radius: 18px; border-width: 1px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  }
  html.sw-docked body { padding-right: 0; }
  html.sw-docked .sw-launch { display: inline-flex; }
}
/*
 * On a 320 px handset the header cannot hold the title, the E2EE badge AND two
 * icon buttons on one row.
 *
 * Measured, not guessed: with the badge the row wraps at a 303 px panel, which
 * is a 327 px viewport (the panel is the viewport less 24 px here); without it,
 * not until 249 px, which no device is. The badge is what gives, because the
 * subtitle beneath it already reads "end-to-end encrypted" whenever the chat is
 * live — so nothing is lost, whereas a wrapped header takes 23 px off a log
 * whose height is fixed.
 *
 * Adding the alert-sound toggle is what made this tight; before it there was
 * room. Anything else that lands in this header needs to re-measure.
 */
@media (max-width: 336px) {
  .sw-badge { display: none; }
}

/* ---------------------------------------------------------------- real product screens */

/* Keep retired illustrative mockups in the source for reference without ever
   allowing component display rules to override the native hidden attribute. */
[hidden] { display: none !important; }

/* Restore the original rotating globe as atmosphere behind the real product
   captures. The retired HTML device scenes stay in the document only as a
   reference; the globe canvas and branded halo are the only visible pieces. */
.stage-wrap.globe-only {
  --ss: 0.74;
  position: absolute; z-index: 0; top: 315px; left: 0; right: 0;
  height: calc(740px * var(--ss)); margin: 0;
  pointer-events: none; opacity: 0.78;
}
.globe-only .showcase,
.globe-only .orb-devices { display: none; }
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .cta-row,
.hero .note,
.real-hero-showcase { position: relative; z-index: 2; }

/* The landing page leads with the product itself: the current browser console
   beside the production web handset. The hero gets a wider wrap than the rest
   of the page so both interfaces stay legible instead of shrinking into two
   decorative cards. */
.hero { padding-bottom: 76px; }
.hero > .wrap { max-width: 1320px; }
.real-hero-showcase {
  width: min(100%, 1280px); margin: 56px auto 0;
  display: grid; grid-template-columns: 686px 438px; justify-content: center;
  gap: 28px; align-items: start; text-align: left;
}
.real-hero-shot {
  position: relative; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 22px;
  background: #121419;
  box-shadow: 0 28px 70px rgba(0,0,0,0.42);
}
.real-hero-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.real-hero-shot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.real-hero-shot.console-shot {
  aspect-ratio: auto;
}
.real-hero-shot.handset-shot { aspect-ratio: 1.5; }

/* A real 768×1024 portrait-tablet Console viewport, not a desktop squeezed
   into a tablet shell. The iframe below is genuinely 768×1024 and is scaled
   visually to the 640×853 screen — a transform scales the rendered output, not
   the layout viewport, so the Console inside really does lay out at 768 and the
   visible screen still aligns with the handset.

   768 puts it in the Console's TABLET tier (701–1100, panel-ui/src/panel.css):
   the 76px icon rail, no bottom tab bar. It used to fall in the phone tier and
   show the tab bar, which is what the hero displayed before. Changing this
   width past 1100 — or below 701 — silently changes which shell the landing
   page advertises. */
.real-hero-shot.console-shot.live-console-shot {
  width: 686px; height: auto; display: grid; grid-template-rows: auto auto auto;
  padding: 10px; background: rgba(12, 14, 18, 0.96);
}
.portrait-tablet-stage {
  --tablet-scale: 1;
  position: relative; width: 664px; height: 877px;
}
.portrait-tablet {
  position: absolute; top: 0; left: 0; width: 664px; height: 877px; padding: 11px;
  transform: scale(var(--tablet-scale)); transform-origin: 0 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 32px;
  background: linear-gradient(145deg, #15181e, #07090c 58%);
  box-shadow: 0 28px 70px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.035);
}
.tablet-camera {
  position: absolute; z-index: 3; top: 4px; left: 50%; width: 5px; height: 5px;
  transform: translateX(-50%); border-radius: 50%; background: #303641;
  box-shadow: inset 0 0 0 1px #07090c, 0 0 0 1px rgba(255,255,255,0.05);
}
.live-console-viewport {
  position: relative; width: 640px; height: 853px; overflow: hidden;
  border-radius: 21px; background: #0f1115;
}
.live-console-viewport iframe {
  display: block; width: 768px; height: 1024px; border: 0;
  transform: scale(.8333333333); transform-origin: 0 0; background: #0f1115;
}
.live-console-viewport iframe[hidden] { display: none; }

.live-demo-toolbar {
  position: static; z-index: 2; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 0 2px 9px;
  border: 0; border-radius: 0; background: transparent; backdrop-filter: none;
  color: #f6f7f8; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.live-demo-label {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 10px; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 100px; background: rgba(26, 29, 36, 0.92);
}
.live-demo-label > i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(61,214,140,0.15);
}
.live-demo-role {
  color: #858d98; font-size: 0.58rem; letter-spacing: .07em; white-space: nowrap;
}
.live-demo-toolbar-actions {
  min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 13px;
}
.live-demo-note,
.live-handset-note {
  margin: 9px 4px 1px; color: #858d98; text-align: center;
  font-size: 0.65rem; line-height: 1.45;
}

/* The right-hand hero panel is the production web handset itself, not a
   screenshot or a marketing reconstruction. Its explicit /demo/ entry point
   uses demo-only browser storage and a 24-hour isolated server account; the
   hostname root keeps the ordinary register/sign-in flow. Microphone and
   camera access are delegated in the markup but are still requested only by
   the handset in response to the visitor using those controls. */
.real-hero-shot.handset-shot.live-handset-shot {
  width: 438px; height: auto; aspect-ratio: auto;
  display: grid; grid-template-rows: auto auto auto;
  padding: 10px; background: rgba(12, 14, 18, 0.96);
}
.live-handset-toolbar {
  min-width: 0;
}
.live-demo-toolbar :is(a, button) {
  min-width: 0; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;
  color: #aeb5bf; font-size: 0.64rem; font-weight: 600;
  letter-spacing: normal; text-decoration: none; text-transform: none; white-space: nowrap;
}
.live-demo-toolbar button {
  appearance: none; padding: 3px 2px; border: 0; background: none; font-family: inherit; cursor: pointer;
}
.live-demo-toolbar button:disabled { color: #717985; cursor: wait; }
.live-demo-toolbar :is(a, button):hover { color: #fff; }
.live-demo-toolbar button:disabled:hover { color: #717985; }
.live-demo-toolbar :is(a, button):focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px;
}
.live-demo-toolbar :is(a, button) b { color: var(--orange); font-size: 0.78rem; }
#hero-console-popout { min-height: 44px; padding-inline: 5px; }
.console-popout-state {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 28px;
  color: #f6f7f8; text-align: center;
  background: radial-gradient(circle at 50% 38%, #242933 0, #11141a 58%, #0c0e12 100%);
}
.console-popout-state[hidden] { display: none; }
.console-popout-state i {
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px;
  border: 1px solid rgba(239,126,72,.5); border-radius: 14px;
  color: var(--orange); font-size: 1.45rem; font-style: normal;
  background: rgba(239,126,72,.09);
}
.console-popout-state strong { font-size: 1rem; }
.console-popout-state span { max-width: 300px; color: #929aa6; font-size: .76rem; line-height: 1.5; }
.console-popout-state button {
  min-height: 44px; margin-top: 8px; padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.17); border-radius: 8px;
  color: #f6f7f8; font: inherit; font-size: .72rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  background: rgba(255,255,255,.06);
}
.console-popout-state button:hover { border-color: rgba(239,126,72,.65); background: rgba(239,126,72,.1); }
.console-popout-state button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.live-handset-viewport {
  position: relative; width: 416px; height: clamp(720px, 100dvh, 892px);
  overflow: hidden; border-radius: 14px; background: #0f1115;
}
/* Give the embedded app the same desktop viewport as handset.pushtt.app, then
   crop only the quiet stage around it. The app itself therefore renders its
   real 390px-wide device at min(844px, viewport - 48px), including its bezel,
   instead of reflowing into the old 383x567 iframe as though it were a phone. */
.live-handset-shot iframe {
  position: absolute; top: 0; left: 50%; display: block;
  width: 760px; height: 100%; min-height: 0;
  transform: translateX(-50%); border: 0; background: #0f1115;
}
.real-hero-showcase > p {
  grid-column: 1 / -1; margin: 2px 0 0; text-align: center;
  color: #777f8b; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.real-hero-showcase > p[data-state="live"] { color: #85bfa5; }
.real-hero-showcase > p[data-state="error"] { color: #dca17c; }

/* Equal columns, because the two rows put the handsets on opposite sides: the
   first row's shot sits in column one and the flipped row's in column two, so
   an asymmetric split gives one row a roomy phone and the other a cramped
   pair. The 16:9 stages this replaced could take the uneven split — they were
   cropped either way. */
#product .row2 {
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
/*
 * Home-page product shots are REAL handset captures in a real device frame.
 *
 * They replaced painted 16:9 stages that drew their own phone: wrong
 * proportions, a redrawn UI, and — because the drawing could not follow the
 * app — a `.current-talk-stage-layer` hack that pinned the current radio glyph
 * over a stale picture. A 1080x2400 screenshot in .frontline-phone--tall needs
 * none of that: when the app changes, recapture and the page is right again.
 */
.product-shot,
.mail-home-product-shot {
  position: relative; display: flex; justify-content: center; width: 100%;
  min-width: 0; margin: 0;
}
.product-shot .frontline-phone,
.mail-home-product-shot .frontline-phone { width: min(100%, 286px); }
.row2.flip > .product-shot { order: 2; }
/* Two handsets side by side: one story needs both screens in view at once. */
.product-shot-stack {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 26px);
  align-items: start; justify-items: center;
}
.product-shot-stack .frontline-phone { width: min(100%, 244px); }
.product-shot-stack .frontline-phone:first-of-type { transform: rotate(-2.5deg); }
.product-shot-stack .frontline-phone:last-of-type { transform: rotate(2.5deg); }

/* ---- the work-apps strip ---- */
.workapps { padding: 104px 0 96px; background: var(--bg); }
.workapps .head { margin-bottom: 54px; }
.workapps-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 54px) clamp(20px, 3vw, 40px);
  align-items: start; justify-items: center;
}
.workapps-row .frontline-phone { width: min(100%, 300px); }
/* Specific enough to beat .frontline-phone figcaption span, which sets the
   uppercase, letter-spaced treatment the hero devices use and is defined
   later in this file. */
.workapps-row .frontline-phone figcaption {
  display: flex; flex-direction: column; gap: 4px; margin-top: 16px;
  color: var(--ink); font-size: 0.84rem; font-weight: 700; text-align: left;
}
.workapps-row .frontline-phone figcaption span {
  color: var(--muted); font-size: 0.74rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; line-height: 1.5;
}
/* The white-label proof reuses the work-apps grid: three handsets, same screen,
   three identities. It sits on the .wash background, so the phones need the
   same shadow treatment and nothing else. */
.wl-row { margin-top: 8px; }
.wl-row .frontline-phone { width: min(100%, 292px); }

.workapps-note {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.82rem;
}
.workapps-note b { color: var(--ink); font-weight: 700; }

@media (max-width: 980px) {
  .workapps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px;
    justify-items: center;
  }
  .workapps-row .frontline-phone { width: min(100%, 296px); }
  .workapps-row .frontline-phone figcaption { width: 100%; }
}
@media (max-width: 560px) {
  .workapps-row { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  /* Same specificity as .workapps-row .frontline-phone above, which a bare
     `figure` selector loses to regardless of source order. */
  .workapps-row .frontline-phone { width: min(100%, 268px); }
}

@media (min-width: 861px) {
  .mail-home-grid { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
}

/* Generated feature and solution pages distinguish a full captured product
   stage from the older, tightly cropped phone screenshots. */
.shot.is-product-stage { position: relative; }
.shot.is-product-stage img {
  width: 100%; max-width: 760px; border: 1px solid #2b2e35; border-radius: 22px;
  box-shadow: 0 24px 54px rgba(28,37,41,0.2);
}
.shot.is-product-stage figcaption {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  padding: 7px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
  background: rgba(11,13,17,0.78); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.shot.hero-shot.is-product-stage img { max-width: 860px; }

/* The legacy 16:9 Talk stage still carries a real product capture, but its tab
   predates the app's radio glyph. This layer tracks the uncropped source frame
   so the current icon stays pinned correctly even when the home card crops it. */
.current-talk-stage-layer {
  position: absolute; left: 50%; top: 0; z-index: 2; display: block;
  aspect-ratio: 16 / 9; transform: translateX(-50%); pointer-events: none;
}
.product-shot > .current-talk-stage-layer { height: 100%; }
.shot.is-product-stage > .current-talk-stage-layer { width: 100%; max-width: 760px; }
.current-talk-stage-icon {
  position: absolute; left: 38.67%; top: 19.17%; display: grid;
  width: 1.9%; aspect-ratio: 1; place-items: center;
  transform: translate(-50%, -50%); color: #ff7a00; background: #17191e;
  box-shadow: 0 0 0 2px #17191e;
}
.current-talk-stage-icon svg { display: block; width: 100%; height: 100%; }

@media (max-width: 980px) {
  .stage-wrap.globe-only { --ss: 0.58; top: 365px; }
  .real-hero-showcase { max-width: 900px; grid-template-columns: 1fr; gap: 34px; }
  .real-hero-shot.console-shot.live-console-shot { justify-self: center; }
  .real-hero-shot.handset-shot.live-handset-shot {
    width: min(100%, 438px); justify-self: center;
  }
  #product .row2 { grid-template-columns: 1fr; gap: 44px; }
  .row2.flip > .product-shot { order: 0; }
  .product-shot-stack { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 1199px) {
  .real-hero-showcase { max-width: 900px; grid-template-columns: 1fr; gap: 34px; }
  .real-hero-shot.console-shot.live-console-shot { justify-self: center; }
  .real-hero-shot.handset-shot.live-handset-shot { justify-self: center; }
}

@media (max-width: 700px) {
  .stage-wrap.globe-only { --ss: 0.36; top: 520px; }
  .hero { padding-bottom: 58px; }
  /*
   * No live demo on a phone.
   *
   * This used to give the handset frame `height: 100dvh` and both cards
   * `width: 100vw` — a whole viewport of hero handed to an embedded app,
   * below the fold, before the visitor had read what push.tt is. The Console
   * half was worse: a 768x1024 tablet viewport scaled down to a phone's
   * width renders an admin interface nobody can use.
   *
   * The frames carry `data-src` and hero-demo.js only promotes them above
   * this same width, so hiding here costs the visitor nothing to begin with.
   * Both demos remain one tap away: the handset through its own "Open full
   * screen" link on wider screens, and the Console through Try for free.
   */
  .real-hero-showcase { display: none; }
  /* The stage crop below still serves company/, which keeps a 16:9 capture. */
  .shot.hero-shot.is-product-stage {
    height: clamp(500px, 135vw, 600px); overflow: hidden; border: 0; border-radius: 22px;
    background: #141619;
  }
  .shot.hero-shot.is-product-stage > img {
    position: absolute; left: 50%; top: 0; width: auto; max-width: none; height: 100%;
    transform: translateX(-50%); border: 0; border-radius: 0; box-shadow: none;
  }
  /* Two handsets do not fit a phone screen side by side; stack and unrotate. */
  .product-shot-stack { grid-template-columns: 1fr; gap: 30px; }
  .product-shot-stack .frontline-phone { width: min(100%, 258px); }
  .product-shot-stack .frontline-phone:first-of-type,
  .product-shot-stack .frontline-phone:last-of-type { transform: none; }
  .real-hero-shot figcaption { top: 10px; left: 10px; font-size: 0.55rem; }
}

/* ================================================== frontline communication */

/*
 * This page uses the actual Android captures at their native 720:1605 ratio.
 * The phone is a separate CSS shell around the image; no screenshot is warped,
 * perspective-skewed, or cropped out of one of the wide marketing stages.
 */
.frontline-page { background: #fff; }

.frontline-hero {
  position: relative; overflow: hidden;
  padding: 78px 0 88px;
  background:
    radial-gradient(circle at 84% 32%, rgba(255,122,0,0.14), transparent 30%),
    linear-gradient(135deg, #fffdf9 0%, #fbf6ef 60%, #fff8ef 100%);
  border-bottom: 1px solid var(--line);
}
.frontline-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7));
  pointer-events: none;
}
.frontline-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 0.93fr) minmax(480px, 1.07fr);
  gap: 64px; align-items: center;
}
.frontline-hero__copy { padding: 18px 0; }
.frontline-hero .crumb { margin-bottom: 22px; text-align: left; }
.frontline-hero .pill { margin-bottom: 20px; }
.frontline-hero h1 {
  max-width: 650px; margin-bottom: 22px;
  font-size: clamp(3rem, 5.6vw, 4.8rem); line-height: 0.98;
  letter-spacing: -0.055em;
}
.frontline-hero .lede {
  max-width: 620px; margin: 0 0 30px;
  font-size: clamp(1.04rem, 1.6vw, 1.22rem); line-height: 1.65;
}
.frontline-hero .cta-row { justify-content: flex-start; margin-bottom: 36px; }

.frontline-proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 650px; padding-top: 26px; border-top: 1px solid #e5ded4;
}
.frontline-proof > div { min-width: 0; padding: 0 18px; border-left: 1px solid #e5ded4; }
.frontline-proof > div:first-child { padding-left: 0; border-left: 0; }
.frontline-proof strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 0.88rem; }
.frontline-proof span { display: block; font-size: 0.7rem; line-height: 1.45; color: var(--muted); }

.frontline-hero__signal {
  position: absolute; right: -180px; top: 44%; z-index: 0;
  width: 640px; height: 640px; transform: translateY(-50%);
  opacity: 0.42; pointer-events: none;
}
.frontline-hero__signal i {
  position: absolute; inset: 0; border: 1px solid rgba(255,122,0,0.25); border-radius: 50%;
}
.frontline-hero__signal i:nth-child(2) { inset: 100px; }
.frontline-hero__signal i:nth-child(3) { inset: 200px; }

.frontline-hero__devices {
  position: relative; width: 100%; min-height: 660px;
  border-radius: 52px;
  background:
    linear-gradient(rgba(255,255,255,0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.45) 1px, transparent 1px),
    radial-gradient(circle at 52% 44%, #ffd7ad 0, #ffecd7 36%, #f7eee4 72%);
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.08);
}
.frontline-hero__devices::before {
  content: ""; position: absolute; left: 50%; bottom: 28px;
  width: 72%; height: 60px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(35,28,23,0.22); filter: blur(28px);
}
.frontline-device-note {
  position: absolute; right: 22px; bottom: 18px; z-index: 8;
  padding: 7px 12px; border: 1px solid rgba(28,37,41,0.11); border-radius: 100px;
  background: rgba(255,255,255,0.84); backdrop-filter: blur(8px);
  color: #697078; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
}

.frontline-phone {
  position: relative; z-index: 2; width: 278px; margin: 0;
  filter: drop-shadow(0 30px 25px rgba(25,27,31,0.18));
}
.frontline-phone__shell {
  position: relative; z-index: 2; padding: 9px;
  border: 1px solid #050609; border-radius: 43px;
  background: linear-gradient(145deg, #4a4f58 0%, #101216 22%, #050609 72%, #333740 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.08);
}
.frontline-phone__shell::after {
  content: ""; position: absolute; inset: 4px; z-index: 4; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 39px;
}
.frontline-phone__screen {
  position: relative; overflow: hidden; aspect-ratio: 720 / 1605;
  border-radius: 34px; background: var(--app-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.frontline-phone__screen img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center; background: var(--app-bg);
}
.frontline-phone__talk-icon {
  position: absolute; left: 23.85%; top: 4.78%; z-index: 3;
  display: grid; width: 4.8%; aspect-ratio: 1; place-items: center;
  transform: translate(-50%, -50%); color: #ff7a00; background: #17191e;
  box-shadow: 0 0 0 3px #17191e; pointer-events: none;
}
.frontline-phone__talk-icon svg { display: block; width: 100%; height: 100%; }
.frontline-phone__camera {
  position: absolute; top: 16px; left: 50%; z-index: 6;
  width: 9px; height: 9px; transform: translateX(-50%);
  border: 2px solid #252a31; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #2f5072, #06070a 58%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55);
}
.frontline-phone__side {
  position: absolute; right: -3px; z-index: 1; width: 4px;
  border-radius: 0 3px 3px 0; background: linear-gradient(#555b64, #17191e 30%, #07080a);
  box-shadow: 1px 0 1px rgba(0,0,0,0.34);
}
.frontline-phone__side--top { top: 112px; height: 58px; }
.frontline-phone__side--bottom { top: 186px; height: 84px; }
.frontline-phone figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 17px; color: var(--ink); font-size: 0.82rem; font-weight: 600;
}
.frontline-phone figcaption span {
  color: var(--muted); font-size: 0.61rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
/*
 * A 20:9 handset, for the 1080x2400 captures the app actually produces.
 *
 * The base frame's screen is 720/1605 — the older captures' shape. Rather than
 * a fourth phone frame (the site already carries .frontline-phone and
 * .aviation-phone, and two lookalikes that drift is the failure CLAUDE.md keeps
 * recording), this is a modifier: same shell, same camera, same side keys, one
 * changed aspect. A capture at either resolution therefore sits in one frame.
 */
.frontline-phone--tall .frontline-phone__screen { aspect-ratio: 1080 / 2400; }

.frontline-hero__devices .frontline-phone { position: absolute; }
.frontline-hero__devices .frontline-phone.is-back {
  left: 28px; top: 62px; z-index: 2; width: 240px; transform: rotate(-7deg);
}
.frontline-hero__devices .frontline-phone.is-front {
  right: 30px; bottom: 25px; z-index: 3; width: 282px; transform: rotate(5deg);
}

.frontline-intro { padding: 106px 0 82px; text-align: center; background: #fff; }
.frontline-intro .wrap { max-width: 900px; }
.frontline-kicker {
  display: inline-block; margin-bottom: 18px;
  color: var(--orange-ink); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.frontline-intro h2 {
  margin-bottom: 22px; font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: -0.045em;
}
.frontline-intro p { max-width: 710px; margin: 0 auto; font-size: 1.08rem; }

.frontline-section { padding: 108px 0; background: #fff; border-top: 1px solid rgba(232,228,221,0.72); }
.frontline-section.is-tinted { background: var(--cream); }
.frontline-section__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  gap: clamp(70px, 9vw, 126px); align-items: center;
}
.frontline-section.is-flipped .frontline-section__copy { order: 2; }
.frontline-section__copy { min-width: 0; }
.frontline-section__number {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px;
  border: 1px solid #ffd1a1; border-radius: 50%;
  background: var(--orange-soft); color: var(--orange-ink);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
}
.frontline-section h2 {
  max-width: 650px; margin-bottom: 20px;
  font-size: clamp(2rem, 3.7vw, 3.25rem); letter-spacing: -0.045em;
}
.frontline-section__copy > p { max-width: 650px; font-size: 1.04rem; }
.frontline-feature-list { list-style: none; display: grid; gap: 22px; margin-top: 34px; }
.frontline-feature-list li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  align-items: flex-start; color: var(--body); font-size: 0.9rem; line-height: 1.55;
}
.frontline-feature-list strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 0.96rem; }
.frontline-feature-mark {
  display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px;
  border: 1px solid #ffd0a0; border-radius: 9px;
  background: var(--orange-soft); color: var(--orange-ink); font-size: 0.8rem; font-weight: 700;
}
.frontline-section__visual {
  position: relative; min-height: 665px; display: grid; place-items: center;
}
.frontline-section__halo {
  position: absolute; width: min(100%, 470px); height: 570px; border-radius: 46% 46% 28% 28%;
  background:
    radial-gradient(circle at 48% 36%, rgba(255,255,255,0.95), transparent 23%),
    linear-gradient(155deg, #ffe3c4, #fff4e8 62%, #f1e7dc);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.08);
}
.frontline-section__visual .frontline-phone { width: 286px; }
.frontline-section__visual .frontline-phone::after {
  content: ""; position: absolute; left: 50%; bottom: 51px; z-index: -1;
  width: 120%; height: 44px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(28,37,41,0.18); filter: blur(22px);
}

.frontline-section.is-wide .frontline-section__grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
}
.frontline-feature-panel {
  padding: 42px; border: 1px solid #2c3037; border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,0,0.13), transparent 42%),
    #15181d;
  box-shadow: 0 28px 60px rgba(28,37,41,0.15);
}
.frontline-feature-panel .frontline-feature-list { margin-top: 0; gap: 28px; }
.frontline-feature-panel .frontline-feature-list li { color: #aeb5bf; }
.frontline-feature-panel .frontline-feature-list strong { color: #fff; }
.frontline-feature-panel .frontline-feature-mark {
  border-color: rgba(255,122,0,0.28); background: rgba(255,122,0,0.11); color: #ff9b3f;
}

.frontline-closing {
  padding: 112px 0; color: #b8bec7;
  background:
    radial-gradient(circle at 20% 120%, rgba(255,122,0,0.2), transparent 35%),
    radial-gradient(circle at 95% 0%, rgba(255,154,43,0.12), transparent 30%),
    #15181d;
}
.frontline-closing__inner { max-width: 880px; text-align: center; }
.frontline-closing h2 {
  margin-bottom: 22px; color: #fff;
  font-size: clamp(2.25rem, 4.5vw, 3.8rem); letter-spacing: -0.045em;
}
.frontline-closing p { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.frontline-closing .cta-row { margin-top: 34px; }
.frontline-closing .btn-ghost {
  border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #fff;
}

@media (max-width: 1080px) {
  .frontline-hero__grid { grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr); gap: 36px; }
  .frontline-hero__devices .frontline-phone.is-back { left: 16px; width: 215px; }
  .frontline-hero__devices .frontline-phone.is-front { right: 14px; width: 258px; }
}

@media (max-width: 900px) {
  .frontline-hero { padding-top: 62px; }
  .frontline-hero__grid { grid-template-columns: 1fr; }
  .frontline-hero__copy { max-width: 720px; margin: 0 auto; text-align: center; }
  .frontline-hero .crumb { text-align: center; }
  .frontline-hero h1, .frontline-hero .lede { margin-left: auto; margin-right: auto; }
  .frontline-hero .cta-row { justify-content: center; }
  .frontline-proof { margin: 0 auto; text-align: left; }
  .frontline-hero__devices { width: min(100%, 590px); min-height: 650px; margin: 14px auto 0; }
  .frontline-hero__devices .frontline-phone.is-back { left: 35px; width: 238px; }
  .frontline-hero__devices .frontline-phone.is-front { right: 34px; width: 280px; }
  .frontline-section__grid,
  .frontline-section.is-wide .frontline-section__grid { grid-template-columns: 1fr; gap: 58px; }
  .frontline-section__copy { max-width: 700px; margin: 0 auto; }
  .frontline-section.is-flipped .frontline-section__copy { order: 0; }
  .frontline-feature-panel { width: min(100%, 700px); margin: 0 auto; }
}

@media (max-width: 600px) {
  .frontline-hero { padding: 44px 0 58px; }
  .frontline-hero h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .frontline-hero .lede { font-size: 1rem; }
  /* The device is the proof on a phone-sized viewport; keep its real screen
     visible at the fold instead of making visitors pass a second text list. */
  .frontline-proof { display: none; }
  .frontline-hero__devices { min-height: 510px; border-radius: 34px; }
  .frontline-hero__devices .frontline-phone.is-back { left: 12px; top: 55px; width: 183px; }
  .frontline-hero__devices .frontline-phone.is-front { right: 12px; bottom: 34px; width: 214px; }
  .frontline-device-note { right: 12px; bottom: 10px; font-size: 0.53rem; }
  .frontline-phone__shell { padding: 7px; border-radius: 35px; }
  .frontline-phone__shell::after { border-radius: 31px; }
  .frontline-phone__screen { border-radius: 28px; }
  .frontline-phone__camera { top: 13px; width: 7px; height: 7px; }
  .frontline-intro { padding: 78px 0 62px; }
  .frontline-intro h2 { font-size: 2.35rem; }
  .frontline-section { padding: 76px 0; }
  .frontline-section h2 { font-size: 2.25rem; }
  .frontline-section__visual { min-height: 590px; }
  .frontline-section__visual .frontline-phone { width: min(258px, 76vw); }
  .frontline-section__halo { width: min(100%, 390px); height: 500px; }
  .frontline-feature-panel { padding: 28px 22px; border-radius: 22px; }
  .frontline-closing { padding: 82px 0; }
}

/* ============================================================= PoC radios */

/*
 * The device frame is intentionally CSS, not a stretched marketing mockup.
 * The product bitmap remains the native 720:1605 capture inside it, while the
 * separate catalogue sprite supplies a real push.tt hardware render.
 */
.poc-page { overflow: hidden; background: #fff; }

.poc-hero {
  position: relative; overflow: hidden; padding: 72px 0 54px;
  background:
    radial-gradient(circle at 50% 31%, rgba(255,153,44,0.16), transparent 29%),
    linear-gradient(180deg, #fffdf9 0%, #fff8ef 56%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.poc-hero__rings {
  position: absolute; top: 305px; left: 50%; width: 1040px; height: 1040px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0.46;
}
.poc-hero__rings i {
  position: absolute; inset: 0; border: 1px solid rgba(255,122,0,0.14); border-radius: 50%;
}
.poc-hero__rings i:nth-child(2) { inset: 150px; }
.poc-hero__rings i:nth-child(3) { inset: 300px; }
.poc-hero .wrap { position: relative; z-index: 2; }
.poc-hero__copy { max-width: 920px; margin: 0 auto; text-align: center; }
.poc-hero .crumb { margin-bottom: 20px; text-align: center; }
.poc-hero .pill { margin-bottom: 19px; }
.poc-hero h1 {
  max-width: 900px; margin: 0 auto 20px;
  font-size: clamp(3.2rem, 7vw, 5.7rem); line-height: 0.94; letter-spacing: -0.064em;
}
.poc-hero .lede {
  max-width: 760px; margin: 0 auto 29px;
  font-size: clamp(1.04rem, 1.7vw, 1.2rem); line-height: 1.65;
}
.poc-hero .cta-row { justify-content: center; }
.poc-status-note {
  max-width: 790px; margin: 25px auto 0; padding: 13px 17px;
  border: 1px solid rgba(154,91,15,0.15); border-radius: 13px;
  background: rgba(255,255,255,0.62); color: #7a6958;
  font-size: 0.72rem; line-height: 1.55; backdrop-filter: blur(8px);
}
.poc-status-note strong { color: #99601d; }

.poc-hero__stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 0.74fr);
  align-items: center; width: min(100%, 980px); min-height: 600px; margin: 48px auto 35px;
  padding: 34px 66px 25px; border: 1px solid rgba(255,122,0,0.1); border-radius: 54px;
  background:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px),
    radial-gradient(circle at 56% 41%, #ffe4c5, #f8eee2 68%);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 34px 80px rgba(84,57,31,0.1), inset 0 0 0 1px rgba(255,255,255,0.65);
}
.poc-hero__stage::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 35px; height: 58px;
  border-radius: 50%; background: rgba(35,28,23,0.18); filter: blur(25px); pointer-events: none;
}
.poc-hero__radio, .poc-hero__phone, .poc-hero__plus { position: relative; z-index: 2; }
.poc-hero__radio { transform: rotate(-4deg); }
.poc-hero__phone { justify-self: center; transform: rotate(4deg); }
.poc-hero__plus {
  display: grid; place-items: center; width: 46px; height: 46px; justify-self: center;
  border: 1px solid rgba(255,122,0,0.24); border-radius: 50%;
  background: rgba(255,255,255,0.84); color: var(--orange-ink);
  font-size: 1.55rem; font-weight: 300; box-shadow: 0 12px 32px rgba(64,43,24,0.1);
}
.poc-device-note {
  position: absolute; right: 18px; bottom: 15px; z-index: 4; padding: 7px 12px;
  border: 1px solid rgba(28,37,41,0.11); border-radius: 100px;
  background: rgba(255,255,255,0.82); color: #697078;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.035em; backdrop-filter: blur(8px);
}

.poc-hardware-render { position: relative; width: min(100%, 405px); margin: 0; }
.poc-hardware-render__image {
  aspect-ratio: 1; border-radius: 40px;
  background-image: url("img/hardware/catalog-sprite.jpg");
  background-size: 300% 300%; background-position: 0 0; background-repeat: no-repeat;
  box-shadow: 0 32px 45px rgba(39,38,36,0.16), inset 0 0 0 1px rgba(255,255,255,0.58);
}
.poc-hardware-render figcaption {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 15px;
  color: var(--ink); font-size: 0.8rem; font-weight: 650;
}
.poc-hardware-render figcaption span {
  color: var(--muted); font-size: 0.59rem; font-weight: 650;
  letter-spacing: 0.065em; text-transform: uppercase;
}

.poc-rugged-device {
  position: relative; width: 276px; padding: 44px 14px 25px;
  filter: drop-shadow(0 32px 28px rgba(25,27,31,0.19));
}
.poc-rugged-device .frontline-phone { width: 100%; filter: none; }
.poc-rugged-device .frontline-phone.is-rugged .frontline-phone__shell {
  padding: 11px; border-width: 2px; border-radius: 33px;
  background: linear-gradient(145deg, #4b5054 0%, #191c1f 18%, #090b0c 70%, #31363a 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.22),
    inset 0 -5px 10px rgba(0,0,0,0.44),
    0 0 0 5px #202428,
    0 0 0 7px #0b0d0e;
}
.poc-rugged-device .frontline-phone.is-rugged .frontline-phone__shell::after {
  inset: 5px; border-radius: 27px;
}
.poc-rugged-device .frontline-phone.is-rugged .frontline-phone__screen { border-radius: 23px; }
.poc-rugged-device .frontline-phone.is-rugged .frontline-phone__camera { top: 18px; }
.poc-rugged-device .frontline-phone__side { display: none; }
.poc-rugged-device__antenna {
  position: absolute; top: 2px; left: 39px; z-index: 1; width: 24px; height: 70px;
  border: 2px solid #080a0b; border-radius: 8px 8px 4px 4px;
  background: repeating-linear-gradient(180deg, #303538 0 4px, #111315 4px 8px);
  transform: rotate(-2deg); transform-origin: bottom;
}
.poc-rugged-device__knob {
  position: absolute; top: 26px; right: 37px; z-index: 1; width: 36px; height: 24px;
  border: 2px solid #08090a; border-radius: 7px 7px 4px 4px;
  background: repeating-linear-gradient(90deg, #34383b 0 3px, #101214 3px 6px);
}
.poc-rugged-device__ptt {
  position: absolute; top: 190px; left: 1px; z-index: 5; width: 20px; height: 106px;
  padding: 6px 4px; border: 2px solid #1b1d1f; border-radius: 9px 3px 3px 9px;
  background: linear-gradient(90deg, #ff8c20, #dd5d00); box-shadow: -2px 4px 7px rgba(0,0,0,0.24);
}
.poc-rugged-device__ptt i {
  display: block; width: 100%; height: 100%; border-radius: 5px 2px 2px 5px;
  background: repeating-linear-gradient(180deg, rgba(75,26,0,0.18) 0 3px, transparent 3px 7px);
}
.poc-rugged-device .frontline-phone figcaption { margin-top: 24px; }

.poc-proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 980px); margin: 0 auto; border-top: 1px solid #e6ded4;
}
.poc-proof > div { padding: 25px 28px 4px; border-left: 1px solid #e6ded4; }
.poc-proof > div:first-child { border-left: 0; }
.poc-proof strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 0.9rem; }
.poc-proof span { display: block; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }

.poc-section { padding: 112px 0; background: #fff; border-top: 1px solid rgba(232,228,221,0.74); }
.poc-section.is-tinted { background: var(--cream); }
.poc-section__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: clamp(70px, 9vw, 126px); align-items: center;
}
.poc-section.is-flipped .poc-section__copy { order: 2; }
.poc-section__copy { min-width: 0; }
.poc-section__number {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px;
  border: 1px solid #ffd1a1; border-radius: 50%; background: var(--orange-soft);
  color: var(--orange-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
}
.poc-section h2 {
  max-width: 640px; margin-bottom: 20px;
  font-size: clamp(2.1rem, 3.8vw, 3.35rem); letter-spacing: -0.047em;
}
.poc-section__copy > p { max-width: 650px; font-size: 1.02rem; }
.poc-section .frontline-feature-list { margin-top: 32px; }
.poc-inline-note {
  margin-top: 28px; padding: 17px 18px 17px 20px; border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0; background: rgba(255,122,0,0.07);
  color: #756453; font-size: 0.77rem !important; line-height: 1.58;
}
.poc-section__visual {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 610px;
}
.poc-section__visual--device .poc-rugged-device { z-index: 2; }
.poc-visual-halo {
  position: absolute; width: min(100%, 480px); height: 560px; border-radius: 48% 48% 29% 29%;
  background:
    radial-gradient(circle at 48% 32%, rgba(255,255,255,0.94), transparent 24%),
    linear-gradient(150deg, #ffd9ae, #fff2e3 61%, #efe4d8);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.08);
}
.poc-section__visual--paddle { align-content: center; grid-template-columns: minmax(0, 1fr) 186px; gap: 18px; }
.poc-section__visual--paddle .poc-hardware-render { width: 100%; transform: rotate(-3deg); }
.poc-signal-stack { display: grid; gap: 12px; position: relative; z-index: 2; }
.poc-signal-stack::before {
  content: ""; position: absolute; top: 50%; right: 100%; width: 38px; border-top: 1px dashed #d89a58;
}
.poc-signal-stack span {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px;
  padding: 13px 12px; border: 1px solid #e2d7ca; border-radius: 13px;
  background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.72rem; font-weight: 650;
  box-shadow: 0 12px 24px rgba(44,37,30,0.06);
}
.poc-signal-stack b { color: var(--orange-ink); font-size: 0.58rem; letter-spacing: 0.08em; }

.poc-codec-card {
  width: min(100%, 520px); padding: 42px; border: 1px solid #2d3239; border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,0,0.18), transparent 38%),
    #15181d;
  color: #aeb5bf; box-shadow: 0 32px 70px rgba(28,37,41,0.17);
}
.poc-card-kicker {
  display: block; margin-bottom: 13px; color: #ff9b3f;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.poc-codec-card h3 { max-width: 400px; margin-bottom: 34px; color: #fff; font-size: 1.8rem; }
.poc-codec-row {
  display: grid; grid-template-columns: 110px 60px 1fr; gap: 10px; align-items: center;
  margin-top: 19px; font-size: 0.67rem;
}
.poc-codec-row b { color: #fff; font-size: 0.7rem; }
.poc-codec-row i { display: block; height: 28px; border-radius: 6px; background: #292e34; }
.poc-codec-row em {
  display: flex; align-items: center; height: 100%; padding: 0 9px; border-radius: inherit;
  background: #ff8211; color: #17191d; font-style: normal; font-weight: 800;
}
.poc-codec-row.is-opus em { width: 22%; min-width: 42px; }
.poc-codec-row.is-pcm em { width: 92%; }
.poc-codec-card > p { margin-top: 30px; color: #8d959f; font-size: 0.72rem; line-height: 1.6; }

.poc-verification-card {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px);
  overflow: hidden; border: 1px solid #ded7ce; border-radius: 28px;
  background: #fff; box-shadow: 0 28px 65px rgba(48,38,27,0.11);
}
.poc-verification-card article { display: flex; flex-direction: column; gap: 17px; min-height: 340px; padding: 34px 30px; }
.poc-verification-card article + article { border-left: 1px solid #e3dcd4; background: #f7f3ee; }
.poc-verification-card span {
  margin-bottom: 9px; color: var(--orange-ink); font-size: 0.62rem; font-weight: 750;
  letter-spacing: 0.095em; text-transform: uppercase;
}
.poc-verification-card .is-pending span { color: #807467; }
.poc-verification-card strong {
  position: relative; padding-left: 25px; color: var(--ink); font-size: 0.82rem; line-height: 1.4;
}
.poc-verification-card strong::before {
  content: "✓"; position: absolute; top: -1px; left: 0; color: var(--orange-ink); font-size: 0.76rem;
}
.poc-verification-card .is-pending strong::before { content: "?"; color: #968979; }

.poc-closing { border-top: 1px solid #2a2e34; }

@media (max-width: 980px) {
  .poc-hero__stage { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 0.82fr); padding-left: 34px; padding-right: 34px; }
  .poc-section__grid { grid-template-columns: 1fr; gap: 55px; }
  .poc-section.is-flipped .poc-section__copy { order: 0; }
  .poc-section__copy { max-width: 720px; margin: 0 auto; }
  .poc-section__visual { width: min(100%, 720px); margin: 0 auto; }
}

@media (max-width: 700px) {
  .poc-hero { padding: 46px 0 45px; }
  .poc-hero h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .poc-hero .lede { font-size: 1rem; }
  .poc-status-note { font-size: 0.66rem; }
  .poc-hero__stage {
    display: block; min-height: 670px; margin-top: 38px; padding: 25px 18px;
    border-radius: 34px;
  }
  .poc-hero__radio { position: absolute; top: 44px; left: 13px; width: 56%; transform: rotate(-7deg); }
  .poc-hero__phone { position: absolute; right: 7px; bottom: 22px; width: 58%; transform: rotate(5deg); }
  .poc-hero__plus { position: absolute; top: 45%; left: 42%; width: 38px; height: 38px; }
  .poc-device-note { right: 10px; bottom: 8px; font-size: 0.51rem; }
  .poc-rugged-device { width: 100%; padding: 37px 10px 20px; }
  .poc-rugged-device__antenna { left: 28px; width: 19px; height: 58px; }
  .poc-rugged-device__knob { top: 23px; right: 25px; width: 29px; height: 20px; }
  .poc-rugged-device__ptt { top: 145px; left: 0; width: 16px; height: 82px; }
  .poc-rugged-device .frontline-phone.is-rugged .frontline-phone__shell { padding: 8px; border-radius: 28px; box-shadow: inset 0 2px 1px rgba(255,255,255,0.22), inset 0 -5px 10px rgba(0,0,0,0.44), 0 0 0 4px #202428, 0 0 0 6px #0b0d0e; }
  .poc-rugged-device .frontline-phone.is-rugged .frontline-phone__shell::after { border-radius: 23px; }
  .poc-rugged-device .frontline-phone.is-rugged .frontline-phone__screen { border-radius: 20px; }
  .poc-proof { grid-template-columns: 1fr; }
  .poc-proof > div { padding: 18px 4px; border-left: 0; border-top: 1px solid #e6ded4; }
  .poc-proof > div:first-child { border-top: 0; }
  .poc-section { padding: 78px 0; }
  .poc-section h2 { font-size: 2.28rem; }
  .poc-section__visual { min-height: 545px; }
  .poc-section__visual--device .poc-rugged-device { width: min(270px, 78vw); }
  .poc-visual-halo { height: 500px; }
  .poc-section__visual--paddle { grid-template-columns: 1fr; align-content: center; gap: 24px; }
  .poc-section__visual--paddle .poc-hardware-render { width: min(100%, 400px); margin: 0 auto; }
  .poc-signal-stack { width: min(100%, 400px); margin: 0 auto; grid-template-columns: repeat(3, 1fr); }
  .poc-signal-stack::before { display: none; }
  .poc-signal-stack span { grid-template-columns: 1fr; gap: 5px; }
  .poc-codec-card { padding: 30px 22px; border-radius: 23px; }
  .poc-codec-row { grid-template-columns: 86px 52px 1fr; }
  .poc-verification-card { grid-template-columns: 1fr; }
  .poc-verification-card article { min-height: 0; }
  .poc-verification-card article + article { border-top: 1px solid #e3dcd4; border-left: 0; }
}

@media (max-width: 430px) {
  .poc-hero__stage { min-height: 570px; }
  .poc-hero__radio { top: 48px; width: 59%; }
  .poc-hero__phone { width: 61%; }
  .poc-hardware-render figcaption { display: block; }
  .poc-hardware-render figcaption span { display: block; margin-top: 3px; }
  .poc-signal-stack { grid-template-columns: 1fr; }
  .poc-signal-stack span { grid-template-columns: 28px 1fr; }
  .poc-codec-row { grid-template-columns: 72px 45px 1fr; gap: 7px; }
}

/* ================================================ editorial marketing pages */

/*
 * Shared across generated Solutions, Features and Industries pages. Product
 * images are never used as CSS fills: each capture is an ordinary image with
 * an explicit intrinsic ratio inside a separate phone or console frame.
 */
.editorial-page { overflow: hidden; background: #fff; }

.editorial-hero {
  position: relative; overflow: hidden; padding: 72px 0 0;
  background:
    radial-gradient(circle at 82% 23%, rgba(255,122,0,0.15), transparent 27%),
    linear-gradient(135deg, #fffdf9 0%, #fbf6ef 58%, #fff8ee 100%);
  border-bottom: 1px solid var(--line);
}
.editorial-hero__signal {
  position: absolute; top: 44%; right: -230px; width: 720px; height: 720px;
  transform: translateY(-50%); opacity: 0.42; pointer-events: none;
}
.editorial-hero__signal i {
  position: absolute; inset: 0; border: 1px solid rgba(255,122,0,0.2); border-radius: 50%;
}
.editorial-hero__signal i:nth-child(2) { inset: 112px; }
.editorial-hero__signal i:nth-child(3) { inset: 224px; }
.editorial-hero__grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(480px, 1.06fr);
  gap: clamp(48px, 6vw, 88px); align-items: center; min-height: 680px;
}
.editorial-hero__copy { min-width: 0; padding: 30px 0 82px; }
.editorial-hero .crumb { margin-bottom: 22px; text-align: left; }
.editorial-hero .pill { margin-bottom: 20px; }
.editorial-hero h1 {
  max-width: 700px; margin-bottom: 22px;
  font-size: clamp(3rem, 5.5vw, 5rem); line-height: 0.96; letter-spacing: -0.058em;
}
.editorial-hero .lede {
  max-width: 650px; margin: 0 0 30px;
  font-size: clamp(1.03rem, 1.55vw, 1.19rem); line-height: 1.65;
}
.editorial-hero .cta-row { justify-content: flex-start; }
.editorial-status-note {
  max-width: 650px; margin-top: 24px; padding: 13px 16px;
  border: 1px solid rgba(154,91,15,0.15); border-radius: 12px;
  background: rgba(255,255,255,0.66); color: #766654;
  font-size: 0.7rem; line-height: 1.55; backdrop-filter: blur(8px);
}
.editorial-status-note strong { color: #945a16; }
.editorial-hero__visual {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 640px;
}
.editorial-hero__visual::before {
  content: ""; position: absolute; inset: 25px -24px 18px 12px; border-radius: 50px;
  background:
    linear-gradient(rgba(255,255,255,0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.46) 1px, transparent 1px),
    radial-gradient(circle at 48% 42%, #ffe0bc, #f4e8da 68%);
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.08);
}
.editorial-hero__visual > * { position: relative; z-index: 2; }
.editorial-hero__visual.is-console .editorial-console,
.editorial-hero__visual.is-stage .editorial-stage-shot { width: min(118%, 760px); transform: rotate(1.5deg); }
.editorial-hero__visual.is-diagram .editorial-diagram { width: min(100%, 560px); }

.editorial-proof {
  position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 5px; border-top: 1px solid #e4dcd2;
}
.editorial-proof a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; align-items: center;
  min-width: 0; padding: 24px 25px; border-left: 1px solid #e4dcd2;
  color: var(--ink); text-decoration: none; transition: background 0.18s ease;
}
.editorial-proof a:first-child { border-left: 0; }
.editorial-proof a:hover { background: rgba(255,255,255,0.65); }
.editorial-proof b { color: var(--orange-ink); font-size: 0.62rem; letter-spacing: 0.08em; }
.editorial-proof span {
  min-width: 0; overflow: hidden; color: var(--body); font-size: 0.74rem; font-weight: 650;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}

.editorial-phone-media,
.editorial-rugged-media {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 620px;
}
.editorial-media-halo {
  position: absolute; width: min(94%, 470px); height: 570px; border-radius: 48% 48% 30% 30%;
  background:
    radial-gradient(circle at 48% 32%, rgba(255,255,255,0.95), transparent 24%),
    linear-gradient(150deg, #ffdbb3, #fff2e2 61%, #ede2d6);
  box-shadow: inset 0 0 0 1px rgba(255,122,0,0.08);
}
.editorial-phone-media .frontline-phone,
.editorial-rugged-media .poc-rugged-device { position: relative; z-index: 2; }
.frontline-phone.editorial-phone { width: 286px; }
.editorial-rugged-media .poc-rugged-device { width: 292px; }
.editorial-phone-media::after,
.editorial-rugged-media::after {
  content: ""; position: absolute; left: 50%; bottom: 44px; z-index: 1;
  width: 320px; height: 48px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(32,28,24,0.18); filter: blur(22px);
}

.editorial-console,
.editorial-stage-shot { width: min(100%, 650px); margin: 0; }
.editorial-console__shell {
  overflow: hidden; border: 1px solid #24282e; border-radius: 18px;
  background: #101216; box-shadow: 0 34px 65px rgba(27,30,34,0.22), 0 0 0 7px rgba(31,34,39,0.07);
}
.editorial-console__bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-bottom: 1px solid #292d33; background: #191c21;
}
.editorial-console__bar i { width: 7px; height: 7px; border-radius: 50%; background: #626a75; }
.editorial-console__bar i:first-child { background: #ff7a00; }
.editorial-console__bar span {
  margin-left: auto; color: #69717c; font-size: 0.52rem; font-weight: 650; letter-spacing: 0.055em;
}
.editorial-console__screen { overflow: hidden; aspect-ratio: 2880 / 1800; background: #101216; }
.editorial-console__screen img,
.editorial-stage-shot__frame img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center;
}
.editorial-console figcaption,
.editorial-stage-shot figcaption {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 17px;
  color: var(--ink); font-size: 0.8rem; font-weight: 650;
}
.editorial-console figcaption span,
.editorial-stage-shot figcaption span {
  color: var(--muted); font-size: 0.58rem; font-weight: 650;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.editorial-stage-shot__frame {
  overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid #292d32; border-radius: 22px;
  background: #17181a; box-shadow: 0 34px 65px rgba(27,30,34,0.2), 0 0 0 7px rgba(31,34,39,0.06);
}

.editorial-bridge {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px 210px;
  align-items: center; width: min(112%, 710px); min-height: 590px;
}
.editorial-bridge__hardware { transform: rotate(-5deg); }
.editorial-bridge__phone { transform: rotate(5deg); }
.editorial-bridge__phone .poc-rugged-device { width: 210px; }
.editorial-bridge__phone .poc-rugged-device__ptt { top: 150px; height: 80px; }
.editorial-bridge__line {
  position: relative; z-index: 3; display: block; height: 1px;
  border-top: 1px dashed #d58431;
}
.editorial-bridge__line i {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  transform: translate(-50%, -50%); border: 1px solid #ffc17f; border-radius: 50%;
  background: #fff7ee;
}
.editorial-bridge__line i::before,
.editorial-bridge__line i::after {
  content: ""; position: absolute; top: 50%; left: 50%; border: solid var(--orange-ink);
  border-width: 1px 1px 0 0; width: 6px; height: 6px;
}
.editorial-bridge__line i::before { transform: translate(-9px, -50%) rotate(45deg); }
.editorial-bridge__line i::after { transform: translate(1px, -50%) rotate(225deg); }
.editorial-media-note {
  position: absolute; right: 2px; bottom: 8px; z-index: 5; padding: 6px 10px;
  border: 1px solid rgba(28,37,41,0.11); border-radius: 100px;
  background: rgba(255,255,255,0.84); color: #6d747c;
  font-size: 0.54rem; font-weight: 650; letter-spacing: 0.035em;
}

.editorial-diagram {
  position: relative; overflow: hidden; width: min(100%, 520px); min-height: 500px; margin: 0;
  padding: 30px; border: 1px solid #dcd4ca; border-radius: 30px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,122,0,0.13), transparent 33%),
    #fff;
  box-shadow: 0 28px 65px rgba(48,38,27,0.11);
}
.editorial-diagram__head { display: flex; justify-content: space-between; gap: 15px; position: relative; z-index: 2; }
.editorial-diagram__head span {
  color: var(--ink); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
}
.editorial-diagram__head em { color: var(--orange-ink); font-size: 0.65rem; font-style: normal; letter-spacing: 0.08em; }
.editorial-diagram__field { position: relative; height: 232px; margin: 16px 0 8px; }
.editorial-diagram__field i {
  position: absolute; top: 50%; left: 50%; width: 212px; height: 212px;
  transform: translate(-50%, -50%); border: 1px solid rgba(255,122,0,0.22); border-radius: 50%;
}
.editorial-diagram__field i:nth-child(2) { width: 145px; height: 145px; }
.editorial-diagram__field i:nth-child(3) { width: 78px; height: 78px; }
.editorial-diagram__field b {
  position: absolute; top: 50%; left: 50%; width: 24px; height: 24px;
  transform: translate(-50%, -50%); border: 6px solid #fff; border-radius: 50%;
  background: var(--orange); box-shadow: 0 8px 24px rgba(255,122,0,0.38);
}
.editorial-diagram.is-secure .editorial-diagram__field i { border-radius: 24% 24% 48% 48%; }
.editorial-diagram.is-secure .editorial-diagram__field b { border-radius: 7px; transform: translate(-50%, -50%) rotate(45deg); }
.editorial-diagram.is-alert .editorial-diagram__field i { border-color: rgba(213,71,50,0.23); }
.editorial-diagram.is-alert .editorial-diagram__field b { background: #d94732; box-shadow: 0 8px 24px rgba(217,71,50,0.34); }
.editorial-diagram.is-network .editorial-diagram__field i:nth-child(2) { border-style: dashed; }
.editorial-diagram.is-message .editorial-diagram__field i { width: 210px; height: 125px; border-radius: 22px; }
.editorial-diagram.is-message .editorial-diagram__field i:nth-child(2) { width: 150px; height: 88px; }
.editorial-diagram.is-message .editorial-diagram__field i:nth-child(3) { width: 88px; height: 50px; }
.editorial-diagram__steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.editorial-diagram__steps span {
  min-width: 0; padding: 12px 10px; border: 1px solid #e6ded4; border-radius: 12px;
  background: rgba(255,250,244,0.86); color: var(--body); font-size: 0.62rem; font-weight: 650; line-height: 1.35;
}
.editorial-diagram__steps b { display: block; margin-bottom: 5px; color: var(--orange-ink); font-size: 0.52rem; letter-spacing: 0.08em; }
.editorial-diagram figcaption {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 17px;
  color: var(--ink); font-size: 0.72rem; font-weight: 650;
}
.editorial-diagram figcaption span {
  color: var(--muted); font-size: 0.54rem; letter-spacing: 0.065em; text-transform: uppercase;
}

.editorial-section {
  padding: 112px 0; background: #fff; border-top: 1px solid rgba(232,228,221,0.74);
}
.editorial-section.is-tinted,
.editorial-section--wide.is-tinted { background: var(--cream); }
.editorial-section__grid {
  display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  gap: clamp(68px, 9vw, 126px); align-items: center;
}
.editorial-section.is-flipped .editorial-section__copy { order: 2; }
.editorial-section__copy { min-width: 0; }
.editorial-section__number {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px;
  border: 1px solid #ffd1a1; border-radius: 50%; background: var(--orange-soft);
  color: var(--orange-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
}
.editorial-section h2,
.editorial-section__wide h2 {
  max-width: 680px; margin-bottom: 20px;
  font-size: clamp(2.05rem, 3.75vw, 3.3rem); line-height: 1.06; letter-spacing: -0.046em;
}
.editorial-section__copy > p,
.editorial-section__wide > p { max-width: 680px; font-size: 1.02rem; }
.editorial-section .frontline-feature-list { margin-top: 32px; }
.editorial-section__visual {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 620px;
}
.editorial-section__visual > .editorial-console,
.editorial-section__visual > .editorial-stage-shot { width: min(100%, 650px); }
.editorial-section__visual > .editorial-diagram { width: min(100%, 530px); }
.editorial-inline-note {
  margin-top: 28px; padding: 17px 18px 17px 20px; border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0; background: rgba(255,122,0,0.07);
  color: #756453; font-size: 0.77rem !important; line-height: 1.58;
}
.editorial-section--wide { padding: 105px 0; }
.editorial-section__wide { max-width: 980px; }
.editorial-section__wide > p { margin-bottom: 30px; }
.editorial-section__wide .frontline-feature-list { max-width: 760px; }
.editorial-section__wide > :not(.editorial-section__number):not(h2):not(p):not(.frontline-feature-list) { margin-top: 40px; }
.editorial-closing { border-top: 1px solid #292d32; }

@media (max-width: 1100px) {
  .editorial-hero__grid { grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr); gap: 38px; }
  .editorial-hero__visual.is-console .editorial-console,
  .editorial-hero__visual.is-stage .editorial-stage-shot { width: min(116%, 690px); }
  .editorial-bridge { width: 100%; grid-template-columns: minmax(0, 1fr) 38px 185px; }
  .editorial-bridge__phone .poc-rugged-device { width: 185px; }
}

@media (max-width: 900px) {
  .editorial-hero { padding-top: 58px; }
  .editorial-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .editorial-hero__copy { max-width: 760px; margin: 0 auto; padding: 24px 0 12px; text-align: center; }
  .editorial-hero .crumb { text-align: center; }
  .editorial-hero h1,
  .editorial-hero .lede,
  .editorial-status-note { margin-left: auto; margin-right: auto; }
  .editorial-hero .cta-row { justify-content: center; }
  .editorial-hero__visual { width: min(100%, 720px); min-height: 650px; margin: 0 auto; }
  .editorial-hero__visual.is-console,
  .editorial-hero__visual.is-stage,
  .editorial-hero__visual.is-diagram { min-height: 510px; }
  .editorial-hero__visual.is-console .editorial-console,
  .editorial-hero__visual.is-stage .editorial-stage-shot { width: min(100%, 690px); transform: none; }
  .editorial-section__grid { grid-template-columns: 1fr; gap: 55px; }
  .editorial-section.is-flipped .editorial-section__copy { order: 0; }
  .editorial-section__copy { max-width: 720px; margin: 0 auto; }
  .editorial-section__visual { width: min(100%, 720px); margin: 0 auto; }
}

@media (max-width: 650px) {
  .editorial-hero { padding-top: 42px; }
  .editorial-hero h1 { font-size: clamp(2.72rem, 14vw, 4.15rem); }
  .editorial-hero .lede { font-size: 1rem; }
  .editorial-status-note { font-size: 0.66rem; }
  .editorial-proof { grid-template-columns: 1fr; margin-top: 10px; }
  .editorial-proof a { padding: 16px 4px; border-top: 1px solid #e4dcd2; border-left: 0; }
  .editorial-proof a:first-child { border-top: 0; }
  .editorial-proof span { white-space: normal; }
  .editorial-hero__visual { min-height: 575px; }
  .editorial-hero__visual::before { inset: 26px -18px 18px; border-radius: 34px; }
  .editorial-hero__visual.is-console,
  .editorial-hero__visual.is-stage { min-height: 365px; }
  .editorial-hero__visual.is-diagram { min-height: 525px; }
  .editorial-phone-media,
  .editorial-rugged-media { min-height: 555px; }
  .frontline-phone.editorial-phone { width: min(258px, 76vw); }
  .editorial-rugged-media .poc-rugged-device { width: min(272px, 79vw); }
  .editorial-media-halo { height: 500px; }
  .editorial-console__shell { border-radius: 13px; }
  .editorial-console__bar { height: 27px; }
  .editorial-console figcaption,
  .editorial-stage-shot figcaption { display: block; }
  .editorial-console figcaption span,
  .editorial-stage-shot figcaption span { display: block; margin-top: 3px; }
  .editorial-bridge {
    grid-template-columns: minmax(0, 1fr) 30px minmax(125px, 0.7fr); min-height: 510px;
  }
  .editorial-bridge__hardware .poc-hardware-render figcaption { display: none; }
  .editorial-bridge__phone .poc-rugged-device { width: 100%; padding-top: 34px; }
  .editorial-bridge__phone .poc-rugged-device__antenna { height: 52px; }
  .editorial-bridge__phone .poc-rugged-device__ptt { top: 118px; width: 14px; height: 64px; }
  .editorial-media-note { right: 5px; bottom: 2px; font-size: 0.49rem; }
  .editorial-diagram { min-height: 475px; padding: 25px 20px; border-radius: 23px; }
  .editorial-diagram__field { height: 220px; }
  .editorial-diagram__steps { grid-template-columns: 1fr; }
  .editorial-diagram__steps span { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
  .editorial-diagram__steps b { margin: 0; }
  .editorial-section { padding: 78px 0; }
  .editorial-section h2,
  .editorial-section__wide h2 { font-size: 2.28rem; }
  .editorial-section__visual { min-height: 555px; }
  .editorial-section__visual > .editorial-console,
  .editorial-section__visual > .editorial-stage-shot { align-self: center; }
  .editorial-section__visual:has(> .editorial-console),
  .editorial-section__visual:has(> .editorial-stage-shot) { min-height: 350px; }
  .editorial-section__visual:has(> .editorial-diagram) { min-height: 500px; }
  .editorial-section--wide { padding: 76px 0; }
}

/* ======================================================= hardware catalogue */

/*
 * Three category pages, one procurement pattern. The reference structure is a
 * calm editorial intro over a filter rail and a dense product grid; the brand
 * treatment remains push.tt's own warm white, orange, and ink rather than
 * borrowing another vendor's assets or colours.
 */
.catalog-page { background: var(--white); }

.catalog-hero {
  padding: 68px 0 0; text-align: center;
  background:
    radial-gradient(650px 260px at 50% 0, rgba(255, 176, 74, 0.12), transparent 72%),
    linear-gradient(180deg, var(--cream) 0%, var(--white) 88%);
}
.catalog-hero h1 {
  max-width: 880px; margin: 0 auto 18px;
  font-size: clamp(2.25rem, 5.2vw, 4.15rem); letter-spacing: -0.045em;
}
.catalog-hero > .wrap > .lede {
  max-width: 760px; margin: 0 auto;
  color: #626d76; font-size: clamp(1rem, 1.7vw, 1.16rem); line-height: 1.65;
}

.catalog-tabs {
  max-width: 740px; margin: 46px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.catalog-tabs a {
  position: relative; display: block; padding: 15px 18px 17px;
  color: var(--body); font-size: 0.92rem; font-weight: 600;
  transition: color 0.15s, background 0.15s;
}
.catalog-tabs a::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px;
  height: 2px; border-radius: 3px 3px 0 0; background: transparent;
  transform: scaleX(0.45); transition: transform 0.18s, background 0.18s;
}
.catalog-tabs a:hover { color: var(--ink); background: rgba(255, 122, 0, 0.035); }
.catalog-tabs a.active { color: var(--orange-ink); }
.catalog-tabs a.active::after { background: var(--orange); transform: scaleX(1); }
.catalog-tabs a:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 8px; }

.catalog-advisory {
  max-width: 820px; margin: 50px auto 0; padding: 24px 28px;
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  text-align: left; border: 1px solid #eee5d9; border-radius: 16px;
  background: rgba(251, 247, 242, 0.78);
  box-shadow: 0 14px 34px rgba(73, 54, 35, 0.045);
}
.catalog-advisory-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid #ffd0a2; border-radius: 50%;
  color: var(--orange-ink); background: var(--orange-soft);
  font-size: 0.9rem; font-weight: 700; font-family: Georgia, serif; font-style: italic;
}
.catalog-advisory h2 { margin: 1px 0 5px; font-size: 1.03rem; letter-spacing: -0.015em; }
.catalog-advisory p { color: var(--body); font-size: 0.89rem; line-height: 1.6; }

.catalog-browser { padding: 76px 0 104px; }
.catalog-layout {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 38px; align-items: start;
}

.catalog-filters {
  position: sticky; top: 88px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--cream); overflow: hidden;
}
.catalog-filters > summary {
  list-style: none; min-height: 58px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); cursor: pointer;
  color: var(--ink); font-size: 0.91rem; font-weight: 700;
}
.catalog-filters > summary::-webkit-details-marker { display: none; }
.catalog-filters > summary::after {
  content: "+"; display: none; color: var(--orange-ink); font-size: 1.2rem; font-weight: 500;
}
.catalog-filters:not([open]) > summary::after { content: "+"; }
.catalog-filters[open] > summary::after { content: "−"; }
.catalog-filters > summary small {
  color: var(--muted); font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.catalog-filters form { padding: 18px; }
.catalog-filters fieldset { border: 0; padding: 0 0 19px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.catalog-filters fieldset:last-of-type { margin-bottom: 13px; }
.catalog-filters legend {
  margin-bottom: 8px; color: #707984;
  font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.catalog-filters label {
  min-height: 34px; display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 5px; border-radius: 7px; cursor: pointer;
  color: var(--ink); font-size: 0.82rem; line-height: 1.35;
  transition: color 0.15s, background 0.15s;
}
.catalog-filters label:hover { background: #fff; color: var(--orange-ink); }
.catalog-filters input {
  flex: none; width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--orange); cursor: pointer;
}
.catalog-filters input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.catalog-reset {
  appearance: none; border: 0; padding: 5px 0; cursor: pointer;
  color: var(--orange-ink); background: none; font: inherit; font-size: 0.79rem; font-weight: 700;
}
.catalog-reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.catalog-reset:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

.catalog-results { min-width: 0; }
.catalog-results-head {
  min-height: 62px; margin-bottom: 22px;
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
}
.catalog-kicker {
  display: block; margin-bottom: 5px;
  color: var(--orange-ink); font-size: 0.69rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.catalog-results-head h2 { font-size: clamp(1.55rem, 2.8vw, 2rem); }
.catalog-count { flex: none; color: var(--muted); font-size: 0.82rem; }
.catalog-count strong { color: var(--ink); font-size: 1rem; }

.catalog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.catalog-card {
  min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #ebe6df; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 32px rgba(44, 39, 32, 0.055);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.catalog-product-image {
  aspect-ratio: 1; flex: none;
  background-image: var(--catalog-image);
  background-repeat: no-repeat; background-size: 300% 300%;
  background-position: var(--catalog-x) var(--catalog-y);
  border-bottom: 1px solid #eeeae4;
}
/*
 * A real product photograph is CONTAINED on white, never cropped to fill.
 * The sprite is a square render built to fill its cell; a manufacturer's shot
 * has its own aspect and margins, and `cover` would slice the antenna off a
 * radio to make it square.
 */
.catalog-product-image.is-photo {
  background-size: contain; background-position: center;
  background-color: #fff; padding: 0;
}
.catalog-pictured {
  margin: -4px 0 8px; color: var(--muted);
  font-size: 0.66rem; font-weight: 650; letter-spacing: 0.02em;
}
.catalog-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 19px 19px 20px; }
.catalog-card-meta {
  min-height: 25px; margin-bottom: 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.catalog-card-meta > span:first-child {
  padding-top: 3px; color: var(--muted); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.055em; line-height: 1.35; text-transform: uppercase;
}
.catalog-status {
  flex: none; padding: 3px 7px; border-radius: 100px;
  font-size: 0.57rem; font-weight: 700; letter-spacing: 0.035em; line-height: 1.4;
  text-transform: uppercase; white-space: nowrap;
}
.catalog-status.ok { color: #1f7048; background: #e8f6ee; border: 1px solid #c6e6d4; }
.catalog-status.beta { color: #92500d; background: #fff1df; border: 1px solid #ffd1a0; }
.catalog-status.check { color: #626a76; background: #f0f1f4; border: 1px solid #dcdfe5; }
.catalog-card h3 { margin-bottom: 8px; font-size: 1.05rem; line-height: 1.25; }
.catalog-card-body > p { margin-bottom: 14px; color: var(--body); font-size: 0.79rem; line-height: 1.55; }
.catalog-card ul { margin-bottom: 18px; list-style: none; }
.catalog-card li {
  position: relative; padding: 6px 0 6px 15px;
  border-top: 1px solid #f0ece7; color: #626b75; font-size: 0.72rem; line-height: 1.45;
}
.catalog-card li::before {
  content: ""; position: absolute; left: 1px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.catalog-card-link {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 9px;
  color: var(--orange-ink); font-size: 0.76rem; font-weight: 700;
}
.catalog-card-link span { font-size: 1rem; transition: transform 0.15s; }
.catalog-card-link:hover span { transform: translateX(3px); }
.catalog-card-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }

@media (hover: hover) and (pointer: fine) {
  .catalog-card:hover {
    transform: translateY(-4px); border-color: #f1c89e;
    box-shadow: 0 20px 42px rgba(44, 39, 32, 0.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-card, .catalog-card-link span, .catalog-tabs a::after { transition: none; }
}

.catalog-empty {
  min-height: 410px; padding: 64px 24px; display: grid; place-items: center; align-content: center;
  border: 1px dashed #dcd5cc; border-radius: 18px; text-align: center; background: var(--cream);
}
.catalog-empty > span { margin-bottom: 12px; color: var(--orange); font-size: 2.4rem; }
.catalog-empty h3 { margin-bottom: 7px; font-size: 1.25rem; }
.catalog-empty p { max-width: 340px; margin-bottom: 20px; color: var(--muted); font-size: 0.86rem; }

.catalog-help { padding: 0 0 96px; }
.catalog-help .wrap {
  position: relative; overflow: hidden; min-height: 220px; padding: 46px 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 24px;
  color: #fff; background:
    radial-gradient(430px 240px at 90% 120%, rgba(255,122,0,0.36), transparent 72%),
    linear-gradient(145deg, #20292d, #12181b);
}
.catalog-help .wrap::after {
  content: ""; position: absolute; right: -80px; bottom: -120px;
  width: 270px; height: 270px; border: 42px solid rgba(255, 122, 0, 0.1); border-radius: 50%;
}
.catalog-help .wrap > * { position: relative; z-index: 1; }
.catalog-help h2 { margin-bottom: 8px; color: #fff; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.catalog-help p { max-width: 650px; color: #b7c0c5; font-size: 0.92rem; }
.catalog-help .catalog-kicker { color: #ffb66f; }
.catalog-help .btn { flex: none; }

@media (max-width: 1140px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .catalog-hero { padding-top: 52px; }
  .catalog-layout { grid-template-columns: 1fr; gap: 28px; }
  .catalog-filters { position: static; top: auto; }
  .catalog-filters > summary::after { display: block; }
  .catalog-filters > summary small { margin-left: auto; }
  .catalog-filters form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .catalog-filters fieldset { margin: 0; padding: 0 16px 0 0; border: 0; border-right: 1px solid var(--line); }
  .catalog-filters fieldset:last-of-type { margin: 0; border: 0; }
  .catalog-reset { grid-column: 1 / -1; justify-self: start; }
  .catalog-help .wrap { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .catalog-hero { padding: 42px 0 0; }
  .catalog-hero h1 { font-size: clamp(2.05rem, 11vw, 3rem); }
  .catalog-hero > .wrap > .lede { font-size: 0.96rem; }
  .catalog-tabs { margin-top: 34px; }
  .catalog-tabs a { padding-inline: 5px; font-size: 0.8rem; }
  .catalog-tabs a::after { left: 9px; right: 9px; }
  .catalog-advisory { margin-top: 34px; padding: 20px; grid-template-columns: 30px 1fr; }
  .catalog-advisory-icon { width: 29px; height: 29px; }
  .catalog-advisory h2 { font-size: 0.96rem; }
  .catalog-browser { padding: 54px 0 76px; }
  .catalog-filters form { grid-template-columns: 1fr; gap: 0; }
  .catalog-filters fieldset { margin: 0 0 16px; padding: 0 0 15px; border: 0; border-bottom: 1px solid var(--line); }
  .catalog-results-head { align-items: flex-start; }
  .catalog-count { margin-top: 21px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-product-image { aspect-ratio: 1.18; }
  .catalog-help { padding-bottom: 72px; }
  .catalog-help .wrap { min-height: 0; padding: 38px 28px; border-radius: 20px; }
  .catalog-help .btn { width: 100%; }
}

/* ============================================================ Aviation */

.aviation-body { background: #f7f4ed; }
.aviation-page { overflow: hidden; }
.aviation-page h1,
.aviation-page h2 { text-wrap: balance; }
.aviation-page p { text-wrap: pretty; }

.aviation-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 880px;
  padding: 86px 0 54px; color: #fff;
  background:
    radial-gradient(900px 560px at 83% 36%, rgba(32, 132, 146, 0.24), transparent 66%),
    radial-gradient(580px 380px at 12% 92%, rgba(255, 122, 0, 0.14), transparent 70%),
    linear-gradient(140deg, #10191e 0%, #172329 48%, #10171b 100%);
}
.aviation-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  opacity: 0.14; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 2%, #000 72%, transparent 100%);
}
.aviation-hero__radar {
  position: absolute; z-index: -1; right: -170px; top: 50px; width: 710px; aspect-ratio: 1;
  border: 1px solid rgba(117, 219, 220, 0.12); border-radius: 50%; pointer-events: none;
}
.aviation-hero__radar i { position: absolute; inset: 16.66%; border: 1px solid rgba(117,219,220,0.1); border-radius: 50%; }
.aviation-hero__radar i:nth-child(2) { inset: 33.33%; }
.aviation-hero__radar i:nth-child(3) { inset: 49.9% -1px; }
.aviation-hero__radar i:nth-child(4) {
  inset: 50% auto auto 50%; width: 48%; height: 1px; border: 0; border-radius: 0;
  transform-origin: left; transform: rotate(-23deg);
  background: linear-gradient(90deg, rgba(79,212,208,0.5), transparent);
  box-shadow: 0 0 26px rgba(79,212,208,0.25);
}
.aviation-hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(410px, 0.72fr);
  gap: clamp(44px, 8vw, 116px); align-items: center;
}
.aviation-hero__copy { position: relative; z-index: 2; max-width: 690px; padding: 18px 0 80px; }
.aviation-hero .crumb { margin-bottom: 22px; color: #8da0a7; }
.aviation-hero .crumb a { color: #dbe5e7; }
.aviation-hero .pill { margin: 0 0 26px; border-color: rgba(130, 228, 185, 0.22); color: #a4e6c6; background: rgba(30, 132, 91, 0.16); }
.aviation-kicker,
.aviation-step {
  display: block; color: #e56e16; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.13em; line-height: 1.35; text-transform: uppercase;
}
.aviation-hero h1 {
  max-width: 670px; margin: 12px 0 24px; color: #fff;
  font-size: clamp(3.7rem, 7.1vw, 6.9rem); line-height: 0.92; letter-spacing: -0.067em;
}
.aviation-hero .lede { max-width: 620px; color: #b9c4c9; font-size: clamp(1.05rem, 1.5vw, 1.23rem); line-height: 1.65; }
.aviation-hero .cta-row { margin-top: 32px; }
.aviation-btn-outline { border: 1px solid rgba(255,255,255,0.2); color: #fff; background: rgba(255,255,255,0.04); }
.aviation-btn-outline:hover { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.08); }
.aviation-hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 42px; color: #84959d;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.aviation-hero__facts span { display: flex; gap: 7px; align-items: baseline; }
.aviation-hero__facts strong { color: #eef4f5; font-size: 0.83rem; letter-spacing: 0.03em; }

.aviation-hero__product { position: relative; align-self: end; min-height: 730px; display: grid; place-items: end center; }
.aviation-live-tag {
  position: absolute; z-index: 5; top: 102px; right: -12px; display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border: 1px solid rgba(255,255,255,0.13); border-radius: 10px;
  color: #d9e7e9; background: rgba(17, 27, 32, 0.88); box-shadow: 0 12px 36px rgba(0,0,0,0.26);
  backdrop-filter: blur(14px); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.05em;
}
.aviation-live-tag i { width: 7px; height: 7px; border-radius: 50%; background: #50d39c; box-shadow: 0 0 0 5px rgba(80,211,156,0.12); }
.aviation-status {
  position: relative; z-index: 2; max-width: 820px; margin-top: -2px; padding: 16px 19px;
  border-left: 2px solid #e56e16; color: #87979e; background: rgba(255,255,255,0.035);
  font-size: 0.76rem; line-height: 1.55;
}
.aviation-status strong { color: #e3eaec; }

.aviation-phone { position: relative; width: min(100%, 342px); margin: 0; }
.aviation-phone__hardware { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.aviation-phone__key { position: absolute; left: -5px; width: 7px; border-radius: 5px 0 0 5px; background: #1b2023; }
.aviation-phone__key--upper { top: 145px; height: 70px; }
.aviation-phone__key--lower { top: 235px; height: 105px; }
.aviation-phone__shell {
  position: relative; z-index: 1; padding: 9px; border: 1px solid #394044; border-radius: 43px;
  background: linear-gradient(145deg, #272d30, #090c0e 54%, #252a2d);
  box-shadow: 0 34px 74px rgba(0,0,0,0.36), inset 0 0 0 2px #080a0b;
}
.aviation-phone__camera {
  position: absolute; z-index: 4; top: 17px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%);
  border: 2px solid #15191b; border-radius: 50%; background: #050708; box-shadow: 0 0 0 2px rgba(255,255,255,0.045);
}
.aviation-phone__screen { overflow: hidden; border-radius: 35px; background: #11191d; }
.aviation-phone__screen img {
  display: block; width: 100%; height: auto; aspect-ratio: 1080 / 2400; object-fit: contain; object-position: center;
}
.aviation-phone figcaption {
  display: flex; justify-content: space-between; gap: 16px; margin: 14px 3px 0;
  color: #5c6b71; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
}
.aviation-phone figcaption span { color: #819096; font-weight: 500; }
.aviation-phone--hero { width: min(100%, 348px); transform: rotate(1.8deg); }
.aviation-phone--hero figcaption { color: #9aabb1; }

.aviation-overview { padding: 94px 0 48px; background: #f7f4ed; }
.aviation-overview__inner {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr); gap: 70px; align-items: end;
}
.aviation-overview h2 {
  max-width: 690px; margin-top: 12px; font-size: clamp(2.25rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: -0.055em;
}
.aviation-overview__inner > p { max-width: 560px; color: #69757a; font-size: 0.98rem; line-height: 1.7; }
.aviation-proof {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid #d7d4cc; border-bottom: 1px solid #d7d4cc;
}
.aviation-proof a { display: flex; gap: 18px; align-items: center; min-height: 88px; padding: 20px 24px; border-right: 1px solid #d7d4cc; color: #29343a; }
.aviation-proof a:last-child { border-right: 0; }
.aviation-proof b { color: #e56e16; font-size: 0.68rem; letter-spacing: 0.08em; }
.aviation-proof span { max-width: 210px; font-size: 0.75rem; font-weight: 700; line-height: 1.35; }

.aviation-feature { padding: 116px 0; background: #fff; border-top: 1px solid #ece9e2; }
.aviation-feature.is-flipped { background: #f0eee8; }
.aviation-feature__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(64px, 10vw, 140px); align-items: center;
}
.aviation-feature.is-flipped .aviation-feature__copy { order: 2; }
.aviation-feature__copy { max-width: 630px; }
.aviation-feature h2,
.aviation-sources h2,
.aviation-limits h2 {
  margin: 15px 0 22px; font-size: clamp(2.25rem, 4.3vw, 4.25rem); line-height: 1.02; letter-spacing: -0.055em;
}
.aviation-feature__copy > p { color: #667277; font-size: 1rem; line-height: 1.72; }
.aviation-feature .frontline-feature-list { margin-top: 34px; }
.aviation-feature .frontline-feature-list li { border-top: 1px solid #e8e5de; padding-top: 18px; }
.aviation-feature .frontline-feature-mark { border-radius: 50%; }
.aviation-feature__media { position: relative; min-height: 690px; display: grid; place-items: center; }
.aviation-feature__media::before {
  content: ""; position: absolute; inset: 10% 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(19,116,126,0.14), rgba(19,116,126,0.025) 56%, transparent 72%);
}
.aviation-feature.is-flipped .aviation-feature__media::before { background: radial-gradient(circle, rgba(229,110,22,0.12), rgba(229,110,22,0.02) 56%, transparent 72%); }
.aviation-feature__media .aviation-phone { width: min(100%, 336px); }

.aviation-sources { padding: 122px 0 128px; background: #f7f4ed; }
.aviation-sources__intro { display: grid; grid-template-columns: 0.9fr 1fr; column-gap: 72px; align-items: end; }
.aviation-sources__intro .aviation-step { grid-column: 1 / -1; }
.aviation-sources__intro h2 { max-width: 650px; }
.aviation-sources__intro > p { max-width: 590px; padding-bottom: 10px; color: #687479; font-size: 0.98rem; line-height: 1.72; }
.aviation-sources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 62px; }
.aviation-sources__grid article {
  position: relative; min-height: 290px; padding: 30px 28px; overflow: hidden;
  border: 1px solid #dcd8cf; border-radius: 4px; background: rgba(255,255,255,0.58);
}
.aviation-sources__grid svg { width: 42px; height: 42px; fill: none; stroke: #1d8388; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.aviation-sources__grid article > span { position: absolute; right: 24px; top: 28px; color: #a5aaa8; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; }
.aviation-sources__grid p { margin-top: 77px; color: #687378; font-size: 0.86rem; line-height: 1.65; }
.aviation-sources__grid strong { display: block; margin-bottom: 7px; color: #263137; font-size: 1.03rem; }

.aviation-limits { position: relative; overflow: hidden; padding: 122px 0; color: #b7c3c7; background: #121b1f; }
.aviation-limits__sweep {
  position: absolute; right: -230px; bottom: -300px; width: 720px; aspect-ratio: 1; border: 1px solid rgba(77,193,195,0.11); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 72px, rgba(77,193,195,0.07) 73px 74px);
}
.aviation-limits__grid { position: relative; display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(70px, 10vw, 150px); }
.aviation-limits h2 { color: #fff; }
.aviation-limits__grid > div:first-child > p { max-width: 610px; color: #93a2a7; font-size: 0.98rem; line-height: 1.72; }
.aviation-limits__cards { border-top: 1px solid rgba(255,255,255,0.13); }
.aviation-limits__cards article { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,0.13); }
.aviation-limits__cards article > span { padding-top: 3px; color: #e47a32; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; }
.aviation-limits__cards p { color: #97a6aa; font-size: 0.84rem; line-height: 1.65; }
.aviation-limits__cards strong { display: block; margin-bottom: 3px; color: #e9eeef; font-size: 0.94rem; }

@media (max-width: 1020px) {
  .aviation-hero { min-height: 0; padding-top: 66px; }
  .aviation-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(330px, 0.62fr); gap: 38px; }
  .aviation-hero h1 { font-size: clamp(3.5rem, 7.8vw, 5.6rem); }
  .aviation-hero__product { min-height: 660px; }
  .aviation-hero__copy { padding-bottom: 55px; }
  .aviation-overview__inner,
  .aviation-sources__intro { grid-template-columns: 1fr; gap: 16px; }
  .aviation-feature__grid { gap: 54px; }
  .aviation-limits__grid { gap: 60px; }
}

@media (max-width: 760px) {
  .aviation-hero { padding: 45px 0 40px; }
  .aviation-hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .aviation-hero__copy { max-width: 620px; padding: 0; }
  .aviation-hero h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); }
  .aviation-hero__product { min-height: 620px; margin-top: 16px; place-items: end center; }
  .aviation-live-tag { right: 7%; top: 80px; }
  .aviation-phone--hero { width: min(86%, 340px); }
  .aviation-status { margin-top: 26px; }
  .aviation-overview { padding: 78px 0 40px; }
  .aviation-proof { grid-template-columns: 1fr; margin-top: 46px; }
  .aviation-proof a { min-height: 72px; border-right: 0; border-bottom: 1px solid #d7d4cc; }
  .aviation-proof a:last-child { border-bottom: 0; }
  .aviation-feature { padding: 84px 0; }
  .aviation-feature__grid { grid-template-columns: 1fr; gap: 56px; }
  .aviation-feature.is-flipped .aviation-feature__copy { order: 0; }
  .aviation-feature__media { min-height: 620px; }
  .aviation-sources { padding: 88px 0 92px; }
  .aviation-sources__grid { grid-template-columns: 1fr; margin-top: 46px; }
  .aviation-sources__grid article { min-height: 220px; }
  .aviation-sources__grid p { margin-top: 48px; }
  .aviation-limits { padding: 88px 0; }
  .aviation-limits__grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 480px) {
  .aviation-hero { padding-top: 34px; }
  .aviation-hero .crumb { margin-bottom: 18px; }
  .aviation-hero h1 { margin-top: 10px; }
  .aviation-hero .cta-row .btn { width: 100%; }
  .aviation-hero__facts { gap: 12px 18px; }
  .aviation-hero__product { min-height: 570px; }
  .aviation-live-tag { top: 67px; right: 0; }
  .aviation-phone--hero { width: min(92%, 322px); }
  .aviation-feature__media { min-height: 590px; }
  .aviation-feature__media .aviation-phone { width: min(92%, 320px); }
  .aviation-phone figcaption { flex-direction: column; gap: 3px; }
  .aviation-sources__grid article { padding: 26px 22px; }
}