/* Case study takeover
   Layers:
   covering  blank white while the clip expands (is-covering); no content yet
   veil      .f-cs::after sits above the stage; fades off so content + weather appear together
   split     --f-cs-split to --f-cs-split-end; white from first section to Up next
   frost     intro + recirc paint a blurred pano (backdrop-filter can't see the sky from inside the scroll view)
*/

/* Gate sits in the white band, outside .f-card, so the card tokens are not here. */
.f-cs__gate {
  --c-bg: #fff;
  --c-ink: #0d0e10;
  --c-ink-2: #3a3b3d;
  --c-line: rgba(13, 14, 16, 0.22);
}
.f-cs__pass {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  width: 100%;
}
.f-cs__pass label { font-size: 0.875rem; font-weight: 700; }
.f-cs__pass input {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 0.9rem;
  border: 1px solid rgba(13, 14, 16, 0.28);
  border-radius: 12px;
  background: #fff;
  color: #0d0e10;
  font: inherit;
}
.f-cs__key { position: relative; }
.f-cs__key-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0d0e10;
  transform: translateY(-50%);
  cursor: pointer;
}
.f-cs__key-eye .f-ph { width: 18px; height: 18px; grid-area: 1 / 1; }
.f-cs__key-eye .is-hide { display: none; }
.f-cs__key-eye[aria-pressed="true"] .is-show { display: none; }
.f-cs__key-eye[aria-pressed="true"] .is-hide { display: grid; }
.f-cs__pass input:focus-visible {
  outline: 2px solid #0d0e10;
  outline-offset: 2px;
}
.f-cs__pass .f-btn {
  justify-content: center;
  border: 0;
  background: #0d0e10;
  color: #fff;
}
.f-cs__pass.is-bad input { border-color: #c4232b; }
.f-cs__pass.is-bad input:focus-visible { outline-color: #c4232b; }
/* Beats .f-cs__copy p, which was painting the error gray. */
.f-cs__copy p.f-cs__pass-err {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  color: #c4232b;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.f-cs__copy p.f-cs__pass-err[hidden] { display: none; }
.f-cs__copy p.f-cs__pass-err .f-ph {
  flex: none;
  width: 1em;
  height: 1em;
  /* Center the mark on the first line box, not the wrapped block. */
  margin-top: calc((1.4em - 1em) / 2);
  fill: currentColor;
}
.f-cs__pass-acts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}
.f-cs__pass-acts > .f-btn { width: 100%; }
.f-cs__req {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid #0d0e10;
  border-radius: 999px;
  background: #fff;
  color: #0d0e10;
  overflow: hidden;
}
.f-cs__req::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: #0d0e10;
  transform: scaleY(0);
  transform-origin: center;
  pointer-events: none;
  transition: transform 0.42s var(--f-ease);
}
.f-cs__req-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  pointer-events: none;
  transition: opacity 0.28s var(--f-ease), transform 0.42s var(--f-ease);
}
.f-cs__req-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3.05rem;
  padding: 0.7rem 0.85rem;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.34s var(--f-ease), transform 0.48s var(--f-ease), background 0.2s var(--f-ease);
}
.f-cs__req-opt:first-of-type { transform: translateX(16%); }
.f-cs__req-opt:last-of-type { transform: translateX(-16%); transition-delay: 0.04s; }
.f-cs__req-opt .f-ph { width: 16px; height: 16px; fill: currentColor; }
.f-cs__req:hover .f-cs__req-face,
.f-cs__req:focus-within .f-cs__req-face,
.f-cs__req.is-open .f-cs__req-face {
  opacity: 0;
  transform: translateY(-8px);
}
.f-cs__req:hover::before,
.f-cs__req:focus-within::before,
.f-cs__req.is-open::before { transform: scaleY(1); }
.f-cs__req:hover .f-cs__req-opt,
.f-cs__req:focus-within .f-cs__req-opt,
.f-cs__req.is-open .f-cs__req-opt {
  opacity: 1;
  transform: translateX(0);
}
.f-cs__req-opt:hover { background: rgba(13, 14, 16, 0.06); }
/* Form is centered in the white that shows on load. --f-gate-pad is set once
   from that resting edge, so scrolling does not reflow the column. */
.f-cs__sec.f-cs__gate {
  --f-gate-col: 420px;
  --f-gate-pad: 40px;
  box-sizing: border-box;
  padding-left: var(--f-gate-pad);
  padding-right: 80px;
  gap: 80px;
}
/* The full-width field's focus ring sits outside the column. */
.f-cs__gate .f-cs__copy {
  width: var(--f-gate-col);
  overflow: visible;
}
.f-cs__faq {
  position: relative;
  flex: none;
  width: 768px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 2.35rem;
}
.f-cs__faq > h2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: max-content;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0d0e10;
  white-space: nowrap;
}
.f-cs__board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1.15fr 0.85fr 1fr;
  gap: 12px;
}
.f-cs__q:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.f-cs__q:nth-child(2) { grid-column: 2; grid-row: 1; }
.f-cs__q:nth-child(3) { grid-column: 2; grid-row: 2; }
.f-cs__q:nth-child(4) { grid-column: 1; grid-row: 3; }
.f-cs__q:nth-child(5) { grid-column: 2; grid-row: 3; }
.f-cs__q {
  position: relative;
  margin: 0;
  min-height: 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.35);
  overflow: hidden;
}
.f-cs__q.is-open {
  position: absolute;
  inset: 0;
  /* Drop the cell placement so this covers the board, not one grid area. */
  grid-column: auto;
  grid-row: auto;
  z-index: 2;
  margin: 0;
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(13, 14, 16, 0.35);
}
.f-cs__q .f-cs__q-ico {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 0;
  width: 40px;
  height: 40px;
  fill: currentColor;
  color: #0d0e10;
  pointer-events: none;
  transition: width 460ms cubic-bezier(0.65, 0, 0.35, 1), height 460ms cubic-bezier(0.65, 0, 0.35, 1),
    right 460ms cubic-bezier(0.65, 0, 0.35, 1), bottom 460ms cubic-bezier(0.65, 0, 0.35, 1);
}
.f-cs__q:nth-child(1) .f-cs__q-ico {
  width: 52px;
  height: 52px;
  right: 18px;
  bottom: 16px;
}
.f-cs__q.is-open .f-cs__q-ico {
  width: 72px;
  height: 72px;
  right: 24px;
  bottom: 20px;
}
.f-cs__q.is-open.is-shut .f-cs__q-ico {
  width: 40px;
  height: 40px;
  right: 16px;
  bottom: 14px;
}
.f-cs__q.is-open.is-shut:nth-child(1) .f-cs__q-ico {
  width: 52px;
  height: 52px;
  right: 18px;
  bottom: 16px;
}
.f-cs__q h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-right: 48px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.f-cs__q:nth-child(2) h3,
.f-cs__q:nth-child(3) h3,
.f-cs__q:nth-child(5) h3 { font-size: 1.25rem; }
.f-cs__q-a[hidden] { display: none; }
.f-cs__q-a p {
  position: relative;
  z-index: 1;
  margin: 0.85rem 0 0;
  max-width: 40rem;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #3a3b3d;
  opacity: 0;
}
.f-cs__q.is-open.is-in .f-cs__q-a p {
  opacity: 1;
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.f-cs__q-go {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(13, 14, 16, 0.22);
  border-radius: 50%;
  background: #fff;
  color: #0d0e10;
  cursor: pointer;
  transition: background 0.25s var(--f-ease), color 0.25s var(--f-ease), border-color 0.25s var(--f-ease), transform 0.25s var(--f-ease);
}
.f-cs__q-go .f-ph {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.f-cs__q-go path[opacity="0.2"] { display: none; }
.f-cs__q-go .is-minus { display: none; }
.f-cs__q.is-open .f-cs__q-go .is-plus { display: none; }
.f-cs__q.is-open .f-cs__q-go .is-minus { display: block; }
.f-cs__q-go:hover,
.f-cs__q-go:focus-visible,
.f-cs__q.is-open .f-cs__q-go {
  background: var(--f-cta, #0d0e10);
  border-color: var(--f-cta-edge, #0d0e10);
  color: var(--f-cta-ink, #fff);
}

.f-cs__close .f-ph {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 6px;
}

/* ---------- case study takeover ---------- */

html.f-cs-lock { overflow: hidden; }
html.f-cs-open #f-main,
html.f-cs-open .f-choose,
html.f-cs-open #site-nav { visibility: hidden; }
.f-cs {
  position: fixed;
  inset: 0;
  z-index: 65;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  color: #0d0e10;
  scrollbar-width: none;
  --f-cs-split: 0px;
  --f-cs-split-end: 0px;
}
.f-cs::-webkit-scrollbar { display: none; }
.f-cs[hidden] { display: none; }
/* White field from the intro/section split to Up next — hard lines, not a gradient. */
.f-cs::before {
  content: "";
  position: fixed;
  top: 0;
  right: var(--f-cs-split-end, 0px);
  bottom: 0;
  left: var(--f-cs-split, 0px);
  z-index: 0;
  pointer-events: none;
  background: #fff;
}
.f-cs.is-covering::before { left: 0; right: 0; }
/* Full-sheet veil sits above the stage so the expand is blank white.
   After takeover it fades off — content and weather appear together. */
.f-cs::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  transition: opacity 0.48s cubic-bezier(0.65, 0, 0.35, 1);
}
.f-cs.is-covering::after {
  opacity: 1;
  transition: none;
}
.f-cs__stage { position: relative; z-index: 1; }
.f-cs__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.f-cs__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px var(--f-pad);
}
.f-cs__bar-lead {
  display: flex;
  align-items: center;
  min-width: 0;
}
.f-cs__bar-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  opacity: var(--f-cs-name, 0);
  transition: opacity 0.85s ease;
}
.f-cs__bar-title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.f-cs__bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.f-cs__bar .f-cs__close { margin-left: 0; }
.f-cs__lockout {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(13, 14, 16, 0.22);
  border-radius: 50%;
  background: #fff;
  color: #0d0e10;
  cursor: pointer;
}
.f-cs__lockout .f-ph { width: 16px; height: 16px; }
.f-cs__lockout:hover,
.f-cs__lockout:focus-visible {
  background: var(--f-cta, #0d0e10);
  color: var(--f-cta-ink, #fff);
  border-color: var(--f-cta-edge, #0d0e10);
}
.f-cs .f-cs__entry.f-card {
  flex: none;
  align-self: center;
  align-items: flex-start;
  width: min(560px, 46vw);
  height: auto;
  max-height: calc(100% - 24px);
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: none;
  color: var(--c-ink, #0d0e10);
  /* Track scrolling used to transform an ancestor, which kills backdrop-filter.
     Frost the pano ourselves so the intro stays a glass card. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.site .f-cs .f-cs__entry.f-card,
body.site .f-cs .f-cs__recirc.f-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.f-cs .f-cs__entry.f-card::before,
.f-cs .f-cs__recirc.f-card::before {
  content: "";
  position: absolute;
  inset: -32px;
  z-index: 0;
  background: var(--f-entry-pano, none) center / auto 100% no-repeat fixed;
  filter: blur(22px) saturate(1.15);
  pointer-events: none;
}
.f-cs .f-cs__entry.f-card::after,
.f-cs .f-cs__recirc.f-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-glass);
  border-radius: inherit;
  pointer-events: none;
}
.f-cs .f-cs__entry.f-card > *,
.f-cs .f-cs__recirc.f-card > *:not(.f-card__icon) { position: relative; z-index: 1; }
.f-cs .f-cs__recirc .f-card__icon { position: absolute; z-index: 2; }
body.site .f-cs .f-cs__entry.f-card::before,
body.site .f-cs .f-cs__recirc.f-card::before {
  filter: blur(14px) saturate(1.15);
}
.f-cs__entry .f-cs__count,
.f-cs__entry .f-cs__sub,
.f-cs__entry .f-cs__intro,
.f-cs__entry .f-cs__focus,
.f-cs__entry .f-cs__meta dt { color: var(--c-ink-2, #55565a); }
.f-cs__entry .f-cs__meta dd,
.f-cs__entry .f-cs__skip,
.f-cs__entry .f-tags li { color: var(--c-ink, #0d0e10); }
.f-cs__entry .f-tags li {
  border-color: color-mix(in srgb, var(--c-ink, #0d0e10) 42%, transparent);
}
.f-cs__entry .f-tags .f-case__badge {
  background: var(--c-ink, #0d0e10);
  border-color: var(--c-ink, #0d0e10);
  color: var(--c-bg, #fff);
}
body.site .f-cs__entry .f-tags .f-case__lock {
  background: color-mix(in srgb, var(--f-cta) 14%, #fff);
  color: var(--f-cta-edge);
  border-color: var(--f-cta-edge);
}
.f-cs__entry .f-cs__rule { border-top-color: var(--c-line, rgba(13, 14, 16, 0.16)); }
.f-cs__count { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: #55565a; }
.f-cs__entry h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  outline: none;
}
.f-cs__entry .f-cs__sub { margin: 0.75rem 0 0; }
.f-cs__intro { margin: 0.875rem 0 0; max-width: 36rem; font-size: 0.875rem; line-height: 1.5; color: #3a3b3d; }
.f-cs__meta dd s {
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  color: #8b8c90;
}
.f-cs__rule {
  width: 100%;
  height: 0;
  margin: 1.25rem 0 0;
  border: 0;
  border-top: 1px solid rgba(13, 14, 16, 0.16);
}
.f-cs__entry .f-cs__meta {
  margin-top: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.f-cs__focus {
  margin: 1.35rem 0 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #55565a;
}
.f-cs__entry .f-cs__tags,
.f-cs__entry .f-tags {
  width: 100%;
  min-width: 100%;
  max-width: none;
  align-self: stretch;
  margin: 0;
  flex: none;
}
.f-cs__action { margin-top: 1.25rem; }
.f-cs__action--out {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding: 0.95rem 1.45rem;
  border: 0;
  border-radius: 999px;
  background: #0d0e10;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 1;
  text-decoration: none;
}
.f-cs__action--out .f-ph {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.f-cs__action--out {
  transition: transform 0.2s var(--f-ease), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.f-cs__action--out:not(:disabled):hover { transform: translateY(-2px); }
.f-cs__action--out:not(:disabled):active { transform: translateY(0); }
.f-cs__action--out:focus-visible {
  outline: 3px solid #0d0e10;
  outline-offset: 3px;
}
.f-cs__entry .f-cs__skip { margin-top: 1.75rem; }
.f-cs__skip {
  align-self: flex-start;
  padding: 0 0 8px;
  border: 0;
  background: none;
  color: #0d0e10;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.f-cs__skip { padding-bottom: 0; }
.f-cs__skip::after { bottom: -6px; }
.f-cs__close {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 1rem;
  border: 1px solid rgba(13, 14, 16, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #0d0e10;
  font-size: 0.875rem;
  font-weight: 700;
  transition: border-color 0.2s;
}
.f-cs__close svg {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  color: #0d0e10;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(13, 14, 16, 0.22);
  transition: background 0.25s var(--f-ease), color 0.25s var(--f-ease), box-shadow 0.25s var(--f-ease);
}
.f-cs__close svg path[opacity="0.2"] { display: none; }
.f-cs__close:hover,
.f-cs__close:focus-visible { border-color: #0d0e10; }
.f-cs__close:hover svg,
.f-cs__close:focus-visible svg {
  background: var(--f-cta, #0d0e10);
  color: var(--f-cta-ink, #fff);
  box-shadow: inset 0 0 0 1px var(--f-cta-edge, #0d0e10);
}
.f-cs__close.is-cut {
  border-color: transparent;
  color: var(--cut-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.f-cs__close.is-cut svg { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.f-cs :focus-visible { outline: 3px solid #0d0e10; outline-offset: 3px; }
#f-cs-title:focus,
#f-cs-title:focus-visible { outline: none; }
.f-cs__sub { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: #4a4b4f; }
.f-cs .f-cs__tags { margin: 0; padding: 0; width: 100%; align-self: stretch; }
.f-cs__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  flex: none;
  margin: 0;
}
.f-cs__meta dd { overflow-wrap: anywhere; }
.f-cs__info {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  vertical-align: -3px;
  cursor: help;
}
.f-cs__info .f-ph { width: 14px; height: 14px; }
.f-cs__info-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: max-content;
  max-width: 16rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0d0e10;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
.f-cs .f-cs__entry.f-card > .f-cs__focus:has(.f-cs__info) {
  position: relative;
  z-index: 6;
}
.f-cs__team-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
  margin-bottom: 0;
}
.f-cs__team-label .f-cs__info {
  margin-left: 0;
  vertical-align: 0;
  line-height: 0;
  transform: translateY(-1px);
}
.f-cs__team {
  margin: 0.25rem 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink, #0d0e10);
}
.f-cs__info:hover .f-cs__info-tip,
.f-cs__info:focus-visible .f-cs__info-tip { opacity: 1; }
.f-cs__meta dt {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #55565a;
}
.f-cs__meta dd { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 700; }
.f-cs__view { flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.f-cs__track {
  display: flex;
  gap: 96px;
  width: max-content;
  height: 100%;
  padding: 4px var(--f-pad) 0;
}
.f-cs__sec {
  display: flex;
  gap: 104px;
  flex: none;
  height: 100%;
  padding: 32px 80px 20px 88px;
}
.f-cs__copy { flex: none; width: 400px; height: 100%; overflow: hidden; }
.f-cs__copy.is-2col { width: 840px; column-count: 2; column-gap: 40px; column-fill: auto; }
.f-cs__copy.is-3col { width: 1280px; column-count: 3; column-gap: 40px; column-fill: auto; }
.f-cs__copy.is-2col p,
.f-cs__copy.is-3col p { break-inside: avoid; }
.f-cs__num {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #55565a;
}
.f-cs__copy h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  break-after: avoid;
}
.f-cs__copy p { margin: 0 0 0.875rem; font-size: 1rem; line-height: 1.6; color: #3a3b3d; }
.f-cs__copy .f-cs__action { margin-top: 0.35rem; break-inside: avoid; }
.f-cs__copy .cs-tracks {
  margin: 0.25rem 0 0.875rem;
  padding: 0;
  list-style: none;
  counter-reset: track;
}
.f-cs__copy .cs-tracks li {
  counter-increment: track;
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0d0e10;
}
.f-cs__copy .cs-tracks li::before {
  content: counter(track, decimal-leading-zero);
  margin-right: 0.6rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #55565a;
}
/* Same 01 02 03 as Take 5. The sentences stay 16px, with the lead bold. */
.f-cs__copy .cs-tracks--aims { margin-top: 0; }
.f-cs__copy .cs-tracks--aims li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #3a3b3d;
}
.f-cs__copy .cs-tracks--aims li strong { font-weight: 700; color: #0d0e10; }
.f-cs__media,
.f-cs__media .cs-gallery,
.f-cs__media .phones,
.f-cs__media .ph-grid {
  display: flex;
  flex: none;
  gap: 24px;
  height: 100%;
  padding: 0;
  overflow: visible;
}
.f-cs__media .space { display: none; }
.f-cs__media .cs-fig,
.f-cs__media .phones .cs-fig {
  flex: none;
  width: max-content;
  height: 100%;
  border: 1px solid rgba(13, 14, 16, 0.08);
  border-radius: 16px;
  background: transparent;
}
.f-cs__media .cs-fig img,
.f-cs__media .phones .cs-fig img { display: block; width: auto; height: 100%; max-width: none; }
.f-cs__media .metric-grid {
  flex: none;
  align-self: center;
  grid-template-columns: 1fr 1fr;
  width: 520px;
}
.f-cs__media .metric-grid > .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Cross-study links (NED on BlackFriday.com, the RetailMeNot clause). Paragraph weight, bold on hover. */
.f-cs__copy a[data-case-next] {
  color: inherit;
  font-weight: 400;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.f-cs__copy a[data-case-next]:hover,
.f-cs__copy a[data-case-next]:focus-visible {
  font-weight: 700;
}
.f-cs__media .metric { background: #fff; border-color: rgba(13, 14, 16, 0.08); }
.f-cs__media .metric strong {
  color: #0d0e10 !important;
  font-size: 2.25rem;
  letter-spacing: -0.03em;
}
.f-cs__media:has(.cs-collage) {
  display: block;
  flex: none;
  height: 100%;
  overflow: hidden;
}
.f-cs__media .cs-collage {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column dense;
  grid-auto-columns: max-content;
  grid-auto-rows: auto;
  gap: 16px;
  height: 100%;
  margin-top: 0;
}
.cs-collage > * {
  grid-column: span var(--c, 1);
  grid-row: span var(--r, 1);
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
}
.f-cs__media figure { margin: 0; }
.cs-tile { background: transparent; }
.cs-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Slides size the cell. A fixed square was leaving a gray band around the picture. */
.cs-collage > .cs-tile--ui {
  grid-column: auto;
  width: max-content;
  height: 100%;
  justify-self: start;
}
.cs-tile--ui img { width: auto; height: 100%; object-fit: cover; }
.cs-finish__store > .cs-tile img,
.cs-finish__pair .cs-tile img,
.cs-line .cs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Photos, stats, and video keep their span, and the frame matches that shape. */
.cs-collage > .cs-tile--photo,
.cs-collage > .cs-video,
.cs-collage > .cs-stat {
  height: 100%;
  width: auto;
  aspect-ratio: calc(var(--c, 1) / var(--r, 1));
  justify-self: start;
}
.cs-tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.f-cs__media .cs-tile,
.f-cs__media .cs-swap,
.f-cs__media .cs-video {
  border: 1px solid rgba(13, 14, 16, 0.35);
  border-radius: 22px;
}
.f-cs__media .cs-collage > .cs-swap {
  grid-row: 1 / -1;
  height: 100%;
  width: auto;
  aspect-ratio: var(--a, 1);
  align-self: stretch;
}
/* Sign-up and store share one column. Heights follow each picture so the widths match and neither is cropped. */
.f-cs__media .cs-collage > .cs-wires {
  grid-row: 1 / -1;
  grid-column: auto;
  height: 100%;
  width: max-content;
  align-self: stretch;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.cs-wires {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  width: max-content;
}
.cs-wires > .cs-tile,
.cs-board .cs-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-width: 0;
  flex: none;
}
.cs-wires > .cs-tile:first-child {
  height: calc((100% - 16px) * 0.73);
  width: auto;
  aspect-ratio: 1654 / 3093;
  background: #3a3c40;
}
.cs-wires > .cs-tile:last-child {
  height: calc((100% - 16px) * 0.27);
  width: auto;
  aspect-ratio: 1822 / 1261;
}
.cs-wires > .cs-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-swap {
  position: relative;
  overflow: hidden;
  background: #3a3c40;
  aspect-ratio: var(--a, 16 / 10);
}
.cs-swap img,
.cs-swap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s var(--f-ease), transform 0.5s var(--f-ease);
  pointer-events: none;
}
.cs-swap img.is-on,
.cs-swap video.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cs-swap--board {
  background: #444444;
}
.cs-swap--board img {
  object-fit: contain;
}
.cs-swap__pause {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(13, 14, 16, 0.18);
  border-radius: 50%;
  background: #fff;
  color: #0d0e10;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cs-swap__pause .f-ph {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.cs-swap__pause:hover,
.cs-swap__pause[aria-pressed="true"] {
  background: var(--f-cta, #0d0e10);
  border-color: var(--f-cta-edge, #0d0e10);
  color: var(--f-cta-ink, #fff);
}
.cs-feature__icon { display: grid; place-items: center; }
.cs-feature__icon[hidden] { display: none; }
.f-cs__media:has(.cs-line),
.f-cs__media:has(.cs-finish) {
  align-items: center;
  overflow: visible;
}
.cs-line {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 68%;
}
.cs-line--cars { height: 82%; }
/* RetailMeNot only. A lone row and a line fill the column, the way Take 5's
   ending does. Two-row boards keep the 40/60 split. Take 5 stays as signed off. */
#f-cs[data-slug="retailmenot"] .cs-line {
  height: 100%;
}
#f-cs[data-slug="google"] .cs-line--types {
  height: 100%;
  align-self: center;
}
#f-cs[data-slug="google"] .cs-line--rules {
  height: 100%;
  align-items: center;
}
#f-cs[data-slug="google"] .cs-line--rules > .cs-swap {
  height: auto;
  width: min(1000px, calc((100cqh - 200px) * 16 / 9));
  flex: none;
  aspect-ratio: 16 / 9;
  background: #fff;
}
#f-cs[data-slug="google"] #cs-swap-google-rules img,
#f-cs[data-slug="google"] #cs-swap-google-rules video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#f-cs[data-slug="google"] .cs-line--rules > .cs-tile {
  height: 79.2%;
  width: auto;
  flex: none;
}
#f-cs[data-slug="google"] .cs-line--close {
  height: 81.6%;
  align-items: center;
}
#f-cs[data-slug="google"] .cs-line--close > .cs-swap {
  height: 100%;
  width: auto;
  flex: none;
  aspect-ratio: 16 / 9;
  background: #fff;
}
#f-cs[data-slug="google"] .cs-line--close > .cs-swap img,
#f-cs[data-slug="google"] .cs-line--close > .cs-swap video {
  object-fit: contain;
}
#f-cs[data-slug="google"] .cs-line--open {
  height: auto;
  align-items: center;
}
#f-cs[data-slug="google"] .cs-line--open > .cs-swap {
  align-self: center;
  flex: none;
  height: auto;
  width: calc((100cqh - 230px) * 16 / 9);
  aspect-ratio: 16 / 9;
}
#f-cs[data-slug="google"] .cs-line--open > .cs-swap img,
#f-cs[data-slug="google"] .cs-line--open > .cs-swap video {
  object-fit: cover;
}
#f-cs[data-slug="google"] .cs-grid23 {
  --h: calc(100cqh - 140px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: var(--h);
  width: calc((var(--h) - 24px) / 3 * 16 / 9 * 2 + 12px);
  align-self: center;
}
#f-cs[data-slug="google"] .cs-grid23 > .cs-tile {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
}
#f-cs[data-slug="google"] .cs-grid23 > .cs-tile > img,
#f-cs[data-slug="google"] .cs-grid23 > .cs-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
#f-cs[data-slug="google"] .cs-line--boards {
  height: 100%;
  align-items: center;
}
#f-cs[data-slug="google"] .cs-line--boards > .cs-swap {
  height: calc(100cqh - 64px);
  width: calc((100cqh - 64px) * 2400 / 865);
  flex: none;
  aspect-ratio: 2400 / 865;
  background: #1e1e1e;
}
#f-cs[data-slug="google"] .cs-line--boards > .cs-swap img {
  object-fit: contain;
}
#f-cs[data-slug="google"] .cs-line--set {
  height: 70%;
  align-items: center;
}
#f-cs[data-slug="google"] .cs-line--set > .cs-swap {
  height: 100%;
  width: auto;
  flex: none;
  aspect-ratio: 16 / 9;
}
/* Mega carousel, same seating as Darling: four thumbs beside the current slide, five along the bottom. */
#f-cs[data-slug="google"] .cs-collage > .cs-feature--rail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto) auto auto;
  /* Five percent under the 1200 cap. That one still clipped the last thumb. */
  width: min(1140px, calc((100cqh - 64px) * 1.596));
  gap: 10px;
}
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile:has(video) {
  position: relative;
  overflow: hidden;
}
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="0"] {
  grid-column: 2 / span 4;
  grid-row: 1 / span 4;
}
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="1"] { grid-column: 1; grid-row: 1; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="2"] { grid-column: 1; grid-row: 2; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="3"] { grid-column: 1; grid-row: 3; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="4"] { grid-column: 1; grid-row: 4; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="5"] { grid-column: 1; grid-row: 5; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="6"] { grid-column: 2; grid-row: 5; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="7"] { grid-column: 3; grid-row: 5; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="8"] { grid-column: 4; grid-row: 5; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-tile[data-pos="9"] { grid-column: 5; grid-row: 5; }
#f-cs[data-slug="google"] .cs-feature--rail .cs-feature__bar {
  grid-column: 1 / -1;
  grid-row: 6;
}
#f-cs[data-slug="google"] .cs-line--rules > .cs-tile img {
  object-fit: contain;
}
/* BlackFriday.com. Same fill. The 68% line was leaving every board small. */
#f-cs[data-slug="black-friday"] .cs-line {
  height: 100%;
}
#f-cs[data-slug="black-friday"] .cs-line--flow {
  height: 68%;
  align-self: center;
}
/* Desktop launch shot is twice as wide as a full-fit, so the page scrolls inside the frame. */
#f-cs[data-slug="black-friday"] .cs-line--screens {
  height: 100%;
  align-items: center;
}
#f-cs[data-slug="black-friday"] .cs-line--screens .cs-scroll {
  position: relative;
  flex: none;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(13, 14, 16, 0.35);
  border-radius: 22px;
  background: #fff;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
#f-cs[data-slug="black-friday"] .cs-scroll__view {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
#f-cs[data-slug="black-friday"] .cs-scroll__view img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
/* Concept boards are close, not equal. Show each whole picture. */
#f-cs[data-slug="black-friday"] #cs-swap-bf-concepts img {
  object-fit: contain;
}
#f-cs[data-slug="darling-ingredients"] #cs-swap-darling-wires {
  background: #fff;
}
#f-cs[data-slug="darling-ingredients"] #cs-swap-darling-wires img {
  object-fit: contain;
}
#f-cs[data-slug="darling-ingredients"] #cs-swap-darling-audit {
  background: #f5f5f5;
}
#f-cs[data-slug="darling-ingredients"] #cs-swap-darling-audit img {
  object-fit: contain;
}
/* The linen tray behind the audit counts. The cards keep their own fill. */
#f-cs[data-slug="darling-ingredients"] .cs-collage > div:has(> .metric-grid) {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--pages {
  height: 100%;
}
#f-cs[data-slug="darling-ingredients"] .metric-grid--stack {
  grid-template-columns: 1fr;
  width: 240px;
}
/* Mega carousel: four equal thumbs beside the current slide, five the same size along the bottom. */
#f-cs[data-slug="darling-ingredients"] .cs-collage > .cs-feature--rail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto) auto auto;
  width: min(1280px, calc((100cqh - 200px) * 1.55));
  gap: 10px;
}
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile {
  align-self: stretch;
  height: auto;
}
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="0"] {
  grid-column: 2 / span 4;
  grid-row: 1 / span 4;
}
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="1"] { grid-column: 1; grid-row: 1; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="2"] { grid-column: 1; grid-row: 2; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="3"] { grid-column: 1; grid-row: 3; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="4"] { grid-column: 1; grid-row: 4; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="5"] { grid-column: 1; grid-row: 5; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="6"] { grid-column: 2; grid-row: 5; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="7"] { grid-column: 3; grid-row: 5; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="8"] { grid-column: 4; grid-row: 5; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-tile[data-pos="9"] { grid-column: 5; grid-row: 5; }
#f-cs[data-slug="darling-ingredients"] .cs-feature--rail .cs-feature__bar {
  grid-column: 1 / -1;
  grid-row: 6;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--nav {
  height: 100%;
  align-items: center;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--nav > .cs-tile {
  height: 70%;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--nav .cs-stack {
  height: 100%;
  width: auto;
  align-self: center;
  justify-content: flex-start;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--nav .cs-stack .cs-tile {
  flex: none;
  width: auto;
  height: calc((100% - 32px) / 3);
  aspect-ratio: 1920 / 1080;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--wires {
  height: 68%;
  align-items: center;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--wires > .cs-tile {
  height: 120%;
}
#f-cs[data-slug="darling-ingredients"] .cs-line--pages .cs-scroll {
  position: relative;
  flex: none;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(13, 14, 16, 0.35);
  border-radius: 22px;
  background: #fff;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
#f-cs[data-slug="darling-ingredients"] .cs-scroll__view {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
#f-cs[data-slug="darling-ingredients"] .cs-scroll__view img {
  display: block;
  width: 100%;
  height: auto;
  cursor: image-set(url("../assets/ui/scroll-cursor-circle.png") 1x, url("../assets/ui/scroll-cursor-circle@2x.png") 2x) 16 16, ns-resize;
}
.f-cs__acts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1.25rem;
}
.f-cs__acts .f-cs__action { margin-top: 0; }
.f-btn--invert {
  background: #fff;
  color: #0d0e10;
  border: 1.5px solid #0d0e10;
}
.f-btn--invert:hover,
.f-btn--invert:focus-visible {
  background: #0d0e10;
  color: #fff;
}
#f-cs[data-slug="retailmenot"] .cs-line--ease {
  height: 78%;
}
#f-cs[data-slug="retailmenot"] .cs-board {
  height: 100%;
}
#f-cs[data-slug="retailmenot"] .cs-board__row:only-child {
  height: 100%;
}
/* Slides in one rotator rarely share a ratio. Show the whole picture,
   the way Take 5's option boards do, instead of cropping to the frame. */
#f-cs[data-slug="retailmenot"] .cs-swap {
  background: #fff;
}
#f-cs[data-slug="retailmenot"] .cs-swap img {
  object-fit: contain;
}
#cs-swap-rmn-system img {
  object-fit: cover;
}
#f-cs[data-slug="retailmenot"] #cs-swap-rmn-audit {
  background: #fff;
  border-color: transparent;
}
#f-cs[data-slug="retailmenot"] #cs-swap-rmn-audit:has(img.is-on[src*="colors-audit"]) {
  background: #444444;
  border-color: #444444;
}
.cs-quad,
.cs-span {
  --fit-h: calc(100cqh - 108px);
}
.cs-quad {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px;
  height: var(--fit-h);
  width: max-content;
}
.cs-quad .cs-tile,
.cs-span > .cs-tile,
.cs-span__row .cs-tile,
.cs-span__row .cs-swap {
  position: relative;
  overflow: hidden;
  flex: none;
  min-width: 0;
  width: auto;
}
.cs-quad .cs-tile {
  height: calc((var(--fit-h) - 16px) / 2);
  aspect-ratio: var(--a, 1392 / 782);
}
.cs-quad .cs-tile img,
.cs-span .cs-tile img,
.cs-span .cs-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.cs-span {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: var(--fit-h);
  width: max-content;
}
.cs-span > .cs-tile {
  height: 100%;
  aspect-ratio: var(--a);
}
.cs-span__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  width: max-content;
  flex: none;
}
.cs-span__row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: calc((var(--fit-h) - 16px) / 2);
  width: max-content;
  flex: none;
}
.cs-span__row .cs-tile,
.cs-span__row .cs-swap {
  height: 100%;
  aspect-ratio: var(--a, 1);
}
.f-cs__media:has(.cs-quad),
.f-cs__media:has(.cs-span) {
  align-items: center;
  width: max-content;
  overflow: visible;
}
.f-cs__media:has(.cs-board),
.f-cs__media:has(.cs-line),
.f-cs__media:has(.cs-finish) {
  align-items: center;
  width: max-content;
  overflow: visible;
}
.cs-board {
  --board-h: calc(100cqh - 108px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: var(--board-h);
  width: max-content;
}
.cs-board__row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: none;
  width: max-content;
}
.cs-board__row:first-child { height: calc((var(--board-h) - 16px) * 0.4); }
.cs-board__row:last-child { height: calc((var(--board-h) - 16px) * 0.6); }
.cs-board__row .cs-tile,
.cs-board__row .cs-swap {
  position: relative;
  height: 100%;
  width: auto;
  flex: none;
  overflow: hidden;
  aspect-ratio: var(--a);
}
.cs-board .cs-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-board .cs-swap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-board .cs-swap--board {
  background: #444444;
}
.cs-board .cs-swap--board img {
  object-fit: contain;
}
.cs-board__row:first-child .cs-tile--shot img {
  object-fit: cover;
}
.cs-line .cs-swap,
.cs-line .cs-tile {
  height: 100%;
  width: auto;
  flex: none;
  min-width: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: var(--a);
}
.cs-line .cs-tile img,
.cs-line .cs-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-finish {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 100%;
}
.cs-finish__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  width: 440px;
  flex: none;
}
/* An odd last stat spans the row so the grid has no hole. */
.cs-finish__stats > .cs-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cs-finish__stats .cs-stat,
.cs-finish__stats .cs-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.cs-finish__stats .cs-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fff;
}
.cs-finish__photos {
  display: flex;
  gap: 16px;
  height: 100%;
  flex: none;
}
.cs-finish__photos .cs-tile { height: 100%; width: auto; }
.cs-finish .cs-tile,
.cs-finish .cs-video {
  position: relative;
  overflow: hidden;
}
.cs-finish .cs-tile img,
.cs-finish video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-finish .cs-tile--shot img {
  object-fit: cover;
}
.cs-finish__stats .cs-tile img {
  object-fit: cover;
  object-position: center;
}
.cs-finish__store {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
  width: max-content;
  flex: none;
}
.cs-finish__store > .cs-tile {
  width: auto;
  height: calc((100% - 16px) * 0.59);
  aspect-ratio: 4161 / 1500;
  flex: none;
}
.cs-finish__pair {
  display: flex;
  gap: 12px;
  width: 100%;
  height: calc((100% - 16px) * 0.41);
  flex: none;
}
.cs-finish__pair .cs-tile {
  flex: 1 1 0;
  width: auto;
  height: 100%;
  min-width: 0;
  aspect-ratio: auto;
}
.cs-finish__pair .cs-tile:nth-child(2) img { object-position: center 32%; }
.cs-finish__pair .cs-tile:nth-child(3) img {
  transform: scale(1.16);
  transform-origin: 46% 42%;
}
.cs-finish .cs-video {
  height: 78%;
  width: auto;
  aspect-ratio: 16 / 9;
  flex: none;
  align-self: center;
}
/* Hero across the top, the rest in one row beneath. --slides is the row count. */
.f-cs__media .cs-collage > .cs-feature {
  display: grid;
  grid-template-columns: repeat(var(--slides, 4), minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 16px;
  grid-column: auto;
  grid-row: 1 / -1;
  align-self: center;
  /* Stay inside a 1440 stage: 400 copy + 104 gap + 88/80 section padding.
     Height term still shrinks the deck when the stage is short. */
  width: min(calc(100cqi - 672px), calc((100cqh - 200px) * var(--slides, 4) / (var(--slides, 4) + 1) * var(--aw, 1783) / var(--ah, 1003)));
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.f-cs__media .cs-feature__rest { display: contents; }
.f-cs__media .cs-feature__hero {
  grid-column: 1 / -1;
  grid-row: 1;
}
.f-cs__media .cs-feature .cs-tile {
  height: auto;
  width: 100%;
  margin: 0;
  aspect-ratio: var(--a, 1783 / 1003);
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(13, 14, 16, 0.35);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  transform-origin: 0 0;
  transition: transform 0.6s var(--f-ease);
}
.f-cs__media .cs-feature__bar {
  order: 10;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.cs-feature__btn[data-feature="pause"],
.cs-feature__btn[data-swap="pause"],
.cs-feature__btn[data-phone="pause"],
.cs-feature__btn[data-tl="pause"] { position: relative; }
@property --cs-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.cs-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--f-logo-tint, var(--f-cta-edge, #0d0e10)) calc(var(--cs-p) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  pointer-events: none;
  animation: cs-ring 7s linear infinite;
}
.cs-swap .cs-ring,
.cs-line.is-phone .cs-ring,
.f-tl .cs-ring { animation-duration: 5.2s; }
.is-paused .cs-ring,
.is-held .cs-ring { animation-play-state: paused; }
@keyframes cs-ring { to { --cs-p: 100; } }
@media (prefers-reduced-motion: reduce) {
  .cs-ring { animation: none; }
}
.cs-swap__nav {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}
.cs-feature__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(13, 14, 16, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #0d0e10;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cs-feature__btn:hover,
.cs-feature__btn[aria-pressed="true"] {
  background: var(--f-cta, #0d0e10);
  border-color: var(--f-cta-edge, #0d0e10);
  color: var(--f-cta-ink, #fff);
}
.cs-feature__btn .f-ph {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.cs-feature__btn:focus-visible {
  outline: 3px solid #0d0e10;
  outline-offset: 3px;
}
.cs-feature__icon { display: grid; place-items: center; }
.cs-feature__icon[hidden] { display: none; }
.cs-feature__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.f-cs__media .cs-feature .cs-tile img,
.f-cs__media .cs-feature .cs-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.f-cs__media .cs-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  width: max-content;
}
.f-cs__media .cs-stack .cs-tile {
  flex: none;
  width: auto;
  height: calc((100cqh - 160px) / 3);
  margin: 0;
  aspect-ratio: 3566 / 2006;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}
.f-cs__media .cs-stack .cs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(13, 14, 16, 0.08);
  border-radius: 22px;
}
.cs-stat strong {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0d0e10;
}
.cs-stat span { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: #3a3b3d; }
.cs-video { background: #0d0e10; }
.cs-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-video { position: relative; }
.cs-clip-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.cs-swap__nav,
.cs-feature__bar { z-index: 3; }
.lightbox video {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 22px;
  background: #000;
}
.f-cs__media .ph { flex: none; width: 720px; height: 100%; aspect-ratio: auto; }
.f-cs__media .ph-grid .ph { width: 480px; }
body .f-cs .f-cs__recirc {
  align-self: center;
  height: min(100%, var(--f-card-h));
  overflow: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition-delay: 0s;
}
.f-cs__recirc .f-sky-note a { color: inherit; font-weight: 700; }
.f-cs__recirc button.f-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
}

.f-cs__count,
.f-cs__close,
.f-cs__meta,
.f-cs__intro,
.f-cs__focus,
.f-cs__action,
.f-cs__skip,
.f-cs__sec,
.f-cs__recirc { transition: opacity 0.35s ease 0.32s; }
.f-cs.is-entering .f-cs__count,
.f-cs.is-entering .f-cs__close,
.f-cs.is-entering .f-cs__meta,
.f-cs.is-entering .f-cs__intro,
.f-cs.is-entering .f-cs__focus,
.f-cs.is-entering .f-cs__action,
.f-cs.is-entering .f-cs__skip,
.f-cs.is-entering .f-cs__bar-title,
.f-cs.is-entering .f-cs__sec,
.f-cs.is-entering .f-cs__recirc { opacity: 0; transition: none; }
.f-cs.is-leaving .f-cs__count,
.f-cs.is-leaving .f-cs__close,
.f-cs.is-leaving .f-cs__meta,
.f-cs.is-leaving .f-cs__intro,
.f-cs.is-leaving .f-cs__focus,
.f-cs.is-leaving .f-cs__action,
.f-cs.is-leaving .f-cs__skip,
.f-cs.is-leaving .f-cs__sec,
.f-cs.is-leaving .f-cs__recirc { opacity: 0; transition: opacity 0.15s ease; }
.f-cs__bar { transition: opacity 0.2s ease; }
.f-cs__bar-title { transition: opacity 0.85s ease; }
.f-cs.is-swapping .f-cs__bar,
.f-cs.is-swapping .f-cs__view { opacity: 0; transition: opacity 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .f-cs__media .cs-feature .cs-tile,
  .cs-swap img,
  .cs-swap video,
  .f-cs__req-face,
  .f-cs__req-opt,
  .f-cs__req::before,
  .f-cs__q,
  .f-cs__q h3,
  .f-cs__q .f-cs__q-ico,
  .f-cs__q-a p,
  .f-cs__q-go,
  .f-cs__bar-title { transition: none; }
}
@media (max-width: 899px) {
  .f-cs::before { content: none; }
  .f-cs__pin { position: static; display: block; height: auto; overflow: visible; }
  .f-cs__bar {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 12px 1rem;
    background: #fff;
  }
  .f-cs .f-cs__entry.f-card { width: auto; height: auto; align-self: stretch; margin-bottom: 2rem; }
  .f-cs__sec {
    height: auto;
    width: 100vw;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 2rem 1rem;
    background: #fff;
  }
  #cs-brief.f-cs__sec { gap: 1.5rem; padding: 2rem 1rem; }
  .cs-line,
  .cs-line--cars,
  .cs-board,
  .cs-quad,
  .cs-span,
  .cs-wires,
  .cs-finish { height: auto; flex-direction: column; width: 100%; }
  .cs-line .cs-swap,
  .cs-line .cs-tile,
  .cs-board__row,
  .cs-board__row .cs-swap,
  .cs-board__row .cs-tile,
  .cs-quad,
  .cs-quad .cs-tile,
  .cs-span,
  .cs-span__side,
  .cs-span__row,
  .cs-span > .cs-tile,
  .cs-span__row .cs-swap,
  .cs-span__row .cs-tile,
  .cs-wires,
  .cs-wires .cs-tile,
  .cs-finish__stats,
  .cs-finish__photos,
  .cs-finish__store,
  .cs-finish .cs-video { width: 100%; height: auto; }
  .cs-swap__bar { flex-direction: row; }
  .cs-finish__photos { flex-direction: column; }
  .f-cs__entry h1 { font-size: 1.75rem; }
  .f-cs__entry .f-cs__skip { margin-top: 1.5rem; }
  .f-cs__meta { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
  .f-cs__view { flex: none; height: auto; min-height: 0; overflow: visible; container-type: normal; }
  .f-cs__track {
    flex-direction: column;
    gap: 0;
    width: auto;
    height: auto;
    padding: 0 1rem 3rem;
    transform: none !important;
  }
  .f-cs__sec,
  .f-cs__media,
  .f-cs__media .cs-gallery,
  .f-cs__media .phones,
  .f-cs__media .ph-grid { flex-direction: column; height: auto; gap: 1rem; }
  .f-cs__copy,
  .f-cs__copy.is-2col,
  .f-cs__copy.is-3col { width: auto; height: auto; column-count: auto; }
  .f-cs__sec.f-cs__gate { width: auto; gap: 1.5rem; padding-left: 1rem; }
  .f-cs__gate .f-cs__copy { width: auto; }
  .f-cs__pass-acts,
  .f-cs__faq { width: auto; height: auto; overflow: visible; padding-top: 0; }
  .f-cs__faq > h2 {
    position: static;
    margin: 0 0 0.5rem;
    white-space: normal;
  }
  .f-cs__board {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .f-cs__q:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    min-height: 148px;
  }
  .f-cs__q.is-open {
    grid-column: auto;
    grid-row: auto;
  }
  .f-cs__media .cs-fig,
  .f-cs__media .phones .cs-fig { width: 100%; height: auto; }
  .f-cs__media .cs-fig img,
  .f-cs__media .phones .cs-fig img { width: 100%; height: auto; }
  .f-cs__media .metric-grid,
  .f-cs__media .ph,
  .f-cs__media .ph-grid .ph { width: 100%; }
  .f-cs__media:has(.cs-collage) { height: auto; overflow: visible; }
  .f-cs__media .cs-collage {
    height: auto;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-columns: auto;
    grid-auto-rows: 180px;
  }
  .f-cs__media .ph { aspect-ratio: 16 / 9; height: auto; }
  .f-cs__media .cs-collage > .cs-feature {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    width: 100%;
    height: auto;
    min-width: 0;
  }
  .f-cs__media .cs-feature__rest { display: contents; }
  .f-cs__media .cs-feature__hero { grid-column: 1 / -1; grid-row: auto; }
  .f-cs__media .cs-feature .cs-tile { width: 100%; height: auto; }
  .f-cs__media .cs-stack { width: 100%; height: auto; }
  .f-cs__media .cs-stack .cs-tile { width: 100%; height: auto; }
  /* A line sizes from its height on desktop. On a stack, width has to come from the section or the frames collapse. */
  .f-cs__media:has(.cs-line),
  .f-cs__media:has(.cs-board),
  .f-cs__media:has(.cs-finish) { width: 100%; align-items: stretch; overflow: visible; }
  .cs-line .cs-tile,
  .cs-board__row .cs-tile {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .cs-line .cs-tile img,
  .cs-board .cs-tile img,
  .cs-board__row .cs-tile img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .cs-line .cs-swap,
  .cs-board__row .cs-swap {
    width: 100%;
    height: auto;
    aspect-ratio: var(--a, 16 / 9);
  }
  .f-cs .f-cs__recirc { height: auto; padding-top: 120px; }
}
.f-cs__jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
  margin-top: 1.75rem;
}
.f-cs__jumps .f-cs__skip { margin-top: 0; }
.f-cs__jump-dot { color: #55565a; font-weight: 700; }
/* Magnifier for flow boards and Figma views. Sits above the case, under the lightbox. */
.f-loupe {
  display: none;
  position: fixed;
  z-index: 95;
  width: 337.5px;
  height: 253.125px;
  margin: 0;
  border-radius: 20px;
  border: 3px solid #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  background-repeat: no-repeat;
  pointer-events: none;
}
.f-loupe.is-on { display: block; }

/* Three RetailMeNot boards open larger than the fit box and scroll.
   The vector stays the lightbox file. Radius stays 22 on the pane. */
.lightbox.is-scroll .lightbox__view {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  overflow: auto;
  border-radius: 22px;
  overscroll-behavior: contain;
  cursor: auto;
}
.lightbox.is-scroll img {
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* Phone frames. Desktop sizes these from the stage. A phone has no stage,
   so each frame takes the column and keeps the ratio it was drawn at.
   #f-cs twice outranks the per-study widths. */
@media (max-width: 899px) {
  #f-cs#f-cs { overflow-x: hidden; }
  #f-cs#f-cs .f-cs__media,
  #f-cs#f-cs .f-cs__media:has(.cs-collage),
  #f-cs#f-cs .f-cs__media:has(.cs-line),
  #f-cs#f-cs .f-cs__media:has(.cs-board),
  #f-cs#f-cs .f-cs__media:has(.cs-finish),
  #f-cs#f-cs .f-cs__media:has(.cs-quad),
  #f-cs#f-cs .f-cs__media:has(.cs-span) {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
    align-items: stretch;
  }
  #f-cs#f-cs .cs-collage {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 16px;
  }
  #f-cs#f-cs .cs-collage > * {
    width: 100%;
    height: auto;
    grid-row: auto;
    grid-column: auto;
    aspect-ratio: auto;
  }
  #f-cs#f-cs .cs-collage > .cs-wires { overflow: visible; }
  #f-cs#f-cs .cs-collage > .cs-feature,
  #f-cs#f-cs .cs-feature--rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    gap: 10px;
  }
  #f-cs#f-cs .cs-feature__hero {
    order: 1;
    width: 100%;
    flex: none;
  }
  #f-cs#f-cs .cs-feature__rest {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    order: 2;
    width: 100%;
    overflow-x: hidden;
    touch-action: pan-y;
    padding-bottom: 6px;
  }
  #f-cs#f-cs .cs-feature__rest .cs-tile {
    flex: 0 0 148px;
    width: 148px;
    max-width: none;
    scroll-snap-align: start;
  }
  #f-cs#f-cs .cs-feature__bar,
  #f-cs#f-cs .cs-feature--rail .cs-feature__bar {
    order: 3;
    width: 100%;
  }
  #f-cs#f-cs .cs-feature > .cs-tile {
    width: 100%;
    height: auto;
    aspect-ratio: var(--a, 16 / 9);
  }
  #f-cs#f-cs .cs-line,
  #f-cs#f-cs .cs-board,
  #f-cs#f-cs .cs-board__row,
  #f-cs#f-cs .cs-quad,
  #f-cs#f-cs .cs-span,
  #f-cs#f-cs .cs-span__side,
  #f-cs#f-cs .cs-span__row,
  #f-cs#f-cs .cs-wires,
  #f-cs#f-cs .cs-stack,
  #f-cs#f-cs .cs-finish,
  #f-cs#f-cs .cs-finish__photos,
  #f-cs#f-cs .cs-finish__store,
  #f-cs#f-cs .cs-finish__pair {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  #f-cs#f-cs .cs-line > .cs-swap,
  #f-cs#f-cs .cs-line > .cs-tile,
  #f-cs#f-cs .cs-board__row > .cs-swap,
  #f-cs#f-cs .cs-board__row > .cs-tile,
  #f-cs#f-cs .cs-wires > .cs-tile,
  #f-cs#f-cs .cs-stack > .cs-tile,
  #f-cs#f-cs .cs-quad > .cs-tile,
  #f-cs#f-cs .cs-span > .cs-tile,
  #f-cs#f-cs .cs-span__row > .cs-tile,
  #f-cs#f-cs .cs-span__row > .cs-swap,
  #f-cs#f-cs .cs-finish .cs-tile,
  #f-cs#f-cs .cs-finish .cs-video,
  #f-cs#f-cs .cs-collage > .cs-swap {
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: var(--a, 16 / 9);
  }
  #f-cs#f-cs .cs-grid23 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    width: 100%;
    height: auto;
    align-self: stretch;
  }
  #f-cs#f-cs .cs-grid23 > .cs-tile {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  #f-cs#f-cs .cs-scroll {
    width: 100%;
    height: min(70vh, 640px);
    aspect-ratio: auto;
    flex: none;
    cursor: auto;
  }
  #f-cs#f-cs .cs-scroll__view,
  #f-cs#f-cs .cs-scroll__view img { cursor: auto; }
  #f-cs#f-cs .cs-finish__stats {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  #f-cs#f-cs .cs-finish__stats .cs-stat {
    height: auto;
    min-height: 112px;
    aspect-ratio: auto;
  }
  #f-cs#f-cs .metric-grid,
  #f-cs#f-cs .metric-grid--stack {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  #f-cs#f-cs .cs-tile,
  #f-cs#f-cs .cs-swap,
  #f-cs#f-cs .cs-video,
  #f-cs#f-cs .cs-scroll { position: relative; }
  #f-cs#f-cs .cs-line .cs-tile img,
  #f-cs#f-cs .cs-board .cs-tile img,
  #f-cs#f-cs .cs-wires > .cs-tile img,
  #f-cs#f-cs .cs-swap img,
  #f-cs#f-cs .cs-swap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .f-loupe,
  .f-loupe.is-on { display: none; }
  #f-cs#f-cs .f-cs__sec {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    box-sizing: border-box;
  }
  #f-cs#f-cs .f-cs__entry.f-card {
    width: 100%;
    max-height: none;
    overflow: visible;
    align-self: stretch;
    margin: 0.75rem 0 2rem;
    padding: 36px 28px 32px;
  }
  #f-cs#f-cs .f-cs__sec.f-cs__gate {
    align-items: stretch;
    box-sizing: border-box;
    padding: 2rem 1rem 2.5rem;
    gap: 2rem;
  }
  #f-cs#f-cs .f-cs__gate .f-cs__copy,
  #f-cs#f-cs .f-cs__faq,
  #f-cs#f-cs .f-cs__board,
  #f-cs#f-cs .f-cs__q {
    width: 100%;
    max-width: 100%;
  }
  #f-cs#f-cs .f-cs__recirc {
    width: 100%;
    margin-top: 3rem;
    padding-top: 120px;
  }
  #f-cs#f-cs .f-cs__acts,
  #f-cs#f-cs .f-btn,
  #f-cs#f-cs .f-cs__action {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  #f-cs#f-cs .f-cs__acts { align-items: stretch; }
  #f-cs#f-cs .cs-line.is-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 10px;
  }
  #f-cs#f-cs .cs-line.is-phone > .cs-tile { display: none; }
  #f-cs#f-cs .cs-line.is-phone > .cs-tile.is-on {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    aspect-ratio: auto;
  }
  #f-cs#f-cs .cs-line.is-phone > .cs-tile.is-on img {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: center;
    background: transparent;
  }
  #f-cs#f-cs .cs-line.is-phone > .cs-feature__bar { align-self: stretch; }
  #f-cs#f-cs .f-cs__q.is-open {
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible;
    z-index: auto;
  }
  #f-cs#f-cs .f-cs__media .cs-swap,
  #f-cs#f-cs .cs-collage > .cs-swap,
  #f-cs#f-cs .cs-swap.cs-swap--board {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #f-cs#f-cs .f-cs__q h3,
  #f-cs#f-cs .f-cs__q:nth-child(n) h3 { font-size: 1.75rem; }
  #f-cs#f-cs .f-cs__q-a p { font-size: 16px; line-height: 1.5; }
  #f-cs#f-cs .f-cs__q.is-open .f-cs__q-a { padding-bottom: 60px; }
  #f-cs#f-cs .f-cs__q .f-cs__q-ico,
  #f-cs#f-cs .f-cs__q:nth-child(1) .f-cs__q-ico,
  #f-cs#f-cs .f-cs__q.is-open .f-cs__q-ico,
  #f-cs#f-cs .f-cs__q.is-open.is-shut .f-cs__q-ico,
  #f-cs#f-cs .f-cs__q.is-open.is-shut:nth-child(1) .f-cs__q-ico {
    width: 52px;
    height: 52px;
  }
  #f-cs#f-cs .cs-line > .cs-swap,
  #f-cs#f-cs .cs-board__row > .cs-swap,
  #f-cs#f-cs .cs-span__row > .cs-swap,
  #f-cs#f-cs .cs-collage > .cs-swap,
  #f-cs#f-cs .cs-swap {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    gap: 10px;
  }
  #f-cs#f-cs .f-cs__media .cs-swap img,
  #f-cs#f-cs .f-cs__media .cs-swap video,
  #f-cs#f-cs .cs-swap img,
  #f-cs#f-cs .cs-swap video {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: auto;
    aspect-ratio: var(--a, 16 / 10);
    object-fit: contain;
    border: 1px solid rgba(13, 14, 16, 0.35);
    border-radius: 18px;
    box-sizing: border-box;
    background: #3a3c40;
  }
  #f-cs#f-cs .cs-swap img:not(.is-on),
  #f-cs#f-cs .cs-swap video:not(.is-on) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  #f-cs#f-cs .f-cs__media .cs-swap__nav,
  #f-cs#f-cs .cs-swap__nav {
    position: static;
    grid-row: 2;
    grid-column: 1;
    left: auto;
    bottom: auto;
    z-index: 1;
    margin: 0;
  }
  #f-cs#f-cs .cs-feature__bar {
    position: static;
    margin-top: 2px;
  }
}