/* ===========================================================================
   MerlinDesk — site styles.  One file, no framework, no JavaScript.
   Owned by the design agent.  Pages must not need any markup they do not
   already use: every class below is one the pages already write.
   ---------------------------------------------------------------------------
   Contents: 1 tokens · 2 base · 3 header · 4 buttons · 5 hero + page heads
             6 sections + rhythm · 7 cards · 8 lists · 9 figures · 10 stats
             11 accordion · 12 notes · 13 footer · 14 motion + focus
   ========================================================================= */

/* --- 1. tokens ----------------------------------------------------------- */
:root {
  /* surfaces: --bg is the page, --surface the alternating band,
     --surface-2 the card, which must read above both.              */
  --bg: #ffffff;
  --surface: #f5f6fb;
  --surface-2: #ffffff;
  --line: #e4e7f2;
  --line-strong: #d2d7e8;

  /* ink.  --muted is checked against both --bg and --surface (>= 6:1). */
  --text: #0F2A2E;   /* brand ink */
  --muted: #555c74;
  --faint: #616880;

  /* Brand kit: deep teal #0F2A2E, teal-on-light #0D9488, teal-on-dark #2DD4BF,
     mint #F0FDFA.  The brand teal is a FILL colour, not a text colour: white on
     #0D9488 measures 3.74:1 and fails, so --primary darkens it to #0B7A70 (5.21:1)
     for anything carrying white text, and --accent keeps the true brand teal for
     fills and marks where nothing sits on top. */
  --brand-deep: #0F2A2E;
  --brand-teal: #0D9488;
  --brand-teal-bright: #2DD4BF;
  --brand-mint: #F0FDFA;
  --primary: #0B7A70;
  --primary-700: #096860;
  --primary-tint: #e3f4f1;
  --on-primary: #ffffff;
  --link: #0B7A70;
  --accent: #0D9488;
  --accent-ink: #0a6f67;
  --accent-tint: #e4f3f1;
  --warn: #9a5a0b;
  --warn-edge: #d9881f;
  --focus: #0B7A70;

  --shadow-sm: 0 1px 2px rgba(18,23,40,.05), 0 1px 3px rgba(18,23,40,.04);
  --shadow-md: 0 1px 2px rgba(18,23,40,.05), 0 10px 26px -14px rgba(18,23,40,.26);
  --shadow-lg: 0 2px 4px rgba(18,23,40,.06), 0 28px 60px -26px rgba(18,23,40,.32);
  --ring: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);

  --radius: 16px;
  --radius-sm: 11px;
  --maxw: 1120px;
  --gutter: 20px;
  --sec-y: clamp(60px, 2.6vw + 44px, 100px);

  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1e; --surface: #111728; --surface-2: #161d33;
    --line: #27304c; --line-strong: #323c5c;
    --text: #e9edf9; --muted: #a3adcb; --faint: #8b95b5;
    --primary: #2DD4BF; --primary-700: #5ee0cf; --primary-tint: #11343a;
    --on-primary: #0F2A2E;
    --link: #2DD4BF;
    --accent: #2DD4BF; --accent-ink: #5ee0cf; --accent-tint: #0f2c31;
    --warn: #f0ad4e; --warn-edge: #f0ad4e;
    --focus: #2DD4BF;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 1px 3px rgba(0,0,0,.45), 0 12px 30px -16px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -28px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0f1e; --surface: #111728; --surface-2: #161d33;
  --line: #27304c; --line-strong: #323c5c;
  --text: #e9edf9; --muted: #a3adcb; --faint: #8b95b5;
  --primary: #2DD4BF; --primary-700: #5ee0cf; --primary-tint: #11343a;
  --on-primary: #0F2A2E;
  --link: #2DD4BF;
  --accent: #2DD4BF; --accent-ink: #5ee0cf; --accent-tint: #0f2c31;
  --warn: #f0ad4e; --warn-edge: #f0ad4e;
  --focus: #2DD4BF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 3px rgba(0,0,0,.45), 0 12px 30px -16px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -28px rgba(0,0,0,.9);
}

/* --- 2. base ------------------------------------------------------------- */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;               /* safe with position:sticky, unlike hidden */
}
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--f-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* One soft wash behind the top of every page: it gives the header and the
   first screen some depth without a second accent colour or any image.
   Tall on the home page, short on the inner page heads. */
body::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 380px;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(880px 340px at 15% -60px,
      color-mix(in srgb, var(--primary) 13%, transparent), transparent 72%),
    radial-gradient(760px 320px at 86% -90px,
      color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%);
}
body:has(.hero)::before { height: 780px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background:
      radial-gradient(900px 380px at 15% -60px,
        color-mix(in srgb, var(--link) 20%, transparent), transparent 72%),
      radial-gradient(760px 340px at 86% -90px,
        color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
  }
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.16; letter-spacing: -0.022em; font-weight: 640; }
h1 {
  font-size: clamp(2.2rem, 1.42rem + 2.6vw, 3.4rem);
  letter-spacing: -0.034em; font-weight: 700; line-height: 1.08;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.55rem, 1.16rem + 1.3vw, 2.15rem);
  letter-spacing: -0.028em; font-weight: 680; line-height: 1.18;
  text-wrap: balance;
}
h3 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.014em; line-height: 1.35; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 650; }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }

/* anything with an id is a possible anchor target; clear the sticky header */
[id] { scroll-margin-top: 88px; }

/* icons are inlined as <span class="ico"><svg></span> and inherit colour.
   A default size so an icon dropped into new copy is never 300x150. */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico > svg { width: 20px; height: 20px; display: block; }

/* --- 3. header ----------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  header {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
  }
}
.bar { display: flex; align-items: center; gap: 22px; height: 68px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 680; font-size: 1.09rem; letter-spacing: -0.028em;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo > .ico > svg, .logo svg { width: 30px; height: 30px; }

nav.top { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* `nav.top a` out-specifies `.btn-primary`, so the Sign in button used to take
   the muted grey and sat at 1.06:1 on violet.  Scope it to the plain links. */
nav.top a:not(.btn) {
  position: relative;
  color: var(--muted); font-size: .94rem; font-weight: 500;
  padding: 8px 12px; border-radius: 9px;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
nav.top a:not(.btn):hover {
  color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
nav.top a.here { color: var(--text); font-weight: 600; }
nav.top a.here::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
nav.top .btn { margin-left: 10px; }

@media (max-width: 860px) {
  /* two-row header, no JavaScript: the ::after is a flex item with a 100%
     basis, so it forces the links onto their own line below the brand. */
  .bar { flex-wrap: wrap; height: auto; padding-top: 11px; padding-bottom: 9px; gap: 0; }
  nav.top { display: contents; }
  nav.top .btn { order: 0; margin-left: auto; }
  .bar::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  nav.top a:not(.btn) { order: 2; display: inline-flex; font-size: .84rem;
    padding: 6px 7px; margin-top: 7px; }
  nav.top a:not(.btn):first-child { margin-left: -7px; }
  nav.top a.here::after { left: 7px; right: 7px; bottom: 0; }
}
/* the pages still carry .hide-sm from the old header; it must not hide them now */
nav.top a.hide-sm { display: inline-flex; }

/* --- 4. buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem; letter-spacing: -0.006em;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background-color .17s var(--ease), border-color .17s var(--ease),
              box-shadow .17s var(--ease), transform .17s var(--ease), color .17s var(--ease);
}
.btn-primary {
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(26,20,86,.28), 0 10px 22px -12px color-mix(in srgb, var(--primary) 85%, transparent);
}
.btn-primary:hover {
  background: var(--primary-700); color: var(--on-primary); text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(26,20,86,.3), 0 16px 30px -12px color-mix(in srgb, var(--primary) 85%, transparent);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--surface-2); color: var(--text);
  border-color: var(--line-strong); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--primary); color: var(--text); text-decoration: none;
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn-ghost:active { transform: translateY(0); }
.btn > .ico > svg { width: 18px; height: 18px; }

/* --- 5. hero and page heads ---------------------------------------------- */
/* Never use the `padding` shorthand on a .wrap: it wipes the side gutter and
   pushes the text to the edge of a phone.  Only the vertical sides here. */
.hero { padding-top: clamp(56px, 2.4vw + 44px, 92px); padding-bottom: 8px; text-align: center; }
.hero > .kicker, .hero > h1, .hero > p.lede, .hero > .cta, .hero > .under { margin-left: auto; margin-right: auto; }
.hero > h1 { max-width: 26ch; }
.hero > p.lede { max-width: 56ch; }
.hero > .cta { justify-content: center; }
.hero > figure, .hero > .videowrap, .hero > .split { text-align: left; }
@media (max-width: 760px) {
  .hero { text-align: left; }
  .hero > h1, .hero > p.lede { max-width: none; }
  .hero > .cta { justify-content: flex-start; }
}

.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
p.lede {
  text-wrap: pretty;
  font-size: clamp(1.06rem, .99rem + .3vw, 1.21rem); line-height: 1.6;
  color: var(--muted); max-width: 60ch; margin-top: 20px;
}
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.under { margin-top: 18px; font-size: .9rem; color: var(--faint); }

.pagehead {
  padding-top: clamp(48px, 2vw + 36px, 76px);
  padding-bottom: clamp(36px, 2vw + 24px, 56px);
}
.pagehead p.lede { max-width: 58ch; margin-top: 20px; }

/* --- 6. sections and rhythm ---------------------------------------------- */
/* Every other section sits on a band.  Nothing in the pages has to change:
   the alternation is read off the document order. */
main > section { padding: var(--sec-y) 0; background: var(--bg); }
main > section:nth-of-type(odd) { border-top: 1px solid var(--line); }
main > section:nth-of-type(even) { background: var(--surface); }

.lead { text-wrap: pretty; color: var(--muted); max-width: 62ch; margin-top: 14px; font-size: 1.04rem; }

/* section heading with an icon: a chip, not a floating glyph */
h2 > .ico, h3 > .ico {
  border-radius: 12px; background: var(--primary-tint); color: var(--link);
  vertical-align: -0.3em; margin-right: 13px;
}
h2 > .ico { width: 42px; height: 42px; border-radius: 13px; }
h2 > .ico > svg { width: 22px; height: 22px; }
h3 > .ico { width: 30px; height: 30px; border-radius: 9px; margin-right: 10px; vertical-align: -0.42em; }
h3 > .ico > svg { width: 17px; height: 17px; }
:is(h2, h3):has(> .ico) { display: flex; align-items: center; gap: 0; }
:is(h2, h3):has(> .ico) > .ico { vertical-align: baseline; }
@media (max-width: 560px) {
  h2 > .ico { width: 36px; height: 36px; border-radius: 11px; margin-right: 11px; }
  h2 > .ico > svg { width: 19px; height: 19px; }
}

/* --- 7. cards ------------------------------------------------------------ */
.cols { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.cols.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols, .cols.two { grid-template-columns: 1fr; } }

.card, .group {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card p, .group p { color: var(--muted); font-size: .955rem; line-height: 1.62; margin-top: 9px; }
.card h3, .group h3 { color: var(--text); }
.card .host {
  display: inline-block; margin-top: 16px;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: -0.01em;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
}
a.card { display: block; }
a.card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none;
}
a.card:hover h3 { color: var(--link); }
/* a quiet chevron that only appears on the links */
a.card::after {
  content: ""; position: absolute; top: 24px; right: 22px;
  width: 7px; height: 7px; border-right: 2px solid var(--line-strong);
  border-top: 2px solid var(--line-strong); transform: rotate(45deg);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
a.card:hover::after { border-color: var(--link); transform: rotate(45deg) translate(2px, -2px); }
a.card h3 { padding-right: 26px; }

.grouplist { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
@media (max-width: 860px) { .grouplist { grid-template-columns: 1fr; } }
.group h3 { margin-bottom: 4px; }
.group p { line-height: 1.68; }
.group em { font-style: normal; color: var(--warn); font-weight: 560; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 34px; }
.split.wide-left { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 920px) { .split, .split.wide-left { grid-template-columns: 1fr; gap: 28px; } }

.next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
/* a section holding nothing but a row of buttons does not need a full band */
main > section > .wrap > .next:only-child { margin-top: 0; }
main > section:has(> .wrap > .next:only-child) { padding: clamp(36px, 1.6vw + 24px, 52px) 0; }

/* --- 8. tick lists ------------------------------------------------------- */
ul.ticks {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 16px 32px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) { ul.ticks { grid-template-columns: 1fr; gap: 14px; } }
ul.ticks li {
  position: relative; padding-left: 32px;
  font-size: .975rem; font-weight: 540; color: var(--text); line-height: 1.5;
}
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .08em;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
ul.ticks li::after {
  content: ""; position: absolute; left: 7px; top: calc(.08em + 7px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink);
}
ul.ticks li small {
  display: block; color: var(--muted); font-size: .89rem; font-weight: 400;
  line-height: 1.55; margin-top: 3px;
}

/* --- 9. figures and galleries -------------------------------------------- */
figure { margin: 0; }
.shot {
  margin-top: 48px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; }
figcaption {
  font-size: .89rem; color: var(--muted);
  padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface);
}
.split .shot { margin-top: 0; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.gallery figure:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: var(--line-strong);
}
/* the shots are 16:10 except the phone one; a fixed box with `contain` keeps
   the grid even and letterboxes the odd one instead of cropping it */
.gallery figure img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain; object-position: center;
  background: var(--surface);
}
.gallery figcaption {
  margin-top: auto; font-size: .875rem; font-weight: 540; color: var(--text);
  padding: 12px 15px;
}

.videowrap { margin-top: 52px; }
.videowrap video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #000; box-shadow: var(--shadow-lg);
}

/* --- 10. stat tiles ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  position: relative; overflow: hidden;
  padding: 20px 20px 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.stat b {
  display: block; font-size: clamp(1.55rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 700; letter-spacing: -0.036em; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.stat span { display: block; font-size: .865rem; color: var(--muted); margin-top: 7px; line-height: 1.45; }

/* --- 11. accordion ------------------------------------------------------- */
details.faq {
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  margin-top: 12px; overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
details.faq:hover { border-color: var(--line-strong); }
details.faq[open] { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); box-shadow: var(--shadow-md); }
details.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; font-weight: 620; font-size: 1rem; letter-spacing: -0.012em;
  color: var(--text);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {            /* chevron, drawn, rotates when open */
  content: ""; margin-left: auto; flex: none;
  width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--link); border-bottom: 2px solid var(--link);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
details.faq[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.faq summary:hover { background: var(--surface); }
details.faq .ans {
  padding: 2px 22px 20px 20px; color: var(--muted); font-size: .97rem; line-height: 1.68;
}
details.faq .ans p + p { margin-top: 10px; }

/* --- 12. notes ----------------------------------------------------------- */
/* two columns: the icon spans every row so several paragraphs stack properly
   (as a flex row the second paragraph used to sit beside the first) */
.note {
  display: grid; grid-template-columns: auto 1fr; column-gap: 15px; row-gap: 9px;
  align-items: start;
  padding: 20px 22px; margin-top: 34px;
  border: 1px solid var(--line); border-left: 3px solid var(--warn-edge);
  border-radius: 13px; background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.note > .ico {
  grid-column: 1; grid-row: 1; align-self: start;
  width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--warn-edge) 16%, transparent); color: var(--warn);
}
.note > .ico > svg { width: 18px; height: 18px; }
.note > *:not(.ico) { grid-column: 2; }
.note p { grid-column: 2; font-size: .955rem; color: var(--muted); line-height: 1.65; }
.note strong { color: var(--text); font-weight: 650; }

/* --- 13. footer ---------------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 46px 0 52px; color: var(--muted); font-size: .92rem;
}
.foot { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.foot nav a { color: var(--muted); font-weight: 500; }
.foot nav a:hover { color: var(--text); text-decoration: none; }
footer .foot + .foot {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--faint);
}
@media (max-width: 640px) {
  .foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot nav { margin-left: 0; }
}

/* --- 14. motion, focus, skip link ---------------------------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 14px; top: 14px; background: var(--primary); color: var(--on-primary);
  padding: 11px 16px; border-radius: 10px; z-index: 40; font-weight: 600;
  box-shadow: var(--shadow-lg);
}
:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px;
}
.btn:focus-visible, .card:focus-visible, details.faq summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
details.faq summary:focus-visible { border-radius: 13px; }

/* six links plus a button cannot share one phone row, so the link row wraps;
   a ~130px sticky header eats too much of a phone screen, so release it */
@media (max-width: 620px) { header { position: static; } }

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .cta .btn, .next .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, a.card:hover, .gallery figure:hover { transform: none; }
}

  /* pricing cards */
  .card .price { margin: 10px 0 2px; color: var(--text); }
  .card .price b { font-size: 1.75rem; font-weight: 690; letter-spacing: -0.03em; }
  .card .price span { font-size: .86rem; color: var(--muted); font-weight: 400; }
  .card p.alt { font-size: .84rem; color: var(--muted); margin: 0 0 10px; }

/* ---- brand lockup ------------------------------------------------------- */
/* The kit's wordmark is Poppins Bold with "desk" in the brand teal; the files
   ship it outlined so no font is needed there. Here it is live text, so it
   stays crisp at any size, is selectable, and is read aloud correctly. */
.logo .ico svg { width: 30px; height: 30px; }
.wordmark {
  font-family: "Poppins", var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-deep);
}
.wordmark span { color: var(--brand-teal); }
:root[data-theme="dark"] .wordmark,
:root[data-theme="dark"] .wordmark span { color: var(--brand-mint); }
:root[data-theme="dark"] .wordmark span { color: var(--brand-teal-bright); }
:root { --brand-icon-teal: #0D9488; --brand-icon-ink: #0F2A2E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-icon-teal: #2DD4BF;
    --brand-icon-ink: #F0FDFA;
  }
  :root:not([data-theme="light"]) .wordmark { color: var(--brand-mint); }
  :root:not([data-theme="light"]) .wordmark span { color: var(--brand-teal-bright); }
}
:root[data-theme="dark"] { --brand-icon-teal: #2DD4BF; --brand-icon-ink: #F0FDFA; }

/* headings take the brand face */
h1, h2, h3, .stat b { font-family: "Poppins", var(--f-sans); }

/* ---- comparison tables --------------------------------------------------- */
/* A real <table> rather than a styled list: it is what a screen reader
   announces correctly, what Google reads as tabular data, and what an AI
   assistant can quote a single cell from. */
.tablewrap { margin-top: 26px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
table.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
table.cmp caption { caption-side: bottom; text-align: left; padding: 12px 16px 14px; color: var(--faint); font-size: .85rem; line-height: 1.5; border-top: 1px solid var(--line); }
table.cmp th, table.cmp td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.cmp thead th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
table.cmp tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
table.cmp td { font-variant-numeric: tabular-nums; }
table.cmp td span { display: block; color: var(--faint); font-size: .8rem; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tr.ours th, table.cmp tr.ours td { background: var(--accent-tint); font-weight: 650; }
table.cmp tr.ours td span { font-weight: 400; }

/* ---- tables on a phone --------------------------------------------------- */
/* The caption is laid out at the TABLE's min-width, not the viewport's, so on a
   390px screen it was being drawn 560px wide and its text ran off the edge —
   taking the dated, quotable context ("per person per month, 16 October 2026")
   with it. Pinning it to the scroll container's left edge and sizing it to the
   viewport keeps it readable without changing the table's own scrolling. */
@media (max-width: 760px) {
  table.cmp caption {
    position: sticky;
    left: 0;
    width: calc(100vw - 2 * var(--gutter));
    box-sizing: border-box;
  }
}

/* A table that scrolls sideways needs to look like it does, or a phone reader
   never discovers the right-hand columns. The shadow appears only while there
   is more to scroll to: it is painted on the scroll container and masked by
   local-attachment gradients at each end. */
.tablewrap {
  background-image:
    linear-gradient(to right, var(--surface-2) 30%, transparent),
    linear-gradient(to left,  var(--surface-2) 30%, transparent),
    linear-gradient(to right, rgba(15,42,46,.16), transparent 14px),
    linear-gradient(to left,  rgba(15,42,46,.16), transparent 14px);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}