/* ==========================================================================
   Gen 0 styles: code recreation of the live Framer site (pre new direction)
   Breakpoints follow the Figma boards: Desktop 1440, Tablet 1024, Mobile 390.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--text-brand-primary);
  background: var(--surface-neutral-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-400);
  top: -100px;
  z-index: 100;
  padding: var(--space-300) var(--space-400);
  background: var(--surface-brand-primary);
  color: var(--text-brand-on-brand);
  border-radius: var(--radius-200);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-400); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

a { color: inherit; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* width: 100% matters: auto margins inside a grid would otherwise shrink the column to its text */
.reading { width: 100%; max-width: var(--col-reading); margin-inline: auto; }
.narrow { width: 100%; max-width: var(--col-narrow); margin-inline: auto; }

main > section + section,
.stack > * + * { margin-top: var(--section-gap); }
/* Home: more air between major sections (was the 64–96px case study gap) */
main > section + section { margin-top: clamp(96px, 11vw, 160px); }

/* ---------- Header / nav ---------- */
.site-header { background: var(--surface-neutral-primary); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-600);
  padding-block: var(--space-600);
  border-bottom: 1px solid var(--border-neutral-primary);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-weight: 700;
  color: var(--text-neutral-primary);
  text-decoration: none;
  padding-block: 4px; margin-block: -4px; /* 30px tap target, no layout change */
}
.brand__dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--text-neutral-primary);
  flex: none;
}
.site-nav { display: flex; align-items: center; gap: var(--space-600); }
.site-nav ul { display: flex; gap: var(--space-600); list-style: none; }
.site-nav a:not(.btn) {
  display: inline-block;
  padding: var(--space-300) 10px;
  font-size: var(--type-body-small);
  color: var(--text-neutral-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

/* ---------- Buttons ---------- */
/* Our own :active feedback replaces the grey iOS tap flash (it covered whole cards via the stretched link) */
a, button, summary { -webkit-tap-highlight-color: transparent; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  /* Figma strokes sit inside the frame, so padding gives back the 1px border: 40px tall */
  padding: calc(var(--space-300) - 1px) calc(var(--space-400) - 1px);
  min-height: 40px;
  font-size: var(--type-body);
  line-height: 1;
  color: var(--text-brand-on-brand);
  background: var(--surface-brand-primary);
  border: 1px solid var(--border-brand-primary);
  border-radius: var(--radius-200);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--small { padding: calc(var(--space-200) - 1px) calc(var(--space-400) - 1px); min-height: 36px; font-size: var(--type-body-small); line-height: 1.4; }

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-200); list-style: none; }
.tag {
  display: inline-flex;
  padding: var(--space-200) var(--space-400);
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-neutral-primary);
  background: var(--surface-neutral-tertiary);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: var(--type-caption);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-neutral-secondary);
}
.h-hero {
  font-size: var(--type-hero);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-hero);
  color: var(--text-brand-primary);
  text-wrap: balance;
}
.h-section {
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-section);
  color: var(--text-brand-primary);
}
.h-subsection {
  font-size: var(--type-subsection);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-section);
  color: var(--text-neutral-primary);
}
.body-muted { color: var(--text-neutral-secondary); }
p, li, figcaption { text-wrap: pretty; }
.prose > * + * { margin-top: 1.4em; }
.prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: 0; }
.prose a { text-underline-offset: 3px; word-break: break-word; }
.prose strong { color: var(--text-brand-primary); }

/* ---------- Home: hero ---------- */
.hero {
  padding-block: var(--space-600);
  text-align: center;
}
.hero__portrait {
  position: relative;
  width: min(384px, 100%);
  aspect-ratio: 384 / 366;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
}
.hero__portrait img {
  position: absolute;
  left: 8.12%;
  top: -11.4%;
  width: 83.76%;
  height: auto;
}
.hero__eyebrow { margin-bottom: 10px; }
.hero .h-hero { max-width: var(--page-max); margin-inline: auto; }

/* ---------- Home: case study cards ---------- */
.work { margin-top: var(--section-gap); }
.work__list { list-style: none; display: grid; gap: var(--space-1200); }
.work-card {
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: var(--space-600);
  padding: var(--space-1200);
  background: var(--surface-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-400);
}
.work-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-800);
  min-width: 0;
}
.work-card__header { display: grid; gap: var(--space-400); }
.work-card__title { margin-bottom: var(--space-200); }
.work-card__desc { color: var(--text-neutral-secondary); }
.work-card__cta { align-self: flex-start; }
.work-card__media {
  position: relative;
  width: 288px;
  aspect-ratio: 1;
  border-radius: var(--radius-300);
  overflow: hidden;
  background: var(--surface-neutral-secondary-hover);
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card__media--verizon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--surface-cream);
}
.work-card__media--verizon img { width: 141px; height: 126px; object-fit: contain; }
.work-card__wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--verizon-red);
  line-height: 1.2;
}
.work-card__media--wheels-up img { object-position: 9% 100%; }
.work-card__media--brand-visual { background: #fff; }
.work-card__media--brand-visual::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--border-neutral-primary); border-radius: inherit; pointer-events: none; }
.work-card__media--brand-visual img { object-position: 0% 50%; }

/* ---------- Home: split sections (Capabilities, About, Experience) ---------- */
.split {
  display: grid;
  grid-template-columns: var(--col-side) minmax(0, var(--col-reading));
  gap: var(--space-600);
  justify-content: center;
}
.split__title { color: var(--text-neutral-primary); }

.capabilities {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
}
/* What I bring: three proof cards. The whole card is the link; 03 plays a coded motion specimen. */
.bring { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-600); }
.bring__item { display: flex; }
.bring__card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-300); color: inherit; text-decoration: none; }
.bring__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-300); overflow: hidden; background: var(--surface-neutral-secondary-hover); margin-bottom: var(--space-200); }
.bring__media img { width: 100%; height: 100%; object-fit: cover; }
.bring__num { font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1; color: var(--text-brand-secondary); }
.bring__title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-brand-primary); }
.bring__body { font-size: var(--type-body-small); line-height: 1.55; color: var(--text-brand-secondary); }
.bring__proof { margin-top: auto; padding-top: var(--space-200); display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--type-body-small); font-weight: 700; color: var(--text-brand-primary); }
.bring__proof--static { font-weight: 400; color: var(--text-brand-secondary); }
.bring__arrow { display: inline-block; transition: transform 160ms var(--ease-out); }
.bring__media { transition: transform 100ms var(--ease-out); }
a.bring__card:active .bring__media { transform: scale(0.99); }
a.bring__card:focus-visible { outline: 2px solid var(--border-brand-primary); outline-offset: 6px; border-radius: var(--radius-300); }
@media (hover: hover) and (pointer: fine) {
  a.bring__card:hover .bring__arrow { transform: translateX(3px); }
  a.bring__card:hover .bring__proof { text-decoration: underline; text-underline-offset: 3px; }
}

/* Staggered entrance: items rise one after another (70ms apart), using the site's reveal curve */
.motion [data-reveal="stagger"] { opacity: 1; }
.motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(12px); transition: opacity 450ms var(--ease-reveal), transform 450ms var(--ease-reveal); }
.motion [data-reveal="stagger"] > :nth-child(2) { transition-delay: 70ms; }
.motion [data-reveal="stagger"] > :nth-child(3) { transition-delay: 140ms; }
.motion [data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }

/* Motion specimen: sanitized wireframes, rebuilt for this site. Scenes rotate via main.js (data-scene). */
.bring__media--specimen { background: #1e1e1e; }
.specimen { position: absolute; inset: 0; contain: layout paint; --wf: #3d3d3d; --wf-hi: #5a5a5a; --accent: #0047ff; }
.specimen__scene { position: absolute; inset: 14% 12% 22%; display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; transition: opacity 250ms var(--ease-out); }
.specimen:not([data-scene]) .specimen__scene--accordion,
.specimen[data-scene="accordion"] .specimen__scene--accordion,
.specimen[data-scene="list"] .specimen__scene--list,
.specimen[data-scene="carousel"] .specimen__scene--carousel { opacity: 1; }
.specimen__label { position: absolute; left: 12%; bottom: 8%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: #5c5c5c; }
.bring__media--cream { background: var(--surface-cream); }

/* Flow specimen (card 01): entry, a permission decision, then a protected state */
.specimen--flow { --accent: #0047ff; }
.wf-flow { position: absolute; inset: 12% 8% 22%; display: flex; align-items: center; gap: 4px; }
.wf-phone { flex: 1; aspect-ratio: 9 / 16; max-height: 100%; border: 1px solid #4a4a4a; border-radius: 8px; padding: 10px 7px; display: flex; flex-direction: column; gap: 6px; transition: border-color 300ms ease, transform 300ms var(--ease-out); }
.wf-phone .wf-bar { height: 4px; }
.wf-phone .wf-bar--title { height: 5px; }
.wf-cta { margin-top: auto; height: 9px; border-radius: 5px; background: #4a4a4a; transition: background-color 300ms ease; }
.wf-row { display: flex; align-items: center; gap: 5px; }
.wf-row .wf-bar { flex: 1; }
.wf-toggle { flex: none; position: relative; width: 14px; height: 8px; border-radius: 4px; background: #4a4a4a; transition: background-color 250ms ease; }
.wf-toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: #bdbdbd; transition: transform 250ms var(--ease-out); }
.wf-ring { flex: none; align-self: center; width: 78%; margin: auto 0 6px; }
.wf-ring svg { display: block; width: 100%; transform: rotate(-90deg); }
.wf-ring circle { fill: none; stroke-width: 4; }
.wf-ring__track { stroke: #3a3a3a; }
.wf-ring__fill { stroke: var(--accent); stroke-dasharray: 94.25; stroke-dashoffset: 94.25; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease-out); }
.wf-link { flex: none; width: 10px; height: 2px; background: #3a3a3a; overflow: hidden; }
.wf-link span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.specimen--flow[data-at="1"] [data-step="1"],
.specimen--flow[data-at="2"] [data-step="2"],
.specimen--flow[data-at="3"] [data-step="3"] { border-color: var(--accent); transform: translateY(-3px); }
.specimen--flow[data-at="1"] [data-step="1"] .wf-cta { background: var(--accent); }
.specimen--flow[data-at="2"] .wf-link:nth-of-type(1) span,
.specimen--flow[data-at="3"] .wf-link span { transform: scaleX(1); }
.specimen--flow[data-toggles="1"] .wf-bar--title + .wf-row .wf-toggle,
.specimen--flow[data-toggles="2"] .wf-toggle { background: var(--accent); }
.specimen--flow[data-toggles="1"] .wf-bar--title + .wf-row .wf-toggle::after,
.specimen--flow[data-toggles="2"] .wf-toggle::after { transform: translateX(6px); background: #fff; }
.specimen--flow[data-at="3"] .wf-ring__fill { stroke-dashoffset: 0; } /* fills to 100% */

/* Slots specimen (card 02): parts snap into a template, then the brand theme swaps */
.specimen--slots { --accent: #0047ff; --r: 3px; }
.specimen--slots[data-theme="b"] { --accent: #c2410c; --r: 10px; }
.wf-frame { position: absolute; inset: 12% 12% 22%; display: flex; flex-direction: column; gap: 8px; }
.wf-frame__bar { height: 6px; width: 40%; border-radius: 3px; background: #4a4a4a; }
.wf-slots { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr auto; gap: 8px; }
.wf-slot { position: relative; border: 1px dashed #4a4a4a; border-radius: var(--r); transition: border-color 300ms ease, border-radius 300ms var(--ease-out); }
.wf-slot--media { grid-row: 1 / 3; }
.wf-slot--text { padding: 8px; }
.wf-slot--action { padding: 6px 8px; display: flex; align-items: center; }
.specimen--slots.is-filled .wf-slot { border-color: transparent; }
.wf-part { opacity: 0; transform: translateY(-10px) scale(0.96); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), background-color 300ms ease, border-radius 300ms var(--ease-out); }
.specimen--slots.is-filled .wf-part { opacity: 1; transform: none; }
.specimen--slots.is-filled .wf-slot--text .wf-part { transition-delay: 70ms; }
.specimen--slots.is-filled .wf-slot--action .wf-part { transition-delay: 140ms; }
.wf-part--media { position: absolute; inset: 0; border-radius: var(--r); background: #444; }
.wf-part--text, .wf-part--list { position: absolute; inset: 8px; display: grid; gap: 5px; align-content: start; }
.wf-part--text .wf-bar--title { background: var(--accent); }
.specimen--slots .wf-part--list,
.specimen--slots.is-filled .wf-part--list { opacity: 0; transform: translateY(6px); }
.specimen--slots.is-filled[data-swap="list"] .wf-part--text { opacity: 0; transform: translateY(-6px); transition-delay: 0ms; }
.specimen--slots.is-filled[data-swap="list"] .wf-part--list { opacity: 1; transform: none; transition-delay: 120ms; }
.wf-li-row { display: flex; align-items: center; gap: 6px; }
.wf-li-row .wf-icon { width: 8px; height: 8px; background: var(--accent); border-radius: calc(var(--r) / 2); transition: background-color 300ms ease; }
.wf-part--button { display: block; height: 14px; width: 60%; border-radius: var(--r); background: var(--accent); }

.wf-bar { display: block; height: 6px; border-radius: 3px; background: var(--wf); width: 100%; }
.wf-bar--title { width: 55%; height: 7px; background: var(--wf-hi); }
.wf-bar--short { width: 60%; }

.wf-acc { border-bottom: 1px solid #333; padding-bottom: 8px; }
.wf-acc__head { display: flex; align-items: center; justify-content: space-between; }
.wf-plus { position: relative; width: 10px; height: 10px; }
.wf-plus::before, .wf-plus::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px; background: #9a9a9a; transition: transform 300ms var(--ease-out); }
.wf-plus::after { transform: rotate(90deg); }
.wf-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.wf-acc__body > div { overflow: hidden; display: grid; gap: 5px; }
.wf-acc__body > div > :first-child { margin-top: 8px; }
.wf-acc.is-open .wf-acc__body { grid-template-rows: 1fr; }
.wf-acc.is-open .wf-plus::after { transform: rotate(0deg); }
.wf-acc.is-open .wf-bar--title { background: var(--accent); }

.wf-li { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.wf-li:nth-child(2) { transition-delay: 70ms; } .wf-li:nth-child(3) { transition-delay: 140ms; } .wf-li:nth-child(4) { transition-delay: 210ms; }
.wf-icon { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.specimen[data-scene="list"] .wf-li { opacity: 1; transform: none; }

.specimen__scene--carousel { overflow: hidden; }
.wf-track { display: flex; gap: 8px; transform: translateX(0); transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1); }
.wf-slide { flex: none; width: 62%; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--wf); }
.wf-slide:nth-child(2) { background: var(--wf-hi); }
.wf-dots { display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
.wf-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--wf); transition: background-color 300ms ease; }
.specimen[data-slide="0"] .wf-dots span:nth-child(1), .specimen[data-slide="1"] .wf-dots span:nth-child(2), .specimen[data-slide="2"] .wf-dots span:nth-child(3) { background: #d9d9d9; }
.specimen[data-slide="1"] .wf-track { transform: translateX(calc(-62% - 8px)); }
.specimen[data-slide="2"] .wf-track { transform: translateX(calc(-124% - 16px)); }

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-400);
  padding: var(--space-600);
  background: var(--surface-neutral-primary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-300);
  font-size: var(--type-body-small);
  color: var(--text-brand-primary);
}
.card ul { padding-left: 1.3em; }

.about__eyebrow { font-weight: 700; margin-bottom: var(--space-200); }
.about__intro {
  font-size: var(--type-subsection);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-section);
  color: var(--text-brand-primary);
}
.about__body { margin-top: 1.4em; }
.about__body p + p { margin-top: 1.4em; }
.about .btn { margin-top: var(--space-600); }
/* About: availability, proof strip, tools */
.about__status { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-600); padding: 8px 14px; border: 1px solid var(--border-neutral-primary); border-radius: 999px; font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1; color: var(--text-brand-secondary); }
.about__dot { width: 8px; height: 8px; border-radius: 50%; background: #1f8a4c; flex: none; }
.about__facts { list-style: none; margin: var(--space-800) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-600); }
.about__facts li { border-top: 1px solid var(--border-neutral-primary); padding-top: 14px; }
.about__fact { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--text-brand-primary); }
.about__fact-label { display: block; margin-top: 10px; font-size: var(--type-caption); line-height: 1.35; color: var(--text-brand-secondary); }
.about__facts + .about__body { margin-top: var(--space-800); }
.about__tools { margin-top: var(--space-400); font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1.6; color: var(--text-brand-secondary); }
@media (max-width: 767px) { .about__facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-400); } }

.experience { list-style: none; display: grid; gap: var(--space-400); }
.experience li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-600);
  padding-bottom: var(--space-200);
  border-bottom: 1px solid var(--border-neutral-primary);
}
.experience li:last-child { border-bottom: 0; }
.experience__company { color: var(--text-neutral-secondary); }
.experience__role { text-align: right; display: grid; gap: var(--space-200); }
.experience__title { color: var(--text-brand-primary); }
.experience__dates { font-size: var(--type-caption); line-height: 1.3; color: var(--text-brand-secondary); }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact__title { color: #000; margin-bottom: var(--space-1200); }
.contact-form {
  max-width: var(--col-reading);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
  text-align: left;
}
.field { display: grid; gap: var(--space-200); }
.field--full { grid-column: 1 / -1; }
.field input,
.field textarea {
  width: 100%;
  padding: var(--space-400);
  font-size: var(--type-body);
  line-height: 1;
  color: var(--text-neutral-primary);
  background: var(--surface-neutral-tertiary);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-400);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.field textarea { min-height: 144px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.field input:focus-visible,
.field textarea:focus-visible { outline-offset: 1px; border-radius: var(--radius-400); background: var(--surface-neutral-primary); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field__error { font-size: var(--type-caption); color: #b3261e; }
.field__error:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__actions { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--space-400); margin-top: var(--space-600); }
.contact-form__status { font-size: var(--type-body-small); color: var(--text-brand-secondary); text-align: center; min-height: 1.4em; }
.contact-form__status[data-state="error"] { color: #b3261e; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-800); margin-top: var(--section-gap); }
.site-footer--after-contact { margin-top: var(--space-1200); }   /* Figma: contact → end block is 48 */
.site-footer__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-600);
  padding-bottom: var(--space-600);
  border-bottom: 1px solid var(--border-neutral-primary);
}
/* The sign-off: the address is the last, largest line on the page */
.site-footer__mail { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.site-footer__email {
  font-size: clamp(1.25rem, 0.95rem + 1.6vw, 2rem);   /* stays on one line down to 320px */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;   /* large text tracks tighter */
  color: var(--text-neutral-primary);
  text-decoration: none;
  white-space: nowrap;
}
/* Copy is a second, explicit choice; the address itself stays a normal mail link */
.site-footer__copy {
  display: inline-grid;
  min-width: 72px;
  padding: 7px 12px;
  border: 1px solid var(--border-neutral-primary);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  line-height: 1;
  color: var(--text-brand-secondary);
  cursor: pointer;
  transition: transform 100ms ease-out, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.site-footer__copy:active { transform: scale(0.97); }   /* feedback on press, not release */
@media (hover: hover) and (pointer: fine) {
  .site-footer__copy { opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 160ms ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
  .site-footer__mail:hover .site-footer__copy, .site-footer__copy:focus-visible, .site-footer__copy.is-copied { opacity: 1; transform: none; }
  .site-footer__copy:active { transform: scale(0.97); }
}
@media not ((hover: hover) and (pointer: fine)) { .site-footer__copy { display: none; } }
@media (pointer: coarse) { .site-footer__links a, .site-footer__email { min-height: 44px; display: inline-flex; align-items: center; } }
.site-footer__copy-label { transition: opacity 150ms ease; }
.site-footer__copy.is-copied { border-color: #1f8a4c; color: #1f8a4c; }
.site-footer__copy:focus-visible { outline: 2px solid var(--text-neutral-primary); outline-offset: 2px; }
.site-footer__links { display: flex; gap: var(--space-600); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-body); color: var(--text-brand-secondary); text-decoration: none; }
.site-footer__arrow { display: inline-block; font-size: 0.85em; transition: transform var(--dur-fast) ease; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: var(--space-400); flex-wrap: wrap; margin-top: var(--space-400); }
.site-footer__legal {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-neutral-secondary);
}

/* ---------- Case study ---------- */
.cs-header { padding-top: var(--section-gap); }
.cs-header__content { display: grid; gap: var(--space-600); }
.cs-header__title { display: grid; gap: var(--space-200); }
.cs-header__lede { color: var(--text-brand-secondary); }
.cs-header__rule { margin-top: var(--section-gap); border: 0; border-top: 1px solid var(--border-neutral-primary); }

.cs-figure { width: 100%; margin-inline: auto; }
.cs-figure img,
.cs-figure video { width: 100%; border-radius: var(--radius-300); }
.cs-figure figcaption { margin-top: var(--space-400); font-size: var(--type-caption); line-height: 1.3; color: var(--text-neutral-primary); }
.cs-figure figcaption strong { display: block; }
.cs-hero-media { margin-top: var(--space-800); }
.stack > .cs-hero-media + * { margin-top: var(--space-800); }   /* Figma: hero media → Overview is 32 */

.cs-section { display: grid; gap: var(--space-800); }
.cs-section > .cs-figure { margin-top: var(--space-200); }
/* A new subsection (media after an h3 block) starts a full section gap down, per Figma */
.cs-section > .narrow.cs-copy + :not(.narrow) { margin-top: calc(var(--section-gap) - var(--space-800)); }
.cs-copy { display: grid; gap: var(--space-200); }
.cs-copy .prose { color: var(--text-neutral-secondary); }
.cs-copy .h-subsection { color: #000; }

.cs-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
  max-width: var(--col-reading);
  margin-inline: auto;
  width: 100%;
}
.cs-cards--insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-card-title { font-size: var(--type-body); font-weight: 700; color: var(--text-brand-primary); }
.cs-card-body { font-size: var(--type-caption); line-height: 1.3; color: var(--text-brand-secondary); }

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 282px));
  gap: var(--space-600);
  justify-content: center;
}
.stat__value { font-size: 2.5rem; font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-section); }
.stat__label { font-size: var(--type-body); color: var(--text-brand-primary); }

.personas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-600);
  max-width: var(--col-reading);
  margin-inline: auto;
}
.persona { display: grid; gap: var(--space-200); text-align: center; justify-items: center; }
.persona img { width: 100%; max-width: 240px; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: var(--radius-300); }

.motion-grid {
  display: grid;
  grid-template-columns: 384px 588px;
  gap: var(--space-600);
  justify-content: center;
  align-items: center;
}
.motion-grid video { background: var(--surface-cream); max-height: 80vh; width: auto; max-width: 100%; margin-inline: auto; }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-600);
  margin-top: var(--section-gap);
  font-size: var(--type-subsection);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-section);
}
.pager a { text-decoration: none; }
/* Back and Next mirror each other: arrow + word, then where it goes */
.pager__back, .pager__next { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-300); }
.pager__next { margin-left: auto; justify-content: flex-end; text-align: right; }
.pager__back-label, .pager__next-label { color: var(--text-neutral-primary); }
.pager__back-title, .pager__next-title { color: var(--text-neutral-secondary); transition: color var(--dur-fast) ease; }
/* Private case study: say so before the click */
.pager__back-title:has(.pager__lock), .pager__next-title:has(.pager__lock) { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.pager__lock { width: 0.7em; height: 0.7em; flex: none; }

/* ---------- Tablet (Figma board: 1024) ---------- */
@media (max-width: 1199px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-800); max-width: 100%; }
  .motion-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (max-width: 899px) {
  .work-card { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); padding: var(--space-800); }
  .work-card__media { width: 100%; }
}

/* ---------- Mobile (Figma board: 390) ---------- */
@media (max-width: 767px) {
  .site-header__inner { padding-block: var(--space-600); }
  .site-nav ul { display: none; }
  .h-hero { text-wrap: pretty; }

  .work__list { gap: var(--space-800); }
  .work-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-400); gap: var(--space-800); }
  .work-card__media { order: 2; aspect-ratio: 294 / 262; }

  .capabilities,
  .bring,
  .contact-form,
  .cs-cards,
  .stats,
  .personas,
  .motion-grid { grid-template-columns: minmax(0, 1fr); }

  .split { text-align: left; }
  .experience li { flex-direction: column; align-items: center; text-align: center; gap: var(--space-100); }
  .experience__role { text-align: center; gap: var(--space-100); }

  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .pager { font-size: 1.25rem; }
}

/* Whole card is clickable through the CTA (one link per card for screen readers) */
.work-card { position: relative; }
.work-card__cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-400); }

/* Case study media widths and hero crop (Figma: hero 1200×480, content media 1200 or 792) */
.cs-hero-media img { aspect-ratio: 5 / 2; object-fit: cover; }
.cs-figure--reading { max-width: var(--col-reading); width: 100%; }
.cs-figure--narrow { max-width: var(--col-narrow); width: 100%; }
.insights {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-600);
}
.insights .card { gap: var(--space-200); }
@media (max-width: 1199px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .insights { grid-template-columns: minmax(0, 1fr); } }

/* Password page */
.login { max-width: 400px; min-height: calc(100svh - 160px); margin: 0 auto; padding-block: var(--space-800); display: grid; gap: var(--space-600); align-content: center; }
.login__back { justify-self: start; font-size: var(--type-body-small); color: var(--text-neutral-secondary); text-decoration: none; }
.login .cs-copy { display: grid; gap: var(--space-300); }
.login__field { position: relative; }
.login__field input { width: 100%; padding-right: 76px; }
.login__reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-brand-secondary); cursor: pointer; }
.login__reveal:focus-visible { outline: 2px solid var(--text-neutral-primary); outline-offset: 0; }
@media (pointer: coarse) { .login__reveal { min-height: 44px; } }
.login form { display: grid; gap: var(--space-400); }
.login label { font-size: var(--type-body-small); font-weight: 700; color: var(--text-neutral-primary); }
.login .btn { justify-self: start; margin-top: var(--space-200); }   /* the action sits apart from the field it submits */
.login__request { padding-top: var(--space-400); border-top: 1px solid var(--border-neutral-primary); font-size: var(--type-body-small); color: var(--text-neutral-secondary); }
.login__request a { color: var(--text-neutral-primary); text-underline-offset: 3px; }
  
.login .contact-form__status { text-align: left; }
/* Single-line inputs: fixed 48px like the Figma field (browsers size input text boxes from font metrics) */
.field input { height: 48px; padding-block: 0; }

/* ==========================================================================
   Hover: only on devices with a real pointer, so taps on phones don't leave
   "stuck" hover states behind.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:not(.btn):hover { color: var(--text-neutral-primary); }
  .btn:hover { background: var(--surface-brand-primary-hover); }
  .field input:hover,
  .field textarea:hover { border-color: var(--border-disabled); }
  .site-footer__email:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .site-footer__copy:hover { border-color: var(--text-neutral-secondary); color: var(--text-neutral-primary); }
  .site-footer__links a:hover { color: var(--text-neutral-primary); }
  .site-footer__links a:hover .site-footer__arrow { transform: translate(2px, -2px); }
  .pager__back:hover .pager__back-title { color: var(--text-neutral-primary); }
  .login__back:hover { color: var(--text-neutral-primary); }
  .login__reveal:hover { color: var(--text-neutral-primary); }
  .pager__next:hover .pager__next-title { color: var(--text-neutral-primary); }

  /* Whole case study card reacts, because the whole card is the link */
  .work-card { transition: border-color var(--dur-fast) ease; }
  .work-card__media img { transition: transform 400ms var(--ease-out); }
  .work-card:hover { border-color: var(--border-disabled); }
  .work-card:hover .work-card__media img { transform: scale(1.03); }
  .work-card:hover .work-card__cta { background: var(--surface-brand-primary-hover); }
}

/* ==========================================================================
   Entrance motion (home page), mirroring the live Framer site:
   portrait fades in, the headline arrives letter by letter one word at a time,
   and each section fades in on scroll, rising (up) or sliding in from the right (left).
   Only runs when assets/js/motion-init.js adds .motion (JS on, reduced motion off),
   so without JavaScript everything is simply visible.
   ========================================================================== */
:root {
  --ease-reveal: cubic-bezier(0, 0.46, 0.56, 1);   /* the Framer site's curve */
  --reveal-duration: 600ms;
  --reveal-shift: 30px;
  --char-duration: 500ms;
  --char-shift: 50px;
  --headline-start: 350ms;
  --word-step: 90ms;
}
.motion [data-reveal] {
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--ease-reveal), transform var(--reveal-duration) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion [data-reveal="up"] { transform: translateY(var(--reveal-shift)); }
.motion [data-reveal="left"] { transform: translateX(var(--reveal-shift)); }
.motion [data-reveal].is-visible { opacity: 1; transform: none; }
/* Stagger groups: the container stays put so each child's own delay is visible (the generic fade above would mask it) */
.motion [data-reveal="stagger"], .motion [data-reveal="stagger"].is-visible { opacity: 1; transform: none; transition: none; }

.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; }
.motion .split-char {
  opacity: 0;
  transform: translateX(var(--char-shift));
  animation: char-in var(--char-duration) var(--ease-reveal) forwards;
  animation-delay: calc(var(--headline-start) + var(--word) * var(--word-step));
}
@keyframes char-in { to { opacity: 1; transform: none; } }
.hero__eyebrow { --reveal-delay: 150ms; }

/* ==========================================================================
   Stacking case study cards (mirrors the live Framer site): each card sticks at a
   staggered offset as you scroll, so the next one slides over it, and the cards
   underneath shrink into a deck (JS sets the scale; the layout works without it).
   ========================================================================== */
.work__list > li { position: sticky; top: var(--stack-top); }
.work__list > li:nth-child(1) { --stack-top: 100px; }
.work__list > li:nth-child(2) { --stack-top: 130px; }
.work__list > li:nth-child(3) { --stack-top: 160px; }
.work__list > li:nth-child(4) { --stack-top: 190px; } /* even 30px steps so the stacked edges read as one rhythm */
.work-card { transform-origin: 50% 0; }
.card-stack-active .work-card { will-change: transform; }
/* Push-back dim: a covered card darkens slightly as the next one slides over it (like an iOS sheet stack). Opacity only, set per frame by main.js */
.work-card__dim { position: absolute; inset: -1px; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; z-index: 3; }

/* Phones: tighter offsets so a tall stuck card (and its button) stays on screen */
@media (max-width: 767px) {
  .work__list > li:nth-child(1) { --stack-top: 16px; }
  .work__list > li:nth-child(2) { --stack-top: 28px; }
  .work__list > li:nth-child(3) { --stack-top: 40px; }
  .work__list > li:nth-child(4) { --stack-top: 52px; }
}
/* A keyboard-focused card rises to the top of the deck so the next card can't cover it (WCAG 2.4.11).
   Keyboard focus only: a clicked card keeps focus when the visitor comes Back, and :focus-within
   would pin that card over the whole deck. */
.work__list > li:has(:focus-visible) { z-index: 1; }
/* Equal-height cards: the stack releases as one unit (no card behind can flash through when the front card leaves, notably in iOS Safari momentum scrolling) */
.work__list { grid-auto-rows: 1fr; }
.work__list > li > .work-card { height: 100%; }
/* Settle hold: after the last card lands, the deck stays pinned a little longer while every card, the last one
   included, recedes one more step, so the deck locks evenly and then leaves as one. Only when the JS stack runs. */
.card-stack-active.work__list { --stack-hold: 25vh; grid-template-rows: repeat(var(--cards, 4), 1fr) var(--stack-hold); }
.card-stack-active.work__list::after { content: ""; }

/* ==========================================================================
   Case study chapters: notes + panels (Material-style). One or two sentences
   on the left, a large soft panel on the right, lots of air between moments.
   ========================================================================== */
.cs-chapters { display: grid; gap: 160px; padding-block: 96px 160px; }
.cs-chapter__head { max-width: 640px; display: grid; gap: var(--space-400); margin-bottom: 96px; }
.cs-chapter--close .cs-chapter__head { margin-bottom: 0; }
.cs-kicker { font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1.3; letter-spacing: 0.02em; color: var(--text-brand-secondary); }
.cs-moment { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.cs-moment + .cs-moment { margin-top: 128px; }
.cs-note { display: grid; gap: var(--space-300); padding-top: 24px; }
.cs-note__title { font-size: var(--type-body); font-weight: 700; color: var(--text-brand-primary); }
.cs-note p { font-size: var(--type-body-small); line-height: 1.55; color: var(--text-brand-secondary); }
.cs-panel { position: relative; border-radius: 28px; background: #f4f1ea; padding: 7% 8%; min-height: 320px; display: grid; place-items: center; }
.cs-panel--cool { background: #eef1f6; }
/* Dark stage: for near-white artwork that would disappear on a light panel (15:1 vs the light tiles) */
.cs-panel--dark { background: #1b1b1b; }
.cs-panel__cap { margin-top: 12px; font-size: var(--type-caption); line-height: 1.45; color: var(--text-brand-secondary); }
.private-note { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-brand-secondary); }


/* Theme switcher: same component, four tier themes (illustrative palettes) */
.themer { width: 100%; max-width: 560px; display: grid; gap: var(--space-400); justify-items: center;
  --t-accent: #42307d; --t-title: #53389e; --t-link: #42307d; --t-bg: #ffffff; --t-muted: #384250; --t-media: #fff1f3; --t-radius: 4px; --t-font: "IBM Plex Serif", Georgia, serif; --t-body: "IBM Plex Sans", var(--font-sans); --t-banner: #fcfaff; --t-banner-ink: #42307d; --t-btn-case: none; --t-btn-track: 0; }
/* One palette per tier, from the tier's tokens; type uses open-source stand-ins */
.themer[data-theme="luxury"] { --t-accent: #003b49; --t-title: #121212; --t-link: #121212; --t-bg: #ffffff; --t-muted: #4a4a4a; --t-media: #d6e3dc; --t-radius: 0px; --t-font: "Newsreader", Georgia, serif; --t-body: var(--font-sans); --t-banner: #f3f7f5; --t-banner-ink: #003b49; --t-btn-case: uppercase; --t-btn-track: 0.11em; }
.themer[data-theme="premium"] { --t-accent: #60004e; --t-title: #60004e; --t-link: #243d51; --t-bg: #ffffff; --t-muted: #4a4a4a; --t-media: #c5b9c5; --t-radius: 4px; --t-font: "IBM Plex Serif", Georgia, serif; --t-body: "IBM Plex Sans", var(--font-sans); --t-banner: #bfcad0; --t-banner-ink: #1d2534; --t-btn-case: none; --t-btn-track: 0; }
.themer[data-theme="mainstream"] { --t-accent: #002d72; --t-title: #002d72; --t-link: #002d72; --t-bg: #ffffff; --t-muted: #303030; --t-media: #cfebff; --t-radius: 4px; --t-font: "IBM Plex Serif", Georgia, serif; --t-body: "IBM Plex Sans", var(--font-sans); --t-banner: #f2f7fe; --t-banner-ink: #002d72; --t-btn-case: none; --t-btn-track: 0; }
.themer__switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.05); }
.themer__switch button { border: 0; background: transparent; cursor: pointer; font: 500 var(--type-caption)/1 var(--font-sans); padding: 8px 12px; border-radius: 999px; color: var(--text-brand-secondary); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.themer__switch button[aria-pressed="true"] { background: #fff; color: var(--text-brand-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.themer__switch button:active { transform: scale(0.97); }
.themer__stage { width: 100%; display: grid; gap: 12px; }
.themer * { transition-property: background-color, color, border-radius, font-family; transition-duration: 300ms; transition-timing-function: ease; }
.t-card { display: grid; grid-template-columns: 42% 1fr; background: var(--t-bg); border-radius: var(--t-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06); }
.t-card__media { min-height: 170px; background: var(--t-media); }
.t-card__body { padding: 20px; display: grid; gap: 6px; align-content: center; font-family: var(--t-body); }
.t-card__eyebrow { font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-muted); }
.t-card__title { font-family: var(--t-font); font-weight: 300; font-size: 1.35rem; line-height: 1.2; color: var(--t-title); }
.t-card__text { font-size: 13px; color: var(--t-muted); }
.t-card__actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.t-btn { font-size: 13px; font-weight: 500; color: #fff; background: var(--t-accent); padding: 8px 14px; border-radius: var(--t-radius); text-transform: var(--t-btn-case); letter-spacing: var(--t-btn-track); }
.t-link { font-size: 13px; color: var(--t-link); text-decoration: underline; text-underline-offset: 3px; }
.t-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--t-radius); background: var(--t-banner); font-family: var(--t-body); font-size: 13px; color: var(--t-banner-ink); }
.t-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-banner-ink); }

/* Token flow diagram */
.tokflow { list-style: none; width: 100%; max-width: 520px; display: grid; gap: 10px; counter-reset: tok; }
.tokflow li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.tokflow li + li::before { content: ""; position: absolute; left: 28px; top: -10px; width: 1px; height: 10px; background: #b8c2d0; }
.tokflow__label { font-weight: 700; font-size: var(--type-body-small); color: var(--text-brand-primary); min-width: 140px; }
.tokflow__note { font-size: var(--type-caption); color: var(--text-brand-secondary); }
.tokflow code { font-family: var(--font-mono); font-size: 11px; padding: 3px 6px; border-radius: 6px; background: #eef1f6; color: #34435a; }
.tokflow__chips { display: inline-flex; gap: 4px; }
.chip { width: 14px; height: 14px; border-radius: 4px; }
.chip--a { background: #6b4f2a; } .chip--b { background: #1f3a5f; } .chip--c { background: #0b7a3e; }

/* Component tiles (wireframes until final designs are exported) */
.wf-tiles { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-tile { background: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.wf-tile__art { height: 72px; border-radius: 8px; background: repeating-linear-gradient(#e4e8ee 0 6px, transparent 6px 14px); }
.wf-tile__art--lb { background: #e4e8ee; }
.wf-tile__art--ba { background: linear-gradient(#e4e8ee, #e4e8ee) 0 50% / 100% 22px no-repeat; }
.wf-tile__art--more { background: transparent; border: 1px dashed #c3ccd8; }
.wf-tile__name { font-size: 11px; font-family: var(--font-mono); color: var(--text-brand-secondary); overflow-wrap: anywhere; }

/* Lightbox specimen */
.specimen--lightbox { position: relative; inset: auto; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; border-radius: 16px; background: #1e1e1e; overflow: hidden; }
.lb-grid { position: absolute; inset: 12% 12% 22%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transition: opacity 300ms ease; }
.lb-grid span { border-radius: 4px; background: #3d3d3d; }
.lb-grid .lb-hero { background: #0047ff; }
.lb-view { position: absolute; inset: 12% 12% 22%; display: grid; grid-template-rows: 1fr auto; gap: 8px; pointer-events: none; }
.lb-view__img { border-radius: 6px; background: #0047ff; transform-origin: 50% 25%; transform: scale(0.32); opacity: 0; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease; }
.lb-view__cap { height: 6px; width: 45%; border-radius: 3px; background: #5a5a5a; opacity: 0; transition: opacity 300ms ease 200ms; }
.specimen--lightbox.is-open .lb-view__img { transform: none; opacity: 1; }
.specimen--lightbox.is-open .lb-view__cap { opacity: 1; }
.specimen--lightbox.is-open .lb-grid { opacity: 0.15; }
.specimen-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; border-radius: 16px; background: #1e1e1e; overflow: hidden; }

/* Regent pages, CMS tiers, portal devices */
.pages { list-style: none; width: 100%; max-width: 440px; display: grid; gap: 8px; }
.pages li { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border-radius: 12px; background: #fff; font-size: var(--type-body-small); color: var(--text-brand-primary); }
.pages__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-brand-secondary); }
.tiers { width: 100%; display: grid; gap: 18px; }
.tiers__row { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; align-items: center; }
.tiers__name { font-size: var(--type-body-small); font-weight: 700; color: var(--text-brand-primary); }
.tiers__bar { height: 12px; border-radius: 6px; background: #2c2c2c; }
.tiers__bar[data-n="4"] { width: 36%; } .tiers__bar[data-n="5"] { width: 45%; } .tiers__bar[data-n="11"] { width: 100%; }
.tiers__brands { grid-column: 2; font-size: var(--type-caption); color: var(--text-brand-secondary); }
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 16px; width: 100%; }
.device { display: grid; gap: 6px; align-content: start; background: #fff; border: 1px solid #d5dbe4; padding: 14px 10px; }
.device .wf-bar { background: #e4e8ee; height: 5px; }
.device .wf-bar--title { background: #c3ccd8; }
.device--phone { width: 90px; height: 180px; border-radius: 16px; }
.device--desktop { width: 260px; height: 160px; border-radius: 8px; }
.device--qr { width: 64px; height: 64px; border-radius: 8px; padding: 8px; }
.device--qr span { display: block; width: 46px; height: 46px; background: conic-gradient(#2c2c2c 25%, transparent 0 50%, #2c2c2c 0 75%, transparent 0) 0 0 / 12px 12px; }

@media (max-width: 767px) {
  .cs-chapters { gap: 104px; padding-block: 64px 104px; }
  .cs-chapter__head { margin-bottom: 56px; }
  .cs-moment { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-moment + .cs-moment { margin-top: 88px; }
  .cs-note { padding-top: 0; }
  .cs-panel { border-radius: 18px; padding: 24px 16px; min-height: 0; }
}

/* Case study: at-a-glance row, platform stats, and small coded visuals */
.cs-glance { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-800); margin-top: 72px; }
.cs-glance li { border-top: 1px solid var(--border-neutral-primary); padding-top: var(--space-400); display: grid; gap: 6px; align-content: start; }
.cs-glance b { font-size: var(--type-caption); font-family: var(--font-mono); font-weight: 400; color: var(--text-brand-secondary); }
.cs-glance span { font-size: var(--type-body-small); line-height: 1.5; color: var(--text-brand-primary); }
.cs-challenge { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 56px; margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--border-neutral-primary); }
.cs-challenge__body { display: grid; gap: var(--space-600); }
.cs-challenge__lead { font-size: var(--type-body-small); color: var(--text-brand-secondary); }
.cs-challenge ul { list-style: none; display: grid; gap: 12px; }
.cs-challenge li { font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-brand-primary); padding-left: 28px; position: relative; }
.cs-challenge li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 1px; background: var(--text-brand-secondary); }
.cs-stats { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: 56px; margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--border-neutral-primary); align-items: start; }
.cs-stat { display: grid; gap: 6px; }
.cs-stat b { font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; letter-spacing: -0.04em; color: var(--text-brand-primary); }
.cs-stat span { font-size: var(--type-body-small); color: var(--text-brand-secondary); }
.cs-panel img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cs-panel video { display: block; max-height: 520px; width: auto; max-width: 100%; border-radius: 16px; }
.cs-panel--split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: center; }
.merge { width: 100%; max-width: 480px; display: grid; gap: 14px; justify-items: center; }
.merge__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.merge__chip { font-size: var(--type-body-small); padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--text-brand-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.merge__line { width: 1px; height: 36px; background: #c9c1b3; }
.merge__result { font-weight: 700; font-size: var(--type-body); padding: 14px 22px; border-radius: 16px; background: #2c2c2c; color: #fff; }
.cs-links a { font-size: var(--type-body-small); font-weight: 700; color: var(--text-brand-primary); text-underline-offset: 3px; }
.cs-close { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.cs-close + .cs-close { margin-top: 72px; }
.cs-close .cs-note { padding-top: 10px; }
.cs-close ul { display: grid; gap: 8px; padding-left: 1.1em; }
@media (max-width: 767px) {
  .cs-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
  .cs-challenge, .cs-stats, .cs-close { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 88px; }
  .cs-panel--split { grid-template-columns: 1fr; }
}
.cs-challenge .cs-note, .cs-stats .cs-note { padding-top: 3px; }
/* Phone row: separate screen images, staggered in (2×2 on phones) */
.phones { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.phones img { width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08)); }
.motion [data-reveal="stagger"] > :nth-child(4) { transition-delay: 210ms; }
@media (max-width: 767px) { .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Email row: desktop + mobile pairs; column widths follow each email's width so all share one height */
.phones--emails { grid-template-columns: 378fr 278fr 378fr 278fr; }
@media (max-width: 767px) { .phones--emails { grid-template-columns: 378fr 278fr; } }
/* Documentation grid: component tiles with real-text titles (readable, accessible) */
.cs-panel--plain { background: none; padding: 0; min-height: 0; display: block; }
.docs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.docs li { display: grid; gap: 8px; align-content: start; }
.docs li.wide { grid-column: span 2; }
.docs b { font-size: var(--type-caption); font-weight: 500; color: var(--text-brand-primary); }
.docs img { width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 767px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Component viewer: one component in focus, chosen from a tab row (design-system-site pattern) */
.viewer { width: 100%; display: grid; gap: var(--space-400); }
.viewer__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.viewer__tabs button { border: 1px solid var(--border-neutral-primary); background: #fff; color: var(--text-brand-secondary); font: 500 var(--type-caption)/1 var(--font-sans); padding: 9px 12px; border-radius: 999px; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.viewer__tabs button:active { transform: scale(0.97); }
.viewer__tabs button[aria-selected="true"] { background: var(--text-brand-primary); border-color: var(--text-brand-primary); color: #fff; }
@media (hover: hover) and (pointer: fine) { .viewer__tabs button:not([aria-selected="true"]):hover { border-color: var(--border-disabled); color: var(--text-brand-primary); } }
.viewer__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; background: #f5f5f5; overflow: hidden; }
.viewer__panel { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 4%; opacity: 0; transform: scale(0.985); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); pointer-events: none; }
.viewer__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.viewer__panel img { width: 100%; height: 100%; object-fit: contain; }
.viewer__meta { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-brand-secondary); }
@media (max-width: 767px) {
  .viewer__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .viewer__tabs button { flex: none; }
  .viewer__stage { aspect-ratio: 4 / 3; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .viewer__panel { transition: none; transform: none; } }
.viewer__meta [data-viewer-count] { white-space: nowrap; }
/* Case study extras: trio grid (personas) and research cards */
.trio { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trio figure { display: grid; gap: 8px; }
.trio img { width: 100%; height: auto; border-radius: 16px; background: #fff; }
.trio figcaption { font-size: var(--type-caption); color: var(--text-brand-secondary); line-height: 1.4; }
.trio figcaption b { display: block; color: var(--text-brand-primary); font-size: var(--type-body-small); }
.pains { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pains li { background: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 6px; }
.pains b { font-size: var(--type-body); color: var(--text-brand-primary); }
.pains span { font-size: var(--type-body-small); line-height: 1.5; color: var(--text-brand-secondary); }
@media (max-width: 767px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pains { grid-template-columns: 1fr; } }

/* Home: IHG "coming soon" card. Coded system tile (no IHG imagery on public pages), disabled button. */
.work-card__cta--soon::after { display: none; }
.work-card--soon:hover { border-color: var(--border-neutral-primary); }
/* Disabled "Coming soon": fixed look in every state (the card's hover rule can't change it) */
.work-card--soon .work-card__cta--soon,
.work-card--soon:hover .work-card__cta--soon,
.work-card--soon .work-card__cta--soon:hover,
.work-card--soon .work-card__cta--soon:active { background: #ececec; border-color: #ececec; color: #595959; cursor: default; transform: none; transition: none; }
/* IHG card: one hotel card re-theming across brand tiers (illustrative palettes, coded, no IHG imagery) */
.specimen--brands { --bt-bg: #f6f1e7; --bt-accent: #6b4f2a; --bt-tint: #d8c9ae; --bt-r: 0px; --bt-rb: 0px; --bt-font: Georgia, "Times New Roman", serif; }
.specimen--brands[data-theme="premium"] { --bt-bg: #eef2f7; --bt-accent: #1f3a5f; --bt-tint: #b9c6d6; --bt-r: 6px; --bt-rb: 4px; --bt-font: var(--font-sans); }
.specimen--brands[data-theme="mainstream"] { --bt-bg: #edf6f0; --bt-accent: #0b7a3e; --bt-tint: #bfe0cc; --bt-r: 16px; --bt-rb: 12px; --bt-font: var(--font-sans); }
.specimen--brands[data-theme="lifestyle"] { --bt-bg: #fbf1ea; --bt-accent: #b4431a; --bt-tint: #f2c9b3; --bt-r: 22px; --bt-rb: 999px; --bt-font: var(--font-sans); }
.specimen--brands { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bt-bg); transition: background-color 400ms ease; }
.bt-card { width: 76%; background: #fff; border-radius: var(--bt-r); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 24px rgba(0,0,0,0.08); }
.bt-card__img { display: block; height: 84px; background: linear-gradient(135deg, var(--bt-tint), #fff); }
.bt-card__body { display: grid; gap: 5px; padding: 12px 14px 14px; justify-items: start; }
.bt-card__btn { margin-top: 4px; font-size: 10px; font-weight: 500; color: #fff; background: var(--bt-accent); padding: 6px 10px; border-radius: var(--bt-rb); }
.bt-bar { display: block; border-radius: 3px; background: #e4e4e4; }
.bt-bar--eyebrow { width: 28%; height: 5px; }
.bt-bar--title { width: 72%; height: 9px; background: var(--bt-accent); opacity: 0.9; }
.bt-bar--line { width: 56%; height: 6px; }
.specimen--brands .bt-card__btn { width: 64px; height: 22px; padding: 0; }
.specimen--brands .bt-card__body { gap: 8px; padding: 14px; }
/* IHG card variants, reviewed (Emil): named transitions only, strong ease-in-out for on-screen morphs,
   buttons swap with transform + opacity (no width animation), slots open space first / fade content first. */
.specimen--brands { --morph: cubic-bezier(0.77, 0, 0.175, 1); }
.specimen--brands, .bt-card { transition: background-color 400ms ease, border-radius 400ms var(--morph); }
.bt-card { contain: layout paint; }
.bt-card__img { height: 96px; transition: height 400ms var(--morph), background 400ms ease, border-radius 400ms var(--morph); }
.bt-bar--title { transition: background-color 400ms ease; }
.specimen--brands .bt-card__body { gap: 0; }
.bt-slot { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 400ms var(--morph), opacity 200ms ease 150ms; }
.bt-slot > * { min-height: 0; overflow: hidden; }
.bt-slot--eyebrow > * { margin-bottom: 8px; }
.bt-slot--line > * { margin-top: 8px; }
.bt-slot--actions > * { padding-top: 12px; }
.bt-bar--title { margin: 0; }
.bt-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.specimen--brands .bt-card__btn, .bt-btn2, .bt-link { transform-origin: left center; transition: opacity 150ms ease, transform 250ms var(--ease-out), background-color 400ms ease, border-color 400ms ease, border-radius 400ms var(--morph); }
.specimen--brands .bt-card__btn { width: 64px; height: 22px; padding: 0; margin: 0; }
.bt-btn2 { width: 58px; height: 22px; border: 1.5px solid var(--bt-accent); border-radius: var(--bt-rb); opacity: 0; transform: scaleX(0.9); }
.bt-link { position: absolute; left: 0; top: calc(50% + 6px); width: 54px; height: 6px; border-radius: 3px; background: var(--bt-accent); opacity: 0; transform: scaleX(0.9); }
/* collapsing: content fades first, then the space closes */
.specimen--brands[data-theme="premium"] .bt-slot--eyebrow,
.specimen--brands[data-theme="mainstream"] .bt-slot--line,
.specimen--brands[data-theme="lifestyle"] .bt-slot--eyebrow,
.specimen--brands[data-theme="lifestyle"] .bt-slot--actions { grid-template-rows: 0fr; opacity: 0; transition: opacity 150ms ease, grid-template-rows 400ms var(--morph) 120ms; }
.specimen--brands[data-theme="premium"] .bt-card__img { height: 58px; }
.specimen--brands[data-theme="premium"] .bt-btn2 { opacity: 1; transform: none; }
.specimen--brands[data-theme="mainstream"] .bt-card__img { height: 76px; }
.specimen--brands[data-theme="mainstream"] .bt-card__btn { opacity: 0; transform: scaleX(0.9); }
.specimen--brands[data-theme="mainstream"] .bt-link { opacity: 1; transform: none; transition-delay: 80ms; }
.specimen--brands[data-theme="lifestyle"] .bt-card__img { height: 112px; }
.specimen--brands .bt-card__body { justify-items: stretch; }
.bt-slot { width: 100%; }
/* Brand & Visual header option C: type-led client index; each row jumps to its section */
.cs-index { list-style: none; margin: 0; padding: 0; }
/* The header rule is the first row's top border, so every row reads the same height */
.cs-header:has(+ nav.cs-hero-media) .cs-header__rule { margin-bottom: 0; }
nav.cs-hero-media { margin-top: 0; }
.cs-index li { border-bottom: 1px solid var(--border-neutral-primary); }
.cs-index__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-600); padding: var(--space-600) 0; color: inherit; text-decoration: none; transform-origin: left center; transition: transform 100ms var(--ease-out); }
a.cs-index__row:active { transform: scale(0.99); }
a.cs-index__row:focus-visible { outline: 2px solid var(--text-brand-primary); outline-offset: 4px; border-radius: 4px; }
.cs-index__name { font-family: var(--font-sans); font-weight: 500; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; color: var(--text-brand-primary); }
.cs-index__what { display: inline-flex; align-items: baseline; gap: var(--space-200); font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1.4; color: var(--text-brand-secondary); text-align: right; transition: color var(--dur-fast) ease; }
.cs-index__arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  /* Spotlight: the row under the pointer stays solid, the others step back */
  .cs-index__row { transition: transform 100ms var(--ease-out), opacity 200ms var(--ease-out); }
  .cs-index:has(a.cs-index__row:hover) a.cs-index__row:not(:hover) { opacity: 0.35; }
  a.cs-index__row:hover .cs-index__what { color: var(--text-brand-primary); }
  a.cs-index__row:hover .cs-index__arrow { transform: translateY(4px); }
}
.cs-moment[id] { scroll-margin-top: var(--space-800); }
@media (max-width: 767px) {
  .cs-index__row { flex-direction: column; align-items: flex-start; gap: var(--space-200); padding: var(--space-400) 0; }
  .cs-index__what { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .cs-index__row, .cs-index__arrow { transition: none; } a.cs-index__row:active { transform: none; } }
/* Case study header: text starts on the same left edge as the chapters below (flush, chosen Sep 29) */
.cs-header .cs-header__content { margin-inline: 0; }

/* Secure Connect: phone rows of three and two, and the "how the app responds" list */
.phones--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.phones--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
@media (max-width: 767px) { .phones--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .phones--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.phones--one { grid-template-columns: minmax(0, 1fr); max-width: 220px; }
@media (max-width: 767px) { .phones--one { grid-template-columns: minmax(0, 1fr); max-width: 200px; } }
.cs-stack { display: grid; gap: 16px; }
.comp-grid { width: 100%; display: grid; gap: 12px; }
.comp-grid__labels { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5%; font: 500 var(--type-caption)/1.2 var(--font-mono); color: var(--text-brand-secondary); }

/* Secure Connect: "how the app responds", one card, two aligned columns */
.respond2 { width: 100%; max-width: 540px; background: #fff; border-radius: 16px; padding: 6px 22px; }
.respond2__head, .respond2 dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: baseline; }
.respond2__head { padding: 14px 0 12px; border-bottom: 1px solid #2c2c2c; font: 500 11px/1.3 var(--font-mono); color: var(--text-brand-secondary); }
.respond2 dl > div { padding: 15px 0; }
.respond2 dl > div + div { border-top: 1px solid #e6e9ef; }
.respond2 dt { font-size: var(--type-body-small); font-weight: 500; color: var(--text-brand-primary); }
.respond2 dd { font-size: var(--type-body-small); line-height: 1.45; color: var(--text-brand-secondary); }
.respond2 b { font-weight: 700; color: var(--text-brand-primary); }
@media (max-width: 479px) { .respond2 { padding: 4px 16px; } .respond2__head, .respond2 dl > div { gap: 12px; } }
/* Secure Connect: feature module by state, tile groups */
.states { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.states__col, .tilesets__group { display: grid; gap: 14px; }
.states figcaption, .tilesets figcaption { font: 500 var(--type-caption)/1.2 var(--font-mono); color: var(--text-brand-secondary); padding-bottom: 10px; border-bottom: 1px solid #d9d3c6; }
.states img, .tilesets img { width: 100%; height: auto; }
.tilesets { width: 100%; display: grid; grid-template-columns: 1fr; gap: 36px; }

@media (max-width: 767px) { .states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .tilesets { grid-template-columns: 1fr; gap: 28px; } }
/* Spacing after a stats row inside a chapter */
.cs-stats + .cs-moment { margin-top: 112px; }
@media (max-width: 767px) { .cs-stats + .cs-moment { margin-top: 72px; } }
/* Viewer caption sits inside the stage, like the other panel labels */
.viewer__stage .viewer__meta { position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 1; pointer-events: none; }
.viewer__panel { padding: 4% 4% 8%; }
@media (max-width: 767px) { .viewer__stage .viewer__meta { left: 16px; right: 16px; bottom: 10px; font-size: 11px; } .viewer__panel { padding: 5% 5% 14%; } }
.viewer__stage { touch-action: pan-y; }

/* Tiles share the cards' scale: one card column = 656 source px; tile strips are 996 and 1336 source px wide */
.tilesets { --col: calc((100% - 84px) / 4); }
.tilesets__group img { max-width: 100%; }
.tilesets__group:first-child img { width: calc(var(--col) * 1.518); }
.tilesets__group:last-child img { width: calc(var(--col) * 2.037); }
@media (max-width: 767px) { .tilesets { --col: calc((100% - 16px) / 2); } }

.cs-panel:has(> .states) { display: block; }
@media (min-width: 768px) { .cs-panel .tilesets { display: flex; gap: 28px; align-items: flex-start; } .cs-panel .tilesets__group:first-child { flex: 0 0 calc(var(--col) * 1.518); } .cs-panel .tilesets__group:last-child { flex: 0 0 calc(var(--col) * 2.037); } .cs-panel .tilesets__group img { width: 100%; } }
.respond2 dd, .respond2 dl { margin: 0; }

/* Figma-style component set frames around the variants */
.variant-set { position: relative; width: 100%; border: 1.5px dashed #9747ff; border-radius: 10px; padding: 34px 20px 20px; }
.variant-set + .variant-set { margin-top: 28px; }
.variant-set__name { position: absolute; top: 9px; left: 14px; font: 500 12px/1 var(--font-sans); color: #7b3fe4; }
.variant-set__name em { font-style: normal; color: #9a7ad8; margin-left: 6px; font-weight: 400; }
.variant-set .tilesets { --col: calc((100% - 84px) / 4); }
@media (max-width: 767px) { .variant-set { padding: 32px 12px 14px; } .variant-set .tilesets { --col: calc((100% - 16px) / 2); } }
/* Viewer progress, Apple style: dots in a capsule; the current dot becomes a pill that fills */
.viewer__nav { display: flex; justify-content: center; align-items: center; gap: 8px; }
.viewer__progress { display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 32px; border-radius: 999px; background: #ececee; }
.viewer__seg { position: relative; height: 32px; padding: 0 4px; display: flex; align-items: center; cursor: pointer; }
.viewer__seg i { position: relative; display: block; width: 7px; height: 7px; border-radius: 999px; background: #a8a8ad; overflow: hidden;
  transition: width 420ms cubic-bezier(0.32, 0.72, 0, 1), background-color 200ms ease; }
.viewer__seg.is-current i { width: 32px; background: #c8c8cc; }
.viewer__seg i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1d1d1f; transform: scaleX(0); transform-origin: left; }
.viewer__seg.is-current i::after { transform: scaleX(1); }
.viewer__nav:not(.is-paused) .viewer__seg.is-current i::after { transform: scaleX(0); }
.viewer__seg.is-running i::after { animation: viewer-fill 4000ms linear forwards; }
@keyframes viewer-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .viewer__seg:not(.is-current):hover i { background: #7c7c82; } }
.viewer__play { width: 32px; height: 32px; border: 0; border-radius: 999px; background: #ececee; color: #1d1d1f; display: grid; place-items: center; cursor: pointer; transition: transform 120ms ease-out, background-color 150ms ease; }
.viewer__play:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .viewer__play:hover { background: #e2e2e6; } }
.viewer__play:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; }
.viewer__play svg { width: 14px; height: 14px; fill: currentColor; }
.viewer__nav .viewer__icon-play { display: none; }
.viewer__nav.is-paused .viewer__icon-play { display: block; }
.viewer__nav.is-paused .viewer__icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .viewer__seg i { transition: none; } }
/* Tiles: the gray status tiles are 1.04:1 against the blueprint, so give every tile a hairline edge and a soft lift (follows the rounded shape) */
.tilegrid img { filter: drop-shadow(0 0 0.6px rgba(31, 52, 92, 0.55)) drop-shadow(0 2px 4px rgba(31, 52, 92, 0.10)); }
/* Component board as a blueprint sheet */
.cs-panel--blueprint { background-color: #eef3fb;
  background-image: linear-gradient(#d7e2f3 1px, transparent 1px), linear-gradient(90deg, #d7e2f3 1px, transparent 1px),
    linear-gradient(#e4ebf7 1px, transparent 1px), linear-gradient(90deg, #e4ebf7 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: -1px -1px; }
.cs-panel--blueprint .variant-set { background: rgba(238, 243, 251, 0.55); }
.cs-panel--blueprint .states figcaption, .cs-panel--blueprint .tilegrid figcaption { border-bottom-color: #c3d2ea; color: #4a5b78; }
/* Captions share one height and stay on one line, so every column starts at the same point */
.states figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
/* Tiles: 7 equal columns across the frame, prompts and status share the grid */
.tilegrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tilegrid__group { display: grid; grid-template-columns: subgrid; row-gap: 14px; align-content: start; }
.tilegrid__group--prompts { grid-column: 1 / span 3; }
.tilegrid__group--status { grid-column: 4 / span 4; }
.tilegrid figcaption { grid-column: 1 / -1; font: 500 10.5px/1.2 var(--font-mono); padding-bottom: 10px; border-bottom: 1px solid #d9d3c6; }
.tilegrid img { width: 100%; height: auto; }
@media (max-width: 767px) { .tilegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .tilegrid__group--prompts { grid-column: 1 / -1; } .tilegrid__group--status { grid-column: 1 / -1; } }
/* Figma convention: the component set name sits outside the frame, top left */
.variant-set { padding: 20px; margin-top: 30px; }
.variant-set + .variant-set { margin-top: 52px; }
.variant-set__name { top: -24px; left: -1px; font-size: 12px; }
@media (max-width: 767px) { .variant-set { padding: 14px 12px; } }

/* Secure Connect: first-time setup flow, coded */
.flow { width: 100%; display: grid; gap: 18px; font-size: 12px; color: #33415a; }
.flow__lane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr) 18px) minmax(0, 1fr) 18px minmax(0, 1.05fr) 18px minmax(0, 1.15fr); align-items: center; }
.flow__node, .flow__outs { background: #fff; border-radius: 10px; padding: 10px 11px; box-shadow: 0 0 0 1px rgba(31, 52, 92, 0.14), 0 2px 6px rgba(31, 52, 92, 0.06); display: grid; gap: 4px; align-self: stretch; }
.flow__step { font: 500 9.5px/1 var(--font-mono); color: #6b7a94; letter-spacing: 0.02em; }
.flow__node b { font-size: 12.5px; color: #1d2433; }
.flow__node ul, .flow__outs ul { list-style: none; display: grid; gap: 3px; line-height: 1.35; }
.flow__arrow { height: 1px; background: #8fa3c4; position: relative; margin: 0 2px; }
.flow__arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid #8fa3c4; border-right: 0; }
.flow__decide { display: grid; gap: 10px; justify-items: center; align-self: stretch; align-content: center; }
.flow__decide .flow__step { justify-self: start; }
.flow__diamond { width: 78px; height: 78px; display: grid; place-items: center; position: relative; text-align: center; }
.flow__diamond::before { content: ""; position: absolute; inset: 12px; transform: rotate(45deg); background: #1d2433; border-radius: 6px; }
.flow__diamond b { position: relative; color: #fff; font-size: 10px; line-height: 1.2; max-width: 56px; font-weight: 600; }
.flow__branch { display: flex; align-items: center; gap: 10px; padding-left: calc((100% - 90px) * 0.4); }
.flow__branch-line { flex: 0 0 34px; height: 0; border-top: 1.5px dashed #e07a2e; }
.flow__branch-label { font-size: 11.5px; color: #8a4513; }
.flow__outs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.flow__out { display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 8px; background: #f3f6fb; }
.flow__tag { justify-self: start; font: 600 9.5px/1 var(--font-sans); padding: 3px 6px; border-radius: 999px; background: #1d2433; color: #fff; }
.flow__tag--soft { background: #dfe7f4; color: #33415a; }
.flow__res { font-size: 11.5px; line-height: 1.35; }
.flow__res i { font-style: normal; font-weight: 600; color: #1d2433; }
@media (max-width: 1023px) {
  .flow__lane { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow__arrow { width: 1px; height: 14px; margin: 2px auto; }
  .flow__arrow::after { right: -3px; top: auto; bottom: -1px; border: 3.5px solid transparent; border-top: 5px solid #8fa3c4; border-bottom: 0; }
  .flow__decide { grid-auto-flow: column; justify-content: start; align-items: center; }
  .flow__branch { padding-left: 0; }
  .flow__outs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cs-panel--canvas { background: #333333; padding: 4%; }
/* Secure Connect: first-time setup as a decision tree (SVG) */
.flowmap-wrap { width: 100%; display: grid; gap: 14px; }
.flowmap { width: 100%; height: auto; font-family: var(--font-sans); }
.flowmap .n rect { fill: #fff; stroke: #b9c7de; stroke-width: 1; }
.flowmap .o rect { fill: #fff; stroke-width: 1.5; }
.flowmap .o--on rect { stroke: #2f8f5b; }
.flowmap .o--setup rect { stroke: #d9822b; stroke-dasharray: 5 3; }
.flowmap .d polygon { fill: #1d2433; }
.flowmap text { text-anchor: middle; }
.flowmap .t-b { font-size: 12.5px; font-weight: 600; fill: #1d2433; }
.flowmap .t-s { font-size: 10.5px; fill: #55627a; }
.flowmap .t-d { font-size: 10.5px; font-weight: 600; fill: #fff; }
.flowmap .t-yn { font-size: 10px; font-weight: 600; fill: #3e5378; font-family: var(--font-mono); }
.flowmap .t-note { font-size: 10px; fill: #6b7a94; }
.flowmap .l { fill: none; stroke: #8fa3c4; stroke-width: 1.25; }
.flowmap .ah { fill: #8fa3c4; }
.flowmap__legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 11px; color: #4a5b78; }
.flowmap__legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.lg--n { background: #fff; box-shadow: inset 0 0 0 1px #b9c7de; }
.lg--d { width: 9px; height: 9px; background: #1d2433; transform: rotate(45deg); border-radius: 1px; }
.lg--on { background: #fff; box-shadow: inset 0 0 0 1.5px #2f8f5b; }
.lg--setup { background: #fff; border: 1.5px dashed #d9822b; }
@media (max-width: 767px) { .flowmap-wrap { overflow-x: auto; } .flowmap { min-width: 560px; } }
.flowmap .t-note { text-anchor: end; }
/* Secure Connect: first-time setup as a simple infographic */
.ig { width: 100%; max-width: 560px; display: grid; gap: 22px; justify-items: center; text-align: center; color: #33415a; }
.ig__steps { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.ig__steps::before { content: ""; position: absolute; top: 22px; left: 16.6%; right: 16.6%; height: 2px; background: #b3c3dd; }
.ig__step { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 8px; font-size: 12px; line-height: 1.4; }
.ig__num { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: #1d2433; color: #fff; font: 600 18px/1 var(--font-sans); box-shadow: 0 0 0 6px #eef3fb; margin-bottom: 4px; }
.ig__step b { font-size: 15px; color: #1d2433; }
.ig__decide { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(31, 52, 92, 0.14); }
.ig__q { width: 100%; font: 500 10.5px/1.2 var(--font-mono); color: #6b7a94; }
.ig__chip { font-size: 12.5px; font-weight: 600; color: #fff; background: #1d2433; padding: 7px 12px; border-radius: 999px; }
.ig__phones { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ig__phone { display: grid; justify-items: center; gap: 6px; font-size: 10.5px; line-height: 1.3; }
.ig__screen { width: 100%; max-width: 64px; aspect-ratio: 9 / 18; border-radius: 10px; background: #fff; display: grid; align-content: start; gap: 5px; padding: 10px 7px; box-sizing: border-box; }
.ig__screen i { display: block; height: 14px; border-radius: 3px; background: #e5ebf5; }
.ig__screen i:first-child { height: 6px; width: 60%; background: #c6d2e6; }
.ig__phone--on .ig__screen { box-shadow: 0 0 0 2px #2f8f5b; }
.ig__phone--on .ig__screen i:nth-child(2) { background: #cfe9da; }
.ig__phone--setup .ig__screen { outline: 2px dashed #d9822b; outline-offset: 0; }
.ig__phone--setup .ig__screen i:nth-child(2) { background: #fbe3cc; }
.ig__legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 11px; color: #4a5b78; }
.ig__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ig__key { width: 12px; height: 12px; border-radius: 3px; background: #fff; }
.ig__key--on { box-shadow: inset 0 0 0 2px #2f8f5b; }
.ig__key--setup { border: 2px dashed #d9822b; }
.ig__safety { font-size: 13px; font-weight: 600; color: #1d2433; }
@media (max-width: 479px) { .ig__phones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ig__step span:last-child { font-size: 11px; } }
.ig__steps { align-items: start; }
.viewer__tabs { gap: 5px; }
.viewer__tabs button { padding: 8px 11px; }
/* The note's number lines up with the tab row (first thing on the right), centered on the tab labels */
@media (min-width: 768px) { .cs-moment:has(.viewer) > .cs-note { padding-top: 7px; } }
  .t-card { grid-template-columns: 1fr; }
  .t-card__media { min-height: 120px; }
  .wf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers__row { grid-template-columns: 1fr; }
  .tiers__brands { grid-column: 1; }
  .devices { gap: 10px; }
  .device--phone { width: 64px; height: 128px; }
  .device--desktop { width: 140px; height: 96px; }
  .device--qr { width: 48px; height: 48px; padding: 6px; }
  .device--qr span { width: 34px; height: 34px; background-size: 9px 9px; }

/* IHG: coded component specimens built from slots (wireframes) */
.slots { width: 100%; max-width: 560px; display: grid; gap: 20px; }
.slots__tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.05); justify-self: center; }
.slots__tabs button { border: 0; background: transparent; cursor: pointer; font: 500 var(--type-caption)/1 var(--font-sans); padding: 8px 12px; border-radius: 999px; color: var(--text-brand-secondary); }
.slots__tabs button[aria-selected="true"] { background: #fff; color: var(--text-brand-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.slots__panel { display: grid; gap: 16px; }
.slots__panel[hidden] { display: none; }
.slots__ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: var(--type-caption); color: var(--text-brand-secondary); }
.slots__ctrl button { border: 1px solid #2c2c2c; background: #fff; color: #2c2c2c; cursor: pointer; font: 600 var(--type-caption)/1 var(--font-sans); padding: 9px 14px; border-radius: 999px; transition: transform 160ms var(--ease-out, ease-out); }
.slots__ctrl button:active { transform: scale(0.97); }
.slots__ctrl span { font-family: var(--font-mono); }
.sl-line { display: block; height: 8px; border-radius: 4px; background: #d5dbe4; }
.sl-line--title { height: 12px; width: 55%; background: #b8c2d0; }
.sl-line--short { width: 40%; }
.sl-acc { background: #fff; border-radius: 14px; padding: 4px 18px; }
.sl-acc__item + .sl-acc__item { border-top: 1px solid #e4e8ee; }
.sl-acc__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.sl-chev { width: 10px; height: 10px; border-right: 2px solid #8a96a8; border-bottom: 2px solid #8a96a8; transform: rotate(45deg); margin-top: -4px; }
.sl-acc__item.is-open .sl-chev { transform: rotate(-135deg); margin-top: 4px; }
.sl-slot { border: 1px dashed #9fb0c8; border-radius: 10px; padding: 14px; display: grid; gap: 8px; margin-bottom: 16px; min-height: 92px; align-content: start; }
.sl-slot__tag { font: 500 10px/1 var(--font-mono); color: #5a6b85; text-transform: uppercase; letter-spacing: 0.06em; }
.sl-slot__media { height: 64px; border-radius: 8px; background: #d5dbe4; }
.sl-slot__btn { width: 96px; height: 26px; border-radius: 999px; background: #2c2c2c; }
.sl-slot__row { display: flex; gap: 8px; align-items: center; } .sl-slot__row i { width: 14px; height: 14px; border-radius: 50%; background: #b8c2d0; flex: none; }
.sl-icons { display: flex; flex-wrap: wrap; gap: 12px 20px; background: #fff; border-radius: 14px; padding: 18px; width: 100%; transition: width 300ms var(--ease-out, ease-out); }
.sl-icons[data-width="narrow"] { width: 52%; }
.sl-icons span { display: flex; align-items: center; gap: 8px; }
.sl-icons span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #b8c2d0; }
.sl-icons span::after { content: ""; width: 72px; height: 8px; border-radius: 4px; background: #d5dbe4; }
.sl-dsb { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; background: #fff; border-radius: 14px; padding: 18px; align-items: start; }
.sl-dsb__main { display: grid; gap: 10px; }
.sl-dsb .sl-slot { margin: 0; }
@media (max-width: 479px) { .sl-dsb { grid-template-columns: 1fr; } }
.sl-mosaic { background: #fff; border-radius: 14px; padding: 12px; }
.sl-mosaic span { display: block; border-radius: 6px; background: #d5dbe4; }
.sl-mosaic span:nth-child(3n+2) { background: #c3ccd8; }
.sl-mosaic.is-mosaic { columns: 3; column-gap: 8px; }
.sl-mosaic.is-mosaic span { break-inside: avoid; margin-bottom: 8px; }
.sl-mosaic.is-mosaic .r45 { aspect-ratio: 4 / 5; } .sl-mosaic.is-mosaic .r11 { aspect-ratio: 1 / 1; } .sl-mosaic.is-mosaic .r32 { aspect-ratio: 3 / 2; }
.sl-mosaic.is-mosaic .r23 { aspect-ratio: 2 / 3; } .sl-mosaic.is-mosaic .r43 { aspect-ratio: 4 / 3; } .sl-mosaic.is-mosaic .r34 { aspect-ratio: 3 / 4; }
.sl-mosaic:not(.is-mosaic) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sl-mosaic:not(.is-mosaic) span { aspect-ratio: 1 / 1; }
@media (prefers-reduced-motion: reduce) { .sl-icons { transition: none; } }
/* Token flow: keep the three semantic tokens on one line where there's room */
.tokflow { max-width: 100%; }
.tokflow li { gap: 6px; }
.tokflow__label { min-width: 120px; }
.tokflow code { font-size: 10.5px; white-space: nowrap; }
@media (min-width: 1024px) { .tokflow li { flex-wrap: nowrap; } }

/* IHG: DetailsSummaryBlock, coded from the spec (open-source stand-in fonts) */
.dsb-lab { width: 100%; display: grid; gap: 20px; }
.dsb-lab__controls { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.dsb-lab__ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dsb-lab__lbl { font: 500 11px/1 var(--font-mono); color: var(--text-brand-secondary); margin-right: 4px; }
.dsb-lab__ctl button { border: 1px solid #c9d1dc; background: #fff; color: var(--text-brand-secondary); font: 500 12px/1 var(--font-sans); padding: 7px 10px; border-radius: 999px; cursor: pointer; transition: transform 160ms var(--ease-out, ease-out), background-color 160ms ease, color 160ms ease; }
.dsb-lab__ctl button:active { transform: scale(0.97); }
.dsb-lab__ctl button[aria-pressed="true"] { background: #2c2c2c; border-color: #2c2c2c; color: #fff; }
.dsb-lab__ctl button:disabled { cursor: not-allowed; opacity: 0.55; }
.dsb-lab__stage { background: #fff; border-radius: 14px; padding: 20px; overflow: hidden; }
.dsb-lab__props { font: 400 11px/1.5 var(--font-mono); color: var(--text-brand-secondary); overflow-wrap: anywhere; }
.dsb-spec { list-style: none; display: grid; gap: 8px; margin-top: 4px; font-size: var(--type-caption); color: var(--text-brand-secondary); }
.dsb-spec b { display: block; font: 500 11px/1.4 var(--font-mono); color: var(--text-brand-primary); }

.dsb { --dsb-bg: #f3f5f4; --dsb-ink: #1f1d4a; --dsb-text: #4b5563; --dsb-cta: #0e3a4a; --dsb-rule: #dfe3e2;
  background: var(--dsb-bg); color: var(--dsb-text); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; padding: 36px 32px; transition: background-color 200ms ease; }
.dsb[data-surface="warm"] { --dsb-bg: #f8f4ef; }
.dsb__primary { display: grid; gap: 14px; align-content: start; }
.dsb__title { font: 300 30px/1.1 "Newsreader", Georgia, serif; letter-spacing: -0.01em; color: var(--dsb-ink); }
.dsb__body { font-size: 13px; line-height: 1.6; letter-spacing: 0.01em; }
.dsb__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dsb__btn { font: 500 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--dsb-cta); color: var(--dsb-cta); }
.dsb__btn--primary { background: var(--dsb-cta); color: #fff; }
.dsb[data-title="off"] .dsb__title, .dsb[data-ctas="0"] .dsb__ctas, .dsb[data-ctas="1"] .dsb__btn:not(.dsb__btn--primary) { display: none; }
.dsb__stack { display: grid; gap: 22px; align-content: start; }
.dsb__item[hidden] { display: none; }
.dsb__head { all: unset; display: flex; justify-content: space-between; align-items: center; font: 300 19px/1.2 "Newsreader", Georgia, serif; color: var(--dsb-ink); }
.dsb__head i { display: none; }
.dsb__content { display: grid; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 1.55; letter-spacing: 0.01em; }
.dsb__row { display: flex; align-items: center; gap: 8px; }
.dsb__ico { width: 13px; height: 13px; border: 1.25px solid var(--dsb-ink); border-radius: 3px; flex: none; }
.dsb__ico--phone { border-radius: 3px 7px 3px 7px; }
.dsb__link { font: 500 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dsb-ink); margin-top: 4px; }
.dsb__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.dsb__flags span { font: 500 9.5px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 8px; background: #e6e8ea; color: #333; }
/* Desktop: Highlights has no label (decided in review); items sit open */
.dsb[data-view="desktop"] .dsb__item[data-item="highlights"] .dsb__head { display: none; }
.dsb[data-view="desktop"] .dsb__item[data-item="highlights"] .dsb__content { margin-top: 0; }
.dsb[data-view="desktop"] .dsb__head { pointer-events: none; }
/* Mobile: one column, the stack becomes an accordion */
.dsb:is([data-view="mobile"], [data-view="tablet"]) { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; padding: 28px 20px; gap: 24px; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__title { font-size: 26px; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__btn { flex: 1 1 100%; text-align: center; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__stack { gap: 0; border-top: 1px solid var(--dsb-rule); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__item { border-bottom: 1px solid var(--dsb-rule); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head { width: 100%; box-sizing: border-box; padding: 16px 8px; font-size: 17px; cursor: pointer; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head:focus-visible { outline: 2px solid var(--dsb-cta); outline-offset: -2px; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head i { display: block; position: relative; width: 12px; height: 12px; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head i::before, .dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head i::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: var(--dsb-ink); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head i::after { transform: rotate(90deg); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head[aria-expanded="true"] i::after { transform: rotate(0deg); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__content { margin: 0; padding: 0 8px 16px; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head[aria-expanded="false"] + .dsb__content { display: none; }
/* RTL mirrors columns, buttons, and icon order */
.dsb[dir="rtl"] { text-align: right; }
@media (max-width: 767px) { .dsb[data-view="desktop"] { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; } .dsb-lab__stage { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .dsb__head i::after { transition: none !important; } }
/* RTL demo uses English copy: mirror the layout, keep each line's own reading order */
.dsb[dir="rtl"] :is(.dsb__title, .dsb__body, .dsb__content p, .dsb__btn, .dsb__flags span, .dsb__head) { unicode-bidi: plaintext; }
.dsb[dir="rtl"] .dsb__content p { text-align: right; }
/* DSB refinements: Phosphor icons, top alignment, empty stack, Arabic RTL, spec file */
.dsb { align-items: start; }
.dsb__title { margin: 0; }
.dsb .ph { width: 14px; height: 14px; flex: none; }
.dsb__btn, .dsb__link { display: inline-flex; align-items: center; gap: 8px; }
.dsb__btn .ph--arrow, .dsb__link .ph--arrow { width: 12px; height: 12px; }
.dsb__row .ph { color: var(--dsb-ink); }
.dsb__ind { display: none; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__ind { display: inline-flex; color: var(--dsb-ink); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head[aria-expanded="true"] .ph--plus, .dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__head[aria-expanded="false"] .ph--minus { display: none; }
.dsb[data-empty="true"] { grid-template-columns: minmax(0, 1fr); }
.dsb[data-empty="true"] .dsb__stack { display: none; }
.dsb[dir="rtl"] .ph--arrow { transform: scaleX(-1); }
.dsb[lang="ar"] { font-family: "Noto Sans Arabic", var(--font-sans); }
.dsb[lang="ar"] .dsb__title, .dsb[lang="ar"] .dsb__head { font-family: "Noto Naskh Arabic", "Newsreader", serif; font-weight: 400; letter-spacing: 0; }
.dsb[lang="ar"] .dsb__body, .dsb[lang="ar"] .dsb__content { letter-spacing: 0; font-size: 13px; line-height: 1.8; }
.dsb[lang="ar"] .dsb__btn, .dsb[lang="ar"] .dsb__link, .dsb[lang="ar"] .dsb__flags span { letter-spacing: 0; text-transform: none; font-family: "Noto Sans Arabic", var(--font-sans); font-size: 12px; }
.dsb[lang="ar"] [data-l="addr"], .dsb[lang="ar"] .dsb__row { unicode-bidi: plaintext; }
.dsb-lab__shuffle { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.dsb-lab__shuffle .ph { width: 13px; height: 13px; }
.mdfile { background: #fff; border-radius: 12px; border: 1px solid #dde3ea; }
.mdfile summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font: 500 12px/1 var(--font-mono); color: var(--text-brand-primary); }
.mdfile summary::-webkit-details-marker { display: none; }
.mdfile__hint { color: var(--text-brand-secondary); }
.mdfile[open] .mdfile__hint::after { content: " ↑"; }
.mdfile:not([open]) .mdfile__hint::after { content: " ↓"; }
.mdfile__body { border-top: 1px solid #dde3ea; padding: 16px 18px 20px; font: 400 12px/1.65 var(--font-mono); color: #3b4656; display: grid; gap: 6px; }
.mdfile__body .md-h1 { font-weight: 500; color: var(--text-brand-primary); font-size: 13px; }
.mdfile__body .md-h2 { font-weight: 500; color: #6b4fbb; margin-top: 10px; }
.mdfile__body ul { list-style: none; display: grid; gap: 3px; }
.mdfile__body li { padding-left: 16px; position: relative; }
.mdfile__body li::before { content: "-"; position: absolute; left: 2px; color: #8a96a8; }
.mdfile__body code, code.cname { font-family: var(--font-mono); font-size: 0.9em; background: #eef1f6; color: #34435a; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
/* Motion Library: pattern list with clear hierarchy (name, then interaction) */
.patterns { list-style: none; display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--border-neutral-primary); }
.patterns li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--border-neutral-primary); }
.patterns code.cname { justify-self: start; }
.patterns span { font-size: var(--type-caption); color: var(--text-brand-secondary); }
/* Spec file in the note column */
.cs-note .mdfile { margin-top: 6px; }
.cs-note .mdfile__body { font-size: 11px; padding: 14px; }

/* DSB lab controls, Apple style: label above, segmented track with a white selected pill, swatches, check toggles */
.dsb-lab { gap: 16px; }
.dsb-lab__controls { display: grid; grid-template-columns: repeat(3, max-content); gap: 14px 24px; align-items: end; }
.dsb-lab__ctl { display: grid; gap: 6px; justify-items: start; }
.dsb-lab__ctl:last-child { grid-column: 1 / -1; }
.dsb-lab__lbl { font: 500 10.5px/1 var(--font-sans); color: #6e6e73; margin: 0; letter-spacing: 0.01em; }
.dsb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: #e3e3e8; }
.dsb-lab__ctl .dsb-seg button { border: 0; background: transparent; color: #3a3a3c; font: 500 12px/1 var(--font-sans); padding: 7px 12px; border-radius: 7px; box-shadow: none;
  transition: background-color 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1), color 150ms ease; }
.dsb-lab__ctl .dsb-seg button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.dsb-lab__ctl .dsb-seg button:active { transform: scale(0.96); }
/* Surface as swatches */
.dsb-lab__ctl .dsb-seg [data-set="surface"] { display: inline-flex; align-items: center; gap: 6px; }
.dsb-lab__ctl .dsb-seg [data-set="surface"]::before { content: ""; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.dsb-lab__ctl .dsb-seg [data-val="cool"]::before { background: #f3f5f4; }
.dsb-lab__ctl .dsb-seg [data-val="warm"]::before { background: #f8f4ef; }
/* Content stack: check toggles + reorder */
.dsb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dsb-lab__ctl .dsb-chips [data-item-toggle] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f; font: 500 12px/1 var(--font-sans); padding: 7px 11px 7px 9px; border-radius: 999px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.dsb-lab__ctl .dsb-chips [data-item-toggle]::before { content: ""; width: 12px; height: 12px; border-radius: 999px; background: #1d1d1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.dsb-lab__ctl .dsb-chips [data-item-toggle][aria-pressed="false"] { color: #86868b; border-style: dashed; background: transparent; }
.dsb-lab__ctl .dsb-chips [data-item-toggle][aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 1.25px #aeaeb2; }
.dsb-lab__ctl .dsb-chips [data-item-toggle]:active { transform: scale(0.96); }
.dsb-lab__ctl .dsb-chips .dsb-lab__shuffle { border: 0; background: transparent; color: #0066cc; padding: 7px 6px; margin: 0; font: 500 12px/1 var(--font-sans); }
@media (hover: hover) and (pointer: fine) { .dsb-lab__ctl .dsb-chips .dsb-lab__shuffle:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Props readout: quiet, one line */
.dsb-lab__props { font: 400 10.5px/1.5 var(--font-mono); color: #86868b; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); }
.dsb-lab__props::before { content: "props  "; color: #aeaeb2; }
@media (max-width: 767px) { .dsb-lab__controls { grid-template-columns: repeat(2, max-content); gap: 12px 16px; } }
@media (prefers-reduced-motion: reduce) { .dsb-lab__ctl button { transition: none; } }
.cs-note .mdfile summary { flex-wrap: wrap; gap: 4px 12px; }
.mdfile__hint { white-space: nowrap; }

/* DSB properties panel (designer view, real prop names) */
.pp { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(31, 52, 92, 0.12); overflow: hidden; }
.pp__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eceef2; }
.pp__comp { font: 500 12px/1 var(--font-sans); color: #7b3fe4; }
.pp__hint { font: 500 10.5px/1 var(--font-sans); color: #86868b; }
.pp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 6px 14px 10px; }
.pp__row { display: flex; align-items: center; gap: 8px; min-height: 36px; flex-wrap: wrap; }
.pp__name { font: 400 11px/1.2 var(--font-mono); color: #33415a; min-width: 0; }
.pp__grid .pp__name { flex: 0 0 100%; margin-top: 6px; }
.pp__note { font: 400 10px/1 var(--font-sans); color: #aeaeb2; }
.pp .dsb-seg button { border: 0; background: transparent; color: #3a3a3c; font: 500 11.5px/1 var(--font-sans); padding: 6px 10px; border-radius: 7px; cursor: pointer; transition: background-color 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp .dsb-seg button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.pp .dsb-seg button:active { transform: scale(0.96); }
.pp .dsb-seg [data-val="cool"]::before, .pp .dsb-seg [data-val="warm"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.pp .dsb-seg [data-val="cool"]::before { background: #f3f5f4; }
.pp .dsb-seg [data-val="warm"]::before { background: #f8f4ef; }
/* Switch */
.pp__switch, .pp__include { flex: none; position: relative; width: 34px; height: 20px; border: 0; border-radius: 999px; background: #d1d1d6; cursor: pointer; padding: 0; transition: background-color 200ms ease; }
.pp__switch i, .pp__include i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp__switch[aria-checked="true"], .pp__include[aria-checked="true"] { background: #34c759; }
.pp__switch[aria-checked="true"] i, .pp__include[aria-checked="true"] i { transform: translateX(14px); }
.pp__switch:focus-visible, .pp__include:focus-visible, .pp__drag:focus-visible, .pp__chev:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
.pp__switch:disabled { opacity: 0.4; cursor: not-allowed; }
/* Content slot list */
.pp__slot { border-top: 1px solid #eceef2; padding: 8px 10px 10px; }
.pp__slot.is-off .pp__items { opacity: 0.4; pointer-events: none; }
.pp__slothead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.pp__items { list-style: none; display: grid; gap: 4px; position: relative; }
.pp__item { background: #f5f6f8; border-radius: 9px; position: relative; }
.pp__item.is-dragging { z-index: 2; box-shadow: 0 8px 24px rgba(31, 52, 92, 0.18); background: #fff; transition: box-shadow 200ms ease; }
.pp__item.is-settling { transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp__item[data-include="false"] .pp__itemname { opacity: 0.45; }
.pp__itemhead { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 4px; }
.pp__drag { flex: none; width: 24px; height: 28px; border: 0; background: transparent; color: #aeaeb2; cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: 6px; }
.pp__drag:active { cursor: grabbing; }
.pp__drag svg { width: 12px; height: 12px; fill: currentColor; }
.pp__itemname { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pp__itemname code { font: 400 10.5px/1.2 var(--font-mono); color: #33415a; }
.pp__itemname span { font: 500 12px/1.2 var(--font-sans); color: #1d1d1f; }
.pp__chev { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: #86868b; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.pp__chev svg { width: 12px; height: 12px; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp__chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.pp__nested { padding: 0 12px 8px 40px; }
.pp__nested .pp__row { min-height: 30px; justify-content: space-between; flex-wrap: nowrap; }
.pp__group { display: block; font: 500 10px/1 var(--font-sans); color: #86868b; margin: 8px 0 2px; }
.pp__mobile { opacity: 0.45; }
[data-bp="mobile"] .pp__mobile, [data-bp="tablet"] .pp__mobile { opacity: 1; }
/* Stage with a width handle */
.dsb-lab__stagewrap { position: relative; width: var(--stage-w, 100%); max-width: 100%; justify-self: start; }
.dsb-lab__handle { position: absolute; top: 50%; right: -14px; width: 14px; height: 64px; transform: translateY(-50%); border: 0; background: transparent; cursor: ew-resize; touch-action: none; display: grid; place-items: center; padding: 0; }
.dsb-lab__handle i { width: 5px; height: 40px; border-radius: 999px; background: #c7cdd8; transition: background-color 150ms ease, height 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.dsb-lab__handle:hover i, .dsb-lab__handle.is-active i { background: #8e9bb3; height: 52px; }
.dsb-lab__handle:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 6px; }
.dsb-lab__width { position: absolute; top: 8px; right: 10px; font: 400 10px/1 var(--font-mono); color: #86868b; background: rgba(255, 255, 255, 0.8); padding: 4px 6px; border-radius: 5px; }
/* Desktop: the content column holds its size, the primary column flexes (per spec) */
.dsb[data-view="desktop"] { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) { max-width: none; width: 100%; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__stack { border-top: 0; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__item { border-bottom: 0; }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__item[data-border-top="true"] { border-top: 1px solid var(--dsb-rule); }
.dsb:is([data-view="mobile"], [data-view="tablet"]) .dsb__item[data-border-bottom="true"] { border-bottom: 1px solid var(--dsb-rule); }
.dsb[data-view="desktop"] .dsb__item[data-show-header="false"] .dsb__head { display: none; }
.dsb[data-view="desktop"] .dsb__item[data-show-header="false"] .dsb__content { margin-top: 0; }
.dsb[data-view="desktop"] .dsb__item[data-item="highlights"] .dsb__head { display: flex; }
.dsb[data-view="desktop"] .dsb__item[data-item="highlights"][data-show-header="false"] .dsb__head { display: none; }
.dsb__item[data-text-link="false"] .dsb__link { display: none; }
.dsb[data-actions="false"] .dsb__ctas { display: none; }
.cs-note .mdfile summary { flex-wrap: nowrap; }
.mdfile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .pp__grid { grid-template-columns: minmax(0, 1fr); } .dsb-lab__handle, .dsb-lab__width { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp__switch i, .pp__include i, .pp__chev svg, .pp__item.is-settling { transition: none; } }
/* Root props: Figma-style rows, name left, control right */
.pp__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 14px 8px; }
.pp__grid .pp__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid #f2f3f5; }
.pp__grid .pp__row:last-child { border-bottom: 0; }
.pp__grid .pp__name { flex: none; margin: 0; }
.pp__grid .pp__switch, .pp__grid .dsb-seg { justify-self: start; }
@media (max-width: 767px) { .pp__grid .pp__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px 0; } }
.pp__nested .pp__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.pp__nested .pp__note { order: 1; }
.pp__nested .pp__switch { order: 2; }
.pp__nested .pp__name { grid-column: 1; }
.pp__nested .pp__note { grid-column: 2; }
.pp__nested .pp__switch { grid-column: 3; justify-self: end; }

/* Tablet: stacked like mobile, buttons side by side, roomier */
.dsb[data-view="tablet"] { padding: 32px 28px; }
.dsb[data-view="tablet"] .dsb__title { font-size: 28px; }
.dsb[data-view="tablet"] .dsb__btn { flex: 1 1 0; text-align: center; justify-content: center; }
.dsb[data-view="mobile"] .dsb__btn { flex: 1 1 100%; justify-content: center; }
/* Spec file: always open, ends with the component, scrolls inside */
.cs-moment:has(.dsb-lab) { align-items: stretch; }
.cs-moment:has(.dsb-lab) > .cs-note { display: flex; flex-direction: column; }
.mdfile--pane { flex: 1 1 0; min-height: 260px; display: flex; flex-direction: column; overflow: hidden; outline: none; }
.mdfile--pane:focus-visible { box-shadow: 0 0 0 2px #0066cc; }
.mdfile__bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #dde3ea; font: 500 11.5px/1 var(--font-mono); color: var(--text-brand-primary); }
.mdfile--pane .mdfile__body { flex: 1 1 0; min-height: 0; overflow-y: auto; border-top: 0; overscroll-behavior: contain; }
@media (max-width: 767px) { .mdfile--pane { flex: none; height: 360px; } }
/* Moment 01 refinements: preview leads, panel follows; width springs back after a rubber-band pull */
.dsb-lab__stagewrap.is-settling { transition: width 360ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp__row[hidden], .pp__items[hidden] { display: none; }
.pp__slot.is-off .pp__slothead::after { content: "Slot hidden"; font: 400 10px/1 var(--font-sans); color: #aeaeb2; margin-left: auto; }
.dsb-lab > .pp { margin-top: 4px; }
/* DetailsSummaryBlock sandbox: a small design tool window (canvas + inspector + status bar) */
.cs-moment--sandbox { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cs-moment--sandbox > .cs-note { max-width: 640px; padding-top: 0; }
.sbx { position: relative; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 52, 92, 0.12), 0 24px 60px -28px rgba(31, 52, 92, 0.28); overflow: hidden; }
.sbx__bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid #e6e9ef; }
.sbx__live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-sans); color: #1d1d1f; }
.sbx__live i { width: 7px; height: 7px; border-radius: 999px; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); }
.sbx__file { font: 500 12px/1 var(--font-sans); color: #7b3fe4; white-space: nowrap; }
.sbx__demo { justify-self: end; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: #f0f1f4; color: #1d1d1f; font: 500 12px/1 var(--font-sans); padding: 8px 13px 8px 11px; cursor: pointer; transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbx__demo:active { transform: scale(0.97); }
.sbx__demo:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sbx__demo:hover { background: #e6e8ec; } }
.sbx__ico { width: 11px; height: 11px; fill: currentColor; display: none; }
.sbx[data-demo="playing"] .sbx__ico--pause, .sbx[data-demo="idle"] .sbx__ico--play, .sbx[data-demo="paused"] .sbx__ico--play, .sbx[data-demo="done"] .sbx__ico--replay { display: block; }
.sbx__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sbx__progress i { display: block; height: 100%; background: #0d99ff; transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms ease; }
.sbx:not([data-demo="playing"]):not([data-demo="paused"]) .sbx__progress i { opacity: 0; }
.sbx__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 620px; }
/* Canvas: dotted, the component framed like a selected layer */
.sbx__canvas { position: relative; display: grid; align-content: center; padding: 56px 48px 64px; background-color: #f3f5f8; background-image: radial-gradient(#cdd5e1 1px, transparent 1.2px); background-size: 16px 16px; }
.sbx .dsb-lab__stagewrap { justify-self: center; outline: 1px solid #0d99ff; }
.sbx .dsb-lab__stage { padding: 0; border-radius: 0; background: none; }
.sbx__tag { position: absolute; left: -1px; bottom: calc(100% + 6px); font: 500 11px/1 var(--font-sans); color: #0d99ff; white-space: nowrap; }
.sbx .dsb-lab__handle { right: -7px; width: 14px; height: 14px; }
.sbx .dsb-lab__handle i { width: 9px; height: 9px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px #0d99ff; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbx .dsb-lab__handle:hover i, .sbx .dsb-lab__handle.is-active i { height: 9px; background: #fff; transform: scale(1.3); }
.sbx .dsb-lab__width { top: calc(100% + 8px); right: auto; left: 50%; transform: translateX(-50%); background: #0d99ff; color: #fff; border-radius: 4px; padding: 4px 6px; font-size: 10.5px; }
/* Inspector */
.sbx__side { position: relative; border-left: 1px solid #e6e9ef; display: flex; flex-direction: column; min-height: 0; }
.sbx__tabs { flex: none; display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #eceef2; }
.sbx__tabs [role="tab"] { border: 0; background: transparent; border-radius: 7px; padding: 7px 10px; font: 500 12px/1 var(--font-sans); color: #86868b; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sbx__tabs [role="tab"]:nth-child(2) { font-family: var(--font-mono); font-size: 11px; }
.sbx__tabs [role="tab"][aria-selected="true"] { background: #f0f1f4; color: #1d1d1f; }
.sbx__tabs [role="tab"]:focus-visible { outline: 2px solid #0066cc; outline-offset: 1px; }
.sbx__scroll { position: absolute; inset: 49px 0 0 0; overflow-y: auto; overscroll-behavior: contain; }
.sbx__scroll[hidden] { display: none; }
.sbx .pp { border-radius: 0; box-shadow: none; }
.sbx .pp__grid { padding: 4px 14px 8px; }
.sbx .pp__grid .pp__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 0; }
.sbx .pp__grid .pp__row:has(> .pp__switch) { grid-template-columns: minmax(0, 1fr) auto; }
.sbx .pp__grid .pp__row:has(> .pp__switch) .pp__switch { justify-self: end; }
.sbx .pp .dsb-seg button { font-size: 11px; padding: 6px 9px; }
.sbx .pp__mobile { opacity: 1; }
.sbx .mdfile__body { border: 0; font-size: 11px; padding: 16px; }
.sbx__scroll:focus-visible { outline: 2px solid #0066cc; outline-offset: -2px; }
/* Status bar: the live props */
.sbx__status.dsb-lab__props { margin: 0; border-radius: 0; border-top: 1px solid #e6e9ef; background: #fafbfc; padding: 9px 18px; }
/* Demo cursor */
.sbx__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease; }
.sbx__cursor.is-on { opacity: 1; }
.sbx__cursor.is-jump { transition: none; }
.sbx__cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); transform-origin: 20% 15%; transition: transform 110ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbx__cursor.is-press svg { transform: scale(0.86); }
@media (max-width: 1023px) {
  .sbx__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sbx__side { border-left: 0; border-top: 1px solid #e6e9ef; height: 440px; }
}
@media (max-width: 767px) {
  .sbx { border-radius: 16px; }
  .sbx__bar { grid-template-columns: 1fr auto; padding: 8px 8px 8px 14px; }
  .sbx__file { display: none; }
  .sbx__canvas { padding: 36px 12px 28px; }
}
@media (prefers-reduced-motion: reduce) { .sbx__cursor { display: none; } .sbx__progress i, .sbx__demo { transition: none; } }
/* An empty content slot gives the description the full width at every breakpoint */
.dsb[data-view][data-empty="true"] { grid-template-columns: minmax(0, 1fr); }
/* DetailsSummaryBlock at true size (values from the Figma variants), zoomed to fit the canvas */
.sbx__body { height: clamp(540px, 70vh, 700px); min-height: 0; }
.sbx__canvas { align-content: start; justify-content: center; overflow: auto; overscroll-behavior: contain; padding: 52px 40px 64px; }
.sbx .dsb-lab__stagewrap { width: auto; max-width: none; }
.sbx .dsb-lab__stage { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.sbx__body { position: relative; }
.sbx__canvas { position: static; }
.sbx__zoom { position: absolute; top: 12px; right: calc(340px + 12px); z-index: 2; font: 500 11px/1 var(--font-sans); color: #6e6e73; background: rgba(255, 255, 255, 0.85); padding: 5px 7px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(31, 52, 92, 0.1); }
.sbx .dsb { --dsb-bg: #f3f7f5; --dsb-ink: #211551; --dsb-text: #4a4a4a; --dsb-cta: #003b49; --dsb-rule: #d6d6d6; --dsb-acc: #303030;
  max-width: none; width: 100%; margin: 0; box-sizing: border-box; font-family: "Inter", var(--font-sans); }
.sbx .dsb[data-surface="warm"] { --dsb-bg: #fcf6f0; }
.sbx .dsb[data-view="desktop"] { grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; padding: 80px 120px; }
.sbx .dsb[data-view="tablet"] { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 80px 48px; }
.sbx .dsb[data-view="mobile"] { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 20px; }
.sbx .dsb[data-view][data-empty="true"] { grid-template-columns: minmax(0, 1fr); }
.sbx .dsb__primary { gap: 0; }
.sbx .dsb__title { font: 300 46px/60px "Newsreader", Georgia, serif; letter-spacing: 0; color: var(--dsb-ink); margin: 0 0 20px; }
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__title { font-size: 29px; line-height: 38px; }
.sbx .dsb__body { font: 300 18px/28px "Inter", var(--font-sans); letter-spacing: 0.5px; color: var(--dsb-text); margin: 0; }
.sbx .dsb__ctas { margin-top: 40px; gap: 16px; flex-wrap: nowrap; }
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__ctas { gap: 8px; }
.sbx .dsb[data-view="mobile"] .dsb__ctas { flex-direction: column; }
.sbx .dsb__btn { box-sizing: border-box; height: 44px; padding: 0 24px; justify-content: center; font: 500 14px/20px "Inter", var(--font-sans); letter-spacing: 1.75px; text-transform: uppercase; border: 1px solid #121212; color: #121212; background: transparent; white-space: nowrap; }
.sbx .dsb__btn--primary { background: var(--dsb-cta); border-color: var(--dsb-cta); color: #fff; }
.sbx .dsb[data-view="tablet"] .dsb__btn { flex: 1 1 0; }
.sbx .dsb[data-view="mobile"] .dsb__btn { flex: none; width: 100%; }
.sbx .dsb .ph { width: 16px; height: 16px; }
.sbx .dsb__btn .ph--arrow, .sbx .dsb__link .ph--arrow { width: 14px; height: 14px; }
/* Desktop content stack: SummaryContentItems, label 12 above content, 40 between items */
.sbx .dsb[data-view="desktop"] .dsb__stack { gap: 40px; }
.sbx .dsb[data-view="desktop"] .dsb__head { font: 300 23px/30px "Newsreader", Georgia, serif; color: var(--dsb-ink); }
.sbx .dsb[data-view="desktop"] .dsb__content { margin-top: 12px; }
.sbx .dsb__content { gap: 8px; font: 300 16px/26px "Inter", var(--font-sans); letter-spacing: 0.25px; color: var(--dsb-text); }
.sbx .dsb__row { gap: 10px; }
.sbx .dsb__link { margin-top: 4px; font: 500 14px/20px "Inter", var(--font-sans); letter-spacing: 1.75px; color: #121212; }
.sbx .dsb__flags { gap: 8px; }
.sbx .dsb__flags span { font: 500 12px/1 "Inter", var(--font-sans); letter-spacing: 1px; padding: 7px 10px; background: #e3ebe7; color: #303030; }
/* Tablet and mobile: AccordionItems, 18/24 labels, 16px icons, #d6d6d6 rules */
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__head { padding: 20px 0; font: 300 18px/24px "Newsreader", Georgia, serif; color: var(--dsb-acc); }
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__ind { color: var(--dsb-acc); }
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__content { padding: 0 0 20px; margin: 0; }
/* Arabic at the same scale */
.sbx .dsb[lang="ar"] .dsb__title { font-family: "Noto Naskh Arabic", serif; font-weight: 400; }
.sbx .dsb[lang="ar"] .dsb__body, .sbx .dsb[lang="ar"] .dsb__content { font-family: "Noto Sans Arabic", var(--font-sans); font-size: 17px; line-height: 30px; letter-spacing: 0; }
.sbx .dsb[lang="ar"] .dsb__btn, .sbx .dsb[lang="ar"] .dsb__link, .sbx .dsb[lang="ar"] .dsb__flags span { font-family: "Noto Sans Arabic", var(--font-sans); letter-spacing: 0; font-size: 15px; }
.sbx .dsb[lang="ar"] .dsb__head { font-family: "Noto Naskh Arabic", serif; font-weight: 400; }
@media (max-width: 1023px) { .sbx__body { height: auto; } .sbx__canvas { height: clamp(420px, 62vh, 600px); } .sbx__zoom { right: 12px; } }
@media (max-width: 767px) { .sbx__canvas { padding: 44px 16px 40px; }  .sbx .dsb-lab__width { display: block; } }
/* Zoom to fit: the whole component is always visible, centered on the canvas */
.sbx__canvas { align-content: center; overflow: hidden; padding: 56px 48px 56px; }
/* Motion Library specimens: wireframes and timing copied from the Motion Library, scoped to .mls */
.mls {--reveal-distance: 118px; --open-title-delay: 0s; --open-title-dur: 0.65s; --open-meta-delay: 0.08s; --open-meta-dur: 0.65s; --open-desc-delay: 0.3s; --open-desc-dur: 0.5s; --open-link-delay: 0.38s; --open-link-dur: 0.5s; --close-desc-delay: 0s; --close-desc-dur: 0.3s; --close-link-delay: 0s; --close-link-dur: 0.3s; --close-meta-delay: 0.27s; --close-meta-dur: 0.9s; --close-title-delay: 0.36s; --close-title-dur: 1.2s; }
.mls .demo-card {position: relative; width: 300px; height: 375px; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #5B5470 0%, #2E2A40 100%); box-shadow: 0 20px 48px rgba(0,0,0,0.4); cursor: pointer; user-select: none; }
.mls .demo-card__overlay {position: absolute; inset: 0; background: linear-gradient(rgba(33,21,81,0.1), rgba(33,21,81,0.1)), linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.75) 95%); pointer-events: none; }
.mls .demo-card__blur {position: absolute; inset: 0; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); background: rgba(6,5,15,0.68); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-panel); }
.mls .demo-card.open .demo-card__blur {opacity: 1; }
.mls .demo-card__body {position: absolute; bottom: 24px; left: 0; right: 0; padding: 0 16px 0 24px; display: flex; align-items: flex-end; justify-content: space-between; z-index: 2; }
.mls .demo-block {border-radius: 3px; color: #fff; font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; padding: 0 8px; }
.mls .demo-card__title {height: 28px; width: 200px; background: rgba(255,255,255,0.92); color: #1A1A2E; font-weight: 700; transition: transform var(--open-title-dur) var(--ease-panel) var(--open-title-delay); }
.mls .demo-card.open .demo-card__title {transform: translateY(calc(-1 * var(--reveal-distance))); transition: transform var(--open-title-dur) var(--ease-panel) var(--open-title-delay); }
.mls .demo-card.closing .demo-card__title {transform: translateY(0); transition: transform var(--close-title-dur) var(--ease-panel) var(--close-title-delay); }
.mls .demo-card__meta {height: 16px; width: 140px; margin-top: 8px; background: rgba(255,255,255,0.55); transition: transform var(--open-meta-dur) var(--ease-panel) var(--open-meta-delay); }
.mls .demo-card.open .demo-card__meta {transform: translateY(calc(-1 * var(--reveal-distance))); transition: transform var(--open-meta-dur) var(--ease-panel) var(--open-meta-delay); }
.mls .demo-card.closing .demo-card__meta {transform: translateY(0); transition: transform var(--close-meta-dur) var(--ease-panel) var(--close-meta-delay); }
.mls .demo-card__meta-col {display: flex; flex-direction: column; }
.mls .demo-card__desc {position: absolute; left: 24px; right: 76px; max-width: 273px; bottom: 58px; height: 64px; background: rgba(255,255,255,0.3); opacity: 0; transform: translateY(6px); transition: opacity var(--close-desc-dur) ease var(--close-desc-delay), transform var(--close-desc-dur) var(--ease-panel) var(--close-desc-delay); z-index: 2; align-items: flex-start; padding-top: 6px; }
.mls .demo-card.open .demo-card__desc {opacity: 1; transform: translateY(0); transition: opacity var(--open-desc-dur) ease var(--open-desc-delay), transform var(--open-desc-dur) var(--ease-panel) var(--open-desc-delay); }
.mls .demo-card__link {position: absolute; left: 24px; bottom: 24px; height: 22px; width: 80px; background: rgba(255,255,255,0.85); color: #1A1A2E; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--close-link-dur) ease var(--close-link-delay), transform var(--close-link-dur) var(--ease-panel) var(--close-link-delay); z-index: 2; }
.mls .demo-card.open .demo-card__link {opacity: 1; transform: translateY(0); transition: opacity var(--open-link-dur) ease var(--open-link-delay), transform var(--open-link-dur) var(--ease-panel) var(--open-link-delay); }
.mls .demo-card__toggle {flex-shrink: 0; position: relative; z-index: 3; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; background: transparent; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-left: 14px; }
.mls .demo-card__toggle .icon-plus, .mls .demo-card__toggle .icon-close {position: absolute; transition: opacity 0.4s ease, transform 0.4s var(--ease-panel); }
.mls .hover-track {display: flex; gap: 3px; width: 620px; height: 360px; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 48px rgba(0,0,0,0.4); }
.mls .hover-card {position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; background: linear-gradient(160deg, #5B5470 0%, #2E2A40 100%); transition: flex 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.mls .hover-track.has-hover .hover-card.is-hovered {flex: 0 0 400px; max-width: 400px; }
.mls .hover-card__overlay {position: absolute; inset: 0; background: linear-gradient(rgba(33,21,81,0.1), rgba(33,21,81,0.1)), linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.75) 95%); transition: background 0.7s ease; }
.mls .hover-card.is-hovered .hover-card__overlay {background: linear-gradient(rgba(33,21,81,0.1), rgba(33,21,81,0.1)), linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%); }
.mls .hover-card__body {position: absolute; bottom: 0; left: 0; right: 0; padding: 0 14px 16px; color: #fff; transition: opacity 0.3s ease, padding-bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.mls .hover-track.has-hover .hover-card:not(.is-hovered) .hover-card__body {opacity: 0; }
.mls .hover-card.is-hovered .hover-card__body {padding: 0 14px 22px; }
.mls .hover-card__title {height: 14px; width: 70%; background: rgba(255,255,255,0.92); border-radius: 2px; }
.mls .hover-card__details {height: 8px; width: 50%; margin-top: 6px; background: rgba(255,255,255,0.55); border-radius: 2px; }
.mls .hover-card__reveal {display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.18s, opacity 0.3s ease 0.25s; }
.mls .hover-card.is-hovered .hover-card__reveal {grid-template-rows: 1fr; opacity: 1; }
.mls .hover-card__reveal-inner {overflow: hidden; }
.mls .hover-card__desc {height: 24px; width: 90%; margin-top: 8px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.mls .hover-card__cta {height: 8px; width: 36%; margin-top: 8px; background: rgba(255,255,255,0.85); border-radius: 2px; }
.mls .acc-demo {--acc-ease: cubic-bezier(0.23, 1, 0.32, 1); --acc-open: 0.7s; --acc-close: 0.45s; width: 528px; border-top: 1px solid rgba(255,255,255,0.16); }
.mls .acc-row {border-bottom: 1px solid rgba(255,255,255,0.16); }
.mls .acc-row__head {display: flex; align-items: center; justify-content: space-between; gap: 29px; padding: 24px 5px; cursor: pointer; }
.mls .acc-row__title {height: 12px; background: rgba(255,255,255,0.85); border-radius: 2px; }
.mls .acc-row:nth-child(1) .acc-row__title {width: 62%; }
.mls .acc-row:nth-child(2) .acc-row__title {width: 48%; }
.mls .acc-row:nth-child(3) .acc-row__title {width: 56%; }
.mls .acc-icon {position: relative; width: 19px; height: 19px; flex-shrink: 0; }
.mls .acc-icon span {position: absolute; background: #fff; border-radius: 1px; }
.mls .acc-icon__h {left: 0; right: 0; top: 9px; height: 1px; }
.mls .acc-icon__v {top: 0; bottom: 0; left: 9px; width: 1px; transform-origin: center; transition: transform var(--acc-close) var(--acc-ease); }
.mls .acc-row.is-open .acc-icon__v {transform: rotate(90deg); transition-duration: var(--acc-open); }
.mls .acc-row__body {display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-close) var(--acc-ease); }
.mls .acc-row.is-open .acc-row__body {grid-template-rows: 1fr; transition-duration: var(--acc-open); }
.mls .acc-row__inner {overflow: hidden; min-height: 0; }
.mls .acc-row__content {padding: 0 5px 26px; opacity: 0; transition: opacity 0.3s var(--acc-ease) 0s; }
.mls .acc-row.is-open .acc-row__content {opacity: 1; transition: opacity 0.5s var(--acc-ease) 0.22s; }
.mls .acc-line {height: 7px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.mls .acc-line + .acc-line {margin-top: 11px; }
.mls .acc-line:nth-child(1) {width: 94%; }
.mls .acc-line:nth-child(2) {width: 86%; }
.mls .acc-line:nth-child(3) {width: 58%; }
.mls .wf-img {position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)); overflow: hidden; }
.mls .wf-img::before {content: ''; position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; top: 18%; left: 64%; background: rgba(255,255,255,0.28); }
.mls .wf-img::after {content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; background: rgba(255,255,255,0.12); transform: rotate(-8deg); }
.mls .mh-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 1200px; }
.mls .mh-grid--mobile {grid-template-columns: 1fr; width: 390px; padding: 40px 20px; }
.mls .mh-tile {position: relative; display: block; aspect-ratio: 1; overflow: hidden; cursor: pointer; outline: none; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.mls .mh-tile .wf-img {transition: transform 150ms ease; }
@media (hover: hover) and (pointer: fine) {
.mls .mh-grid:not(.mh-grid--mobile) .mh-tile:hover .wf-img {transform: scale(1.04); transition-duration: 220ms; }
}
.mls .mh-tile:focus-visible .wf-img {transform: scale(1.04); transition-duration: 220ms; }
.mls .mh-tile:focus-visible {box-shadow: 0 0 0 4px #0E0E1A, 0 0 0 8px rgba(174,169,231,0.9); }
.mls .mh-tile:active {transform: scale(0.97); }
.mls .lbw {position: relative; display: flex; flex-direction: column; background: rgba(0,0,0,0.55); user-select: none; -webkit-user-select: none; }
.mls .lbw--desktop {width: 1440px; height: 900px; padding: 40px; gap: 40px; }
.mls .lbw--mobile {width: 390px; height: 844px; padding: 40px 0 96px; gap: 40px; }
.mls .lbw__head {display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; flex-shrink: 0; height: 52px; }
.mls .lbw--mobile .lbw__head {padding: 0 12px; }
.mls .lbw__count {grid-column: 2; text-align: center; font-family: var(--canela); font-size: 23px; line-height: 30px; color: rgba(255,255,255,0.9); font-variant-numeric: lining-nums tabular-nums; }
.mls .lbw--mobile .lbw__count {font-size: 14px; line-height: 18px; }
.mls .lbw__close, .mls .lbw__arrow {width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); font-size: 24px; line-height: 1; }
.mls .lbw__close {grid-column: 3; justify-self: end; }
.mls .lbw__row {flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 32px; }
.mls .lbw--mobile .lbw__row {gap: 0; }
.mls .lbw__arrow-slot {flex-shrink: 0; width: 52px; align-self: stretch; }
.mls .lbw__arrow {all: unset; position: absolute; top: calc(50% + 14px); transform: translateY(-50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); font-size: 24px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.mls .lbw__arrow:hover {background: #e7eeea; color: #303030; }
.mls .lbw__stage {position: relative; flex: 1 1 auto; align-self: stretch; min-width: 0; touch-action: pan-y; }
.mls .lbw--mobile .lbw__stage {cursor: grab; }
.mls .lbw__layer {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mls .lbw__media {position: relative; }
.mls .lbw__cap {flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 640px; margin: 0 auto; }
.mls .lbw--mobile .lbw__cap {max-width: none; padding: 0 28px; }
.mls .lbw__cap span {display: block; height: 10px; border-radius: 3px; background: rgba(255,255,255,0.45); }
.mls { --ease-panel: cubic-bezier(0.16, 1, 0.3, 1); --canela: "Newsreader", Georgia, serif; width: 100%; display: grid; gap: 18px; justify-items: center; }
.cs-panel--ml { background: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 255, 255, 0.08), transparent 70%), radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px), linear-gradient(165deg, #36363d 0%, #232328 100%); background-size: auto, 22px 22px, auto; display: block; padding: 6% 6% 4%; }
.mls__panel { width: 100%; height: 420px; display: grid; place-items: center; }
.mls__panel[hidden] { display: none; }
.mls__fit { position: relative; }
.mls__inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mls__hint { font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.mls .demo-card__toggle svg { width: 18px; height: 18px; display: block; }
.mls .demo-card__toggle .icon-plus, .mls .demo-card__toggle .icon-close { display: grid; place-items: center; }
.mls .demo-card:focus-visible, .mls .acc-row__head:focus-visible { outline: 2px solid rgba(174, 169, 231, 0.9); outline-offset: 4px; }
.mls .acc-row__head { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 29px; width: 100%; padding: 24px 5px; cursor: pointer; }
.mls .acc-row__title { display: block; }
.mls .acc-icon { display: block; }
.mls .lbw__close svg { width: 24px; height: 24px; }
.mls .lbw__arrow:focus-visible { outline: 2px solid rgba(174, 169, 231, 0.9); outline-offset: 2px; }
/* The pattern list is the picker */
.patterns--pick li { padding: 0; }
.patterns__btn { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; padding: 10px 0 10px 12px; cursor: pointer; border-left: 2px solid transparent; transition: border-color 200ms ease, background-color 200ms ease; }
.patterns__btn code.cname { justify-self: start; }
.patterns__btn span { font-size: var(--type-caption); color: var(--text-brand-secondary); }
.patterns__btn[aria-pressed="true"] { border-left-color: var(--text-brand-primary); background: rgba(0, 0, 0, 0.03); }
.patterns__btn:focus-visible { outline: 2px solid #0066cc; outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .patterns__btn:hover { background: rgba(0, 0, 0, 0.03); } }
@media (max-width: 767px) { .mls__panel { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .mls *, .mls *::before, .mls *::after { transition-duration: 1ms !important; transition-delay: 0s !important; } }
.mls .demo-card__toggle .icon-plus { opacity: 1; transform: rotate(0deg); }
.mls .demo-card__toggle .icon-close { opacity: 0; transform: rotate(-45deg); }
.mls .demo-card.open .demo-card__toggle .icon-plus { opacity: 0; transform: rotate(45deg); }
.mls .demo-card.open .demo-card__toggle .icon-close { opacity: 1; transform: rotate(0deg); }
/* Specimens, round 2 (motion + Apple design review) */
/* Gradients can't interpolate, so the hover darkening snapped. Keep the base gradient fixed and fade a deeper one in on top. */
.mls .hover-card__overlay, .mls .hover-card.is-hovered .hover-card__overlay { background: linear-gradient(rgba(33, 21, 81, 0.1), rgba(33, 21, 81, 0.1)), linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.75) 95%); transition: none; }
.mls .hover-card__overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.35) 100%); opacity: 0; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.mls .hover-card.is-hovered .hover-card__overlay::after { opacity: 1; }
/* AccordionItem at its mobile size: 335 wide, 20px rows, 16px icon */
.mls .acc-demo--mobile { width: 335px; }
.mls .acc-demo--mobile .acc-row__head { padding: 20px 0; gap: 20px; }
.mls .acc-demo--mobile .acc-row__title { height: 10px; }
.mls .acc-demo--mobile .acc-icon { width: 16px; height: 16px; }
.mls .acc-demo--mobile .acc-icon__h { top: 7.5px; }
.mls .acc-demo--mobile .acc-icon__v { left: 7.5px; }
.mls .acc-demo--mobile .acc-row__content { padding: 0 0 20px; }
.mls .acc-demo--mobile .acc-line { height: 6px; }
.mls .acc-demo--mobile .acc-line + .acc-line { margin-top: 10px; }
.mls .acc-row__head:active .acc-row__title { opacity: 0.7; }
/* Phone shell for the mobile lightbox: 390x844 screen */
.mls .wf-phone { position: relative; padding: 10px; border-radius: 44px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.02); }
.mls .wf-phone__screen { width: 390px; height: 844px; border-radius: 34px; overflow: hidden; }
.mls .lbw--mobile { width: 390px; height: 844px; padding: 40px 0 96px; gap: 40px; }
.mls .lbw--mobile .lbw__head { padding: 0 12px; }
.mls .lbw--mobile .lbw__count { font-size: 14px; line-height: 18px; }
.mls .lbw--mobile .lbw__row { gap: 0; }
.mls .lbw--mobile .lbw__stage { cursor: grab; touch-action: pan-y; outline: none; }
.mls .lbw--mobile .lbw__stage:active { cursor: grabbing; }
.mls .lbw--mobile .lbw__stage:focus-visible { box-shadow: inset 0 0 0 3px rgba(174, 169, 231, 0.9); }
.mls .lbw--mobile .lbw__cap { max-width: none; padding: 0 28px; }
.mls .lbw__zones { position: absolute; inset: 0; z-index: 2; display: flex; pointer-events: none; }
.mls .lbw__zones div { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; font: 400 14px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); border: 2px dashed rgba(255, 255, 255, 0.22); }
/* Footer: hint and a quiet reset, one line */
.mls__foot { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mls__reset { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); font: 500 11px/1 var(--font-sans); padding: 7px 12px; cursor: pointer; transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.mls__reset:active { transform: scale(0.97); }
.mls__reset:focus-visible { outline: 2px solid rgba(174, 169, 231, 0.9); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mls__reset:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } }
.mls__panel { height: 460px; }
@media (max-width: 767px) { .mls__panel { height: 340px; } }
/* Sandbox, round 3: the frame eases to its new size and zoom; the content is clipped, never squashed */
.sbx__clip { position: absolute; inset: 0; overflow: hidden; }
.sbx .dsb-lab__stagewrap { transition: width 460ms cubic-bezier(0.32, 0.72, 0, 1), height 460ms cubic-bezier(0.32, 0.72, 0, 1); }
.sbx .dsb-lab__stage { transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1); }
.sbx .dsb-lab__stagewrap.is-live, .sbx .dsb-lab__stagewrap.is-live .dsb-lab__stage { transition: none; }
.sbx .dsb { transition: background-color 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbx .dsb:is([data-view="tablet"], [data-view="mobile"]) .dsb__item { transition: border-color 200ms ease; }
.sbx__propsbtn { display: none; }
@media (prefers-reduced-motion: reduce) { .sbx .dsb-lab__stagewrap, .sbx .dsb-lab__stage { transition: none; } }
/* Phones: the component leads, the demo plays without a cursor, the inspector folds behind Properties */
@media (max-width: 767px) {
  .sbx__bar { grid-template-columns: 1fr auto auto; gap: 6px; }
  .sbx__propsbtn { display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: #f0f1f4; color: #1d1d1f; font: 500 12px/1 var(--font-sans); padding: 8px 12px; cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
  .sbx__propsbtn:active { transform: scale(0.97); }
  .sbx__propsbtn[aria-expanded="true"] { background: #1d1d1f; color: #fff; }
  .sbx__propsbtn:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
  .sbx__live { font-size: 11px; }
  .sbx__canvas { height: 400px; padding: 40px 16px 36px; }
  .sbx__side { display: none; height: 420px; }
  .sbx.is-props-open .sbx__side { display: flex; }
  .sbx__cursor { display: none; }
  .sbx__status { display: none; }
  .sbx__zoom { right: 10px; top: 10px; }
}
/* Specimens: centered accordion, reset only when there's something to reset */
.mls { position: relative; }
.mls__inner--center { display: flex; flex-direction: column; justify-content: center; }
.mls__reset { position: absolute; top: -8px; right: -8px; opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
.mls__reset.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.mls__reset.is-shown:active { transform: scale(0.97); }
@media (max-width: 767px) { .sbx__live-word { display: none; } }
/* Live specimens picker, sidebar style: glyph + name + description, one highlight that glides between rows */
.patterns--pick { position: relative; border-top: 0; gap: 2px; margin-top: 8px; margin-inline: -10px; }
.patterns--pick li { display: block; padding: 0; border-bottom: 0; position: relative; z-index: 1; }
.patterns--pick .patterns__hl { position: absolute; z-index: 0; left: 0; right: 0; top: 0; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05); pointer-events: none; }
.patterns--pick.is-ready .patterns__hl { transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), height 380ms cubic-bezier(0.32, 0.72, 0, 1); }
.patterns__btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
.patterns__btn:active { transform: scale(0.98); transition-duration: 100ms; }
.patterns__btn:focus-visible { outline: 2px solid #0066cc; outline-offset: 0; }
.patterns__glyph { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #ececef; color: #8e8e93; transition: background-color 250ms ease, color 250ms ease; }
.patterns__glyph svg { width: 22px; height: 22px; fill: currentColor; }
.patterns__btn[aria-selected="true"] .patterns__glyph { background: #2c2c2e; color: #fff; }
.patterns__text { display: grid; gap: 2px; min-width: 0; }
.patterns__name { font: 500 13px/1.25 var(--font-mono); color: var(--text-brand-primary); overflow-wrap: anywhere; }
.patterns__desc { font-size: var(--type-caption); line-height: 1.3; color: var(--text-brand-secondary); }
.patterns__btn[aria-selected="false"] .patterns__name { color: #48484a; }
@media (hover: hover) and (pointer: fine) { .patterns__btn[aria-selected="false"]:hover { background: rgba(0, 0, 0, 0.035); } }
@media (prefers-reduced-motion: reduce) { .patterns--pick.is-ready .patterns__hl, .patterns__btn { transition: none; } }
/* Section headings wrap in balanced lines, so no word is left alone on the last line */
.h-section { text-wrap: balance; }
/* Theme switcher, Apple segmented control: one thumb slides between tiers, never wraps */
.themer * { transition-property: background-color, color, border-radius, border-color; }
.themer__switch { position: relative; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 0; padding: 3px; background: rgba(0, 0, 0, 0.06); }
.themer__switch::-webkit-scrollbar { display: none; }
.themer__thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.05); pointer-events: none; }
.themer.is-ready .themer__thumb { transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), width 380ms cubic-bezier(0.32, 0.72, 0, 1); }
.themer__switch button { position: relative; z-index: 1; white-space: nowrap; transition: color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.themer__switch button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.themer__switch button:active { transform: scale(0.96); transition-duration: 100ms; }
.themer__switch button:focus-visible { outline: 2px solid #0066cc; outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .themer__switch button[aria-pressed="false"]:hover { color: var(--text-brand-primary); } }
@media (max-width: 420px) { .themer__switch button { padding: 8px 7px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .themer.is-ready .themer__thumb { transition: none; } }
@media (max-width: 420px) { .cs-panel:has(> .themer) { padding-inline: 8px; } }
@media (max-width: 420px) { .themer__switch { padding: 2px; } .themer__thumb { top: 2px; bottom: 2px; } }
/* Inspector segmented controls: the white selection is one thumb that slides */
.pp .dsb-seg { position: relative; }
.dsb-seg__thumb { position: absolute; left: 0; top: 0; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06); pointer-events: none; }
.dsb-seg.is-ready .dsb-seg__thumb { transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1), width 340ms cubic-bezier(0.32, 0.72, 0, 1); }
.pp .dsb-seg button { position: relative; z-index: 1; }
.pp .dsb-seg button[aria-pressed="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .dsb-seg.is-ready .dsb-seg__thumb { transition: none; } }
/* Width handle: the square stays 9px, the grab area is 32px */
.sbx .dsb-lab__handle { right: -16px; width: 32px; height: 44px; }
/* Zoom chip sits bottom-right, clear of the frame label */
.sbx__zoom { top: auto; bottom: 12px; }
@media (max-width: 767px) { .sbx__zoom { top: auto; bottom: 10px; } }
@media (max-width: 767px) { .sbx__canvas { height: clamp(500px, 72vh, 620px); } }
/* When a chapter opens on a full-width moment, its note sits right under the intro: text to text needs less air */
.cs-chapter__head:has(+ .cs-moment--sandbox) { margin-bottom: 56px; }
@media (max-width: 767px) { .cs-chapter__head:has(+ .cs-moment--sandbox) { margin-bottom: 40px; } }
/* editorialGallery on phones: the Motion Library's scroll reveal (snap scroll, reveal, tap + for the frost panel) */
.mls .scroll-viewport {width: 280px; height: 380px; overflow-y: scroll; scroll-snap-type: y mandatory; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: #16162A; }
.mls .scroll-spacer {height: 380px; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.mls .rev-card {position: relative; height: 380px; scroll-snap-align: start; overflow: hidden; }
.mls .rev-img {position: absolute; inset: 0; background: linear-gradient(160deg, #5B5470 0%, #2E2A40 100%); transform: scale(1.08); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.mls .rev-card.revealed .rev-img {transform: scale(1.0); }
.mls .rev-overlay {position: absolute; inset: 0; background: linear-gradient(rgba(33,21,81,0.1), rgba(33,21,81,0.1)), linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.75) 95%); z-index: 1; }
.mls .rev-blur {position: absolute; inset: 0; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); background: rgba(6,5,15,0.68); opacity: 0; z-index: 1; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.mls .rev-card.panel-open .rev-blur {opacity: 1; }
.mls .rev-card.is-closing .rev-blur {opacity: 0; transition: opacity 0.65s var(--ease-panel) 0.28s; }
.mls .rev-body {position: absolute; bottom: 24px; left: 24px; right: 16px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; }
.mls .rev-title {height: 22px; width: 140px; background: rgba(255,255,255,0.92); border-radius: 2px; opacity: 0; transform: translateY(14px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform var(--open-title-dur) var(--ease-panel) var(--open-title-delay); }
.mls .rev-card.revealed .rev-title {opacity: 1; transform: translateY(0); }
.mls .rev-card.panel-open .rev-title {transform: translateY(calc(-1 * var(--reveal-distance))); transition: transform var(--open-title-dur) var(--ease-panel) var(--open-title-delay); }
.mls .rev-card.is-closing .rev-title {transform: translateY(0); transition: transform var(--close-title-dur) var(--ease-panel) var(--close-title-delay); }
.mls .rev-details {height: 10px; width: 100px; margin-top: 8px; background: rgba(255,255,255,0.55); border-radius: 2px; opacity: 0; transform: translateY(10px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform var(--open-meta-dur) var(--ease-panel) var(--open-meta-delay); }
.mls .rev-card.revealed .rev-details {opacity: 1; transform: translateY(0); }
.mls .rev-card.panel-open .rev-details {transform: translateY(calc(-1 * var(--reveal-distance))); transition: transform var(--open-meta-dur) var(--ease-panel) var(--open-meta-delay); }
.mls .rev-card.is-closing .rev-details {transform: translateY(0); transition: transform var(--close-meta-dur) var(--ease-panel) var(--close-meta-delay); }
.mls .rev-meta-col {display: flex; flex-direction: column; }
.mls .rev-desc {position: absolute; left: 24px; right: 76px; max-width: 273px; bottom: 58px; height: 64px; background: rgba(255,255,255,0.3); opacity: 0; transform: translateY(6px); transition: opacity var(--close-desc-dur) ease var(--close-desc-delay), transform var(--close-desc-dur) var(--ease-panel) var(--close-desc-delay); z-index: 2; pointer-events: none; }
.mls .rev-card.panel-open .rev-desc {opacity: 1; transform: translateY(0); transition: opacity var(--open-desc-dur) ease var(--open-desc-delay), transform var(--open-desc-dur) var(--ease-panel) var(--open-desc-delay); }
.mls .rev-link {position: absolute; left: 24px; bottom: 24px; height: 22px; width: 80px; background: rgba(255,255,255,0.85); color: #1A1A2E; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--close-link-dur) ease var(--close-link-delay), transform var(--close-link-dur) var(--ease-panel) var(--close-link-delay); z-index: 2; pointer-events: none; }
.mls .rev-card.panel-open .rev-link {opacity: 1; transform: translateY(0); transition: opacity var(--open-link-dur) ease var(--open-link-delay), transform var(--open-link-dur) var(--ease-panel) var(--open-link-delay); }
.mls .rev-toggle {position: relative; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; margin-left: 14px; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.mls .rev-card.revealed .rev-toggle {opacity: 1; transform: translateY(0); }
.mls .rev-toggle::before {content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); opacity: 0; }
.mls .rev-card.revealed .rev-toggle::before {animation: ml-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) 1.2s 2; }
.mls .rev-toggle .icon-plus, .mls .rev-toggle .icon-close {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, transform 0.4s var(--ease-panel); }
.mls .rev-toggle .icon-plus::before {content: '+'; font-family: 'Roboto Mono', monospace; font-size: 16px; color: #fff; }
.mls .rev-toggle .icon-close::before {content: '×'; font-family: 'Roboto Mono', monospace; font-size: 18px; color: #fff; }
.mls .rev-toggle .icon-plus {opacity: 1; transform: rotate(0deg); }
.mls .rev-toggle .icon-close {opacity: 0; transform: rotate(-45deg); }
.mls .rev-card.panel-open .rev-toggle .icon-plus {opacity: 0; transform: rotate(45deg); }
.mls .rev-card.panel-open .rev-toggle .icon-close {opacity: 1; transform: rotate(0deg); }
@keyframes ml-pulse { 0% { opacity: 0; transform: scale(0.85); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.4); } }
.mls__phone, .mls__phone-only { display: none; }
@media (max-width: 767px) {
  .mls__desk, .mls__desk-only { display: none; }
  .mls__phone { display: block; }
  .mls__phone-only { display: inline; }
  .mls [data-ml="hover"] { height: 400px; }
  .mls .scroll-viewport { width: 260px; height: 360px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mls .scroll-viewport::-webkit-scrollbar { display: none; }
  .mls .scroll-spacer, .mls .rev-card { height: 360px; }
  .mls .scroll-viewport:focus-visible { outline: 2px solid rgba(174, 169, 231, 0.9); outline-offset: 3px; }
  .mls .rev-toggle { padding: 0; background: transparent; }
  .mls .rev-toggle:focus-visible { outline: 2px solid rgba(174, 169, 231, 0.9); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mls .rev-card.revealed .rev-toggle::before { animation: none; } }
.mls__desk { width: 100%; height: 100%; display: grid; place-items: center; }
@media (max-width: 767px) { .mls__desk { display: none; } }
/* Theme switcher on phones: fill the width and share it, so all four tiers fit from 320px up.
   min-width 0 lets the track shrink inside its grid (Safari otherwise centers the overflow and clips "Wilson");
   if it ever can't fit, it scrolls from the left edge instead. */
.themer__switch { min-width: 0; justify-content: flex-start; }
@media (max-width: 420px) {
  .themer__switch { width: 100%; justify-self: stretch; }
  .themer__switch button { flex: 1 1 auto; padding: 8px 4px; font-size: 11px; letter-spacing: -0.005em; text-align: center; }
}

/* IHG page: Replay on the looping captures (Lightbox, teaser card). Same pill as the sandbox's Demo button.
   The captures play twice and stop, so a visitor who scrolled past can watch again. */
.cs-panel--replay { padding-top: max(7%, 64px); }
.replay { position: absolute; top: 16px; right: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.72); font: 500 12px/1 var(--font-sans); letter-spacing: 0.01em; padding: 8px 13px 8px 11px; cursor: pointer; transition: background-color 300ms ease, color 300ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
/* Tone on tone while the capture plays; once it stops, the button gains presence so the next step is obvious */
.replay[data-state="done"] { background: rgba(255, 255, 255, 0.15); color: #f5f5f7; }
.replay[hidden] { display: none; }
.replay:active { transform: scale(0.97); transition-duration: 300ms, 300ms, 100ms; }
.replay:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .replay:hover { background: rgba(255, 255, 255, 0.2); color: #f5f5f7; } }
@media (prefers-contrast: more) { .replay { background: #3a3a3c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); } }
.replay__ico { width: 11px; height: 11px; fill: currentColor; }
.replay::after { content: ""; position: absolute; inset: -6px; } /* 44px touch target */
@media (max-width: 767px) { .cs-panel--replay { padding-top: 60px; } .replay { top: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .replay { transition: none; } }