/* Spot AI landing page: Studio house style (Floris, 20 Oct 2026; DESIGN.md) at marketing scale.
   White ground, black ink, Geist for everything. Spot Blue #008CFE marks what you can do (buttons, links, icons) and
   the spot (dots, the scan line); Floris chose this accent on 20 Oct 2026. The pictures are real screenshots
   of Spot with a made-up agency; whitespace separates the sections, not lines or frames. Five type sizes.
   Self-hosted fonts, no external resources (CSP is self only).
   avoid-ai-design-ignore-file: T2 (Geist is the Spot AI house face, kept by Floris on 20 Oct 2026) */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FFFFFF;
  --soft-2: #FAFAFA;
  --ink: #000000;
  --ink-2: #333333;
  --muted: #6F6F6F;
  --line: #EAEAEA;
  --line-strong: #D4D4D4;
  --blue: #008CFE;          /* Spot Blue: icons, dots, the scan line, the steps track, selection */
  --blue-text: #0070E0;     /* buttons and links: white on it, and it on white, read at 4.8:1 */
  --blue-deep: #0058B3;     /* hover */

  /* the type scale: small, body, large, section heading, page heading */
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 19px;
  --t-h2: clamp(1.875rem, 1.2rem + 2vw, 3rem);
  --t-h1: clamp(2.375rem, .9rem + 5.4vw, 6rem);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --head: 64px;
  --frame: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --space: clamp(80px, 10vw, 144px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--blue); color: #fff; }
img { max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
svg { flex: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 30; background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 500; border-radius: 8px; }
.skip:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ buttons and links */
.btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 10px;
  background: var(--blue-text); color: #fff; font-weight: 500; font-size: var(--t-base); white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease, transform .14s var(--ease);
}
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } /* taste-skill-ignore: the outline of a secondary button */
.btn.ghost:hover { background: var(--soft-2); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } /* taste-skill-ignore: button outline */
.btn.small { height: 34px; padding: 0 12px; font-size: var(--t-sm); border-radius: 8px; }
.tlink { display: inline-block; font-weight: 500; color: var(--blue-text); text-decoration: underline; text-decoration-color: rgba(0, 112, 224, .35); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
.tlink:hover, .tlink:focus-visible { color: var(--blue-deep); text-decoration-color: var(--blue-deep); }

/* ------------------------------------------------------------ header */
.lp-head { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); } /* taste-skill-ignore: edge of the sticky bar */
.lp-head .wrap { display: flex; align-items: center; gap: 32px; height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); margin: 0; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 22px; height: 22px; display: block; }
.brand .word { font-weight: 600; font-size: 23px; line-height: 1; letter-spacing: -.06em; }
.lp-nav { display: flex; gap: 26px; margin-left: auto; }
.lp-nav a { color: var(--ink-2); font-size: var(--t-sm); }
.lp-nav a:hover { color: var(--ink); }
.lp-actions { display: flex; align-items: center; gap: 8px; }
.lp-actions .login { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-weight: 500; font-size: var(--t-sm); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s ease; } /* taste-skill-ignore: button outline */
.lp-actions .login:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } /* taste-skill-ignore: button outline */

/* ------------------------------------------------------------ hero: the sentence, then straight into the product */
.hero { padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 5vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 56px; align-items: end; }
h1 {
  grid-column: 1 / -1; font-weight: 600; font-size: var(--t-h1);
  line-height: .96; letter-spacing: -.065em;
}
.lede { grid-column: 1; margin-top: 40px; max-width: 56ch; font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; }
.hero .cta-row { grid-column: 2; margin-top: 0; }

/* ------------------------------------------------------------ sections */
.sec > .wrap { padding-block: var(--space) 0; }
.sec:last-of-type > .wrap, .sec.dark > .wrap, .sec.about > .wrap { padding-bottom: var(--space); }
h2 { font-weight: 600; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.055em; }
h3 { font-weight: 600; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.03em; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px 64px; align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-head p, .sec-lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.sec-head p + p { margin-top: 14px; }
.sec-head.after { margin: clamp(40px, 5vw, 64px) 0 0; }
/* a longer explanation next to the heading gets the wider column */
.sec-head.long { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.sec-head.long p { max-width: 54ch; }
.sec-lede { margin-top: 20px; }
.sec-lede + .sec-lede { margin-top: 14px; }

/* the screenshots: real Spot screens, shown as they are, with a hairline so white meets white */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } /* taste-skill-ignore: edge of a white app screen on a white page */
figcaption { margin-top: 12px; font-size: var(--t-sm); color: var(--muted); }

#health-check > .wrap { padding-top: 0; }

/* what it brings */
.gain { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.gain-intro .sec-lede { max-width: 34ch; }
.gain-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 48px; }
.gain-list h3, .steps h3, .feat-list h3, .feat-row h3 { margin-bottom: 8px; }
.ic { display: block; width: 22px; height: 22px; color: var(--blue); }
.gain-list > div, .feat-list > div, .feat-row > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.gain-list > div > .ic, .feat-list > div > .ic, .feat-row > div > .ic { grid-row: 1 / span 2; margin-top: 1px; }
.gain-list > div > :not(.ic), .feat-list > div > :not(.ic), .feat-row > div > :not(.ic) { grid-column: 2; }
.facts dt { display: flex; align-items: flex-start; gap: 12px; }
.facts dt .ic { flex: none; margin-top: 1px; }
.gain-list p, .steps p, .feat-list p, .feat-row p { color: var(--ink-2); max-width: 44ch; }

/* how it works: four steps in order, left to right */
#hoe h2 { margin-bottom: clamp(36px, 4.5vw, 56px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 48px; }

/* what else is in Spot */
#functies h2 { margin-bottom: clamp(36px, 4.5vw, 56px); }
.feat-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(40px, 5vw, 72px); align-items: start; }
.feat-list { display: grid; gap: 40px; padding-top: 8px; }
.feat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: clamp(56px, 6vw, 88px); }

/* security: the one black block, a plain list of facts */
.dark { margin-top: var(--space); background: #000; color: #fff; }
.dark h2 { color: #fff; }
.sec-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.sec-intro p { margin-top: 20px; font-size: var(--t-lg); line-height: 1.5; color: #B8B8B8; max-width: 34ch; }
.facts { margin: 0; display: grid; gap: 30px; }
.facts > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 6px 32px; }
.facts dt { font-size: var(--t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; color: #fff; }
.facts dd { margin: 0; color: #B8B8B8; max-width: 52ch; }

/* questions */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faq { border-top: 1px solid var(--line-strong); } /* taste-skill-ignore: accordion rows */
.faq details { border-bottom: 1px solid var(--line); } /* taste-skill-ignore: accordion rows */
.faq summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-text); }
.faq .pm { width: 18px; height: 18px; margin-top: 2px; color: var(--blue-text); transition: transform .2s var(--ease); }
.faq details[open] .pm { transform: rotate(45deg); }
.faq details p { padding: 0 42px 22px 0; max-width: 64ch; color: var(--ink-2); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.faq details:not([open]) p { opacity: 0; transform: translateY(-4px); }
/* answers open and close with a smooth height where the browser supports it; elsewhere they simply appear */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* closing call */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.cta .sec-lede { margin-top: 0; max-width: 46ch; }

/* About Spot AI, in English, for Google's and Meta's reviewers */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 80px); }
.about h2 { margin-bottom: 16px; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.03em; }
.about h3 { margin: 0 0 14px; font-size: var(--t-base); letter-spacing: -.01em; }
.about p, .about li { font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch; }
.about p + p { margin-top: 12px; }
.about strong { color: var(--ink); font-weight: 600; }
.about ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.about li { position: relative; padding-left: 18px; }
.about li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.about a { color: var(--blue-text); text-decoration: underline; text-decoration-color: rgba(0, 112, 224, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about a:hover { color: var(--blue-deep); text-decoration-color: var(--blue-deep); }

/* ------------------------------------------------------------ footer */
.lp-foot { font-size: var(--t-sm); color: var(--muted); }
.lp-foot > .foot-grid { padding-top: 24px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
.foot-brand p + p { margin-top: 12px; max-width: 32ch; }
.foot-company { line-height: 1.7; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { margin-top: 48px; padding-bottom: 28px; }
.foot-base p { padding-top: 18px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1060px) {
  .lp-nav { display: none; }
  .lp-actions { margin-left: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gain, .feat-top, .sec-split { grid-template-columns: minmax(0, 1fr); }
  .feat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding-top: 0; }
}
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .cta-row { grid-column: 1; margin-top: 32px; }
  .sec-head, .sec-head.long { grid-template-columns: minmax(0, 1fr); }
  .faq-grid, .about-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-list, .feat-row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --head: 60px; --t-lg: 18px; }
  .lp-actions .btn { display: none; }
  h1 { font-size: min(9.6vw, 2.6rem); }
  .steps, .gain-list { grid-template-columns: minmax(0, 1fr); }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .faq details p { padding-right: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ motion: the morning check
   The motion tells what Spot does, on the real screens: the headline rises, "30" rolls in, and the Vandaag screen
   opens. Scrolling then runs the morning check over it: a blue scan line passes, each client's dot lights up in
   its status colour and the budget bars fill. The proposal's dry run comes in line by line until it is checked
   and Uitvoeren becomes active; a client's charts draw in; the four steps light up in turn. Headings rise line by
   line, lists come in row by row.
   Everything that starts hidden or moved sits under .m, which landing-boot.js sets before the first paint and never
   with prefers-reduced-motion. Without JavaScript (or when a script fails) the page shows its final state.
   Only transform, opacity and clip-path move; strong ease-outs; nothing springs or bounces. */
:root {
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .ln > span { display: block; }
.count { position: relative; display: inline-block; }
.odo { position: absolute; inset: 0; display: flex; justify-content: flex-end; color: var(--ink); pointer-events: none; }
.odo-col { display: block; height: var(--lh); overflow: hidden; }
.odo-reel { display: block; }
.odo-reel::before { content: attr(data-seq); display: block; white-space: pre; line-height: var(--lh); text-align: right; }

/* the screenshots carry a layer for the motion, exactly over the picture (inside its 1px edge) */
.frame { position: relative; }
.layer { position: absolute; inset: 1px; overflow: hidden; border-radius: 11px; pointer-events: none; }
.mk { position: absolute; display: block; }
.mk.dot, .mk.ring { aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.mk.dot { background: #fff; transition: opacity .3s ease; }
.mk.dot::after { content: ""; position: absolute; inset: 21%; border-radius: 50%; background: var(--line-strong); }
.mk.ring { border: 1.5px solid var(--c); }
.mk.ring.rood { --c: #E5484D; } .mk.ring.oranje { --c: #F5A524; } .mk.ring.info { --c: var(--blue); }
.mk.bar { border-radius: 3px; background: #F2F2F2; transform-origin: right; transition: transform .7s var(--ease-expo); }
.mk.band { left: 0; right: 0; top: 0; height: 7%; background: rgba(0, 140, 254, .045); border-bottom: 1.5px solid var(--blue); transition: opacity .3s ease; will-change: transform; } /* taste-skill-ignore: the scan line of the morning check */
.mk.line, .mk.ok { background: #000; }
.mk.line { transform-origin: right; }
.mk.go { border-radius: 8px; background: rgba(250, 250, 250, .74); }
.mk.chart { background: #fff; transform-origin: right; }

@media screen {
  @keyframes lnUp { from { transform: translateY(108%); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
  @keyframes slideUp { from { transform: translateY(14px); } }
  @keyframes openDown { from { clip-path: inset(0 0 100% 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
  @keyframes settle { from { transform: scale(1.035); } }
  @keyframes ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); } }

  /* load: the headline, the sentence, the buttons, then the Vandaag screen opens from the top */
  .m .hero h1 .ln > span { animation: lnUp .9s var(--ease-expo) both; }
  .m .hero h1 .ln:nth-child(1) > span { animation-delay: .08s; }
  .m .hero h1 .ln:nth-child(2) > span { animation-delay: .19s; }
  /* the lede is visible from the first paint (it is the largest text, so it is what LCP measures); it only slides */
  .m .lede { animation: slideUp .9s var(--ease) .1s both; }
  .m .hero .cta-row { animation: fadeUp .8s var(--ease) .38s both; }
  .m .count:not(.done) { color: transparent; animation: countShow 0s 2.4s forwards; }
  @keyframes countShow { to { color: var(--ink); } }
  .m #health-check .frame { animation: openDown 1.2s var(--ease-io) .3s both; }
  .m #health-check .frame img { animation: settle 1.6s var(--ease-expo) .3s both; }

  /* the morning check: lit dots show their real colour, attention dots send out one ring */
  .m .mk.dot.lit, .m .mk.ring:not(.go), .m .mk.band:not(.on) { opacity: 0; }
  .m .mk.ring.go { animation: ring .9s var(--ease) both; }
  .m .mk.bar.lit { transform: scaleX(0); }

  /* the other screenshots open when they come into view */
  .m .frame.op { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1.1s var(--ease-io); }
  .m .frame.op img { transform: scale(1.035); transition: transform 1.5s var(--ease-expo); }
  .m .frame.op.in { clip-path: inset(0 0 0 0 round 12px); }
  .m .frame.op.in img { transform: none; }

  /* the proposal: the dry run arrives line by line, then it is checked, then Uitvoeren is active */
  .m .layer .mk.line { transition: transform .42s var(--ease-io) calc(var(--i) * 70ms); }
  .m .layer.play .mk.line { transform: scaleX(0); }
  .m .layer .mk.ok { transition: opacity .3s ease calc(var(--n) * 70ms + 420ms); }
  .m .layer .mk.go { transition: opacity .4s ease calc(var(--n) * 70ms + 820ms); }
  .m .layer.play .mk.ok, .m .layer.play .mk.go { opacity: 0; }
  /* a client: the three charts draw in from the left */
  .m .layer .mk.chart { transition: transform 1.1s var(--ease-io) calc(var(--i) * 160ms); }
  .m .layer.play .mk.chart { transform: scaleX(0); }

  /* headings rise line by line, the sentence next to them follows, lists come in row by row */
  [data-lines] .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  [data-lines] .line > span { display: block; }
  .m .split .line > span { transform: translateY(110%); }
  .m .split.in .line > span { transform: none; transition: transform .9s var(--ease-expo) calc(var(--i) * 90ms); }
  .m .rv { opacity: 0; transition: opacity .8s ease .28s; }
  .m .rv.in { opacity: 1; }
  .m .stg > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .m .stg.in > * { opacity: 1; transform: none; }
  .m .stg .ic { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-io) calc(var(--i, 0) * 70ms + 260ms); }
  .m .stg.in .ic { stroke-dashoffset: 0; }

  /* how it works, wide screens: a track fills with scrolling and each step's dot lights up in turn */
  .m .steps.track { position: relative; padding-top: 30px; border-top: 1px solid var(--line); } /* taste-skill-ignore: progress track of the four steps */
  .m .steps.track::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--blue); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .m .steps.track > li { position: relative; }
  .m .steps.track > li::before { content: ""; position: absolute; left: 0; top: -35px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 4px var(--bg); transition: background-color .3s ease, transform .45s var(--ease-expo); transform: scale(.7); } /* taste-skill-ignore: white halo so the dot sits on the track */
  .m .steps.track > li.lit::before { background: var(--blue); transform: none; }
  .m .steps.track > li h3, .m .steps.track > li p { transform: translateY(8px); transition: transform .6s var(--ease-expo); }
  .m .steps.track > li.lit h3, .m .steps.track > li.lit p { transform: none; }

  /* the header gets its edge once the page moves under it */
  .m .lp-head { transition: border-color .25s ease; }
  .m .lp-head:not(.scrolled) { border-bottom-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Logo: "AI" small and light next to the word Spot, a subtle addition to the name (Floris, 20 Oct 2026) */
.word .ai { font-size: .4em; font-weight: 700; letter-spacing: .06em; line-height: 1.3; vertical-align: top; margin-left: .2em; opacity: .55; }