/* anyfix.ai public site. Self-contained on purpose: no web fonts, scripts or
   images from another host, so the site sets no cookies and tells no third
   party who visited (see website/README.md). Wordmark colours are the ones
   pinned for the trademark filing on 2026-09-03 (--tm-ink, --tm-blue); every
   other blue on the site is the v1 accent, --blue (BL-423).

   Values come from the website v1 design boards (docs/website-v1/boards/,
   Main.dc.html:14-28 and :203-226). Light only, by ruling: there is no dark
   version. One breakpoint, 900px, where the page becomes the phone layout. */

:root {
  color-scheme: light;

  --ink: #15181D;
  --ink-muted: #4B5360;
  --ink-small: #687080;
  --ink-nav: #2A2F37;

  --bg: #F8F9FA;
  --band: #F0F2F5;
  --surface: #FCFCFD;
  --stage: #EAF0FB;

  --blue: #2455D3;
  --blue-hover: #1C44AB;
  --blue-edge: #163A8F;

  --line: #DCE0E6;
  --line-card: #DCE3EE;
  --line-btn: #C9CED6;
  --line-soft: #E1E4E9;
  --line-row: #E8ECF2;

  /* Trademark filing, 2026-09-03. The wordmark only. */
  --tm-ink: #0f172a;
  --tm-blue: #2563eb;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --frame: 1184px;
  --side: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  /* A short page (privacy, not found) still ends on the footer, not on a
     strip of page background under it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Layout -------------------------------------------------------------- */

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  padding-left: var(--side);
  padding-right: var(--side);
}

/* A full-width section; .band is the grey one that alternates with it. */
.section { padding-top: 96px; padding-bottom: 96px; }
.band { background: var(--band); padding-top: 96px; padding-bottom: 96px; }

/* ---- Type ---------------------------------------------------------------- */

.label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

/* 64px sits above the product's 13/16/20/28 scale on purpose: it is the
   marketing hero (canvas "Still to decide" item 7, kept for v1). */
.h1 { font-size: 64px; line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.h2 { font-size: 38px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.h3 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0; }
.lead { font-size: 21px; line-height: 1.5; color: var(--ink-muted); margin: 0; max-width: 600px; }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; color: var(--ink-small); }
.mono { font-family: var(--mono); }

/* ---- Wordmark ------------------------------------------------------------ */

.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--tm-ink);
}
.wordmark .any { color: var(--tm-ink); }
.wordmark .fix { color: var(--tm-blue); }
.wordmark:hover { color: var(--tm-ink); }

/* ---- Buttons ------------------------------------------------------------- */

/* The primary action. Beside "Email us" it carries the calendar icon; the
   icon is inline SVG in the page, so it inherits the text colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 23px;
  border-radius: 6px;
  background: var(--blue);
  border: 2px solid var(--blue-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(22, 58, 143, .3);
  color: var(--surface);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover { background: var(--blue-hover); color: var(--surface); }

/* The secondary action: white, opens the visitor's mail app (envelope icon). */
.btn-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line-btn);
  box-shadow: 0 1px 2px rgba(21, 24, 29, .06);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.btn-w:hover { border-color: var(--blue); color: var(--blue); }

.btn svg, .btn-w svg { width: 18px; height: 18px; flex: none; }

/* ---- Cards and stages ---------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: 12px;
  box-shadow: 0 20px 40px -28px rgba(36, 85, 211, .45);
}

/* The pale-blue backdrop the product sketches sit on. */
.stage { background: var(--stage); border-radius: 10px; position: relative; }

/* ---- Header -------------------------------------------------------------- */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.head {
  display: flex;
  align-items: center;
  gap: 16px 40px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.head-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  flex: 1 1 auto;
}
.head-nav a {
  color: var(--ink-nav);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.head-nav a:hover,
.head-nav a[aria-current] { color: var(--blue); }

.head-acts { display: flex; align-items: center; gap: 10px; }

/* Header buttons are smaller than .btn so the bar stays light. Book a Demo
   is text only here, by design (Main.dc.html:211). */
.head-acts a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.head-acts .signin { border: 1px solid var(--blue); color: var(--blue); }
.head-acts .signin:hover { border-color: var(--blue-hover); color: var(--blue-hover); }
.head-acts .demo {
  background: var(--blue);
  border: 2px solid var(--blue-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(22, 58, 143, .3);
  color: var(--surface);
}
.head-acts .demo:hover { background: var(--blue-hover); color: var(--surface); }

/* ---- Footer -------------------------------------------------------------- */

.site-foot {
  background: var(--band);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 15px;
}

.foot {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 32px;
}

.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-brand .wordmark { font-size: 24px; letter-spacing: -0.02em; }

.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot-h {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--ink-small);
}

/* ---- Plain text pages (privacy, terms, not found) ------------------------ */

.prose { max-width: 720px; padding-top: 72px; padding-bottom: 96px; }
.prose h1 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.prose p { margin: 0 0 16px; }

/* ---- Home (BL-424) --------------------------------------------------------
   From Main.dc.html (1440px) and HomeMobile.dc.html (390px). Desktop wording
   at every width (ruled 2026-10-11). Every moving part is CSS and stops
   under prefers-reduced-motion (the block at the end of this file). */

.ico { width: 24px; height: 24px; color: var(--blue); flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
.dot-urgent { background: #C2334D; }
.dot-high { background: #C77700; }
.dot-low { background: #8A929D; }
.dot-done { background: #1F8A4C; }

/* A section heading block: label, h2 and an optional lead, centred. */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* -- Hero -- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding-top: 40px;
}

.new-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-card);
  box-shadow: 0 6px 14px -10px rgba(36, 85, 211, .4);
  color: var(--ink-nav);
  font-size: 14px;
  text-decoration: none;
}
.new-pill:hover { border-color: var(--blue); color: var(--blue); }
.new-pill b { background: var(--blue); color: var(--surface); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }

.hero-h1 { line-height: 1.08; }
.hero-sub { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 500; }
.hero-lead { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.5; color: var(--ink-muted); }

/* The headline's last words rotate over a 10s loop and settle on "resident
   request.". Screen readers get the whole sentence from the h1's aria-label. */
.rot { display: inline-grid; vertical-align: top; height: 1.08em; overflow: hidden; color: var(--blue); }
.rot-wrap { display: flex; flex-direction: column; animation: rot 10s cubic-bezier(.7, 0, .2, 1) infinite; }
.rot-wrap > span { display: block; height: 1.08em; text-align: center; white-space: nowrap; }
@keyframes rot {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-25%); }
  50%, 70% { transform: translateY(-50%); }
  75%, 100% { transform: translateY(-75%); }
}

/* -- Hero scene: one 12s loop, shared by the desktop (.ha) and phone (.mha)
   scenes. The phone rings (0-26%), AnyFix answers with three transcript lines
   in turn (28-65%), then "Call handled" (68-94%). Six emails arrive and are
   each marked "✓ Ticket"; five rows fill the queue. Both devices are generic,
   with no maker's logo or name. -- */

@property --u { syntax: '<integer>'; initial-value: 0; inherits: false; }

.e5 { animation: em5 12s infinite; }
.e11 { animation: em11 12s infinite; }
.e17 { animation: em17 12s infinite; }
.e23 { animation: em23 12s infinite; }
.e29 { animation: em29 12s infinite; }
.e35 { animation: em35 12s infinite; }
.t52 { animation: tg52 12s infinite; }
.t57 { animation: tg57 12s infinite; }
.t62 { animation: tg62 12s infinite; }
.t67 { animation: tg67 12s infinite; }
.t72 { animation: tg72 12s infinite; }
.t76 { animation: tg76 12s infinite; }
.q48 { animation: qr48 12s infinite; }
.q54 { animation: qr54 12s infinite; }
.q60 { animation: qr60 12s infinite; }
.q66 { animation: qr66 12s infinite; }
.q72 { animation: qr72 12s infinite; }
.pv-ring { animation: pv1 12s infinite; }
.pv-ans { animation: pv2 12s infinite; opacity: 0; }
.pv-done { animation: pv3 12s infinite; opacity: 0; }
/* The first line is already showing when the answered screen fades in. */
.tx1 { animation: tx1 12s infinite; }
.tx2 { animation: tx2 12s infinite; }
.tx3 { animation: tx3 12s infinite; }

@keyframes em5 { 0%, 5% { max-height: 0; opacity: 0; } 7%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes em11 { 0%, 11% { max-height: 0; opacity: 0; } 13%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes em17 { 0%, 17% { max-height: 0; opacity: 0; } 19%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes em23 { 0%, 23% { max-height: 0; opacity: 0; } 25%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes em29 { 0%, 29% { max-height: 0; opacity: 0; } 31%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes em35 { 0%, 35% { max-height: 0; opacity: 0; } 37%, 94% { max-height: 44px; opacity: 1; } 98%, 100% { max-height: 0; opacity: 0; } }
@keyframes tg52 { 0%, 52% { opacity: 0; } 54%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tg57 { 0%, 57% { opacity: 0; } 59%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tg62 { 0%, 62% { opacity: 0; } 64%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tg67 { 0%, 67% { opacity: 0; } 69%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tg72 { 0%, 72% { opacity: 0; } 74%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tg76 { 0%, 76% { opacity: 0; } 78%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes qr48 { 0%, 48% { opacity: 0; transform: translateX(-10px); } 51%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qr54 { 0%, 54% { opacity: 0; transform: translateX(-10px); } 57%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qr60 { 0%, 60% { opacity: 0; transform: translateX(-10px); } 63%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qr66 { 0%, 66% { opacity: 0; transform: translateX(-10px); } 69%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qr72 { 0%, 72% { opacity: 0; transform: translateX(-10px); } 75%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes pv1 { 0%, 25% { opacity: 1; } 27%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv2 { 0%, 26% { opacity: 0; } 28%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes pv3 { 0%, 66% { opacity: 0; } 68%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tx1 { 0%, 40% { opacity: .85; } 42%, 100% { opacity: 0; } }
@keyframes tx2 { 0%, 40% { opacity: 0; } 42%, 52% { opacity: .85; } 54%, 100% { opacity: 0; } }
@keyframes tx3 { 0%, 52% { opacity: 0; } 54%, 65% { opacity: .85; } 67%, 100% { opacity: 0; } }
@keyframes ring {
  0%, 3% { rotate: 0deg; }
  4%, 6%, 8%, 10% { rotate: -4deg; }
  5%, 7%, 9%, 11% { rotate: 4deg; }
  12%, 14% { rotate: 0deg; }
  15%, 17%, 19%, 21% { rotate: -4deg; }
  16%, 18%, 20%, 22% { rotate: 4deg; }
  23%, 100% { rotate: 0deg; }
}
@keyframes rip { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes wv { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes cnt { 0%, 4% { --u: 0; } 38%, 94% { --u: 47; } 100% { --u: 0; } }
@keyframes glow {
  0%, 40% { box-shadow: 0 0 0 0 rgba(36, 85, 211, 0); border-color: var(--line-card); }
  44%, 78% { box-shadow: 0 0 0 6px rgba(36, 85, 211, .18); border-color: var(--blue); }
  84%, 100% { box-shadow: 0 0 0 0 rgba(36, 85, 211, 0); border-color: var(--line-card); }
}
@keyframes flowon { 0%, 42% { opacity: 0; } 44%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes fd { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes fdv { 0% { top: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 12px; opacity: 0; } }
@keyframes mfdv { 0% { top: -2px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 22px; opacity: 0; } }

.av-1 { background: #E1EEF6; }
.av-2 { background: #F6E1E1; }
.av-3 { background: #E3F1E8; }
.av-4 { background: #E5E0F4; }
.av-5 { background: #F3E3D3; }
.av-6 { background: #DCE5F7; }
.decline { background: #EB4D3D; }
.accept { background: #34C759; }
.hang { transform: rotate(135deg); }
.qr-new { background: #F3F6FD; }
.wave i:nth-child(2), .mwave i:nth-child(2) { animation-delay: -.15s; }
.wave i:nth-child(3), .mwave i:nth-child(3) { animation-delay: -.3s; }
.wave i:nth-child(4), .mwave i:nth-child(4) { animation-delay: -.45s; }
.wave i:nth-child(5), .mwave i:nth-child(5) { animation-delay: -.6s; }
.wave i:nth-child(6), .mwave i:nth-child(6) { animation-delay: -.75s; }
.wave i:nth-child(7), .mwave i:nth-child(7) { animation-delay: -.2s; }
.wave i:nth-child(8), .mwave i:nth-child(8) { animation-delay: -.5s; }

/* The AnyFix chip is the wordmark, so it keeps the trademark colours. */
.chip .any, .mchip .any { color: var(--tm-ink); }
.chip .fix, .mchip .fix { color: var(--tm-blue); }

/* Desktop scene: drawn at 1184x460 and scaled to the column, so every part
   keeps its place. Each step keeps the whole scene inside the column. */
.ha { position: relative; width: 100%; height: 423px; margin-top: 20px; overflow: hidden; }
.ha-scene {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1184px;
  height: 460px;
  transform: translateX(-50%) scale(.919);
  transform-origin: top center;
  background: var(--stage);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}
@media (max-width: 1183px) { .ha { height: 389px; } .ha-scene { transform: translateX(-50%) scale(.845); } }
@media (max-width: 1099px) { .ha { height: 354px; } .ha-scene { transform: translateX(-50%) scale(.77); } }
@media (max-width: 1009px) { .ha { height: 313px; } .ha-scene { transform: translateX(-50%) scale(.68); } }

.ha .small { font-size: 12px; color: var(--ink-small); }

/* Laptop: a black glass bezel inside a silver lid edge, a camera notch and a
   menu bar. */
.ha .lap {
  position: absolute;
  left: 36px;
  top: 36px;
  z-index: 0;
  width: 540px;
  height: 334px;
  padding: 9px 9px 11px;
  border-radius: 18px 18px 8px 8px;
  background: #0B0C0E;
  box-shadow: 0 0 0 1.5px #B4B9C1, 0 0 0 3px #8C929B, 0 30px 44px -26px rgba(21, 24, 29, .75);
}
.ha .lap::before { content: ""; position: absolute; left: 50%; top: 0; z-index: 2; width: 76px; height: 13px; margin-left: -38px; border-radius: 0 0 9px 9px; background: #0B0C0E; }
.ha .lap::after { content: ""; position: absolute; left: 50%; top: 4px; z-index: 3; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3D5A80, #111823 70%); }
.ha .base {
  position: absolute;
  left: -2px;
  top: 367px;
  width: 616px;
  height: 15px;
  border-radius: 3px 3px 22px 22px / 3px 3px 12px 12px;
  background: linear-gradient(180deg, #F1F3F5 0%, #D4D8DE 35%, #AEB4BC 75%, #8D939C 100%);
  box-shadow: 0 16px 22px -12px rgba(21, 24, 29, .45), inset 0 1px 0 #FFFFFF;
}
.ha .base::after { content: ""; position: absolute; left: 50%; top: 0; width: 110px; height: 6px; margin-left: -55px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #9EA4AD, #C3C8CF); }
.ha .scr { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: var(--surface); font-size: 12.5px; }
.ha .mbar { flex: none; display: flex; align-items: center; gap: 14px; height: 19px; padding: 0 10px; background: rgba(236, 239, 244, .96); border-bottom: 1px solid #DDE1E7; font-size: 10.5px; color: var(--ink-nav); }
.ha .mbar b { font-weight: 700; }
.ha .mbar .r { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.ha .win { flex: 1; min-height: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.ha .tl { display: flex; gap: 6px; padding: 2px 0 8px 4px; }
.ha .tl i { width: 10px; height: 10px; border-radius: 5px; background: #FF5F57; }
.ha .tl i:nth-child(2) { background: #FEBC2E; }
.ha .tl i:nth-child(3) { background: #28C840; }
.ha .side { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; background: #F2F4F7; color: var(--ink-muted); }
.ha .side .it { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; }
.ha .side .on { background: #DCE5F7; color: var(--ink); font-weight: 600; }
.ha .cnt, .mcnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #E5484D;
  color: var(--surface);
  font-weight: 700;
  counter-reset: u var(--u);
  animation: cnt 12s infinite;
}
.ha .cnt { min-width: 26px; height: 20px; padding: 0 6px; font-size: 11.5px; }
.ha .cnt::after, .mcnt::after { content: counter(u); }
.ha .mlist { display: flex; flex-direction: column; min-width: 0; }
.ha .lh { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #EEF0F3; font-weight: 600; font-size: 14px; }
.ha .lh .small { font-weight: 400; }
.ha .em { display: grid; grid-template-columns: 8px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; max-height: 0; padding: 0 12px; overflow: hidden; border-bottom: 1px solid #EEF0F3; opacity: 0; }
.ha .em .u { width: 8px; height: 8px; border-radius: 4px; background: var(--blue); }
.ha .em .av { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; font-size: 10px; font-weight: 700; color: var(--ink-muted); }
.ha .em .tx { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; line-height: 1.3; }
.ha .em .tx b, .ha .em .tx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha .em .tx b { font-weight: 600; color: var(--ink); }
.ha .tag { padding: 1px 7px; border-radius: 999px; background: #E6F4EC; color: #16703D; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; }

/* Phone: a titanium-style frame, black bezel, a pill-shaped camera cut-out,
   side buttons, a status bar and a home indicator. */
.ha .ph {
  position: absolute;
  left: 14px;
  top: 156px;
  z-index: 2;
  width: 146px;
  height: 294px;
  padding: 3px;
  border-radius: 34px;
  background: linear-gradient(135deg, #8E9298 0%, #4A4D52 22%, #2C2E31 50%, #5B5F65 78%, #3A3C40 100%);
  box-shadow: 0 26px 40px -22px rgba(21, 24, 29, .8), inset 0 0 0 1px rgba(255, 255, 255, .18);
  animation: ring 12s infinite;
  transform-origin: 50% 80%;
}
.ha .ph::before { content: ""; position: absolute; left: -2px; top: 62px; width: 3px; height: 22px; border-radius: 2px 0 0 2px; background: #4A4D52; box-shadow: 0 30px 0 #4A4D52, 0 -20px 0 -.5px #4A4D52; }
.ha .ph::after { content: ""; position: absolute; right: -2px; top: 86px; width: 3px; height: 40px; border-radius: 0 2px 2px 0; background: #4A4D52; }
.ha .pscr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 31px; border: 4px solid #050506; background: radial-gradient(120% 70% at 50% 0%, #3C4F7C 0%, #1C2640 55%, #0D1220 100%); color: #F2F4F8; }
.ha .di { position: absolute; left: 50%; top: 6px; z-index: 3; width: 46px; height: 14px; margin-left: -23px; border-radius: 8px; background: #000; }
.ha .sb { position: absolute; left: 0; right: 0; top: 6px; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font-size: 9.5px; font-weight: 600; }
.ha .sb .r { display: flex; gap: 3px; align-items: center; }
.ha .hi { position: absolute; left: 50%; bottom: 5px; z-index: 3; width: 48px; height: 4px; margin-left: -24px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.ha .pv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 40px; font-size: 12px; text-align: center; }
.ha .pv-name { margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.ha .pv-sub { opacity: .7; font-size: 11px; }
.ha .cav { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: 14px; border-radius: 27px; background: #3A4766; font-weight: 700; font-size: 15px; }
.ha .rip, .mrip { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #6E8BD6; animation: rip 1.2s infinite; }
.ha .calls { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: space-around; }
.ha .calls > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; opacity: .9; }
.ha .calls i { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 19px; }
.ha .calls svg { width: 16px; height: 16px; color: #fff; }
.ha .pv-dim { opacity: .7; }
.ha .pv-brand { font-size: 15px; }
.ha .wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: 6px; }
.ha .wave i, .mwave i { border-radius: 2px; background: #6E8BD6; animation: wv .9s ease-in-out infinite; }
.ha .wave i { width: 3px; }
.ha .pv-time { opacity: .8; }
.ha .lines { display: grid; padding: 0 12px; font-size: 11px; line-height: 1.35; }
.lines > span, .mlines > span { grid-area: 1 / 1; opacity: 0; }
.lines > span:first-child, .mlines > span:first-child { opacity: .85; }
.ha .pv-check { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: #1F8A4C; }
.ha .pv-check svg { width: 22px; height: 22px; color: #fff; }
.ha .pv-handled { font-size: 13px; }
.ha .pv-ticket { opacity: .75; padding: 0 10px; }

.ha .chip {
  position: absolute;
  left: 600px;
  top: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 44px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line-card);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  animation: glow 12s infinite;
}
.ha .stream { position: absolute; top: 217px; width: 24px; height: 2px; background: #C9D6F2; }
.ha .stream-in { left: 576px; }
.ha .stream-out { left: 692px; }
.ha .flow { position: absolute; inset: 0; opacity: 0; animation: flowon 12s infinite; }
.ha .fd { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 5px; background: var(--blue); animation: fd 1.1s linear infinite; }
.ha .stream-out .fd { animation-delay: -.5s; }

.ha .q {
  position: absolute;
  left: 716px;
  top: 58px;
  width: 440px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: 8px;
  box-shadow: 0 10px 24px -14px rgba(36, 85, 211, .35);
}
.ha .q-title { padding: 12px 14px; font-size: 14px; font-weight: 600; }
.ha .qr { display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px; gap: 8px; align-items: center; height: 40px; padding: 0 14px; border-top: 1px solid var(--line-row); background: var(--surface); font-size: 12.5px; opacity: 0; }
.ha .qr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha .qr-head { height: 30px; opacity: 1; }
.ha .qr-new { background: #F3F6FD; }
.ha .q-body { position: relative; }
.ha .slots { position: absolute; inset: 0; z-index: 0; }
.ha .q-rows { position: relative; z-index: 1; }
.ha .slot { display: flex; align-items: center; height: 40px; padding: 0 14px; border-top: 1px solid var(--line-row); }
.ha .slot i { display: block; width: 60%; height: 8px; border-radius: 4px; background: #EEF1F5; }
.ha .vend { display: flex; gap: 5px; align-items: center; color: var(--blue); }
.ha .vend svg { width: 16px; height: 16px; flex: none; }

/* Phone scene (900px and below): the ringing phone beside the inbox, both
   feeding AnyFix, the queue below. Drawn for 358px wide. */
.mha {
  display: none;
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 596px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--stage);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.mph {
  position: absolute;
  left: 12px;
  top: 16px;
  width: 128px;
  height: 258px;
  padding: 3px;
  border-radius: 30px;
  background: linear-gradient(135deg, #8E9298 0%, #4A4D52 22%, #2C2E31 50%, #5B5F65 78%, #3A3C40 100%);
  box-shadow: 0 20px 30px -18px rgba(21, 24, 29, .8);
  animation: ring 12s infinite;
  transform-origin: 50% 80%;
}
.mps { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 27px; border: 3px solid #050506; background: radial-gradient(120% 70% at 50% 0%, #3C4F7C 0%, #1C2640 55%, #0D1220 100%); color: #F2F4F8; }
.mdi { position: absolute; left: 50%; top: 5px; z-index: 3; width: 38px; height: 11px; margin-left: -19px; border-radius: 6px; background: #000; }
.msb { position: absolute; left: 0; right: 0; top: 5px; z-index: 2; display: flex; justify-content: space-between; padding: 0 11px; font-size: 8px; font-weight: 600; }
.mhi { position: absolute; left: 50%; bottom: 4px; z-index: 3; width: 40px; height: 3px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.mpv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 30px; text-align: center; }
.mpv-name { margin-top: 4px; font-size: 14px; font-weight: 500; }
.mpv-sub { opacity: .7; font-size: 9.5px; }
.mcav { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: 10px; border-radius: 22px; background: #3A4766; font-weight: 700; font-size: 12px; }
.mcalls { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: space-around; }
.mcalls > span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; }
.mcalls i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; }
.mcalls svg { width: 13px; height: 13px; color: #fff; }
.mpv-dim { opacity: .7; font-size: 10px; }
.mpv-brand { font-size: 13px; }
.mwave { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 4px; }
.mwave i { width: 2.5px; }
.mlines { display: grid; padding: 4px 8px 0; font-size: 9.5px; line-height: 1.3; }
.mpv-check { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; background: #1F8A4C; }
.mpv-check svg { width: 18px; height: 18px; color: #fff; }
.mpv-handled { font-size: 11.5px; }
.mpv-ticket { opacity: .75; font-size: 10px; padding: 0 6px; }
.minb { position: absolute; left: 150px; right: 12px; top: 16px; height: 258px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-card); border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(36, 85, 211, .35); }
.mih { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #EEF0F3; font-weight: 600; font-size: 12px; }
.mcnt { min-width: 22px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 10px; }
.mem { display: grid; grid-template-columns: 6px 22px minmax(0, 1fr) auto; gap: 6px; align-items: center; max-height: 0; padding: 0 8px; overflow: hidden; border-bottom: 1px solid #EEF0F3; opacity: 0; }
.mu { width: 6px; height: 6px; border-radius: 3px; background: var(--blue); }
.mav { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 11px; font-size: 9px; font-weight: 700; color: var(--ink-muted); }
/* Six rows have to fit the 258px inbox, so Dana R.'s tick stays in view. */
.mtx { display: flex; flex-direction: column; min-width: 0; padding: 3px 0; }
.mtx b, .mtx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtx b { font-weight: 600; font-size: 11.5px; }
.mtx span { font-size: 11px; color: var(--ink-muted); }
.mtag { padding: 1px 6px; border-radius: 999px; background: #E6F4EC; color: #16703D; font-size: 10px; font-weight: 700; opacity: 0; }
/* The dot runs in the open on both sides of the chip: a 28px track each way, and
   the queue starts below the second one. The board drew 16px in and none out, so
   the dot spent its whole run behind the chip or the queue. */
.mflow { position: absolute; left: 50%; top: 276px; width: 2px; height: 28px; margin-left: -1px; overflow: visible; background: #C9D6F2; }
.mflow i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 4px; background: var(--blue); animation: mfdv 1.1s linear infinite; }
.mflow-out { top: 332px; }
.mflow-out i { animation-delay: -.5s; }
.mchip { position: absolute; left: 50%; top: 304px; z-index: 2; display: flex; align-items: center; height: 28px; padding: 0 14px; transform: translateX(-50%); border-radius: 14px; background: var(--surface); border: 1px solid var(--line-card); font-weight: 700; font-size: 13px; letter-spacing: -.02em; animation: glow 12s infinite; }
.mq { position: absolute; left: 12px; right: 12px; top: 360px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-card); border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(36, 85, 211, .35); }
.mqh { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.mqh b { font-weight: 600; }
.mqh .small { font-size: 11px; }
.mqr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-row); opacity: 0; }
.mqt { display: flex; flex-direction: column; min-width: 0; }
.mqt b { font-size: 12px; font-weight: 600; }
.mqt .small { font-size: 11.5px; }
.mvend { padding: 2px 8px; border-radius: 999px; background: var(--stage); color: var(--blue-hover); font-size: 10.5px; font-weight: 600; white-space: nowrap; }

/* -- Why AnyFix: two cards whose rows line up (subgrid), an arrow between. -- */

.why { display: flex; flex-direction: column; gap: 48px; }
.why .lead { max-width: 700px; }

.qa { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: 20px; }
.qa-col { grid-row: 1 / 6; display: grid; grid-template-rows: subgrid; border-radius: 10px; background: var(--surface); }
.qa-today { grid-column: 1; border: 1px solid #E8D5DA; box-shadow: 0 20px 40px -28px rgba(194, 51, 77, .5); }
.qa-with { grid-column: 3; border: 1px solid #D3DDF2; box-shadow: 0 20px 40px -28px rgba(36, 85, 211, .55); }
.qa-arrow { grid-column: 2; grid-row: 1 / 6; align-self: center; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 24px; background: var(--blue); color: var(--surface); }
.qa-arrow svg { width: 22px; height: 22px; }
.qa-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 36px 40px 18px; }
.qa-cell { display: flex; gap: 12px; align-items: center; padding: 9px 40px; }
.qa-cell:last-child { padding-bottom: 36px; }
.qa-tag { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.qa-today .qa-tag { color: #A12A40; }
.qa-with .qa-tag { color: var(--blue); }
.qa-today .ico { color: #C2334D; }
.qa-big { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }

/* -- The product -- */

.product { display: flex; flex-direction: column; gap: 40px; }
.product .intro { max-width: 760px; }
.chans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 28px; }
.chan { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.chan p { margin: 0; }
.callout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 28px; border-radius: 10px; background: var(--band); }
.callout .ico { width: 36px; height: 36px; }
.callout-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.callout-text p { margin: 0; }
.callout-big { font-size: 24px; line-height: 1.3; font-weight: 600; }

/* -- The tracker: one 10s loop. Step n is lit from its start until 92%, then
   everything clears together at 96%. The pill shows one state at a time and
   fits its width to that state's words (the max-width steps). -- */

.tracker { display: flex; flex-direction: column; gap: 40px; }
.tracker .intro { max-width: 960px; }
.tk-stage { padding: 40px; background: #E4EBF7; }
.tk-card { display: flex; flex-direction: column; gap: 32px; padding: 28px 32px 32px; }
.tk-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tk-name { display: flex; flex-direction: column; gap: 2px; }
.tk-subject { font-size: 20px; font-weight: 600; }
.tk-note { margin: 0; text-align: center; }

.tk-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--stage); color: var(--blue-hover); font-size: 15px; font-weight: 600; }
.tk-pill > span { display: inline-flex; align-items: center; gap: 8px; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; }
.tk-pill .dot { margin-right: 0; background: var(--blue); }
.tk-pill .dot-done { background: #1F8A4C; }

.tk-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tk-track { position: absolute; left: 10%; right: 10%; top: 15px; height: 3px; border-radius: 2px; background: #DDE3EC; }
.tk-bar { position: absolute; left: 10%; top: 15px; width: 0; height: 3px; border-radius: 2px; background: var(--blue); animation: tk-bar 10s ease-in-out infinite; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.step-name { font-size: 16px; font-weight: 600; }
.circ { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; }
.tk-ring { position: relative; background: var(--surface); border: 3px solid #DDE3EC; }
.tk-fill { position: absolute; inset: -3px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--blue); color: var(--surface); opacity: 0; }
.tk-fill svg { width: 16px; height: 16px; }
.tk-fill-done { background: #1F8A4C; }
.tk-time { opacity: 0; }

.tk-s1 { animation: tk-s1 10s infinite; }
.tk-s2 { animation: tk-s2 10s infinite; }
.tk-s3 { animation: tk-s3 10s infinite; }
.tk-s4 { animation: tk-s4 10s infinite; }
.tk-s5 { animation: tk-s5 10s infinite; }
.tk-p1 { animation: tk-p1 10s infinite; }
.tk-p2 { animation: tk-p2 10s infinite; }
.tk-p3 { animation: tk-p3 10s infinite; }
.tk-p4 { animation: tk-p4 10s infinite; }
.tk-p5 { animation: tk-p5 10s infinite; }
@keyframes tk-bar { 0%, 8% { width: 0; } 24% { width: 20%; } 40% { width: 40%; } 56% { width: 60%; } 72%, 92% { width: 80%; } 96%, 100% { width: 0; } }
@keyframes tk-s1 { 0%, 4% { opacity: 0; } 8%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tk-s2 { 0%, 20% { opacity: 0; } 24%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tk-s3 { 0%, 36% { opacity: 0; } 40%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tk-s4 { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tk-s5 { 0%, 68% { opacity: 0; } 72%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tk-p1 { 0%, 4% { opacity: 0; max-width: 240px; } 8%, 21% { opacity: 1; max-width: 240px; } 22% { opacity: 0; max-width: 240px; } 23%, 94% { opacity: 0; max-width: 0; } 95%, 100% { opacity: 0; max-width: 240px; } }
@keyframes tk-p2 { 0%, 22% { opacity: 0; max-width: 0; } 23% { opacity: 0; max-width: 240px; } 24%, 37% { opacity: 1; max-width: 240px; } 38% { opacity: 0; max-width: 240px; } 39%, 100% { opacity: 0; max-width: 0; } }
@keyframes tk-p3 { 0%, 38% { opacity: 0; max-width: 0; } 39% { opacity: 0; max-width: 240px; } 40%, 53% { opacity: 1; max-width: 240px; } 54% { opacity: 0; max-width: 240px; } 55%, 100% { opacity: 0; max-width: 0; } }
@keyframes tk-p4 { 0%, 54% { opacity: 0; max-width: 0; } 55% { opacity: 0; max-width: 240px; } 56%, 69% { opacity: 1; max-width: 240px; } 70% { opacity: 0; max-width: 240px; } 71%, 100% { opacity: 0; max-width: 0; } }
@keyframes tk-p5 { 0%, 70% { opacity: 0; max-width: 0; } 71% { opacity: 0; max-width: 240px; } 72%, 92% { opacity: 1; max-width: 240px; } 94% { opacity: 0; max-width: 240px; } 95%, 100% { opacity: 0; max-width: 0; } }

/* -- For your managers: text and points beside a ticket's timeline. -- */

.managers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px 56px; align-items: stretch; }
.managers-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.managers-text { display: flex; flex-direction: column; gap: 16px; }
.managers-text p { margin: 0; }
.ticks { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 8px 0 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ico { margin-top: 1px; }
.timeline { position: relative; display: flex; padding: 0 0 32px 32px; }
.timeline-back { position: absolute; left: 0; right: 32px; top: 32px; bottom: 0; border-radius: 10px; background: var(--stage); }
.timeline-card { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px 22px; font-size: 13px; }
.timeline-title { font-weight: 600; }
.tl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.tl-row strong { font-weight: 600; }
.closed { color: #16703D; font-weight: 600; }

/* -- Closing card (option 5B) -- */

.closing { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px 48px 40px; border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(36, 85, 211, .5); text-align: center; }
.closing-h { font-size: 48px; }
.closing-text { margin: 0; max-width: 640px; }
.acts-lg { margin-top: 10px; }
.acts-lg .btn { min-height: 58px; padding: 17px 34px; font-size: 19px; }
.acts-lg .btn-w { min-height: 58px; padding: 16px 30px; font-size: 19px; }
.closing-mail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; width: 100%; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-row); font-size: 15px; }

/* ---- About (BL-425) --------------------------------------------------------
   From About.dc.html (1440px) and AboutMobile.dc.html (390px); both boards
   carry the same words. Nothing here moves. */

.about-hero { padding-top: 72px; padding-bottom: 96px; }
.about-h1 { max-width: 900px; text-wrap: balance; }
.about-hero .hero-sub { max-width: 820px; text-wrap: balance; }

/* -- Why AI-native: the heading column is sticky, so it stays beside the
   steps as they scroll past. The grid's align-items: start is what gives the
   column room to stick: stretched to the row, it would have nowhere to go. -- */

.ain { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.ain-head { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 16px; }
.ain-head p { margin: 0; }
.ain-h { font-size: 44px; }

/* Each step sits under a grey hairline; the pale line joining the circles
   is drawn from each row to the next, so the last row draws none and the
   line ends at step 4. No blue divider between steps, by design. */
.steps { margin: 0; padding: 0; list-style: none; }
.srow { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 28px 0; border-top: 1px solid var(--line); }
.srow:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 78px; bottom: -22px; width: 2px; background: #C9D6F2; }
.stepb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--blue);
  box-shadow: 0 0 0 6px #DCE5F7, 0 8px 16px -8px rgba(36, 85, 211, .7);
  color: var(--surface);
  font-size: 18px;
  font-weight: 700;
}
.srow-text { display: flex; flex-direction: column; gap: 6px; }

/* -- Our story and the two sides it serves -- */

.story { display: flex; flex-direction: column; gap: 48px; }
.story .intro { max-width: 760px; }
.story .h2 { text-wrap: balance; }
.story-text { max-width: 720px; margin: 0 auto; text-align: center; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 24px; }
.side-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; }
.side-card .ico { width: 28px; height: 28px; }
.side-card .label { font-size: 13px; }
.side-card .h3 { font-size: 26px; }
.side-card p { margin: 0; }

/* -- Closing: the heading beside a card with both buttons. -- */

.touch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: center; }
.touch-head { display: flex; flex-direction: column; gap: 16px; }
.touch-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.touch-card .h3 { font-size: 20px; }
.touch-card p { margin: 0; }
.touch-acts { justify-content: flex-start; padding-top: 6px; }

/* ---- Pricing (BL-426), and the option cards Contact (BL-427) shares -------
   Pricing.dc.html's words, restyled to Contact.dc.html's look by the
   2026-10-11 ruling: its centred hero (:71-75) and its cards (:30-33). */

/* A page hero in Contact's sizes: the shared .hero with Contact's spacing. */
.page-hero { padding-top: 72px; padding-bottom: 56px; }
.page-h1 { max-width: 900px; text-wrap: balance; }
.page-lead { max-width: 640px; text-wrap: balance; }

/* Option cards: each a white .card with an icon, an optional label, a
   heading, a line of text and its buttons pinned to the foot, so two cards
   side by side line their buttons up. */
.opts-section { padding-bottom: 96px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.opt { display: flex; flex-direction: column; gap: 14px; padding: 36px; }
.opt .ico { width: 28px; height: 28px; }
.opt .label { font-size: 13px; }
.opt .h3 { font-size: 26px; }
.opt p { margin: 0; }
.opt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 10px; }
/* A plain text link beside a card's buttons (Contact's "Sign in to AnyFix"). */
.opt-link { font-weight: 600; text-decoration: none; }

/* ---- Phone: 900px and below ---------------------------------------------- */

@media (max-width: 900px) {
  :root { --side: 16px; }

  body { font-size: 17px; }

  .section, .band { padding-top: 48px; padding-bottom: 48px; }

  .h1 { font-size: 44px; }
  .h2, .prose h1 { font-size: 30px; }

  /* Wordmark and both buttons on the top row, the four links below. */
  .head { flex-wrap: wrap; gap: 12px; }
  .head .wordmark { font-size: 30px; margin-right: auto; }
  .head-nav { order: 3; flex-basis: 100%; gap: 4px 24px; }
  .head-nav a { font-size: 17px; padding: 8px 0; }
  .head-acts { gap: 8px; }
  .head-acts a { padding: 0 12px; }

  .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .foot-brand { grid-column: 1 / -1; gap: 6px; }
  .foot nav { gap: 8px; }
  .foot-h { font-size: 13px; }
  .foot nav a { padding: 4px 0; }
  .foot-bar { flex-direction: column; gap: 4px; padding-top: 16px; font-size: 13px; }

  .prose { padding-top: 40px; padding-bottom: 56px; }
}

/* ---- Home at 900px and below (HomeMobile.dc.html) ------------------------- */

@media (max-width: 900px) {
  .hero { align-items: flex-start; gap: 16px; padding-top: 24px; padding-bottom: 48px; text-align: left; }
  .rot-wrap > span { text-align: left; }
  .hero-sub { font-size: 20px; }
  .hero-lead { font-size: 17px; }
  .acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 480px; }
  .ha { display: none; }
  .mha { display: block; }

  .intro { align-items: flex-start; text-align: left; }
  .intro .lead { font-size: 17px; }
  .why, .product, .tracker { gap: 24px; }

  .qa { display: flex; flex-direction: column; gap: 16px; }
  .qa-arrow { display: none; }
  .qa-col { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
  .qa-today, .qa-with { box-shadow: none; }
  .qa-head, .qa-cell, .qa-cell:last-child { padding: 0; }
  .qa-tag { font-size: 13px; }
  .qa-big { font-size: 22px; }

  .chans { gap: 24px; }
  .callout { gap: 8px; padding: 24px 20px; }
  .callout-big { font-size: 20px; }

  /* The tracker stacks: one step per row, time on the right, no connecting bar. */
  .tk-stage { padding: 20px 16px; background: var(--stage); }
  .tk-card { gap: 16px; padding: 16px; }
  .tk-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tk-track, .tk-bar { display: none; }
  .step { flex-direction: row; gap: 10px; text-align: left; }
  .step-name { font-size: 15px; }
  .tk-time { margin-left: auto; }
  .circ, .tk-fill { width: 24px; height: 24px; border-radius: 12px; }
  .tk-fill svg { width: 12px; height: 12px; }
  .tk-note { text-align: left; }

  .managers { gap: 24px; }
  .timeline { padding: 0 0 20px 20px; }
  .timeline-back { right: 20px; top: 20px; }

  .closing { gap: 14px; padding: 32px 20px 24px; border-radius: 16px; }
  .acts-lg .btn, .acts-lg .btn-w { min-height: 52px; padding: 13px 20px; font-size: 17px; }
  .closing-mail { flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; padding-top: 14px; }
}

/* ---- About at 900px and below (AboutMobile.dc.html) ----------------------- */

@media (max-width: 900px) {
  .about-hero { padding-top: 32px; padding-bottom: 48px; }

  .ain { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ain-head { position: static; gap: 14px; }
  .ain-h { font-size: 30px; }
  .srow { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .srow:not(:last-child)::before { left: 18px; top: 62px; bottom: -18px; }
  .stepb { width: 38px; height: 38px; border-radius: 19px; box-shadow: 0 0 0 5px #DCE5F7; font-size: 16px; }
  .srow-text { gap: 4px; }
  .srow .h3 { font-size: 19px; }

  .story { gap: 14px; }
  .story .intro { margin: 0; }
  .story-text { margin: 0; text-align: left; }
  .sides { gap: 16px; margin-top: 34px; }
  .side-card { gap: 10px; padding: 24px 20px; }
  .side-card .label { font-size: 12px; }
  .side-card .h3 { font-size: 22px; }

  .touch { gap: 16px; }
  .touch-card { gap: 12px; padding: 24px 20px; border-radius: 14px; }
  .touch-card .h3 { font-size: 19px; }
  .touch-acts { padding-top: 4px; }
}

/* ---- Pricing and option cards at 900px and below ---------------------------
   No phone board: the shell's phone rules. The cards stack once the column is
   narrower than two of them, and their buttons run the card's width. */

@media (max-width: 900px) {
  .page-hero { padding-top: 32px; padding-bottom: 32px; }

  .opts-section { padding-bottom: 48px; }
  .opts { gap: 16px; }
  .opt { gap: 12px; padding: 24px 20px; }
  .opt .label { font-size: 12px; }
  .opt .h3 { font-size: 22px; }
  .opt-acts { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 4px; }
  /* Stretched like the buttons, so it gets the same 48px tap target, centred. */
  .opt-link { display: flex; align-items: center; justify-content: center; min-height: 48px; }
}

/* ---- Reduced motion: nothing on the page moves ----------------------------
   The hero scenes hold their finished frame (10.6s of 12s): the call handled,
   every email marked as a ticket and the queue full. The headline shows
   "resident request." and the tracker shows every step lit, on Resolved. */

@media (prefers-reduced-motion: reduce) {
  .ha *, .mha * { animation-delay: -10.6s !important; animation-play-state: paused !important; }
  .rot-wrap { animation: none; transform: translateY(-75%); }
  .tk-bar, .tk-s1, .tk-s2, .tk-s3, .tk-s4, .tk-s5,
  .tk-p1, .tk-p2, .tk-p3, .tk-p4, .tk-p5 { animation: none; }
  .tk-bar { width: 80%; }
  .tk-s1, .tk-s2, .tk-s3, .tk-s4, .tk-s5 { opacity: 1; }
  .tk-pill > .tk-p5 { max-width: none; opacity: 1; }
}