/* /connect/ landing: the shell (site bar, headline band, footer), the stage (rail, the Website pane with its visitor
   picker, "Knows" chips and browser chassis with its two tabs, the Team phone and its label, the trace between them,
   panes, dock), the static first frame, the shared motion classes and the booking view. Port of /sign/demo/stage.css
   (ds- -> dc-, office -> web).
   Tokens come from tokens.css. On the navy ground text is --on-navy (white), --navy-body, --navy-meta or
   --connect-bright (YDO Connect's own green; white is never set on --connect). Orange appears only on Book a demo,
   the unread dot and the ring a person's next press carries. Hover and state changes move colour and border only;
   motion is opacity and transform only. Breakpoints: 700 / 899.98 / 1279.98 (director.js reads the same queries).
   From 1280 the floor is ALWAYS two columns: the Website pane and the Team phone, laid out from the first frame at
   their final sizes, sharing one top line (under the picker and the Knows chips) and one bottom line. */

/* white type on the navy ground (a token alias), and the iPhone's own colours: a third-party skin, kept here as local
   properties the way team.css keeps Slack's. These are the only raw colours in this file. */
:root { --on-navy: var(--surface); --ios-black: #000; --ios-edge: rgba(255,255,255,.28); --ios-lift: rgba(0,0,0,.7); }
/* the phone's scale is a NUMBER: registered, so the first frame can work it out from two lengths (the floor and the
   head) exactly as the director does, and the phone, its column and the website's zoom are final before any script */
@property --ph-scale { syntax: '<number>'; inherits: true; initial-value: 0.815; }
/* the docked phone's strip (900-1279): a length, so a browser that cannot work it out falls back to a real width */
@property --dock-w { syntax: '<length>'; inherits: true; initial-value: 281px; }

/* ---------- page chrome ---------- */
:where(.dc-bar, .dc-band, .dc-stage-in, .dc-foot) :where(h1, h2, h3, p, ol, ul, li, dl, dt, dd) { margin: 0; padding: 0; }
:where(.dc-bar, .dc-band, .dc-rail, .dc-foot, .dc-nojs) a { color: inherit; text-decoration: none; }
.dc-skip { position: absolute; left: 16px; top: -200px; z-index: 200; background: var(--surface); color: var(--navy); border: 1px solid var(--ctl-line); border-radius: var(--r-control); padding: 12px 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
.dc-skip:focus-visible { top: 12px; outline-color: var(--orange-ink); }

.dc-bar { background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.dc-bar-in { width: min(var(--stage-max-w), calc(100% - 64px)); height: var(--nav-h); margin: 0 auto; display: flex; align-items: center; gap: 16px; }
/* the logo slot: holds the owner's orbit lockup unaltered when it is supplied; until then the /products text wordmark */
.dc-lockup { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 32px; min-width: 240px; color: var(--on-navy); }
.dc-lockup > svg, .dc-lockup > img { display: block; height: 32px; width: auto; }
.dc-lockup::after { content: ''; position: absolute; inset: -6px 0; }   /* 44 px tall to a finger, the lockup's size unchanged */
.dc-word { font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--on-navy); }
.dc-tag { font-weight: 700; font-size: 10px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--navy-meta); border-left: 1px solid var(--navy-line); padding-left: 10px; }
.dc-hair { flex: none; width: 1px; height: 24px; background: var(--navy-line); }
.dc-product { position: relative; font-weight: 900; font-size: 15px; color: var(--connect-bright); }
.dc-product::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }   /* a 44 px target, the word's size unchanged */
.dc-bar-links { margin-left: auto; display: flex; align-items: center; gap: 20px; }
/* Details is a visible door beside Book a demo: a ghost button on navy (border + colour only on hover) */
.dc-details { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1.5px solid var(--navy-ctl); border-radius: var(--r-control); font-size: 14px; font-weight: 700; color: var(--on-navy); white-space: nowrap; transition: border-color var(--t-hover) ease; }
.dc-details::after { content: ''; position: absolute; inset: -5px 0; }
@media (hover:hover){ .dc-details:hover{ border-color: var(--on-navy); } }
.dc-cta { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-control); background: var(--orange); color: var(--navy); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background-color var(--t-hover) ease; }
.dc-cta::after { content: ''; position: absolute; inset: -4px 0; }
@media (hover:hover){ .dc-cta:hover{ background: var(--orange-hover); color: var(--navy); } }

.dc-band { background: var(--navy); }
.dc-band-in { width: min(var(--stage-max-w), calc(100% - 64px)); min-height: var(--band-h); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.dc-h1 { font-weight: 900; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); word-spacing: 0.05em; color: var(--on-navy); text-wrap: balance; }
.dc-h1-b { color: var(--connect-bright); }
/* without a script: one line under the headline, above the fold */
.dc-nojs { margin: 2px 0 10px; font-size: 13px; line-height: 1.5; color: var(--navy-body); }
.dc-nojs a { font-weight: 700; color: var(--on-navy); text-decoration: underline; text-underline-offset: 2px; }

.dc-foot { background: var(--navy); border-top: 1px solid var(--navy-line); color: var(--navy-meta); font-size: 13px; }
.dc-foot-in { width: min(var(--stage-max-w), calc(100% - 64px)); margin: 0 auto; padding: 16px 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.dc-foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.dc-foot a { display: inline-block; padding: 13px 0; font-weight: 700; color: var(--navy-body); transition: color var(--t-hover) ease; }
@media (hover:hover){ .dc-foot a:hover{ color: var(--on-navy); } }

/* ---------- the stage: one navy ground in every scene; the headline, the rail and the Website pane share one left axis.
   --webhead-h  the picker + Knows rows above the browser (fixed per breakpoint whatever the chips say)
   --team-head-h the Team label's row above the phone: the phone never climbs into it
   --ph-scale / --ph-col / --dock-w  worked out here from the floor for the first frame (from 900), as the director does;
   the director writes --ph-hit, and --ph-scale while the docked phone is expanded ---------- */
.dc-stage { --ph-scale: 0.815; --ph-col: 328px; --ph-hit: 0px; --dock-w: calc(402px * 0.62 + 32px); --webhead-h: 74px; --team-head-h: 40px; --rail-h: 44px; --know-h: 26px; position: relative; background: var(--stage); color: var(--on-navy); }
.dc-stage:focus { outline: none; }
.dc-stage-in { width: min(var(--stage-max-w), calc(100% - 64px)); margin: 0 auto; padding-bottom: 16px; }
/* the Website | Team switch: phones only (it sits under the rail, where it acts) */
.dc-panes { display: none; }
/* before the director boots, the reserved switch is not shown (no dormant control) */
.dc-panes:not([data-js]) { visibility: hidden; }
/* Pause stops everything that moves, not just the clock */
.dc-stage[data-paused] *, .dc-stage[data-paused] *::before, .dc-stage[data-paused] *::after { animation-play-state: paused !important; }

/* the rail: a readout, never a control. Seven steps; the clock; the controls */
.dc-rail { height: var(--rail-h); display: flex; align-items: center; gap: 16px; }
.dc-steps-wrap { position: relative; flex: none; min-width: 0; }
.dc-steps { display: flex; align-items: center; list-style: none; font-size: var(--fs-rail); font-weight: 700; color: var(--navy-meta); white-space: nowrap; }
.dc-step { position: relative; padding: 6px 0; transition: color var(--t-draw) var(--ease-out); }
.dc-step + .dc-step { margin-left: 22px; }
.dc-step + .dc-step::before { content: '·'; content: '·' / ''; position: absolute; left: -14px; color: var(--navy-ctl); }
.dc-step.dc-done { color: var(--connect-bright); }
.dc-step[aria-current="step"] { color: var(--on-navy); }
.dc-rail-bar { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--connect-bright); opacity: 0; transform-origin: 0 0; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); transition: transform var(--t-draw) var(--ease-out), opacity var(--t-fade) linear; }
.dc-rail-bar.dc-on { opacity: 1; }
.dc-rail-bar.dc-snap { transition: none; }
/* the current step's word: phones only, where the steps are bars (the director writes the current li's text) */
.dc-rail-word { display: none; }
/* the readout reads left to right (the steps, then the clock); the controls keep the right edge */
.dc-rail-end { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
/* the clock: ONE object from its first tick to the end, never resized. A label and a number: "Time to your team 0:14",
   then, when a person answers, "Time to your team 27 s" with the number in Connect's green (.dc-final = stopped;
   colour only). Hidden (its box kept) until it starts. The number's cell holds its widest form, so nothing moves. */
.dc-clock { flex: none; display: inline-flex; align-items: baseline; gap: 8px; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--navy-line); white-space: nowrap; visibility: hidden; }
.dc-clock.dc-on { visibility: visible; }
.dc-clock-lead { font-size: 13px; font-weight: 700; color: var(--navy-body); transition: color var(--t-state) ease; }
.dc-clock-val { display: inline-grid; justify-items: start; font-size: 22px; line-height: 1; font-weight: 900; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--on-navy); }
.dc-clock-val::before { content: '0:00'; content: '0:00' / ''; grid-area: 1 / 1; visibility: hidden; }
#dc-clock-v { grid-area: 1 / 1; transition: color var(--t-state) ease; }
@media (min-width: 1280px) {
  /* the widest end value, held in the same cell from the first frame */
  .dc-clock-val::before { content: '1 min 59 s'; content: '1 min 59 s' / ''; }
}
.dc-clock.dc-final .dc-clock-lead { color: var(--on-navy); }
.dc-clock.dc-final #dc-clock-v { color: var(--connect-bright); }
/* the controls: Book a demo (the end only), Your turn (autoplay and the end) and ONE cell the rest share (Pause, Next,
   Skip the wait, See the record, Replay). The director shows them with `hidden`; a hidden one keeps its box, every
   control in the cell takes the cell's one width, so a state change never moves the clock or the rail. */
.dc-ctls { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dc-ctls > [hidden], .dc-ctl-cell > [hidden] { display: inline-flex !important; visibility: hidden; }
.dc-ctl-cell { display: inline-grid; align-items: center; }
.dc-ctl-cell > * { grid-area: 1 / 1; }
.dc-ctl { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1.5px solid var(--navy-ctl); border-radius: var(--r-control); background: transparent; color: var(--on-navy); font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color var(--t-hover) ease, color var(--t-hover) ease; }
.dc-ctl::after { content: ''; position: absolute; inset: -7px -2px; }   /* 46 px: 44 on screen whatever the subpixel */
@media (hover:hover){ .dc-ctl:hover{ border-color: var(--navy-meta); } }
/* Your turn: the stage is live, take it (Connect's green on the border; white type, never on green) */
.dc-yt { border-color: var(--connect); }
@media (hover:hover){ .dc-yt:hover{ border-color: var(--connect-bright); } }
/* the end frame's Book a demo: the header's orange control at the rail's height */
.dc-rail .dc-cta { height: 32px; padding: 0 14px; font-size: 13px; }
.dc-rail .dc-cta::after { inset: -7px -2px; }

/* ---------- the floor: from 1280 two columns from the first frame, the Website pane and the Team column. The stage is a
   landscape screen, never a slab: its height follows the window but is capped at 0.64 of its own width. ---------- */
.dc-floor { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph-col); grid-template-rows: minmax(0, 1fr); column-gap: 40px; --floor-w: min(var(--stage-max-w), calc(100vw - 64px)); height: max(420px, min(calc(100vh - var(--nav-h) - var(--band-h) - 60px), calc(var(--floor-w) * 0.64))); height: max(420px, min(calc(100svh - var(--nav-h) - var(--band-h) - 60px), calc(var(--floor-w) * 0.64))); }
.dc-web { position: relative; min-width: 0; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
/* the floor's height, as a length the phone's scale can be worked out from (the same expression as .dc-floor's) */
@media (min-width: 900px) {
  .dc-stage { --floor-h: max(420px, min(calc(100svh - var(--nav-h) - var(--band-h) - 60px), calc(min(var(--stage-max-w), calc(100vw - 64px)) * 0.64))); }
}
@media (min-width: 1280px) {
  /* the phone fills the floor under the head (the browser's own height), between 0.8 and 1.15 of life size, and never
     climbs into the Team label's row: the director's formula, worked out here for the first frame (the director may
     write the same number inline; a browser without typed arithmetic keeps the director's) */
  .dc-stage {
    --ph-scale: min(calc((var(--floor-h) - var(--team-head-h)) / 874px), clamp(0.8, calc((var(--floor-h) - var(--webhead-h)) / 874px), 1.15));
    --ph-col: calc(402px * var(--ph-scale));
  }
}

/* the Website pane's head, on the navy ground above the browser: row 1 the visitor picker, row 2 what the concierge
   knows, one chip per fact. Its height is fixed per breakpoint (--webhead-h) whatever the chips say. It stays in the
   record scene (the visitor is still the visitor), quieter. */
.dc-webhead { flex: none; height: var(--webhead-h); padding-bottom: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: opacity var(--t-scene-in) var(--ease-out); }
.dc-stage[data-scene="record"] .dc-webhead { opacity: .5; }
/* the head sits on navy inside #dc-web, whose light surfaces take the orange INK ring (tokens.css): here it is the orange */
#dc-web .dc-webhead :focus-visible { outline-color: var(--orange); }
.dc-who { flex: none; height: 36px; display: flex; align-items: center; min-width: 0; }
.dc-who-label, .dc-knows-label, .dc-team-k { flex: none; width: 64px; font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-meta); }
.dc-who-seg { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border: 1px solid var(--navy-line); border-radius: var(--r-small); }
.dc-who-btn { position: relative; flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-nested); background: transparent; color: var(--navy-body); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.dc-who-btn::after { content: ''; position: absolute; inset: -4px 0; }
.dc-who-btn[aria-pressed="true"] { background: var(--navy-2); color: var(--on-navy); }
/* the person a hot lead is about lights as it lands on the team's phone (the director, 600 ms; c3 F2: colour only) */
.dc-who-btn.dc-who-flash, .dc-who-chip.dc-who-flash { color: var(--connect-bright); transition: none; }
.dc-who-btn:disabled { cursor: default; }
@media (hover:hover){ .dc-who-btn:not(:disabled):hover{ color: var(--on-navy); } }
/* a touch screen 900 px or wider (a tablet on its side): the picker's 28 px buttons take a 44 px press */
@media (pointer: coarse) and (min-width: 900px) { .dc-who-btn::after { inset: -8px 0; } }
/* the phone's picker: one chip naming the visitor, opening the list (#dc-who-list) under it; wider, the list IS the segment */
.dc-who-chip { display: none; }
/* the facts: <div class="dc-know"><dt>Page</dt><dd>Garden maintenance</dd></div> each, painted by the director from
   script.knows in one order (Approach last). A fact that is new or has changed carries .dc-know-new for a moment: its
   value snaps to Connect's green and eases back to white (colour only; nothing moves). One row from 1280, two below. */
.dc-knows-box { flex: none; display: flex; align-items: flex-start; min-width: 0; height: var(--know-h); }
.dc-knows-label { color: var(--connect-bright); line-height: var(--know-h); }
.dc-knows { flex: 1; min-width: 0; height: var(--know-h); overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px 6px; }
.dc-know { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--know-h); padding: 0 8px; border: 1px solid var(--navy-line); border-radius: var(--r-nested); background: var(--navy-2); line-height: 1; white-space: nowrap; transition: border-color 600ms var(--ease-out); }
.dc-know.dc-know-tuck { display: none; }   /* stepped aside: the facts outgrew their reserved rows (the director) */
.dc-know > dt { font-size: 12px; font-weight: 700; color: var(--navy-meta); }
.dc-know > dd { max-width: 22em; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 900; color: var(--on-navy); font-variant-numeric: tabular-nums; transition: color 600ms var(--ease-out); }
/* 1280-1599: the same row in a smaller type as the pane narrows, so every visitor's facts fit it (Approach included,
   while it still says what it said before the newest fact). A free-text value longer than any the demo writes (a
   typed topic) ends in an ellipsis rather than pushing Approach out of the row */
@media (min-width: 1440px) and (max-width: 1599.98px) {
  .dc-knows { gap: 5px; }
  .dc-know { padding: 0 7px; gap: 5px; }
  .dc-know > dt { font-size: 11.5px; }
  .dc-know > dd { font-size: 13px; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .dc-floor { column-gap: 24px; }
  .dc-knows { gap: 4px; }
  .dc-know { padding: 0 6px; gap: 4px; }
  .dc-know > dt { font-size: 10.5px; }
  .dc-know > dd { font-size: 12px; }
}
/* the last fact (Approach: what the concierge will do with the rest) keeps the row's right end, so a fact learned before it
   never pushes it along */
.dc-know:last-child { margin-left: auto; }
.dc-know.dc-know-new { border-color: var(--connect); transition: none; }
.dc-know.dc-know-new > dd { color: var(--connect-bright); transition: none; }

/* the browser: ONE chassis, two tabs. The tab strip (the business's page; the client portal's Dashboard from the record
   on), the toolbar (back, forward and reload glyphs, the address #dc-url), then the body where the two Website scenes
   share one box: #dc-browser (the business's page: #dc-site, #dc-launcher, #dc-widget) and #dc-record (the portal).
   The director shows one of them; inside the chassis a scene change is a tab switch: a cross-fade, no travel. */
.dc-webbox { position: relative; flex: 1; min-height: 0; }
.dc-chassis { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--browser-r); background: var(--surface); color: var(--navy); box-shadow: var(--sh-chassis); }
.dc-tabstrip { flex: none; height: var(--browser-tabs-h); display: flex; align-items: flex-end; gap: 16px; padding: 0 12px 0 14px; background: var(--track); }
.dc-dots { flex: none; align-self: center; display: inline-flex; gap: 7px; }
.dc-dots > span { width: var(--browser-dot); height: var(--browser-dot); border-radius: 50%; background: var(--mute); }
.dc-tabs { display: flex; align-items: flex-end; gap: 4px; min-width: 0; height: 100%; }
.dc-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; width: 240px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-control) var(--r-control) 0 0; background: transparent; color: var(--meta); font-size: var(--fs-ui-s); font-weight: 700; line-height: 1; text-align: left; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.dc-tab[data-tab="record"] { width: 172px; }
.dc-tab::after { content: ''; position: absolute; inset: -4px 0 -10px; }   /* 44 px to a finger; the toolbar under it takes no press */
.dc-tab[aria-current="true"] { background: var(--surface); color: var(--navy); }
.dc-tab[hidden] { display: none; }
.dc-tab:disabled { cursor: default; }
@media (hover:hover){ .dc-tab[aria-current="false"]:not(:disabled):hover{ background: var(--line); color: var(--navy); } }
.dc-tab-ico { flex: none; display: block; width: 16px; height: 16px; }
.dc-tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the portal's tab names the source of a taught answer the moment it lands for the visitor (the director: colour only,
   for F.T.flash; c1-2, c5r2-06) */
.dc-tab.dc-tab-flash { color: var(--connect-ink); box-shadow: inset 0 -2px 0 var(--connect); transition: none; }
/* the business's mark (F.logo: the sun first, the hedge over it) */
.dc-logo-sun { fill: var(--sun); }
.dc-logo-ink { fill: var(--tenant); }
.dc-browser-bar { flex: none; height: var(--browser-bar-h); display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dc-navglyphs { flex: none; display: inline-flex; align-items: center; gap: 12px; color: var(--meta); }
.dc-navglyphs > svg { display: block; }
.dc-navglyphs > .dc-navglyph-off { color: var(--mute); }
.dc-addr { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 760px; height: var(--browser-url-h); padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--body); font-size: var(--fs-ui-s); line-height: 1; }
.dc-lock { flex: none; color: var(--meta); }
#dc-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chassis-body { position: relative; flex: 1; min-height: 0; background: var(--site-canvas); }
.dc-browser { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.dc-root { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: var(--app-canvas); color: var(--navy); }
.dc-root[hidden], .dc-browser[hidden] { display: none; }
.dc-root:focus { outline: none; }
.dc-record-root { z-index: 4; }
.dc-chassis .dc-scene, .dc-chassis .dc-scene.dc-in, .dc-chassis .dc-scene.dc-out { transform: none; }
/* the business's page: it scrolls inside the viewport, never the document. From 1280 the page and the widget are drawn
   at the phone's own scale (zoom between 1 and 1.15), so the widget and the phone read as one system */
.dc-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--site-canvas); color: var(--navy); container-type: inline-size; container-name: dc-viewport; }
@media (min-width: 1280px) { .dc-viewport { zoom: clamp(1, var(--ph-scale), 1.15); } }
#dc-site { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; transition: opacity var(--t-scene-out) linear; }
/* the visitor has left (data-gone: Mia's visit is over, the next one has not begun): the page they were on dims */
.dc-stage[data-gone] #dc-site { opacity: .45; }
/* the launcher and the widget lie over the page; only what they draw takes a press (modules: a closed widget or a
   dismissed card is hidden or visibility:hidden, so it never catches one) */
#dc-launcher { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#dc-widget { position: absolute; right: calc(var(--bubble-inset) + var(--dc-sb)); bottom: var(--widget-bottom); z-index: 3; width: min(var(--widget-w), calc(100% - var(--widget-right) - var(--bubble-inset) - var(--dc-sb))); height: var(--widget-h); pointer-events: none; }
:where(#dc-launcher, #dc-widget) > * { pointer-events: auto; }

/* the Team column: its label on the picker's row ("TEAM  Jess · garden specialist"), the phone from the browser's top
   line to its bottom line. The phone is there from the first frame: dim while the team is not in play
   (data-team="rest": its lock screen, the record, a new visitor arriving), full when something reaches it ("live"). */
.dc-phone-col { position: relative; min-width: 0; grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; justify-content: center; padding-top: var(--webhead-h); pointer-events: none; }
.dc-team-label { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.dc-team-k { width: auto; margin-right: 14px; }
.dc-team-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; color: var(--on-navy); }
.dc-phone-frame { position: relative; flex: none; width: calc(402px * var(--ph-scale)); height: calc(874px * var(--ph-scale)); pointer-events: auto; opacity: .5; transition: opacity var(--t-scene-in) var(--ease-out); }
.dc-phone-frame[hidden] { display: none; }
.dc-stage[data-team="live"] .dc-phone-frame { opacity: 1; }
/* the /products iOS frame, 402 x 874, scaled by the floor's height; the screen fills it edge to edge; asleep (black)
   until the team module draws its lock screen */
.dc-device { --ph-w: 402px; --ph-h: 874px; position: absolute; left: 0; top: 0; width: 402px; height: 874px; overflow: hidden; border-radius: 48px; background: var(--ios-black); transform: scale(var(--ph-scale)); transform-origin: 0 0; box-shadow: 0 0 0 1.5px var(--ios-edge), 0 40px 90px var(--ios-lift); -webkit-font-smoothing: antialiased; }
.dc-phone-screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: var(--navy); }
.dc-island { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 24px; background: var(--ios-black); z-index: 50; pointer-events: none; }
.dc-dock-hit, .dc-dock-close { display: none; }

/* the trace: when something crosses from one pane to the other, a line in Connect's green draws from the control that
   sent it to the thing that arrives (the director builds the paths: <path class="dc-trace-line" pathLength="1">, a
   <circle class="dc-trace-dot">; .dc-draw draws, .dc-fade fades). Never a press; two panes only; never under reduced
   motion. */
.dc-trace { position: absolute; left: 0; top: 0; z-index: 7; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dc-trace-line { fill: none; stroke: var(--connect); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dc-trace-line.dc-draw { animation: dc-trace-draw 450ms var(--ease-out) forwards; }
.dc-trace-dot { fill: var(--connect-bright); }
.dc-trace .dc-fade { opacity: 0; transition: opacity 300ms linear; }
@keyframes dc-trace-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dc-trace { display: none; } }

/* ---------- motion vocabulary the modules share (opacity and transform only; .dc-rise / .dc-spring live in tokens.css) ---------- */
.dc-in { opacity: 1; }
.dc-out { opacity: 0; }
.dc-in, .dc-out { transition: opacity var(--t-fade) linear, transform var(--t-enter) var(--ease-out); }
.dc-rise.dc-in { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.dc-rise.dc-out { opacity: 0; transform: none; }
.dc-scene { opacity: 0; transform: translate3d(0, 24px, 0); }
.dc-scene.dc-in { opacity: 1; transform: none; transition: opacity var(--t-scene-in) var(--ease-out), transform var(--t-scene-in) var(--ease-out); }
.dc-scene.dc-out { opacity: 0; transform: none; transition: opacity var(--t-scene-out) linear; }
/* a scene on its way out is a picture: a click in its fade lands on the scene coming in, never on a control you can no longer see */
.dc-out { pointer-events: none; }
/* the next press: in hands mode after 3 s idle, in autoplay through the dwell. Orange outline + a soft halo, colour
   only, so it never reads as the keyboard's focus ring (2px, no halo) */
.dc-ring { outline: 2px solid var(--orange) !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,122,26,.18) !important; }
/* autoplay: the control a person would press, pressed (>= 280 ms, a real change of colour, never orange). A light control
   darkens with ink; a module dresses its own filled controls by setting --dc-press-ink (transparent) and a background.
   The idle ring's halo stays on through the press. */
.dc-pressed { --dc-press-ink: rgba(11,29,58,.14); box-shadow: inset 0 0 0 999px var(--dc-press-ink); }
.dc-ring.dc-pressed { box-shadow: inset 0 0 0 999px var(--dc-press-ink), 0 0 0 6px rgba(255,122,26,.18) !important; }
/* the shell's own navy controls darken with light instead of ink */
.dc-pane-btn.dc-pressed, .dc-who-btn.dc-pressed, .dc-who-chip.dc-pressed, .dc-ctl.dc-pressed { --dc-press-ink: rgba(255,255,255,.12); }

/* ---------- the static first frame (S0:start): index.html ships the exact DOM site.js builds at mount (the Garden
   maintenance page and the launcher at rest), styled by site.css itself, every control disabled + data-s0-inert until
   the director arms it at boot and the module replaces it in place. Nothing here but the inert controls' pointer. ---------- */
#demo [data-s0-inert] { cursor: default; }
/* S0:end */

/* ---------- short windows (a laptop, a tablet on its side): the headline band gives its height to the stage ---------- */
@media (min-width: 900px) and (max-height: 820px) {
  .dc-stage, .dc-band { --band-h: 48px; }
  :root { --band-h: 48px; }
  .dc-h1 { font-size: 24px; }
}

/* ---------- 900-1279: the Website pane takes the width; the phone docks on the right, from the head's top line to the
   browser's bottom line, and, when that gains something, expands over the page on tap ---------- */
@media (min-width: 900px) and (max-width: 1279.98px) {
  /* the docked scale: the floor's height, at most 0.8 of life size (to the director's thousandth); its strip = the
     phone + 32 px. While the phone is expanded the director writes a larger --ph-scale; the strip never follows it */
  .dc-stage { --dock-s: max(0.3, min(0.8, round(down, calc(var(--floor-h) / 874px), 0.001))); --ph-scale: var(--dock-s); --dock-w: calc(402px * var(--dock-s) + 32px); }
}
@media (max-width: 1279.98px) {
  .dc-h1 { font-size: 30px; }
  /* the chips may need their second row beside a docked phone: both rows are held from the first frame */
  .dc-stage { --webhead-h: 100px; --know-h: 24px; }
  .dc-knows-box, .dc-knows { height: calc(var(--know-h) * 2 + 4px); }
  .dc-know > dt { font-size: 11.5px; }
  .dc-know > dd { font-size: 13px; }
  .dc-floor { grid-template-columns: minmax(0, 1fr); }
  .dc-web { grid-column: 1; }
  .dc-phone-col { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: flex-end; padding-top: 0; }
  .dc-team-label { display: none; }
  .dc-stage[data-dock="docked"][data-dockable="1"] .dc-dock-hit { display: block; position: absolute; inset: 0; z-index: 60; width: 100%; height: 100%; padding: 0; border: 0; border-radius: calc(48px * var(--ph-scale)); background: transparent; cursor: pointer; }
  .dc-stage[data-dock="expanded"] .dc-phone-col { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: rgba(11,29,58,.72); pointer-events: auto; }
  /* the autoplay lifts the docked phone to a readable size while the team reads (c6 f5): a transform only (the director
     writes it on the frame; nothing is laid out again), the page half-seen behind it through the device's shadow */
  .dc-phone-frame { transition: opacity var(--t-scene-in) var(--ease-out), transform 240ms var(--ease-out); }
  .dc-stage[data-lift] .dc-device { box-shadow: 0 0 0 1.5px var(--ios-edge), 0 40px 90px var(--ios-lift), 0 0 0 100vmax rgba(11,29,58,.5); }
  .dc-stage[data-dock="expanded"] .dc-phone-frame { opacity: 1; }
  .dc-stage[data-dock="expanded"] .dc-dock-close { display: inline-flex; align-items: center; position: fixed; top: 16px; right: 16px; z-index: 151; }
  /* the docked phone stands in the floor's right-hand strip from the first frame (dim at rest, like the two-pane phone):
     the Website pane (head rows, the chassis and both its tabs) stops short of it by a CONSTANT width, so neither the
     handover nor expanding it ever reflows the page */
  .dc-web { padding-right: var(--dock-w); }
  .dc-trace { display: none; }
  /* the end line takes the rail's room at the end: the steps step aside (they are all done), and Book a demo, which
     the end alone shows, is not held while it is hidden */
  .dc-stage[data-end="1"] .dc-steps-wrap { display: none; }
  .dc-stage[data-end="1"] .dc-clock { margin-left: 0; padding-left: 0; border-left: 0; }
  .dc-ctls > .dc-end-book[hidden] { display: none !important; }
  .dc-steps { font-size: 12.5px; }
  .dc-step + .dc-step { margin-left: 18px; }
  .dc-step + .dc-step::before { left: -12px; }
  .dc-rail-end { gap: 12px; }
}
/* from 1010 there is room to hold Book a demo's slot from the first frame, as from 1280: the steps stay at the end
   (all done) and the clock never moves when the end group arrives */
@media (min-width: 1010px) and (max-width: 1279.98px) {
  .dc-stage[data-end="1"] .dc-steps-wrap { display: block; }
  .dc-stage[data-end="1"] .dc-clock { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--navy-line); }
  .dc-ctls > .dc-end-book[hidden] { display: inline-flex !important; }
}

/* ---------- below 900: one pane at a time, Website | Team (under the rail, where it acts). The two panes share the
   floor's one cell: the one leaving fades and moves 24 px toward its own side (Website left, Team right), the one
   coming in arrives from its side. The stage fills one screen: rail, switch, then the floor to the bottom. ---------- */
@media (max-width: 899.98px) {
  .dc-bar-in, .dc-band-in, .dc-foot-in { width: auto; margin: 0 16px; }
  .dc-stage-in { width: auto; padding: 0 16px 12px; }
  /* the pane on its way out leans 24 px past the edge: it never widens the page */
  .dc-stage { overflow-x: clip; }
  /* the rail in two rows: the seven steps, then the clock and the controls (the steps stay at the end, all done) */
  .dc-stage { --rail-h: 80px; }
  .dc-rail { flex-wrap: wrap; align-content: center; gap: 6px 16px; }
  .dc-steps-wrap { flex: 0 0 100%; }
  .dc-stage[data-end="1"] .dc-steps-wrap { display: block; }
  .dc-clock, .dc-stage[data-end="1"] .dc-clock { margin-left: 0; padding-left: 0; border-left: 0; }
  .dc-js .dc-panes, .dc-panes[data-js] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 44px; padding: 4px; margin: 0 0 8px; border: 1px solid var(--navy-line); border-radius: var(--r-small); }
  .dc-pane-btn { position: relative; height: 34px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--navy-meta); font-size: 14px; font-weight: 700; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
  .dc-pane-btn::after { content: ''; position: absolute; inset: -5px 0; }
  .dc-pane-btn[aria-pressed="true"] { background: var(--navy-2); color: var(--on-navy); }
  .dc-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
  .dc-dot[hidden] { display: inline-block; visibility: hidden; }
  .dc-floor { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: max(320px, calc(100vh - var(--rail-h) - 64px)); height: max(320px, calc(100svh - var(--rail-h) - 64px)); }
  /* one after the other, never both (c6 f4: the lock screen's clock lay over the widget): the pane leaving fades out in
     the first 120 ms, the one coming in fades in from 100 ms to 220 ms; the 24 px lean is the same */
  .dc-web, .dc-phone-col { grid-area: 1 / 1; transition: opacity 120ms var(--ease-out) 100ms, transform 220ms var(--ease-out), visibility 0s; }
  .dc-stage[data-pane="phone"] .dc-web, .dc-stage:not([data-pane="phone"]) .dc-phone-col { opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 120ms; }
  .dc-stage[data-pane="phone"] .dc-web { transform: translateX(-24px); }
  .dc-stage:not([data-pane="phone"]) .dc-phone-col { transform: translateX(24px); }
  .dc-phone-col { position: relative; inset: auto; z-index: auto; display: flex; justify-content: center; align-items: flex-start; padding-top: 0; pointer-events: auto; }
  .dc-web { padding-right: 0; }
  /* inherit, never visible: the column hides with the Website pane in front, and its phone must hide with it (a visible
     child of a hidden column stayed on top of the website and took every press: the picker, the page, the widget) */
  .dc-phone-frame { opacity: 1; visibility: inherit; transform: none; transition: none; }
  .dc-stage[data-dock] .dc-dock-hit, .dc-stage[data-dock] .dc-dock-close { display: none; }
  /* the head: the picker is one compact row that scrolls sideways (edge to edge, 44px targets), the chips under it
     hold two rows */
  .dc-stage { --webhead-h: 106px; }
  .dc-who { height: 44px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dc-who::-webkit-scrollbar { display: none; }
  .dc-who-label, .dc-knows-label { width: 64px; }
  .dc-who-seg { height: 44px; padding: 4px; }
  .dc-who-btn { height: 34px; }
  .dc-who-btn::after { inset: -5px 0; }
  .dc-tabstrip { gap: 0; padding: 0 8px; }
  .dc-dots { display: none; }
  .dc-tabs { flex: 1; }
  .dc-tab, .dc-tab[data-tab="record"] { width: min(240px, calc(50% - 2px)); }
  .dc-browser-bar { gap: 10px; padding: 0 8px; }
  .dc-addr { max-width: none; }
  /* the real widget is full screen on a phone, with its own close: here it covers the viewport, the page behind it */
  #dc-widget { inset: 0; width: auto; height: auto; }
  /* an exhausted inner scroll hands the swipe to the page */
  .dc-root, #dc-site, #dc-phone .dc-ph-scroll { overscroll-behavior: auto; }
}

/* ---------- phones: no device frame (the visitor is holding one), the Team pane runs edge to edge. The rail is the
   seven steps as bars across the top, then the current step's word, the clock and the controls; the picker is one chip
   and the facts follow it ---------- */
@media (max-width: 700px), (max-width: 899.98px) and (pointer: coarse) and (max-height: 500px) {
  .dc-band-in { padding: 12px 0 14px; }
  .dc-h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
  .dc-h1 > span { display: block; }
  .dc-stage { --rail-h: 54px; --webhead-h: 120px; }
  .dc-phone-col { margin: 0 -16px; }   /* the column, not the floor: a pane switch moves no box that stays on screen */
  .dc-phone-frame { width: 100%; height: 100%; }
  .dc-device { inset: 0; width: auto; height: auto; transform: none; border-radius: 0; box-shadow: none; }
  .dc-device { --ph-w: 100%; --ph-h: 100%; }
  .dc-island { visibility: hidden; }
  /* the rail: bars across the top, then word · clock · controls (the clock never moves: the controls take the right) */
  .dc-rail { flex-wrap: wrap; align-content: center; gap: 8px 10px; }
  .dc-steps-wrap { flex: 0 0 100%; }
  .dc-steps { gap: 4px; font-size: 0; }
  .dc-step { flex: 1; height: 3px; padding: 0; border-radius: 2px; background: var(--navy-line); transition: background-color var(--t-draw) var(--ease-out); }
  .dc-step + .dc-step { margin-left: 0; }
  .dc-step + .dc-step::before { content: none; }
  .dc-step.dc-done { background: var(--connect-bright); }
  .dc-step[aria-current="step"] { background: var(--on-navy); }
  .dc-rail-bar { display: none; }
  .dc-rail-word { flex: none; display: inline-grid; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--on-navy); white-space: nowrap; }
  .dc-rail-word::before { content: 'Every visitor'; content: 'Every visitor' / ''; grid-area: 1 / 1; visibility: hidden; }
  #dc-rail-word { grid-area: 1 / 1; transition: opacity 160ms linear; }
  .dc-stage[data-end="1"] .dc-steps-wrap { display: block; }   /* the bars stay, all done: the rail keeps its two rows */
  .dc-stage[data-end="1"] .dc-rail-word { display: none; }
  /* numbers first: the clock leads the second row, the step's word follows it, the controls keep the right; at the end
     the word steps aside for the end group and the clock, already on the left edge, never moves */
  .dc-rail-end { display: contents; }
  /* it holds its place from the first frame (hidden, its box kept) and shows when it starts, as from 900 (c5r2-07: a
     "0:00" before anyone asked for a person read as a clock already counting) */
  .dc-clock { order: 1; }
  .dc-rail-word { order: 2; }
  .dc-ctls { order: 3; margin-left: auto; gap: 6px; }
  /* the clock stacks, label over number, from its first tick to the end */
  .dc-clock { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: 0; }
  .dc-clock-lead { font-size: 10.5px; line-height: 1.1; }
  .dc-clock-val { font-size: 16px; }
  .dc-ctl, .dc-rail .dc-cta { height: 30px; padding: 0 10px; font-size: 12px; }
  .dc-ctl::after, .dc-rail .dc-cta::after { inset: -9px -2px -7px; }
  /* on a phone a control that is not shown takes no room (the clock is pinned left of them, so nothing moves it) */
  .dc-ctls > [hidden], .dc-ctl-cell > [hidden] { display: none !important; }
  /* the head: the visitor chip, then the facts flowing after it over four rows (whole rows: nothing peeks under them) */
  .dc-webhead { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px; height: calc(var(--webhead-h) - 6px); margin-bottom: 6px; padding-bottom: 0; overflow: hidden; }
  .dc-who { flex: none; height: 30px; margin: 0; padding: 0; overflow: visible; }
  .dc-who-label { display: none; }
  /* one width for every visitor's name (the widest, Mia's), so changing visitor never moves the facts after it */
  .dc-who-chip { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; width: 158px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--navy-ctl); border-radius: var(--r-control); background: var(--navy-2); color: var(--on-navy); font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease; }
  .dc-who-chip::after { content: ''; position: absolute; inset: -7px -2px; }
  .dc-who-chip[aria-expanded="true"] { border-color: var(--on-navy); }
  .dc-who-chev { flex: none; color: var(--navy-body); }
  .dc-who-chip:disabled { cursor: default; }
  @media (hover:hover){ .dc-who-chip:not(:disabled):hover{ border-color: var(--navy-meta); } }
  /* the list: four fixed rows over the browser, under the chip; it is not clipped by the head (its box is the pane's) */
  .dc-who-seg { position: absolute; left: 0; top: 44px; z-index: 9; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: min(280px, 100%); height: auto; padding: 4px; border: 1px solid var(--navy-line); border-radius: var(--r-small); background: var(--navy); box-shadow: var(--sh-lift-dark); opacity: 0; visibility: hidden; transition: opacity var(--t-fade) linear, visibility 0s linear var(--t-fade); }
  .dc-who-chip[aria-expanded="true"] + .dc-who-seg { opacity: 1; visibility: visible; transition: opacity var(--t-fade) linear, visibility 0s; }
  .dc-who-btn { display: flex; align-items: center; width: 100%; height: 44px; padding: 0 12px; font-size: 14px; text-align: left; }
  .dc-who-btn::after { inset: 0; }
  .dc-knows-box, .dc-knows { display: contents; }
  .dc-knows-label { width: auto; margin-left: 4px; line-height: 24px; }
  .dc-stage { --know-h: 24px; }
  .dc-know { padding: 0 6px; gap: 4px; }
  .dc-know > dt { font-size: 10.5px; }
  .dc-know > dd { font-size: 12px; }
  /* fixed rows (c6 f6: Page jumped a row and Visit 155 px at a return, at the moment the strip is the proof): row 1 the
     visitor and the label, row 2 where they are (Page, Visit, Chatted before), row 3 what they asked and gave, row 4
     Approach at the right. Two full-width breaks hold the rows; row 3 keeps its height when it is empty, so Approach
     never moves. A value that changes never moves a fact to another row. */
  .dc-webhead { row-gap: 2px; }
  .dc-who { order: 0; }
  .dc-knows-label { order: 1; flex: 1 0 calc(100% - 166px); }   /* the chip (158) + the gap (4) + its own 4px margin */
  .dc-know[data-k="Page"] { order: 2; }
  .dc-know[data-k="Visit"] { order: 3; }
  .dc-know[data-k="Chatted before"] { order: 4; }
  .dc-webhead::before, .dc-webhead::after { content: ''; flex: 0 0 100%; height: 0; }
  .dc-webhead::before { order: 5; }
  .dc-know[data-k="Asked"], .dc-know[data-k="Last asked"] { order: 6; }
  .dc-know[data-k="Postcode"] { order: 7; }
  .dc-know[data-k="Name"] { order: 8; }
  .dc-know[data-k="Customer"] { order: 9; }
  .dc-webhead::after { order: 10; }
  .dc-webhead:not(:has(.dc-know:is([data-k="Asked"], [data-k="Last asked"], [data-k="Postcode"], [data-k="Name"], [data-k="Customer"])))::after { height: 26px; }
  .dc-know[data-k="Approach"] { order: 11; }
  /* the browser: one 44 px row, as a phone's own browser draws it: the two tabs as their icons (the title is still
     each tab's name), then the address. 44, not 36: each tab's press is 44 inside the row, so it never reaches into
     the site's header or the record's nav under it (i2 measured the tab at 36, then the record's Dashboard at 39) */
  /* the tabs at the row's right end, after the address (c6 f8): when the portal's tab appears the address keeps its left
     edge and only shortens (a width change, never a shift of the row the eye reads the scene change in) */
  .dc-chassis { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr); }
  .dc-tabstrip { grid-area: 1 / 2; height: 44px; align-items: center; padding: 0 4px 0 0; background: var(--surface); border-bottom: 1px solid var(--line); }
  .dc-tabs { height: auto; align-items: center; gap: 2px; }
  .dc-tab, .dc-tab[data-tab="record"] { width: 44px; height: 28px; padding: 0; justify-content: center; border-radius: var(--r-nested); }
  .dc-tab::after { inset: -8px 0; }
  .dc-tab[aria-current="true"] { background: var(--track); }
  .dc-tab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc-browser-bar { grid-area: 1 / 1; height: 44px; padding: 0 4px 0 8px; }
  .dc-chassis-body { grid-area: 2 / 1 / 3 / 3; }
  .dc-navglyphs { display: none; }
  /* 44 px to a finger, measured with elementFromPoint (i2: 43, 37 and 36x40). The rail's controls reach up over the
     bars rather than down into the pane switch's own area; the chip's area grows down over the facts (the head clips
     above it); the tab is 44 wide (and 44 tall inside its 44 px row, above) */
  .dc-who-chip { z-index: 1; }
  .dc-who-chip::after { inset: 0 -2px -14px; }
}
@media (max-width: 480px) {
  .dc-bar-in { gap: 12px; }
  .dc-lockup { height: 24px; min-width: 72px; }
  .dc-lockup::after { content: ''; position: absolute; inset: -10px 0; }
  .dc-lockup > svg, .dc-lockup > img { height: 24px; }
  .dc-word { font-size: 22px; }
  .dc-tag { display: none; }
  .dc-bar-links { gap: 14px; }
}
/* 481-599: the lockup's "Your Digital Office" line pushed Book a demo 74px past the right edge (the page scrolled
   sideways at 500 and 520): the line steps aside from 600 down, as it does at 480 */
@media (max-width: 599.98px) { .dc-tag { display: none; } .dc-lockup { min-width: 72px; } }
/* "Connect" is a longer word than "Sign": the bar tightens from 420 and keeps 375 whole */
@media (max-width: 420px) {
  .dc-bar-in { gap: 10px; }
  .dc-bar-links { gap: 8px; }
  .dc-details, .dc-cta { padding: 0 12px; }
}
/* 320-374: the product word steps aside (it is the page's title and the details link's page); the bar still fits */
@media (max-width: 374.98px) { .dc-hair, .dc-product { display: none; } }
/* 320-374: the end controls tighten so the clock and the three end controls share 288px */
@media (max-width: 374.98px) {
  .dc-ctls { gap: 4px; }
  .dc-ctl, .dc-rail .dc-cta { padding: 0 8px; }
  /* the clock and three end controls cannot share 288px: at the end Book a demo and Replay stay beside the clock (the
     visitor's own turn is one press of Replay away) */
  .dc-stage[data-end="1"] #dc-your-turn { display: none !important; }
  /* the facts' second row holds at 320-374 (c6 f6): the longest value there ends in an ellipsis (its chip's title says it) */
  .dc-know[data-k="Chatted before"] > dd { max-width: 6.5em; }
}

/* ---------- the booking view (#/book), verbatim from /products ---------- */
#pageBook { background: var(--ground); color: var(--navy); }
:where(#pageBook *, #pageBook *::before, #pageBook *::after) { margin: 0; padding: 0; }
:where(#pageBook) a { color: var(--orange-ink); text-decoration: none; }
@media (hover:hover){ :where(#pageBook) a:hover{ color: var(--navy); } }
#pageBook p { text-wrap: pretty; }
#pageBook [data-r="h1"] { text-wrap: balance; word-spacing: 0.05em; }
#pageBook a, #pageBook button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#pageBook a:focus-visible, #pageBook button:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
#pageBook input:focus-visible, #pageBook select:focus-visible, #bookH1:focus { outline: none; }
#bookPick, #bookForm, #bookDone { scroll-margin-top: 16px; }
.ybk-field { text-overflow: ellipsis; }
.ybk-field:focus { border-color: var(--orange-ink) !important; }
@media (hover:hover){ .ybk-back:hover{ color: var(--navy) !important; } }
@media (hover:hover){ .ybk-submit:hover{ background: var(--orange-hover) !important; } }
.ybk-slot { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--ctl-line); color: var(--navy); font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; padding: 12px 14px; border-radius: var(--r-control); cursor: pointer; }
@media (hover:hover){ .ybk-slot:hover{ border-color: var(--orange) !important; } }
.ybk-slot[aria-pressed="true"] { border-color: var(--orange) !important; background: var(--orange-tint) !important; }
@media (hover:hover){ .ybk-link:hover{ color: var(--navy) !important; } }
.ybk-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 6px; }
@media (max-width: 900px) {
  #pageBook [data-r="sec"] { padding-left: 20px !important; padding-right: 20px !important; }
  #pageBook [data-r="row"] { gap: 36px !important; justify-content: center; flex-direction: row !important; align-items: flex-start !important; }
  #pageBook [data-r="col"] { min-width: min(320px, 100%) !important; }
  #pageBook [data-r="h1"] { font-size: 38px !important; line-height: 1.18 !important; }
}
@media (max-width: 700px) {
  #pageBook [data-r="sec"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  #pageBook [data-r="h1"] { font-size: 34px !important; }
  #pageBook [data-r="col"] { display: contents; }
  #pageBook [data-r="row"] { gap: 24px !important; }
  #pageBook [data-r="bkhead"], #pageBook [data-r="bklist"] { flex: 0 0 100%; }
  #pageBook [data-r="bkhead"] { order: 1; }
  #pageBook [data-r="bkcard"] { order: 2; }
  #pageBook [data-r="bklist"] { order: 3; }
  .ybk-back { padding: 14px 0; }
  .ybk-field { font-size: 16px !important; }
  .ybk-link { padding-top: 14.5px !important; padding-bottom: 14.5px !important; }
  .ybk-slot { padding-top: 12.5px; padding-bottom: 12.5px; }
}
@media (max-width: 360px) { #pageBook [data-r="h1"] { font-size: 30px !important; } }