/* huru site styles: fonts, base, and the shared parts (header, footer, modals).
   Colours, type and spacing come from the variables in atoms.css. Page sections get their own styles below as they are designed. */

/* ---------- font: Instrument Sans, self-hosted ---------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 720px) { :root { --gutter: 20px; } }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: var(--bg); padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.textlink { background: none; border: 0; padding: 0; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

.include-error { margin: 0; padding: 16px var(--gutter); background: var(--tone); color: var(--navy); font-size: 14px; }

/* product chip: scaled down on narrow screens (atoms.css keeps 360px) */
@media (max-width: 720px) {
  .edge-chip { width: 240px; gap: 12px; padding: 0 18px 0 16px; }
  .edge-chip img { width: 100px; }
  .edge-chip b { font-size: 13px; }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.logo { display: block; flex: none; }
.logo img { height: 28px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 40px; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: var(--r-pill); padding: 8px 14px; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color .2s; }
.nav-link:hover { border-color: var(--rule); }
/* current page: a hairline pill around the menu item */
.nav-link[aria-current="page"], .nav-link.is-current { border-color: var(--rule); }
.chev { transition: transform .2s; }
.drop-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-actions .btn { padding: 12px 22px; }

/* Products dropdown */
.has-drop { position: relative; }
.drop { position: absolute; top: calc(100% + 12px); left: 0; width: 360px; padding: 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: 0 30px 60px rgba(11, 20, 55, .14); }
.drop[hidden] { display: none; }
.drop-item { display: block; padding: 14px 16px; border-radius: 8px; color: var(--navy); text-decoration: none; transition: background .2s; }
.drop-item b { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.drop-item span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
a.drop-item:hover { background: var(--tone); }
.drop-item[aria-current="page"] { background: var(--tone); }
.drop-item.is-disabled { color: var(--muted-2); cursor: not-allowed; }
.drop-item.is-disabled span { color: var(--muted-2); }
.soon { font-style: normal; font-size: 11px; font-weight: 600; border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 2px 8px; }

.menu-toggle { display: none; padding: 12px 22px; }

/* narrow screens: the menu folds behind the "Menu" button */
@media (max-width: 960px) {
  .header-in { height: 72px; }
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 28px; padding: 16px var(--gutter) 32px; background: var(--bg); border-bottom: 1px solid var(--rule); height: calc(100dvh - 72px); overflow-y: auto; }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--rule); }
  .nav-link { width: 100%; justify-content: space-between; border: 0; border-radius: 0; padding: 18px 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
  .nav-link[aria-current="page"], .nav-link.is-current { border: 0; }
  .nav-link[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
  .drop { position: static; width: auto; padding: 0 0 12px; border: 0; box-shadow: none; background: none; }
  .drop-item { padding: 12px 0; border-radius: 0; }
  a.drop-item:hover, .drop-item[aria-current="page"] { background: none; }
  .drop-item[aria-current="page"] b::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
  /* Log in and Book a meeting: two solid navy buttons at the end of the list */
  .nav-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .nav-actions > .textlink, .nav-actions > .btn { width: 100%; text-align: center; padding: 15px 26px; border: 1px solid var(--navy); border-radius: var(--r-pill); background: var(--navy); color: var(--bg); font-size: 16px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
  .nav-actions > .textlink:hover, .nav-actions > .btn:hover { background: var(--bg); color: var(--navy); box-shadow: var(--hover-shadow); text-decoration: none; }
}

/* ---------- footer: full width, on the deep blue (--band-to) ---------- */
.site-footer { margin-top: 120px; }
.footer-panel { background: var(--band-to); color: var(--band-ink); padding: 72px 0 36px; }
.footer-panel :focus-visible { outline-color: var(--band-ink); }
/* huru logo reversed out to near-white on the navy band (until a light vector version exists) */
.footer-panel .logo img { filter: brightness(0) invert(96%); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin: 20px 0 0; max-width: 22rem; font-size: 15px; color: var(--band-muted); }
.footer-col h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0; line-height: 1.2; color: var(--band-ink); margin-bottom: 16px; }
.footer-col h2::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.footer-col li + li { margin-top: 10px; }
.footer-col a, .footer-col .textlink { font-size: 15px; font-weight: 400; color: var(--band-muted); text-decoration: none; }
.footer-col a:hover, .footer-col .textlink:hover { color: var(--band-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(135, 148, 194, .3); font-size: 12px; color: var(--band-muted); }
.footer-legal p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { color: var(--band-muted); }
.footer-legal a:hover { color: var(--band-ink); }
@media (max-width: 1024px) {
  .cer-guide { padding-top: 56px; }
  .cer-guide-visual { position: relative; inset: auto; height: calc(42.5vw + 110px); }
  .cer-guide .pill-photo { width: 96vw; top: 0; translate: none; }
  .cer-guide .edge-chip { left: var(--gutter); top: calc(42.5vw - 64px); }
  .cer-guide .wrap { display: block; min-height: 0; }
  .cer-guide-copy { width: 100%; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-panel { padding: 56px 0 28px; }
}

/* a closing band marked .joins-footer runs straight into the footer, full width, on the same deep blue */
.joins-footer.cta-band { border-radius: 0; background: var(--band-to); padding-inline: 0; }
body:has(.joins-footer) .site-footer { margin-top: 0; }
body:has(.joins-footer) .footer-panel { padding-top: 0; }
body:has(.joins-footer) .footer-grid { border-top: 1px solid rgba(135, 148, 194, .22); padding-top: 64px; }
@media (max-width: 720px) { body:has(.joins-footer) .footer-grid { padding-top: 48px; } }

/* ---------- modals ---------- */
dialog.modal { border: 0; padding: 0; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--r-panel); background: var(--bg); color: var(--ink); box-shadow: 0 30px 60px rgba(11, 20, 55, .20); }
dialog.modal::backdrop { background: rgba(11, 20, 55, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-in { position: relative; padding: 48px 40px 40px; }
.modal h2 { font-size: clamp(40px, 6vw, 56px); padding-right: 48px; }
.modal .lead { margin: 16px 0 28px; }
.modal-close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.modal-close:hover { background: var(--navy); color: var(--bg); box-shadow: var(--hover-shadow); }
@media (max-width: 520px) { .modal-in { padding: 40px 20px 28px; } }

.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy); }
.form input, .form textarea { font: inherit; font-size: 15px; font-weight: 400; color: var(--navy); background: var(--tone-hi); border: 1px solid var(--rule); border-radius: 8px; padding: 13px 16px; }
.form textarea { resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.form .btn { align-self: flex-start; margin-top: 8px; }
.form-small { margin: 0; font-size: 12px; color: var(--muted); }
.form-status { margin: 0; font-size: 14px; color: var(--navy); }
.form-status:empty { display: none; }

/* product logo (Clic EEG Research): the page title on the product and sleep pages */
.product-logo { height: clamp(52px, 6.4vw, 96px); width: auto; }

/* ---------- page shells (temporary, until each page is designed) ---------- */
.shell { padding: clamp(64px, 10vw, 140px) 0 0; }
.shell h1 { margin-top: 28px; font-size: clamp(56px, 9vw, 132px); }
.shell .lead { margin-top: 28px; }

/* ======================================================================
   Clic EEG Research page (clic-eeg-research.html). Sections are built from the atoms;
   these rules only place them. Prefix: cer-
   ====================================================================== */
.cer { --sec: clamp(96px, 11vw, 168px); }
/* lighter, smaller type on this page (Hannah, 15 Oct 2026: the earlier sizes felt too heavy) */
.cer h2 { font-size: clamp(30px, 3.2vw, 50px); font-weight: 400; line-height: 1.06; letter-spacing: -.018em; }
.cer h2 .soft, .cer-pageline .soft { font-weight: inherit; }
/* small label above a section headline */
.cer-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cta-band .cer-eyebrow { color: var(--band-muted); }
/* sections fade up gently as they scroll into view (site.js); nothing hides without JavaScript or with reduced motion */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.cer h3 { font-weight: 500; letter-spacing: -.008em; }
.cer .lead, .cer p { letter-spacing: .005em; }
.cer sup { font-size: .6em; line-height: 0; }
.cer .lead { margin: 0; }
.cer-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cer-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 128px); }

/* 1. hero: copy left; the sensor in a hand over a pale pill stage entering from the right */
.cer-hero { position: relative; overflow: clip; padding: clamp(40px, 6vw, 96px) 0 clamp(72px, 9vw, 128px); }
.cer-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: min(640px, 48vw); }
.cer-pageline { margin: 24px 0 0; font-size: clamp(46px, 6vw, 92px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; color: var(--navy); }
.cer-pageline .fstop { color: var(--accent); }
.cer .lead { font-size: clamp(17px, 1.35vw, 19px); max-width: 30rem; }
.cer-hero .lead { font-size: clamp(18px, 1.5vw, 21px); max-width: 31rem; }
.cer-hero .lead { margin-top: 36px; }
.cer-hero .cer-btns { margin-top: 36px; }
.cer-hero-visual { position: absolute; inset: 0; pointer-events: none; }
.cer-hero-visual .pill-stage { width: 58%; top: 50%; translate: 0 -42%; }
/* the photo is mirrored so the hand's cut edges sit on the page edge and the section's lower edge, faded out at the bottom */
.cer-hand { position: absolute; width: 32%; right: 0; bottom: 0; scale: -1 1; -webkit-mask-image: linear-gradient(to top, transparent, #000 22%); mask-image: linear-gradient(to top, transparent, #000 22%); }

/* logo ribbon: a slow, looping strip of customer logos (still when the visitor prefers less motion) */
.cer-ribbon { padding-top: clamp(16px, 3vw, 40px); }
.cer .cer-ribbon-title { font-size: 13px; letter-spacing: 0; line-height: 1.2; color: var(--muted); font-weight: 600; }
.cer-ribbon-track { display: flex; overflow: hidden; margin-top: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cer-ribbon-list { display: flex; flex: none; align-items: center; gap: clamp(32px, 5vw, 72px); padding: 28px clamp(16px, 2.5vw, 36px); animation: cer-ribbon 40s linear infinite; }
.cer-ribbon-track:hover .cer-ribbon-list { animation-play-state: paused; }
.cer-ribbon-list li { flex: none; display: grid; place-items: center; height: 44px; min-width: 150px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.cer-ribbon-list img { height: 44px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .75; }
@keyframes cer-ribbon { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .cer-ribbon-list { animation: none; flex-wrap: wrap; justify-content: center; }
  .cer-ribbon-list[aria-hidden="true"] { display: none; }
}

/* 2. problem: the dark section (trial, Hannah 15 Oct 2026). Full width, photo on the right fading into deep navy. */
.cer-dark { position: relative; overflow: clip; margin-top: clamp(56px, 7vw, 104px); padding-block: clamp(96px, 11vw, 168px) clamp(56px, 6vw, 88px); background: var(--band-to); color: var(--band-ink); }
.cer-dark-media { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
.cer-dark-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 22%; }
.cer-dark-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--band-to) 0%, rgba(7, 13, 38, .72) 30%, rgba(7, 13, 38, .12) 65%, rgba(7, 13, 38, .35) 100%), linear-gradient(0deg, var(--band-to) 0%, rgba(7, 13, 38, 0) 40%); }
.cer-dark .need { z-index: 2; left: auto; right: 24px; top: 24px; bottom: auto; transform: none; }
.cer-dark .wrap { position: relative; z-index: 2; }
.cer-dark .soft, .cer-dark .cer-eyebrow { color: var(--band-muted); }
.cer-dark .lead { color: rgba(245, 246, 248, .78); }
.cer-dark :focus-visible { outline-color: var(--band-ink); }
.cer-problem-head { max-width: min(560px, 46vw); }
.cer-problem-head h2 + .lead, .cer-problem-head .cer-trace + .lead { margin-top: 28px; }
.cer-problem-head .lead + .lead { margin-top: 16px; }
.cer-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(72px, 9vw, 136px); }
.cer-points li { display: flex; align-items: flex-start; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(245, 246, 248, .2); }
.cer-points .dot { margin-top: .55em; }
.cer-points p { margin: 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; color: var(--band-ink); }

/* 3. guide: photo pill entering from the left, product chip overlapping its edge */
.cer-guide { position: relative; overflow: clip; padding-block: var(--sec); }
.cer-guide-visual { position: absolute; inset: 0; }
.cer-guide .pill-photo { width: 50vw; top: 50%; translate: 0 -50%; }
.cer-guide .pill-photo img { object-position: 50% 30%; }
.cer-guide .need { left: 58%; top: 24px; bottom: auto; }
/* the photo shows 37.5vw of itself; the chip ends 60px past that; the copy starts 48px after the chip */
.cer-guide .edge-chip { left: calc(37.5vw - 300px); top: calc(50% + 11.07vw - 84px); }
.cer-guide .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; min-height: calc(22.14vw + 140px); }
.cer-guide-copy { width: min(600px, calc(62.5vw - 156px)); display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* 4. proof: results on the lilac data band */
.cer-proof { padding-top: clamp(24px, 4vw, 48px); }
.cer-proof .data-band { gap: clamp(48px, 6vw, 88px); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); }
.cer-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cer-figure { padding: 4px 0 0 clamp(20px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
.cer-figure:first-child { padding-left: 0; border-left: 0; }
.cer-figure-n { margin: 0; font-size: clamp(64px, 7.4vw, 116px); font-weight: 400; line-height: .95; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.cer-figure h3 { margin-top: 24px; font-size: 19px; }
.cer-figure p:not(.cer-figure-n) { margin: 8px 0 0; max-width: 24em; font-size: 14px; color: var(--muted); }

/* 5. benefits: call-outs pointing at the sensor on a centred, whole pill stage */
.cer-benefits { padding-top: var(--sec); }
.cer-benefits-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(40px, 7vw, 128px); align-items: end; }
.cer-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "left stage right"; align-items: center; gap: 32px; margin-top: clamp(56px, 7vw, 104px); }
.cer-feature-stage { grid-area: stage; position: relative; }
.cer-feature-stage .pill-stage { width: 100%; }
.cer-feature-stage img { position: absolute; left: 50%; top: 50%; width: 56%; translate: -50% -50%; }
.cer-calls { display: flex; flex-direction: column; gap: 56px; }
.cer-calls-left { grid-area: left; }
.cer-calls-right { grid-area: right; }
.cer-calls .call h3 { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.cer-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 6. plan: the closing call to action on the navy CTA band */
.cer-plan { margin-top: var(--sec); padding-block: clamp(80px, 9vw, 136px) clamp(48px, 5vw, 72px); }
.cer-plan .cer-split { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
.cer-plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cer-plan .cer-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.cer-plan .cer-steps li, .cer-plan .cer-steps li:last-child { display: block; padding: 28px 0 0; border: 0; border-top: 1px solid rgba(135, 148, 194, .3); }
.cer-plan .cer-step-n { display: block; margin-bottom: 28px; font-size: 15px; }
.cta-band .btn:not(.solid) { border-color: var(--band-ink); color: var(--band-ink); }
.cta-band .btn:not(.solid):hover, .cta-band .btn:not(.solid):focus-visible { background: var(--band-ink); color: var(--navy); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }
.cta-band :focus-visible { outline-color: var(--band-ink); }
.cer-plan .cer-step-n, .cer-plan .cer-steps p { color: var(--band-muted); }
.cer-plan-head .cer-btns { margin-top: 0; }
.cer-steps { list-style: none; margin: 0; padding: 0; }
.cer-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid var(--rule); }
.cer-steps li:last-child { border-bottom: 1px solid var(--rule); }
.cer-step-n { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.cer-steps h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.008em; }
.cer-steps p { margin: 10px 0 0; font-size: 15px; color: var(--muted); }

/* references */
.cer-refs { padding-top: clamp(72px, 8vw, 112px); }
.cer-refs h2 { font-size: 13px; letter-spacing: 0; line-height: 1.2; }
.cer-refs ol { margin: 14px 0 0; padding-left: 1.4em; columns: 2; column-gap: 48px; font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
  .cer-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage stage" "left right"; row-gap: 56px; }
  .cer-feature-stage { width: min(100%, 640px); justify-self: center; }
}
@media (max-width: 1024px) {
  .cer-guide { padding-top: 56px; }
  .cer-guide-visual { position: relative; inset: auto; height: calc(42.5vw + 110px); }
  .cer-guide .pill-photo { width: 96vw; top: 0; translate: none; }
  .cer-guide .edge-chip { left: var(--gutter); top: calc(42.5vw - 64px); }
  .cer-guide .wrap { display: block; min-height: 0; }
  .cer-guide-copy { width: 100%; }
}
@media (max-width: 900px) {
  .cer-split, .cer-benefits-head { grid-template-columns: minmax(0, 1fr); }
  .cer-hero { padding-bottom: 24px; }
  .cer-hero-visual { position: relative; inset: auto; height: 74vw; margin-top: 24px; }
  .cer-hero-visual .pill-stage { width: 118%; translate: 0 -50%; }
  .cer-hand { width: 50%; }
  .cer-dark { padding-top: 0; }
  .cer-problem-head { max-width: none; }
  .cer-dark-media { position: relative; width: 100%; height: 72vw; margin-bottom: -12vw; }
  .cer-dark-media::before { background: linear-gradient(0deg, var(--band-to) 4%, rgba(7, 13, 38, 0) 55%); }
  .cer-points { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 48px; }
  .cer-points li { padding: 20px 0; }
  .cer-figures { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cer-figure, .cer-figure:first-child { padding: 28px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
}
@media (max-width: 720px) {
  .cer-feature { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "left" "right"; }
  .cer-calls .call.right .line-row { flex-direction: row; }
  .cer-guide-visual { height: calc(55vw + 120px); }
  .cer-guide .pill-photo { width: 124vw; }
  .cer-guide .edge-chip { width: 290px; top: calc(55vw - 64px); }
  .cer-guide .edge-chip img { width: 88px; }
  .cer-refs ol { columns: 1; }
  .cer-steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .cer-plan .cer-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tiny teal details (Hannah, 15 Oct 2026: a little more teal, still tiny) ---------- */
/* hairlines that begin with a short teal segment */
.teal-rule { position: relative; }
.teal-rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 1px; background: var(--accent); }
/* a short teal line above each result figure */
.cer-figure::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 22px; background: var(--accent); }
/* step numbers on the closing band */
.cer-plan .cer-step-n { color: var(--accent); }
/* a small EEG trace, drawn once when it scrolls into view */
.cer-trace { display: block; width: 132px; height: 28px; margin: 28px 0 0; overflow: visible; }
.cer-trace path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.js-reveal .cer-trace path { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.6s ease .3s; }
.js-reveal .is-in .cer-trace path { stroke-dashoffset: 0; }

/* ======================================================================
   Sleep studies page (sleep-studies.html). Uses the cer- sections from the
   product page plus these. Prefix: slp-
   ====================================================================== */
img.multiply { mix-blend-mode: multiply; }
.slp .cer-pageline { margin-top: 28px; font-size: clamp(42px, 4.8vw, 76px); }
.slp .cer-hero-copy { max-width: min(720px, 48vw); }
@media (min-width: 1100px) { .slp .cer-hero-copy { max-width: min(720px, 52vw); } }
/* the logo sits above the title as a smaller mark, so the title leads */
.slp-logo .product-logo { height: clamp(36px, 3.6vw, 52px); }
.slp-head .lead { margin-top: 28px; }
.slp-head-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(40px, 7vw, 128px); align-items: end; }
.slp-head-split .lead { margin-top: 0; }
.slp-n { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* full-width lilac bands, so neighbouring sections never run together */
.slp-band { position: relative; overflow: clip; background: var(--tone); padding-block: clamp(96px, 11vw, 160px); }
.slp-band > .wrap { position: relative; z-index: 1; }

/* the pill as a hairline outline: a quieter use of the brand shape, cut flat by the page edge */
.pill-line { position: absolute; aspect-ratio: 2.2585; height: auto; overflow: visible; pointer-events: none; }
.pill-line path { fill: none; stroke-width: 1; }
.slp-built .pill-line { width: 46vw; right: -16vw; top: -13vw; }
.slp-built .pill-line path { stroke: rgba(255, 255, 255, .9); }

/* problem: the three tools and their limits, each in a white card on the lilac */
.slp-trades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 72px); }
.slp-trade { display: flex; flex-direction: column; padding: 24px 24px 26px; border-radius: var(--r-card); background: var(--bg); }
.cer .slp-trade h3 { margin-top: 28px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
.slp-trade p { margin: 10px 0 0; max-width: 22em; font-size: 15px; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* solution: the dark photo section, with buttons on the deep blue */
.slp-solution { margin-top: 0; padding-block: clamp(120px, 13vw, 200px); }
.cer-dark .btn.solid { background: var(--bg); border-color: var(--bg); color: var(--navy); }
.cer-dark .btn.solid:hover, .cer-dark .btn.solid:focus-visible { background: transparent; color: var(--bg); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }
.cer-dark .btn:not(.solid) { border-color: var(--band-ink); color: var(--band-ink); }
.cer-dark .btn:not(.solid):hover, .cer-dark .btn:not(.solid):focus-visible { background: var(--band-ink); color: var(--navy); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }
.slp-solution .cer-btns { margin-top: 36px; }
.slp-solution .cer-dark-media img { object-position: 45% 40%; }

/* partner: a rectangular photo with the pill stage behind it (motif 3) */
.slp-partner { overflow: clip; padding-block: var(--sec); }
.slp-partner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 128px); align-items: center; }
/* as in board frames 2A and P1: the pill sits low, its top about halfway down the photo, running below it and off the page edge */
.slp-partner-visual { position: relative; padding: 0 0 22%; }
.slp-partner-visual .pill-stage { position: absolute; width: 150%; left: -40%; bottom: 0; }
.slp-partner-visual .photo-frame { position: relative; z-index: 1; width: 78%; margin-left: 11%; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px rgba(11, 20, 55, .16); }
.slp-partner-visual .photo-frame img { height: 100%; object-position: 30% 40%; }
.slp-partner-copy .lead { margin-top: 28px; }
.slp-rows { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.slp-rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-top: 1px solid var(--rule); }
.slp-rows li:last-child { border-bottom: 1px solid var(--rule); }
.slp-rows h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; line-height: 1.15; }
.slp-rows p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }

/* device slide: feature call-outs either side of the sensor (board frame 3), specifications along the bottom */
.slp-device { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.slp-device-side { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.slp-call .slp-icon { width: 22px; height: 22px; }
.cer .slp-call h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.slp-call p { font-size: 14px; }
.slp-device-cta { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 40px); }
.slp-specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.5vw, 40px); margin: clamp(32px, 4vw, 56px) 0 0; }
.slp-specs div { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.slp-specs div::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.slp-specs .slp-icon { grid-row: span 2; }
.slp-specs dt { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.slp-specs dd { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* built around your research: the lilac band holding the slides, opened by a centred heading and three points */
.slp-built-head { text-align: center; }
.slp-built-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; }
.slp-built-points li { position: relative; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--navy) 16%, transparent); }
/* hover: a navy line draws across the hairline, the number darkens and the text lifts slightly (no teal on hover).
   Used on the Built around your research points and the Getting started steps. */
.slp-built-points li, .slp-step-list li, .slp-rows li { position: relative; }
.slp-built-points li::after, .slp-step-list li::after, .slp-rows li::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--navy); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.slp-built-points li:hover::after, .slp-step-list li:hover::after, .slp-rows li:hover::after { width: 100%; }
.slp-rows .slp-n, .slp-rows h3, .slp-rows p { transition: color .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.slp-rows li:hover .slp-n, .slp-rows li:hover p { color: var(--navy); }
.slp-rows li:hover h3, .slp-rows li:hover p { transform: translateX(6px); }
.slp-built-points .slp-n, .slp-built-points p, .slp-step-list h3, .slp-step-list p { transition: color .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.slp-built-points li:hover .slp-n { color: var(--navy); }
.slp-built-points li:hover p, .slp-step-list li:hover h3, .slp-step-list li:hover p { transform: translateY(-4px); }
.slp-step-list li:hover p { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .slp-built-points li::after, .slp-step-list li::after, .slp-built-points p, .slp-step-list h3, .slp-step-list p { transition: none; } }
.slp-built-points p { margin: 20px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; color: var(--navy); }
.slp-slides { margin-top: clamp(56px, 7vw, 104px); }
.slp-slides-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; margin-bottom: 28px; }
.cer .slp-slides-title { max-width: 18em; font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; }
.slp-tablist { display: flex; flex-wrap: wrap; gap: 8px; }
.slp-tab { font: inherit; font-size: 15px; font-weight: 500; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent); background: transparent; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.slp-tab:hover { border-color: var(--navy); }
.slp-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--bg); }
.slp-stage { display: grid; min-height: min(78vh, 720px); border-radius: var(--r-panel); background: var(--bg); box-shadow: 0 30px 60px rgba(11, 20, 55, .08); overflow: hidden; perspective: 1600px; }
.slp-slide { grid-area: 1 / 1; display: flex; align-items: center; padding: clamp(40px, 5vw, 80px) clamp(24px, 4.5vw, 72px); }
.slp-slide > * { width: 100%; }
.slp-slide[hidden] { display: none; }
.slp-slide.enter-next { animation: slp-in-next .75s cubic-bezier(.2, .7, .2, 1); }
.slp-slide.enter-prev { animation: slp-in-prev .75s cubic-bezier(.2, .7, .2, 1); }
@keyframes slp-in-next { from { opacity: 0; transform: translateX(6%) rotateY(-10deg); } to { opacity: 1; transform: none; } }
@keyframes slp-in-prev { from { opacity: 0; transform: translateX(-6%) rotateY(10deg); } to { opacity: 1; transform: none; } }
.slp-slide-h { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted-2); }
.slp .call h3 { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.2; }
.slp-icon { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.slp-icon .fill { fill: var(--accent); stroke: none; }
.cer .slp-carousel { position: relative; }
.slp-carousel .pill-stage { width: 100%; }
.slp-carousel-frames { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.slp-carousel-frames li { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 1s ease; }
.slp-carousel-frames li.is-active { opacity: 1; }
.slp-carousel-frames { clip-path: url(#sensorPill); }
.slp-carousel-frames img { width: 60%; transform: scale(var(--z, 1)) rotate(var(--r, 0deg)) translate(var(--x, 0), var(--y, 0)); transition: transform 3.4s ease-out; }
/* stand-in views: each frame shows the sensor at a different zoom and angle until the real exploded views arrive */
.slp-carousel-frames li:nth-child(1) img { --z: 1; }
.slp-carousel-frames li:nth-child(2) img { --z: 1.6; --r: -8deg; --x: 8%; }
.slp-carousel-frames li:nth-child(3) img { --z: .7; --r: 12deg; }
.slp-carousel-frames li:nth-child(4) img { --z: 1.9; --x: -12%; --y: 6%; }
.slp-carousel-frames li:nth-child(5) img { --z: 1.25; --r: 180deg; }
/* the active view drifts in slightly as it appears */
.slp-carousel-frames li:not(.is-active) img { transform: scale(calc(var(--z, 1) * .94)) rotate(var(--r, 0deg)) translate(var(--x, 0), var(--y, 0)); }
.slp-dots { position: absolute; left: 50%; bottom: -32px; translate: -50% 0; display: flex; gap: 8px; }
.slp-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--rule); transition: width .4s, background .4s; }
.slp-dots i.is-active { width: 20px; background: var(--accent); }
.slp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.slp-pair-copy { display: flex; flex-direction: column; gap: 28px; }
.slp-pair-copy .lead { margin-top: -8px; }
.slp-app-visual { position: relative; }
.slp-app-visual .pill-stage { width: 100%; }
.slp-phone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 22%; aspect-ratio: 9 / 19; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--rule); background: var(--bg); box-shadow: 0 30px 60px rgba(11, 20, 55, .20); font-size: 13px; color: var(--muted-2); }
/* the data: chart card with its teal glow, running off the panel's right edge */
.slp-data { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); }
.slp-data-chart { margin-right: calc(-1 * clamp(24px, 4.5vw, 72px) - 14%); }
.slp-data-chart img { display: block; width: 100%; height: auto; border-radius: var(--r-card); box-shadow: 0 5px 14px -2px rgba(18, 181, 166, .85), 0 1px 4px rgba(18, 181, 166, .6); }
.slp-slides-nav { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 24px; }
.slp-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.slp-arrow:hover, .slp-arrow:focus-visible { background: var(--navy); color: var(--bg); box-shadow: var(--hover-shadow); }
.slp-count { min-width: 3.5em; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slp-count b { color: var(--navy); font-weight: 600; }

/* proof: figures on hairlines, then a row of case study cards */
.slp-proof { padding-block: var(--sec); }
.slp-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--rule); }
.slp-figures .cer-figure-n { font-size: clamp(48px, 5.2vw, 84px); }
.slp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(56px, 7vw, 96px); }
.slp-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; background: var(--bg); transition: box-shadow .25s, transform .25s; }
.slp-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-3px); }
.slp-card-photo { position: relative; aspect-ratio: 16 / 10; background: var(--tone); }
.slp-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.slp-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 26px; }
.slp-card-body h3 { font-size: 21px; font-weight: 500; }
.slp-card-body p { flex: 1; margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.slp-card .btn { padding: 11px 20px; font-size: 14px; }

/* closing band: the lighter navy, so it reads apart from the deep blue footer */
.slp-steps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 40px; }
.slp-step-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; }
.slp-step-list li { padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--navy) 16%, transparent); }
.slp-step-n { display: block; font-size: clamp(32px, 2.8vw, 40px); font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.slp-step-list h3 { margin-top: clamp(28px, 3vw, 44px); font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.15; }
.slp-step-list p { margin: 12px 0 0; max-width: 24em; font-size: 16px; color: var(--muted); }

/* plan your research: a deep blue panel on the light page, so it stands alone above the footer */
.slp-plan { padding-block: clamp(80px, 9vw, 136px) clamp(40px, 5vw, 64px); }
.slp-plan-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(72px, 9vw, 136px) clamp(24px, 5vw, 80px); border-radius: var(--r-panel); background: var(--band-to); color: var(--band-ink); }
.slp-plan-panel > :not(.pill-line) { position: relative; z-index: 1; }
.slp-plan-panel .soft { color: var(--band-muted); }
.slp-plan-panel p { max-width: 34rem; margin: 24px 0 0; font-size: clamp(17px, 1.35vw, 19px); color: rgba(245, 246, 248, .78); }
.slp-plan-panel .cer-btns { justify-content: center; margin-top: 40px; }
.slp-plan-panel .btn.solid { background: var(--bg); border-color: var(--bg); color: var(--navy); }
.slp-plan-panel .btn.solid:hover, .slp-plan-panel .btn.solid:focus-visible { background: transparent; color: var(--bg); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }
.slp-plan-panel .btn:not(.solid) { border-color: var(--band-ink); color: var(--band-ink); }
.slp-plan-panel .btn:not(.solid):hover, .slp-plan-panel .btn:not(.solid):focus-visible { background: var(--band-ink); color: var(--navy); box-shadow: 0 10px 24px rgba(135, 148, 194, .28); }
.slp-plan-panel :focus-visible { outline-color: var(--band-ink); }
.slp-plan-panel .pill-line { width: 52%; right: -20%; bottom: -46%; }
.slp-plan-panel .pill-line path { stroke: rgba(18, 181, 166, .45); }
.slp-regulatory { text-align: center; margin: 28px 0 0; font-size: 12px; color: var(--muted); }
body:has(.slp-plan) .site-footer { margin-top: 0; }

/* case study overlay: a light box over the page; the close button stays in view while it scrolls */
dialog.case-overlay { width: min(1040px, calc(100% - 32px)); }
.case-close-bar { position: sticky; top: 0; z-index: 5; height: 0; display: flex; justify-content: flex-end; }
.case-close-bar .modal-close { position: relative; top: 20px; right: 20px; background: var(--bg); box-shadow: 0 6px 18px rgba(11, 20, 55, .12); }
.case-in { position: relative; padding: clamp(28px, 5vw, 64px); }
.case-in h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; line-height: 1.06; letter-spacing: -.015em; padding-right: 56px; }
.case-in h2 .soft { font-weight: inherit; }
.case-photo { margin-top: 32px; aspect-ratio: 16 / 7; }
.case-photo img { height: 100%; object-position: 50% 30%; }
.case-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 40px; }
.case-text h3 { margin-top: 28px; font-size: 19px; font-weight: 500; }
.case-text h3:first-child { margin-top: 0; }
.case-text p { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.case-used { align-self: start; padding: 28px; border-radius: var(--r-card); background: var(--tone); }
.case-used h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.case-used ul { list-style: none; margin: 0 0 24px; padding: 0; }
.case-used li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.case-label { margin: 32px 0 0; font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) {
  .slp-device, .slp-pair, .slp-data { grid-template-columns: minmax(0, 1fr); }
  .slp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slp-call.right .line-row { flex-direction: row; }
  .slp-carousel { order: -1; width: min(100%, 560px); justify-self: center; margin-bottom: 24px; }
  .slp-app-visual, .slp-data-chart { order: -1; }
  .slp-data-chart { margin-right: calc(-1 * clamp(24px, 4.5vw, 72px)); }
  .slp-stage { min-height: 0; }
  .slp-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .slp-figures .cer-figure:nth-child(3) { padding-left: 0; border-left: 0; }
  .slp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cer-hero-copy, .slp .cer-hero-copy { max-width: 640px; }
  .slp-head-split, .case-body, .slp-partner-grid { grid-template-columns: minmax(0, 1fr); }
  .slp-trades, .slp-step-list, .slp-built-points { grid-template-columns: minmax(0, 1fr); }
  .slp-trade { min-height: 0; }
  .slp-partner-visual { width: min(100%, 520px); }
  .slp-solution { padding-top: 0; }
}
@media (max-width: 720px) {
  .slp-figures, .slp-cards, .slp-specs { grid-template-columns: minmax(0, 1fr); }
  .slp-figures .cer-figure { padding-left: 0; border-left: 0; }
  .slp-rows li { grid-template-columns: 36px minmax(0, 1fr); }
  .slp-phone { width: 30%; }
  .slp-slides-nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .slp-slide.enter-next, .slp-slide.enter-prev { animation: none; }
  .slp-carousel-frames li { transition: none; }
  .slp-card:hover { transform: none; }
}

/* REVIEW BAR: version switcher for reviewing designs only. Remove with the bar before publishing. */
.review-bar { position: fixed; z-index: 60; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-pill); background: var(--navy); box-shadow: 0 10px 30px rgba(11, 20, 55, .3); font-size: 13px; }
.review-bar span { padding: 0 10px 0 12px; color: var(--band-muted); }
.review-bar a { padding: 8px 14px; border-radius: var(--r-pill); color: var(--band-ink); text-decoration: none; }
.review-bar a[aria-current="page"] { background: var(--bg); color: var(--navy); }
.review-bar { max-width: calc(100% - 32px); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.review-bar a, .review-bar span { flex: none; }