/* ---------- The public home page, redesigned (D-340 to D-347) ----------
   The third sheet, scannlog-home.css, loaded by the home page only, after the other two. Its
   colours and shapes are the approved design's and live on body.home-page, so no app page, worker
   page, PDF or email changes in this round (D-340). No green: a good status is blue. */

/* Archivo 700 and 800 (D-341) are declared once, in the second sheet's theme.css (D-351), which
   this page loads before this sheet. */

body.home-page {
  --home-navy: #172554;
  --home-accent: #93c5fd;
  --home-primary: #1e40af;
  --home-primary-dark: #1e3a8a;
  --home-link: #2563eb;
  --home-tint: #eff6ff;
  --home-grey: #f3f4f6;
  --home-sunk: #f9fafb;
  --home-border: #e5e7eb;
  --home-ink: #111827;
  --home-body: #4b5563;
  --home-muted: #646b78; /* 4.87:1 on the grey sections, AA for small text (D-384) */
  --home-on-navy: #ffffff;
  --home-on-navy-soft: #e2e8f0;
  --home-on-navy-text: #cbd5e1;
  --home-on-navy-muted: #94a3b8;
  --home-on-navy-dim: #64748b;
  --home-good: #1e40af;
  --home-good-bg: #eff6ff;
  --home-warn: #b45309;
  --home-warn-bg: #fffbeb;
  --home-problem: #b91c1c;
  --home-problem-bg: #fef2f2;
  --home-radius-button: 10px;
  --home-radius-card: 16px;
  --home-radius-big: 20px;
  --home-radius-badge: 6px;
  --home-display: Archivo, Inter, ui-sans-serif, system-ui, sans-serif;
  --home-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --home-dots: radial-gradient(rgba(147, 197, 253, 0.1) 1px, transparent 1px);
  background: var(--home-navy);
  color: var(--home-body);
  overflow-x: hidden;
}

/* ---------- Pieces used everywhere on the page ---------- */
.site-main.home { max-width: none; padding: 0; background: #ffffff; }
.home { overflow-wrap: anywhere; font-size: 16px; line-height: 24px; }
.home p, .home h2, .home h3, .home dl, .home dd, .home figure, .home ol, .home ul { margin: 0; }
.home-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.home-section { padding: 56px 0; }
.home-section > .home-wrap { display: flex; flex-direction: column; gap: 32px; }
.home-grey { background: var(--home-grey); }
/* A section reached from a link starts below the sticky phone header. */
.home section[id] { scroll-margin-top: 72px; }
.home-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; min-width: 0; }
.home-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.home-head-row > .home-head { flex: 1 1 400px; max-width: 640px; }
.site-main.home :is(h1, h2) { font-family: var(--home-display); font-weight: 800; letter-spacing: -0.02em; color: var(--home-ink); text-wrap: balance; }
.home h2 { font-size: 30px; line-height: 36px; }
.home h3 { font: 700 20px/28px var(--font-sans); color: var(--home-ink); }
.home-lead { font-size: 17px; line-height: 26px; }
.home-eyebrow, .home-label { font-family: var(--home-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-primary); }
.home a { color: var(--home-link); }
.home a:hover { color: var(--home-primary); }
.home-section > .home-wrap.home-split, .home-split { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.home-split > * { flex: 1 1 400px; min-width: 0; }

/* Buttons: real links, at least 44 px high, with the focus ring of the kit. */
.home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--home-radius-button); font: 600 17px/22px var(--font-sans); text-decoration: none; text-align: center; }
.home a.home-btn-light, .home-header a.home-btn-light { background: #ffffff; color: var(--home-primary-dark); font-weight: 700; }
.home a.home-btn-light:hover, .home-header a.home-btn-light:hover { background: var(--home-tint); color: var(--home-primary-dark); }
.home a.home-btn-ghost { border-color: rgba(226, 232, 240, 0.45); color: #ffffff; }
.home a.home-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.home a.home-btn-primary { background: var(--home-primary); color: #ffffff; min-height: 50px; font-size: 16px; }
.home a.home-btn-primary:hover { background: var(--home-primary-dark); color: #ffffff; }
.home a.home-btn-outline { min-height: 46px; padding: 0 20px; border-color: var(--home-muted); color: var(--home-ink); font-size: 16px; }
.home a.home-btn-outline:hover { background: var(--home-tint); color: var(--home-ink); }
.home-btn-small { min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.home-btn-big { min-height: 56px; padding: 0 28px; border-radius: 12px; }
.home-actions { display: flex; flex-direction: column; gap: 12px; }
.home-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }

/* A status is always a word (D-342). Good is blue; there is no green anywhere. */
.home-statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.home-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--home-radius-badge); font: 600 12px/18px var(--font-sans); white-space: normal; }
.home-status-solid { background: var(--home-good); color: #ffffff; }
.home-status-good { background: var(--home-good-bg); color: var(--home-good); }
.home-status-warn { background: var(--home-warn-bg); color: var(--home-warn); }
.home-status-problem { background: var(--home-problem-bg); color: var(--home-problem); }
.home-status-good-dark { background: var(--home-primary-dark); color: #dbeafe; }
.home-status-warn-dark { background: #422006; color: #fbbf24; }
.home-status-problem-dark { background: #450a0a; color: #fca5a5; }

/* ---------- The header ---------- */
.home-header { position: sticky; top: 0; z-index: 10; background: var(--home-navy); border-bottom: 1px solid rgba(148, 163, 184, 0.2); color: var(--home-on-navy-soft); }
.home-header-row { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.home-header .logo { display: flex; align-items: center; margin-right: auto; }
.home-header .logo img { height: 24px; width: auto; }
/* The new lockup is wider (D-350): under 380 px it is 21 px high, the old logo's 110 px, so
   "Empieza gratis" keeps its one line at 360 px. */
@media (max-width: 379px) { .home-header .logo img { height: 21px; } }
.home-header a { color: var(--home-on-navy-soft); text-decoration: none; font-size: 15px; }
.home-header a:hover { color: #ffffff; }
.home-sections, .home-langs, .home-header-wide { display: none; }
.home-header-tools { display: flex; align-items: center; gap: 12px; }
.home-account { color: #ffffff; font-weight: 600; font-size: 15px; }
.home-langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.home-langs a + a::before { content: "·"; padding-right: 6px; color: var(--home-on-navy-dim); }
.home-langs a[aria-current="true"] { color: #ffffff; font-weight: 600; }
.home-menu { position: relative; }
.home-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(226, 232, 240, 0.35); border-radius: 8px; color: #ffffff; cursor: pointer; list-style: none; }
.home-menu summary::-webkit-details-marker { display: none; }
.home-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 40px)); display: grid; gap: 4px; padding: 12px; border-radius: var(--home-radius-card); background: #ffffff; box-shadow: 0 24px 50px rgba(2, 6, 23, 0.35); }
.home-menu-panel nav { display: grid; }
/* The uses (D-384): a <details> menu among the sections, which needs no script. */
.home-usemenu { position: relative; }
.home-usemenu summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.home-usemenu summary::-webkit-details-marker { display: none; }
.home-usemenu summary::after { content: "\25BE"; margin-left: 4px; font-size: 12px; }
.home-usemenu-panel { position: absolute; left: 0; top: 100%; z-index: 20; display: grid; min-width: 220px; padding: 8px; border-radius: var(--home-radius-card); background: #ffffff; box-shadow: 0 24px 50px rgba(2, 6, 23, 0.35); }
.home-usemenu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--home-ink); }
.home-usemenu-panel a:hover { background: var(--home-tint); color: var(--home-ink); }
.home-menu-panel a, .home-menu-panel .home-link { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--home-ink); font-size: 16px; }
.home-menu-panel a:hover, .home-menu-panel .home-link:hover { background: var(--home-tint); color: var(--home-ink); }
.home-menu-panel .home-menu-langs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--home-border); border-bottom: 1px solid var(--home-border); margin: 4px 0; padding: 4px 0; }
.home-menu-langs a[aria-current="true"] { font-weight: 700; color: var(--home-primary); }

/* ---------- 1. The hero ---------- */
.home-hero { background: var(--home-navy); background-image: var(--home-dots); background-size: 24px 24px; color: var(--home-on-navy-text); overflow: hidden; }
.home-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; max-width: 1280px; padding-top: 32px; padding-bottom: 32px; }
.home-hero-text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.home-eyebrow-line { display: flex; align-items: center; gap: 10px; color: var(--home-accent); }
.home-eyebrow-line::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--home-accent); }
.site-main.home .home-hero h1 { margin: 0; font-size: 40px; line-height: 44px; color: #ffffff; }
.home-mark { color: var(--home-accent); text-decoration: underline; text-decoration-color: var(--home-link); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.home-hero .home-lead { color: var(--home-on-navy-text); max-width: 540px; }
.home-small { font-size: 14px; line-height: 20px; color: var(--home-on-navy-muted); }
.home-hero-list { display: grid; gap: 12px; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(148, 163, 184, 0.25); font-size: 15px; line-height: 22px; color: var(--home-on-navy-soft); }
.home-hero-list li { display: flex; gap: 12px; align-items: flex-start; }
.home-hero-list b { color: #ffffff; }
.home-hero-list li > span:last-child > span { color: var(--home-on-navy-muted); font-size: 14px; }
.home-hero-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; background: rgba(37, 99, 235, 0.35); display: flex; align-items: center; justify-content: center; color: var(--home-accent); }
.home-hero-art { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* The drawing is 640 by 540 px and is scaled to fit, so the page never scrolls sideways. */
.hero-frame { --scale: 0.54; position: relative; width: calc(640px * var(--scale)); height: calc(540px * var(--scale)); max-width: 100%; overflow: hidden; }
.hero-stage { position: absolute; left: 0; top: 0; width: 640px; height: 540px; transform: scale(var(--scale)); transform-origin: 0 0; font-size: 12px; line-height: 16px; color: var(--home-body); }
.hero-stage > *, .hero-stage span, .hero-stage i, .hero-stage b, .hero-stage small, .hero-stage strong { box-sizing: border-box; }
.hero-stage i { display: block; font-style: normal; }
.hero-stage:not([data-step="1"]) .hero-at-1, .hero-stage:not([data-step="2"]) .hero-at-2,
.hero-stage:not([data-step="3"]) .hero-at-3, .hero-stage:not([data-step="4"]) .hero-at-4 { display: none; }
.hero-wall { position: absolute; left: 0; top: 30px; width: 220px; height: 470px; border-radius: 0; background: #1e293b; border: 1px solid #334155; }
.hero-wall-sign { position: absolute; left: 30px; top: 40px; width: 160px; padding: 8px 0; border-radius: 6px; background: #e2e8f0; color: #0f172a; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-sticker { position: absolute; left: 40px; top: 110px; width: 140px; padding: 12px 6px 10px; border-radius: 10px; background: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: transform 0.4s ease; }
.hero-sticker b { font-size: 11px; line-height: 14px; color: #0f172a; }
.hero-sticker small { font: 9px/12px var(--home-mono); color: #475569; }
/* Not a real code: a 21 by 21 pattern with the three corner squares, which holds no data (D-248). */
.home-qr { display: grid; grid-template-columns: repeat(21, 4px); grid-auto-rows: 4px; width: 84px; height: 84px; background: #ffffff; }
.home-qr .on { background: #0f172a; }
.hero-beam { position: absolute; left: 150px; top: 168px; width: 110px; height: 2px; background: repeating-linear-gradient(90deg, var(--home-accent) 0 8px, transparent 8px 14px); }
.hero-phone { position: absolute; left: 240px; top: 0; width: 240px; height: 510px; padding: 12px; border-radius: 38px; background: #020617; box-shadow: 0 30px 60px rgba(2, 6, 23, 0.6), 0 0 0 1px #334155; }
.hero-screen { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #ffffff; }
.hero-scr { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hero-scr-scan { background: #0f172a; align-items: center; justify-content: center; gap: 18px; }
.hero-viewfinder { position: relative; width: 160px; height: 160px; }
.hero-viewfinder > i { position: absolute; width: 34px; height: 34px; border: 0 solid var(--home-accent); }
.hero-viewfinder > i:nth-child(1) { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-radius: 8px 0 0 0; }
.hero-viewfinder > i:nth-child(2) { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-radius: 0 8px 0 0; }
.hero-viewfinder > i:nth-child(3) { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-radius: 0 0 0 8px; }
.hero-viewfinder > i:nth-child(4) { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-radius: 0 0 8px 0; }
.hero-viewfinder .home-qr { position: absolute; left: 38px; top: 38px; outline: 6px solid #ffffff; }
.hero-scanline { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--home-accent); box-shadow: 0 0 12px 2px rgba(147, 197, 253, 0.85); }
.hero-pill { padding: 8px 14px; border-radius: 9999px; background: rgba(255, 255, 255, 0.95); color: #0f172a; font-size: 12px; font-weight: 600; }
.hero-scr-form { padding: 22px 16px 16px; gap: 10px; color: var(--home-body); }
.hero-scr-form small { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--home-muted); }
.hero-scr-form strong { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--home-ink); }
.hero-field { padding: 9px 10px; border: 1px solid var(--home-muted); border-radius: 8px; font-size: 13px; color: var(--home-ink); }
.hero-tap { padding: 12px; border: 1px solid var(--home-muted); border-radius: 10px; color: var(--home-ink); font-size: 15px; font-weight: 600; text-align: center; }
.hero-tap-primary { margin-top: auto; padding: 14px; border-color: var(--home-primary); background: var(--home-primary); color: #ffffff; font-size: 16px; }
.hero-scr-check, .hero-scr-done { padding: 24px 18px; align-items: center; justify-content: center; gap: 16px; text-align: center; font-size: 13px; line-height: 18px; }
.hero-scr-check { background: #f8fafc; }
.hero-scr-check strong { font-size: 18px; line-height: 24px; color: var(--home-ink); }
.hero-ping { position: relative; width: 72px; height: 72px; border-radius: 9999px; background: var(--home-tint); color: var(--home-primary); display: flex; align-items: center; justify-content: center; }
.hero-ping::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--home-link); border-radius: 9999px; }
.hero-scr-done { background: var(--home-tint); gap: 14px; }
.hero-scr-done strong { font-size: 22px; line-height: 28px; color: var(--home-ink); }
.hero-scr-done small { font-size: 12px; color: var(--home-muted); }
.hero-done-icon { width: 72px; height: 72px; border-radius: 9999px; background: var(--home-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; }
.hero-card { position: absolute; display: flex; flex-direction: column; border-radius: 14px; background: #ffffff; box-shadow: 0 24px 50px rgba(2, 6, 23, 0.5); overflow: hidden; }
.hero-card small { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--home-muted); }
.hero-card b { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--home-ink); }
.hero-card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.hero-card-where { left: 410px; top: 40px; width: 230px; }
.hero-card-where .hero-card-body > span { color: var(--home-muted); }
.hero-map { position: relative; display: block; height: 110px; background: #e8eef7; background-image: linear-gradient(#d7e0ee 2px, transparent 2px), linear-gradient(90deg, #d7e0ee 2px, transparent 2px); background-size: 28px 28px; }
.hero-map i { position: absolute; border-radius: 9999px; }
.hero-map-area { left: 70px; top: 10px; width: 90px; height: 90px; background: rgba(37, 99, 235, 0.14); border: 2px dashed var(--home-link); }
.hero-map-point { left: 107px; top: 47px; width: 16px; height: 16px; background: var(--home-primary); border: 3px solid #ffffff; }
.hero-map-phone { left: 124px; top: 62px; width: 12px; height: 12px; background: var(--home-ink); border: 2px solid #ffffff; }
.hero-card-when { left: 410px; top: 300px; width: 230px; padding: 14px; gap: 8px; }
.hero-hours { position: relative; display: block; height: 10px; border-radius: 9999px; background: var(--home-border); }
.hero-hours i:first-child { position: absolute; left: 29%; right: 25%; top: 0; bottom: 0; border-radius: 9999px; background: var(--home-accent); }
.hero-hours i:last-child { position: absolute; left: 32%; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--home-primary); }
.hero-hours-scale { display: flex; justify-content: space-between; color: var(--home-muted); font-variant-numeric: tabular-nums; }
.hero-card-visit { left: 330px; top: 250px; width: 310px; box-shadow: 0 24px 50px rgba(2, 6, 23, 0.55); }
.hero-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--home-sunk); border-bottom: 1px solid var(--home-border); font-size: 11px; color: var(--home-muted); }
.hero-bar i { width: 8px; height: 8px; border-radius: 9999px; background: var(--home-border); }
.hero-bar span { margin-left: 6px; }
.hero-card-visit .hero-card-body { padding: 14px 16px; gap: 10px; font-size: 13px; line-height: 18px; }
.hero-card-visit b { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.hero-card-visit small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hero-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hero-quote { color: var(--home-ink); }
.hero-card-flag { left: 390px; top: 40px; width: 250px; padding: 12px 14px; gap: 6px; border-top: 4px solid var(--home-warn); box-shadow: 0 24px 50px rgba(2, 6, 23, 0.55); }
.hero-card-flag b { font-size: 14px; }
.hero-card-flag .hero-row small:last-child { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hero-card .hero-flag-title { color: var(--home-warn); }

/* The four steps under the drawing: a list without the script, buttons with it. */
.hero-steps { width: 100%; max-width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 0; list-style: none; }
.hero-steps li, .hero-steps button { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-steps li { padding-top: 12px; }
.hero-steps li:has(button) { padding-top: 0; }
.hero-steps button { width: 100%; min-height: 44px; padding: 12px 4px 4px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hero-step-bar { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(148, 163, 184, 0.3); overflow: hidden; }
.hero-step-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--home-accent); }
.hero-steps [aria-current="step"] .hero-step-bar i { width: 100%; }
.hero-step-num { font: 12px/16px var(--home-mono); letter-spacing: 0.1em; color: var(--home-on-navy-dim); }
.hero-step-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--home-on-navy-muted); }
.hero-step-text { display: none; font-size: 13px; line-height: 18px; color: var(--home-on-navy-muted); }
.hero-steps [aria-current="step"] .hero-step-num { color: var(--home-accent); }
.hero-steps [aria-current="step"] .hero-step-title { color: #ffffff; }

.home-hero-band { border-top: 1px solid rgba(148, 163, 184, 0.2); background: rgba(2, 6, 23, 0.3); }
.home-hero-band .home-wrap { max-width: 1280px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; line-height: 20px; }
.home-hero-band p { color: var(--home-on-navy-muted); margin-right: 6px; }
.home-hero-band ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.home-hero-band li { padding: 6px 12px; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.35); color: var(--home-on-navy-soft); }
.home-hero-band li.on { border-color: rgba(147, 197, 253, 0.6); background: rgba(37, 99, 235, 0.25); color: #ffffff; }

/* The motion: the hero only, and only while home.js plays it (D-344). */
@keyframes home-scan { 0% { top: 8%; } 50% { top: 86%; } 100% { top: 8%; } }
@keyframes home-fill { from { width: 0%; } to { width: 100%; } }
@keyframes home-pulse { 0% { box-shadow: 0 0 0 0 rgba(147, 197, 253, 0.6); } 100% { box-shadow: 0 0 0 18px rgba(147, 197, 253, 0); } }
@keyframes home-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes home-rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes home-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
.is-playing[data-step="1"] .hero-sticker { transform: scale(1.04); animation: home-pulse 1.6s ease-out infinite; }
.is-playing .hero-scanline { animation: home-scan 2.4s ease-in-out infinite; }
.is-playing .hero-scr-form, .is-playing .hero-done-icon { animation: home-pop 0.35s ease-out both; }
.is-playing .hero-tap-primary { animation: home-pulse 1.6s ease-out infinite; }
.is-playing .hero-ping::before { animation: home-ping 1.6s ease-out infinite; }
.is-playing .hero-card-where, .is-playing .hero-card-visit { animation: home-rise 0.45s ease-out both; }
.is-playing .hero-card-when, .is-playing .hero-card-flag { animation: home-rise 0.45s ease-out 0.35s both; }
.hero-steps.is-timed [aria-current="step"] .hero-step-bar i { animation: home-fill 3.8s linear both; }
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; }
}

/* ---------- 2. The problem ---------- */
/* The comparison is one list (D-411). On a phone, one card: the two headings are a small key line
   above the rows, and each row holds its label and both answers. From 900 px the same list is
   drawn as two cards. */
.home-compare { display: flex; flex-wrap: wrap; gap: 4px 8px; border: 1px solid var(--home-border); border-radius: 18px; padding: 14px 16px 4px 108px; }
.home-compare .home-compare-icon, .home-compare dd svg { display: none; }
.home-compare h3 { font: 700 12px/16px var(--font-sans); color: #6b7280; }
.home-compare h3.home-compare-old::after { content: " →" / ""; }
.home-compare h3.home-compare-new { color: var(--home-primary); }
.home-compare dl { flex: 0 0 calc(100% + 92px); min-width: 0; margin: 6px 0 0 -92px; }
.home-compare dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--home-border); font-size: 14px; line-height: 19px; }
.home-compare dt { grid-row: span 2; padding-top: 3px; font: 11px/14px var(--home-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--home-muted); }
.home-compare .old { color: #6b7280; text-decoration: line-through; }
.home-compare .new { color: var(--home-ink); font-weight: 600; }
.home-compare .new::before { content: "✓ " / ""; color: var(--home-primary); }

/* ---------- 3. How it works ---------- */
.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; padding: 0; list-style: none; }
.home-steps > li { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--home-radius-big); background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.home-steps p { font-size: 15px; }
.home-step-art { height: 120px; border-radius: 14px; background: var(--home-tint); display: flex; align-items: center; justify-content: center; gap: 8px; }
.home-step-num { font-size: 13px; font-weight: 700; color: var(--home-primary); }
.home-mini-point { display: flex; flex-direction: column; gap: 6px; min-width: 150px; padding: 10px 14px; border-radius: 10px; background: #ffffff; box-shadow: 0 6px 16px rgba(30, 64, 175, 0.15); font-size: 12px; line-height: 16px; }
.home-mini-point b { color: var(--home-ink); }
.home-mini-point span { display: flex; flex-wrap: wrap; gap: 4px; }
.home-mini-point i { padding: 1px 6px; border-radius: 5px; background: var(--home-tint); color: var(--home-primary); font-style: normal; font-weight: 600; }
.home-mini-sticker { width: 54px; height: 70px; border-radius: 8px; background: #ffffff; box-shadow: 0 6px 16px rgba(30, 64, 175, 0.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.home-mini-sticker::before { content: ""; width: 34px; height: 34px; background: repeating-conic-gradient(#0f172a 0 25%, #ffffff 0 50%) 0 0 / 8px 8px; }
.home-mini-sticker::after { content: ""; width: 30px; height: 4px; border-radius: 2px; background: #cbd5e1; }
.home-mini-sticker:nth-child(1) { transform: rotate(-8deg); }
.home-mini-sticker:nth-child(2) { transform: translateY(-6px); }
.home-mini-sticker:nth-child(3) { transform: rotate(8deg); }
.home-mini-phone { width: 64px; height: 108px; padding: 5px; border-radius: 14px; background: #0f172a; }
.home-mini-phone > span { width: 100%; height: 100%; padding: 6px; border-radius: 10px; background: #ffffff; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.home-mini-phone i { display: block; height: 4px; border-radius: 2px; background: #cbd5e1; }
.home-mini-phone i:nth-child(2) { width: 70%; }
.home-mini-phone i:nth-child(3) { height: 14px; border-radius: 4px; background: var(--home-primary); }
.home-step-rows { flex-direction: column; align-items: stretch; gap: 6px; padding: 0 22px; }
.home-step-rows > span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #ffffff; font-size: 11px; line-height: 14px; }
.home-step-rows b { color: var(--home-ink); font-variant-numeric: tabular-nums; }
.home-step-rows .home-status { margin-left: auto; padding: 1px 6px; font-size: 11px; line-height: 14px; }

/* ---------- 4. For the people doing the work ---------- */
.home-blue { background: var(--home-primary); color: #dbeafe; }
.home-blue .home-eyebrow { color: #bfdbfe; }
.site-main.home .home-blue h2 { color: #ffffff; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.home-stats p { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); text-align: center; font-size: 12px; line-height: 16px; }
.home-stats b { font: 800 30px/36px var(--home-display); color: #ffffff; }
.home-stats b small { font: 600 12px/16px var(--font-sans); margin-left: 2px; }
.home-phones { display: flex; justify-content: center; gap: 18px; }
.home-phone-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.home-phone-low { display: none; }
.home-phone-small { display: block; width: 230px; padding: 8px; border-radius: 30px; background: #0f172a; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45); }
.home-phone-screen { display: flex; flex-direction: column; gap: 8px; min-height: 284px; padding: 18px 14px; border-radius: 23px; background: #ffffff; color: var(--home-body); font-size: 12px; line-height: 16px; }
.home-phone-screen small { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--home-muted); }
.home-phone-screen strong { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--home-ink); }
.home-digits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.home-digits i { height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--home-muted); border-radius: 6px; font-style: normal; font-weight: 700; font-size: 13px; color: var(--home-ink); }
.home-phone-buttons { margin-top: auto; padding-bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.home-phone-buttons i { padding: 11px 6px; border: 1px solid var(--home-muted); border-radius: 9px; text-align: center; font-style: normal; font-weight: 700; font-size: 14px; color: var(--home-ink); }
.home-phone-buttons i.primary { border-color: var(--home-primary); background: var(--home-primary); color: #ffffff; }
.home-phone-leave { margin-top: auto; padding: 8px; border-radius: 8px; border: 1px solid var(--home-primary); background: var(--home-tint); color: var(--home-primary); font-size: 11px; line-height: 15px; }
.home-phone-fig figcaption { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.home-phone-fig figcaption small { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #bfdbfe; }
.home-phone-fig figcaption span { font-size: 15px; font-weight: 600; color: #ffffff; }
.home-phone-high figcaption { display: none; }

/* ---------- 5. You set the rules ---------- */
.home-rules { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: stretch; }
.home-rules-panel { flex: 1 1 460px; min-width: 0; border: 1px solid var(--home-border); border-radius: var(--home-radius-card); background: #ffffff; overflow: hidden; }
.home-rules-head { display: none; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 16px 24px; background: var(--home-sunk); border-bottom: 1px solid var(--home-border); }
.home-rules-head b { color: var(--home-ink); }
.home-rules-head span { font-size: 13px; color: var(--home-muted); }
.home-rules-panel ul { padding: 0; list-style: none; }
.home-rules-panel li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--home-grey); }
.home-rules-panel li:first-child { border-top: 0; }
.home-rules-panel li > span { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 19px; }
.home-rules-panel li b { color: var(--home-ink); font-weight: 600; }
.home-rules-panel li > span > span { font-size: 13px; color: var(--home-muted); }
/* A switch is a real button; its state is aria-pressed, which a screen reader says. */
.home-switch { flex: none; position: relative; width: 52px; height: 30px; padding: 3px; border: 0; border-radius: 9999px; background: #d1d5db; cursor: pointer; }
.home-switch::after { content: ""; position: absolute; inset: -7px -2px; }
.home-switch i { display: block; width: 24px; height: 24px; border-radius: 9999px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.home-switch[aria-pressed="true"] { background: var(--home-primary); }
.home-switch[aria-pressed="true"] i { transform: translateX(22px); }
.home-switch[hidden] { display: none; }
.home-rules-result { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.home-rules-does { display: none; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--home-radius-big); background: var(--home-grey); }
.home-rules-does ol { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; counter-reset: does; }
.home-rules-does li { counter-increment: does; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: #ffffff; color: var(--home-ink); }
.home-rules-does li::before { content: counter(does); flex: none; width: 24px; height: 24px; border-radius: 9999px; background: var(--home-primary); color: #ffffff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.home-rules-does li[hidden] { display: none; }
.home-rules-get { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--home-radius-card); background: var(--home-navy); }
.home-rules-get .home-label { color: var(--home-accent); }
.home-rules-get .home-status { padding: 4px 9px; font-size: 12px; }
.home-rules-get .home-status[hidden] { display: none; }

/* ---------- 6. Location ---------- */
.home-map { position: relative; flex: 1 1 520px; min-width: 0; height: 300px; border-radius: 24px; overflow: hidden; background: #e8eef7; background-image: linear-gradient(#d7e0ee 2px, transparent 2px), linear-gradient(90deg, #d7e0ee 2px, transparent 2px); background-size: 48px 48px; box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08); font-size: 12px; line-height: 16px; }
.home-map i { position: absolute; display: block; }
.home-map-road-across { left: 0; right: 0; top: 43%; height: 22px; background: #ffffff; opacity: 0.9; }
.home-map-road-down { top: 0; bottom: 0; left: 54%; width: 20px; background: #ffffff; opacity: 0.9; }
.home-map-area { left: calc(50% - 110px); top: calc(46% - 110px); width: 220px; height: 220px; border-radius: 9999px; background: rgba(37, 99, 235, 0.12); border: 2px dashed var(--home-link); }
.home-map-point { left: calc(50% - 14px); top: calc(46% - 14px); width: 28px; height: 28px; border-radius: 9999px; background: var(--home-primary); border: 4px solid #ffffff; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.5); }
.home-map-label { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); white-space: nowrap; padding: 8px 12px; border-radius: 10px; background: #ffffff; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12); font-size: 13px; color: var(--home-ink); }
.home-map-scan { position: absolute; display: flex; align-items: center; gap: 8px; }
.home-map-scan > i { position: static; flex: none; width: 16px; height: 16px; border-radius: 9999px; border: 3px solid #ffffff; }
.home-map-scan > span { padding: 6px 10px; border-radius: 8px; background: #ffffff; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12); white-space: nowrap; }
.home-map-inside { left: calc(50% - 44px); top: calc(46% + 40px); }
.home-map-inside > i { background: var(--home-primary); }
.home-map-inside b { color: var(--home-primary); }
.home-map-outside { right: 4%; bottom: 7%; text-align: right; }
.home-map-outside > i { background: var(--home-warn); }
.home-map-outside b { color: var(--home-warn); }
.home-keyed { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.home-keyed li { display: flex; gap: 12px; align-items: center; color: var(--home-ink); }
.home-keyed .home-status { flex: none; min-width: 64px; justify-content: center; padding: 3px 10px; font-size: 13px; }
.home-fine { font-size: 13px; line-height: 20px; color: var(--home-muted); }

/* ---------- 7. For you ---------- */
.home-navy { background: var(--home-navy); background-image: radial-gradient(rgba(147, 197, 253, 0.08) 1px, transparent 1px); background-size: 28px 28px; color: var(--home-on-navy-text); }
.home-navy .home-eyebrow { color: var(--home-accent); }
.site-main.home .home-navy h2 { color: #ffffff; }
.home-oversight { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; }
.home-window { flex: 2 1 600px; min-width: 0; border-radius: var(--home-radius-card); background: #ffffff; overflow: hidden; box-shadow: 0 30px 60px rgba(2, 6, 23, 0.5); color: var(--home-body); }
.home-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--home-sunk); border-bottom: 1px solid var(--home-border); font-size: 12px; line-height: 16px; color: var(--home-muted); }
.home-window-bar i { width: 9px; height: 9px; border-radius: 9999px; background: var(--home-border); }
.home-window-bar span { margin-left: 8px; }
.home-window-table { overflow-x: auto; }
.home-window table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.home-window th { padding: 12px 14px; text-align: left; font-weight: 600; color: var(--home-ink); }
.home-window td { padding: 12px 14px; border-top: 1px solid var(--home-border); vertical-align: top; color: var(--home-ink); }
.home-window td b { font-weight: 400; }
.home-window td small { font-size: 12px; color: var(--home-muted); }
.home-window td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-window td .home-status { white-space: nowrap; }
.home-alerts { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 0; list-style: none; }
.home-alerts li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #ffffff; font-size: 13px; line-height: 18px; color: var(--home-body); }
.home-alerts li > span:last-child { display: flex; flex-direction: column; }
.home-alerts b { font-size: 14px; color: var(--home-ink); }
.home-alert-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.home-alert-problem { background: var(--home-problem-bg); color: var(--home-problem); }
.home-alert-warn { background: var(--home-warn-bg); color: var(--home-warn); }
.home-alert-good { background: var(--home-good-bg); color: var(--home-good); }
.home-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px 32px; }
.home-features > div { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.25); }
.home-navy .home-features h3 { font-size: 17px; line-height: 24px; font-weight: 600; color: #ffffff; }
.home-features p { font-size: 15px; color: var(--home-on-navy-muted); }

/* ---------- 8. Use cases ---------- */
.home-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.home-use { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--home-border); border-radius: var(--home-radius-big); }
.home-use p { font-size: 15px; }
.home-use-mark { width: 48px; height: 48px; border-radius: 14px; background: var(--home-tint); color: var(--home-primary); display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--home-display); }
.home .home-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.home-tags span { padding: 3px 10px; border-radius: 9999px; background: var(--home-grey); color: #374151; font-size: 12px; font-weight: 600; }

/* ---------- 9. Trust ---------- */
.home-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.home-trust > div { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--home-radius-big); background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.home-trust h3 { font-size: 17px; line-height: 24px; }
.home-trust p { font-size: 15px; }
.home-trust-big { font: 700 30px/36px var(--home-display); color: var(--home-primary); }

/* ---------- 10. Pricing ---------- */
.home-picker { flex: 0 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--home-radius-card); background: var(--home-navy); color: var(--home-on-navy-text); font-size: 14px; line-height: 20px; }
.home-picker[hidden] { display: none; }
.home-picker label { color: var(--home-on-navy-soft); }
.home-picker-count { display: flex; align-items: baseline; gap: 8px; }
.home-picker-count b { font: 800 32px/38px var(--home-display); color: #ffffff; }
.home-picker input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--home-accent); }
.home-picker-fit b { color: var(--home-accent); }
.home-picker [hidden] { display: none; }
.home-plans { display: flex; flex-direction: column; border: 1px solid var(--home-border); border-radius: var(--home-radius-card); overflow: hidden; }
.home-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 14px 16px; border-top: 1px solid var(--home-grey); background: #ffffff; }
.home-plan:first-child { border-top: 0; }
.home-plan-name { font-weight: 700; color: var(--home-ink); display: flex; align-items: center; gap: 8px; }
.home-plan-tag { grid-column: 1; grid-row: 1; justify-self: end; margin-right: auto; order: 2; padding: 1px 8px; border-radius: 9999px; background: var(--home-primary); color: #ffffff; font-size: 11px; line-height: 16px; font-weight: 700; }
.home-plan-codes, .home-plan-per { font-size: 13px; line-height: 18px; color: var(--home-muted); }
.home-plan-price { grid-column: 2; grid-row: 1 / span 3; font: 800 20px/26px var(--home-display); color: var(--home-ink); white-space: nowrap; }
.home-plan-price small { font: 600 11px/14px var(--font-sans); color: var(--home-muted); margin: 0 2px; }
.home-plan.is-fit { background: var(--home-navy); }
.home-plan.is-fit .home-plan-name, .home-plan.is-fit .home-plan-price { color: #ffffff; }
.home-plan.is-fit .home-plan-codes, .home-plan.is-fit .home-plan-per, .home-plan.is-fit .home-plan-price small { color: var(--home-on-navy-muted); }
.home-plans-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.home-plans-note p { flex: 1 1 320px; font-size: 14px; }

/* ---------- 11. Questions ---------- */
.home-section > .home-wrap.home-faq-grid { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; }
.home-faq-grid > .home-head { flex: 1 1 320px; }
.home-faq { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.home-faq details { border-radius: 14px; background: #ffffff; overflow: hidden; }
.home-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 16px 18px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--home-ink); cursor: pointer; list-style: none; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: "+" / ""; flex: 0 0 26px; height: 26px; border-radius: 9999px; background: var(--home-tint); color: var(--home-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.home-faq details[open] summary::after { content: "−" / ""; }
.home-faq details p { padding: 0 18px 18px; font-size: 15px; line-height: 23px; }

/* ---------- 12. The last call, and the footer ---------- */
.home-last { padding: 20px 0; }
.home-last-card { display: flex; flex-direction: column; gap: 20px; padding: 36px 22px; border-radius: 22px; background: var(--home-primary); background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 20px 20px; }
.site-main.home .home-last h2 { color: #ffffff; }
.home-last .home-lead { color: #dbeafe; }
.home-last a.home-btn-ghost { border-color: rgba(255, 255, 255, 0.6); }
.home-footer { background: #ffffff; font-size: 14px; line-height: 20px; }
.home-footer .home-wrap { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; padding-bottom: 36px; }
.home-footer-brand { display: flex; flex-direction: column; gap: 14px; margin: 0; color: var(--home-muted); }
.home-footer-brand img { height: 24px; width: auto; align-self: flex-start; }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.home-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--home-body); text-decoration: none; }
.home-footer nav a:hover { color: var(--home-primary); }
/* The copyright line, on its own line at the very bottom; centred on a phone (D-348). */
.home-footer-copy { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--home-border); font-size: 12px; line-height: 16px; color: var(--home-muted); text-align: center; }

/* On a phone the drawing comes before the four lines under the buttons, as in the approved
   phone screen: the text's box steps aside so its parts and the drawing share one column. */
@media (max-width: 699px) {
  .home-hero-grid { flex-direction: column; align-items: stretch; gap: 18px; }
  .home-hero-text { display: contents; }
  .home-hero-art { order: 1; flex-basis: auto; }
  .home-hero-list { order: 2; }
  .home-hero-band { display: none; }
}

/* Below 900 px the sample's table is drawn as cards, as the app's visits are (D-264, D-411): the
   name and the time on one line, the company, the two statuses, the note. */
@media (max-width: 899px) {
  .home-window-table { padding: 0 16px; overflow-x: visible; }
  .home-window table { display: block; min-width: 0; font-size: 14px; line-height: 19px; }
  .home-window thead { display: none; }
  .home-window tbody { display: block; }
  .home-window tr { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 14px 0; border-top: 1px solid var(--home-border); }
  .home-window tr:first-child { border-top: 0; }
  .home-window td { padding: 0; border: 0; }
  .home-window td.who { order: -1; flex: 1 1 calc(100% - 140px); min-width: 0; }
  .home-window td.when { flex: none; font-size: 12px; color: var(--home-muted); }
  .home-window td b { font-weight: 700; }
  .home-window td.text { flex: 0 0 100%; }
}

/* ---------- From 420 px, 520 px and 700 px: the drawing grows ---------- */
@media (min-width: 420px) { .hero-frame { --scale: 0.62; } }
@media (min-width: 520px) { .hero-frame { --scale: 0.78; } }
@media (min-width: 700px) {
  .hero-frame { --scale: 1; }
  .home-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-step-text { display: block; }
  .home-hero-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .home-hero-list li > span:last-child > span { display: block; }
}

/* ---------- From 900 px: the wide layout of the approved design ---------- */
@media (min-width: 900px) {
  .home-wrap { padding: 0 32px; }
  .home-section { padding: 104px 0; }
  .home-section > .home-wrap { gap: 48px; }
  /* The two cards are panels behind the one list: nine tracks, rows by subgrid, so a row's two
     halves always line up. The second card's labels come from data-label, unread (D-411). */
  /* Qui and Note share what the one-line columns leave, in the balance they had before the quote
     marks (D-370); left to the browser, the marks take their width from Qui. */
  .home-window td.who { width: 43%; }
  .home-window td.text { width: 57%; }
  .home-compare { position: relative; display: grid; grid-template-columns: 32px 122px minmax(0, 1fr) 32px 24px 32px 122px minmax(0, 1fr) 32px; grid-template-rows: auto repeat(5, auto) 32px; gap: 0; padding: 0; border: 0; border-radius: 0; }
  .home-compare::before, .home-compare::after { content: ""; grid-row: 1 / -1; border-radius: var(--home-radius-big); }
  .home-compare::before { grid-column: 1 / 5; background: var(--home-sunk); border: 1px solid var(--home-border); }
  .home-compare::after { grid-column: 6 / -1; background: var(--home-navy); box-shadow: 0 30px 60px rgba(11, 23, 54, 0.25); }
  .home-compare .home-compare-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
  .home-compare h3 { z-index: 1; grid-row: 1; display: flex; align-items: center; gap: 12px; padding: 32px 0 20px; font: 700 20px/28px var(--font-sans); }
  .home-compare h3.home-compare-old { grid-column: 2 / 4; color: var(--home-muted); }
  .home-compare h3.home-compare-old::after { content: none; }
  .home-compare h3.home-compare-new { grid-column: 7 / 9; color: #ffffff; }
  .home-compare-old .home-compare-icon { background: var(--home-border); }
  .home-compare-new .home-compare-icon { background: var(--home-primary); color: #ffffff; }
  .home-compare dl { display: contents; }
  .home-compare dl > div { z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; }
  /* Placed by hand: the two panels fill every row, so auto-placement would drop these below them. */
  .home-compare dl > div:nth-child(1) { grid-row: 2; }
  .home-compare dl > div:nth-child(2) { grid-row: 3; }
  .home-compare dl > div:nth-child(3) { grid-row: 4; }
  .home-compare dl > div:nth-child(4) { grid-row: 5; }
  .home-compare dl > div:nth-child(5) { grid-row: 6; }
  .home-compare dt, .home-compare dd { padding: 14px 0; }
  .home-compare dt, .home-compare .new::before { font: 600 13px/20px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; }
  .home-compare dt { grid-column: 2; grid-row: 1; display: flex; align-items: center; color: var(--home-muted); border-top: 1px solid var(--home-border); }
  .home-compare .old { grid-column: 3; grid-row: 1; display: flex; align-items: center; color: var(--home-muted); text-decoration: none; border-top: 1px solid var(--home-border); }
  .home-compare .new { grid-column: 7 / 9; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; color: #ffffff; font-weight: 500; border-top: 1px solid rgba(148, 163, 184, 0.25); }
  .home-compare .new::before { content: attr(data-label) / ""; color: var(--home-on-navy-muted); }
  .home-compare dd span { display: flex; gap: 10px; align-items: center; }
  .home-compare dd svg { display: block; flex: none; }
  .home-compare .old svg { color: #9ca3af; }
  .home-compare .new svg { color: var(--home-accent); }
  .home h2 { font-size: 44px; line-height: 52px; }
  .site-main.home :is(h1, h2) { font-weight: 700; }
  .home-lead { font-size: 19px; line-height: 30px; }
  .home-eyebrow, .home-label { font-size: 13px; line-height: 18px; letter-spacing: 0.12em; }
  .home-hero-grid { padding-top: 44px; padding-bottom: 40px; }
  .site-main.home .home-hero h1 { font-size: 64px; line-height: 70px; font-weight: 800; }
  .home-mark { text-decoration-thickness: 6px; text-underline-offset: 10px; }
  .home-eyebrow-line::before { width: 28px; }
  .home-hero .home-eyebrow { letter-spacing: 0.18em; }
  .home-hero-text { gap: 24px; }
  .home-btn { min-height: 54px; }
  .home-hero-list { margin-top: 8px; padding-top: 20px; }
  .home-hero-band .home-wrap { padding-left: 32px; padding-right: 32px; }
  .home-phones { flex: 1 1 520px; flex-wrap: wrap; }
  .home-phone-low { display: flex; transform: translateY(16px); }
  .home-phone-high { transform: translateY(-12px); }
  .home-phone-high figcaption { display: flex; }
  .home-phone-small { width: 168px; height: 340px; border-radius: 28px; }
  .home-phone-screen { height: 100%; min-height: 0; padding: 18px 12px 12px; border-radius: 21px; font-size: 11px; line-height: 15px; }
  .home-phone-screen small { font-size: 9px; line-height: 12px; }
  .home-phone-screen strong { font-size: 14px; line-height: 18px; }
  .home-phone-buttons i { padding: 10px 6px; font-size: 12px; font-weight: 600; border-radius: 8px; }
  .home-stats { gap: 16px; }
  .home-stats p { padding: 18px; border-radius: var(--home-radius-card); text-align: left; font-size: 14px; line-height: 20px; background: rgba(255, 255, 255, 0.1); }
  .home-stats b { font-size: 36px; line-height: 44px; font-weight: 700; }
  .home-rules-panel { border-radius: var(--home-radius-big); box-shadow: 0 20px 40px rgba(17, 24, 39, 0.06); }
  .home-rules-head { display: flex; }
  .home-rules-panel li { gap: 16px; padding: 18px 24px; }
  .home-rules-panel li:first-child { border-top: 1px solid var(--home-grey); }
  .home-rules-panel li > span > span { font-size: 14px; }
  .home-rules-does { display: flex; }
  .home-rules-get { padding: 24px; border-radius: var(--home-radius-big); gap: 12px; }
  .home-rules-get .home-status { padding: 4px 10px; font-size: 13px; }
  .home-map { height: 440px; background-size: 64px 64px; }
  .home-alerts li { padding: 16px 18px; }
  .home-use, .home-trust > div { padding: 28px; }
  #trust { padding: 96px 0; }
  .home-picker { padding: 20px 24px; gap: 10px; }
  .home-picker-count b { font-size: 34px; line-height: 40px; font-weight: 700; }
  .home-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; border: 0; border-radius: 0; overflow: visible; padding-top: 12px; }
  .home-plan { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 24px 20px; border: 2px solid var(--home-border); border-radius: 18px; transition: background 0.2s ease, border-color 0.2s ease; }
  .home-plan:first-child { border-top: 2px solid var(--home-border); }
  .home-plan.is-fit { border-color: var(--home-navy); }
  .home-plan-tag { position: absolute; top: -12px; left: 20px; padding: 3px 10px; }
  .home-plan-codes { font-size: 14px; }
  .home-plan-price { font-size: 30px; line-height: 38px; font-weight: 700; order: 0; }
  .home-plan-price small { font-size: 12px; }
  .home-plans-note p { font-size: 15px; }
  .home-faq summary { gap: 16px; padding: 20px 24px; font-size: 17px; }
  .home-faq summary::after { flex-basis: 28px; height: 28px; }
  .home-faq details p { padding: 0 24px 22px; line-height: 24px; }
  .home-last { padding: 32px 0; }
  .home-last-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 72px 48px; border-radius: 28px; background-size: 24px 24px; }
  .home-last-card .home-head { flex: 1 1 520px; gap: 12px; }
  .home-footer .home-wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-top: 40px; padding-bottom: 48px; }
  .home-footer-brand { flex-direction: row; align-items: center; gap: 16px; }
  .home-footer-brand img { height: 26px; }
  .home-footer nav { gap: 4px 20px; }
  .home-footer-copy { text-align: left; }
}

/* ---------- From 1100 px: the header shows the sections and the languages ---------- */
@media (min-width: 1100px) {
  .home section[id] { scroll-margin-top: 0; }
  .home-header { position: static; border-bottom: 0; background: var(--home-navy); background-image: var(--home-dots); background-size: 28px 28px; }
  .home-header-row { flex-wrap: wrap; gap: 12px 32px; padding: 20px 32px; }
  .home-header .logo { margin-right: 0; }
  .home-header .logo img { height: 30px; }
  .home-sections { display: flex; flex: 1 1 380px; flex-wrap: wrap; gap: 8px 28px; }
  .home-sections a { display: inline-flex; align-items: center; min-height: 44px; }
  .home-header-tools { gap: 20px; }
  .home-langs, .home-header-wide { display: inline-flex; align-items: center; }
  .home-header-wide { min-height: 44px; }
  .home-header .home-btn-small { min-height: 42px; padding: 0 18px; font-size: 15px; }
  .home-menu { display: none; }
  .home-hero { background-size: 28px 28px; }
}

/* Staff attendance (D-379): a small sample of the Attendance page, scrolling sideways on a phone. */
.home-timesheet { flex: 1 1 100%; min-width: 0; overflow-x: auto; background: #ffffff; border: 1px solid var(--home-border); border-radius: var(--home-radius-card); }
.home-timesheet table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.home-timesheet th { padding: 10px 12px; border-bottom: 1px solid var(--home-border); font: 600 11px/16px var(--home-mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--home-muted); white-space: nowrap; }
.home-timesheet td { padding: 10px 12px; border-bottom: 1px solid var(--home-border); color: var(--home-body); white-space: nowrap; }
.home-timesheet td b { color: var(--home-ink); font-weight: 600; }
/* A badge keeps its words on one line, and the Checks column has room for the widest (D-380). */
.home-timesheet .home-status { white-space: nowrap; }
.home-timesheet th:last-child, .home-timesheet td:last-child { min-width: 150px; }
.home-timesheet-note { padding: 10px 12px; font-size: 13px; line-height: 18px; color: var(--home-muted); }