/* Tech Check page sheet. Colour and type come from the token sheets it loads
   beside. */

/* ---------- page ---------- */
html { background: var(--cw-navy); color-scheme: only light; } /* iOS samples this for the status bar */
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body-serif);
  color: var(--g-fg);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
}
main:focus { outline: none; }
.tc-wrap { max-width: 780px; margin: 0 auto; padding: 40px 24px 72px; }
@media (max-width: 720px) { .tc-wrap { padding: 28px 16px 56px; } }

/* skip link: hidden until keyboard focus, then a
   fixed chip; transition:none so the first control a keyboard user meets is instant */
.tc-skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  opacity: 0; transition: none;
}
.tc-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: 12px; 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;
}

/* ---------- masthead (the one page-title scale: 52 → 38) ---------- */
.tc-mast { border-bottom: 1px solid var(--g-rule); padding: 0 0 20px; margin: 0 0 28px; }
.tc-eyebrow {
  font-family: var(--font-body-serif); font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--g-eyebrow); margin: 0 0 10px;
}
.tc-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;
}
.tc-h1 em { font-style: italic; color: var(--cw-blue-ink); }
@media (max-width: 720px) { .tc-h1 { font-size: 38px; } }
.tc-lede {
  font-family: var(--font-body-serif); font-size: 18px; line-height: var(--leading-body);
  color: var(--g-fg); max-width: 640px; margin: 14px 0 0;
}
.tc-mast-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* ---------- panels & steps ---------- */
.tc-panel {
  background: var(--g-surface); border: 1px solid var(--g-surface-rule);
  border-radius: var(--radius-md); padding: 24px; margin: 0 0 18px;
}
@media (max-width: 720px) { .tc-panel { padding: 18px 16px; } }
.tc-step {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gray-700); margin: 0 0 8px;
}
.tc-h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--cw-navy); margin: 0 0 8px;
}
.tc-sub {
  font-family: var(--font-body-serif); font-size: 15px; line-height: 1.6; color: var(--g-muted);
  margin: 0 0 16px; max-width: 620px;
}
.tc-p { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.tc-p:last-child { margin-bottom: 0; }

/* ---------- requirements checklist ---------- */
.ck { list-style: none; margin: 0; padding: 0; }
.ck li {
  position: relative; padding: 9px 0 9px 26px; font-size: 15px; line-height: 1.5;
  font-family: var(--font-body-serif); color: var(--cw-navy-ink);
  border-top: 1px solid var(--cw-line-soft); border-radius: var(--radius-md);
}
.ck li:first-child { border-top: none; }
.ck li::before {
  content: "\2713"; position: absolute; left: 0; top: 9px; color: var(--success-ink);
  font-family: var(--font-mono); font-size: 13px;
}
.ck li.no::before { content: "\2715"; color: var(--danger-ink); }
.ck li.warn::before { content: "!"; color: var(--warning-ink); font-weight: 700; }
.ck li.wait::before { content: "\2026"; color: var(--cw-graphite); }
.ck li small { display: block; font-size: 13px; color: var(--g-muted); margin-top: 2px; }

/* ---------- two-up choice (Windows / Mac) ---------- */
.tc-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .tc-choice { grid-template-columns: 1fr; } }
.tc-os {
  border: 1px solid var(--cw-line); border-radius: var(--radius-md); padding: 16px;
  background: var(--g-surface); display: flex; flex-direction: column; gap: 10px;
}
.tc-os h3 {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cw-navy); margin: 0;
}
.tc-os .tc-btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 380px) { .tc-os .tc-btn { white-space: normal; text-align: center; } } /* too narrow for one line: two, never past the card */

/* ---------- buttons: navy fill / navy ghost, 2px radius, 44px, uppercase 13/600/.06em ---------- */
.tc-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 22px; cursor: pointer; line-height: 1.2; box-sizing: border-box;
  border: 1px solid var(--cw-navy); border-radius: var(--radius-sm);
  background: var(--cw-navy); color: var(--white);
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.tc-btn.ghost { background: transparent; color: var(--cw-navy); border-color: var(--cw-navy-soft); }
/* a link styled as a button keeps the button's ink: the sheet's link colours (rest and hover) never reach it */
a.tc-btn, a.tc-btn:visited { color: var(--white); text-decoration: none; }
a.tc-btn.ghost, a.tc-btn.ghost:visited { color: var(--cw-navy); }
.tc-btn.sm { padding: 10px 14px; font-size: 12px; } /* smaller type and padding; the 44px floor stays */
.tc-btn svg { width: 16px; height: 16px; flex: none; }
.tc-btn[disabled], .tc-btn[aria-disabled="true"] {
  background: var(--cw-fog-soft); color: var(--cw-graphite); border-color: var(--cw-line); cursor: not-allowed;
}
.tc-btn:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
.tc-btn:not([disabled]):active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .tc-btn:not(.ghost):not([disabled]):hover { background: var(--cw-navy-deep); border-color: var(--cw-navy-deep); color: var(--white); }
  .tc-btn.ghost:not([disabled]):hover { background: var(--cw-navy); color: var(--white); border-color: var(--cw-navy); }
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) { .tc-btn:not([disabled]):hover { transform: translateY(-1px); } }
}
.tc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
.tc-actions .tc-note { flex-basis: 100%; }

/* ---------- form ---------- */
.tc-fs { border: 0; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cw-line); min-width: 0; }
.tc-fs:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.tc-fs legend {
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gray-700);
}
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; clear: both; }
.tc-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 480px) { .tc-grid { grid-template-columns: 1fr; } .tc-grid .span2 { grid-column: auto; } }
.tc-field { margin: 0; min-width: 0; }
.tc-field label, .tc-field .tc-label {
  display: block; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  color: var(--cw-navy); margin: 0 0 5px;
}
.tc-field .req { color: var(--danger-ink); font-weight: 600; }
.tc-field input, .tc-field select, .tc-field textarea {
  width: 100%; box-sizing: border-box; min-height: 40px;
  font-family: var(--font-ui); font-size: 14px; color: var(--cw-navy-ink);
  background: var(--white); border: 1px solid var(--cw-line); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.tc-field textarea { min-height: 88px; resize: vertical; line-height: 1.45; font-family: var(--font-mono); font-size: 13px; }
.tc-field input::placeholder, .tc-field textarea::placeholder { color: var(--cw-mute); font-style: italic; }
.tc-field input:focus-visible, .tc-field select:focus-visible, .tc-field textarea:focus-visible {
  outline: 2px solid var(--coastal-700); outline-offset: 1px;
}
.tc-field input[readonly] { background: var(--cw-fog-soft); }
.tc-field input[aria-invalid="true"], .tc-field select[aria-invalid="true"] { border-color: var(--danger-ink); }
.tc-help { font-family: var(--font-body-serif); font-size: 12.5px; line-height: 1.45; color: var(--g-muted); margin: 4px 0 0; }
.tc-err { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--danger-ink); margin: 4px 0 0; }
.tc-err:empty { display: none; }
@media (pointer: coarse) { .tc-field input, .tc-field select, .tc-field textarea { font-size: 16px; } }

/* ---------- notes / callouts (tint, never an accent bar) ---------- */
.tc-note {
  font-family: var(--font-body-serif); font-size: 13.5px; line-height: 1.5; color: var(--cw-blue-ink);
  background: var(--cw-blue-paper); border-radius: var(--radius-md); padding: 10px 12px; margin: 12px 0 0;
}
.tc-note.warn { color: var(--warning-ink); background: var(--warning-tint); }
.tc-note.danger { color: var(--danger-ink); background: var(--danger-tint); }
.tc-note:empty { display: none; }
.tc-filled { display: none; }
.tc-filled.on { display: block; }

/* ---------- status pills (.st grammar) ---------- */
.st {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-sm); white-space: nowrap;
  display: inline-block;
}
.st.done { background: var(--success-tint); color: var(--success-ink); }
.st.review { background: var(--warning-tint); color: var(--warning-ink); }
.st.open { background: var(--danger-tint); color: var(--danger-ink); }
.st.future { background: var(--cw-fog-soft); color: var(--cw-graphite); border: 1px solid var(--cw-line); }

/* ---------- results ---------- */
.tc-verdict {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  border-radius: var(--radius-md); padding: 16px 18px; margin: 0 0 18px;
}
.tc-verdict.pass { background: var(--success-tint); }
.tc-verdict.fail { background: var(--danger-tint); }
.tc-verdict.review { background: var(--warning-tint); }
.tc-verdict h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0; }
.tc-verdict h3:focus { outline: none; } /* programmatic announce target, not a control */
.tc-verdict.pass h3 { color: var(--success-ink); }
.tc-verdict.fail h3 { color: var(--danger-ink); }
.tc-verdict.review h3 { color: var(--warning-ink); }
.tc-verdict p { flex-basis: 100%; margin: 0; font-family: var(--font-body-serif); font-size: 15px; line-height: 1.55; color: var(--cw-navy-ink); }

.tc-checks { list-style: none; margin: 0; padding: 0; }
.tc-checks li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--cw-line-soft);
}
.tc-checks li:first-child { border-top: 0; padding-top: 0; }
.tc-checks .k { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--cw-navy); }
.tc-checks .v { grid-column: 1; font-family: var(--font-body-serif); font-size: 14.5px; line-height: 1.55; color: var(--cw-navy-ink); margin: 0; }
.tc-checks .v small { display: block; color: var(--g-muted); font-size: 13px; margin-top: 2px; }
.tc-checks .st { grid-column: 2; grid-row: 1; justify-self: end; }

.tc-table { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
.tc-table caption {
  text-align: left; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gray-700); padding: 0 0 8px;
}
.tc-table th, .tc-table td {
  text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-top: 1px solid var(--cw-line-soft);
  font-size: 14px; line-height: 1.45;
}
.tc-table th { font-family: var(--font-ui); font-weight: 600; font-size: 12px; color: var(--cw-graphite); width: 38%; }
.tc-table td { font-family: var(--font-body-serif); color: var(--cw-navy-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tc-table tr:first-child th, .tc-table tr:first-child td { border-top: 0; }

.tc-meta { font-family: var(--font-ui); font-size: 11.5px; color: var(--cw-graphite); margin: 14px 0 0; }
.tc-meta b { font-weight: 600; color: var(--cw-navy); }

/* code / report readout */
.tc-code {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--cw-navy-ink);
  background: var(--cw-fog-soft); border: 1px solid var(--cw-line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto;
}
.tc-kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--cw-graphite);
  border: 1px solid var(--cw-line); background: var(--cw-fog-soft); padding: 2px 7px; border-radius: 3px;
}

/* details / collapsible advanced */
.tc-details { margin: 14px 0 0; }
.tc-details summary {
  cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--cw-blue-ink);
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.tc-details summary::-webkit-details-marker { display: none; }
.tc-details summary::before { content: "+"; font-family: var(--font-mono); }
.tc-details[open] summary::before { content: "\2212"; }
.tc-details summary:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tc-details summary:hover { border-bottom-color: var(--cw-blue-ink); color: var(--cw-navy); } }

/* inline text link */
.tc-link { color: var(--cw-link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-hover) var(--ease-out); }
.tc-link:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tc-link:hover { color: var(--cw-navy); } }

/* ---------- footer ---------- */
.tc-foot {
  margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--cw-line);
  font-family: var(--font-ui); font-size: 11.5px; line-height: 1.6; color: var(--cw-graphite);
}
.tc-foot p { margin: 0 0 4px; font-family: var(--font-ui); font-size: inherit; line-height: inherit; }
.tc-int {
  display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--cw-fog-soft); color: var(--cw-graphite);
  border: 1px solid var(--cw-line); border-radius: var(--radius-sm); padding: 3px 8px; margin: 0 8px 6px 0;
}

/* ---------- state ---------- */
[hidden] { display: none !important; }
html:not([data-js]) .js-only { display: none; }
.tc-live:empty { display: none; }

/* ---------- reduced motion: rest everything ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tc-btn:not([disabled]):active { transform: none; }
}

/* ---------- print: the report only, on white, colours kept ---------- */
@page { size: 8.5in 11in; margin: 0.6in; }
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: var(--white) !important; margin: 0 !important; height: auto !important; overflow: visible !important; }
  .tc-wrap { max-width: none; padding: 0; }
  .tc-skip, .tc-mast-actions, .tc-extras, .tc-send, .tc-btn, .no-print, .tc-details, .tc-foot .tc-int,
  #check, #standard, #how, #manual, #about, .tc-share, #results > .tc-note, .tc-lede { display: none !important; } /* the printed report: the result and the device table */
  #results .tc-details { display: block !important; }
  #results .tc-details > summary { display: none !important; }
  .tc-panel { border: 0; padding: 0; margin: 0 0 18pt; break-inside: avoid; }
  .tc-h1 { font-size: 30pt; }
  .tc-h2 { font-size: 16pt; }
  .tc-verdict { break-inside: avoid; }
  .tc-code { max-height: none; overflow: visible; }
  body { font-size: 11pt; }
  .tc-foot, .tc-meta, .tc-help { font-size: 8.5pt; }
}

/* the printable standard: one Letter sheet. The six requirements run in two columns, the
   type steps down to sheet sizes, and nothing splits across a page. */
@page { size: Letter portrait; margin: 0.5in; }
@media print {
  [data-page="standard"] .tc-mast { padding: 0 0 8pt; margin: 0 0 12pt; }
  [data-page="standard"] .tc-brandrow { margin: 0 0 6pt; }
  [data-page="standard"] .tc-logo img { height: 14pt; }
  [data-page="standard"] .tc-h1 { font-size: 22pt; margin: 0 0 4pt; }
  [data-page="standard"] .tc-lede { display: block !important; font-size: 9.5pt; line-height: 1.4; margin: 0; max-width: none; }
  [data-page="standard"] .tc-panel { margin: 0 0 10pt; break-inside: auto; }
  [data-page="standard"] .tc-h2 { font-size: 12.5pt; margin: 0 0 4pt; }
  [data-page="standard"] .tc-std { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20pt; }
  [data-page="standard"] .tc-std > li { padding: 7pt 0; gap: 8pt; border-top: 1px solid var(--cw-line-soft); break-inside: avoid; }
  [data-page="standard"] .tc-std > li:nth-child(-n+2) { border-top: 0; padding-top: 2pt; }
  [data-page="standard"] .tc-std > li:last-child { padding-bottom: 7pt; }
  [data-page="standard"] .tc-reqico { width: 16pt; height: 16pt; border-radius: 2pt; }
  [data-page="standard"] .tc-reqico svg { width: 11pt; height: 11pt; }
  [data-page="standard"] .tc-std-body h3 { font-size: 9.5pt; margin: 1pt 0 2pt; line-height: 1.25; }
  [data-page="standard"] .tc-std-body p { font-size: 8.5pt; line-height: 1.38; margin: 0 0 2pt; }
  [data-page="standard"] .tc-std-buy b { font-size: 7pt; margin-right: 4pt; }
  [data-page="standard"] .tc-std-provided { border: 1px solid var(--cw-line); padding: 8pt 10pt; }
  [data-page="standard"] .tc-std-lead { font-size: 8.5pt; line-height: 1.38; margin: 0 0 6pt; }
  [data-page="standard"] .tc-reqs { gap: 5pt 20pt; }
  [data-page="standard"] .tc-reqs li { gap: 8pt; }
  [data-page="standard"] .tc-reqtext { font-size: 8.5pt; line-height: 1.35; padding-top: 0; }
  [data-page="standard"] .tc-reqtext b { font-size: 7pt; margin-bottom: 1pt; }
  [data-page="standard"] .tc-callout { padding: 6pt 10pt; margin: 0 0 8pt; font-size: 8.5pt; line-height: 1.38; border: 1px solid var(--cw-line); break-inside: avoid; }
  [data-page="standard"] .tc-callout .tc-safe-k { font-size: 7pt; margin: 0 0 3pt; gap: 6pt; }
  [data-page="standard"] .tc-callout .tc-callico svg { width: 11pt; height: 11pt; }
  [data-page="standard"] .tc-safe p:not(.tc-safe-k) { padding-left: 0; }
  [data-page="standard"] .tc-foot { font-size: 8pt; margin: 0; padding: 6pt 0 0; }
  [data-page="standard"] .tc-foot p { margin: 0; }
}

/* ---------- verdict tones, notes, inline actions ---------- */
.tc-verdict.upgrade { background: var(--warning-tint); }
.tc-verdict.upgrade h3 { color: var(--warning-ink); }
.tc-notes { margin: 14px 0 0; padding: 12px 14px; background: var(--cw-fog-soft); border: 1px solid var(--cw-line); border-radius: var(--radius-md); }
.tc-notes h4 { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-700); margin: 0 0 6px; }
.tc-notes ul { margin: 0; padding: 0 0 0 18px; font-family: var(--font-body-serif); font-size: 14px; line-height: 1.55; color: var(--cw-navy-ink); }
.tc-notes li { margin: 0 0 4px; }
.tc-notes li.alert { color: var(--danger-ink); }
.st.warning { background: var(--warning-tint); color: var(--warning-ink); }
.tc-checks .sub { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--g-muted); margin-top: 1px; font-weight: 400; }
.tc-share { margin: 12px 0 0; }
.tc-share input { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 12px; color: var(--cw-navy-ink); background: var(--white); border: 1px solid var(--cw-line); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 36px; }
.tc-share input:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 1px; }

/* ---------- result first ---------- */
/* One path: run the script, see the result. The result panel leads once it exists. */
[data-state="result"] #check, [data-state="result"] #standard, [data-state="result"] #how { display: none; }
body:not([data-hand]) #manual { display: none; }
/* the appointment fallback under the two cards: a line and a ghost button, wrapping on a phone */
.tc-assist { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 0; font-family: var(--font-body-serif); font-size: 14.5px; line-height: 1.55; color: var(--g-fg); }

/* a panel that folds: <details class="tc-panel tc-fold"> */
.tc-fold > summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center;
  margin: -24px; padding: 24px; border-radius: var(--radius-md);
  transition: background var(--dur-hover) var(--ease-out);
}
.tc-fold > summary::-webkit-details-marker { display: none; }
.tc-fold > summary::after {
  content: "+"; grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 20px; line-height: 1;
  color: var(--cw-blue-ink); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cw-line); border-radius: var(--radius-sm); background: var(--white);
}
.tc-fold[open] > summary::after { content: "\2212"; }
.tc-fold[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--cw-line-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tc-fold[open] > summary + * { margin-top: 20px; }
.tc-fold > summary .tc-h2 { margin: 0; font-size: 22px; }
.tc-fold > summary .tc-help { margin: 0; grid-column: 1; }
.tc-fold > summary:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .tc-fold > summary:hover { background: var(--cw-fog-soft); } }
@media (max-width: 720px) { .tc-fold > summary { margin: -18px -16px; padding: 18px 16px; } }
.tc-fold .tc-details { margin-top: 18px; }
.tc-fold .tc-details[open] > summary { margin-bottom: 12px; }

/* a button that reads as a text link */
.tc-linkbtn {
  font: inherit; color: var(--cw-link); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-hover) var(--ease-out);
}
.tc-linkbtn:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tc-linkbtn:hover { color: var(--cw-navy); } }

/* results */
.tc-summary { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.55; color: var(--g-muted); margin: 0 0 18px; }
.tc-summary b { color: var(--cw-navy-ink); font-weight: 500; }
#results .tc-details { margin-top: 16px; }
#results .tc-details[open] > summary { margin-bottom: 4px; }

/* ---------- logo, icons, requirement tiles, result ---------- */
/* the masthead logo */
.tc-brandrow { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.tc-logo { margin: 0; }
.tc-logo img { display: block; height: 22px; width: auto; }
/* the logo and the wordmark lead back to the start: plain ink, no underline, a ring on keyboard focus */
.tc-home { color: inherit; text-decoration: none; display: inline-block; }
@media (hover: hover) and (pointer: fine) { .tc-home:hover { color: inherit; text-decoration: none; } }
.tc-home:focus-visible { outline: 2px solid var(--cw-blue-soft); outline-offset: 4px; border-radius: var(--radius-sm); }
.tc-brand { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.15; }
@media (max-width: 720px) { .tc-logo img { height: 18px; } }
.ci-wordmark { font-style: normal; }
.ci-wordmark .ci-coastal { color: var(--cw-navy); font-style: normal; }
.ci-wordmark .ci-intelligence { color: var(--cw-blue-ink); font-style: italic; }
@media (max-width: 720px) { .tc-brand { font-size: 17px; } }
.tc-mast { padding-bottom: 24px; }

.tc-ico { display: inline-block; vertical-align: middle; flex: none; }
.tc-btn .tc-ico { margin-right: 2px; }
.tc-os h3 { display: flex; align-items: center; gap: 18px; font-size: 19px; letter-spacing: 0; }
.tc-osico {
  flex: none; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cw-navy); background: var(--cw-blue-paper); border-radius: var(--radius-sm);
}
.tc-foldico {
  grid-row: 1 / span 2; 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);
}
.tc-fold > summary { grid-template-columns: auto 1fr auto; }
.tc-fold > summary .tc-h2, .tc-fold > summary .tc-help { grid-column: 2; }
.tc-fold > summary::after { grid-column: 3; }

/* a panel's own header: icon tile, title and help line, a line beneath it as on an open fold */
.tc-sechead {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center;
  margin: -24px -24px 20px; padding: 24px 24px 20px; border-bottom: 1px solid var(--cw-line-soft);
}
.tc-sechead .tc-foldico { grid-row: 1 / span 2; }
/* a title with no help line centres on the tile alone, not on an empty second row */
.tc-sechead:not(:has(> .tc-help)) .tc-foldico { grid-row: 1; }
.tc-sechead .tc-h2, .tc-sechead .tc-help { grid-column: 2; margin: 0; }
.tc-sechead .tc-h2 { font-size: 22px; }
@media (max-width: 720px) { .tc-sechead { margin: -18px -16px 18px; padding: 18px 16px; } }
/* the standard page: six numbered points, icon tile beside a heading, a line of plain
   explanation and a "when buying" line; the onboarding block reuses the standard's tiles */
.tc-std { list-style: none; margin: 0; padding: 0; counter-reset: std; }
.tc-std > li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--cw-line-soft); }
.tc-std > li:first-child { border-top: 0; padding-top: 6px; }
.tc-std > li:last-child { padding-bottom: 4px; }
.tc-std .tc-reqico { margin-top: 0; }
.tc-std-body { min-width: 0; }
.tc-std-body h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--cw-navy); margin: 8px 0 6px; line-height: 1.3; }
.tc-std-body p { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.55; color: var(--g-fg); margin: 0 0 6px; }
.tc-std-body p:last-child { margin-bottom: 0; }
.tc-std-buy { color: var(--cw-navy-ink); }
.tc-std-buy b { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cw-navy); margin-right: 6px; }
.tc-std-provided { background: var(--cw-blue-paper); }
.tc-std-provided .tc-reqico { background: var(--white); }
.tc-std-lead { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.55; color: var(--g-fg); margin: -4px 0 22px; }
[data-page="standard"] .tc-mast, [data-page="how"] .tc-mast { padding-bottom: 24px; }
[data-page="standard"] .tc-callout { margin-top: 0; }
.tc-mast-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
/* a narrow phone: the verdict tightens */
@media (max-width: 480px) {
  .tc-verdict { padding: 16px; }
}
/* the standard: two columns of icon + label + line, no boxes */
.tc-reqs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
@media (max-width: 640px) { .tc-reqs { grid-template-columns: 1fr; gap: 12px; } }
/* the rows are read, not clicked: no hover affordance on them */
.tc-reqs li { display: flex; align-items: flex-start; gap: 16px; }
.tc-reqs li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last line spans the row */
.tc-reqico {
  flex: none; 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);
}
.tc-reqtext { font-family: var(--font-body-serif); font-size: 14.5px; line-height: 1.45; color: var(--g-fg); padding-top: 1px; }
.tc-reqtext b { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cw-navy); margin: 0 0 3px; }

/* verdict with an icon */
.tc-verdict { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; padding: 18px 20px; }
.tc-verdict .tc-vico { grid-row: 1 / span 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tc-verdict h3 { grid-column: 2; }
.tc-verdict p { grid-column: 2; flex-basis: auto; }
.tc-verdict.pass .tc-vico { color: var(--success-ink); }
.tc-verdict.fail .tc-vico { color: var(--danger-ink); }
.tc-verdict.review .tc-vico, .tc-verdict.upgrade .tc-vico { color: var(--warning-ink); }
.tc-verdict.review { background: var(--cw-fog-soft); border: 1px solid var(--cw-line); }
.tc-verdict.review h3, .tc-verdict.review .tc-vico { color: var(--cw-navy); }

/* check rows with an icon column */
.tc-checks li {
  grid-template-columns: auto 1fr auto; gap: 4px 16px;
}
.tc-checks .rico {
  grid-row: 1 / span 2; 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); margin-top: 1px;
}
.tc-checks li.is-fail .rico { background: var(--danger-tint); color: var(--danger-ink); }
.tc-checks li.is-warn .rico { background: var(--warning-tint); color: var(--warning-ink); }
.tc-checks li.is-pass .rico { background: var(--success-tint); color: var(--success-ink); }
.tc-checks li.is-info .rico { background: var(--cw-fog-soft); color: var(--cw-graphite); }
.tc-checks .k { grid-column: 2; }
.tc-checks .v { grid-column: 2; }
.tc-checks .st { grid-column: 3; grid-row: 1; }
@media (max-width: 480px) {
  .tc-checks li { grid-template-columns: auto 1fr; }
  .tc-checks .st { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* ---------- the checks that passed: one line, the rows on a click ---------- */
/* The person with the device sees what needs doing first; what passed folds into a line in
   the rows' own grid (tile, text, plus box) and always prints. */
.tc-passed { margin-top: 12px; border-top: 1px solid var(--cw-line-soft); }
.tc-passed.is-all { margin-top: 0; border-top: 0; }
.tc-passed-toggle {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 16px; width: 100%;
  margin: 0; padding: 14px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tc-passed-toggle .rico {
  grid-row: 1 / span 2; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--success-tint); color: var(--success-ink); border-radius: var(--radius-sm);
}
.tc-passed-k { grid-column: 2; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--cw-navy); }
.tc-passed-v { grid-column: 2; font-family: var(--font-body-serif); font-size: 14px; line-height: 1.45; color: var(--g-muted); }
.tc-passed-toggle::after {
  content: "+"; grid-column: 3; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 20px; line-height: 1;
  color: var(--cw-blue-ink); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cw-line); border-radius: var(--radius-sm); background: var(--white);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.tc-passed-toggle[aria-expanded="true"]::after { content: "\2212"; }
.tc-passed-toggle:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .tc-passed-toggle:hover::after { color: var(--white); background: var(--cw-navy); border-color: var(--cw-navy); }
}
.tc-passed-list { padding-bottom: 4px; }
.tc-passed-list li:first-child { border-top: 1px solid var(--cw-line-soft); padding-top: 12px; }
@media print {
  .tc-passed-list[hidden] { display: block !important; }
  .tc-passed-toggle::after { display: none; }
}

/* ---------- the result's tail: the no-mail-app line, then the send bar ---------- */
/* The tail: the no-mail-app line with Copy report, then the send bar, docked to the
   bottom of the window while the result is on screen. */
.tc-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tc-fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 20px 0 0; }
#results .tc-fallback .tc-help { flex: 1 1 280px; margin: 0; }
.tc-btn-l { white-space: nowrap; }
.tc-send {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 16px;
  margin: 24px -24px -24px; padding: 20px 24px;
  background: var(--cw-blue-paper); border-top: 1px solid var(--cw-blue-mist);
  border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
/* once a result lands the bar flashes amber twice, to draw the eye to the last step; it
   runs without a fill, so the hover tint still reaches the bar afterwards */
@keyframes tc-send-call { 0%, 100% { background-color: var(--cw-blue-paper); } 45%, 55% { background-color: var(--warning-tint); } }
.tc-send { animation: tc-send-call 900ms ease-in-out 700ms 2; }
@media (prefers-reduced-motion: reduce) { .tc-send { animation: none; } }
.tc-send-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-sm); background: var(--white); color: var(--cw-navy);
}
.tc-send-text { min-width: 0; }
.tc-send-k {
  margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue-ink);
}
.tc-send-v { margin: 3px 0 0; font-family: var(--font-body-serif); font-size: 16px; line-height: 1.4; color: var(--cw-navy); }
.tc-send.is-sent .tc-send-k { color: var(--success-ink); } /* the e-mail is open: the label says so */
.tc-send-btn { min-height: 56px; padding: 16px 28px; font-size: 15px; }
/* the whole bar presses its button: the link's hit area stretches over the bar, and the
   button holds still, since a moving button would pull the hit area back to itself */
.tc-send-btn::after { content: ''; position: absolute; inset: 0; z-index: 1; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.tc-send .tc-send-btn:not([disabled]):active { transform: none; }
.tc-send:active { background: var(--coastal-200); }
@media (hover: hover) and (pointer: fine) {
  .tc-send .tc-send-btn:not([disabled]):hover { transform: none; }
  .tc-send:hover { background: var(--coastal-200); border-top-color: var(--coastal-300); }
}
@media (max-width: 720px) { .tc-send { margin: 20px -16px -18px; padding: 16px; } }
@media (max-width: 560px) {
  .tc-send { grid-template-columns: 1fr; row-gap: 8px; } /* a phone keeps the label and the button: the bar stays short while docked */
  .tc-send-ico, .tc-send-v { display: none; }
  .tc-send-btn { width: 100%; }
  .tc-extras .tc-btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .tc-extras .tc-btn .tc-ico { display: none; }
  .tc-fallback .tc-btn { flex: 1 1 100%; }
}
/* the Result header carries the restart, so the tail ends on the send bar */
#result .tc-sechead { grid-template-columns: auto 1fr auto; }
.tc-restart { grid-column: 3; grid-row: 1; }
@media (max-width: 480px) { .tc-restart { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 12px; } }
.tc-summary .tc-ico { color: var(--cw-blue-ink); margin-right: 6px; vertical-align: -3px; }

/* the "safe to run" callout: the success tint, navy ink, a shield beside the label — a reassurance, not an alarm */
.tc-callout { display: block; padding: 16px 18px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; }
.tc-callout p { margin: 0; font-size: inherit; line-height: inherit; }
.tc-callout p + p { margin-top: 6px; }
.tc-callout.warn b { font-weight: 600; color: var(--warning-ink); }
/* the success tint and ink — the palette's own "safe" colour, distinct from the blue page */
.tc-safe { background: var(--success-tint); color: var(--cw-navy-ink); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--white)); }
.tc-safe b { font-weight: 600; color: var(--cw-navy); }
.tc-callout .tc-safe-k {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--success-ink); margin: 0 0 10px; line-height: 1;
}
.tc-safe .tc-callico { display: inline-flex; color: var(--success-ink); }
.tc-ico .ico-inv { stroke: var(--white); fill: none; }
.tc-safe p:not(.tc-safe-k) { padding-left: 33px; } /* body text aligns with the label, clear of the mark */
@media (max-width: 480px) { .tc-safe p:not(.tc-safe-k) { padding-left: 0; } }
.tc-callout .tc-safe-k + p { margin-top: 0; }

/* ---------- a platform card's head: a larger tile beside the name ---------- */
/* The page's one decision carries a larger symbol than the section tiles, the same size open
   or closed, so nothing jumps when the steps unfold; a closed card's tile tints on hover. */
.tc-os .tc-osico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.tc-os .tc-osico { transition: background var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  html[data-js] .tc-os:not(:has(.tc-walk.is-open)):hover .tc-osico { background: var(--coastal-200); }
}

/* ---------- a closed platform card is one control: the whole card presses its button ---------- */
/* The button's hit area stretches over the card until the card opens; after that only the
   button presses, so reading or selecting the steps never downloads or copies again. The
   card lifts instead of the button: a moving button would pull the hit area back to itself. */
html[data-js] .tc-os { position: relative; transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
html[data-js] .tc-os:not(:has(.tc-walk.is-open)) .tc-btn::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); }
html[data-js] .tc-os:not(:has(.tc-walk.is-open)) .tc-btn:not([disabled]):active { transform: none; }
html[data-js] .tc-os:not(:has(.tc-walk.is-open)):active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-js] .tc-os:not(:has(.tc-walk.is-open)) .tc-btn:not([disabled]):hover { transform: none; }
  html[data-js] .tc-os:not(:has(.tc-walk.is-open)):hover { border-color: var(--cw-blue-mist); box-shadow: var(--shadow-ring-md); transform: translateY(-2px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { html[data-js] .tc-os:not(:has(.tc-walk.is-open)):hover { transform: none; } }

/* ---------- the standard's card on the front: one link to the full page ---------- */
/* The heading carries the link and stretches it over the card, so the card reads as a
   section and clicks as one; the arrow box mirrors the fold's plus box. */
.tc-cardpanel { position: relative; transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
.tc-cardpanel .tc-sechead { grid-template-columns: auto 1fr auto; }
/* a card that is only its header: no line and no gap beneath, the panel closes on it */
.tc-cardpanel > .tc-sechead:only-child { margin-bottom: -24px; padding-bottom: 24px; border-bottom: 0; }
@media (max-width: 720px) { .tc-cardpanel > .tc-sechead:only-child { margin-bottom: -18px; padding-bottom: 18px; } }
.tc-cardlink { color: inherit; text-decoration: none; }
.tc-cardlink::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); }
.tc-cardlink:focus-visible { outline: none; }
.tc-cardlink:focus-visible::after { outline: 2px solid var(--coastal-700); outline-offset: -2px; }
.tc-cardgo {
  grid-column: 3; grid-row: 1 / span 2; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cw-blue-ink); background: var(--white); border: 1px solid var(--cw-line); border-radius: var(--radius-sm);
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tc-cardpanel:hover { border-color: var(--cw-blue-mist); box-shadow: var(--shadow-ring-md); transform: translateY(-2px); }
  .tc-cardpanel:hover .tc-cardgo { color: var(--white); background: var(--cw-navy); border-color: var(--cw-navy); }
}
.tc-cardpanel:active { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .tc-cardpanel:hover { transform: none; } }
@media print { .tc-cardgo { display: none; } }

/* ---------- a phone or tablet: a plain notice with a share button ---------- */
/* Neither script runs there, so the start view drops the cards and the standard for
   one notice. A result or a shared report still shows in full. */
.tc-phone { display: none; }
html[data-mobile] body[data-state="start"] .tc-phone { display: block; }
html[data-mobile] body[data-state="start"] #check,
html[data-mobile] body[data-state="start"] #standard,
html[data-mobile] body[data-state="start"] #how,
html[data-mobile] body[data-state="start"] #manual,
html[data-mobile] body[data-state="start"] .tc-lede { display: none; }
.tc-phone-lead { margin: 0 0 16px; font-family: var(--font-body-serif); font-size: 16px; line-height: 1.55; color: var(--g-fg); }
.tc-phone .tc-btn { width: 100%; justify-content: center; }
.tc-phone #share-note { margin: 10px 0 0; }
@media print { .tc-phone { display: none !important; } }

/* ---------- the walkthrough: each card's run, drawn as a loop ---------- */
/* Once a card's button has done its job, a picture and the steps unfold under it.
   The picture holds a moment, shows the button's result landing (the download
   arriving, the command copied), then plays the steps still ahead on one timeline
   per platform; the step it is showing lights up in the list and the first step
   shows done. It plays while it is on screen and the tab is visible, and opens on
   its most telling frame when the system asks for reduced motion. The --tc-os-*
   values are the operating systems' own colours: the windows drawn here are
   theirs, not the firm's. */
.tc-walk {
  --tc-walk-loop: 18.4s;
  --tc-walk-lead: 0.5s;
  --tc-walk-letter: 150ms;
  --tc-walk-blink: 1.1s;
  --tc-os-mac-close: #ff5f57;
  --tc-os-mac-min: #febc2e;
  --tc-os-mac-zoom: #28c840;
  --tc-os-mac-select: #0a64d9;
  --tc-os-mac-chrome: #ececec;
  --tc-os-menubar: rgba(255, 255, 255, 0.55);
  --tc-os-glass: rgba(255, 255, 255, 0.94);
  --tc-os-term: #1e1e20;
  --tc-os-term-bar: #2e2e31;
  --tc-os-term-fg: #ededed;
  --tc-os-term-dim: #a1a1a6;
  --tc-os-win-chrome: #f3f3f3;
  --tc-os-win-accent: #005fb8;
  --tc-os-win-smart: #0067c0;
  --tc-os-win-console: #0c0c0c;
  --tc-os-win-console-bar: #202020;
  --tc-os-win-console-fg: #cccccc;
  --tc-os-win-taskbar: rgba(243, 243, 243, 0.9);
  display: flex; flex-direction: column;
}
.tc-walk[data-walk="mac"] { --tc-walk-loop: 17.6s; }
/* the two cards: the button under the heading at the card's full width, so both match */
.tc-choice:has(.tc-walk.is-open) { align-items: start; } /* level at rest; an open card grows alone */
.tc-os .tc-btn { width: 100%; align-self: stretch; justify-content: center; margin-top: 0; }
/* the picture and the steps stay closed until the button is pressed; the height
   opens on a 0fr to 1fr row, and a closed card's steps are out of reach of a
   screen reader. With no script, or on paper, they stay open. */
.tc-walk-reveal {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal);
}
.tc-walk.is-open .tc-walk-reveal, html:not([data-js]) .tc-walk-reveal {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out), visibility 0s linear 0s;
}
.tc-walk-clip { min-height: 0; overflow: hidden; margin: 0 -8px; padding: 0 8px; } /* room for the steps' band to bleed */
.tc-walk-stage {
  margin: 0 0 12px; padding: 10px; border-radius: var(--radius-lg);
  background: var(--cw-fog-soft); box-shadow: inset 0 0 0 1px var(--cw-line);
}
.tc-walk-art { display: block; width: 100%; height: auto; }
.tc-walk-art text { font-family: var(--font-ui); text-rendering: geometricPrecision; }
.tc-walk-art .w-letter { --i: 0; } /* each letter's place in the word; the markup sets it */
.tc-walk-art .w-spot, .tc-walk-art .w-term, .tc-walk-art .w-smart,
.tc-walk-art .w-console, .tc-walk-art .w-chip, .tc-walk-art .w-press { transform-box: fill-box; transform-origin: center; }
.tc-walk-art .w-dlbar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }

/* paint */
.tc-walk-art .s-wall-a { stop-color: var(--coastal-200); }
.tc-walk-art .s-wall-b { stop-color: var(--coastal-500); }
[data-walk="win"] .tc-walk-art .s-wall-a { stop-color: var(--coastal-100); }
[data-walk="win"] .tc-walk-art .s-wall-b { stop-color: var(--coastal-400); }
.tc-walk-art .s-bloom-a { stop-color: var(--white); stop-opacity: 0.6; }
.tc-walk-art .s-bloom-b { stop-color: var(--white); stop-opacity: 0; }
.tc-walk-art .f-white { fill: var(--white); }
.tc-walk-art .f-navy { fill: var(--cw-navy); }
.tc-walk-art .f-line { fill: var(--cw-line); }
.tc-walk-art .s-line { stroke: var(--cw-line); stroke-width: 0.8; }
.tc-walk-art .f-blue-paper { fill: var(--cw-blue-paper); }
.tc-walk-art .f-blue-line { fill: var(--cw-blue-mist); }
.tc-walk-art .f-pass { fill: var(--success-tint); }
.tc-walk-art .f-pass-dot { fill: var(--success); }
.tc-walk-art .f-chrome { fill: var(--tc-os-mac-chrome); }
.tc-walk-art .f-menubar { fill: var(--tc-os-menubar); }
.tc-walk-art .f-mac-close { fill: var(--tc-os-mac-close); }
.tc-walk-art .f-mac-min { fill: var(--tc-os-mac-min); }
.tc-walk-art .f-mac-zoom { fill: var(--tc-os-mac-zoom); }
.tc-walk-art .f-mac-select { fill: var(--tc-os-mac-select); }
.tc-walk-art .f-glass { fill: var(--tc-os-glass); }
.tc-walk-art .s-glass { stroke: var(--cw-line); stroke-width: 0.6; }
.tc-walk-art .s-mag { fill: none; stroke: var(--cw-graphite); stroke-width: 1.3; stroke-linecap: round; }
.tc-walk-art .f-term { fill: var(--tc-os-term); }
.tc-walk-art .f-termbar { fill: var(--tc-os-term-bar); }
.tc-walk-art .f-termfg { fill: var(--tc-os-term-fg); }
.tc-walk-art .s-ring { fill: none; stroke: var(--cw-blue-ink); stroke-width: 1.6; }
.tc-walk-art .f-pointer-mac { fill: var(--cw-ink); stroke: var(--white); stroke-width: 1; stroke-linejoin: round; }
.tc-walk-art .f-pointer-win { fill: var(--white); stroke: var(--cw-ink); stroke-width: 0.9; stroke-linejoin: round; }
.tc-walk-art .f-winchrome { fill: var(--tc-os-win-chrome); }
.tc-walk-art .f-winaccent { fill: var(--tc-os-win-accent); }
.tc-walk-art .f-taskbar { fill: var(--tc-os-win-taskbar); }
.tc-walk-art .f-taskapp { fill: var(--white); stroke: var(--cw-line); stroke-width: 0.6; }
.tc-walk-art .s-wincontrol { fill: none; stroke: var(--cw-graphite); stroke-width: 0.8; }
.tc-walk-art .s-wincontrol-dark { fill: none; stroke: var(--tc-os-win-console-fg); stroke-width: 0.8; }
.tc-walk-art .s-file { fill: none; stroke: var(--cw-graphite); stroke-width: 0.8; stroke-linejoin: round; }
.tc-walk-art .f-white.s-file { fill: var(--white); }
.tc-walk-art .s-gear { fill: none; stroke: var(--tc-os-win-accent); stroke-width: 1.3; stroke-dasharray: 1.6 1.2; }
.tc-walk-art .f-smart { fill: var(--tc-os-win-smart); }
.tc-walk-art .f-smartline { fill: var(--white); fill-opacity: 0.55; }
.tc-walk-art .s-smartbtn { fill: transparent; stroke: var(--white); stroke-width: 1; }
.tc-walk-art .f-smartbtn { fill: var(--white); fill-opacity: 0; }
.tc-walk-art .f-console { fill: var(--tc-os-win-console); }
.tc-walk-art .f-consolebar { fill: var(--tc-os-win-console-bar); }

/* type */
.tc-walk-art .t-url { font-size: 5px; fill: var(--cw-graphite); text-anchor: middle; }
.tc-walk-art .t-omni { font-size: 5px; fill: var(--cw-graphite); }
.tc-walk-art .t-word { font-family: var(--font-display); font-size: 11px; fill: var(--cw-navy); }
.tc-walk-art .t-word-i { font-style: italic; fill: var(--cw-blue-ink); }
.tc-walk-art .t-card { font-size: 7px; font-weight: 600; letter-spacing: 0.02em; fill: var(--cw-navy); }
.tc-walk-art .t-btn { font-size: 5.4px; font-weight: 600; letter-spacing: 0.08em; fill: var(--white); text-anchor: middle; }
.tc-walk-art .t-spot { font-size: 10px; fill: var(--cw-ink); }
.tc-walk-art .t-appicon { font-family: var(--font-mono); font-size: 5.5px; font-weight: 700; fill: var(--white); }
.tc-walk-art .t-spothit { font-size: 7.6px; font-weight: 600; fill: var(--white); }
.tc-walk-art .t-spotkind { font-size: 5.6px; fill: var(--white); fill-opacity: 0.8; text-anchor: end; }
.tc-walk-art .t-termtitle { font-size: 5.6px; fill: var(--tc-os-term-dim); text-anchor: middle; }
.tc-walk-art .t-term { font-family: var(--font-mono); font-size: 7px; fill: var(--tc-os-term-fg); }
.tc-walk-art .t-termdim { font-family: var(--font-mono); font-size: 6.4px; fill: var(--tc-os-term-dim); }
.tc-walk-art .t-verdict { font-size: 8px; font-weight: 600; fill: var(--cw-navy); }
.tc-walk-art .t-chip { font-size: 5.6px; font-weight: 700; letter-spacing: 0.08em; fill: var(--success-ink); text-anchor: middle; }
.tc-walk-art .t-tab { font-size: 5.4px; fill: var(--cw-ink); }
.tc-walk-art .t-flyhead { font-size: 6px; font-weight: 600; fill: var(--cw-ink); }
.tc-walk-art .t-flyfile { font-size: 5.8px; fill: var(--cw-ink); }
.tc-walk-art .t-flylink { font-size: 5.4px; fill: var(--tc-os-win-accent); }
.tc-walk-art .t-smarthead { font-size: 10.5px; font-weight: 600; fill: var(--white); }
.tc-walk-art .t-smartlink { font-size: 7px; fill: var(--white); text-decoration: underline; }
.tc-walk-art .t-smartmeta { font-size: 6.2px; fill: var(--white); fill-opacity: 0.9; }
.tc-walk-art .t-smartbtn { font-size: 6px; fill: var(--white); text-anchor: middle; }
.tc-walk-art .t-contitle { font-size: 5.4px; fill: var(--tc-os-win-console-fg); }
.tc-walk-art .t-con { font-family: var(--font-mono); font-size: 6px; fill: var(--tc-os-win-console-fg); }

/* at rest: the frame that says the most (the paste on a Mac, the warning on Windows) */
.tc-walk-art .w-cursor, .tc-walk-art .w-ring, .tc-walk-art .w-copied,
.tc-walk-art .w-spot, .tc-walk-art .w-result, .tc-walk-art .w-caret, .tc-walk-art .w-caret2,
.tc-walk-art .w-paste, .tc-walk-art .w-flyout, .tc-walk-art .w-moreinfo, .tc-walk-art .w-console { opacity: 0; }
[data-walk="mac"] .w-browser { opacity: 0.45; }
[data-walk="win"] .w-browser { opacity: 0.5; }
.tc-walk:not(.is-live) .tc-walk-key.w-hint { background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
.tc-walk[data-walk="win"]:not(.is-live) .w-cursor { opacity: 1; transform: translate(181px, 156px); }
.tc-walk[data-walk="win"]:not(.is-live) .w-runbtn .f-smartbtn { fill-opacity: 0.22; }

/* the Mac keyboard under the picture: real type, the same names as the steps' keys */
.tc-walk-keys {
  display: flex; gap: 6px; margin-top: 10px; padding: 8px; border-radius: var(--radius-md);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--cw-line);
}
.tc-walk-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box;
  min-width: 36px; height: 34px; padding: 0 11px; white-space: nowrap;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; color: var(--cw-navy);
  background: var(--white); border: 1px solid var(--cw-line); border-bottom-width: 3px; border-radius: var(--radius-md);
}
.tc-walk-key.w-k-space { flex: 1 1 auto; }
.tc-walk-key .g { font-size: 15px; }

/* the steps the picture follows */
.tc-walk-steps { list-style: none; margin: 0; padding: 0; counter-reset: tcw; display: grid; gap: 2px; }
.tc-walk-steps li {
  counter-increment: tcw; position: relative; margin: 0 -8px; padding: 6px 8px 6px 60px; border-radius: var(--radius-md);
  font-family: var(--font-body-serif); font-size: 14.5px; line-height: 1.5; color: var(--g-fg);
}
.tc-walk-steps li::before {
  content: counter(tcw); position: absolute; left: 16px; top: 7px; box-sizing: border-box;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-full);
  border: 1px solid var(--cw-blue-mist); background: var(--white);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1; color: var(--cw-blue-ink);
}
.tc-walk-steps li b { font-weight: 600; color: var(--cw-navy); }
/* the first step is the button, so once it is pressed the step shows done */
.tc-walk.is-open .tc-walk-steps li:first-child::before { content: ''; background: var(--success-ink); border-color: var(--success-ink); }
.tc-walk.is-open .tc-walk-steps li:first-child::after {
  content: ''; position: absolute; left: 23.5px; top: 11px; width: 5px; height: 9px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tc-key {
  display: inline-block; margin: 0 1px; padding: 3px 6px 2px; vertical-align: 1px; white-space: nowrap;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 1; color: var(--cw-navy);
  background: var(--white); border: 1px solid var(--cw-line); border-bottom-width: 2px; border-radius: var(--radius-md);
}
@media (max-width: 480px) { .tc-walk-stage { padding: 8px; } .tc-walk-steps li { font-size: 14px; } }
@media print {
  .tc-walk-stage { display: none; }
  .tc-walk-reveal { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
}

@keyframes tcw-mac-browser {
  0%, 9.091% { opacity: 1; }
  11.932% { opacity: 0.45; }
  95.455% { opacity: 0.45; }
  100% { opacity: 1; }
}
@keyframes tcw-mac-spot {
  0%, 9.091% { opacity: 0; transform: scale(0.96); }
  11.364% { opacity: 0; transform: scale(0.96); }
  14.205% { opacity: 1; transform: none; }
  34.091% { opacity: 1; transform: none; }
  36.932% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.98); }
}
@keyframes tcw-mac-letter {
  0%, 9.091% { fill-opacity: 0; }
  16.477% { fill-opacity: 0; }
  16.591% { fill-opacity: 1; }
  36.364% { fill-opacity: 1; }
  37.046% { fill-opacity: 0; }
  100% { fill-opacity: 0; }
}
@keyframes tcw-mac-spotlist {
  0%, 9.091% { opacity: 0; }
  21.136% { opacity: 0; }
  21.591% { opacity: 1; }
  35.796% { opacity: 1; }
  36.25% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-term {
  0%, 9.091% { opacity: 0; transform: scale(0.96); }
  36.364% { opacity: 0; transform: scale(0.96); }
  40.341% { opacity: 1; transform: none; }
  94.318% { opacity: 1; transform: none; }
  98.295% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-mac-caret {
  0%, 9.091% { opacity: 0; }
  40% { opacity: 0; }
  40.341% { opacity: 1; }
  47.273% { opacity: 1; }
  47.614% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-cmd {
  0%, 9.091% { opacity: 0; }
  47.614% { opacity: 0; }
  47.727% { opacity: 1; }
  94.318% { opacity: 1; }
  98.295% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-paste {
  0%, 9.091% { opacity: 0; }
  47.614% { opacity: 0; }
  47.727% { opacity: 0.55; }
  53.409% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-caret2 {
  0%, 9.091% { opacity: 0; }
  47.614% { opacity: 0; }
  47.727% { opacity: 1; }
  55.682% { opacity: 1; }
  56.136% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-out1 {
  0%, 9.091% { opacity: 0; }
  58.977% { opacity: 0; }
  59.091% { opacity: 1; }
  94.318% { opacity: 1; }
  98.295% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-out2 {
  0%, 9.091% { opacity: 0; }
  62.386% { opacity: 0; }
  62.5% { opacity: 1; }
  94.318% { opacity: 1; }
  98.295% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-out3 {
  0%, 9.091% { opacity: 0; }
  65.795% { opacity: 0; }
  65.909% { opacity: 1; }
  94.318% { opacity: 1; }
  98.295% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-mac-result {
  0%, 9.091% { opacity: 0; transform: translateY(10px); }
  72.727% { opacity: 0; transform: translateY(10px); }
  77.273% { opacity: 1; transform: none; }
  94.318% { opacity: 1; transform: none; }
  98.864% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-mac-chip {
  0%, 9.091% { opacity: 0; transform: scale(0.6); }
  77.841% { opacity: 0; transform: scale(0.6); }
  80.682% { opacity: 1; transform: scale(1.08); }
  82.386% { opacity: 1; transform: none; }
  94.318% { opacity: 1; transform: none; }
  98.864% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-mac-kcmd {
  0%, 9.091% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  10.909% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  11.591% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  15% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  15.682% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  45% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  45.682% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  49.091% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  49.773% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  100% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
}
@keyframes tcw-mac-kspace {
  0%, 9.091% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  11.591% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  12.273% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  15% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  15.682% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  100% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
}
@keyframes tcw-mac-kv {
  0%, 9.091% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  45.682% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  46.364% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  49.091% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  49.773% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  100% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
}
@keyframes tcw-mac-kret {
  0%, 9.091% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  30.455% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  31.136% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  33.182% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  33.864% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  55.455% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  56.136% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  58.182% { transform: translateY(2px); background-color: var(--cw-blue-paper); border-color: var(--cw-blue-ink); }
  58.864% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
  100% { transform: none; background-color: var(--white); border-color: var(--cw-line); }
}
@keyframes tcw-mac-cursor {
  0% { opacity: 0; transform: translate(110px, 116px); }
  1.5%, 6.491% { opacity: 1; transform: translate(110px, 116px); }
  8.491%, 100% { opacity: 0; transform: translate(110px, 116px); }
}
@keyframes tcw-mac-copybtn {
  0%, 2% { transform: none; }
  2.8% { transform: scale(0.96); }
  3.8%, 100% { transform: none; }
}
@keyframes tcw-mac-copy {
  0%, 2.8% { opacity: 1; }
  3.1%, 95.455% { opacity: 0; }
  97.727%, 100% { opacity: 1; }
}
@keyframes tcw-mac-copied {
  0%, 2.8% { opacity: 0; }
  3.1%, 95.455% { opacity: 1; }
  97.727%, 100% { opacity: 0; }
}
@keyframes tcw-mac-s1 {
  0%, 8.691%, 98.4%, 100% { background-color: var(--cw-blue-paper); }
  9.491%, 97.6% { background-color: transparent; }
}
@keyframes tcw-mac-s2 {
  0%, 8.691%, 39.036%, 100% { background-color: transparent; }
  9.491%, 38.236% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-mac-b2 {
  0%, 8.691%, 39.036%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  9.491%, 38.236% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
@keyframes tcw-mac-s3 {
  0%, 38.236%, 73.127%, 100% { background-color: transparent; }
  39.036%, 72.327% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-mac-b3 {
  0%, 38.236%, 73.127%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  39.036%, 72.327% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
@keyframes tcw-mac-s4 {
  0%, 72.327%, 96.991%, 100% { background-color: transparent; }
  73.127%, 96.191% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-mac-b4 {
  0%, 72.327%, 96.991%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  73.127%, 96.191% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
@keyframes tcw-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes tcw-win-cursor {
  0% { opacity: 0; transform: translate(112px, 124px); }
  2%, 13.043% { opacity: 1; transform: translate(112px, 124px); }
  20.652%, 25% { opacity: 1; transform: translate(214px, 65px); }
  39.13%, 46.739% { opacity: 1; transform: translate(72px, 82px); }
  53.261%, 57.608% { opacity: 1; transform: translate(181px, 156px); }
  60.869%, 100% { opacity: 0; transform: translate(186px, 162px); }
}
@keyframes tcw-win-ring {
  0%, 13.043% { opacity: 0; transform: translate(214px, 65px) scale(0.3); }
  24.891% { opacity: 0; transform: translate(214px, 65px) scale(0.3); }
  25% { opacity: 0.9; transform: translate(214px, 65px) scale(0.3); }
  28.695% { opacity: 0; transform: translate(214px, 65px) scale(1.6); }
  28.804% { opacity: 0; transform: translate(72px, 82px) scale(0.3); }
  43.369% { opacity: 0; transform: translate(72px, 82px) scale(0.3); }
  43.478% { opacity: 0.9; transform: translate(72px, 82px) scale(0.3); }
  47.174% { opacity: 0; transform: translate(72px, 82px) scale(1.6); }
  47.282% { opacity: 0; transform: translate(181px, 156px) scale(0.3); }
  55.326% { opacity: 0; transform: translate(181px, 156px) scale(0.3); }
  55.435% { opacity: 0.9; transform: translate(181px, 156px) scale(0.3); }
  59.13% { opacity: 0; transform: translate(181px, 156px) scale(1.6); }
  100% { opacity: 0; transform: translate(181px, 156px) scale(1.6); }
}
@keyframes tcw-win-flyout {
  0%, 1.5% { opacity: 0; transform: translateY(-4px); }
  3.5%, 25.652% { opacity: 1; transform: none; }
  27.826%, 100% { opacity: 0; transform: none; }
}
@keyframes tcw-win-dlbar {
  0%, 3.5% { transform: scaleX(0); }
  10.043%, 100% { transform: scaleX(1); }
}
@keyframes tcw-win-dlprog {
  0%, 10.443% { opacity: 1; }
  11.043%, 100% { opacity: 0; }
}
@keyframes tcw-win-flylink {
  0%, 10.443% { opacity: 0; }
  11.043%, 100% { opacity: 1; }
}
@keyframes tcw-win-browser {
  0%, 13.043% { opacity: 1; }
  30.434% { opacity: 1; }
  33.152% { opacity: 0.5; }
  95.652% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes tcw-win-smart {
  0%, 13.043% { opacity: 0; transform: scale(0.96); }
  31.521% { opacity: 0; transform: scale(0.96); }
  35.326% { opacity: 1; transform: none; }
  58.695% { opacity: 1; transform: none; }
  61.413% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.98); }
}
@keyframes tcw-win-moreinfo {
  0%, 13.043% { opacity: 1; }
  45.217% { opacity: 1; }
  45.652% { opacity: 0; }
  96.739% { opacity: 0; }
  97.826% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes tcw-win-smartmore {
  0%, 13.043% { opacity: 0; }
  45.652% { opacity: 0; }
  47.826% { opacity: 1; }
  96.739% { opacity: 1; }
  97.826% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-win-run {
  0%, 13.043% { fill-opacity: 0; }
  55% { fill-opacity: 0; }
  55.652% { fill-opacity: 0.28; }
  57.608% { fill-opacity: 0.28; }
  58.261% { fill-opacity: 0; }
  100% { fill-opacity: 0; }
}
@keyframes tcw-win-console {
  0%, 13.043% { opacity: 0; transform: scale(0.96); }
  60.652% { opacity: 0; transform: scale(0.96); }
  64.13% { opacity: 1; transform: none; }
  94.565% { opacity: 1; transform: none; }
  98.37% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-win-con1 {
  0%, 13.043% { opacity: 0; }
  64.565% { opacity: 0; }
  64.674% { opacity: 1; }
  94.565% { opacity: 1; }
  98.37% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-win-con2 {
  0%, 13.043% { opacity: 0; }
  67.826% { opacity: 0; }
  67.935% { opacity: 1; }
  94.565% { opacity: 1; }
  98.37% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-win-con3 {
  0%, 13.043% { opacity: 0; }
  71.087% { opacity: 0; }
  71.195% { opacity: 1; }
  94.565% { opacity: 1; }
  98.37% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tcw-win-result {
  0%, 13.043% { opacity: 0; transform: translateY(10px); }
  75.978% { opacity: 0; transform: translateY(10px); }
  80.435% { opacity: 1; transform: none; }
  94.565% { opacity: 1; transform: none; }
  98.913% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-win-chip {
  0%, 13.043% { opacity: 0; transform: scale(0.6); }
  80.978% { opacity: 0; transform: scale(0.6); }
  83.696% { opacity: 1; transform: scale(1.08); }
  85.326% { opacity: 1; transform: none; }
  94.565% { opacity: 1; transform: none; }
  98.913% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tcw-win-s1 {
  0%, 12.643%, 98.4%, 100% { background-color: var(--cw-blue-paper); }
  13.443%, 97.6% { background-color: transparent; }
}
@keyframes tcw-win-s2 {
  0%, 12.643%, 33.008%, 100% { background-color: transparent; }
  13.443%, 32.208% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-win-b2 {
  0%, 12.643%, 33.008%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  13.443%, 32.208% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
@keyframes tcw-win-s3 {
  0%, 32.208%, 63.443%, 100% { background-color: transparent; }
  33.008%, 62.643% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-win-b3 {
  0%, 32.208%, 63.443%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  33.008%, 62.643% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
@keyframes tcw-win-s4 {
  0%, 62.643%, 97.139%, 100% { background-color: transparent; }
  63.443%, 96.339% { background-color: var(--cw-blue-paper); }
}
@keyframes tcw-win-b4 {
  0%, 62.643%, 97.139%, 100% { background-color: var(--white); border-color: var(--cw-blue-mist); color: var(--cw-blue-ink); }
  63.443%, 96.339% { background-color: var(--cw-navy); border-color: var(--cw-navy); color: var(--white); }
}
/* the timelines run only while the page says so: on screen, tab visible, motion welcome */
.tc-walk.is-live[data-walk="mac"] .w-browser { animation: tcw-mac-browser var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-spot { animation: tcw-mac-spot var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-letter { animation: tcw-mac-letter var(--tc-walk-loop) var(--tc-walk-lead) infinite both; animation-delay: calc(var(--tc-walk-lead) + var(--i) * var(--tc-walk-letter)); }
.tc-walk.is-live[data-walk="mac"] .w-spotlist { animation: tcw-mac-spotlist var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-term { animation: tcw-mac-term var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-caret { animation: tcw-mac-caret var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-cmd { animation: tcw-mac-cmd var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-paste { animation: tcw-mac-paste var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-caret2 { animation: tcw-mac-caret2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-out1 { animation: tcw-mac-out1 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-out2 { animation: tcw-mac-out2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-out3 { animation: tcw-mac-out3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-result { animation: tcw-mac-result var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-chip { animation: tcw-mac-chip var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-key.w-k-cmd { animation: tcw-mac-kcmd var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-key.w-k-space { animation: tcw-mac-kspace var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-key.w-k-v { animation: tcw-mac-kv var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-key.w-k-ret { animation: tcw-mac-kret var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-cursor { animation: tcw-mac-cursor var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-copybtn { animation: tcw-mac-copybtn var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-copy { animation: tcw-mac-copy var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .w-copied { animation: tcw-mac-copied var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(1) { animation: tcw-mac-s1 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(2) { animation: tcw-mac-s2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(2)::before { animation: tcw-mac-b2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(3) { animation: tcw-mac-s3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(3)::before { animation: tcw-mac-b3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(4) { animation: tcw-mac-s4 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="mac"] .tc-walk-steps li:nth-child(4)::before { animation: tcw-mac-b4 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live .w-blink { animation: tcw-blink var(--tc-walk-blink) steps(1, end) infinite; }
.tc-walk.is-live[data-walk="win"] .w-cursor { animation: tcw-win-cursor var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-ring { animation: tcw-win-ring var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-flyout { animation: tcw-win-flyout var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-dlbar { animation: tcw-win-dlbar var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-dlprog { animation: tcw-win-dlprog var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-flylink { animation: tcw-win-flylink var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-browser { animation: tcw-win-browser var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-smart { animation: tcw-win-smart var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-moreinfo { animation: tcw-win-moreinfo var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-smartmore { animation: tcw-win-smartmore var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-runbtn .f-smartbtn { animation: tcw-win-run var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-console { animation: tcw-win-console var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-con1 { animation: tcw-win-con1 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-con2 { animation: tcw-win-con2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-con3 { animation: tcw-win-con3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-result { animation: tcw-win-result var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .w-chip { animation: tcw-win-chip var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(1) { animation: tcw-win-s1 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(2) { animation: tcw-win-s2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(2)::before { animation: tcw-win-b2 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(3) { animation: tcw-win-s3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(3)::before { animation: tcw-win-b3 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(4) { animation: tcw-win-s4 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-live[data-walk="win"] .tc-walk-steps li:nth-child(4)::before { animation: tcw-win-b4 var(--tc-walk-loop) var(--tc-walk-lead) infinite both; }
.tc-walk.is-paused *, .tc-walk.is-paused *::before { animation-play-state: paused !important; }

/* ---------- how it works: questions and the scripts, one line each until opened ---------- */
/* A question is a row with the plus box the passed rows use; the answer opens under it. */
.tc-faq { border-top: 1px solid var(--cw-line-soft); }
.tc-faq:last-of-type { border-bottom: 1px solid var(--cw-line-soft); }
.tc-faq > summary {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; min-height: 44px;
  padding: 10px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--cw-navy);
}
.tc-faq > summary::-webkit-details-marker { display: none; }
.tc-faq > summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 20px; line-height: 1; font-weight: 400;
  color: var(--cw-blue-ink); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cw-line); border-radius: var(--radius-sm); background: var(--white);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.tc-faq[open] > summary::after { content: "\2212"; }
.tc-faq > summary:focus-visible { outline: 2px solid var(--coastal-700); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .tc-faq > summary:hover::after { color: var(--white); background: var(--cw-navy); border-color: var(--cw-navy); }
}
.tc-faq-k { display: inline-flex; align-items: center; gap: 10px; }
.tc-faq-a { padding: 0 0 18px; }
.tc-faq-a p { font-family: var(--font-body-serif); font-size: 15px; line-height: 1.55; color: var(--g-fg); margin: 0; max-width: 640px; }
.tc-faq-a .tc-code { margin-top: 12px; }
@media print { .tc-faq > summary::after { display: none; } }

/* ---------- after the Windows download: a pointer at the browser's downloads ---------- */
/* Fixed under the toolbar's right end, where Windows browsers keep their downloads; it
   never takes a press, so the page under it stays usable. */
.tc-dlhint {
  position: fixed; top: 10px; right: 20px; z-index: 50; max-width: 300px;
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px;
  padding: 12px 14px 13px 16px; background: var(--cw-navy); color: var(--white);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  pointer-events: none; opacity: 0; transform: translateY(-6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.tc-dlhint[hidden] { display: none; }
.tc-dlhint.is-on { opacity: 1; transform: none; }
.tc-dlhint::before {
  content: ""; position: absolute; top: -6px; right: 20px;
  border: 6px solid transparent; border-top: 0; border-bottom-color: var(--cw-navy);
}
.tc-dlhint-t { margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.4; color: color-mix(in srgb, var(--white) 82%, var(--cw-navy)); }
.tc-dlhint-t b { display: block; margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--white); }
.tc-dlhint-ico { display: inline-flex; margin-top: 1px; animation: tc-dlhint-nudge 1.2s var(--ease-out) 0.3s 4; }
@keyframes tc-dlhint-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tc-dlhint-ico { animation: none; } .tc-dlhint { transition: none; } }
@media print { .tc-dlhint { display: none !important; } }