/* Speaker Keeper marketing site
   ---------------------------------------------------------------------------
   Colour follows 60/30/10:
     60  paper        white / near-white bands, the field everything sits on
     30  ink          near-black type, grey copy, hairlines, panel fills
     10  accent       Bluetooth blue: CTAs, one headline phrase, live states,
                      and nothing else. If blue starts showing up in body copy
                      or section fills, the ratio has slipped.
   Both themes carry the same three roles, so the ratio survives dark mode. */

:root {
  --paper:       #ffffff;
  --paper-2:     #f7f9fc;
  --panel:       #eef2f8;
  --line:        #e3e8f0;
  --ink:         #0b0e14;
  --ink-2:       #5a6472;
  --ink-3:       #8b94a3;
  --accent:      #0f71fa;
  --accent-deep: #0b4ed6;
  --accent-tint: #e8f1fe;
  --red:         #d93a3a;
  --red-tint:    #fdeceb;
  --red-ink:     #ac2a2a;
  --green:       #2ea043;
  --green-tint:  #e6f6ec;
  --green-ink:   #1a7f3c;
  --yellow:      #e0a200;
  --yellow-tint: #fdf6e0;
  --yellow-ink:  #8a6100;
  --shadow-sm:   0 1px 2px rgba(11, 14, 20, .06), 0 1px 3px rgba(11, 14, 20, .04);
  --shadow-md:   0 4px 12px rgba(11, 14, 20, .06), 0 12px 32px rgba(11, 14, 20, .07);
  --shadow-lg:   0 8px 24px rgba(11, 14, 20, .08), 0 32px 64px rgba(11, 14, 20, .10);
  --radius:      14px;
  --radius-lg:   22px;
  --maxw:        1440px;
  --gutter:      24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0b0e14;
    --paper-2:     #0f131b;
    --panel:       #151a24;
    --line:        #1f2734;
    --ink:         #f1f4f9;
    --ink-2:       #98a3b5;
    --ink-3:       #6c7789;
    --accent:      #4b9bff;
    --accent-deep: #2f7ff0;
    --accent-tint: #122439;
    --red:         #ff7a7a;
    --red-tint:    #2a1618;
    --red-ink:     #ff9b9b;
    --green:       #56d364;
    --green-tint:  #14291c;
    --green-ink:   #7ee89a;
    --yellow:      #e3b341;
    --yellow-tint: #2a2213;
    --yellow-ink:  #f0cf76;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --paper:       #0b0e14;
  --paper-2:     #0f131b;
  --panel:       #151a24;
  --line:        #1f2734;
  --ink:         #f1f4f9;
  --ink-2:       #98a3b5;
  --ink-3:       #6c7789;
  --accent:      #4b9bff;
  --accent-deep: #2f7ff0;
  --accent-tint: #122439;
  --red:         #ff7a7a;
  --red-tint:    #2a1618;
  --red-ink:     #ff9b9b;
  --green:       #56d364;
  --green-tint:  #14291c;
  --green-ink:   #7ee89a;
  --yellow:      #e3b341;
  --yellow-tint: #2a2213;
  --yellow-ink:  #f0cf76;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding-top keeps an anchored heading clear of the floating nav, which
   would otherwise sit on top of whatever you just jumped to. The script
   measures the real nav and overrides this; the value here is the no-JS
   fallback, and it is deliberately a little generous. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.032em;
  line-height: 1.06;
  font-weight: 700;
}

p { margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

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

.section { padding-block: clamp(72px, 11vw, 132px); }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  box-shadow: var(--shadow-sm);
}

/* Two sections carry their own hue rather than the blue: the problem is stated in
   red and the fix in green, so the two halves of the argument are told apart at a
   glance. The accent variables are re-pointed on the section itself, which is
   enough for everything inside it (rules, step numbers, tints) to follow. */
.eyebrow--red {
  color: var(--red-ink);
  background: var(--red-tint);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}
.eyebrow--green {
  color: var(--green-ink);
  background: var(--green-tint);
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
}

#problem { --accent: var(--red);   --accent-deep: var(--red-ink);   --accent-tint: var(--red-tint); }
#how     { --accent: var(--green); --accent-deep: var(--green-ink); --accent-tint: var(--green-tint); }

/* The one live accent: a pulsing dot that reads "it is doing something". */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: pulse 2.4s ease-out infinite;
  flex: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}

/* Wide enough that a 46px heading lands on two lines, not three; the deck
   underneath is re-narrowed to a comfortable measure. */
.section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--mid { max-width: none; text-align: center; }
.section-head--mid p { margin-inline: auto; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-block: 18px 14px; }
.section-head p { color: var(--ink-2); font-size: clamp(16px, 1.6vw, 18.5px); max-width: 52ch; }

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 113, 250, .25), 0 8px 20px -6px rgba(15, 113, 250, .45);
}
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--ink-3); }

.btn--lg { padding: 16px 28px; font-size: 16.5px; }

:where(a, button, summary, .faq__q):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 14px;
  z-index: 50;
  padding-inline: var(--gutter);
  margin-top: 14px;
}

.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 9px 9px 16px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.brand img { width: 26px; height: 26px; border-radius: 7px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--panel); }

@media (max-width: 820px) { .nav__links { display: none; } }

/* Smallest phones: the pill has to hold the wordmark and the CTA on one line. */
@media (max-width: 380px) {
  .brand { font-size: 15px; }
  .brand img { width: 24px; height: 24px; }
  .nav__inner { padding-left: 13px; }
  .nav__inner .btn { padding: 11px 16px; font-size: 14.5px; }
}

/* --------------------------------------------------------------- hero ---- */

.hero { padding-block: clamp(44px, 5.5vw, 74px) clamp(64px, 9vw, 110px); }

/* Text gets the wider column: the headline is three fixed lines and the longest
   of them has to fit without wrapping, or the fold overflows. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(30px, 3.7vw, 46px);
  margin-block: 20px 18px;
  text-wrap: balance;
}

/* The single chromatic emphasis in the whole fold. */
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__sub {
  color: var(--ink-2);
  font-size: clamp(17px, 1.8vw, 19.5px);
  max-width: 44ch;
  line-height: 1.55;
}

/* A primary and a secondary button sitting together read as a pair, so they are
   sized as one: the grid takes its width from the wider label and hands the same
   track width to both, and neither label wraps. `fit-content` keeps the pair as
   wide as its contents rather than as wide as the column. On phones the same
   rule stacks them, still matched, because it becomes one column. */
.hero__cta, .download__cta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  width: fit-content;
}
.hero__cta { margin-top: 30px; }
.hero__cta > .btn, .download__cta > .btn { width: 100%; }

@media (max-width: 560px) {
  .hero__cta, .download__cta { grid-auto-flow: row; grid-auto-columns: auto; }
}

.hero__meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13.5px;
}
/* Three plain facts, each on a pastel green field with a green tick: the point is
   that they are all reassurances, so they are all the same colour. */
.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: var(--green-tint);
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  color: var(--green-ink);
  font-weight: 550;
}
.hero__meta svg { width: 14px; height: 14px; flex: none; color: var(--green); stroke-width: 2.5; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: 2; }
}

/* The headline's hard breaks are a desktop composition. Narrower than this they
   set a min-content width wider than the screen, which pushes the whole
   document sideways, so below the breakpoint the line wraps on its own. */
@media (max-width: 700px) {
  :root { --gutter: 18px; }
  .hero h1 br { display: none; }
  .hero h1 em { display: inline; }
}

/* ------------------------------------------------- hero visual: shots --
   The hero carousel: real screenshots of the app.

   Every shot is captured 3:2 with the window filling about the same share of
   the frame, so one aspect-ratio box holds all of them and each lands the same
   size on the page. The backdrop baked into the images is this panel colour,
   which is why the edges disappear rather than sitting in a visible rectangle.

   Two images per slide, one per theme, swapped the same way the palette is.
   Both download, which is a few tens of kilobytes; a <picture> element would
   save that but follows prefers-color-scheme only, and would ignore the
   data-theme override the rest of this stylesheet honours. */
.shots {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-lg);
}

.shots__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  /* The horizontal drag belongs to the carousel, the vertical one to the page. */
  touch-action: pan-y;
}

.shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}
.shot.is-on { opacity: 1; visibility: visible; }

/* Each slide is a button: the whole shot opens full size. Inactive slides are
   visibility:hidden, which takes their button out of the tab order too. */
.shot__btn {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.shot__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shot__img--dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot__img--light { display: none; }
  :root:not([data-theme="light"]) .shot__img--dark  { display: block; }
}
:root[data-theme="dark"] .shot__img--light { display: none; }
:root[data-theme="dark"] .shot__img--dark  { display: block; }

.shots__cap {
  margin: 12px 4px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-height: 1.4em;
}

.shots__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 4px;
}

.shots__dots { display: flex; align-items: center; gap: 7px; }

.shots__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-3);
  opacity: .4;
  cursor: pointer;
  transition: opacity .2s ease, width .2s ease, background-color .2s ease;
}
.shots__dot:hover { opacity: .75; }
.shots__dot.is-on { width: 20px; opacity: 1; background: var(--accent); }

.shots__arrows { display: flex; gap: 6px; }

.shots__arrow {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.shots__arrow:hover { color: var(--ink); border-color: var(--ink-3); }
.shots__arrow svg { width: 15px; height: 15px; }

.shots__dot:focus-visible,
.shots__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A carousel that moves on its own is a liability for anyone who asked the
   system not to animate things. */
@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; }
}

/* ------------------------------------------------------------ problem ---- */

.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; }

.card__num {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); display: block; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- how it works - */

.steps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.step { padding-top: 22px; border-top: 2px solid var(--line); }
.step h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15.5px; }
.step__k {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .08em; display: block; margin-bottom: 10px;
}

/* The rules above each step deepen from left to right, so the row reads as one
   bar filling up and the strongest colour lands on the step that is the whole
   point. Colouring only the first step said the opposite: that step one was
   where you are now and the rest were still to come. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .step:nth-child(1) { border-top-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
  .step:nth-child(2) { border-top-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
  .step:nth-child(3) { border-top-color: var(--accent); }

  .step:nth-child(1) .step__k { color: color-mix(in srgb, var(--accent) 45%, var(--ink-3)); }
  .step:nth-child(2) .step__k { color: color-mix(in srgb, var(--accent) 72%, var(--ink-3)); }
  .step:nth-child(3) .step__k { color: var(--accent); }
}

/* ----------------------------------------------------------- features ---- */

.features { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.feature { background: var(--paper); padding: 30px 26px; }
.feature__icon {
  width: 34px; height: 34px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
}
.feature__icon svg { width: 18px; height: 18px; }
.feature h3 { font-size: 16.5px; letter-spacing: -0.02em; margin-bottom: 8px; }
.feature p { color: var(--ink-2); font-size: 15px; line-height: 1.56; }

/* ---------------------------------------------------------------- faq ---- */

/* Full-bleed cards rather than a narrow column of rules. At 1440 a 760px list
   sat in the left third of the page looking like an afterthought, and the
   questions are the last thing read before the download button. */
.faq { display: grid; gap: 14px; }

.faq__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease;
}
.faq__item:hover { border-color: var(--ink-3); }
.faq__item[data-open="true"] { border-color: var(--accent); }

.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  background: none; border: 0; cursor: pointer;
  font: inherit;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
}
.faq__q:hover { color: var(--accent); }

/* A plus that becomes a minus. Sized to the question, not to the body text. */
.faq__sign {
  position: relative;
  width: clamp(24px, 2.6vw, 30px);
  height: clamp(24px, 2.6vw, 30px);
  flex: none;
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: var(--ink-2); border-radius: 2px;
  transition: transform .26s ease, background-color .26s ease, opacity .26s ease;
}
.faq__sign::before { top: 50%; left: 0; right: 0; height: 2.5px; margin-top: -1.25px; }
.faq__sign::after  { left: 50%; top: 0; bottom: 0; width: 2.5px; margin-left: -1.25px; }
.faq__item[data-open="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__item[data-open="true"] .faq__sign::before { background: var(--accent); }

.faq__a { overflow: hidden; height: 0; transition: height .26s ease; }
.faq__a p {
  color: var(--ink-2);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.6;
  max-width: 78ch;
  padding-inline: clamp(22px, 3vw, 40px);
}
/* The block padding belongs to the block, not to every paragraph in it, or
   two paragraphs end up with the gap doubled between them. */
.faq__a p + p { margin-top: 14px; }
.faq__a p:last-child { padding-bottom: clamp(24px, 2.6vw, 34px); }

/* ----------------------------------------------------------- download ---- */

.download { text-align: center; }
.download h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 18px; }
.download p { color: var(--ink-2); font-size: 18px; max-width: 48ch; margin-inline: auto; }
.download__cta { margin: 32px auto 0; }
.download__note { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); }

.smartscreen {
  margin: 44px auto 0;
  max-width: 620px;
  text-align: left;
  display: flex; gap: 14px;
  /* A caution, not a feature card, so it wears the colour a caution wears: a
     pastel yellow field, ink a deep version of the same hue, and a border sitting
     between the two. */
  background: var(--yellow-tint);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--yellow-tint));
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.smartscreen svg { width: 18px; height: 18px; color: var(--yellow); flex: none; margin-top: 3px; }
.smartscreen p { font-size: 14.5px; color: var(--yellow-ink); margin: 0; max-width: none; }
.smartscreen strong { color: var(--yellow-ink); font-weight: 650; }
.smartscreen a { color: var(--yellow-ink); text-underline-offset: 2px; }

/* ------------------------------------------------------------- footer ---- */

.footer { border-top: 1px solid var(--line); padding-block: 40px 52px; }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  justify-content: space-between;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.footer a:hover { color: var(--accent); }
.footer__copy { font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------- lightbox --
   Full-size view of a screenshot. Opened from a slide, closed by Escape, the
   backdrop, or the button; arrow keys still move between shots while it is up. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 16px;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(3, 6, 12, .82);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lightbox__cap {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  opacity: .92;
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 2.5vw, 24px);
  right: clamp(12px, 2.5vw, 24px);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .16); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Stops the page behind from scrolling while the lightbox is up. */
body.is-locked { overflow: hidden; }