/* Coastal Tech Setup page sheet. Colour and type come from the token sheets it loads beside: every
   value here is a token. */

/* ---------- page ---------- */
html { background: var(--cw-navy); }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body-serif);
  color: var(--g-fg);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
}
/* a phone or tablet runs the page into the browser's own bars: the root takes the ground, and a
   strip of it exactly the status bar's height keeps text from scrolling under the clock when the
   page runs from the Home Screen. In Safari's own window the bar's height is 0, so the strip is
   too: a floor under it would show as a band below Safari's edge once the page scrolls */
@media screen and (hover: none) and (pointer: coarse) {
  html { background: var(--g-bg, var(--surface-fog)); }
  body { box-sizing: border-box; padding-top: env(safe-area-inset-top); }
  body::before {
    content: ''; position: fixed; z-index: var(--z-nav); top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px); background: var(--g-bg); pointer-events: none;
  }
}
/* the column and its gutters are the Directory's, so the sites scale alike with the window */
.cs-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 24px 72px; }
@media (max-width: 720px) { .cs-wrap { padding: 28px 16px 56px; } }
[hidden] { display: none !important; }

.cs-skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0;
}
.cs-skip:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-modal);
  width: auto; height: auto; clip-path: none; opacity: 1;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--cw-navy); background: var(--cw-blue-paper);
  border: 1px solid var(--cw-blue-ink); border-radius: var(--radius-sm); padding: 8px 14px;
  outline: 2px solid var(--coastal-700); outline-offset: 2px;
}
/* read by a screen reader, never seen */
.cs-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-ico { display: inline-block; vertical-align: middle; flex: none; }

/* ---------- masthead: the logo, the wordmark and one line ---------- */
.cs-mast { margin: 0 0 20px; }
.cs-brandrow { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.cs-logo { margin: 0; }
.cs-logo img { display: block; height: 26px; width: auto; }
.cs-logo img.cs-logo-light { display: none; }
@media (max-width: 720px) { .cs-logo img { height: 21px; } }
/* the light switch at the masthead's right, as Tech Check's: hidden unless a computer's screen is
   set to dark and the page is dark (the dark layer shows it); once light is picked it goes. It sits
   centred on the logo, not on its line box, so the row keeps the logo's height. Its grey is Tech
   Check's (#9AA8BE, the design system's --cw-navy-soft, which the app pages' scope re-points here):
   the ramp's 800 and 200 mixed land within three steps of it in each channel, too close to see */
.cs-theme {
  --switch-grey: color-mix(in srgb, var(--coastal-800) 35%, var(--coastal-200));
  display: none; align-items: center; gap: 12px; align-self: flex-start; margin: -9px 0 -9px auto;
}
.cs-theme-k {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--switch-grey); white-space: nowrap;
}
@media (max-width: 720px) { .cs-theme { margin-top: -11px; margin-bottom: -12px; } }
/* its button is Tech Check's own ghost: clear, lined in the label's grey, its label a little apart
   from the sun, lifting a pixel under the mouse and nudging down on a click */
.cs-theme .cs-btn {
  background: transparent; border-color: var(--switch-grey); line-height: 1.2;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.cs-theme .cs-ico { margin-right: 2px; }
.cs-theme .cs-btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .cs-theme .cs-btn:hover { border-color: var(--cw-navy); transform: translateY(-1px); } }
.cs-h1 {
  font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: 1.08;
  letter-spacing: -0.015em; color: var(--cw-navy); margin: 0;
}
.cs-h1 em { font-style: italic; color: var(--cw-blue-ink); }
.cs-lede {
  font-family: var(--font-body-serif); font-size: 20px; line-height: var(--leading-body);
  color: var(--g-fg); max-width: 720px; margin: 10px 0 0;
}
@media (max-width: 720px) { .cs-h1 { font-size: 38px; } .cs-lede { font-size: 18px; } }

/* ---------- buttons: navy ghost or navy fill; the person's Join in green, and a copy that worked
   turns its button green for a moment ---------- */
.cs-btn {
  --go-hover: color-mix(in oklab, var(--success-ink) 80%, var(--coastal-900));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 0 18px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; color: var(--cw-navy); background: var(--g-surface); cursor: pointer;
  border: 1px solid var(--cw-navy); border-radius: var(--radius-sm);
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.cs-btn:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
.cs-btn { text-decoration: none; }
.cs-btn:active, .cs-btn-fill { background: var(--cw-navy); color: var(--g-surface); }
.cs-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.cs-btn-sm { padding: 0 14px; }
.cs-btn-go, .cs-btn.is-copied { background: var(--success-ink); border-color: var(--success-ink); color: var(--g-surface); }
/* under a finger a filled button changes too: the navy to the blue, the green to a darker green */
.cs-btn.cs-btn-fill:active { background: var(--cw-blue-ink); border-color: var(--cw-blue-ink); }
.cs-btn.cs-btn-go:active, .cs-btn.is-copied:active { background: var(--success-press); border-color: var(--success-press); color: var(--g-surface); }
@media (hover: hover) and (pointer: fine) {
  .cs-btn:hover:not([aria-disabled="true"]) { background: var(--cw-navy); color: var(--g-surface); }
  .cs-btn-fill:hover:not([aria-disabled="true"]) { background: var(--cw-blue-ink); border-color: var(--cw-blue-ink); }
  /* a green button stays green on hover, only darker: as specific as the navy hover above, and after it */
  .cs-btn.cs-btn-go:hover, .cs-btn.is-copied:hover { background: var(--go-hover); border-color: var(--go-hover); color: var(--g-surface); }
}
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 0; }
.cs-actions + .cs-text { margin-top: 12px; }
/* a phone lets a long label wrap inside its button rather than run past the panel */
@media (max-width: 560px) { .cs-btn { white-space: normal; text-align: center; padding: 10px 16px; } }

/* ---------- the panels: white, a hairline, 4px corners, flat ---------- */
main:focus, .cs-panel:focus { outline: none; }
/* a phone or tablet sees the notice in place of the panels, as Tech Check's does. system.js marks
   it (data-mobile) in the head, before the first frame, so a phone's first frame is the notice and
   a computer's the panels */
.cs-phone { display: none; }
html[data-mobile] .cs-phone { display: block; }
html[data-mobile] #connect, html[data-mobile] #who, html[data-mobile] #flow { display: none; }
html[data-mobile] .cs-foot-built { display: none; }
/* the not-found page: the way back on a computer, the share on a phone */
.cs-on-phone { display: none; }
html[data-mobile] .cs-on-phone { display: block; }
html[data-mobile] .cs-on-computer { display: none; }
html[data-mobile] .cs-lost .cs-btn { width: 100%; }
.cs-panel {
  background: var(--g-surface); border: 1px solid var(--g-surface-rule);
  border-radius: var(--radius-md); margin: 0 0 16px; scroll-margin-top: 16px;
}
.cs-h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--cw-navy); margin: 0; padding: 20px 24px 4px;
}
.cs-n {
  flex: none; min-width: 1.6em; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--cw-blue-ink); font-variant-numeric: tabular-nums;
}
/* the panel the person connects in carries Zoho Assist's mark in its number's place, at the
   size it had beside the name: centred on the number's column, so the name lines up with the
   other panels' */
.cs-n-mark { display: flex; justify-content: center; align-self: center; width: 1.6em; }
.cs-n-mark .cs-ico { display: block; width: 24px; height: 24px; }
.cs-body { padding: 0 24px 22px 62px; }
.cs-phone .cs-body, .cs-lost .cs-body { padding-left: 24px; }
.cs-phone .cs-btn { width: 100%; }
@media (max-width: 720px) { .cs-h2 { padding: 16px 16px 4px; } .cs-body, .cs-phone .cs-body, .cs-lost .cs-body { padding: 0 16px 18px; } }
/* a group of steps or ticks, under its small-capital heading */
.cs-h3 {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--g-muted); margin: 22px 0 4px; padding: 0;
}
.cs-group:first-child .cs-h3 { margin-top: 10px; }
.cs-text { margin: 6px 0 0; font-size: 17px; line-height: var(--leading-body); color: var(--g-fg); max-width: 680px; }
.cs-text .cs-code { white-space: normal; overflow-wrap: anywhere; }

/* a numbered step: its number, its title, then what to do */
.cs-steps { list-style: none; margin: 0; padding: 0; counter-reset: cs-step; }
.cs-step {
  position: relative; counter-increment: cs-step; padding: 14px 0 16px 34px;
  border-top: 1px solid var(--cw-line-soft); scroll-margin-top: 16px;
}
.cs-step:first-child, .cs-step[hidden]:first-child + .cs-step { border-top: 0; }
.cs-step::before {
  content: counter(cs-step); position: absolute; left: 0; top: 17px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--cw-blue-ink); font-variant-numeric: tabular-nums;
}
.cs-step-h { margin: 0; font-family: var(--font-body-serif); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--cw-navy-ink); }

/* a checklist step: its tick in the number's place, its title the tick's label; a step ticked
   off fades, and nothing keeps the ticks. The box is drawn in the page's colours, not the
   system's grey: the field's ground in a blue line, navy with the tick once ticked, and a step
   lighter under a finger */
.cs-done { display: block; cursor: pointer; }
.cs-done-box {
  position: absolute; left: 0; top: 16px; width: 22px; height: 22px; margin: 0; box-sizing: border-box;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--g-surface); border: 1.5px solid var(--cw-blue-ink); border-radius: var(--radius-sm);
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.cs-done-box:checked { background: var(--cw-navy); border-color: var(--cw-navy); }
.cs-done-tick { display: none; position: absolute; left: 0; top: 16px; color: var(--g-surface); pointer-events: none; }
.cs-done-box:checked + .cs-done-tick { display: block; }
.cs-done-box:active { background: var(--cw-blue-paper); border-color: var(--cw-navy); }
.cs-done-box:checked:active { background: var(--cw-blue-ink); border-color: var(--cw-blue-ink); }
@media (hover: hover) and (pointer: fine) { .cs-done-box:hover { border-color: var(--cw-navy); } }
.cs-done-box:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
.cs-step:has(.cs-done-box)::before { content: none; }
.cs-step:has(.cs-done-box:checked) .cs-done span { color: var(--g-muted); text-decoration: line-through; }
.cs-step:has(.cs-done-box:checked) > :not(.cs-step-h) { opacity: 0.55; }

/* a question the person may ask, its answer opened on a click, written to show them */
.cs-ask { margin: 10px 0 0; max-width: 680px; }
.cs-ask-q {
  display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; cursor: pointer;
  list-style: none; font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--cw-link); -webkit-tap-highlight-color: transparent;
}
.cs-ask-q::-webkit-details-marker { display: none; }
.cs-ask-q::before {
  content: '+'; flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--cw-blue-ink); border: 1px solid var(--cw-line); border-radius: var(--radius-sm);
}
.cs-ask[open] > .cs-ask-q::before { content: '\2212'; }
.cs-ask-q:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .cs-ask-q:hover { color: var(--cw-navy); } }
/* the design system takes the tap's grey flash off a summary, so its press is its own */
.cs-ask-q:active { color: var(--cw-navy); }
.cs-ask-q:active::before { border-color: var(--cw-navy); }
.cs-ask-a { margin: 2px 0 6px 9px; padding: 2px 0 6px 19px; border-left: 2px solid var(--cw-line-soft); }
.cs-ask-a > :first-child { margin-top: 0; }
.cs-list { margin: 6px 0 0; padding: 0 0 0 22px; font-size: 17px; line-height: var(--leading-body); color: var(--g-fg); max-width: 660px; }
.cs-list li { margin: 2px 0 0; }
.cs-list-h {
  margin: 14px 0 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--g-muted);
}
/* a list with a tone: each line its filled mark and the tone's colour, green for good, red for bad */
.cs-list-marked { list-style: none; padding: 0; }
.cs-list-marked li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 10px; align-items: start; }
.cs-list-mark { width: 18px; height: 18px; margin: 5px 0 0; }
.cs-list-h.is-good, .cs-list-marked.is-good { color: var(--success-ink); }
.cs-list-h.is-bad, .cs-list-marked.is-bad { color: var(--danger-ink); }

/* an official PDF: its mark on a tile, its title, and whose it is */
.cs-doc-p { margin: 4px 0 12px; }
.cs-doc {
  display: inline-grid; grid-template-columns: 36px minmax(0, auto); gap: 0 12px; align-items: center; min-height: 44px;
  max-width: 100%; box-sizing: border-box;
  padding: 6px 14px 6px 6px; text-decoration: none; color: var(--cw-navy-ink);
  border: 1px solid var(--cw-line); border-radius: var(--radius-sm); background: var(--g-surface);
}
.cs-doc-ico {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cw-navy); background: var(--cw-blue-paper); border-radius: var(--radius-sm);
}
.cs-doc-in { display: flex; flex-direction: column; min-width: 0; }
.cs-doc-t { font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; color: var(--cw-link); }
.cs-doc-m { font-family: var(--font-ui); font-size: 13px; line-height: 1.35; color: var(--g-muted); }
.cs-doc:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cs-doc:hover { border-color: var(--cw-blue-ink); } .cs-doc:hover .cs-doc-t { color: var(--cw-navy); } }

/* where to click: each place in turn */
.cs-path {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 0;
  font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--cw-navy-ink);
}
.cs-crumb { font-weight: 500; }
.cs-sep { color: var(--cw-blue-ink); }

/* values to type, each with its copy button */
.cs-values { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.cs-value { display: flex; align-items: center; gap: 2px 12px; min-height: 44px; }
.cs-v { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; min-width: 0; max-width: 100%; }
/* a phone puts the label over its value, and the copy button under a value too long to share a line */
@media (max-width: 560px) {
  .cs-value { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 4px 0; }
}
.cs-label {
  display: block; min-width: 76px; margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 20px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--g-muted);
}
.cs-code {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.4; color: var(--cw-navy-ink);
  white-space: nowrap; max-width: 100%; overflow-x: auto; box-sizing: border-box;
  padding: 2px 8px; background: var(--panel-light); border-radius: var(--radius-sm);
}
.cs-copy {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; color: var(--cw-navy); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur-hover) var(--ease-out);
}
.cs-copy .cs-ico { color: var(--cw-blue-ink); }
.cs-copy:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 0; }
.cs-copy:active { color: var(--cw-blue-ink); }
.cs-copy:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cs-copy:hover:not(:disabled) { color: var(--cw-blue-ink); } }

/* ---------- the form: this computer's details, then a tick for each part of the script ---------- */
.cs-fields {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  align-items: start; gap: 12px 10px; margin: 8px 0 0; max-width: 900px;
}
@media (max-width: 720px) { .cs-fields { grid-template-columns: 1fr 1fr; } }
/* the two for the report on the same columns, the area code's area beside its box, centred on it;
   a label stays on one line, and its column grows to hold it */
.cs-fields .cs-label { white-space: nowrap; }
.cs-fields.cs-fields-more { grid-template-columns: minmax(min-content, 1.3fr) minmax(min-content, 1fr) repeat(2, minmax(0, 1fr)); margin-top: 18px; }
@media (max-width: 720px) { .cs-fields.cs-fields-more { grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr); } }
.cs-note.cs-area-said { grid-column: 3 / -1; display: flex; align-items: center; min-height: 44px; margin: var(--label-room) 0 0; }
@media (max-width: 720px) { .cs-note.cs-area-said { grid-column: 1 / -1; min-height: 0; margin: 0; } }
@media (max-width: 560px) { .cs-fields.cs-fields-more { grid-template-columns: minmax(0, 1fr); } }
.cs-field { margin: 0; min-width: 0; }
.cs-field .cs-label { margin: 0 0 4px; }
/* the boxes sit level in their rows, their labels on top; a reason under one grows only its own
   cell, and a note beside a box drops by its label's room to sit level with the box */
.cs-fields, .cs-sig-fields { --label-room: 24px; }
.cs-field input, .cs-field select {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 14px;
  font-family: var(--font-ui); font-size: 16px; color: var(--cw-navy-ink);
  background-color: var(--g-surface); border: 1px solid var(--cw-line); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none; transition: border-color var(--dur-hover) var(--ease-out);
}
.cs-field input { text-transform: uppercase; }
.cs-field input::placeholder { color: var(--cw-mute); text-transform: none; }
.cs-field select {
  padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.cs-field input:focus-visible, .cs-field select:focus-visible { border-color: var(--cw-navy); outline: 2px solid var(--coastal-700); outline-offset: 2px; }
.cs-field input[aria-invalid="true"] { border-color: var(--danger-ink); }
/* a box's reason, under it, once the box is left wrong (sayOnLeave); it takes no room until then */
.cs-why { display: block; margin: 6px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--danger-ink); }
.cs-why:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .cs-field input:hover, .cs-field select:hover { border-color: var(--cw-navy-soft); } }
/* the session ID and its Join button on one line, the button level with the box */
.cs-join { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 14px 0 0; }
.cs-join .cs-field { flex: 0 1 240px; }
.cs-join .cs-actions { margin: 0; }
.cs-problem { margin: 6px 0 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--danger-ink); }
/* the line on which system the script is for, under the fields */
.cs-note { margin: 6px 0 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--g-muted); }
/* a problem or note line is always there for screen readers, and takes no room while it is empty */
.cs-problem:empty, .cs-note:empty { margin: 0; }

/* the ticks, their groups set in two columns */
.cs-picksets { columns: 2; column-gap: 40px; margin: 18px 0 0; }
@media (max-width: 720px) { .cs-picksets { columns: 1; } }
.cs-pickset { break-inside: avoid; margin: 0; padding: 0 0 20px; min-width: 0; }
.cs-pickset > .cs-h3 { margin-top: 0; }
.cs-picks { list-style: none; margin: 0; padding: 0; }
.cs-pick { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 7px 0; }
/* each line's mark, filled in the ink on a tile, as Tech Check's tiles */
.cs-pick-tile {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cw-navy); background: var(--cw-blue-paper); border-radius: var(--radius-sm);
}
.cs-pick-in { min-width: 0; }
.cs-pick-label { display: block; font-family: var(--font-body-serif); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--cw-navy-ink); }
.cs-pick-about { display: block; margin: 2px 0 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--g-muted); }

/* ---------- the signature maker: the details, then the signature on white, as mail shows it ---------- */
.cs-sig-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: 12px 10px; margin: 12px 0 0; max-width: 900px; }
/* the office starts its own row, its address beside it (typed, for another office), then the phones */
.cs-sig-office, .cs-sig-phone { grid-column: 1; }
.cs-sig-address { grid-column: 2 / -1; }
.cs-note.cs-sig-office-said { grid-column: 2 / -1; display: flex; align-items: center; min-height: 44px; margin: var(--label-room) 0 0; }
@media (max-width: 720px) {
  .cs-sig-fields { grid-template-columns: minmax(0, 1fr); }
  .cs-sig-office, .cs-sig-phone, .cs-sig-address { grid-column: auto; }
  .cs-note.cs-sig-office-said { grid-column: auto; min-height: 0; margin: 0; }
}
.cs-sig .cs-field input { text-transform: none; }
.cs-sig-card {
  margin: 14px 0 0; padding: 22px 26px; max-width: 620px; box-sizing: border-box; overflow-x: auto;
  background: var(--surface-white); border: 1px solid var(--g-surface-rule); border-radius: var(--radius-sm);
}
@media (max-width: 560px) { .cs-sig-card { padding: 16px; } }

/* ---------- footer ---------- */
.cs-foot {
  margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--cw-line);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.6; letter-spacing: 0.01em; color: var(--g-muted);
}
.cs-foot p { margin: 0 0 4px; font: inherit; color: inherit; }

/* ---------- print: the whole page on paper ---------- */
@media print {
  html, body, body[data-ground] { background: var(--surface-white); }
  .cs-copy, .cs-skip, .cs-actions, #connect, .cs-phone { display: none !important; }
  .cs-flow { display: block !important; }
  .cs-panel { border: none; }
  .cs-step, .cs-pick { break-inside: avoid; }
}

/* ---------- dark: the page follows the system's dark setting ---------- */
/* The navy family Tech Check and Intelligence wear: the design system's deep navy for the ground,
   the brand navy for the panels and fields, lines of pale blue, the ramp's pale blues for ink and
   sky for the wordmark's italic word and the focus ring. The colour tokens take their dark values
   on the body, so every rule above follows without a second copy. A computer's screen can turn
   the page light with the switch (data-theme="light" on the root), which every rule here gives
   way to. Paper never sees it. */
@media screen and (prefers-color-scheme: dark) {
  /* the switch shows on a dark page at a computer's width with a mouse or trackpad: never on a phone */
  @media (pointer: fine) and (min-width: 561px) {
    html:where(:not([data-theme="light"])) .cs-theme { display: flex; }
  }
  html:where(:not([data-theme="light"])) { background: var(--deep-navy); color-scheme: dark; }
  :where(html:not([data-theme="light"])) .cs-logo img.cs-logo-dark { display: none; }
  :where(html:not([data-theme="light"])) .cs-logo img.cs-logo-light { display: block; }
  :where(html:not([data-theme="light"])) body[data-ground] {
    --g-bg: var(--deep-navy);
    --g-fg: var(--coastal-100);
    --g-muted: var(--coastal-300);
    --g-rule: color-mix(in srgb, var(--coastal-300) 24%, transparent);
    --g-surface: var(--coastal-900);
    --g-surface-rule: color-mix(in srgb, var(--coastal-300) 24%, transparent);
    --panel-light: var(--coastal-800);
    --cw-navy: var(--coastal-50);
    --cw-navy-ink: var(--coastal-100);
    --cw-navy-soft: color-mix(in srgb, var(--coastal-50) 30%, transparent);
    --cw-link: var(--coastal-300);
    --cw-blue-ink: var(--coastal-300);
    --cw-blue-paper: color-mix(in srgb, var(--coastal-800) 60%, var(--coastal-900));
    --cw-line: color-mix(in srgb, var(--coastal-300) 24%, transparent);
    --cw-line-soft: color-mix(in srgb, var(--coastal-300) 14%, transparent);
    --cw-mute: var(--coastal-400);
    --coastal-700: var(--coastal-500);
    --warning-ink: color-mix(in srgb, var(--warning) 55%, var(--coastal-50));
    --success-ink: var(--success-ink-dark);
    /* the design system's dark green press: the light green 80% over the deep navy, so the navy
       label still reads on it */
    --success-press: color-mix(in oklab, var(--success-ink) 80%, var(--deep-navy));
    --danger-ink: var(--danger-ink-dark);
  }
  :where(html:not([data-theme="light"])) .cs-h1 em { color: var(--coastal-500); }
}