/* ============================================================
   mijnspel.com — marketing site
   Builds on colors_and_type.css, which owns the tokens and the
   element defaults. This file owns layout and components only.
   Sections: 1 page tokens · 2 base · 3 buttons · 4 top bar ·
   5 language menu · 6 hero · 7 sections · 8 plans · 9 FAQ ·
   10 footer · 11 responsive · 12 motion
   ============================================================ */

/* ---- 1. Page-level tokens ---------------------------------- */
:root {
  --site-max-width: 1080px;
  --site-gutter: clamp(var(--s-3), 4vw, var(--s-5));
  --topbar-height: 68px;

  /* Large surfaces (hero card, sunken bands) sit one step above --r-card. */
  --r-panel: 24px;

  /* Vertical rhythm. Sections get --section-space above and below, so two
     stacked sections sit 2x apart (144px on desktop, 96px on phones); the
     largest gap inside a section is --section-gap, a third of that. */
  --section-space: clamp(var(--s-7), 6vw, 72px);
  --section-gap: var(--s-7);

  /* Marketing type — one step larger than the app scale. */
  --t-hero:       700 clamp(42px, 5.4vw, 68px)/1.02 var(--font-display);
  --t-section:    700 clamp(30px, 4vw, 44px)/1.1 var(--font-display);
  --t-section-sm: 700 clamp(28px, 3vw, 36px)/1.15 var(--font-display);
  --t-eyebrow:  700 13px/1.2 var(--font-sans);
  --t-wordmark: 700 22px/1 var(--font-display);
  --t-nav:      700 14px/1 var(--font-sans);

  /* Translucent top bar; the plain fallback keeps older browsers readable. */
  --bg-topbar: var(--bg-page);
  --bg-topbar: color-mix(in srgb, var(--bg-page) 92%, transparent);
}

/* ---- 2. Base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  padding: 0 var(--site-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--t-body);
}
[id] { scroll-margin-top: calc(var(--topbar-height) + var(--s-5)); }
[hidden] { display: none !important; }

/* The wrapper spans the body; each block centres itself at the site width,
   so a block can also bleed to the viewport edges (see .band and .topbar). */
.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main-content { display: flex; flex-direction: column; }
.main-content > section,
.site-footer {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
}
.main-content:focus { outline: none; }

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 30;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-900);
  border: 2px solid var(--paper-100);
  border-radius: var(--r-2);
  color: var(--fg-inverse);
  font: var(--t-button);
  transform: translateY(calc(-100% - var(--s-4)));
  transition: transform var(--dur-1) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline-color: var(--paper-100); border-radius: var(--r-2); }

/* ---- 3. Buttons ------------------------------------------- */
/* One base, three variants. Links get the global underline from
   colors_and_type.css, so every variant sets its own border colours. */
.btn {
  min-height: var(--hit-min);
  padding: 0 var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font: var(--t-button);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn-primary {
  background: var(--spark-700);
  border-color: var(--spark-700);
  color: var(--fg-inverse);
}
.btn-primary:hover {
  background: var(--spark-800);
  border-color: var(--spark-800);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--fg-1);
}
.btn-secondary:hover {
  background: var(--bg-sunken);
  border-color: var(--border-strong);
}
.btn-pill {
  padding: 0 var(--s-4);
  background: var(--bg-surface);
  border-color: var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--fg-1);
}
.btn-pill:hover {
  background: var(--bg-sunken);
  border-color: var(--fg-2);
}
.btn-lg { min-height: 48px; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- 4. Top bar ------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-inline: calc(-1 * var(--site-gutter));
  padding: var(--s-3) var(--site-gutter);
  background: var(--bg-topbar);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hair);
}
.topbar-inner {
  max-width: var(--site-max-width);
  min-height: calc(var(--topbar-height) - 2 * var(--s-3));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.wordmark {
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  border: 0;
  color: var(--fg-1);
  font: var(--t-wordmark);
  letter-spacing: -0.02em;
}
.wordmark .dot { color: var(--spark-500); }
.topnav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav-links { display: flex; align-items: center; gap: var(--s-2); }
.nav-link {
  min-height: var(--hit-min);
  padding: 0 var(--s-3);
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--r-2);
  color: var(--fg-2);
  font: var(--t-nav);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-link:hover { background: var(--bg-sunken); color: var(--fg-1); }

/* ---- 5. Language menu (mirrors the MijnSpel apps) ---------- */
.ms-language-menu { position: relative; color: var(--fg-2); }
.ms-language-menu summary {
  min-width: 68px;
  min-height: var(--hit-min);
  padding: 0 var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font: 800 12px/1 var(--font-sans);
  letter-spacing: .04em;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ms-language-menu summary::-webkit-details-marker { display: none; }
.ms-language-menu summary:hover { background: var(--bg-sunken); border-color: var(--fg-2); }
.ms-language-menu[open] summary { background: var(--bg-sunken); border-color: var(--sky-600); }
.ms-language-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ms-language-chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-1) var(--ease-out);
}
.ms-language-menu[open] .ms-language-chevron { margin-top: 3px; transform: rotate(225deg); }
.ms-language-popover {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  z-index: 20;
  width: 168px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
}
.ms-language-popover button {
  width: 100%;
  min-height: var(--hit-min);
  padding: var(--s-2) var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--fg-2);
  font: var(--t-body-sm);
  text-align: left;
  cursor: pointer;
}
.ms-language-popover button:hover { background: var(--bg-sunken); color: var(--fg-1); }
.ms-language-popover button[aria-current="true"] { background: var(--sky-100); color: var(--sky-600); font-weight: 800; }
.ms-language-popover button:disabled { cursor: wait; opacity: .65; }

/* ---- 6. Hero ---------------------------------------------- */
.hero {
  min-height: clamp(520px, 78vh, 760px);
  padding: var(--section-space) 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  align-content: center;
  align-items: center;
  gap: clamp(var(--s-7), 7vw, 88px);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.hero h1 {
  font: var(--t-hero);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-subtitle {
  max-width: 34em;
  margin-top: var(--s-2);
  font: var(--t-body-lg);
  color: var(--fg-2);
  text-wrap: pretty;
}
.hero-actions {
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero-demo-icon { display: none; }

/* Eyebrow: a plain sentence-case label, per the design system's
   "labels are sentence case, not UPPER". No ornament. */
.eyebrow {
  display: block;
  color: var(--spark-700);
  font: var(--t-eyebrow);
}

/* The prototype loop: three tiles on a ring (rules sheet, board, version
   card), arcs with arrowheads between them. One set of tiles, coloured only
   through the design tokens. On load the ring draws itself once, the piece
   on the board moves, and v1 becomes v2 when the loop reaches Improve. */
.loop {
  --loop-start: .5s;      /* pause before the sequence begins */
  --loop-beat: 1.4s;      /* one arc plus the tile it lands on */
  --loop-draw: .9s;
  /* The figure stretches to the hero row, whose height the copy sets, and
     the SVG scales to fit inside it: the diagram is always as tall as the
     text block beside it. The absolute child adds nothing to the row. */
  position: relative;
  align-self: stretch;
  width: 100%;
  margin: 0;
}
/* Tapping or clicking the finished diagram replays it (see loop.mjs). */
@media (prefers-reduced-motion: no-preference) {
  .loop { cursor: pointer; }
}
.loop { -webkit-tap-highlight-color: transparent; user-select: none; }
.loop-diagram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.loop-label { fill: var(--fg-1); font: 700 14px var(--font-sans); }
.loop-arcs-mobile, .loop-mobile-caption, .loop-mobile-return { display: none; }

/* Ring */
.loop .arc {
  fill: none;
  stroke: var(--ink-300);
  stroke-width: 2;
  stroke-linecap: round;
  /* The gap is longer than the path so the hidden dash's round cap
     cannot peek out at the arrowhead before the arc is drawn. */
  stroke-dasharray: 100 120;
  stroke-dashoffset: 0;
}
.loop .head {
  fill: none;
  stroke: var(--ink-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tiles */
.loop .tile-bg { fill: var(--bg-surface); stroke: var(--border-hair); filter: url(#loop-shadow); }
.loop .tile-ring { fill: none; stroke-width: 3; opacity: 0; }
.loop .tile-describe .tile-ring { stroke: var(--spark-400); }
.loop .tile-play .tile-ring { stroke: var(--sky-500); }
.loop .tile-improve .tile-ring { stroke: var(--grass-500); }

.loop .ink { fill: var(--ink-700); }
.loop .line { fill: var(--paper-400); }
.loop .pencil { fill: var(--spark-500); }
.loop .pencil-band { fill: var(--spark-800); }
.loop .pencil-tip { fill: var(--ink-700); }
.loop .board { fill: var(--sky-600); }
.loop .grid { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.loop .hot { fill: rgba(255, 255, 255, .22); }
.loop .token-a { fill: var(--spark-500); stroke: var(--paper-100); stroke-width: 2; transform: translate(14px, 0); }
.loop .token-b { fill: var(--sun-500); stroke: var(--paper-100); stroke-width: 2; }
.loop .card { fill: var(--paper-100); stroke: var(--paper-400); stroke-width: 1.5; }
.loop .card-back .card { fill: var(--paper-200); }
.loop .v-old { fill: var(--ink-300); font: 800 9px var(--font-sans); }
.loop .v-before, .loop .v-after { fill: var(--ink-900); font: 800 19px var(--font-sans); transform-box: fill-box; transform-origin: center; }
.loop .v-before { opacity: 0; }
.loop .badge circle { fill: var(--grass-500); stroke: var(--paper-100); stroke-width: 2; }
.loop .badge .check { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.loop .badge { transform-box: fill-box; transform-origin: center; }

/* Sequence. Base styles above are the finished state; each keyframe starts
   from the initial state and fills backwards, so the delay shows the start.
   Longhands only: a shorthand would reset the shared fill mode. */
.loop .arc, .loop .head, .loop .tile-ring, .loop .token-a,
.loop .card-back, .loop .v-before, .loop .v-after, .loop .badge {
  animation-fill-mode: both;
  animation-timing-function: var(--ease-snap);
}
.loop .arc { animation-name: loop-draw; animation-duration: var(--loop-draw); }
.loop .head { animation-name: loop-appear; animation-duration: .2s; }
.loop .tile-ring { animation-name: loop-pulse; animation-duration: 1s; animation-timing-function: ease-in-out; }
.loop .token-a { animation-name: loop-hop; animation-duration: .45s; }
.loop .v-before { animation-name: loop-fade-out; animation-duration: .25s; }
.loop .card-back { animation-name: loop-slide-back; animation-duration: .4s; }
.loop .v-after, .loop .badge { animation-name: loop-pop; animation-duration: .4s; }

.loop .tile-describe .tile-ring { animation-delay: var(--loop-start); }
.loop .arc-1  { animation-delay: calc(var(--loop-start) + .5s); }
.loop .head-1 { animation-delay: calc(var(--loop-start) + var(--loop-beat) - .1s); }
.loop .tile-play .tile-ring { animation-delay: calc(var(--loop-start) + var(--loop-beat)); }
.loop .token-a { animation-delay: calc(var(--loop-start) + var(--loop-beat) + .25s); }
.loop .arc-2  { animation-delay: calc(var(--loop-start) + var(--loop-beat) + .5s); }
.loop .head-2 { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 - .1s); }
.loop .tile-improve .tile-ring { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2); }
.loop .v-before  { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 + .3s); }
.loop .card-back { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 + .3s); }
.loop .v-after   { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 + .4s); }
.loop .badge     { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 + .6s); }
.loop .arc-3  { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 2 + .5s); }
.loop .head-3 { animation-delay: calc(var(--loop-start) + var(--loop-beat) * 3 - .1s); }

@keyframes loop-draw { from { stroke-dashoffset: 102; } }
@keyframes loop-appear { from { opacity: 0; } }
@keyframes loop-pulse { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes loop-hop { from { transform: translate(0, 0); } }
@keyframes loop-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes loop-slide-back { from { opacity: 0; transform: translate(-10px, 12px); } }
@keyframes loop-pop { from { opacity: 0; transform: scale(.6); } }

/* ---- 7. Content sections ---------------------------------- */
.content-section { padding: var(--section-space) 0; }
.main-content > section + section { border-top: 1px solid var(--border-hair); }
.section-heading { max-width: 680px; margin-bottom: var(--section-gap); }
.section-heading .eyebrow { margin-bottom: var(--s-3); }
.section-heading h2 { font: var(--t-section); text-wrap: balance; }

/* Full-bleed ink band: the page's one dark moment. It runs to the viewport
   edges; its content stays on the site grid. Band edges replace hairlines. */
.main-content > .band {
  width: auto;
  max-width: none;
  margin-inline: calc(-1 * var(--site-gutter));
  padding-inline: var(--site-gutter);
  background: var(--ink-900);
  color: var(--fg-inverse);
}
.main-content > .band,
.main-content > .band + section { border-top: 0; }
.band-inner { max-width: var(--site-max-width); margin-inline: auto; }
.band .eyebrow { color: var(--spark-400); }
.band h2 { color: inherit; }
.band p { color: var(--paper-300); }

.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  counter-reset: process;
}
.process-item { counter-increment: process; }
.process-item::before {
  content: "0" counter(process);
  display: block;
  margin-bottom: var(--s-4);
  color: var(--spark-700);
  font: 700 32px/1 var(--font-display);
  letter-spacing: -0.02em;
}
.process-item h3 { margin-bottom: var(--s-2); font: var(--t-h3); }
.process-item p { color: var(--fg-2); font: var(--t-body); text-wrap: pretty; }

.demo-layout {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(var(--s-6), 6vw, var(--s-8));
}
.demo-copy .eyebrow { margin-bottom: var(--s-3); }
.demo-copy h2 { margin-bottom: var(--s-3); font: var(--t-section); text-wrap: balance; }
.demo-copy p { font: var(--t-body); text-wrap: pretty; }
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-700);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- 8. Plans --------------------------------------------- */
/* Two cards at a normal pricing width; subgrid keeps the header, feature
   list and button rows level across them. */
/* The pricing block is centred, heading included, as pricing sections
   conventionally are; the cards keep left-aligned text. */
.plans-section { text-align: center; }
.plans-heading { max-width: none; margin-bottom: var(--section-gap); }
.home-plans {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  text-align: left;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.home-plan {
  padding: var(--s-6);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.home-plan.pro { background: var(--bg-tinted); border-color: var(--spark-200); }
.plan-header { display: flex; flex-direction: column; gap: var(--s-2); }
.plan-name { color: var(--fg-1); font: var(--t-h3); }
.home-plan.pro .plan-name { color: var(--spark-800); }
.plan-price {
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}
.plan-price .amount { color: var(--fg-1); font: 700 32px/1 var(--font-display); letter-spacing: -0.01em; }
.plan-price .interval,
.plan-price .price-status { color: var(--fg-3); font: var(--t-body-sm); }
.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-link);
  font: var(--t-body-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.plan-limit { color: var(--fg-2); font: var(--t-body); }
.plan-features {
  margin: 0;
  padding: var(--s-5) 0 0;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  border-top: 1px solid var(--border-hair);
  list-style: none;
  color: var(--fg-1);
  font: var(--t-body);
}
.home-plan.pro .plan-features { border-top-color: var(--spark-200); }
.plan-features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: var(--s-2);
}
.plan-features li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--grass-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-action { align-self: end; }

/* ---- 9. FAQ ----------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr);
  gap: clamp(var(--s-6), 8vw, var(--s-9));
}
.faq-heading h2 { font: var(--t-section-sm); text-wrap: balance; }
.faq-list { border-top: 1px solid var(--border-default); }
.faq-list details { border-bottom: 1px solid var(--border-default); }
.faq-list summary {
  position: relative;
  min-height: 64px;
  padding: var(--s-4) var(--s-7) var(--s-4) 0;
  list-style: none;
  cursor: pointer;
  color: var(--fg-1);
  font: 700 16px/1.35 var(--font-sans);
  transition: color var(--dur-1) var(--ease-out);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--spark-800); }
/* Plus made from two bars; the vertical bar folds flat when open. */
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: var(--s-2);
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--spark-700);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0); }
.faq-list details p {
  max-width: 60ch;
  padding: 0 var(--s-7) var(--s-5) 0;
  color: var(--fg-2);
  font: var(--t-body);
  text-wrap: pretty;
}

/* ---- 10. Footer ------------------------------------------- */
.site-footer {
  padding: var(--s-6) 0 var(--s-7);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  border-top: 1px solid var(--border-hair);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.footer-about { max-width: 40em; color: var(--fg-3); font: var(--t-body-sm); text-wrap: pretty; }
.footer-note { color: var(--fg-muted); font: var(--t-caption); }
.footer-links { padding-top: var(--s-3); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.footer-links a { color: var(--fg-2); font: var(--t-body-sm); }
.footer-links a:hover { color: var(--fg-1); border-bottom-color: currentColor; }

/* ---- 11. Responsive --------------------------------------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: var(--s-5) calc(var(--s-5) - var(--site-gutter)) var(--s-6);
    gap: var(--s-5);
    text-align: center;
  }
  .hero-copy { width: 100%; max-width: 480px; margin-inline: auto; align-items: center; gap: 0; }
  .hero-copy .eyebrow { display: none; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 38px); line-height: 1.08; letter-spacing: -0.025em; }
  .hero-subtitle { margin-top: var(--s-4); font: var(--t-body); }
  .hero-actions { width: 100%; padding-top: var(--s-5); flex-direction: column; gap: var(--s-2); }
  .hero-actions .btn-secondary { background: transparent; border-color: transparent; }
  .hero-actions .btn-secondary:hover { background: var(--bg-sunken); }
  .hero-demo-icon { display: block; }
  /* Stacked, the loop leads (visual order only; the headline stays first in
     the document). The shallow viewport crops the unused ring canvas. */
  .loop { order: -1; align-self: auto; max-width: 360px; margin: 0 auto; }
  .loop-art { position: relative; aspect-ratio: 320 / 90; overflow: clip; }
  .loop-diagram { height: auto; }
  .loop-arcs-desktop, .loop-label { display: none; }
  .loop-arcs-mobile { display: block; }
  .loop .tile-describe { transform: translate(38.1px, 72px) scale(.8); }
  .loop .tile-play { transform: translate(144.8px, 72px) scale(.8); }
  .loop .tile-improve { transform: translate(251.5px, 72px) scale(.8); }
  .loop-mobile-caption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font: var(--t-eyebrow); }
  .loop-mobile-return { display: block; grid-column: 1 / -1; width: calc(200% / 3); height: 28px; margin: var(--s-2) auto 0; }
  .process-list { grid-template-columns: 1fr; gap: var(--s-5); }
  .demo-layout, .faq-layout { grid-template-columns: 1fr; }
  .demo-copy { max-width: 620px; }
}

@media (max-width: 700px) {
  .topbar { padding-inline: var(--s-5); }
  .topnav { gap: var(--s-2); }
  .btn-pill { padding: 0 var(--s-3); border-color: var(--border-hair); }
  .ms-language-menu summary { min-width: var(--hit-min); padding-inline: var(--s-2); background: transparent; border-color: transparent; }
  .ms-language-icon { display: none; }
  .section-heading { margin-bottom: var(--s-6); }
  .demo-layout, .faq-layout { gap: var(--s-6); }
  .home-plans { grid-template-columns: 1fr; }
  .home-plan { padding: var(--s-5); gap: var(--s-4); }
  .site-footer { flex-direction: column; align-items: flex-start; padding-top: var(--s-5); }
  .footer-links { padding-top: 0; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

@media (max-width: 380px) {
  .topbar { gap: var(--s-2); }
  .topnav { gap: 6px; }
  .wordmark { font-size: 20px; }
  .ms-language-popover { right: auto; left: 0; width: 160px; }
  .btn-pill { padding: 0 var(--s-2); }
  .btn-pill svg { display: none; }
}

/* ---- 12. Motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}