:root {
  --bg: #0a0d14;
  --ink: #f4f6fb;
  --muted: #9aa4b8;
  --accent: #3d8bff;
  --glow: rgba(61, 139, 255, .18);
  --cell: clamp(60px, 4.4vw, 100px);
  --gap: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
body[data-season="halloween"] { --accent: #ff7a1a; --glow: rgba(140, 50, 190, .30); }
body[data-season="winter"] { --accent: #7cc4ff; --glow: rgba(90, 160, 255, .22); }
body[data-season="remembrance"] { --accent: #e0303a; --glow: rgba(200, 40, 50, .16); }
body[data-season="newyear"] { --accent: #f2c94c; --glow: rgba(242, 201, 76, .16); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.4 "Segoe UI", "Selawik", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}
.sprite { display: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* backdrop: a night sky with stars and two ranges of hills, shown when there is no
   wallpaper photo. */
:root { --hill-far: #151c2e; --hill-near: #0f1523; --band-h: 64px; }
body[data-season="halloween"] { --hill-far: #1d1130; --hill-near: #140b20; }
body[data-season="winter"] { --hill-far: #1b2a40; --hill-near: #131f31; }
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70vw 60vh at 75% 0%, var(--glow), transparent 70%),
    linear-gradient(to bottom, #070910 0%, var(--bg) 55%, #121726 100%);
}
.stars { position: absolute; inset: 0 0 40% 0; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 42%, #fffa, transparent),
    radial-gradient(1.5px 1.5px at 43% 12%, #fff, transparent), radial-gradient(1px 1px at 58% 33%, #fff9, transparent),
    radial-gradient(1px 1px at 71% 8%, #fffb, transparent), radial-gradient(1.5px 1.5px at 88% 27%, #fff, transparent),
    radial-gradient(1px 1px at 94% 52%, #fff8, transparent), radial-gradient(1px 1px at 6% 61%, #fff8, transparent),
    radial-gradient(1px 1px at 35% 70%, #fff6, transparent), radial-gradient(1px 1px at 79% 64%, #fff7, transparent);
}
.backdrop svg { stroke: none; }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 20vh; }
.hills .far { fill: var(--hill-far); }
.hills .near { fill: var(--hill-near); }
.hills .lights circle { fill: #ffcf7a; opacity: .55; }
.season-art { position: absolute; inset: 0; }
body[data-season="halloween"] .season-art {
  background: radial-gradient(circle at 64% 10%, #ffe9c2 0 34px, rgba(255,200,120,.22) 35px 38px, transparent 90px);
}
body[data-season="halloween"] .season-art::before {
  content: ""; position: absolute; top: 4%; left: 44%; width: 260px; height: 110px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 110'%3E%3Cg fill='%23000'%3E%3Cpath d='M20 40c6-6 10-6 14 0 2-4 4-6 6-6s4 2 6 6c4-6 8-6 14 0-8-2-12 2-14 8-2-4-4-5-6-5s-4 1-6 5c-2-6-6-10-14-8z'/%3E%3Cpath transform='translate(150 10) scale(.8)' d='M20 40c6-6 10-6 14 0 2-4 4-6 6-6s4 2 6 6c4-6 8-6 14 0-8-2-12 2-14 8-2-4-4-5-6-5s-4 1-6 5c-2-6-6-10-14-8z'/%3E%3Cpath transform='translate(200 60) scale(.6)' d='M20 40c6-6 10-6 14 0 2-4 4-6 6-6s4 2 6 6c4-6 8-6 14 0-8-2-12 2-14 8-2-4-4-5-6-5s-4 1-6 5c-2-6-6-10-14-8z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  animation: bats 14s ease-in-out infinite alternate;
}
@keyframes bats { to { transform: translate(-40px, 18px); } }
body[data-season="winter"] .season-art {
  background-image: radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff6, transparent), radial-gradient(2px 2px at 40% 70%, #fff5, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff7, transparent);
  background-size: 300px 300px;
  animation: snow 18s linear infinite;
}
@keyframes snow { to { background-position: 0 300px, 0 300px, 0 300px, 0 300px; } }

/* header */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: clamp(28px, 6vh, 64px) clamp(16px, 5vw, 96px) 8px; }
h1 { margin: 0; font-weight: 300; font-size: clamp(40px, 6vw, 64px); letter-spacing: -.01em; line-height: 1; }
.lede { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.account { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; text-align: right; font-size: 18px; font-weight: 300; }
.account small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.account-badge { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); color: #0a0d14; font-size: 24px; transition: transform .2s var(--ease); }
.account:hover .account-badge { transform: scale(1.06); }
.account:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* page layout: the product tiles, and on wide screens a right-hand column for weather and news */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.rail { display: flex; flex-direction: column; gap: 32px; padding: 0 clamp(16px, 5vw, 96px) 40px; }
@media (min-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr) auto; }
  .layout .start { padding-right: 40px; }
  .rail { padding: 28px clamp(16px, 5vw, 96px) 40px 0; }
}

/* the start screen: groups of tiles */
.start { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start;
  padding: 28px clamp(16px, 5vw, 96px) 40px; }
.group h2 { margin: 0 0 12px; font-weight: 300; font-size: 20px; color: var(--ink); opacity: .85; }
.grid { display: grid; grid-template-columns: repeat(4, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); grid-auto-flow: dense; }

/* tiles */
.tile { --rx: 0deg; --ry: 0deg; --s: 1;
  position: relative; display: block; color: #fff; text-decoration: none;
  perspective: 900px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform .25s var(--ease);
  animation: enter .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms);
  transform-style: preserve-3d;
}
.tile.S { grid-column: span 2; grid-row: span 2; }
.tile.W { grid-column: span 4; grid-row: span 2; }
.tile.L { grid-column: span 4; grid-row: span 4; }
@keyframes enter { from { opacity: 0; transform: perspective(900px) translateX(60px) rotateY(-55deg); } }

.flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.tile.flipped .flip { transform: rotateX(-180deg); }
.face { position: absolute; inset: 0; padding: 12px; overflow: hidden;
  background: var(--c); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; }
.face::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%, rgba(0,0,0,.14)); }
.back { transform: rotateX(180deg); background: color-mix(in srgb, var(--c) 78%, #000); justify-content: flex-end; gap: 6px; }
.tile:hover .face, .tile:focus-visible .face { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* product tiles: never flip. A photo tinted in the product's colour, the name, and a
   button (large tiles) or an arrow chip (small ones) so it reads as clickable. */
.main .face { justify-content: flex-end; gap: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.photo { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.02);
  transition: opacity .9s, transform 1.4s var(--ease); }
.has-img .photo { opacity: 1; }
.main:hover .photo { transform: scale(1.08); }
.main .face::before { z-index: 1; }
/* the photo keeps its own colours; the product colour sits only behind the text, plus a strip along the top */
.main.has-img .face::before { background:
  linear-gradient(var(--c), var(--c)) top / 100% 4px no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--c) 94%, #000) 0%, color-mix(in srgb, var(--c) 70%, transparent) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 100%); }
.main .face > :not(.photo):not(.chip) { position: relative; z-index: 2; }
.ico { stroke-width: 1.4; }
.main .ico { font-size: 28px; margin-bottom: auto; }
.main.L .ico { font-size: 44px; }
.main .name { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.main.L .name { font-size: 28px; font-weight: 400; line-height: 1.1; }
.main.S .name, .main.W .name { padding-right: 38px; }
.main .desc { font-size: 13px; opacity: .92; padding-right: 38px; }
.main.L .desc { font-size: 15px; padding-right: 0; max-width: 30ch; }
.btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px;
  background: #fff; color: #0b0f17; font-size: 14px; font-weight: 600; text-shadow: none; transition: gap .2s var(--ease); }
.btn svg { stroke-width: 2.2; }
.main:hover .btn { gap: 13px; }
/* a tile with more than one link (TMS): the name's link covers the tile, the buttons sit on top */
.multi .face > * { pointer-events: none; }
.multi .tile-link { position: static !important; color: inherit; text-decoration: none; pointer-events: auto; }
.multi .tile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.multi .tile-link:focus-visible { outline: none; }
.multi .tile-link:focus-visible::after { outline: 2px solid #fff; outline-offset: 3px; }
.multi .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; z-index: 3; pointer-events: auto; }
.multi .btns .btn { margin-top: 0; text-decoration: none; }
.multi:hover .btn { gap: 8px; }
.multi .btn:hover { gap: 13px; }
.btn.ghost { background: rgba(10, 13, 20, .35); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.btn.ghost:hover { background: rgba(10, 13, 20, .55); }
.chip { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5); transition: background .2s, color .2s; }
.chip svg { stroke-width: 2.2; }
.main:hover .chip, .main:focus-visible .chip { background: #fff; color: #0b0f17; }

/* back faces of the live tiles */
.back strong { position: relative; font-weight: 400; font-size: 15px; line-height: 1.3; }
.tile.S .back strong { font-size: 13.5px; }
.tile.L .back strong { font-size: 24px; font-weight: 300; line-height: 1.2; }
.back p { position: relative; margin: 0; font-size: 14px; opacity: .85; }
.go { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; opacity: .85; }
.go svg { transition: transform .2s var(--ease); }
.tile:hover .go svg { transform: translateX(3px); }

/* the date tile */
.date .front { justify-content: flex-end; }
.day { font-size: 54px; font-weight: 300; line-height: 1; }
.weekday { font-size: 13px; }
.month { font-size: 22px; font-weight: 300; }
.countdown { font-size: 12px; color: var(--accent); }

/* news and season tiles */
.tile.news .front { flex-direction: column; align-items: stretch; justify-content: space-between; }
.news .kicker { position: relative; display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.news .title { position: relative; font-size: clamp(16px, 1.25vw, 22px); font-weight: 300; line-height: 1.2; }
.season .front { justify-content: flex-end; }
.season .title { position: relative; font-size: 30px; font-weight: 300; line-height: 1.05; }
.season .sub { position: relative; font-size: 14px; opacity: .85; margin-top: 6px; }
.season-halloween .face { background: linear-gradient(165deg, #2b0f3d 0%, #160a1f 60%, #0c0610 100%); }
.season .front.has-season-img { background: linear-gradient(to top, rgba(12,6,16,.92) 0%, rgba(12,6,16,.45) 40%, rgba(12,6,16,0) 70%), var(--season-img) center / cover; }
.season-halloween .title { color: #ff8a2a; }
.pumpkin { position: absolute; right: 14px; top: 16px; width: 120px; height: 120px; animation: glow 3.2s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 18px rgba(255,140,40,.65)); } }
.season-winter .face { background: linear-gradient(165deg, #134a7c, #0b2440); }
.season-remembrance .face { background: linear-gradient(165deg, #3a0e12, #160608); }
.season-newyear .face { background: linear-gradient(165deg, #3b2f0a, #120e03); }

.time { font-size: clamp(18px, 1.5vw, 28px); font-weight: 300; line-height: 1.1; white-space: nowrap; }
.date .back .month { font-size: 13px; }

/* system status: one panel. A headline for the whole family on the left, one row per
   service on the right, each linking to its status page. */
.status-group { flex-basis: 100%; }
.status-panel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 8px 28px; align-items: center;
  max-width: calc(12 * var(--cell) + 11 * var(--gap)); padding: 16px 18px;
  background: rgba(14, 19, 30, .88); border: 1px solid rgba(255,255,255,.09); border-left: 4px solid var(--sp, #6f798c);
  animation: enter .7s var(--ease) both; animation-delay: .5s; }
.status-panel[data-overall="operational"] { --sp: #3ad07a; }
.status-panel[data-overall="degraded"] { --sp: #f5b83d; }
.status-panel[data-overall="outage"] { --sp: #ff5a5a; }
.sp-summary { display: flex; align-items: center; gap: 14px; }
.sp-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--sp, #6f798c) 22%, transparent); color: var(--sp, #6f798c); }
.sp-icon svg { width: 26px; height: 26px; stroke-width: 2.4; }
.sp-bad { display: none; }
.status-panel:is([data-overall="degraded"], [data-overall="outage"], [data-overall="unknown"]) .sp-ok { display: none; }
.status-panel:is([data-overall="degraded"], [data-overall="outage"], [data-overall="unknown"]) .sp-bad { display: inline; }
.sp-title { display: block; font-size: 17px; font-weight: 600; }
.sp-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.sp-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px;
  color: #e3e8f1; text-decoration: none; font-size: 13.5px; }
.sp-item:hover, .sp-item:focus-visible { background: rgba(255,255,255,.07); }
.sp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-item em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #6f798c; }
[data-state="operational"] .dot { background: #3ad07a; box-shadow: 0 0 0 3px rgba(58,208,122,.18); }
[data-state="operational"] em { color: #7fe3a8; }
[data-state="degraded"] .dot { background: #f5b83d; }
[data-state="degraded"] em { color: #f8cf74; }
[data-state="outage"] .dot { background: #ff5a5a; animation: alarm 1.2s ease-in-out infinite; }
[data-state="outage"] em { color: #ff8a8a; }
@keyframes alarm { 50% { box-shadow: 0 0 0 5px rgba(255,90,90,.3); } }
@media (max-width: 900px) {
  .status-panel { grid-template-columns: 1fr; }
  .sp-list { grid-template-columns: 1fr; }
}

/* the wallpaper photo; the drawn sky and hills are the fallback */
.wallpaper { position: absolute; inset: 0; background: var(--wall, none) center / cover no-repeat; opacity: 0; transition: opacity 1.4s; }
.wallpaper::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70vw 60vh at 75% 0%, var(--glow), transparent 70%),
    linear-gradient(to bottom, rgba(7,9,16,.80), rgba(7,9,16,.58) 45%, rgba(7,9,16,.90)); }
body.has-wall .wallpaper { opacity: 1; }
body.has-wall .stars, body.has-wall .hills, body.has-wall .season-art { display: none; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: 0 clamp(16px, 5vw, 96px) calc(var(--band-h) + 32px); color: var(--muted); font-size: 12px; }

.credits a { color: var(--muted); }
.credits a:hover { color: var(--ink); }

/* phones: one group per row, tiles fill the width */
@media (max-width: 720px) {
  :root { --cell: calc((100vw - 32px - 3 * var(--gap)) / 4); }
  .top { flex-direction: column; }
  .account { text-align: left; flex-direction: row-reverse; }
  .start { gap: 28px; }
  .group { width: 100%; }
  .main.L .name { font-size: 24px; }
  .tile.L .back strong { font-size: 20px; }
  .season .title { font-size: 26px; }
  .pumpkin { width: 92px; height: 92px; }
  .hills { height: 18vh; }
  body[data-season="halloween"] .season-art { background-image: radial-gradient(circle at 86% 40px, #ffe9c2 0 20px, rgba(255,200,120,.2) 21px 23px, transparent 56px); background-size: auto; }
  body[data-season="halloween"] .season-art::before { display: none; }
}

/* reduced motion: no entrance, no auto flips; hover crossfades instead of turning */
@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; transition: none; }
  .flip { transition: none; transform: none !important; }
  .back { transform: none; opacity: 0; transition: opacity .2s; }
  .tile.flipped .back { opacity: 1; }
  .pumpkin, .season-art, .season-art::before, .dot, .marquee-track { animation: none !important; }
  .photo { transition: opacity .3s; transform: none !important; }
}
.has-season-img .pumpkin { display: none; }

/* weather tile */
.tile.wx { grid-column: span 4; grid-row: span 3; }
.wx .face { gap: 2px; justify-content: flex-start; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 100%, #fff 8%), color-mix(in srgb, var(--c) 70%, #000)); }
.wx[data-sky="day-clear"] { --c: #1f6fc4; }
.wx[data-sky="day-cloud"] { --c: #3f5a78; }
.wx[data-sky="night"] { --c: #1b2a4a; }
.wx[data-sky="wet"] { --c: #2c4560; }
.wx[data-sky="snow"] { --c: #4d6a88; }
.wx[data-sky="storm"] { --c: #3b2d55; }
.wx-where { position: relative; font-size: 13px; opacity: .85; }
.wx-now { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.wx-ico { font-size: 46px; stroke-width: 1.3; }
.wx-temp { font-size: 52px; font-weight: 300; line-height: 1; }
.wx-temp small { font-size: 16px; opacity: .75; margin-left: 6px; }
.wx-cond { position: relative; font-size: 16px; }
.wx-meta { position: relative; font-size: 12.5px; opacity: .85; line-height: 1.5; }
.wx-alert { position: relative; margin-top: auto; align-self: flex-start; padding: 5px 9px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.14); border-left: 3px solid #7dffb0; }
.wx-alert[data-level="warn"] { border-left-color: #ffd27a; }
.wx-alert[data-level="danger"] { border-left-color: #ff6b6b; background: rgba(255,80,80,.18); }

/* trucking news tile */
.tile.tnews { grid-column: span 4; grid-row: span 7; }
.tnews .face { background: rgba(14, 19, 30, .9); border: 1px solid rgba(255,255,255,.09); padding: 6px 12px 10px; }
.tnews .face::before { display: none; }
.tnews-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.tnews-list li + li { border-top: 1px solid rgba(255,255,255,.08); }
.tnews-list a { display: block; padding: 9px 0; color: #e7ecf5; text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.tnews-list a:hover, .tnews-list a:focus-visible { color: #fff; }
.tnews-list a:hover .tnews-title { text-decoration: underline; text-underline-offset: 2px; }
.tnews-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tnews-when { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.tnews-empty { padding: 10px 0; color: var(--muted); font-size: 13px; }
.tnews-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 11px; background: #fff; color: #0b0f17; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.tnews-more:hover { gap: 10px; }

/* "Works with": the integrations, on cards, gliding slowly from right to left along
   the bottom of the screen. Hover holds it still. */
.partners { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--band-h);
  display: flex; align-items: center; gap: 18px; padding-left: clamp(16px, 5vw, 96px);
  background: rgba(8, 10, 16, .82); border-top: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.partners-label { flex: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.marquee { flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; width: max-content;
  animation: glide 70s linear infinite; }
.partners:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { flex: none; display: grid; place-items: center; width: 132px; height: 42px; padding: 8px 14px; background: #fbfbf9; }
.marquee-track img { max-width: 100%; max-height: 24px; width: auto; height: auto; object-fit: contain; }
@keyframes glide { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .partners { position: static; padding-left: 16px; }
  .foot { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
}
.foot-note { font-size: 11px; }

/* header actions: book a demo, log in */
.top-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.demo-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; background: #fff; color: #0b0f17;
  font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .2s var(--ease); }
.demo-btn svg { font-size: 18px; stroke-width: 1.8; }
.demo-btn:hover { transform: translateY(-1px); }
.demo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 720px) {
  .top-actions { flex-direction: row-reverse; justify-content: flex-end; }
}

/* talk to us */
.tile.contact { grid-column: span 4; grid-row: span 4; }
.contact .face { justify-content: center; gap: 8px; padding: 14px 16px; }
.contact-lead { position: relative; font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.contact-line { position: relative; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; }
.contact-line svg { font-size: 18px; stroke-width: 1.8; }
.contact-line:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact .btns { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contact .btn { margin-top: 0; text-decoration: none; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }