/* Matih Setu site. One stylesheet for every page.
   The release-notes pages (/1.4.3/ and later) use the plain one-column rules in part 1 and need nothing else.
   The product pages put class="site" on <body> and use part 2 on top.
   The site's CSP allows same-origin styles and scripts only: no inline style attributes, no <style> blocks, no inline
   scripts. The one script is /js/carousel.js (the home pages' screenshots). */

/* ---------- Colours ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f6f5fc;
  --surface: #ffffff;
  --text: #1b1d24;
  --muted: #565d6c;
  --accent: #4a2fc4;
  --accent-2: #1a6fb0;
  --rule: #e4e3ee;
  --note-bg: #f5f4fc;
  --card-border: #e4e2f1;
  --tint: #efecfd;
  --btn-bg: #4a2fc4;
  --btn-bg-hover: #3a22a8;
  --btn-text: #ffffff;
  --shadow: 0 1px 2px rgba(24, 18, 70, 0.05), 0 10px 28px rgba(24, 18, 70, 0.07);
  --hero-bg: linear-gradient(180deg, #f1edff 0%, #f7f6fd 55%, #ffffff 100%);
  --strong-grad: linear-gradient(115deg, #4526c0 0%, #3140c2 50%, #1a6fb0 100%);
  --text-grad: linear-gradient(100deg, #5128d0 0%, #1f86cf 100%);
  --ok: #17784f;
  --warn-bg: #fff8e6;
  --warn-border: #f0d9a0;
  --ill-frame: #2b2e3b;
  --ill-screen: #ffffff;
  --ill-bar: #4a2fc4;
  --ill-line: #dcdbe8;
  --ill-line-strong: #9b98b4;
  --ill-hl: #ece8ff;
  --ill-paper: #ffffff;
  --ill-paper-edge: #d9d8e4;
  --ill-pill: #ffffff;
  --ill-total: #4a2fc4;
}

/* ---------- Part 1: base, and the release-notes pages ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
main { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 0.25rem 0 0.25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; color: var(--accent); }
.meta { color: var(--muted); font-size: 0.95rem; margin: 0; }
.lead { font-size: 1.05rem; margin: 1.25rem 0 0; }
.crumb { margin: 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
a { color: var(--accent); }
ul { padding-left: 1.25rem; margin: 0; }
li { margin: 0.4rem 0; }
section { border-top: 1px solid var(--rule); margin-top: 1.5rem; }
.note { background: var(--note-bg); border: 1px solid var(--rule); border-radius: 8px; padding: 0 1rem 1rem; }
.note h2 { margin-top: 1rem; }
.releases { list-style: none; padding: 0; margin-top: 1.5rem; }
.releases li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.releases a { font-size: 1.15rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* ---------- Part 2: product pages (body.site) ---------- */
.site main { max-width: none; margin: 0; padding: 0; }
.site section { border-top: 0; margin-top: 0; }
.site h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1rem; }
.site h2 { color: var(--text); font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.site h3 { font-size: 1.12rem; line-height: 1.35; margin: 0 0 0.4rem; }
.site p { margin: 0 0 1rem; }
.site .lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.75rem; max-width: 38rem; }
.site code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 0.92em;
  background: var(--tint);
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
  overflow-wrap: anywhere;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.wrap.narrow { max-width: 48rem; }
.band { padding: 3.5rem 0; }
.band.soft { background: var(--bg-soft); }
.muted { color: var(--muted); }

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 10; background: var(--surface); padding: 0.5rem 0.75rem; border-radius: 6px; }

/* Header and navigation */
.site-header { background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.5rem; padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand img { width: 36px; height: 36px; display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nav li { margin: 0; }
.nav a { display: block; padding: 0.4rem 0.75rem; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.nav a:hover { background: var(--tint); color: var(--accent); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--accent); font-weight: 650; }
.brand { order: 1; }
.nav { order: 2; margin-left: auto; }
.site-header .lang-switch { order: 3; }
@media (max-width: 40rem) {
  .site-header .lang-switch { order: 2; margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .nav ul { justify-content: space-between; gap: 0; }
  .nav a { padding: 0.35rem 0.3rem; font-size: 0.95rem; }
}

/* Language switch: the same two-part control on every page (the header, or beside the crumb), English then हिन्दी, with
   the page's own language filled in. Founder, 29 Oct 2026: the old one-word toggle changed size between pages ("both fonts
   are different in size"). So each half takes its font from its own lang, never from the page's, the control has a fixed
   height, and the two halves are equal width: it is the same size on English and Hindi pages, and only the fill moves. */
.lang-switch {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px;
  border: 1px solid var(--card-border); border-radius: 999px; background: var(--bg-soft);
}
.lang-switch .seg {
  display: flex; align-items: center; justify-content: center;
  height: 2rem; padding: 0 0.9rem; border-radius: 999px; white-space: nowrap;
  font: 600 0.95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--muted); text-decoration: none;
}
.lang-switch .seg:lang(hi) { font-family: "Nirmala UI", "Noto Sans Devanagari", Mangal, system-ui, sans-serif; }
.lang-switch a.seg:hover { color: var(--accent); background: var(--surface); }
.lang-switch a.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-switch .seg.is-on { background: var(--accent); color: #ffffff; box-shadow: 0 1px 2px rgba(24, 18, 70, 0.18); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.25rem; border-radius: 10px; border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--card-border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-text { color: var(--accent); font-weight: 650; text-decoration: none; padding: 0.8rem 0.3rem; }
.btn-text:hover { text-decoration: underline; }
.btn .icon { width: 20px; height: 20px; }

/* Line icons (inline SVG, drawn with the current text colour) */
.icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-badge {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 12px; background: var(--tint); color: var(--accent); margin-bottom: 0.9rem;
}

/* Hero (home) */
.hero { background: var(--hero-bg); padding: 3rem 0 3.5rem; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .hero .wrap { grid-template-columns: 1.1fr 0.9fr; } }
.eyebrow { display: inline-block; margin: 0 0 0.85rem; color: var(--accent); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--muted); font-size: 0.95rem; }
.hero-points li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-points .icon { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.2; }
.hero-art svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }

/* The hero drawing */
.ill-frame { fill: var(--ill-frame); }
.ill-screen { fill: var(--ill-screen); }
.ill-bar { fill: var(--ill-bar); }
.ill-line { fill: var(--ill-line); }
.ill-line-strong { fill: var(--ill-line-strong); }
.ill-hl { fill: var(--ill-hl); }
.ill-paper { fill: var(--ill-paper); stroke: var(--ill-paper-edge); stroke-width: 1.5; }
.ill-pill { fill: var(--ill-pill); stroke: var(--ill-paper-edge); stroke-width: 1.5; }
.ill-total { fill: var(--ill-total); }
.ill-ok { fill: var(--ok); }
.ill-tick { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-text { fill: var(--text); font: 600 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ill-text-light { fill: #ffffff; font: 700 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ill-rupee { fill: var(--ill-total); font: 700 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Section headings */
.section-head { max-width: 44rem; margin: 0 0 2rem; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Card grids */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid.two, .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid.four { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.4rem 1.4rem 1.25rem; box-shadow: var(--shadow); }
.card p { color: var(--muted); font-size: 0.98rem; margin: 0; }
.card p + p { margin-top: 0.6rem; }
.card.plain { box-shadow: none; }
.card .who { color: var(--accent); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.35rem; }

/* Small feature tags */
.chips { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips li { margin: 0; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--card-border); font-size: 0.95rem; }
.chips a { text-decoration: none; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > li { counter-increment: step; margin: 0; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.4rem; }
.steps > li::before {
  content: counter(step);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.8rem;
  border-radius: 999px; background: var(--strong-grad); color: #ffffff; font-weight: 700;
}
.steps p { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* Call to action band */
.cta { background: var(--strong-grad); color: #ffffff; border-radius: 20px; padding: 2.75rem 1.5rem; text-align: center; }
.site .cta h2 { color: #ffffff; }
.cta p { color: #f1efff; max-width: 38rem; margin: 0 auto 1.5rem; font-size: 1.08rem; }
.cta .actions { justify-content: center; }
.cta .btn-light { background: #ffffff; color: #3a1fae; }
.cta .btn-light:hover { background: #f1efff; }
.cta .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.75); }
.cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* The band's two ways to reach Matih: the same card twice, an icon, what it does ("Call" / "कॉल करें") and the number or
   address under it. The number and address are lang="en", so they keep the same font on Hindi pages. Founder, 29 Oct
   2026: "this needs better design and icons both for hindi and english version". */
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; max-width: 40rem; margin: 0 auto; }
@media (max-width: 40rem) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; text-align: left; text-decoration: none;
  border-radius: 14px; background: #ffffff; color: var(--text); box-shadow: 0 8px 22px rgba(16, 10, 60, 0.22);
  transition: transform 0.15s, box-shadow 0.15s;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 10, 60, 0.28); }
.contact-card:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.contact-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--tint); color: var(--accent);
}
.contact-icon .icon { width: 22px; height: 22px; stroke-width: 2; }
.contact-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-label { font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.contact-value {
  font: 700 1.06rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: #3a1fae; overflow-wrap: anywhere;
}
.cta .cta-more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem;
  max-width: none; margin: 1.5rem auto 0; font-size: 0.98rem; color: #e6e2ff;
}
.cta .cta-more a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: #ffffff; font-weight: 600; text-decoration: none;
}
.cta .cta-more a:hover { background: rgba(255, 255, 255, 0.22); }
.cta .cta-more a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.cta .cta-more .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .contact-card { transition: none; }
  .contact-card:hover { transform: none; }
}

/* Inner page heading */
.page-hero { background: var(--hero-bg); padding: 2.75rem 0 2.25rem; border-bottom: 1px solid var(--rule); }
.page-hero .lead { margin-bottom: 0; }
.toc { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--card-border); color: var(--text); text-decoration: none; font-size: 0.95rem; }
.toc a:hover { border-color: var(--accent); color: var(--accent); }

/* Feature sections */
.site .feature { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2.5rem; padding: 2.75rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.site .feature:first-of-type { border-top: 0; }
@media (min-width: 56rem) { .site .feature { grid-template-columns: 19rem 1fr; } }
.feature-intro p { color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; margin: 0 0 0.75rem; padding-left: 1.9rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.3em;
  width: 0.42rem; height: 0.8rem; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.ticks strong { font-weight: 650; }

/* Notes and callouts */
.callout { background: var(--tint); border-radius: 14px; padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; }
.callout p:last-child { margin-bottom: 0; }
.callout.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.good-to-know { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem; }
.good-to-know ul { margin: 0; }

/* Download page */
.download-box { background: var(--surface); border: 1px solid var(--card-border); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow); margin: 0 0 1.5rem; }
.download-box h2 { margin-bottom: 0.25rem; }
.files { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.files > li { margin: 0 0 1rem; }
.file-facts { margin: 0.75rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.95rem; }
.file-facts dt { color: var(--muted); }
.file-facts dd { margin: 0; overflow-wrap: anywhere; }
.hash { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.9rem; overflow-wrap: anywhere; word-break: break-all; }
.how { padding-left: 1.4rem; margin: 0 0 1rem; }
.how li { margin: 0 0 0.75rem; padding-left: 0.25rem; }
.cmd { display: block; margin: 0.5rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--card-border); }
.site .cmd code { background: none; padding: 0; }
.site .stack > * + * { margin-top: 2.5rem; }
.site .stack h3 { margin-top: 1.75rem; margin-bottom: 0.75rem; }
.site .stack .callout { margin-top: 1rem; }

/* Releases list */
.release-list { list-style: none; padding: 0; margin: 0; }
.release-list > li { margin: 0 0 1.25rem; }
.release-list .card h2 { margin-bottom: 0.15rem; }
.release-list .card h2 a { color: var(--text); text-decoration: none; }
.release-list .card h2 a:hover { color: var(--accent); text-decoration: underline; }
.release-list .meta { margin-bottom: 0.75rem; }
.release-list ul { color: var(--muted); margin: 0 0 1rem; }
.badge { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }

/* Footer */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.95rem; padding: 2.5rem 0 2rem; margin-top: 0; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.footer-brand p { margin: 0.5rem 0 0; max-width: 22rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.copyright { margin: 1.75rem 0 0; font-size: 0.88rem; }

/* ---------- Contact ---------- */
.contact-line { margin: 0.75rem 0 0; }
.contact-line a { font-weight: 600; }
.footer-brand .contact-line { font-size: 0.95rem; }

/* ---------- Hindi pages (/hi/, lang="hi") ---------- */
/* A Devanagari font first: Nirmala UI is on every Windows 10 and 11 PC, Mangal on older ones. Code and the checksum keep
   their monospace font (their own rules set it). Devanagari needs more room above and below a line, and no letter-spacing,
   which would break the line along the top of the letters. */
html:lang(hi) body,
html:lang(hi) .ill-text,
html:lang(hi) .ill-text-light { font-family: "Nirmala UI", "Noto Sans Devanagari", Mangal, system-ui, sans-serif; }
html:lang(hi) body { line-height: 1.75; }
html:lang(hi) h1 { line-height: 1.4; }
html:lang(hi) .site h1 { line-height: 1.35; letter-spacing: 0; }
html:lang(hi) .site h2 { line-height: 1.4; letter-spacing: 0; }
html:lang(hi) .site h3 { line-height: 1.5; }
html:lang(hi) .eyebrow,
html:lang(hi) .card .who { letter-spacing: 0; font-size: 0.95rem; }
html:lang(hi) .btn { line-height: 1.4; }

/* ---------- "See Setu at work": the screenshots (home pages) ---------- */
/* One screen at a time in the middle, its neighbours peeking in at the sides. Arrows, dots, arrow keys and a swipe move it
   (/js/carousel.js); it also moves on its own until the visitor takes over. Without the script the strip still scrolls
   and snaps by hand and the dots still jump. Founder, 29 Oct 2026: "as a user i can't manually pick or move to nxt
   preview themself". The strip scrolls inside its own box, so the page never scrolls sideways. */
.screens { padding: 3rem 0 3.25rem; }
.screens .section-head { margin-bottom: 1.25rem; }
.carousel { --slide: min(86vw, 52rem); --gap: 1.25rem; }
.carousel-viewport {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.5rem 0 0.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.carousel-track { display: flex; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.carousel-track::before,
.carousel-track::after { content: ""; flex: 0 0 max(0px, calc((100% - var(--slide)) / 2 - var(--gap))); }
.carousel-track > .slide { flex: 0 0 var(--slide); margin: 0; scroll-snap-align: center; }
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1366 / 768; object-fit: cover;
  border: 1px solid var(--card-border); border-radius: 12px; background: var(--bg-soft); box-shadow: var(--shadow);
}
.shot figcaption { margin: 0.75rem 0 0; font-weight: 600; font-size: 1rem; color: var(--text); text-align: center; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 0.5rem; }
.carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--card-border); border-radius: 999px; background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow); cursor: pointer;
}
.carousel-arrow[hidden] { display: none; }
.carousel-arrow:hover { border-color: var(--accent); background: var(--tint); }
.carousel-arrow:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.carousel-arrow .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.carousel-dots { display: flex; align-items: center; gap: 0.6rem; }
.carousel-dots a {
  position: relative; display: block; width: 0.65rem; height: 0.65rem; border-radius: 999px;
  background: var(--ill-line-strong); opacity: 0.55; transition: width 0.2s, opacity 0.2s, background-color 0.2s;
}
.carousel-dots a::before { content: ""; position: absolute; inset: -0.55rem -0.3rem; }  /* a bigger target for a finger */
.carousel-dots a:hover { opacity: 0.9; }
.carousel-dots a[aria-current="true"] { width: 1.75rem; background: var(--accent); opacity: 1; }
.carousel-dots a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .carousel-dots a { transition: none; }
}