/* ============================================================================
   Sahi website, rebuilt (/sahi/). One stylesheet for every page.
   ----------------------------------------------------------------------------
   The pages copy sahi.com: its words, images, band rhythm (dark stage bands
   between light ones) and motion. What changes is what was broken there: one
   set of surfaces instead of a dozen near-identical greys and lavenders, a real
   dark theme, solid readable menus, nothing hidden without script, no text
   under 12px, and content that stays put once it has been revealed.

   Colours are the Sahi scales only (scripts/audit-sahi-colours.mjs). sahi.com's
   lavender and slate washes have no scale of their own, so they map to the
   neutral and brand ramps. Page-specific rules live in assets/pages/<page>.css.
   The footer is /tools/sahi-footer.css, shared with the tools pages.
   ========================================================================== */

/* SAHI Sans: the ~20 KB Latin subsets cover everything these pages write except Hindi;
   the full ~500 KB files are fetched only for Devanagari (Video Guides), by unicode-range.
   Was the full file for every weight: about 2 MB of fonts on every page. */
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20F0, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Regular-subset.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0393-0394, U+03A3, U+03B8, U+03BD, U+03C3, U+2000-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202A-202E, U+2030-2033, U+2039-203A, U+203C, U+2042-2044, U+2047-2049, U+204E, U+2051, U+2055, U+2066-2069, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+20B9, U+2122, U+2190-2193, U+2196-2199, U+21C4, U+2212, U+2215, U+221A, U+221E, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25CA-25CC, U+25CF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20F0, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Medium-subset.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0393-0394, U+03A3, U+03B8, U+03BD, U+03C3, U+2000-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202A-202E, U+2030-2033, U+2039-203A, U+203C, U+2042-2044, U+2047-2049, U+204E, U+2051, U+2055, U+2066-2069, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+20B9, U+2122, U+2190-2193, U+2196-2199, U+21C4, U+2212, U+2215, U+221A, U+221E, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25CA-25CC, U+25CF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20F0, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-SemiBold-subset.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0393-0394, U+03A3, U+03B8, U+03BD, U+03C3, U+2000-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202A-202E, U+2030-2033, U+2039-203A, U+203C, U+2042-2044, U+2047-2049, U+204E, U+2051, U+2055, U+2066-2069, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+20B9, U+2122, U+2190-2193, U+2196-2199, U+21C4, U+2212, U+2215, U+221A, U+221E, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25CA-25CC, U+25CF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+20F0, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "SAHI Sans"; src: url("/fonts/SAHISans-Bold-subset.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0393-0394, U+03A3, U+03B8, U+03BD, U+03C3, U+2000-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202A-202E, U+2030-2033, U+2039-203A, U+203C, U+2042-2044, U+2047-2049, U+204E, U+2051, U+2055, U+2066-2069, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+20B9, U+2122, U+2190-2193, U+2196-2199, U+21C4, U+2212, U+2215, U+221A, U+221E, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25CA-25CC, U+25CF; }
@font-face { font-family: "SAHI Season"; src: url("/fonts/SAHISeason-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SAHI Season"; src: url("/fonts/SAHISeason-Medium.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-alt: #F9F6F1;          /* Spring Wood: the warm alternate band (SAHI Stride) */
  --bg-soft: #F9F6F1;
  --surface: #FFFFFF;         /* cards on --bg-alt */
  --surface-2: #F9F6F1;       /* cards on --bg: Spring Wood */
  --ink: #0F0F0F;
  --ink-2: #535353;           /* body copy on light: 7.4:1 */
  --ink-3: #6E6E6E;           /* captions: 5.1:1 */
  --line: #EDE5D8;
  --hairline: #D3D3D3;
  /* SAHI Stride: solid buttons are Capital Black; Capital Purple is the one accent, for interactive
     moments (links, focus, active states, markers), never a wash. Washes are Spring Wood. */
  --brand: #0F0F0F;           /* solid fills: buttons, badges, play buttons */
  --brand-hover: #404040;
  --on-brand: #FFFFFF;        /* text and icons on --brand */
  --accent: #66033C;          /* Capital Purple */
  --brand-ink: #66033C;       /* accent text on light: 13:1 */
  --brand-wash: #F9F6F1;
  --brand-soft: #EDE5D8;
  --brand-line: #D9C9AE;
  --up: #14697A;
  --down: #AE2C27;
  /* Stage: sahi.com's near-black showcase bands. Dark in both themes. */
  --stage: #0A0A0A;
  --stage-ink: #FAFAFA;
  --stage-ink-2: color-mix(in srgb, #FAFAFA 74%, transparent);
  --stage-line: color-mix(in srgb, #FAFAFA 14%, transparent);
  --stage-surface: #171717;
  --stage-glow: color-mix(in srgb, #66033C 55%, transparent);
  --stage-accent: #FECCF1;    /* accent text on the black stage bands */
  --shadow-1: 0 1px 2px color-mix(in srgb, #0A0A0A 6%, transparent), 0 8px 24px color-mix(in srgb, #0A0A0A 6%, transparent);
  --shadow-2: 0 12px 12px color-mix(in srgb, #0A0A0A 8%, transparent), 0 1px 1px color-mix(in srgb, #0A0A0A 4%, transparent);
  --shadow-3: 0 24px 60px color-mix(in srgb, #0A0A0A 16%, transparent);
  --scrim: color-mix(in srgb, #0A0A0A 48%, transparent);
  --focus: #66033C;

  --sans: "SAHI Sans", sans-serif;
  --disp: "SAHI Season", "SAHI Sans", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --maxw: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --nav-h: 96px;
  --radius: 24px;
  --radius-sm: 12px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A;
  --bg-alt: #0F0F0F;
  --bg-soft: #0F0F0F;
  --surface: #171717;
  --surface-2: #171717;
  --ink: #FAFAFA;
  --ink-2: #D3D3D3;
  --ink-3: #A3A3A3;
  --line: #272727;
  --hairline: #404040;
  --brand: #FAFAFA;           /* solid buttons turn white on the dark page */
  --brand-hover: #D3D3D3;
  --on-brand: #0F0F0F;
  --accent: #FEA3E5;          /* Capital Purple lifted so it reads on near-black */
  --brand-ink: #FECCF1;
  --brand-wash: #171717;      /* washes stay neutral: purple is never a wash */
  --brand-soft: #1F1F1F;
  --brand-line: color-mix(in srgb, #66033C 60%, #0A0A0A);
  --up: #5ACFE0;
  --down: #EE807B;
  --stage-surface: #171717;
  --shadow-1: 0 1px 2px color-mix(in srgb, #0F0F0F 40%, transparent), 0 8px 24px color-mix(in srgb, #0F0F0F 30%, transparent);
  --shadow-2: 0 12px 24px color-mix(in srgb, #0F0F0F 45%, transparent);
  --shadow-3: 0 24px 60px color-mix(in srgb, #0F0F0F 55%, transparent);
  --scrim: color-mix(in srgb, #0F0F0F 62%, transparent);
  --focus: #FEA3E5;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Components set display (.btn, .arrow, .carousel__nav), which would beat the hidden attribute sahi.js sets on them. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
/* Icons inside flex controls keep their size when the row is tight (the Kyro spark collapsed to 0px at 1440). */
.btn svg, .link svg, .arrow svg, .chip svg { flex: none; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.stage :focus-visible, .sahi-site-footer :focus-visible { outline-color: #FEA3E5; }
/* Black bands and black cards (the lesson call-to-action, the takeaways box) take white buttons and pale accents. */
.stage, .lesson-cta, .takeaways { --brand: #FAFAFA; --brand-hover: #D3D3D3; --on-brand: #0F0F0F; --accent: #FEA3E5; --brand-ink: #FECCF1; }
/* sahi.com's own skin (owner, 27 Oct 2026: "the colours from sahi.com"), on pages whose body carries .skin-sahicom
   (the home page and the Products pages so far), read from www.sahi.com: magenta buttons on every band (white text),
   white and FAFAFA bands, F5F5F5 cards with neutral hairlines instead of Spring Wood, the near-black stage, and Season
   headings at 500. The dark theme keeps its own surfaces; the buttons stay magenta there too. */
.skin-sahicom { --brand: #C80E7D; --brand-hover: #A50F66; --on-brand: #FFFFFF; --stage: #070709; }
.skin-sahicom :is(.stage, .lesson-cta, .takeaways) { --brand: #C80E7D; --brand-hover: #A50F66; --on-brand: #FFFFFF; }
:root:not([data-theme="dark"]) .skin-sahicom { --bg-alt: #FAFAFA; --bg-soft: #FAFAFA; --surface-2: #F5F5F5; --brand-wash: #F5F5F5; --brand-soft: #E6E6E6; --brand-line: #D3D3D3; --line: #E6E6E6; }
.skin-sahicom :is(.h1, .h2) { font-weight: 500; }
.skip { position: fixed; left: 16px; top: 16px; z-index: 1000; padding: 12px 16px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 500; text-decoration: none; transform: translateY(-200%); transition: transform .2s var(--ease); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.wrap--narrow { --maxw: 880px; }
.wrap--wide { --maxw: 1320px; }
.center { text-align: center; }
.center > * { margin-inline: auto; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1px solid transparent; border-radius: 999px; font: 500 16px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--bg-alt); }
.btn--lg { min-height: 52px; padding: 14px 30px; font-size: 17px; }
.btn--sm { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.btn .chev { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .chev { transform: translateX(3px); }
.stage .btn--line, .on-stage .btn--line { border-color: var(--stage-ink); color: var(--stage-ink); }
.stage .btn--line:hover { background: var(--stage-line); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 2px; }
.stage .link { color: var(--stage-ink); }

/* ---- Header -------------------------------------------------------------- */
/* The site header is shared with every other page: /sahi-nav.css and /sahi-nav.js (markup: scripts/sahi-nav.mjs).
   Pages clear it with --nav-h (above). */
@media (max-width: 1199px) { :root { --nav-h: 88px; } }

/* ---- Breadcrumb ---------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; justify-content: center; color: inherit; text-decoration: none; border-radius: 8px; }
.crumbs a:hover { color: var(--ink); }
.crumbs svg { width: 16px; height: 16px; }
.crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.crumbs [aria-current="page"] { color: var(--ink); }
.stage .crumbs { color: var(--stage-ink-2); }
.stage .crumbs [aria-current="page"], .stage .crumbs a:hover { color: var(--stage-ink); }

/* ---- Bands --------------------------------------------------------------- */
.band { padding: clamp(56px, 8vw, 112px) 0; }
.band--tight { padding: clamp(40px, 5vw, 72px) 0; }
.band--alt { background: var(--bg-alt); }
.band--soft { background: var(--bg-soft); }
/* Two plain white bands in a row read as one: the second drops its top padding. Never after a dark or grey band. */
.band:not(.band--alt):not(.stage):not(.band--soft) + .band:not(.band--alt):not(.stage):not(.band--soft) { padding-top: 0; }
.stage { position: relative; background: var(--stage); color: var(--stage-ink); isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 0%, var(--stage-glow), transparent 70%); pointer-events: none; }
.stage--glow-low::before { background: radial-gradient(ellipse 45% 55% at 50% 60%, var(--stage-glow), transparent 70%); }
.stage--plain::before { display: none; }
:root[data-theme="dark"] .stage { border-block: 1px solid var(--stage-line); }
:root[data-theme="dark"] .stage + .stage { border-top: 0; }

/* Page top: clears the floating header. */
.page-top { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); }

/* ---- Type blocks ----------------------------------------------------------- */
.h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.08; }
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.h4 { font-size: 20px; line-height: 1.3; }
.eyebrow { display: inline-block; margin-bottom: 14px; font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.stage .eyebrow { color: var(--stage-accent); }
.lead { font-size: clamp(16px, 1.45vw, 18px); line-height: 1.6; color: var(--ink-2); }
.stage .lead, .stage .muted { color: var(--stage-ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.fine { font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.head { max-width: 760px; margin: 0 auto clamp(32px, 4.5vw, 56px); text-align: center; }
.head .lead { margin-top: 16px; }
.head--left { margin-inline: 0; text-align: left; }
.prose > * + * { margin-top: 1em; }
.prose a { color: var(--brand-ink); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }

/* ---- Hero ------------------------------------------------------------------ */
.hero { padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0 clamp(48px, 7vw, 96px); text-align: center; }
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero .lead { max-width: 640px; margin: 18px auto 0; }
.hero .lead b, .hero .lead strong { color: inherit; font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__proof { margin-top: 16px; font-size: 14px; font-weight: 500; }
.hero__proof.pipes { margin-top: 16px; font-size: 14px; }
.hero__media { margin: clamp(32px, 5vw, 56px) auto 0; }
.pipes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 16px 0 0; padding: 0; list-style: none; font-size: 16px; }
.pipes li + li::before { content: "|"; margin-inline: 8px; opacity: .6; }
/* On a phone the list wraps; a separator would start the second line, so there is space instead. */
@media (max-width: 640px) { .pipes { gap: 4px 14px; } .pipes li + li::before { content: none; } }

/* Desktop screenshot in a monitor frame (sahi.com's hero and product pages). */
.monitor { width: min(100%, 1040px); margin-inline: auto; }
.monitor__screen { padding: clamp(4px, .6vw, 8px); border: 3px solid color-mix(in srgb, #FAFAFA 40%, transparent); border-radius: 12px; background: #0A0A0A; overflow: hidden; }
.monitor__screen img, .monitor__screen video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #0A0A0A; }
.monitor__stand { width: 18%; height: clamp(28px, 4vw, 52px); margin-inline: auto; background: linear-gradient(90deg, #171717, #404040 50%, #171717); }
.monitor__base { width: 34%; height: 8px; margin-inline: auto; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #272727, #6E6E6E 50%, #272727); }
.band--alt .monitor__screen, .band:not(.stage) .monitor__screen { border-color: #171717; }

/* ---- Split rows: words beside a picture --------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split__txt .lead, .split__txt > p { margin-top: 16px; }
.split__txt .btn, .split__txt .link { margin-top: 28px; }
.split__media img { margin-inline: auto; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; text-align: center; } .split--reverse > :first-child { order: 0; } .split__txt .checks { justify-items: center; } }

/* ---- Cards ----------------------------------------------------------------- */
.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .grid--4 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.band--alt .card { background: var(--surface); }
.band:not(.band--alt):not(.stage) .card { background: var(--surface-2); border-color: transparent; }
.card h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; }
.card p { color: var(--ink-2); font-size: 15px; }
.card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-ink); }
.card__icon svg, .card__icon img { width: 24px; height: 24px; }
.stage .card { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-ink); }
.stage .card p { color: var(--stage-ink-2); }
a.card { text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }

/* Big rounded panel with words and a phone picture (Buzzing stocks, GTT...). */
.panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 5vw, 64px); border-radius: var(--radius); background: var(--bg-alt); overflow: hidden; }
.band--alt .panel { background: var(--surface); }
.panel--reverse > :first-child { order: 2; }
.panel__media img { margin-inline: auto; max-height: 520px; width: auto; }
.panel + .panel { margin-top: clamp(20px, 3vw, 32px); }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } .panel--reverse > :first-child { order: 0; } .panel__media img { max-height: 420px; } }

/* Check list (✓ items). */
.checks { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
:root[data-theme="dark"] .checks li::before, .stage .checks li::before { background-color: var(--brand); }
.dots { margin: 20px 0 0; padding-left: 1.2em; color: var(--ink-2); }
.dots li + li { margin-top: 8px; }

/* ---- Chips (filters, tab rows) ------------------------------------------ */
.chips { display: flex; gap: 10px; margin: 0; padding: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; justify-content: center; overflow: visible; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--bg); color: var(--ink); font: 400 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-selected="true"], .chip[aria-pressed="true"], .chip.is-on, .chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.stage .chip { border-color: var(--stage-line); background: transparent; color: var(--stage-ink); }
.stage .chip[aria-selected="true"], .stage .chip.is-on { background: var(--stage-ink); color: var(--stage); }
/* A chip row that scrolls: arrows at the ends, a fade where it continues. */
.chiprow { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; }
.chiprow .chips { flex: 1; mask-image: linear-gradient(90deg, #0F0F0F calc(100% - 40px), transparent); }
.chiprow.at-end .chips { mask-image: none; }

/* ---- Carousel ------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide, min(86%, 560px)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel__nav { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; transition: background-color .2s, opacity .2s; }
.arrow:hover:not(:disabled) { background: var(--bg-alt); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow svg { width: 18px; height: 18px; }
.stage .arrow { border-color: var(--stage-line); background: transparent; color: var(--stage-ink); }
.carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--hairline); cursor: pointer; transition: width .3s var(--ease), background-color .3s; }
.carousel__dots button[aria-current="true"] { width: 24px; background: var(--ink); }

/* Slide card: a picture over words (Single-screen stocks trading...). */
.slide { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.band--alt .slide { background: var(--surface); }
.slide__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.slide__media img { width: 100%; height: 100%; object-fit: cover; }
.slide__body { padding: 18px 20px 22px; }
.slide__body h3 { font-size: 20px; line-height: 1.3; }
.slide__body p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }

/* ---- Tabs ------------------------------------------------------------------ */
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: tab-in .45s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Accordion (FAQ) ------------------------------------------------------- */
.faq { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 4px; font: 500 17px/1.4 var(--sans); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq .answer { padding: 0 4px 20px; color: var(--ink-2); }
.faq .answer > * + * { margin-top: .8em; }
.faq .answer ul { padding-left: 1.2em; }
.stage .faq, .stage .faq details { border-color: var(--stage-line); }
.stage .faq .answer { color: var(--stage-ink-2); }

/* ---- Tables (pricing) ------------------------------------------------------ */
.table-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { background: var(--bg-alt); font-weight: 600; color: var(--ink); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 500; }
.table td { color: var(--ink-2); }
.stage .table-wrap { border-color: var(--stage-line); background: var(--stage-surface); }
.stage .table th, .stage .table td { border-color: var(--stage-line); }
.stage .table thead th { background: color-mix(in srgb, #FAFAFA 6%, transparent); color: var(--stage-ink); }
.stage .table td { color: var(--stage-ink-2); }
.stage .table tbody th { color: var(--stage-ink); }
.table-hint { display: none; margin-top: 10px; font-size: 13px; color: var(--ink-3); text-align: center; }
@media (max-width: 760px) { .table-hint { display: block; } }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 500 12px/1 var(--sans); }
.tag--buy { background: color-mix(in srgb, #2096A6 18%, transparent); color: var(--up); }
.tag--sell { background: color-mix(in srgb, #C4342E 16%, transparent); color: var(--down); }
/* On the dark stage the light-theme up/down inks are about 2.8:1; use the dark-theme ones. */
.stage .tag--buy { background: color-mix(in srgb, #2096A6 26%, transparent); color: #5ACFE0; }
.stage .tag--sell { background: color-mix(in srgb, #C4342E 26%, transparent); color: #EE807B; }

/* ---- Big price figure ------------------------------------------------------ */
.price-fig { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: clamp(20px, 3vw, 36px) 0 0; font: 400 clamp(96px, 16vw, 200px)/.9 var(--disp); letter-spacing: -.04em; }
.price-fig__cur { font-size: .36em; letter-spacing: 0; }
.price-fig__unit { font: 400 clamp(18px, 2.4vw, 32px)/1 var(--sans); letter-spacing: 0; }

/* ---- Stats ----------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stats li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.stats b { font: 400 clamp(26px, 3vw, 36px)/1.05 var(--disp); }
.stats span { font-size: 14px; color: var(--ink-2); }
.stage .stats li { background: var(--stage-surface); }
.stage .stats span { color: var(--stage-ink-2); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Phone picture with a glow (sahi.com's product shots) ------------------ */
.phone-shot { position: relative; display: grid; place-items: center; }
.phone-shot::before { content: ""; position: absolute; inset: 12% 18%; z-index: -1; border-radius: 50%; background: var(--stage-glow); filter: blur(60px); }
.phone-shot img { max-height: 600px; width: auto; }

/* ---- CTA band -------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 28px; }

/* ---- Video and article cards (Learn) ------------------------------------- */
.tile { display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.band--alt .tile { background: var(--surface); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__play { position: absolute; inset: 0; display: grid; place-items: center; }
.tile__play span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, #0A0A0A 62%, transparent); color: #FFFFFF; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tile__play svg { width: 22px; height: 22px; margin-left: 3px; }
.tile__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 20px; }
.tile__meta { font-size: 13px; color: var(--ink-3); }
.tile__title { font: 500 17px/1.35 var(--sans); color: var(--ink); }
.tile__text { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile__cat { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-ink); font-size: 12px; font-weight: 500; }

/* ---- QR card (desktop only, where it has room) --------------------------- */
.qr { position: fixed; right: 20px; bottom: 96px; z-index: 150; display: none; width: 132px; padding: 12px; border: 1px solid var(--stage-line); border-radius: 14px; background: var(--stage); color: var(--stage-ink); text-align: center; box-shadow: var(--shadow-3); }
.qr p { margin-bottom: 8px; font: 500 13px/1.25 var(--sans); }
.qr img { width: 100%; border-radius: 6px; background: #FFFFFF; }
.qr__close { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--stage-line); border-radius: 50%; background: var(--stage-surface); color: var(--stage-ink); cursor: pointer; }
.qr__close svg { width: 14px; height: 14px; }
/* Only when the gutter beside the content can hold it, so it never covers a page (it did on sahi.com). */
@media (min-width: 1560px) and (min-height: 700px) { .qr { display: block; } }
html.qr-off .qr { display: none; }

/* ---- Theme switch (bottom right, as on the tools pages) ------------------ */
.theme-fab { position: fixed; right: calc(env(safe-area-inset-right) + 20px); bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 150; display: none; place-items: center; width: 48px; height: 48px; border: 1px solid var(--hairline); border-radius: 999px; background: color-mix(in srgb, var(--bg) 86%, transparent); color: var(--ink); box-shadow: var(--shadow-1); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .3s var(--ease), background-color .2s; }
.theme-fab:hover { transform: translateY(-2px); background: var(--bg); }
.theme-fab svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .25s, transform .4s var(--ease); }
.theme-fab .i-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-fab .i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-fab .i-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
@media (min-width: 1200px) { .theme-fab { display: grid; } }

/* ---- Reveal on scroll ------------------------------------------------------
   sahi.com fades sections up as they arrive and fades them out again when they
   leave, so scrolling back up meets blank space. Here a section reveals once
   and stays. Nothing is hidden unless the script is running (html.js) and
   motion is allowed. */
html.js.motion .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
html.js.motion .reveal.is-in { opacity: 1; transform: none; }
html.js.motion .reveal--fade { transform: none; }
html.js.motion .reveal--zoom { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Footer tweaks for /sahi/ (the footer itself is /tools/sahi-footer.css) */
.sahi-site-footer .sf-btn { text-decoration: none; }
.sahi-site-footer address { font-style: normal; }
/* Footer links: at least a 24px target on a phone (sahi.com's were 20px). */
.sahi-site-footer .sf-col__list a { display: inline-flex; align-items: center; min-height: 28px; }
/* The ticker enters from the right instead of starting mid-sentence, and can be paused. */
.sahi-site-footer .sf-ticker__track { padding-left: 100%; }
.sahi-site-footer .sf-ticker.is-paused .sf-ticker__track { animation-play-state: paused; }
.sf-ticker__pause { display: inline-flex; align-items: center; min-height: 28px; margin-left: 10px; padding: 0 10px; border: 1px solid color-mix(in srgb, #FFFFFF 30%, transparent); border-radius: 999px; background: transparent; color: #FFFFFF; font: 500 12px/1 var(--sans); cursor: pointer; vertical-align: middle; }
.sf-ticker__pause:hover { background: color-mix(in srgb, #FFFFFF 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .sf-ticker__pause { display: none; } .sahi-site-footer .sf-ticker__track { padding-left: 0; } }

/* ---- Print ------------------------------------------------------------------ */
@media print { .qr, .theme-fab { display: none !important; } .hero, .page-top { padding-top: 24px; } html.js.motion .reveal { opacity: 1; transform: none; } }
.card > .btn:last-child, .card > .link:last-child { margin-top: auto; align-self: flex-start; }

/* Header actions: Kyro, Open FREE Demat and Login share one height and one type size. */
.nav-actions .kyro, .nav-actions .btn { min-height: 44px; height: 44px; padding-block: 0; font: 500 15px/1 var(--sans); }
.nav-actions .btn { padding-inline: 20px; }
.nav-actions .nav-login { border-color: var(--hairline); }
.nav-actions .nav-login:hover { border-color: var(--ink); background: var(--bg-alt); }
.nav-actions .btn:hover { transform: none; }

/* ---- Report cards: /sahi/bugs/ and the "i" panel on every page ------------- */
.bug { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bug[hidden] { display: none; }
.bug__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bug__tag, .sev { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 12px/1 var(--sans); }
.bug__tag { background: var(--bg-alt); color: var(--ink-2); }
.sev--high { background: color-mix(in srgb, #C4342E 16%, transparent); color: var(--down); }
.sev--medium { background: color-mix(in srgb, #B89367 22%, transparent); color: var(--ink); }
.sev--low { background: color-mix(in srgb, #2096A6 16%, transparent); color: var(--up); }
.sev--change { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.bug__id { display: inline-flex; align-items: center; min-height: 28px; margin-left: auto; padding: 0 6px; border-radius: 6px; font-size: 12px; color: var(--ink-3); text-decoration: none; font-variant-numeric: tabular-nums; }
.bug__title { margin-top: 10px; font: 500 17px/1.4 var(--sans); letter-spacing: 0; }
.bug__detail { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.bug__fix { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--brand-wash); font-size: 15px; color: var(--ink); }
.bug__fix b { font-weight: 600; }
.kind-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.kind-dot--missing { background: #B89367; }
.kind-dot--bad { background: var(--down); }
.kind-dot--other { background: var(--accent); }

/* ---- The "i" button: this page against sahi.com ----------------------------
   Bottom left on every page. Without script it is a link to the page's part of
   /sahi/bugs/; with script it opens the same entries in a side panel. */
.diff-fab { position: fixed; left: calc(env(safe-area-inset-left) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 150; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px 0 10px; border: 1px solid var(--hairline); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font: 500 14px/1 var(--sans); text-decoration: none; box-shadow: var(--shadow-1); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .3s var(--ease), background-color .2s, opacity .3s; }
.diff-fab:hover { transform: translateY(-2px); background: var(--bg); }
.diff-fab svg { flex: none; width: 22px; height: 22px; }
.diff-fab__txt { display: none; }
.diff-fab__n { min-width: 22px; padding: 4px 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { .diff-fab { left: 20px; bottom: 20px; height: 48px; padding: 0 14px 0 12px; } .diff-fab__txt { display: inline; } }
html.sn-hide .diff-fab { opacity: 0; pointer-events: none; }
@media print { .diff-fab { display: none; } }

.diff { width: min(560px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 auto 0 0; padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-3); overflow: hidden; }
.diff[open] { display: flex; flex-direction: column; }
.diff::backdrop { background: color-mix(in srgb, #0A0A0A 46%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .diff[open] { animation: diff-in .32s var(--ease) both; }
  .diff[open]::backdrop { animation: diff-fade .32s ease both; }
}
@keyframes diff-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes diff-fade { from { opacity: 0; } to { opacity: 1; } }
.diff__head { position: relative; padding: 24px 64px 18px 24px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.diff__eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.diff__title { margin-top: 6px; font: 400 clamp(26px, 3vw, 32px)/1.1 var(--disp); letter-spacing: -.01em; }
.diff__meta { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.diff__counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.diff__counts a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; text-decoration: none; }
.diff__counts a:hover { border-color: var(--ink-3); }
.diff__counts b { font-weight: 600; }
.diff__close { position: absolute; top: 18px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.diff__close:hover { background: var(--surface-2); }
.diff__close svg { width: 22px; height: 22px; }
.diff__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 32px; }
.diff__kind { margin-top: 22px; scroll-margin-top: 12px; }
.diff__kind h3 { display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.diff__kind h3 span:last-child { font-weight: 500; color: var(--ink-3); }
.diff__kind .bugs { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.diff__kind .bug { padding: 14px 16px; }
.diff__kind .bug__title { font-size: 16px; }
.diff__kind .bug__detail, .diff__kind .bug__fix { font-size: 14px; }
.diff__empty { margin-top: 22px; color: var(--ink-2); }
.diff__site { margin-top: 28px; padding: 16px; border: 1px dashed var(--hairline); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2); }
.diff__site a { color: var(--ink); }
.diff__foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 24px calc(env(safe-area-inset-bottom) + 14px); border-top: 1px solid var(--line); background: var(--bg-alt); }
.diff__foot .btn { flex: 1 1 auto; }
@media (max-width: 600px) { .diff { width: 100vw; border-right: 0; } .diff__head { padding: 20px 60px 16px 16px; } .diff__body { padding: 4px 16px 28px; } .diff__foot { padding-inline: 16px; } }
html.diff-open { overflow: hidden; }

/* Screens taken in one theme: shown only while the page is in that theme. */
:root[data-theme="dark"] .only-light, :root:not([data-theme="dark"]) .only-dark { display: none !important; }

/* ---- Report screenshots: the same spot on sahi.com and on our copy ---------- */
.shot2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 14px; }
.shot2--phone { grid-template-columns: repeat(2, minmax(0, 220px)); }
.shot2__fig { display: grid; gap: 6px; margin: 0; align-content: start; }
.shot2__fig figcaption { font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.shot2__fig:first-child figcaption { color: var(--down); }
.shot2__link { display: block; max-height: 460px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); }
.shot2__link img { display: block; width: 100%; height: auto; }
.shot2__link:hover { border-color: var(--ink-3); }
.bug-top { margin-top: 14px; }
.bug-top > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; }
.bug-top[open] > summary { margin-bottom: 4px; }
.diff .shot2 { grid-template-columns: 1fr 1fr; gap: 8px; }
.diff .shot2__link { max-height: 260px; }

/* Two app screens side by side in a hero, upright and whole, the second (.duo__b) a little
   lower (owner's screenshots, in the iPhone 18 frame). */
.duo { display: flex; justify-content: center; align-items: flex-start; width: min(100%, 460px); margin-inline: auto; padding-block: 8px 40px; }
.duo img { width: 50%; height: auto; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .16)); }
:root[data-theme="dark"] .duo img { filter: drop-shadow(0 18px 34px rgb(0 0 0 / .55)); }
.duo .duo__b { margin-left: -3%; margin-top: 11%; }
@media (max-width: 860px) { .duo { width: min(100%, 340px); padding-block: 24px 32px; } }