/* =========================================================================
   TELDIO — PATTERN LAYOUT CSS
   --------------------------------------------------------------------------
   Section/layout classes used by the registered block patterns (/patterns/).
   components.css is kept a verbatim copy of the design-system source; anything
   promoted from Homepage.html's page-only `.hp-*` styles lives here as reusable
   `.tdo-*` classes. Loaded after components.css; references tokens.css vars.
   ========================================================================= */

/* =========================================================================
   LAYOUT — full-bleed sections butt together
   WordPress adds a block-gap margin between top-level site blocks, which lets
   the Paper body show as white bands between the dark promo bar / header /
   hero / footer. These sections manage their own vertical padding, so drop the
   inter-section gap.
   ========================================================================= */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* =========================================================================
   HERO — feature variant (dark, gradient glow + grid mask + meta row)
   Compose with: .tdo-hero .tdo-hero--dark .tdo-hero--feature
   ========================================================================= */
.tdo-hero--feature {
  padding-block: clamp(112px, 16vw, 200px) clamp(72px, 10vw, 132px);
}
.tdo-hero__inner { position: relative; z-index: 1; }

.tdo-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 88% 28%, rgba(160, 173, 57, 0.22), transparent 70%),
    radial-gradient(700px 500px at 8% 78%, rgba(8, 97, 171, 0.18), transparent 70%),
    repeating-linear-gradient(45deg, transparent, transparent 32px, rgba(255, 255, 255, 0.025) 32px, rgba(255, 255, 255, 0.025) 33px);
}
.tdo-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Mono "spec" meta row beneath the hero CTAs */
.tdo-hero__meta {
  margin-top: var(--tdo-space-9);
  padding-top: var(--tdo-space-5);
  border-top: 1px solid #2E2E2E;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tdo-space-5);
  font-family: var(--tdo-font-mono);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-grey-400);
}
.tdo-hero__meta-num {
  display: block;
  margin-bottom: 6px;
  color: var(--tdo-accent);
  font-family: var(--tdo-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tdo-tracking-eyebrow);
}
@media (max-width: 800px) {
  .tdo-hero__meta { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   HERO — Cover-based hybrid
   Built on core/cover so the background image is editable in wp-admin.
   No image  -> the dark gradient + grid treatment below is the default
                (ships in the theme, deploys everywhere, version-controlled).
   Image set -> Cover renders it over this background; the :has() scrim adds
                contrast automatically (design-system requirement).
   ------------------------------------------------------------------------- */
.tdo-hero-cover.wp-block-cover {
  /* let .tdo-hero--feature padding define height; no forced min-height/center */
  min-height: 0;
  justify-content: flex-start;
}
.tdo-hero-cover {
  background-color: var(--tdo-graphite-2);
  background-image:
    radial-gradient(900px 500px at 88% 28%, rgba(160, 173, 57, 0.22), transparent 70%),
    radial-gradient(700px 500px at 8% 78%, rgba(8, 97, 171, 0.18), transparent 70%),
    repeating-linear-gradient(45deg, transparent, transparent 32px, rgba(255, 255, 255, 0.025) 32px, rgba(255, 255, 255, 0.025) 33px);
}
/* -------------------------------------------------------------------------
   HERO — routed signal stream (CSS-only, compositor-driven; no JS)
   Chaotic weaving entries on the left resolve through a core into orderly
   lanes on the right. Sits behind the content; `screen` blend makes the dots
   glow against the gradient. Hidden under reduced-motion and when an image
   override is set (the image then wins).
   ------------------------------------------------------------------------- */
.tdo-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.tdo-flow__rails line { stroke: #A0AD39; stroke-width: 1; opacity: 0.18; }
.tdo-flow__core { transform-origin: 600px 300px; animation: tdo-flow-pulse 4s ease-in-out infinite; }
.tdo-flow__dot {
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: tdo-flow-move var(--dur) linear infinite, tdo-flow-fade var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.tdo-flow .r1 { offset-path: path("M -80 40  C 120 140 260 -30 360 110 S 520 300 600 300 L 720 220 L 1260 220"); }
.tdo-flow .r2 { offset-path: path("M -80 95  C 140 -10 240 260 360 180 S 520 300 600 300 L 720 300 L 1260 300"); }
.tdo-flow .r3 { offset-path: path("M -80 160 C 120 280 280 60  380 200 S 520 300 600 300 L 720 220 L 1260 220"); }
.tdo-flow .r4 { offset-path: path("M -80 230 C 160 120 260 400 380 260 S 520 300 600 300 L 720 300 L 1260 300"); }
.tdo-flow .r5 { offset-path: path("M -80 290 C 140 420 280 160 380 320 S 520 300 600 300 L 720 300 L 1260 300"); }
.tdo-flow .r6 { offset-path: path("M -80 350 C 160 220 260 480 380 320 S 520 300 600 300 L 720 380 L 1260 380"); }
.tdo-flow .r7 { offset-path: path("M -80 420 C 120 540 280 280 380 400 S 520 300 600 300 L 720 380 L 1260 380"); }
.tdo-flow .r8 { offset-path: path("M -80 490 C 160 360 260 600 380 420 S 520 300 600 300 L 720 300 L 1260 300"); }
.tdo-flow .r9 { offset-path: path("M -80 560 C 140 460 280 620 380 460 S 520 300 600 300 L 720 380 L 1260 380"); }
@keyframes tdo-flow-move { to { offset-distance: 100%; } }
@keyframes tdo-flow-fade { 0% { opacity: 0; } 12% { opacity: 0.6; } 78% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes tdo-flow-pulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .tdo-flow { display: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-flow { display: none; }
/* offset-distance can't be composited: 60 dots = per-frame main-thread style
   recalc, which mobile CPUs pay for in TBT/battery. Rails stay; dots go. */
@media (hover: none) and (pointer: coarse) { .tdo-flow__dot { display: none; } }
/* anim-pause.js sets this while a backdrop is scrolled out of view. */
.tdo-anim-paused, .tdo-anim-paused * { animation-play-state: paused !important; }

/* -------------------------------------------------------------------------
   HERO — woven mesh (Teldio Fabric flagship; CSS-only, no JS)
   A warp/weft lattice with a few glowing intersection "knots" — a literal
   nod to "Fabric", and deliberately distinct from the homepage's .tdo-flow
   signal-stream. Masked toward the right so it never competes with the
   headline. Knots twinkle (opacity only, for cross-browser safety); motion
   stops under reduced-motion, and an editor's background image overrides it.
   ------------------------------------------------------------------------- */
.tdo-weave {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
}
.tdo-weave__warp { stroke: #A0AD39; stroke-width: 1; opacity: 0.22; }
.tdo-weave__weft { stroke: #8F9A4F; stroke-width: 1; opacity: 0.16; stroke-dasharray: 34 14; }
.tdo-weave__knot { fill: #C2CF55; opacity: 0.4; animation: tdo-weave-knot 4s ease-in-out infinite; }
.tdo-weave__knot--blue { fill: #7DB6EC; }
@keyframes tdo-weave-knot { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
/* System-icon nodes seated on the weave (video, radio, access, sensors, …) */
.tdo-weave__node { opacity: 0.5; }
.tdo-weave__node--lit { opacity: 0.9; }
.tdo-weave__ring { fill: none; stroke: #A0AD39; stroke-width: 1; opacity: 0.22; }
.tdo-weave__node--lit .tdo-weave__ring { opacity: 0.4; }
.tdo-weave__sys { fill: none; stroke: #A0AD39; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tdo-weave__sys--blue { stroke: #7DB6EC; }
@media (prefers-reduced-motion: reduce) { .tdo-weave__knot { animation: none; opacity: 0.7; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-weave { display: none; }

/* -------------------------------------------------------------------------
   HERO — live-map field (Teldio TruFleet flagship; CSS-only, no JS)
   A faint street/topographic grid with roads, a dashed route, and glowing
   location pins — echoes the "one live map" product idea and is distinct from
   the homepage signal-stream. Masked toward the right of the headline.
   Mostly static; pins ping. Hidden under reduced-motion / image override.
   ------------------------------------------------------------------------- */
.tdo-mapfield {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 105% at 80% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(125% 105% at 80% 40%, #000 30%, transparent 80%);
}
.tdo-mapfield__minor { stroke: #A0AD39; stroke-width: 1; opacity: 0.09; }
.tdo-mapfield__road  { stroke: #A0AD39; stroke-width: 1.5; opacity: 0.30; fill: none; stroke-linecap: round; }
.tdo-mapfield__route { stroke: #7DB6EC; stroke-width: 1.5; opacity: 0.55; fill: none; stroke-dasharray: 5 9; stroke-linecap: round; }
.tdo-mapfield__pin   { fill: none; stroke: #C2CF55; stroke-width: 1.6; stroke-linejoin: round; }
.tdo-mapfield__pin--blue { stroke: #7DB6EC; }
.tdo-mapfield__dot   { fill: #C2CF55; }
.tdo-mapfield__dot--blue { fill: #7DB6EC; }
.tdo-mapfield__ping  { fill: none; stroke: #C2CF55; stroke-width: 1.25; opacity: 0; animation: tdo-mapfield-ping 4s ease-out infinite; }
@keyframes tdo-mapfield-ping { 0% { transform: scale(0.3); opacity: 0.6; } 80% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tdo-mapfield__ping { animation: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-mapfield { display: none; }

/* -------------------------------------------------------------------------
   HERO — circuit traces (Teldio Edge Gateway hardware layer; CSS-only, no JS)
   Orthogonal PCB-style copper traces routing to pads and vias, with signal
   pulses riding the wires (offset-path set inline per trace). Evokes wired,
   physical hardware; distinct from the homepage signal-stream. Masked toward
   the right; pulses stop under reduced-motion and hide under an image override.
   ------------------------------------------------------------------------- */
.tdo-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 105% at 80% 42%, #000 30%, transparent 80%);
          mask-image: radial-gradient(125% 105% at 80% 42%, #000 30%, transparent 80%);
}
.tdo-circuit__trace { stroke: #A0AD39; stroke-width: 1.5; fill: none; opacity: 0.30; stroke-linecap: round; stroke-linejoin: round; }
.tdo-circuit__trace--dim { opacity: 0.15; }
.tdo-circuit__pad { fill: #A0AD39; opacity: 0.55; }
.tdo-circuit__via { fill: #1A1A1A; stroke: #A0AD39; stroke-width: 1.5; opacity: 0.6; }
.tdo-circuit__via--blue { stroke: #7DB6EC; }
.tdo-circuit__pulse { offset-rotate: 0deg; animation: tdo-circuit-pulse var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes tdo-circuit-pulse { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .tdo-circuit__pulse { display: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-circuit { display: none; }

/* -------------------------------------------------------------------------
   HERO — asset tag grid (Inventory Management; CSS-only, no JS)
   A board of asset/radio "tags" with status dots (green = checked in,
   blue = checked out; a few pulse as live check-ins). Evokes "who has what"
   at a glance. Masked toward the right; pulse stops under reduced-motion and
   hides under an image override.
   ------------------------------------------------------------------------- */
.tdo-tags {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 110% at 80% 42%, #000 28%, transparent 80%);
          mask-image: radial-gradient(125% 110% at 80% 42%, #000 28%, transparent 80%);
}
.tdo-tags__tag { fill: none; stroke: #A0AD39; stroke-width: 1.25; opacity: 0.22; }
.tdo-tags__tag--out { opacity: 0.42; }
.tdo-tags__label { stroke: #A0AD39; stroke-width: 1; opacity: 0.16; stroke-linecap: round; }
.tdo-tags__dot { fill: #A0AD39; opacity: 0.45; }
.tdo-tags__dot--out { fill: #7DB6EC; opacity: 0.75; }
.tdo-tags__dot--live { animation: tdo-tags-pulse 3.6s ease-in-out infinite; }
@keyframes tdo-tags-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tdo-tags__dot--live { animation: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-tags { display: none; }

/* -------------------------------------------------------------------------
   HERO — solution-page backdrops (CSS-only; markup injected at render time
   by inc/hero-backdrops.php). Same language as the product backdrops: thin
   green strokes, occasional blue accents, right-weighted mask, no client JS.
   ------------------------------------------------------------------------- */
.tdo-routes, .tdo-floorplan, .tdo-alarmwave, .tdo-branches, .tdo-busmesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
}

/* Routes (GPS Tracking): open roads, waypoints, vehicles riding the curves */
.tdo-routes__road { stroke: #A0AD39; stroke-width: 1.5; opacity: 0.25; fill: none; stroke-linecap: round; }
.tdo-routes__route { stroke: #7DB6EC; stroke-width: 1.5; opacity: 0.45; fill: none; stroke-dasharray: 4 10; stroke-linecap: round; }
.tdo-routes__wp { fill: none; stroke: #C2CF55; stroke-width: 1.5; opacity: 0.5; }
.tdo-routes__wp--blue { stroke: #7DB6EC; }
.tdo-routes__wpdot { fill: #C2CF55; opacity: 0.6; }
.tdo-routes__veh { fill: #C2CF55; offset-rotate: 0deg; animation: tdo-routes-move var(--dur) linear infinite; animation-delay: var(--delay); }
.tdo-routes__veh--blue { fill: #7DB6EC; }
@keyframes tdo-routes-move { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .tdo-routes__veh { display: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-routes { display: none; }

/* Floorplan (Indoor Tracking): rooms, beacon ripples, personnel dots */
.tdo-floorplan__wall { stroke: #A0AD39; stroke-width: 1.25; opacity: 0.22; fill: none; stroke-linejoin: round; }
.tdo-floorplan__ap { fill: #A0AD39; opacity: 0.55; }
.tdo-floorplan__ripple { fill: none; stroke: #A0AD39; stroke-width: 1; opacity: 0; animation: tdo-floorplan-ripple 3.6s ease-out infinite; }
.tdo-floorplan__person { fill: #C2CF55; opacity: 0.75; }
.tdo-floorplan__person--blue { fill: #7DB6EC; }
.tdo-floorplan__person--live { animation: tdo-floorplan-live 3.2s ease-in-out infinite; }
@keyframes tdo-floorplan-ripple { 0% { opacity: 0.5; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes tdo-floorplan-live { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .tdo-floorplan__ripple, .tdo-floorplan__person--live { animation: none; } .tdo-floorplan__ripple { opacity: 0.25; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-floorplan { display: none; }

/* Alarmwave (Alarm Management): signal traces with spikes + radiating rings */
.tdo-alarmwave__trace { stroke: #A0AD39; stroke-width: 1.5; opacity: 0.28; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tdo-alarmwave__trace--dim { opacity: 0.13; }
.tdo-alarmwave__ring { fill: none; stroke: #C2CF55; stroke-width: 1.25; opacity: 0; animation: tdo-alarmwave-ring 4.2s ease-out infinite; }
.tdo-alarmwave__ring--blue { stroke: #7DB6EC; }
.tdo-alarmwave__dot { fill: #C2CF55; opacity: 0.7; }
.tdo-alarmwave__dot--blue { fill: #7DB6EC; }
@keyframes tdo-alarmwave-ring { 0% { transform: scale(0.25); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tdo-alarmwave__ring { animation: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-alarmwave { display: none; }

/* Branches (Security Automation): if-this-then-that decision tree, pulses
   riding the elbowed branch lines */
.tdo-branches__line { stroke: #A0AD39; stroke-width: 1.5; opacity: 0.25; fill: none; stroke-linejoin: round; }
.tdo-branches__line--dim { opacity: 0.12; }
.tdo-branches__node { fill: none; stroke: #A0AD39; stroke-width: 1.5; opacity: 0.42; }
.tdo-branches__node--blue { stroke: #7DB6EC; }
.tdo-branches__pulse { fill: #C2CF55; offset-rotate: 0deg; animation: tdo-branches-move var(--dur) linear infinite; animation-delay: var(--delay); }
.tdo-branches__pulse--blue { fill: #7DB6EC; }
@keyframes tdo-branches-move { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .tdo-branches__pulse { display: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-branches { display: none; }

/* Busmesh (System Integration): many systems tapping one bus */
.tdo-busmesh__bus { stroke: #A0AD39; stroke-width: 2; opacity: 0.4; stroke-linecap: round; }
.tdo-busmesh__tap { stroke: #A0AD39; stroke-width: 1.25; opacity: 0.22; fill: none; stroke-linejoin: round; }
.tdo-busmesh__node { fill: none; stroke: #A0AD39; stroke-width: 1.5; opacity: 0.38; }
.tdo-busmesh__node--blue { stroke: #7DB6EC; }
.tdo-busmesh__pad { fill: #A0AD39; opacity: 0.5; }
.tdo-busmesh__pulse { fill: #C2CF55; offset-rotate: 0deg; animation: tdo-busmesh-move var(--dur) linear infinite; animation-delay: var(--delay); }
.tdo-busmesh__pulse--blue { fill: #7DB6EC; }
@keyframes tdo-busmesh-move { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .tdo-busmesh__pulse { display: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-busmesh { display: none; }

/* Cams (Avigilon partner): camera nodes with fields of view, one sweeping,
   and an event ring where coverage overlaps */
.tdo-cams {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
}
.tdo-cams__node { fill: none; stroke: #A0AD39; stroke-width: 1.5; opacity: 0.5; }
.tdo-cams__node--blue { stroke: #7DB6EC; }
.tdo-cams__dot { fill: #A0AD39; opacity: 0.6; }
.tdo-cams__fov { fill: #A0AD39; fill-opacity: 0.06; stroke: #A0AD39; stroke-width: 1; stroke-opacity: 0.22; }
.tdo-cams__fov--blue { fill: #7DB6EC; fill-opacity: 0.06; stroke: #7DB6EC; stroke-opacity: 0.25; }
.tdo-cams__fov--sweep { animation: tdo-cams-sweep 7s ease-in-out infinite alternate; }
.tdo-cams__ring { fill: none; stroke: #C2CF55; stroke-width: 1.25; opacity: 0; animation: tdo-cams-ring 4.5s ease-out infinite; }
.tdo-cams__evt { fill: #C2CF55; opacity: 0.75; }
@keyframes tdo-cams-sweep { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes tdo-cams-ring { 0% { transform: scale(0.25); opacity: 0.5; } 70% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tdo-cams__fov--sweep, .tdo-cams__ring { animation: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-cams { display: none; }

/* Mesh (Solutions hub): an irregular network of interconnected capabilities —
   deliberately looser than the homepage's ordered signal stream */
.tdo-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 78% 38%, #000 32%, transparent 78%);
}
.tdo-mesh__edge { stroke: #A0AD39; stroke-width: 1.25; opacity: 0.2; }
.tdo-mesh__edge--dim { opacity: 0.1; }
.tdo-mesh__node { fill: none; stroke: #A0AD39; stroke-width: 1.5; opacity: 0.45; }
.tdo-mesh__node--blue { stroke: #7DB6EC; }
.tdo-mesh__node--twinkle { animation: tdo-mesh-twinkle 4s ease-in-out infinite; }
.tdo-mesh__pulse { fill: #C2CF55; offset-rotate: 0deg; animation: tdo-mesh-move var(--dur) linear infinite; animation-delay: var(--delay); }
.tdo-mesh__pulse--blue { fill: #7DB6EC; }
@keyframes tdo-mesh-move { to { offset-distance: 100%; } }
@keyframes tdo-mesh-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .tdo-mesh__pulse { display: none; } .tdo-mesh__node--twinkle { animation: none; } }
.tdo-hero-cover:has(img.wp-block-cover__image-background) .tdo-mesh { display: none; }

/* =========================================================================
   SECTION HEAD — eyebrow + heading + intro (used atop content sections)
   ========================================================================= */
.tdo-section-head { max-width: 62ch; margin-bottom: var(--tdo-space-7); }
.tdo-section-head .tdo-eyebrow { margin-bottom: var(--tdo-space-4); }
.tdo-section-head__intro { color: var(--tdo-text-muted); margin: var(--tdo-space-4) 0 0; }

/* =========================================================================
   MEDIA + TEXT — alternating image/copy row
   ========================================================================= */
.tdo-mediatext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tdo-space-8);
  align-items: center;
}
.tdo-mediatext__media { aspect-ratio: 4 / 3; border-radius: var(--tdo-radius-md); }
.tdo-mediatext__body { display: flex; flex-direction: column; gap: var(--tdo-space-5); }
.tdo-mediatext__body > * { margin: 0; } /* neutralize inline/UA margins; gap owns spacing */
.tdo-mediatext__body .tdo-link-arrow { align-self: flex-start; margin-top: var(--tdo-space-2); }
.tdo-mediatext--reverse .tdo-mediatext__media { order: 2; }
@media (max-width: 860px) {
  .tdo-mediatext { grid-template-columns: 1fr; gap: var(--tdo-space-6); }
  .tdo-mediatext--reverse .tdo-mediatext__media { order: 0; }
}

/* =========================================================================
   PROCESS / PIPELINE STEPS — icon ring + connector line
   ========================================================================= */
.tdo-pipeline {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tdo-space-6);
}
@media (max-width: 900px) { .tdo-pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tdo-pipeline { grid-template-columns: 1fr; } }

.tdo-pipeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Connecting line through icon centres (desktop only) */
@media (min-width: 901px) {
  .tdo-pipeline__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px; /* half of 56px icon */
    left: calc(50% + 28px); /* right edge of this icon */
    right: calc(-50% - 28px + var(--tdo-space-6)); /* left edge of next icon */
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(160,173,57,.5),
      rgba(160,173,57,.15)
    );
    z-index: 0;
  }
}

/* Icon ring */
.tdo-pipeline__icon-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: var(--tdo-space-5);
}
.tdo-pipeline__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(160,173,57,.12);
  border: 1px solid rgba(160,173,57,.35);
  display: grid; place-items: center;
  color: var(--tdo-accent);
  transition: background var(--tdo-dur-base) ease,
              border-color var(--tdo-dur-base) ease;
}
.tdo-pipeline__step:hover .tdo-pipeline__icon {
  background: rgba(160,173,57,.22);
  border-color: rgba(160,173,57,.7);
}

/* Step text */
.tdo-pipeline__num {
  font-family: var(--tdo-font-mono);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-accent);
  margin-bottom: var(--tdo-space-2);
}
.tdo-pipeline__title {
  font-family: var(--tdo-font-display);
  font-weight: 600;
  font-size: var(--tdo-fs-title);
  letter-spacing: -0.01em;
  margin: 0 0 var(--tdo-space-2);
  color: var(--tdo-paper);
}
.tdo-pipeline__body {
  color: var(--tdo-text-muted);
  margin: 0;
  font-size: var(--tdo-fs-body-sm);
}

/* A badge sitting directly in a (flex-column) card must not stretch full-width */
.tdo-card > .tdo-badge { align-self: flex-start; }

/* Dynamic post grid (Query Loop) styled as resource cards */
.tdo-postgrid .wp-block-post-template { gap: var(--tdo-space-5); }
.tdo-postgrid .wp-block-post { margin: 0; }           /* card styling lives on the inner group */
/* Fill the row with however many cards there are (auto-fit collapses empty
   tracks); WP's minimumColumnWidth uses auto-fill, which reserves blank tracks
   and pushes a 3-card row to the left. Stays responsive (wraps below ~16rem). */
.tdo-postgrid .wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) !important; }
/* Featured image must bleed to the card's top + side edges. Higher specificity
   than core's figure.wp-block-post-featured-image margin, which was leaving a
   gap above the image inside the card. */
.tdo-card > figure.tdo-card__media { margin: calc(var(--tdo-space-6) * -1) calc(var(--tdo-space-6) * -1) 0; }
.tdo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdo-card > .wp-block-post-title,
.tdo-card > .wp-block-post-date { margin: 0; }         /* spacing handled by the card's flex gap */
.tdo-card > .wp-block-post-date { color: var(--tdo-text-muted); font-size: var(--tdo-fs-body-sm); }
.tdo-card > .wp-block-post-terms { align-self: flex-start; } /* keep the category badge pill-sized */

/* Category terms: render EACH category as its own pill so multiple categories
   wrap cleanly instead of overflowing a single pill. */
.wp-block-post-terms.tdo-badge--accent {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tdo-space-2);
	background: none;
	border: 0;
	padding: 0;
}
.wp-block-post-terms.tdo-badge--accent a {
	background: var(--tdo-accent-tint);
	color: var(--tdo-graphite-2);
	padding: 4px 10px;
	border-radius: var(--tdo-radius-pill);
	font-family: var(--tdo-font-display);
	font-size: var(--tdo-fs-micro);
	font-weight: 500;
	letter-spacing: var(--tdo-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5;
}
.wp-block-post-terms.tdo-badge--accent .wp-block-post-terms__separator { display: none; }

/* Article prose spacing. components.css zeroes all post-content child margins
   (block-gap handles spacing for *block* content); imported/classic article HTML
   needs real margins restored around headings, paragraphs, lists, and media. */
.wp-block-post-content > h2 { margin-top: var(--tdo-space-7) !important; margin-bottom: var(--tdo-space-3) !important; }
.wp-block-post-content > h3 { margin-top: var(--tdo-space-6) !important; margin-bottom: var(--tdo-space-2) !important; }
.wp-block-post-content > h4 { margin-top: var(--tdo-space-5) !important; margin-bottom: var(--tdo-space-2) !important; }
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > figure,
.wp-block-post-content > blockquote { margin-bottom: var(--tdo-space-4) !important; }
.wp-block-post-content > ul,
.wp-block-post-content > ol { padding-left: 1.4em; }
.wp-block-post-content li { margin: var(--tdo-space-1) 0; }
.wp-block-post-content > *:first-child { margin-top: 0 !important; }

/* Article images (classic-editor markup: aligncenter / size-large, no figure wrapper).
   Responsive sizing + consistent vertical spacing regardless of p/span wrapping. */
.wp-block-post-content img { max-width: 100%; height: auto; }
.wp-block-post-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-block-post-content img.aligncenter,
.wp-block-post-content img.alignnone,
.wp-block-post-content img.size-large,
.wp-block-post-content img.size-full,
.wp-block-post-content figure { display: block; margin-top: var(--tdo-space-7); margin-bottom: var(--tdo-space-7); }
.wp-block-post-content img.alignleft  { float: left;  margin: var(--tdo-space-1) var(--tdo-space-6) var(--tdo-space-4) 0; max-width: 50%; }
.wp-block-post-content img.alignright { float: right; margin: var(--tdo-space-1) 0 var(--tdo-space-4) var(--tdo-space-6); max-width: 50%; }
.wp-block-post-content .wp-caption { max-width: 100%; margin: var(--tdo-space-7) auto; }
.wp-block-post-content .wp-caption img { margin: 0; }
.wp-block-post-content .wp-caption-text { font-size: var(--tdo-fs-body-sm); color: var(--tdo-text-muted); text-align: center; margin-top: var(--tdo-space-2); }

/* =========================================================================
   TIER / PRICING CARDS
   ========================================================================= */
.tdo-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tdo-space-5); align-items: start; }
@media (max-width: 720px) { .tdo-tiers { grid-template-columns: 1fr; } }
.tdo-tier--featured { border-color: var(--tdo-accent); border-width: var(--tdo-border-emphasis); }
.tdo-tier__name { font-family: var(--tdo-font-display); font-weight: 700; font-size: var(--tdo-fs-display-sm); letter-spacing: -0.01em; margin: 0; }
.tdo-tier__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tdo-space-3); }
.tdo-tier__features li { display: flex; align-items: flex-start; gap: var(--tdo-space-3); color: var(--tdo-text-muted); }
.tdo-tier__features .tdo-icon { color: var(--tdo-accent); flex: none; margin-top: 2px; }

/* =========================================================================
   CTA BAND — dark closer with green glow
   ========================================================================= */
.tdo-cta {
  position: relative;
  overflow: hidden;
  background: var(--tdo-graphite-2);
  color: var(--tdo-paper);
  padding-block: var(--tdo-space-10);
}
.tdo-cta__bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 400px at 50% 50%, rgba(160, 173, 57, 0.12), transparent 70%);
}
.tdo-cta__inner { position: relative; z-index: 1; text-align: center; }
.tdo-cta__title {
  font-family: var(--tdo-font-display); font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.05;
  letter-spacing: var(--tdo-tracking-tight);
  margin: 0 auto var(--tdo-space-5); max-width: 18ch; text-wrap: balance;
}
.tdo-cta__sub {
  color: var(--tdo-grey-400); font-size: var(--tdo-fs-body-lg);
  max-width: 52ch; margin: 0 auto var(--tdo-space-7);
}
.tdo-cta__actions { display: flex; gap: var(--tdo-space-3); justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   QUOTE SLIDER — dark two-column testimonials; swipe (no-JS) + arrows/dots (JS)
   ========================================================================= */
.tdo-quotes { background: var(--tdo-graphite-2); color: var(--tdo-paper); }
.tdo-quotes__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tdo-quotes__track::-webkit-scrollbar { display: none; }
.tdo-quotes__slide { flex: 0 0 100%; scroll-snap-align: center; }
.tdo-quotes__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 820px) { .tdo-quotes__grid { grid-template-columns: 1fr; gap: var(--tdo-space-6); } }
.tdo-quotes__q {
  font-family: var(--tdo-font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.18; letter-spacing: -0.01em;
  margin: var(--tdo-space-5) 0 var(--tdo-space-6); text-wrap: balance;
}
.tdo-quotes__attr { display: flex; align-items: center; gap: var(--tdo-space-4); }
.tdo-quotes__avatar { width: 44px; height: 44px; border-radius: 50%; background: #3A3A3A; flex: none; }
.tdo-quotes__name { font-weight: 700; }
.tdo-quotes__role { color: var(--tdo-grey-400); font-size: var(--tdo-fs-body-sm); }
.tdo-quotes__img {
  aspect-ratio: 4 / 3; border-radius: var(--tdo-radius-md);
  background: var(--tdo-ink); border: 1px solid #2E2E2E;
  display: grid; place-items: center;
  font-family: var(--tdo-font-mono); font-size: var(--tdo-fs-body-sm); color: var(--tdo-grey-500);
}
/* controls are revealed only when the script enhances the slider */
.tdo-quotes__controls { display: none; align-items: center; justify-content: space-between; gap: var(--tdo-space-4); margin-top: var(--tdo-space-7); }
.tdo-quotes.is-enhanced .tdo-quotes__controls { display: flex; }
.tdo-quotes__dots { display: flex; gap: var(--tdo-space-2); }
.tdo-quotes__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #3A3A3A; cursor: pointer; transition: background var(--tdo-dur-base) var(--tdo-ease-standard); }
.tdo-quotes__dot[aria-current="true"] { background: var(--tdo-accent); }
.tdo-quotes__nav { display: flex; gap: var(--tdo-space-2); }
.tdo-quotes__arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #3A3A3A; background: transparent; color: var(--tdo-paper); cursor: pointer; transition: border-color var(--tdo-dur-base) var(--tdo-ease-standard); }
.tdo-quotes__arrow:hover { border-color: var(--tdo-paper); }
.tdo-quotes__arrow:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tdo-quotes__track { scroll-behavior: auto; } }

/* =========================================================================
   COMPARISON TABLE — horizontal-scroll on small screens
   ========================================================================= */
.tdo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tdo-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.tdo-table th, .tdo-table td { padding: var(--tdo-space-4) var(--tdo-space-5); border-bottom: 1px solid var(--tdo-border); vertical-align: middle; }
.tdo-table thead th { font-family: var(--tdo-font-display); font-weight: 600; text-align: center; }
.tdo-table thead th:first-child { text-align: left; }
.tdo-table tbody th { font-weight: 400; text-align: left; color: var(--tdo-text); }
.tdo-table td { text-align: center; color: var(--tdo-text-muted); }
.tdo-table__yes { color: var(--tdo-accent); }
.tdo-table__no { color: var(--tdo-grey-400); }
.tdo-table__col--featured { background: var(--tdo-accent-tint); color: var(--tdo-graphite-2); }

/* =========================================================================
   TABS — CSS-only (hidden radios + :has); reusable via PHP-unique ids
   ========================================================================= */
.tdo-tabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tdo-tabs__list { display: flex; gap: var(--tdo-space-5); border-bottom: 1px solid var(--tdo-border); flex-wrap: wrap; }
.tdo-tabs__label { display: inline-block; padding: var(--tdo-space-3) 0; margin-bottom: -1px; cursor: pointer; font-family: var(--tdo-font-display); font-weight: 500; color: var(--tdo-text-muted); border-bottom: 2px solid transparent; transition: color var(--tdo-dur-base) var(--tdo-ease-standard); }
.tdo-tabs__label:hover { color: var(--tdo-text); }
.tdo-tabs__panel { display: none; padding-top: var(--tdo-space-6); }
/* nth pairs (supports up to 5 tabs) */
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(1):checked) .tdo-tabs__panel:nth-of-type(1),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(2):checked) .tdo-tabs__panel:nth-of-type(2),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(3):checked) .tdo-tabs__panel:nth-of-type(3),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(4):checked) .tdo-tabs__panel:nth-of-type(4),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(5):checked) .tdo-tabs__panel:nth-of-type(5) { display: block; }
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(1):checked) .tdo-tabs__label:nth-of-type(1),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(2):checked) .tdo-tabs__label:nth-of-type(2),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(3):checked) .tdo-tabs__label:nth-of-type(3),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(4):checked) .tdo-tabs__label:nth-of-type(4),
.tdo-tabs:has(.tdo-tabs__radio:nth-of-type(5):checked) .tdo-tabs__label:nth-of-type(5) { color: var(--tdo-text); border-bottom-color: var(--tdo-accent); }
.tdo-tabs__radio:focus-visible ~ .tdo-tabs__list { outline: 2px solid var(--tdo-accent); outline-offset: 4px; }

/* =========================================================================
   FAQ / ACCORDION — native <details>
   ========================================================================= */
.tdo-faq { border-top: 1px solid var(--tdo-border); }
.tdo-faq__item { border-bottom: 1px solid var(--tdo-border); }
.tdo-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--tdo-space-5); padding-block: var(--tdo-space-5); cursor: pointer; font-family: var(--tdo-font-display); font-weight: 600; font-size: var(--tdo-fs-title); list-style: none; }
.tdo-faq__q::-webkit-details-marker { display: none; }
.tdo-faq__q .tdo-icon { flex: none; color: var(--tdo-text-muted); transition: transform var(--tdo-dur-base) var(--tdo-ease-standard); }
.tdo-faq__item[open] .tdo-faq__q .tdo-icon { transform: rotate(180deg); }
.tdo-faq__a { padding-bottom: var(--tdo-space-5); margin: 0; color: var(--tdo-text-muted); max-width: 72ch; }

/* =========================================================================
   SPEC / DEFINITION LIST
   ========================================================================= */
.tdo-specs { margin: 0; }
.tdo-specs__row { display: grid; grid-template-columns: 240px 1fr; gap: var(--tdo-space-5); padding-block: var(--tdo-space-4); border-bottom: 1px solid var(--tdo-border); }
@media (max-width: 600px) { .tdo-specs__row { grid-template-columns: 1fr; gap: var(--tdo-space-1); } }
.tdo-specs__term { font-family: var(--tdo-font-display); font-weight: 500; margin: 0; }
.tdo-specs__def { color: var(--tdo-text-muted); margin: 0; }

/* =========================================================================
   HUBSPOT / FORM WRAPPER — styled container for a third-party form embed
   ========================================================================= */
.tdo-formwrap {
  background: var(--tdo-bg-elevated);
  border: var(--tdo-border-hairline) solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  padding: var(--tdo-space-7);
}

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */
.tdo-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tdo-space-2); font-family: var(--tdo-font-display); font-size: var(--tdo-fs-body-sm); color: var(--tdo-text-muted); }
.tdo-breadcrumbs a { color: inherit; text-decoration: none; }
.tdo-breadcrumbs a:hover { color: var(--tdo-text); }
.tdo-breadcrumbs__sep { color: var(--tdo-grey-400); }
.tdo-breadcrumbs [aria-current="page"] { color: var(--tdo-text); }

/* =========================================================================
   IN-PAGE ANCHOR NAV — sticky jump links (smooth scroll; no JS)
   ========================================================================= */
.tdo-anchornav { position: sticky; top: 0; z-index: 50; background: var(--tdo-bg); border-bottom: 1px solid var(--tdo-border); }
.tdo-anchornav__list { display: flex; gap: var(--tdo-space-6); overflow-x: auto; scrollbar-width: none; padding-block: var(--tdo-space-4); }
.tdo-anchornav__list::-webkit-scrollbar { display: none; }
.tdo-anchornav a { white-space: nowrap; color: var(--tdo-text-muted); text-decoration: none; font-family: var(--tdo-font-display); font-weight: 500; font-size: var(--tdo-fs-body-sm); }
.tdo-anchornav a:hover { color: var(--tdo-text); }
/* smooth scrolling + offset so anchored sections clear the sticky nav */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.tdo-section[id], [id].tdo-section { scroll-margin-top: 88px; }

/* =========================================================================
   CALLOUT / NOTICE
   ========================================================================= */
.tdo-callout { display: flex; gap: var(--tdo-space-4); padding: var(--tdo-space-5) var(--tdo-space-6); border: 1px solid var(--tdo-border); border-left: 3px solid var(--tdo-accent); border-radius: var(--tdo-radius-md); background: var(--tdo-bg-elevated); }
.tdo-callout__icon { flex: none; color: var(--tdo-accent); }
/* Certification badge in a callout's icon slot (official colours, no filter).
   Double-class + element so it outranks `.wp-block-post-content img`'s
   height:auto (the blog image rule). */
.tdo-callout img.tdo-callout__badge { flex: none; display: block; width: auto; height: 96px; }
.tdo-callout__title { font-family: var(--tdo-font-display); font-weight: 600; margin: 0 0 var(--tdo-space-1); }
.tdo-callout__body { color: var(--tdo-text-muted); margin: 0; }
.tdo-callout--blue { border-left-color: var(--tdo-brand-blue); }
.tdo-callout--blue .tdo-callout__icon { color: var(--tdo-brand-blue); }
/* Feature callout — a larger, more prominent banner (partner/ecosystem) */
.tdo-callout--feature { gap: var(--tdo-space-5); padding: var(--tdo-space-7); border-left-width: 5px; background: var(--tdo-accent-tint); align-items: center; }
.tdo-callout--feature .tdo-callout__title { font-size: var(--tdo-fs-title); margin-bottom: var(--tdo-space-2); }
.tdo-callout--feature .tdo-callout__body { font-size: var(--tdo-fs-body-lg); }
/* when an editor sets a background image, scrim it for text contrast */
.tdo-hero-cover:has(img.wp-block-cover__image-background)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.40), rgba(15, 15, 15, 0.66));
}
.tdo-hero-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2; /* content sits above the motion canvas (z-index 1) */
  width: 100%;
  padding: 0; /* spacing handled by the inner .tdo-container */
}
/* Hero headline: scale down on small screens so long words can't overflow
   (the display-xl token's 3.25rem minimum is too large for narrow viewports). */
.tdo-hero__title {
  font-size: clamp(2.25rem, 8vw, 6rem);
  overflow-wrap: break-word;
}

/* =========================================================================
   FIND-YOUR-SOLUTION SELECTOR — 2-question modal (assets/js/solution-selector.js)
   ========================================================================= */
.tdo-selector {
  position: fixed;
  inset: 0;
  z-index: var(--tdo-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tdo-space-5);
}
.tdo-selector[hidden] { display: none; }
.tdo-selector-open { overflow: hidden; } /* set on <html> while the modal is up */

.tdo-selector__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
}

.tdo-selector__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - var(--tdo-space-7));
  overflow-y: auto;
  background: var(--tdo-bg-elevated);
  border: var(--tdo-border-hairline) solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  box-shadow: var(--tdo-shadow-lg);
  padding: var(--tdo-space-8) var(--tdo-space-7) var(--tdo-space-7);
}
@media (prefers-reduced-motion: no-preference) {
  .tdo-selector__panel { animation: tdo-selector-in var(--tdo-dur-slow) var(--tdo-ease-decel); }
  @keyframes tdo-selector-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

.tdo-selector__close {
  position: absolute;
  top: var(--tdo-space-4);
  right: var(--tdo-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--tdo-radius-pill);
  background: transparent;
  color: var(--tdo-text-muted);
  cursor: pointer;
  transition: background var(--tdo-dur-base) var(--tdo-ease-standard),
              color var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-selector__close:hover { background: var(--tdo-bg-subtle); color: var(--tdo-text); }
.tdo-selector__close:focus-visible { outline: none; box-shadow: var(--tdo-shadow-focus); }

.tdo-selector__eyebrow {
  display: block;
  font-family: var(--tdo-font-mono);
  font-size: var(--tdo-fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdo-text-muted);
  margin-bottom: var(--tdo-space-3);
}
.tdo-selector__title {
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-display-sm);
  font-weight: 600;
  margin: 0 0 var(--tdo-space-2);
}
.tdo-selector__title:focus { outline: none; }
.tdo-selector__sub { color: var(--tdo-text-muted); margin: 0 0 var(--tdo-space-6); }

.tdo-selector__options {
  display: flex;
  flex-direction: column;
  gap: var(--tdo-space-3);
}
.tdo-selector__option {
  display: flex;
  align-items: center;
  gap: var(--tdo-space-4);
  width: 100%;
  padding: var(--tdo-space-4) var(--tdo-space-5);
  border: var(--tdo-border-hairline) solid var(--tdo-border);
  border-radius: var(--tdo-radius-md);
  background: var(--tdo-bg);
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body);
  font-weight: 500;
  color: var(--tdo-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tdo-dur-base) var(--tdo-ease-standard),
              background var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-selector__option:hover { border-color: var(--tdo-text); background: var(--tdo-bg-elevated); }
.tdo-selector__option:focus-visible { outline: none; box-shadow: var(--tdo-shadow-focus); }
.tdo-selector__option-icon {
  display: inline-flex;
  flex: none;
  color: var(--tdo-text-muted);
}
.tdo-selector__option-chevron {
  flex: none;
  margin-left: auto;
  color: var(--tdo-grey-400);
  transition: transform var(--tdo-dur-base) var(--tdo-ease-standard);
}
.tdo-selector__option:hover .tdo-selector__option-chevron { transform: translateX(3px); color: var(--tdo-text); }

.tdo-selector__back {
  margin-top: var(--tdo-space-5);
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--tdo-font-display);
  font-size: var(--tdo-fs-body-sm);
  font-weight: 500;
  color: var(--tdo-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tdo-selector__back:hover { color: var(--tdo-text); }
.tdo-selector__back:focus-visible { outline: none; box-shadow: var(--tdo-shadow-focus); border-radius: var(--tdo-radius-sm); }

.tdo-selector__result-desc { max-width: 52ch; }
.tdo-selector__basis {
  font-family: var(--tdo-font-mono);
  font-size: var(--tdo-fs-body-sm);
  color: var(--tdo-text-muted);
  margin: 0 0 var(--tdo-space-6);
}
.tdo-selector__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tdo-space-3);
}

@media (max-width: 600px) {
  .tdo-selector { padding: var(--tdo-space-3); align-items: flex-end; }
  .tdo-selector__panel { padding: var(--tdo-space-7) var(--tdo-space-5) var(--tdo-space-5); max-height: calc(100dvh - var(--tdo-space-5)); }
  .tdo-selector__option { padding: var(--tdo-space-4); }
  .tdo-selector__cta-row .tdo-btn { width: 100%; }
}