/* DeckVakt shared site styles */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/barlow-semi-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/barlow-semi-condensed-700.woff2') format('woff2');
}

:root {
  --dv-ink: #0F2A3D;
  --dv-ash: #4A5A66;
  --dv-label: #B04E14;
  --dv-safe-top: env(safe-area-inset-top, 0px);
  --dv-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dv-safe-left: env(safe-area-inset-left, 0px);
  --dv-safe-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  background: #E9EEF2;
  overflow-x: clip;
  max-width: 100%;
}
x-dc { display: none !important; }
#dc-root,
#dc-root > .sc-host {
  height: auto !important;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

a { transition: color 180ms ease; }
.site-shell p > a:not([class]),
.waitlist-copy a {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.guide-label { color: var(--dv-label) !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a,
  .faq-item__mark::before,
  .faq-item__mark::after,
  .faq-item__panel,
  .site-nav-links,
  .dial-watch,
  .systems-picker > [role="button"],
  .to-top {
    transition: none;
  }
}

[id] { scroll-margin-top: calc(96px + var(--dv-safe-top)); }

.site-shell {
  width: 100%;
  overflow-x: clip;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--dv-safe-top);
  background: #E9EEF2;
  border-bottom: 1px solid rgba(122, 138, 150, 0.4);
}
.site-header > div {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px clamp(20px, 4vw, 40px);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: calc(12px + var(--dv-safe-top));
  z-index: 100;
  padding: 12px 20px;
  background: #0F2A3D;
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid #0F2A3D;
  outline-offset: 2px;
}

.to-top {
  position: fixed;
  right: max(16px, var(--dv-safe-right));
  bottom: max(16px, var(--dv-safe-bottom));
  z-index: 40;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #0F2A3D;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 42, 61, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}
.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.to-top:hover {
  background: #B04E14;
}
html.nav-is-open .to-top {
  opacity: 0;
  pointer-events: none;
}
.to-top__mark {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px auto 0;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
@media print {
  .to-top { display: none; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0F2A3D;
  outline-offset: 2px;
}

.nav-cta:focus-visible,
.waitlist-form button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0F2A3D;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0F2A3D;
  cursor: pointer;
  flex: 0 0 auto;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-toggle__bars {
  position: relative;
  pointer-events: none;
  transition: background 180ms ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 180ms ease;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars,
html.nav-is-open .nav-toggle .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
html.nav-is-open .nav-toggle .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after,
html.nav-is-open .nav-toggle .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  flex-wrap: nowrap;
}

.site-nav-links a {
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  color: #0F2A3D;
}

.site-nav-links a:hover { color: #B04E14; }

.site-nav-links a.nav-cta {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  background: #B04E14;
  color: #FFFFFF;
  font-weight: 600;
}

.site-nav-links a.nav-cta:hover { background: #0F2A3D; color: #FFFFFF; }

/* Marks the current page, or on the homepage the section being read. Colour
   and underline only: bolding the active link would change its width and
   shuffle the rest of the nav sideways every time the reader crossed into a
   new section. */
.site-nav-links a[aria-current] {
  color: #B04E14;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

html.nav-is-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .brand-lockup--header { font-size: 20px; }
  .nav-toggle { display: flex; }
  .site-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-basis: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 60;
    margin: 0;
    padding: 4px clamp(20px, 4vw, 40px) 20px;
    background: #E9EEF2;
    border-bottom: 1px solid rgba(122, 138, 150, 0.4);
    box-shadow: 0 18px 28px rgba(15, 42, 61, 0.12);
  }
  .site-nav-links.is-open,
  html.nav-is-open .site-nav-links {
    display: flex;
  }
  .site-nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    font-size: 17px;
    border-top: 1px solid rgba(122, 138, 150, 0.45);
  }
  .site-nav-links a.nav-cta {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    border-top: none;
  }
}

.guide-layout {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.guide-layout > article {
  flex: 1 1 min(100%, 520px);
  min-width: 0;
  max-width: 100%;
}

.guide-aside {
  flex: 1 1 260px;
  max-width: 300px;
  min-width: 0;
}

@media (max-width: 900px) {
  .guide-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .guide-aside,
  .guide-aside--sticky {
    position: static;
    width: 100%;
    max-width: none;
    flex: none;
  }
  .guide-layout > article {
    width: 100%;
    max-width: 100%;
    flex: none;
  }
}

@media (min-width: 901px) {
  .guide-aside--sticky {
    position: sticky;
    top: calc(100px + var(--dv-safe-top));
    flex: 0 0 auto;
    width: 280px;
    max-width: 280px;
  }
}

/* Crew phone mocks: 4-up on desktop, 2-up from 600px, capped 1-up on phones */
.crew-phones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 30px);
  align-items: stretch;
  justify-items: center;
}

.crew-phone-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.crew-phone-card > :first-child {
  min-height: 54px;
}
.crew-phone-caption {
  padding-top: 18px;
  font-size: 16px;
  line-height: 24px;
  color: #3E5462;
  text-wrap: pretty;
}

.crew-phone {
  position: relative;
  border-radius: 26px;
  padding: 9px;
  background: #0F2A3D;
  box-shadow: 0 14px 30px rgba(15, 42, 61, 0.16);
}

.crew-phone--alarm {
  background: #000000;
}

.crew-phone__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 0.4603;
  overflow: hidden;
  border-radius: 19px;
  container-type: inline-size;
  --crew-phone-design: 240;
}

.crew-phone__ui {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: calc(var(--crew-phone-design) * 1px);
  height: calc(var(--crew-phone-design) / 0.4603 * 1px);
  transform: scale(var(--crew-phone-scale, calc(100cqi / (var(--crew-phone-design) * 1px))));
  transform-origin: top left;
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  background: #FFFFFF;
  color: #0F2A3D;
}

.crew-phone--alarm .crew-phone__ui {
  background: #000000;
  color: #FF2A1F;
}

.crew-phone--alarm.crew-phone--full .crew-phone__ui,
.crew-phone--chrome.crew-phone--full .crew-phone__ui {
  padding: 0;
  overflow: hidden;
}

.crew-phone--day .crew-phone__ui {
  background: #E9EEF2;
  color: #0F2A3D;
}

.crew-phone--share .crew-phone__ui {
  background: #FFFFFF;
  color: #0F2A3D;
}
.crew-phone--share.crew-phone--full .crew-phone__ui {
  padding: 0;
  overflow: hidden;
}

@keyframes breathe {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}

/* The watch that is on deck changes colour, thickness and opacity the moment
   the clock crosses a handover. Ease it so the dial does not flash orange, but
   keep it short: for as long as it runs, the watch coming off and the watch
   coming on are both part orange and part thick, and two fat arcs in blended
   colours read as a smear rather than a handover. */
.dial-watch {
  transition: stroke 260ms ease-out, stroke-width 260ms ease-out, opacity 260ms ease-out;
}

.crew-phone--full .crew-phone__viewport {
  --crew-phone-design: 393;
}
.crew-phone--full .crew-phone__ui {
  padding: 0;
}

@media (max-width: 1100px) {
  .crew-phones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crew-phone-card {
    max-width: 320px;
  }
  .crew-phone {
    border-radius: 32px;
    padding: 12px;
  }
  .crew-phone__viewport {
    border-radius: 24px;
  }
}

.hero-promises {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
}
.hero-promises > :last-child {
  grid-column: 1 / -1;
}

@media (max-width: 599px) {
  .crew-phones {
    grid-template-columns: minmax(0, 1fr);
  }
  .crew-phone-card {
    max-width: 300px;
  }
  .hero-promises {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.mock-preview-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A5A66;
  font-weight: 600;
  padding: 0 0 8px;
}

.board-mock {
  --board-pt-w: 440;
  --board-pt-h: 956;
  flex: 0 0 auto;
  width: min(320px, 100%);
  max-width: 320px;
  min-width: 0;
  margin-inline: auto;
  align-self: center;
}
.board-phone {
  width: 100%;
  box-sizing: border-box;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}
.board-phone__screen {
  width: 100%;
  aspect-ratio: 440 / 956;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.board-phone__clock {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 18cqi, 60px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
}
.board-phone__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 0;
}
.board-phone__count {
  flex: 0 0 7.6em;
  width: 7.6em;
  text-align: right;
}
.board-phone__count-val {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.board-phone__home {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-phone__home span {
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.22;
}

.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 10px;
  background:
    linear-gradient(#FFFFFF 33%, rgba(255,255,255,0)) 0 0 / 28px 100% local,
    linear-gradient(rgba(255,255,255,0), #FFFFFF 66%) 100% 0 / 28px 100% local,
    linear-gradient(to right, rgba(15, 42, 61, 0.14), transparent) 0 0 / 16px 100% scroll,
    linear-gradient(to left, rgba(15, 42, 61, 0.14), transparent) 100% 0 / 16px 100% scroll,
    #FFFFFF;
  background-repeat: no-repeat;
}

.table-scroll table {
  min-width: 460px;
}

@media (max-width: 720px) {
  .table-scroll::before {
    content: "Swipe to see all columns";
    display: block;
    position: sticky;
    left: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4A5A66;
    padding: 10px 12px 0;
  }
}

.heat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  min-height: 28px;
  height: 28px;
  border-radius: 3px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.heat-breakdown-k {
  color: #3E5462;
  min-width: 0;
}

.guide-prevnext {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(122, 138, 150, 0.4);
}

.guide-prevnext a {
  flex: 1 1 180px;
  min-width: 0;
  text-decoration: none;
}

.guide-prevnext__dir {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A5A66;
  font-weight: 600;
  padding-bottom: 4px;
}

.guide-prevnext__title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
}

.guide-cta {
  background: #0F2A3D;
  color: #FFFFFF;
  border-radius: 12px;
  padding: clamp(24px, 5vw, 38px) clamp(20px, 4vw, 40px);
  margin: 48px 0 0;
}

.guide-cta > h2 {
  font-size: clamp(26px, 4vw, 34px);
}

.store-coming {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #4A5A66;
}

.store-coming span {
  white-space: nowrap;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.store-badge {
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  width: 168px;
}

.store-badge img {
  display: block;
  width: 100%;
  height: 44px;
}

.hero-stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 36px;
}

.store-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 8px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: #0F2A3D;
}

.store-labels a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0F2A3D;
  text-decoration: none;
}

.store-labels a img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

.store-labels a:hover {
  color: #B04E14;
}

.trust-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #4A5A66;
}

.trust-proof span {
  white-space: nowrap;
}

.trust-proof span:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: #7A8A96;
}

.site-footer .store-badges {
  padding-top: 16px;
}

details.faq-item {
  border-top: 1px solid rgba(122, 138, 150, 0.4);
  padding: 0;
  scroll-margin-top: calc(96px + var(--dv-safe-top));
}
details.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
  padding: 16px 0;
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
}
details.faq-item summary::-webkit-details-marker,
details.faq-item summary::marker {
  display: none;
  content: none;
}

.faq-item__q {
  flex: 1;
  min-width: 0;
}

.faq-item__mark {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #4A5A66;
}
.faq-item__mark::before,
.faq-item__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}
.faq-item__mark::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}
.faq-item__mark::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}
details.faq-item.is-open .faq-item__mark::after {
  transform: rotate(90deg);
  opacity: 0;
}
details.faq-item summary:hover .faq-item__mark,
details.faq-item summary:focus-visible .faq-item__mark {
  color: #0F2A3D;
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
details.faq-item.is-open .faq-item__panel,
html:not(.js) details.faq-item[open] .faq-item__panel {
  grid-template-rows: 1fr;
}
.faq-item__clip {
  overflow: hidden;
  min-height: 0;
}
.faq-item__body {
  font-size: 17px;
  line-height: 26px;
  color: #3E5462;
  max-width: 680px;
  padding: 0 0 16px;
  text-wrap: pretty;
}

details.faq-item.faq-no-anim .faq-item__panel,
details.faq-item.faq-no-anim .faq-item__mark::before,
details.faq-item.faq-no-anim .faq-item__mark::after {
  transition: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  color: #0F2A3D;
}

.brand-lockup--header { font-size: 26px; }
.brand-lockup--footer { font-size: 28px; }

.brand-lockup img {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  display: block;
  /* The mark is a full-bleed navy tile. Roughly the iOS icon radius, so it
     reads as an app icon rather than a raw square on the light header. */
  border-radius: 0.28em;
}

.systems-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 52px);
}

.systems-dashboard {
  background: #FFFFFF;
  border-radius: 12px;
  padding: clamp(32px, 4.5vw, 48px);
  box-shadow: 0 12px 32px rgba(15, 42, 61, 0.08);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}

.systems-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: stretch;
}

.systems-picker-col,
.systems-live {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}

.systems-col-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A5A66;
  padding-bottom: 10px;
  flex: 0 0 auto;
}

.systems-picker {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.systems-picker > [role="button"] {
  display: flex;
  gap: clamp(14px, 2vw, 18px);
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
  padding: 16px clamp(8px, 1.5vw, 14px);
  border-radius: 8px;
  cursor: pointer;
  border-top: 1px solid rgba(122, 138, 150, 0.28);
  transition: box-shadow 220ms ease, background 220ms ease;
}

.systems-picker > [role="button"] > :first-child {
  flex: 0 0 auto;
}

.systems-picker > [role="button"] > :first-child svg {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 100%;
}

.systems-picker > [role="button"] > :nth-child(2) {
  flex: 1 1 180px;
  min-width: 0;
}

.systems-picker-stat {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 17px;
  flex: 0 1 auto;
  min-width: 0;
}

.systems-picker > [role="button"]:first-child {
  border-top: none;
}

.systems-live {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 10px;
  background: rgba(233, 238, 242, 0.55);
}

.systems-live-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.systems-live-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(122, 138, 150, 0.35);
  flex: 0 0 auto;
}

.systems-live-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.systems-live-line {
  font-size: 16px;
  line-height: 1.55;
  color: #3E5462;
  text-wrap: pretty;
}

.systems-live-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.systems-live-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-height: 52px;
  padding: 12px 4px;
  border-top: 1px solid rgba(122, 138, 150, 0.28);
}

.systems-live-row--head {
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 4px 8px;
  border-top: none;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: #4A5A66;
}

.systems-live-row--head .systems-live-bars {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4A5A66;
}

.systems-live-row--head .systems-live-vals {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: #4A5A66;
  font-family: inherit;
}

.systems-live-row--head + .systems-live-row {
  border-top: none;
}

.systems-live-name {
  width: 72px;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
}

.systems-live-bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.systems-live-bar {
  height: 10px;
  border-radius: 3px;
  background: rgba(122, 138, 150, 0.22);
  overflow: hidden;
}

.systems-live-bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.systems-live-vals {
  width: 112px;
  flex: 0 0 auto;
  text-align: right;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A fixed name column plus a fixed value column leaves the bars about 30px on a
   phone, which is too narrow to compare anything. Below this the name and the
   value share the top line and the bars get the full width underneath. */
@media (max-width: 640px) {
  .systems-live-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name vals"
      "bars bars";
    align-items: baseline;
    gap: 10px 14px;
    padding: 14px 2px;
  }
  .systems-live-name {
    grid-area: name;
    width: auto;
    min-width: 0;
  }
  .systems-live-vals {
    grid-area: vals;
    width: auto;
  }
  .systems-live-bars {
    grid-area: bars;
    gap: 6px;
  }
  /* "Rota comparison" has no column left to sit in once the bars move down, and
     the legend underneath already names both bars. */
  .systems-live-row--head .systems-live-bars {
    display: none;
  }
}

.systems-live-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid rgba(122, 138, 150, 0.28);
  font-size: 13px;
  line-height: 1.45;
  color: #4A5A66;
  flex: 0 0 auto;
}

.systems-live-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.systems-live-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  font-style: normal;
}

.systems-chart-panel {
  border-top: 1px solid rgba(122, 138, 150, 0.35);
  padding-top: clamp(24px, 3.5vw, 32px);
}

.systems-chart-panel .systems-col-label {
  padding-bottom: 16px;
}

.systems-chart {
  padding-top: 0;
}

.systems-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 12px);
  height: clamp(120px, 16vw, 160px);
}

.systems-chart-day {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}

.systems-chart-day > div {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.systems-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #4A5A66;
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}

.systems-chart-foot {
  font-size: 15px;
  line-height: 1.5;
  color: #4A5A66;
  border-top: 1px solid rgba(122, 138, 150, 0.35);
  padding-top: 16px;
  margin-top: 18px;
  text-wrap: pretty;
}

.systems-copy {
  padding-top: clamp(8px, 2vw, 16px);
}

.stat-band {
  display: flex;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(122, 138, 150, 0.4);
  margin-top: 32px;
  flex-wrap: wrap;
  max-width: 720px;
  align-items: stretch;
}
.stat-band__col {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.stat-band__n {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-band__k {
  flex: 1;
  font-size: 15px;
  line-height: 22px;
  color: #3E5462;
  padding-top: 4px;
  text-wrap: pretty;
}
.stat-band__cta {
  margin-top: 12px;
  min-height: 1.35em;
}

@media (max-width: 520px) {
  .stat-band__cta:empty { display: none; }
  .stat-band__k { flex: none; }
}

.hero-section {
  align-items: flex-start;
}

.hero-copy {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
  container-name: hero-copy;
}

.hero-dial-col {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero-dial-wrap {
  width: 420px;
  max-width: 100%;
  min-width: 0;
}

.hero-dial-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
}

.hero-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  max-width: 420px;
}

/* The label carries a newline so it breaks in the same place in every state.
   Without that the countdown re-wraps the moment it grows a minutes part, and
   the two-line slot min-height reserves would sit half empty the rest of the
   time. */
.hero-dial-hub [data-hub-label] {
  min-height: 2.6em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.hero-eyebrow-label {
  min-width: 0;
  flex: 1 1 12rem;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.hero-cta-row a {
  white-space: nowrap;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.more-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  border: 2px solid #0F2A3D;
  background: transparent;
  color: #0F2A3D;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.more-cta:hover {
  background: #0F2A3D;
  color: #FFFFFF;
}
.more-cta--solid {
  background: #B04E14;
  border-color: #B04E14;
  color: #FFFFFF;
}
.more-cta--solid:hover {
  background: #8F3F10;
  border-color: #8F3F10;
  color: #FFFFFF;
}
.more-cta--light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.more-cta--light:hover {
  background: #FFFFFF;
  color: #0F2A3D;
}
.more-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
}
.text-cta,
.trust-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #B04E14;
  text-decoration: none;
}
.trust-card-cta {
  margin-top: auto;
  padding-top: 16px;
  font-size: 15px;
}
.text-cta:hover,
.trust-card-cta:hover {
  color: #0F2A3D;
}
.text-cta--light {
  color: #FF8A4A;
}
.text-cta--light:hover {
  color: #FFFFFF;
}
.text-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: 16px;
}

.section-intro {
  align-items: flex-start;
}
.section-intro--mid {
  align-items: center;
  justify-content: flex-start;
}

.quote-card {
  flex: 1 1 240px;
  max-width: none;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 24px 24px 22px;
  box-shadow: 0 12px 28px rgba(15, 42, 61, 0.1);
}
.quote-card__mark {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 0.7;
  height: 28px;
  color: var(--quote-accent, #FF6B1A);
}
.quote-card__text {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.45;
  font-weight: 600;
  padding-top: 14px;
  text-wrap: pretty;
}
.quote-card__meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(122, 138, 150, 0.35);
  font-style: normal;
}
.quote-card .text-cta {
  margin-top: 14px;
  min-height: 2.4em;
  align-items: flex-start;
}

.crew-note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.crew-note {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 22px 24px 24px;
  box-shadow: 0 10px 24px rgba(15, 42, 61, 0.07);
}
.crew-note h3 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 10px;
}
.crew-note p {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: #3E5462;
  text-wrap: pretty;
}
.crew-note .text-cta {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .crew-note-grid {
    grid-template-columns: 1fr;
  }
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

@media (max-width: 1100px) {
  .tool-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1101px) {
  .section-intro__lead {
    flex: 1 1 420px;
    min-width: 0;
  }
  .section-intro__body {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 460px;
  }
  .section-intro__body--narrow {
    max-width: 420px;
  }
  .section-intro__body--wide {
    max-width: 520px;
  }
  .section-intro--mid .section-intro__lead,
  .section-intro--mid > h2 {
    flex: 0 1 520px;
    max-width: 520px;
  }
  .section-intro--mid .section-intro__body,
  .section-intro--mid .section-intro__body--narrow {
    flex: 0 1 480px;
    max-width: 480px;
  }
}

.section-intro__stat {
  align-self: flex-end;
  margin-left: auto;
}

.bad-day-intro {
  padding-bottom: clamp(20px, 4vw, 32px);
}

.skipper-card {
  align-items: stretch;
  max-width: none;
  gap: 12px;
  padding: 26px 32px 24px;
  border-top: 4px solid #FF6B1A;
}
.skipper-card__title {
  flex: 0 0 auto;
  width: 100%;
}
.skipper-card__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 640px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.pricing-card {
  height: 100%;
}

@media (max-width: 700px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Fairness panels: the label reads as a quiet tint rather than a solid slab, so
   the score stays the loudest thing in the card. */
.heat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  flex: 0 0 auto;
}

.heat-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.heat-tag.heat--gen {
  color: #B04E14;
  background: rgba(176, 78, 20, 0.10);
}

.heat-tag.heat--hand {
  color: #5E6E7A;
  background: rgba(94, 110, 122, 0.12);
}

.heat-score-group {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 0 0 auto;
}

.heat-score {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.heat-score.heat--gen {
  font-size: 48px;
  color: #0F2A3D;
}

.heat-score.heat--hand {
  font-size: 32px;
  color: #5E6E7A;
}

.heat-score-unit {
  font-size: 13px;
  color: #4A5A66;
}

/* Below this the label and the score cannot share a line without the label
   breaking mid-phrase, so they stack and the label gets the full width. */
@media (max-width: 700px) {
  .heat-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding-bottom: 4px;
  }
}

.guide-link {
  display: grid;
  gap: clamp(8px, 1.5vw, 16px) clamp(14px, 2vw, 28px);
  align-items: baseline;
}

@media (min-width: 901px) {
  .guide-link {
    /* The title column is wide enough to keep the row titles on one line down to
       the 901px breakpoint. Narrower than this and they break mid-phrase. */
    grid-template-columns: minmax(100px, 140px) minmax(180px, 1.5fr) minmax(220px, 2fr) auto;
  }
}

@media (max-width: 1100px) {
  .guide-link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label chevron"
      "title title"
      "desc desc";
  }
  .guide-label { grid-area: label; }
  .guide-link h2,
  .guide-link h3 { grid-area: title; }
  .guide-desc {
    grid-area: desc;
    width: 100%;
  }
  .guide-chevron,
  .guide-time { grid-area: chevron; justify-self: end; }
}

/* Features page */

.feat-hero {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  flex-wrap: wrap;
}

.feat-hero__copy {
  flex: 1 1 420px;
  min-width: 0;
}

.feat-hero__dial {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.feat-dial-wrap {
  width: 100%;
  max-width: 440px;
}

.feat-dial-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Holds the dial and its centre readout. Square, because the dial's viewBox
   is, so inset:0 lands the readout on the dial's own centre. The legend sits
   outside it or the readout would centre on the pair of them. */
.feat-dial-face {
  position: relative;
  container-type: inline-size;
}

/* The dial scales with the column, so the readout is sized in container units
   against the dial's width rather than in pixels. The clear circle inside the
   ring has a radius of about 26cqi, which leaves roughly 45cqi of width at the
   height this block runs to — every line below is comfortably inside that. */
.feat-dial-hub {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5cqi;
  text-align: center;
  pointer-events: none;
}

/* The crew pair and the countdown both change length as the watch turns. On a
   centred block that only moves the ends, but a wrap would jog everything
   below it, so each line is held to one. */
.feat-dial-hub > * {
  white-space: nowrap;
}

.feat-dial-hub__eyebrow {
  font-size: 3.2cqi;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A5A66;
}

.feat-dial-hub__time {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 10cqi;
  line-height: 1.05;
  color: #0F2A3D;
  font-variant-numeric: tabular-nums;
}

.feat-dial-hub__crew {
  font-size: 4.2cqi;
  line-height: 1.3;
  color: #0F2A3D;
}

.feat-dial-hub__tail {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 3.6cqi;
  line-height: 1.35;
  color: #4A5A66;
  font-variant-numeric: tabular-nums;
}

.feat-dial-legend {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
  margin: 0 auto;
  padding-top: 18px;
}

.feat-split {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  flex-wrap: wrap;
}

.feat-split--top {
  align-items: flex-start;
}

.feat-split__copy {
  flex: 1 1 380px;
  min-width: 0;
}

.feat-split__visual {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.feat-split__visual > svg,
.feat-plot svg {
  max-width: 100%;
  height: auto;
}

.feat-plot {
  width: 100%;
  max-width: 380px;
}

/* Layered offsets read as a stack of log pages under the top sheet. */
.feat-paper,
.paper-stack {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-width: 0;
}
/* The stacked sheets are drawn 14px past the box. On a full-width phone
   column that sticks into the page padding and can be clipped. Shrink the
   box instead so the offset still reads, inside the column. */
@media (max-width: 1100px) {
  .feat-paper,
  .paper-stack {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
  }
}

.feat-paper__back1,
.feat-paper__back2 {
  position: absolute;
  border-radius: 2px;
}

.feat-paper__back2 {
  left: 14px;
  top: 14px;
  right: -14px;
  bottom: -14px;
  background: #DDE4E9;
}

.feat-paper__back1 {
  left: 7px;
  top: 7px;
  right: -7px;
  bottom: -7px;
  background: #E8EDF0;
}

.feat-paper__sheet {
  position: relative;
  background: #FFFFFF;
  border-radius: 2px;
  padding: 30px 28px 34px;
  box-shadow: 0 18px 40px rgba(15, 42, 61, 0.10);
}
.feat-paper__sheet > :first-child,
.paper-stack > :last-child > :first-child {
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.feat-paper__sheet > :first-child > *,
.paper-stack > :last-child > :first-child > * {
  min-width: 0;
}

.feat-brief {
  width: 100%;
  max-width: 500px;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 28px 28px 30px;
  box-shadow: 0 18px 40px rgba(15, 42, 61, 0.10);
}

.feat-cap {
  display: block;
  text-decoration: none;
  color: #0F2A3D;
  padding: 18px 0;
  border-top: 1px solid rgba(122, 138, 150, 0.4);
}

.feat-cap--last {
  border-bottom: 1px solid rgba(122, 138, 150, 0.4);
}

.feat-cap__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.feat-cap__title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.08;
  padding-top: 6px;
  text-wrap: pretty;
}

.feat-cap__body {
  font-size: 16px;
  line-height: 24px;
  color: #3E5462;
  padding-top: 6px;
  text-wrap: pretty;
}

.feat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: clamp(28px, 4vw, 44px);
}

.feat-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 22px 22px 24px;
  text-decoration: none;
  color: #0F2A3D;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feat-card--dark {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.feat-card__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.feat-card__title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.08;
  padding-top: 8px;
  text-wrap: pretty;
}

.feat-card__body {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
  color: #3E5462;
  padding-top: 8px;
  text-wrap: pretty;
}

.feat-card--dark .feat-card__body {
  color: rgba(255, 255, 255, 0.72);
}

.rest-strip {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
}

.rest-cell {
  height: 20px;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .feat-cards {
    grid-template-columns: 1fr;
  }
  .feat-split__visual {
    order: -1;
  }
  .feat-split--top .feat-split__visual {
    order: 0;
  }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.site-footer__col {
  min-width: 0;
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__brand {
    max-width: none;
  }
}

.site-footer__bar {
  padding-bottom: max(56px, calc(32px + var(--dv-safe-bottom))) !important;
}

.waitlist-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  height: 60px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 17px;
}

.waitlist-form input[type="email"][aria-invalid="true"] {
  border-color: #FF6B1A;
}

.waitlist-box {
  background: #0F2A3D;
  color: #FFFFFF;
  border-radius: 12px;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.waitlist-box > * {
  position: relative;
  z-index: 1;
}

.waitlist-title {
  min-height: 2.1em;
}

.waitlist-aside {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.waitlist-box--ack {
  background: #FF6B1A;
  animation: waitlist-tint 0.7s ease forwards;
}

@keyframes waitlist-tint {
  from { background-color: #0F2A3D; }
  to { background-color: #FF6B1A; }
}

.waitlist-lead {
  font-size: 18px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.72);
  padding-top: 16px;
  max-width: 560px;
  text-wrap: pretty;
}

.waitlist-kicker-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.waitlist-copy {
  font-size: 16px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.86);
  padding-top: 8px;
  text-wrap: pretty;
}

.waitlist-box--ack .waitlist-lead {
  color: rgba(255, 255, 255, 0.92);
}

.waitlist-box--ack .waitlist-kicker-label {
  color: rgba(255, 255, 255, 0.82);
}

.waitlist-box--ack .waitlist-copy {
  color: rgba(255, 255, 255, 0.95);
}

.waitlist-box--ack .text-cta--light {
  color: #FFFFFF;
}

.waitlist-box--ack .text-cta--light:hover {
  color: #0F2A3D;
}

.waitlist-form button {
  flex: 0 0 auto;
  height: 60px;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  background: #B04E14;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.waitlist-form button[aria-busy="true"] {
  opacity: 0.72;
  cursor: wait;
}

.waitlist-done {
  background: #FFFFFF;
  color: #0F2A3D;
  border-radius: 10px;
  padding: 24px 24px 22px;
  box-shadow: 0 14px 34px rgba(15, 42, 61, 0.18);
  animation: waitlist-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes waitlist-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-box--ack,
  .waitlist-done {
    animation: none;
  }
}

.waitlist-done__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid #0F2A3D;
  padding-bottom: 10px;
}

.waitlist-done__title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
}

.waitlist-done__tag {
  font-size: 13px;
  color: #4A5A66;
}

.waitlist-done__row {
  display: flex;
  gap: 14px;
  padding: 16px 0 14px;
}

.waitlist-done__time {
  width: 46px;
  flex: 0 0 auto;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.waitlist-done__entry {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: #3E5462;
  text-wrap: pretty;
}

.waitlist-done__email {
  font-weight: 600;
  color: #0F2A3D;
  overflow-wrap: anywhere;
}

.waitlist-done__foot {
  border-top: 1px solid rgba(122, 138, 150, 0.28);
  padding-top: 14px;
  font-size: 13px;
  color: #4A5A66;
}

.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3.5vw, 52px) clamp(32px, 5vw, 72px);
}

.band-full {
  width: 100%;
}

@media (max-width: 1100px) {
  .hero-section,
  .split-section {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-copy,
  .split-section__copy {
    width: 100%;
    min-width: 0;
  }
  .hero-eyebrow-label {
    white-space: normal;
  }
  h1, h2, h3, h4, p, li, td, th,
  .hero-lede,
  .systems-live-title,
  .systems-live-line,
  .systems-chart-foot,
  .systems-picker > [role="button"] {
    text-wrap: wrap !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .hero-cta-row {
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 420px;
  }
  .hero-cta-row a {
    width: 100%;
    justify-content: center;
  }
  .hero-stores {
    width: 100%;
    padding-top: 32px;
  }
  .hero-dial-col {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
  .hero-dial-wrap {
    width: 100%;
    max-width: min(calc(100vw - 48px), 360px);
    container-type: inline-size;
  }
  .hero-dial-wrap svg {
    width: 100%;
    max-width: min(calc(100vw - 48px), 360px);
    height: auto;
    min-width: 0;
  }
  .hero-lede,
  .hero-copy,
  .guide-layout article {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .hero-dial-hub {
    padding-left: clamp(56px, 20vw, 100px) !important;
    padding-right: clamp(56px, 20vw, 100px) !important;
  }
  /* Capped against the dial itself so neither line reaches the ring. */
  .hero-dial-hub [data-hub-label] {
    font-size: 10px !important;
    max-width: 40cqw;
    min-height: 29px;
  }
  .hero-dial-time {
    font-size: 26px !important;
    line-height: 30px !important;
  }
  .waitlist-form {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .waitlist-form input[type="email"],
  .waitlist-form button {
    width: 100%;
    flex: none;
  }
  .hero-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    width: auto;
    justify-items: start;
    gap: 10px 16px;
  }
  .section-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 3vw, 24px) !important;
  }
  .section-intro__lead,
  .section-intro__body,
  .section-intro > h2,
  .section-intro > h3 {
    flex: none !important;
    width: 100%;
    max-width: none !important;
  }
  .section-intro__stat {
    align-self: flex-start;
    margin-left: 0;
    text-align: left;
  }
  .skipper-card {
    padding: 22px 20px 20px;
  }
  .skipper-card__title,
  .skipper-card__body {
    flex: none !important;
    width: 100%;
    max-width: none !important;
  }
  .systems-dashboard {
    padding: 20px 16px;
    gap: 24px;
  }
  .systems-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .systems-live {
    order: -1;
    padding: 18px 14px;
  }
  .systems-picker > [role="button"] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "dial copy"
      "dial stats";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    flex: none;
    padding: 12px 4px;
  }
  .systems-picker > [role="button"] > :first-child { grid-area: dial; }
  .systems-picker > [role="button"] > :first-child svg {
    width: 48px;
    height: 48px;
  }
  .systems-picker > [role="button"] > :nth-child(2) {
    grid-area: copy;
    flex: none;
  }
  .systems-picker-stat {
    grid-area: stats;
    font-size: 15px;
  }
  .systems-live-row:not(.systems-live-row--head) {
    flex: 0 0 auto;
  }
  .systems-live-row {
    gap: 14px;
    min-height: 64px;
    padding: 12px 0;
  }
  .systems-live-vals {
    width: auto;
    font-size: 17px;
  }
  .systems-layout,
  .systems-head,
  .systems-dashboard,
  .systems-copy,
  .systems-chart-panel {
    max-width: 100%;
    min-width: 0;
  }
  .systems-picker > [role="button"] > :first-child svg {
    width: 48px !important;
    height: 48px !important;
  }
}

.guide-layout article > div:has(> table) {
  max-width: 100%;
  min-width: 0;
}


/* Tablet: the dial and its legend sit side by side, so the stacked hero does
   not run on for another screenful. Below 600px there is no room, so the
   legend drops back under the dial. */
@media (min-width: 600px) and (max-width: 1100px) {
  .hero-dial-col {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 44px);
  }
  .hero-dial-wrap {
    flex: 0 1 360px;
  }
  .hero-legend {
    grid-template-columns: 1fr;
    flex: 0 1 auto;
    gap: 12px;
  }
}

@container hero-copy (max-width: 480px) {
  .hero-cta-row {
    flex-direction: column;
  }
  .hero-cta-row a {
    width: 100%;
    justify-content: center;
  }
}

.desk-shot {
  width: 100%;
  min-width: 0;
}
.desk-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(15, 42, 61, 0.14);
  background: #E9EEF2;
}
.desk-shots {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.guide-callout {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 26px 28px;
  margin: 34px 0 0;
  max-width: 100%;
  min-width: 0;
}
.guide-callout--note {
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0 0;
}

@media (max-width: 600px) {
  .guide-layout article > div[style*="padding:26px 28px"],
  .guide-layout article > div[style*="padding:20px 24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .guide-callout {
    padding: 18px 16px;
    margin-top: 24px;
  }
  .guide-callout--note {
    padding: 16px 16px;
  }
  .guide-layout article h1 {
    letter-spacing: -0.01em;
  }
  .guide-layout article > h1 + p {
    font-size: 18px !important;
    line-height: 28px !important;
  }
}